[
  {
    "path": ".biome-packages-sync/packages-sync.json",
    "content": "{\n  \"$schema\": \"https://biomejs.dev/schemas/2.3.10/schema.json\",\n  \"root\": false,\n  \"assist\": {\n    \"enabled\": true,\n    \"actions\": {\n      \"source\": {\n        \"organizeImports\": \"on\"\n      }\n    }\n  }\n}\n"
  },
  {
    "path": ".github/labeler.yml",
    "content": "\"area:apps/origin\":\n  - changed-files:\n      - any-glob-to-any-file: \"apps/origin/**\"\n\n\"area:apps/ui\":\n  - changed-files:\n      - any-glob-to-any-file: \"apps/ui/**\"\n\n\"area:apps/www\":\n  - changed-files:\n      - any-glob-to-any-file: \"apps/www/**\"\n\n\"pkg:ui\":\n  - changed-files:\n      - any-glob-to-any-file: \"packages/ui/**\"\n\n\"pkg:tsconfig\":\n  - changed-files:\n      - any-glob-to-any-file: \"packages/typescript-config/**\"\n\n\"area:config\":\n  - changed-files:\n      - any-glob-to-any-file: \".github/**\"\n      - any-glob-to-any-file: \"biome.json\"\n      - any-glob-to-any-file: \"turbo.json\"\n      - any-glob-to-any-file: \"tsconfig.json\"\n      - any-glob-to-any-file: \"bunfig.toml\"\n      - any-glob-to-any-file: \"lint-staged.config.mjs\"\n\n\"docs\":\n  - changed-files:\n      - any-glob-to-any-file: \"**/*.md\"\n\n\"deps\":\n  - changed-files:\n      - any-glob-to-any-file: \"package.json\"\n      - any-glob-to-any-file: \"bun.lock\"\n      - any-glob-to-any-file: \"packages/**/package.json\"\n"
  },
  {
    "path": ".github/workflows/build.yml",
    "content": "name: Build\n\non:\n  workflow_call:\n\nenv:\n  BUN_VERSION: 1.3.1\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup Bun\n        uses: oven-sh/setup-bun@v1\n        with:\n          bun-version: ${{ env.BUN_VERSION }}\n\n      - name: Cache dependencies\n        uses: actions/cache@v4\n        with:\n          path: |\n            ~/.bun/install/cache\n            node_modules\n          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}\n\n      - name: Install dependencies\n        run: bun install --frozen-lockfile\n\n      - name: Run build\n        run: bun run build\n"
  },
  {
    "path": ".github/workflows/ci.yml",
    "content": "name: CI\n\non:\n  push:\n    branches:\n      - main\n  pull_request:\n\nconcurrency:\n  group: ${{ github.workflow }}-${{ github.ref }}\n  cancel-in-progress: true\n\njobs:\n  format:\n    name: Format Check\n    uses: ./.github/workflows/format.yml\n    secrets: inherit\n\n  lint:\n    name: Lint\n    uses: ./.github/workflows/lint.yml\n    secrets: inherit\n\n  typecheck:\n    name: Typecheck\n    uses: ./.github/workflows/typecheck.yml\n    secrets: inherit\n\n  test:\n    name: Test\n    uses: ./.github/workflows/test.yml\n    secrets: inherit\n\n  build:\n    name: Build\n    needs: [lint, test, format, typecheck]\n    uses: ./.github/workflows/build.yml\n    secrets: inherit\n"
  },
  {
    "path": ".github/workflows/format.yml",
    "content": "name: Format\n\non:\n  workflow_call:\n\nenv:\n  BUN_VERSION: 1.3.1\n\njobs:\n  format:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup Bun\n        uses: oven-sh/setup-bun@v1\n        with:\n          bun-version: ${{ env.BUN_VERSION }}\n\n      - name: Cache dependencies\n        uses: actions/cache@v4\n        with:\n          path: |\n            ~/.bun/install/cache\n            node_modules\n          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}\n\n      - name: Install dependencies\n        run: bun install --frozen-lockfile\n\n      - name: Verify formatting\n        run: bunx biome check --linter-enabled=false .\n"
  },
  {
    "path": ".github/workflows/labeler.yml",
    "content": "name: PR Labeler\n\non:\n  pull_request:\n    types:\n      - opened\n      - synchronize\n      - reopened\n  pull_request_target:\n    types:\n      - opened\n      - synchronize\n      - reopened\n\njobs:\n  label:\n    runs-on: ubuntu-latest\n    permissions:\n      contents: read\n      pull-requests: write\n    steps:\n      - uses: actions/labeler@v5\n        with:\n          repo-token: ${{ secrets.GITHUB_TOKEN }}\n          configuration-path: .github/labeler.yml\n"
  },
  {
    "path": ".github/workflows/lint.yml",
    "content": "name: Lint\n\non:\n  workflow_call:\n\nenv:\n  BUN_VERSION: 1.3.1\n\njobs:\n  lint:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup Bun\n        uses: oven-sh/setup-bun@v1\n        with:\n          bun-version: ${{ env.BUN_VERSION }}\n\n      - name: Cache dependencies\n        uses: actions/cache@v4\n        with:\n          path: |\n            ~/.bun/install/cache\n            node_modules\n          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}\n\n      - name: Install dependencies\n        run: bun install --frozen-lockfile\n\n      - name: Run lint\n        run: bun run lint\n"
  },
  {
    "path": ".github/workflows/publish.yml",
    "content": "name: Publish Package\n\non:\n  workflow_dispatch:\n    inputs:\n      package:\n        description: Name of the package directory inside packages/\n        required: true\n        default: ui\n        type: choice\n        options:\n          - ui\n      release_type:\n        description: Semver bump type to apply before publishing\n        required: true\n        default: patch\n        type: choice\n        options:\n          - patch\n          - minor\n          - major\n\nconcurrency:\n  group: publish-${{ github.ref }}\n  cancel-in-progress: false\n\nenv:\n  BUN_VERSION: 1.3.1\n\njobs:\n  format:\n    uses: ./.github/workflows/format.yml\n    secrets: inherit\n\n  lint:\n    needs: format\n    uses: ./.github/workflows/lint.yml\n    secrets: inherit\n\n  test:\n    needs: lint\n    uses: ./.github/workflows/test.yml\n    secrets: inherit\n\n  build:\n    needs: [lint, test]\n    uses: ./.github/workflows/build.yml\n    secrets: inherit\n\n  publish:\n    needs: build\n    runs-on: ubuntu-latest\n    permissions:\n      contents: write\n      packages: write\n      id-token: write\n    env:\n      PACKAGE_DIR: packages/${{ inputs.package }}\n      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n\n      - name: Setup Bun\n        uses: oven-sh/setup-bun@v1\n        with:\n          bun-version: ${{ env.BUN_VERSION }}\n\n      - name: Install dependencies\n        run: bun install --frozen-lockfile\n\n      - name: Resolve package metadata\n        id: pkg\n        run: |\n          PACKAGE_JSON=\"${{ env.PACKAGE_DIR }}/package.json\"\n          if [ ! -f \"$PACKAGE_JSON\" ]; then\n            echo \"::error::Package manifest not found at $PACKAGE_JSON\"\n            exit 1\n          fi\n          NAME=$(node -p \"require('./${{ env.PACKAGE_DIR }}/package.json').name\")\n          VERSION=$(node -p \"require('./${{ env.PACKAGE_DIR }}/package.json').version\")\n          echo \"name=$NAME\" >> \"$GITHUB_OUTPUT\"\n          echo \"current_version=$VERSION\" >> \"$GITHUB_OUTPUT\"\n\n      - name: Build target package\n        run: bunx turbo run build --filter=${{ steps.pkg.outputs.name }}\n\n      - name: Bump package version\n        id: bump\n        working-directory: ${{ env.PACKAGE_DIR }}\n        run: |\n          npm version ${{ inputs.release_type }} --no-git-tag-version --no-commit > /dev/null\n          NEW_VERSION=$(node -p \"require('./package.json').version\")\n          echo \"version=$NEW_VERSION\" >> \"$GITHUB_OUTPUT\"\n\n      - name: Verify npm token\n        run: |\n          if [ -z \"${NODE_AUTH_TOKEN:-}\" ]; then\n            echo \"::error::NPM_TOKEN secret is not configured\"\n            exit 1\n          fi\n\n      - name: Publish to npm\n        working-directory: ${{ env.PACKAGE_DIR }}\n        env:\n          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n        run: npm publish --access public --provenance\n\n      - name: Commit version bump\n        run: |\n          git config user.name \"github-actions[bot]\"\n          git config user.email \"github-actions[bot]@users.noreply.github.com\"\n          git add \"${{ env.PACKAGE_DIR }}/package.json\"\n          git commit -m \"chore(release): ${{ steps.pkg.outputs.name }} v${{ steps.bump.outputs.version }}\"\n\n      - name: Push changes\n        run: |\n          git push origin HEAD:${GITHUB_REF_NAME}\n\n      - name: Tag release\n        run: |\n          TAG=\"${{ steps.pkg.outputs.name }}@${{ steps.bump.outputs.version }}\"\n          git tag \"$TAG\"\n          git push origin \"$TAG\"\n"
  },
  {
    "path": ".github/workflows/semantic-pull-requests.yml",
    "content": "name: \"Validate PRs\"\n\non:\n  pull_request_target:\n    types:\n      - opened\n      - reopened\n      - edited\n      - synchronize\n\npermissions:\n  pull-requests: write\n\njobs:\n  validate-pr:\n    name: Validate PR title\n    runs-on: ubuntu-latest\n    steps:\n      - uses: amannn/action-semantic-pull-request@v5\n        id: lint_pr_title\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n\n      - uses: marocchino/sticky-pull-request-comment@v2\n        # When the previous steps fails, the workflow would stop. By adding this\n        # condition you can continue the execution with the populated error message.\n        if: always() && (steps.lint_pr_title.outputs.error_message != null)\n        with:\n          header: pr-title-lint-error\n          message: |\n            Hey there and thank you for opening this pull request! 👋🏼\n\n            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.\n\n            Details:\n\n            ```\n            ${{ steps.lint_pr_title.outputs.error_message }}\n            ```\n"
  },
  {
    "path": ".github/workflows/test.yml",
    "content": "name: Test\n\non:\n  workflow_call:\n\nenv:\n  BUN_VERSION: 1.3.1\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup Bun\n        uses: oven-sh/setup-bun@v1\n        with:\n          bun-version: ${{ env.BUN_VERSION }}\n\n      - name: Cache dependencies\n        uses: actions/cache@v4\n        with:\n          path: |\n            ~/.bun/install/cache\n            node_modules\n          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}\n\n      - name: Install dependencies\n        run: bun install --frozen-lockfile\n\n      - name: Run tests\n        run: bun run test\n"
  },
  {
    "path": ".github/workflows/typecheck.yml",
    "content": "name: Typecheck\n\non:\n  workflow_call:\n\nenv:\n  BUN_VERSION: 1.3.1\n\njobs:\n  typecheck:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup Bun\n        uses: oven-sh/setup-bun@v1\n        with:\n          bun-version: ${{ env.BUN_VERSION }}\n\n      - name: Cache dependencies\n        uses: actions/cache@v4\n        with:\n          path: |\n            ~/.bun/install/cache\n            node_modules\n          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}\n\n      - name: Install dependencies\n        run: bun install --frozen-lockfile\n\n      - name: Run typecheck\n        run: bun run typecheck\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# Local env files\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# Testing\ncoverage\n\n# Turbo\n.turbo\n\n# Vercel\n.vercel\n\n# Build Outputs\n.next/\nout/\nbuild\ndist\n\n\n# Debug\nnpm-debug.log*\n\n# Misc\n.DS_Store\n*.pem\n"
  },
  {
    "path": ".husky/pre-commit",
    "content": "bunx lint-staged\n"
  },
  {
    "path": ".husky/pre-push",
    "content": "#!/bin/sh\n# Format all files first\nbun format:all || exit $?\n\n# Then build registry and sync UI components\ncd apps/ui\nbun registry:build && bun ui:sync\n\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"eslint.workingDirectories\": [\n    {\n      \"mode\": \"auto\"\n    }\n  ]\n}\n"
  },
  {
    "path": ".zed/settings.json",
    "content": "{\n  \"code_actions_on_format\": {\n    \"source.fixAll.biome\": true,\n    \"source.organizeImports.biome\": true\n  },\n  \"format_on_save\": \"on\",\n  \"formatter\": {\n    \"language_server\": {\n      \"name\": \"biome\"\n    }\n  }\n}\n"
  },
  {
    "path": "AGENTS.md",
    "content": "# AGENTS.md\n\nGuidelines for AI agents working on this codebase.\n\n## Main Documentation\n\nThe comprehensive agent guidelines for this repository are located in:\n\n**[apps/ui/AGENTS.md](apps/ui/AGENTS.md)**\n"
  },
  {
    "path": "LICENSE",
    "content": "                    GNU AFFERO GENERAL PUBLIC LICENSE\n                       Version 3, 19 November 2007\n\n Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>\n Everyone is permitted to copy and distribute verbatim copies\n of this license document, but changing it is not allowed.\n\n                            Preamble\n\n  The GNU Affero General Public License is a free, copyleft license for\nsoftware and other kinds of works, specifically designed to ensure\ncooperation with the community in the case of network server software.\n\n  The licenses for most software and other practical works are designed\nto take away your freedom to share and change the works.  By contrast,\nour General Public Licenses are intended to guarantee your freedom to\nshare and change all versions of a program--to make sure it remains free\nsoftware for all its users.\n\n  When we speak of free software, we are referring to freedom, not\nprice.  Our General Public Licenses are designed to make sure that you\nhave the freedom to distribute copies of free software (and charge for\nthem if you wish), that you receive source code or can get it if you\nwant it, that you can change the software or use pieces of it in new\nfree programs, and that you know you can do these things.\n\n  Developers that use our General Public Licenses protect your rights\nwith two steps: (1) assert copyright on the software, and (2) offer\nyou this License which gives you legal permission to copy, distribute\nand/or modify the software.\n\n  A secondary benefit of defending all users' freedom is that\nimprovements made in alternate versions of the program, if they\nreceive widespread use, become available for other developers to\nincorporate.  Many developers of free software are heartened and\nencouraged by the resulting cooperation.  However, in the case of\nsoftware used on network servers, this result may fail to come about.\nThe GNU General Public License permits making a modified version and\nletting the public access it on a server without ever releasing its\nsource code to the public.\n\n  The GNU Affero General Public License is designed specifically to\nensure that, in such cases, the modified source code becomes available\nto the community.  It requires the operator of a network server to\nprovide the source code of the modified version running there to the\nusers of that server.  Therefore, public use of a modified version, on\na publicly accessible server, gives the public access to the source\ncode of the modified version.\n\n  An older license, called the Affero General Public License and\npublished by Affero, was designed to accomplish similar goals.  This is\na different license, not a version of the Affero GPL, but Affero has\nreleased a new version of the Affero GPL which permits relicensing under\nthis license.\n\n  The precise terms and conditions for copying, distribution and\nmodification follow.\n\n                       TERMS AND CONDITIONS\n\n  0. Definitions.\n\n  \"This License\" refers to version 3 of the GNU Affero General Public License.\n\n  \"Copyright\" also means copyright-like laws that apply to other kinds of\nworks, such as semiconductor masks.\n\n  \"The Program\" refers to any copyrightable work licensed under this\nLicense.  Each licensee is addressed as \"you\".  \"Licensees\" and\n\"recipients\" may be individuals or organizations.\n\n  To \"modify\" a work means to copy from or adapt all or part of the work\nin a fashion requiring copyright permission, other than the making of an\nexact copy.  The resulting work is called a \"modified version\" of the\nearlier work or a work \"based on\" the earlier work.\n\n  A \"covered work\" means either the unmodified Program or a work based\non the Program.\n\n  To \"propagate\" a work means to do anything with it that, without\npermission, would make you directly or secondarily liable for\ninfringement under applicable copyright law, except executing it on a\ncomputer or modifying a private copy.  Propagation includes copying,\ndistribution (with or without modification), making available to the\npublic, and in some countries other activities as well.\n\n  To \"convey\" a work means any kind of propagation that enables other\nparties to make or receive copies.  Mere interaction with a user through\na computer network, with no transfer of a copy, is not conveying.\n\n  An interactive user interface displays \"Appropriate Legal Notices\"\nto the extent that it includes a convenient and prominently visible\nfeature that (1) displays an appropriate copyright notice, and (2)\ntells the user that there is no warranty for the work (except to the\nextent that warranties are provided), that licensees may convey the\nwork under this License, and how to view a copy of this License.  If\nthe interface presents a list of user commands or options, such as a\nmenu, a prominent item in the list meets this criterion.\n\n  1. Source Code.\n\n  The \"source code\" for a work means the preferred form of the work\nfor making modifications to it.  \"Object code\" means any non-source\nform of a work.\n\n  A \"Standard Interface\" means an interface that either is an official\nstandard defined by a recognized standards body, or, in the case of\ninterfaces specified for a particular programming language, one that\nis widely used among developers working in that language.\n\n  The \"System Libraries\" of an executable work include anything, other\nthan the work as a whole, that (a) is included in the normal form of\npackaging a Major Component, but which is not part of that Major\nComponent, and (b) serves only to enable use of the work with that\nMajor Component, or to implement a Standard Interface for which an\nimplementation is available to the public in source code form.  A\n\"Major Component\", in this context, means a major essential component\n(kernel, window system, and so on) of the specific operating system\n(if any) on which the executable work runs, or a compiler used to\nproduce the work, or an object code interpreter used to run it.\n\n  The \"Corresponding Source\" for a work in object code form means all\nthe source code needed to generate, install, and (for an executable\nwork) run the object code and to modify the work, including scripts to\ncontrol those activities.  However, it does not include the work's\nSystem Libraries, or general-purpose tools or generally available free\nprograms which are used unmodified in performing those activities but\nwhich are not part of the work.  For example, Corresponding Source\nincludes interface definition files associated with source files for\nthe work, and the source code for shared libraries and dynamically\nlinked subprograms that the work is specifically designed to require,\nsuch as by intimate data communication or control flow between those\nsubprograms and other parts of the work.\n\n  The Corresponding Source need not include anything that users\ncan regenerate automatically from other parts of the Corresponding\nSource.\n\n  The Corresponding Source for a work in source code form is that\nsame work.\n\n  2. Basic Permissions.\n\n  All rights granted under this License are granted for the term of\ncopyright on the Program, and are irrevocable provided the stated\nconditions are met.  This License explicitly affirms your unlimited\npermission to run the unmodified Program.  The output from running a\ncovered work is covered by this License only if the output, given its\ncontent, constitutes a covered work.  This License acknowledges your\nrights of fair use or other equivalent, as provided by copyright law.\n\n  You may make, run and propagate covered works that you do not\nconvey, without conditions so long as your license otherwise remains\nin force.  You may convey covered works to others for the sole purpose\nof having them make modifications exclusively for you, or provide you\nwith facilities for running those works, provided that you comply with\nthe terms of this License in conveying all material for which you do\nnot control copyright.  Those thus making or running the covered works\nfor you must do so exclusively on your behalf, under your direction\nand control, on terms that prohibit them from making any copies of\nyour copyrighted material outside their relationship with you.\n\n  Conveying under any other circumstances is permitted solely under\nthe conditions stated below.  Sublicensing is not allowed; section 10\nmakes it unnecessary.\n\n  3. Protecting Users' Legal Rights From Anti-Circumvention Law.\n\n  No covered work shall be deemed part of an effective technological\nmeasure under any applicable law fulfilling obligations under article\n11 of the WIPO copyright treaty adopted on 20 December 1996, or\nsimilar laws prohibiting or restricting circumvention of such\nmeasures.\n\n  When you convey a covered work, you waive any legal power to forbid\ncircumvention of technological measures to the extent such circumvention\nis effected by exercising rights under this License with respect to\nthe covered work, and you disclaim any intention to limit operation or\nmodification of the work as a means of enforcing, against the work's\nusers, your or third parties' legal rights to forbid circumvention of\ntechnological measures.\n\n  4. Conveying Verbatim Copies.\n\n  You may convey verbatim copies of the Program's source code as you\nreceive it, in any medium, provided that you conspicuously and\nappropriately publish on each copy an appropriate copyright notice;\nkeep intact all notices stating that this License and any\nnon-permissive terms added in accord with section 7 apply to the code;\nkeep intact all notices of the absence of any warranty; and give all\nrecipients a copy of this License along with the Program.\n\n  You may charge any price or no price for each copy that you convey,\nand you may offer support or warranty protection for a fee.\n\n  5. Conveying Modified Source Versions.\n\n  You may convey a work based on the Program, or the modifications to\nproduce it from the Program, in the form of source code under the\nterms of section 4, provided that you also meet all of these conditions:\n\n    a) The work must carry prominent notices stating that you modified\n    it, and giving a relevant date.\n\n    b) The work must carry prominent notices stating that it is\n    released under this License and any conditions added under section\n    7.  This requirement modifies the requirement in section 4 to\n    \"keep intact all notices\".\n\n    c) You must license the entire work, as a whole, under this\n    License to anyone who comes into possession of a copy.  This\n    License will therefore apply, along with any applicable section 7\n    additional terms, to the whole of the work, and all its parts,\n    regardless of how they are packaged.  This License gives no\n    permission to license the work in any other way, but it does not\n    invalidate such permission if you have separately received it.\n\n    d) If the work has interactive user interfaces, each must display\n    Appropriate Legal Notices; however, if the Program has interactive\n    interfaces that do not display Appropriate Legal Notices, your\n    work need not make them do so.\n\n  A compilation of a covered work with other separate and independent\nworks, which are not by their nature extensions of the covered work,\nand which are not combined with it such as to form a larger program,\nin or on a volume of a storage or distribution medium, is called an\n\"aggregate\" if the compilation and its resulting copyright are not\nused to limit the access or legal rights of the compilation's users\nbeyond what the individual works permit.  Inclusion of a covered work\nin an aggregate does not cause this License to apply to the other\nparts of the aggregate.\n\n  6. Conveying Non-Source Forms.\n\n  You may convey a covered work in object code form under the terms\nof sections 4 and 5, provided that you also convey the\nmachine-readable Corresponding Source under the terms of this License,\nin one of these ways:\n\n    a) Convey the object code in, or embodied in, a physical product\n    (including a physical distribution medium), accompanied by the\n    Corresponding Source fixed on a durable physical medium\n    customarily used for software interchange.\n\n    b) Convey the object code in, or embodied in, a physical product\n    (including a physical distribution medium), accompanied by a\n    written offer, valid for at least three years and valid for as\n    long as you offer spare parts or customer support for that product\n    model, to give anyone who possesses the object code either (1) a\n    copy of the Corresponding Source for all the software in the\n    product that is covered by this License, on a durable physical\n    medium customarily used for software interchange, for a price no\n    more than your reasonable cost of physically performing this\n    conveying of source, or (2) access to copy the\n    Corresponding Source from a network server at no charge.\n\n    c) Convey individual copies of the object code with a copy of the\n    written offer to provide the Corresponding Source.  This\n    alternative is allowed only occasionally and noncommercially, and\n    only if you received the object code with such an offer, in accord\n    with subsection 6b.\n\n    d) Convey the object code by offering access from a designated\n    place (gratis or for a charge), and offer equivalent access to the\n    Corresponding Source in the same way through the same place at no\n    further charge.  You need not require recipients to copy the\n    Corresponding Source along with the object code.  If the place to\n    copy the object code is a network server, the Corresponding Source\n    may be on a different server (operated by you or a third party)\n    that supports equivalent copying facilities, provided you maintain\n    clear directions next to the object code saying where to find the\n    Corresponding Source.  Regardless of what server hosts the\n    Corresponding Source, you remain obligated to ensure that it is\n    available for as long as needed to satisfy these requirements.\n\n    e) Convey the object code using peer-to-peer transmission, provided\n    you inform other peers where the object code and Corresponding\n    Source of the work are being offered to the general public at no\n    charge under subsection 6d.\n\n  A separable portion of the object code, whose source code is excluded\nfrom the Corresponding Source as a System Library, need not be\nincluded in conveying the object code work.\n\n  A \"User Product\" is either (1) a \"consumer product\", which means any\ntangible personal property which is normally used for personal, family,\nor household purposes, or (2) anything designed or sold for incorporation\ninto a dwelling.  In determining whether a product is a consumer product,\ndoubtful cases shall be resolved in favor of coverage.  For a particular\nproduct received by a particular user, \"normally used\" refers to a\ntypical or common use of that class of product, regardless of the status\nof the particular user or of the way in which the particular user\nactually uses, or expects or is expected to use, the product.  A product\nis a consumer product regardless of whether the product has substantial\ncommercial, industrial or non-consumer uses, unless such uses represent\nthe only significant mode of use of the product.\n\n  \"Installation Information\" for a User Product means any methods,\nprocedures, authorization keys, or other information required to install\nand execute modified versions of a covered work in that User Product from\na modified version of its Corresponding Source.  The information must\nsuffice to ensure that the continued functioning of the modified object\ncode is in no case prevented or interfered with solely because\nmodification has been made.\n\n  If you convey an object code work under this section in, or with, or\nspecifically for use in, a User Product, and the conveying occurs as\npart of a transaction in which the right of possession and use of the\nUser Product is transferred to the recipient in perpetuity or for a\nfixed term (regardless of how the transaction is characterized), the\nCorresponding Source conveyed under this section must be accompanied\nby the Installation Information.  But this requirement does not apply\nif neither you nor any third party retains the ability to install\nmodified object code on the User Product (for example, the work has\nbeen installed in ROM).\n\n  The requirement to provide Installation Information does not include a\nrequirement to continue to provide support service, warranty, or updates\nfor a work that has been modified or installed by the recipient, or for\nthe User Product in which it has been modified or installed.  Access to a\nnetwork may be denied when the modification itself materially and\nadversely affects the operation of the network or violates the rules and\nprotocols for communication across the network.\n\n  Corresponding Source conveyed, and Installation Information provided,\nin accord with this section must be in a format that is publicly\ndocumented (and with an implementation available to the public in\nsource code form), and must require no special password or key for\nunpacking, reading or copying.\n\n  7. Additional Terms.\n\n  \"Additional permissions\" are terms that supplement the terms of this\nLicense by making exceptions from one or more of its conditions.\nAdditional permissions that are applicable to the entire Program shall\nbe treated as though they were included in this License, to the extent\nthat they are valid under applicable law.  If additional permissions\napply only to part of the Program, that part may be used separately\nunder those permissions, but the entire Program remains governed by\nthis License without regard to the additional permissions.\n\n  When you convey a copy of a covered work, you may at your option\nremove any additional permissions from that copy, or from any part of\nit.  (Additional permissions may be written to require their own\nremoval in certain cases when you modify the work.)  You may place\nadditional permissions on material, added by you to a covered work,\nfor which you have or can give appropriate copyright permission.\n\n  Notwithstanding any other provision of this License, for material you\nadd to a covered work, you may (if authorized by the copyright holders of\nthat material) supplement the terms of this License with terms:\n\n    a) Disclaiming warranty or limiting liability differently from the\n    terms of sections 15 and 16 of this License; or\n\n    b) Requiring preservation of specified reasonable legal notices or\n    author attributions in that material or in the Appropriate Legal\n    Notices displayed by works containing it; or\n\n    c) Prohibiting misrepresentation of the origin of that material, or\n    requiring that modified versions of such material be marked in\n    reasonable ways as different from the original version; or\n\n    d) Limiting the use for publicity purposes of names of licensors or\n    authors of the material; or\n\n    e) Declining to grant rights under trademark law for use of some\n    trade names, trademarks, or service marks; or\n\n    f) Requiring indemnification of licensors and authors of that\n    material by anyone who conveys the material (or modified versions of\n    it) with contractual assumptions of liability to the recipient, for\n    any liability that these contractual assumptions directly impose on\n    those licensors and authors.\n\n  All other non-permissive additional terms are considered \"further\nrestrictions\" within the meaning of section 10.  If the Program as you\nreceived it, or any part of it, contains a notice stating that it is\ngoverned by this License along with a term that is a further\nrestriction, you may remove that term.  If a license document contains\na further restriction but permits relicensing or conveying under this\nLicense, you may add to a covered work material governed by the terms\nof that license document, provided that the further restriction does\nnot survive such relicensing or conveying.\n\n  If you add terms to a covered work in accord with this section, you\nmust place, in the relevant source files, a statement of the\nadditional terms that apply to those files, or a notice indicating\nwhere to find the applicable terms.\n\n  Additional terms, permissive or non-permissive, may be stated in the\nform of a separately written license, or stated as exceptions;\nthe above requirements apply either way.\n\n  8. Termination.\n\n  You may not propagate or modify a covered work except as expressly\nprovided under this License.  Any attempt otherwise to propagate or\nmodify it is void, and will automatically terminate your rights under\nthis License (including any patent licenses granted under the third\nparagraph of section 11).\n\n  However, if you cease all violation of this License, then your\nlicense from a particular copyright holder is reinstated (a)\nprovisionally, unless and until the copyright holder explicitly and\nfinally terminates your license, and (b) permanently, if the copyright\nholder fails to notify you of the violation by some reasonable means\nprior to 60 days after the cessation.\n\n  Moreover, your license from a particular copyright holder is\nreinstated permanently if the copyright holder notifies you of the\nviolation by some reasonable means, this is the first time you have\nreceived notice of violation of this License (for any work) from that\ncopyright holder, and you cure the violation prior to 30 days after\nyour receipt of the notice.\n\n  Termination of your rights under this section does not terminate the\nlicenses of parties who have received copies or rights from you under\nthis License.  If your rights have been terminated and not permanently\nreinstated, you do not qualify to receive new licenses for the same\nmaterial under section 10.\n\n  9. Acceptance Not Required for Having Copies.\n\n  You are not required to accept this License in order to receive or\nrun a copy of the Program.  Ancillary propagation of a covered work\noccurring solely as a consequence of using peer-to-peer transmission\nto receive a copy likewise does not require acceptance.  However,\nnothing other than this License grants you permission to propagate or\nmodify any covered work.  These actions infringe copyright if you do\nnot accept this License.  Therefore, by modifying or propagating a\ncovered work, you indicate your acceptance of this License to do so.\n\n  10. Automatic Licensing of Downstream Recipients.\n\n  Each time you convey a covered work, the recipient automatically\nreceives a license from the original licensors, to run, modify and\npropagate that work, subject to this License.  You are not responsible\nfor enforcing compliance by third parties with this License.\n\n  An \"entity transaction\" is a transaction transferring control of an\norganization, or substantially all assets of one, or subdividing an\norganization, or merging organizations.  If propagation of a covered\nwork results from an entity transaction, each party to that\ntransaction who receives a copy of the work also receives whatever\nlicenses to the work the party's predecessor in interest had or could\ngive under the previous paragraph, plus a right to possession of the\nCorresponding Source of the work from the predecessor in interest, if\nthe predecessor has it or can get it with reasonable efforts.\n\n  You may not impose any further restrictions on the exercise of the\nrights granted or affirmed under this License.  For example, you may\nnot impose a license fee, royalty, or other charge for exercise of\nrights granted under this License, and you may not initiate litigation\n(including a cross-claim or counterclaim in a lawsuit) alleging that\nany patent claim is infringed by making, using, selling, offering for\nsale, or importing the Program or any portion of it.\n\n  11. Patents.\n\n  A \"contributor\" is a copyright holder who authorizes use under this\nLicense of the Program or a work on which the Program is based.  The\nwork thus licensed is called the contributor's \"contributor version\".\n\n  A contributor's \"essential patent claims\" are all patent claims\nowned or controlled by the contributor, whether already acquired or\nhereafter acquired, that would be infringed by some manner, permitted\nby this License, of making, using, or selling its contributor version,\nbut do not include claims that would be infringed only as a\nconsequence of further modification of the contributor version.  For\npurposes of this definition, \"control\" includes the right to grant\npatent sublicenses in a manner consistent with the requirements of\nthis License.\n\n  Each contributor grants you a non-exclusive, worldwide, royalty-free\npatent license under the contributor's essential patent claims, to\nmake, use, sell, offer for sale, import and otherwise run, modify and\npropagate the contents of its contributor version.\n\n  In the following three paragraphs, a \"patent license\" is any express\nagreement or commitment, however denominated, not to enforce a patent\n(such as an express permission to practice a patent or covenant not to\nsue for patent infringement).  To \"grant\" such a patent license to a\nparty means to make such an agreement or commitment not to enforce a\npatent against the party.\n\n  If you convey a covered work, knowingly relying on a patent license,\nand the Corresponding Source of the work is not available for anyone\nto copy, free of charge and under the terms of this License, through a\npublicly available network server or other readily accessible means,\nthen you must either (1) cause the Corresponding Source to be so\navailable, or (2) arrange to deprive yourself of the benefit of the\npatent license for this particular work, or (3) arrange, in a manner\nconsistent with the requirements of this License, to extend the patent\nlicense to downstream recipients.  \"Knowingly relying\" means you have\nactual knowledge that, but for the patent license, your conveying the\ncovered work in a country, or your recipient's use of the covered work\nin a country, would infringe one or more identifiable patents in that\ncountry that you have reason to believe are valid.\n\n  If, pursuant to or in connection with a single transaction or\narrangement, you convey, or propagate by procuring conveyance of, a\ncovered work, and grant a patent license to some of the parties\nreceiving the covered work authorizing them to use, propagate, modify\nor convey a specific copy of the covered work, then the patent license\nyou grant is automatically extended to all recipients of the covered\nwork and works based on it.\n\n  A patent license is \"discriminatory\" if it does not include within\nthe scope of its coverage, prohibits the exercise of, or is\nconditioned on the non-exercise of one or more of the rights that are\nspecifically granted under this License.  You may not convey a covered\nwork if you are a party to an arrangement with a third party that is\nin the business of distributing software, under which you make payment\nto the third party based on the extent of your activity of conveying\nthe work, and under which the third party grants, to any of the\nparties who would receive the covered work from you, a discriminatory\npatent license (a) in connection with copies of the covered work\nconveyed by you (or copies made from those copies), or (b) primarily\nfor and in connection with specific products or compilations that\ncontain the covered work, unless you entered into that arrangement,\nor that patent license was granted, prior to 28 March 2007.\n\n  Nothing in this License shall be construed as excluding or limiting\nany implied license or other defenses to infringement that may\notherwise be available to you under applicable patent law.\n\n  12. No Surrender of Others' Freedom.\n\n  If conditions are imposed on you (whether by court order, agreement or\notherwise) that contradict the conditions of this License, they do not\nexcuse you from the conditions of this License.  If you cannot convey a\ncovered work so as to satisfy simultaneously your obligations under this\nLicense and any other pertinent obligations, then as a consequence you may\nnot convey it at all.  For example, if you agree to terms that obligate you\nto collect a royalty for further conveying from those to whom you convey\nthe Program, the only way you could satisfy both those terms and this\nLicense would be to refrain entirely from conveying the Program.\n\n  13. Remote Network Interaction; Use with the GNU General Public License.\n\n  Notwithstanding any other provision of this License, if you modify the\nProgram, your modified version must prominently offer all users\ninteracting with it remotely through a computer network (if your version\nsupports such interaction) an opportunity to receive the Corresponding\nSource of your version by providing access to the Corresponding Source\nfrom a network server at no charge, through some standard or customary\nmeans of facilitating copying of software.  This Corresponding Source\nshall include the Corresponding Source for any work covered by version 3\nof the GNU General Public License that is incorporated pursuant to the\nfollowing paragraph.\n\n  Notwithstanding any other provision of this License, you have\npermission to link or combine any covered work with a work licensed\nunder version 3 of the GNU General Public License into a single\ncombined work, and to convey the resulting work.  The terms of this\nLicense will continue to apply to the part which is the covered work,\nbut the work with which it is combined will remain governed by version\n3 of the GNU General Public License.\n\n  14. Revised Versions of this License.\n\n  The Free Software Foundation may publish revised and/or new versions of\nthe GNU Affero General Public License from time to time.  Such new versions\nwill be similar in spirit to the present version, but may differ in detail to\naddress new problems or concerns.\n\n  Each version is given a distinguishing version number.  If the\nProgram specifies that a certain numbered version of the GNU Affero General\nPublic License \"or any later version\" applies to it, you have the\noption of following the terms and conditions either of that numbered\nversion or of any later version published by the Free Software\nFoundation.  If the Program does not specify a version number of the\nGNU Affero General Public License, you may choose any version ever published\nby the Free Software Foundation.\n\n  If the Program specifies that a proxy can decide which future\nversions of the GNU Affero General Public License can be used, that proxy's\npublic statement of acceptance of a version permanently authorizes you\nto choose that version for the Program.\n\n  Later license versions may give you additional or different\npermissions.  However, no additional obligations are imposed on any\nauthor or copyright holder as a result of your choosing to follow a\nlater version.\n\n  15. Disclaimer of Warranty.\n\n  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY\nAPPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT\nHOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM \"AS IS\" WITHOUT WARRANTY\nOF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,\nTHE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR\nPURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM\nIS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF\nALL NECESSARY SERVICING, REPAIR OR CORRECTION.\n\n  16. Limitation of Liability.\n\n  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING\nWILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS\nTHE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY\nGENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE\nUSE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF\nDATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD\nPARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),\nEVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF\nSUCH DAMAGES.\n\n  17. Interpretation of Sections 15 and 16.\n\n  If the disclaimer of warranty and limitation of liability provided\nabove cannot be given local legal effect according to their terms,\nreviewing courts shall apply local law that most closely approximates\nan absolute waiver of all civil liability in connection with the\nProgram, unless a warranty or assumption of liability accompanies a\ncopy of the Program in return for a fee.\n\n                     END OF TERMS AND CONDITIONS\n\n            How to Apply These Terms to Your New Programs\n\n  If you develop a new program, and you want it to be of the greatest\npossible use to the public, the best way to achieve this is to make it\nfree software which everyone can redistribute and change under these terms.\n\n  To do so, attach the following notices to the program.  It is safest\nto attach them to the start of each source file to most effectively\nstate the exclusion of warranty; and each file should have at least\nthe \"copyright\" line and a pointer to where the full notice is found.\n\n    <one line to give the program's name and a brief idea of what it does.>\n    Copyright (C) <year>  <name of author>\n\n    This program is free software: you can redistribute it and/or modify\n    it under the terms of the GNU Affero General Public License as published\n    by the Free Software Foundation, either version 3 of the License, or\n    (at your option) any later version.\n\n    This program is distributed in the hope that it will be useful,\n    but WITHOUT ANY WARRANTY; without even the implied warranty of\n    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n    GNU Affero General Public License for more details.\n\n    You should have received a copy of the GNU Affero General Public License\n    along with this program.  If not, see <https://www.gnu.org/licenses/>.\n\nAlso add information on how to contact you by electronic and paper mail.\n\n  If your software can interact with users remotely through a computer\nnetwork, you should also make sure that it provides a way for users to\nget its source.  For example, if your program is a web application, its\ninterface could display a \"Source\" link that leads users to an archive\nof the code.  There are many ways you could offer source, and different\nsolutions will be better for different programs; see section 13 for the\nspecific requirements.\n\n  You should also get your employer (if you work as a programmer) or school,\nif any, to sign a \"copyright disclaimer\" for the program, if necessary.\nFor more information on this, and how to apply and follow the GNU AGPL, see\n<https://www.gnu.org/licenses/>."
  },
  {
    "path": "LICENSING.md",
    "content": "# Licensing\n\nThis repository uses a mixed licensing approach. The default license for this project is [AGPLv3.0](LICENSE).\n\n## MIT\n\nThe following directory and their subdirectories are licensed under their original\n\n```\napps/origin/\napps/ui/\n```\n\n"
  },
  {
    "path": "README.md",
    "content": "![coss.com](https://github.com/user-attachments/assets/56dfe7f7-85b7-44ee-b89a-1c30c5c4a156)\n\n<h3 align=\"center\">coss.com (formerly Origin UI)</h3>\n<p align=\"center\">The <strong>everything but AI</strong> company.</p>\n\n## About the Project\n\ncoss.com is the new holding company of [cal.com](https://cal.com), the pioneers of open source scheduling infrastructure. Our mission is to build a home for amazing open source projects, giving them the support they need to grow and succeed.\n\nWe're building the coss stack, a one line `npm install @coss` package that includes everything you need to build your application, from email, SMS, calendar APIs, scheduling, video conferencing, notifications and more.\n\n## Repository Overview\n\nThis repository contains multiple products and applications that make up the coss.com ecosystem:\n\n### Apps and Packages\n\n- **`apps/www/`** - Main coss.com website\n- **`apps/ui/`** - coss ui component library and documentation\n- **`apps/origin/`** - Legacy Origin UI components (pre-acquisition)\n- **`packages/ui/`** - Shared UI components package\n- **`packages/typescript-config/`** - TypeScript configurations\n- **`biome.json`** - Shared Biome configuration for linting and formatting\n\nEach package/app is 100% [TypeScript](https://www.typescriptlang.org/).\n\n### Environment Variables\n\nThis monorepo contains multiple Next.js applications that are designed to link to each other. For the navigation to work correctly, you must set up environment variables for both local development and production deployments.\n\n#### Local Development\n\nFor local development, create a `.env.local` file in each of the app directories with the corresponding variables.\n\n1.  **`www` app**\n\n    This app needs to know the URLs of the other apps. Create a file at `apps/www/.env.local`:\n\n    ```sh\n    # apps/www/.env.local\n    NEXT_PUBLIC_APP_URL=http://localhost:3000\n    NEXT_PUBLIC_COSS_UI_URL=http://localhost:4000/ui\n    ```\n\n2.  **`ui` app**\n\n    This app needs to know the URLs of the other apps. Create a file at `apps/ui/.env.local`:\n\n    ```sh\n    # apps/ui/.env.local\n    NEXT_PUBLIC_APP_URL=http://localhost:4000/ui\n    NEXT_PUBLIC_COSS_URL=http://localhost:3000\n    NEXT_PUBLIC_ORIGIN_URL=http://localhost:4001\n    ```\n\n3.  **`origin` app**\n\n    This app needs to know the URLs of the other apps. Create a file at `apps/origin/.env.local`:\n\n    ```sh\n    # apps/origin/.env.local\n    NEXT_PUBLIC_APP_URL=http://localhost:4001/origin\n    NEXT_PUBLIC_COSS_URL=http://localhost:3000\n    NEXT_PUBLIC_COSS_UI_URL=http://localhost:4000/ui\n    ```\n\n> [!NOTE]\n> Turborepo is configured to watch for changes in `.env*` files, so it will automatically invalidate the cache when these variables change.\n\n### Development\n\nThis Turborepo has some additional tools already setup for you:\n\n- [TypeScript](https://www.typescriptlang.org/) for static type checking\n- [Biome](https://biomejs.dev/) for linting and formatting\n\n#### Build\n\nTo build all apps and packages:\n\n```sh\nbun run build\n```\n\nTo build a specific app:\n\n```sh\nbun run build --filter=www\nbun run build --filter=ui\nbun run build --filter=origin\n```\n\n#### Develop\n\nTo develop all apps and packages:\n\n```sh\nbun run dev\n```\n\nTo develop a specific app:\n\n```sh\nbun run dev --filter=www\nbun run dev --filter=ui\nbun run dev --filter=origin\n```\n\n## coss ui\n\n**coss ui** is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of [Base UI](https://base-ui.com/) and styled with [Tailwind CSS](https://tailwindcss.com/), it's designed for you to copy, paste, and own.\n\nWe think Base UI is the best foundation for modern web applications. We've taken its powerful, unstyled primitives and given them a design system that's ready to go, right out of the box.\n\nThis is the component library we'll be progressively adopting for [cal.com](https://cal.com). We're building it in the open for anyone who wants to create beautiful, reliable user interfaces.\n\n### Origin UI Acquisition\n\nThis repository also includes the **Origin UI** components as a legacy snapshot. Origin UI was a pre-acquisition collection of Radix-based, shadcn-style components that remains available for use, but with limited support and maintenance. Active development now focuses on the new [Particles](https://coss.com/ui/particles) components built on the coss ui primitives.\n\n### Contributing to coss ui\n\nWe're always looking for contributors to help improve our UI components. Whether it's a bug report, a new feature, or a documentation update, we appreciate your help.\n\nPlease see our [Contributing Guidelines](apps/ui/CONTRIBUTING.md) for more information on how to get involved.\n\n## Licensing\n\nThis repository uses a mixed licensing approach. The default license for this project is [AGPLv3.0](LICENSE).\n\n- **MIT**: The `apps/origin/` and `apps/ui/` directories are licensed under their original MIT license\n- **AGPLv3**: All other directories are licensed under the GNU Affero General Public License v3.0\n\nFor detailed information, see our [Licensing documentation](LICENSING.md).\n\n## Acknowledgements\n\nSpecial thanks to:\n\n- **[Tailwind CSS](https://tailwindcss.com/)** - For the utility-first CSS framework that powers our design system\n- **[Base UI](https://base-ui.com/)** - For providing the robust, accessible primitives that form the foundation of our components\n- **[shadcn/ui](https://ui.shadcn.com/)** - For inspiring our copy-paste approach and component philosophy\n- **[Fumadocs](https://fumadocs.dev/)** - For providing the documentation framework that powers our component docs\n"
  },
  {
    "path": "apps/examples/calcom/.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\n.source"
  },
  {
    "path": "apps/examples/calcom/README.md",
    "content": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun run dev\n```\n\nOpen [http://localhost:4002](http://localhost:4002) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/booking-skeleton.tsx",
    "content": "import { Card, CardFrame, CardPanel } from \"@coss/ui/components/card\";\nimport { FrameFooter } from \"@coss/ui/components/frame\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport { BookingActionsSkeleton } from \"./past/booking-actions\";\nimport {\n  ListItem,\n  ListItemActions,\n  ListItemBadges,\n  ListItemContent,\n  ListItemHeader,\n} from \"@/components/list-item\";\n\nexport function BookingSkeletonItem() {\n  return (\n    <ListItem>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-3 md:flex-row md:gap-4\">\n        <ListItemContent>\n          <ListItemHeader>\n            <Skeleton className=\"h-6 w-full max-w-82 sm:h-5\" />\n            <Skeleton className=\"my-0.5 h-4 w-full max-w-82\" />\n          </ListItemHeader>\n          <ListItemBadges>\n            <Skeleton className=\"h-5.5 w-14 sm:h-4.5\" />\n            <Skeleton className=\"h-5.5 w-14 sm:h-4.5\" />\n          </ListItemBadges>\n        </ListItemContent>\n\n        <div className=\"flex flex-col items-start gap-2 md:-order-1 md:w-36 md:shrink-0\">\n          <div className=\"flex w-full flex-col gap-1\">\n            <Skeleton className=\"h-5 w-full max-w-28\" />\n            <Skeleton className=\"my-0.5 h-4 w-full max-w-28\" />\n          </div>\n          <Skeleton className=\"h-7 w-28 rounded-lg sm:h-6\" />\n        </div>\n      </div>\n\n      <ListItemActions>\n        <BookingActionsSkeleton />\n      </ListItemActions>\n    </ListItem>\n  );\n}\n\nexport function BookingsListSkeleton() {\n  return (\n    <CardFrame>\n      <Card>\n        <CardPanel className=\"p-0\">\n          <BookingSkeletonItem />\n          <BookingSkeletonItem />\n          <BookingSkeletonItem />\n          <BookingSkeletonItem />\n          <BookingSkeletonItem />\n        </CardPanel>\n      </Card>\n      <FrameFooter>\n        <div className=\"flex items-center justify-between gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <Skeleton className=\"h-7 w-12 rounded-lg\" />\n            <Skeleton className=\"h-4 w-24\" />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Skeleton className=\"h-4 w-12\" />\n            <div className=\"flex items-center gap-2\">\n              <Skeleton className=\"h-7 w-18 rounded-lg\" />\n              <Skeleton className=\"h-7 w-18 rounded-lg\" />\n            </div>\n          </div>\n        </div>\n      </FrameFooter>\n    </CardFrame>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/canceled/bookings-empty.tsx",
    "content": "\"use client\";\n\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@coss/ui/components/empty\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { BookingsListSkeleton } from \"../booking-skeleton\";\nimport { useLoadingState } from \"@/hooks/use-loading-state\";\n\nconst ARTIFICIAL_DELAY_MS = 400;\n\nexport function BookingsEmpty() {\n  const showLoading = useLoadingState(ARTIFICIAL_DELAY_MS);\n\n  if (showLoading) {\n    return <BookingsListSkeleton />;\n  }\n\n  return (\n    <Empty className=\"rounded-xl border border-dashed md:py-32\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <CalendarIcon />\n        </EmptyMedia>\n        <EmptyTitle>No canceled bookings</EmptyTitle>\n        <EmptyDescription>\n          You have no canceled bookings found. Canceled bookings will appear\n          here.\n        </EmptyDescription>\n      </EmptyHeader>\n    </Empty>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/canceled/loading.tsx",
    "content": "import { BookingsListSkeleton } from \"../booking-skeleton\";\n\nexport default function Loading() {\n  return <BookingsListSkeleton />;\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/canceled/page.tsx",
    "content": "import { BookingsEmpty } from \"./bookings-empty\";\nimport { BookingsNav } from \"@/components/app/bookings-nav\";\nimport { BookingsView } from \"@/components/app/bookings-view\";\n\nexport default function Page() {\n  return (\n    <>\n      <div className=\"mb-6 flex justify-between gap-2 max-sm:flex-col sm:flex-wrap sm:items-center\">\n        <BookingsNav />\n        <BookingsView />\n      </div>\n      {/* <BookingsFilters /> */}\n      <div className=\"mt-4\">\n        <BookingsEmpty />\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/page.tsx",
    "content": "import { redirect } from \"next/navigation\";\n\nexport default function Page() {\n  redirect(\"/booking/upcoming\");\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/past/booking-actions.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Menu,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuSeparator,\n  MenuTrigger,\n} from \"@coss/ui/components/menu\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@coss/ui/components/tooltip\";\nimport {\n  CalendarClockIcon,\n  EllipsisIcon,\n  EyeOffIcon,\n  FlagIcon,\n  InfoIcon,\n  MapPinIcon,\n  PlayCircleIcon,\n  UserPlusIcon,\n  XIcon,\n} from \"lucide-react\";\n\nexport function BookingActions() {\n  return (\n    <Menu>\n      <Tooltip>\n        <MenuTrigger\n          render={\n            <TooltipTrigger\n              render={\n                <Button aria-label=\"Pptions\" size=\"icon\" variant=\"outline\">\n                  <EllipsisIcon />\n                </Button>\n              }\n            />\n          }\n        />\n        <TooltipPopup>Options</TooltipPopup>\n      </Tooltip>\n      <MenuPopup align=\"end\">\n        <MenuGroup>\n          <MenuGroupLabel>Edit event</MenuGroupLabel>\n          <MenuItem>\n            <CalendarClockIcon />\n            Reschedule booking\n          </MenuItem>\n          <MenuItem disabled>\n            <CalendarClockIcon />\n            Request reschedule\n          </MenuItem>\n          <MenuItem>\n            <MapPinIcon />\n            Edit location\n          </MenuItem>\n          <MenuItem>\n            <UserPlusIcon />\n            Add guests\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuGroupLabel>After event</MenuGroupLabel>\n          <MenuItem disabled>\n            <PlayCircleIcon />\n            View recordings\n          </MenuItem>\n          <MenuItem>\n            <InfoIcon />\n            View Session Details\n          </MenuItem>\n          <MenuItem>\n            <EyeOffIcon />\n            Mark as no-show\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuItem variant=\"destructive\">\n            <FlagIcon />\n            Report booking\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuItem disabled variant=\"destructive\">\n            <XIcon />\n            Cancel event\n          </MenuItem>\n        </MenuGroup>\n      </MenuPopup>\n    </Menu>\n  );\n}\n\nexport function BookingActionsSkeleton() {\n  return <Skeleton className=\"size-9 rounded-lg sm:size-8\" />;\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/past/bookings-list.tsx",
    "content": "\"use client\";\n\nimport { Badge } from \"@coss/ui/components/badge\";\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Card,\n  CardFrame,\n  CardFrameFooter,\n  CardPanel,\n} from \"@coss/ui/components/card\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@coss/ui/components/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@coss/ui/components/select\";\nimport { TooltipProvider } from \"@coss/ui/components/tooltip\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport {\n  BanknoteIcon,\n  CircleDashedIcon,\n  CircleXIcon,\n  RefreshCcwIcon,\n  RepeatIcon,\n  UsersIcon,\n  VideoIcon,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useState } from \"react\";\nimport { BookingsListSkeleton } from \"../booking-skeleton\";\nimport { BookingActions } from \"./booking-actions\";\nimport { ItemLabel } from \"@/components/item-label\";\nimport {\n  ListItem,\n  ListItemActions,\n  ListItemBadges,\n  ListItemContent,\n  ListItemDescription,\n  ListItemHeader,\n  ListItemTitle,\n  ListItemTitleLink,\n} from \"@/components/list-item\";\nimport { useLoadingState } from \"@/hooks/use-loading-state\";\nimport {\n  formatBookingDate,\n  formatBookingTime,\n  getBookingParticipants,\n  getLocationLabel,\n  mockPastBookings,\n} from \"@/lib/mock-bookings-data\";\n\nconst ARTIFICIAL_DELAY_MS = 800;\n\nexport function BookingsList() {\n  const showLoading = useLoadingState(ARTIFICIAL_DELAY_MS);\n  const bookings = mockPastBookings;\n  const [pageIndex, setPageIndex] = useState(0);\n  const [pageSize, setPageSize] = useState(10);\n\n  const totalCount = bookings.length;\n  const totalPages = Math.ceil(totalCount / pageSize);\n  const startIndex = pageIndex * pageSize;\n  const endIndex = Math.min(startIndex + pageSize, totalCount);\n  const paginatedBookings = bookings.slice(startIndex, endIndex);\n\n  const hasPreviousPage = pageIndex > 0;\n  const hasNextPage = pageIndex < totalPages - 1;\n\n  if (showLoading) {\n    return <BookingsListSkeleton />;\n  }\n\n  return (\n    <TooltipProvider delay={150} timeout={0}>\n      <CardFrame>\n        <Card>\n          <CardPanel className=\"p-0\">\n            {paginatedBookings.map((booking, _index) => {\n              const dateStr = formatBookingDate(booking.startTime);\n              const timeStr = formatBookingTime(\n                booking.startTime,\n                booking.endTime,\n              );\n              const participants = getBookingParticipants(booking);\n              const locationLabel = getLocationLabel(booking.location);\n              const eventTypeColorLight =\n                booking.eventType?.eventTypeColor?.lightEventTypeColor;\n              const eventTypeColorDark =\n                booking.eventType?.eventTypeColor?.darkEventTypeColor;\n              const isPaid = booking.paid;\n              const isRecurring = booking.recurringEventId !== null;\n              const isCancelled = booking.status === \"CANCELLED\";\n              const isPending = booking.status === \"PENDING\";\n              const isRejected = booking.status === \"REJECTED\";\n              const isRescheduled = booking.rescheduled;\n              const teamName = booking.eventType?.team?.name;\n\n              return (\n                <ListItem key={booking.id}>\n                  <ItemLabel\n                    colorDark={eventTypeColorDark ?? undefined}\n                    colorLight={eventTypeColorLight ?? undefined}\n                  />\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-3 md:flex-row md:gap-4\">\n                    <ListItemContent>\n                      <ListItemHeader>\n                        <ListItemTitle\n                          className={cn(isCancelled && \"line-through\")}\n                        >\n                          <ListItemTitleLink href=\"#\">\n                            {booking.title}\n                          </ListItemTitleLink>\n                        </ListItemTitle>\n                        <ListItemDescription>\n                          {participants}\n                        </ListItemDescription>\n                      </ListItemHeader>\n\n                      <ListItemBadges>\n                        {isCancelled && (\n                          <Badge\n                            className=\"pointer-events-none\"\n                            variant=\"error\"\n                          >\n                            <CircleXIcon />\n                            Cancelled\n                          </Badge>\n                        )}\n                        {isPending && (\n                          <Badge\n                            className=\"pointer-events-none\"\n                            variant=\"warning\"\n                          >\n                            <CircleDashedIcon />\n                            Unconfirmed\n                          </Badge>\n                        )}\n                        {isRescheduled && (\n                          <Badge\n                            className=\"pointer-events-none\"\n                            variant=\"warning\"\n                          >\n                            <RefreshCcwIcon />\n                            Rescheduled\n                          </Badge>\n                        )}\n                        {isRejected && !isRescheduled && (\n                          <Badge\n                            className=\"pointer-events-none\"\n                            variant=\"secondary\"\n                          >\n                            Rejected\n                          </Badge>\n                        )}\n                        {teamName && (\n                          <Badge\n                            className=\"pointer-events-none\"\n                            variant=\"outline\"\n                          >\n                            <UsersIcon />\n                            {teamName}\n                          </Badge>\n                        )}\n                        {isPaid && (\n                          <Badge\n                            className=\"pointer-events-none\"\n                            variant=\"outline\"\n                          >\n                            <BanknoteIcon />\n                            Paid\n                          </Badge>\n                        )}\n                        {isRecurring && (\n                          <Badge\n                            className=\"pointer-events-none\"\n                            variant=\"outline\"\n                          >\n                            <RepeatIcon />\n                            Recurring\n                          </Badge>\n                        )}\n                      </ListItemBadges>\n                    </ListItemContent>\n\n                    <div className=\"flex flex-col items-start gap-2 md:-order-1 md:w-36 md:shrink-0\">\n                      <div className=\"flex flex-col gap-1\">\n                        <p className=\"text-sm\">{dateStr}</p>\n                        <p className=\"text-muted-foreground text-sm\">\n                          {timeStr}\n                        </p>\n                      </div>\n                      {locationLabel && (\n                        <Button\n                          className=\"pointer-events-auto\"\n                          render={<Link href=\"#join\" />}\n                          size=\"xs\"\n                          variant=\"outline\"\n                        >\n                          <VideoIcon />\n                          {locationLabel}\n                        </Button>\n                      )}\n                    </div>\n                  </div>\n\n                  <ListItemActions>\n                    <BookingActions />\n                  </ListItemActions>\n                </ListItem>\n              );\n            })}\n          </CardPanel>\n        </Card>\n\n        <CardFrameFooter>\n          <div className=\"flex items-center justify-between gap-4\">\n            <div className=\"flex items-center gap-2\">\n              <Select\n                onValueChange={(value) => {\n                  if (value !== null) {\n                    setPageSize(value);\n                    setPageIndex(0);\n                  }\n                }}\n                value={pageSize}\n              >\n                <SelectTrigger\n                  aria-label=\"Rows per page\"\n                  className=\"w-fit min-w-none\"\n                  size=\"sm\"\n                >\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  <SelectItem value={10}>10</SelectItem>\n                  <SelectItem value={20}>20</SelectItem>\n                  <SelectItem value={50}>50</SelectItem>\n                </SelectPopup>\n              </Select>\n              <p className=\"text-muted-foreground text-sm\">rows per page</p>\n            </div>\n\n            <div className=\"flex items-center gap-2\">\n              <p className=\"whitespace-nowrap text-muted-foreground text-sm\">\n                {startIndex + 1}-{endIndex} of {totalCount}\n              </p>\n              <Pagination>\n                <PaginationContent className=\"gap-2\">\n                  <PaginationItem>\n                    <PaginationPrevious\n                      render={\n                        <Button\n                          disabled={!hasPreviousPage}\n                          onClick={() => setPageIndex(pageIndex - 1)}\n                          size=\"sm\"\n                          variant=\"outline\"\n                        />\n                      }\n                    />\n                  </PaginationItem>\n                  <PaginationItem>\n                    <PaginationNext\n                      render={\n                        <Button\n                          disabled={!hasNextPage}\n                          onClick={() => setPageIndex(pageIndex + 1)}\n                          size=\"sm\"\n                          variant=\"outline\"\n                        />\n                      }\n                    />\n                  </PaginationItem>\n                </PaginationContent>\n              </Pagination>\n            </div>\n          </div>\n        </CardFrameFooter>\n      </CardFrame>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/past/loading.tsx",
    "content": "import { BookingsListSkeleton } from \"../booking-skeleton\";\n\nexport default function Loading() {\n  return <BookingsListSkeleton />;\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/past/page.tsx",
    "content": "import { BookingsList } from \"./bookings-list\";\nimport { BookingsFilters } from \"@/components/app/bookings-filters\";\nimport { BookingsNav } from \"@/components/app/bookings-nav\";\nimport { BookingsView } from \"@/components/app/bookings-view\";\n\nexport default function Page() {\n  return (\n    <>\n      <div className=\"mb-6 flex justify-between gap-2 max-sm:flex-col sm:flex-wrap sm:items-center\">\n        <BookingsNav />\n        <BookingsView />\n      </div>\n      <BookingsFilters />\n      <div className=\"mt-4\">\n        <BookingsList />\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/recurring/bookings-empty.tsx",
    "content": "\"use client\";\n\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@coss/ui/components/empty\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { BookingsListSkeleton } from \"../booking-skeleton\";\nimport { useLoadingState } from \"@/hooks/use-loading-state\";\n\nconst ARTIFICIAL_DELAY_MS = 300;\n\nexport function BookingsEmpty() {\n  const showLoading = useLoadingState(ARTIFICIAL_DELAY_MS);\n\n  if (showLoading) {\n    return <BookingsListSkeleton />;\n  }\n\n  return (\n    <Empty className=\"rounded-xl border border-dashed md:py-32\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <CalendarIcon />\n        </EmptyMedia>\n        <EmptyTitle>No recurring bookings</EmptyTitle>\n        <EmptyDescription>\n          You have no recurring bookings found. Recurring booking series will\n          appear here.\n        </EmptyDescription>\n      </EmptyHeader>\n    </Empty>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/recurring/loading.tsx",
    "content": "import { BookingsListSkeleton } from \"../booking-skeleton\";\n\nexport default function Loading() {\n  return <BookingsListSkeleton />;\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/recurring/page.tsx",
    "content": "import { BookingsEmpty } from \"./bookings-empty\";\nimport { BookingsNav } from \"@/components/app/bookings-nav\";\nimport { BookingsView } from \"@/components/app/bookings-view\";\n\nexport default function Page() {\n  return (\n    <>\n      <div className=\"mb-6 flex justify-between gap-2 max-sm:flex-col sm:flex-wrap sm:items-center\">\n        <BookingsNav />\n        <BookingsView />\n      </div>\n      {/* <BookingsFilters /> */}\n      <div className=\"mt-4\">\n        <BookingsEmpty />\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/unconfirmed/bookings-empty.tsx",
    "content": "\"use client\";\n\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@coss/ui/components/empty\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { BookingsListSkeleton } from \"../booking-skeleton\";\nimport { useLoadingState } from \"@/hooks/use-loading-state\";\n\nconst ARTIFICIAL_DELAY_MS = 400;\n\nexport function BookingsEmpty() {\n  const showLoading = useLoadingState(ARTIFICIAL_DELAY_MS);\n\n  if (showLoading) {\n    return <BookingsListSkeleton />;\n  }\n\n  return (\n    <Empty className=\"rounded-xl border border-dashed md:py-32\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <CalendarIcon />\n        </EmptyMedia>\n        <EmptyTitle>No unconfirmed bookings</EmptyTitle>\n        <EmptyDescription>\n          You have no unconfirmed bookings found. Bookings awaiting your\n          confirmation will appear here.\n        </EmptyDescription>\n      </EmptyHeader>\n    </Empty>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/unconfirmed/loading.tsx",
    "content": "import { BookingsListSkeleton } from \"../booking-skeleton\";\n\nexport default function Loading() {\n  return <BookingsListSkeleton />;\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/unconfirmed/page.tsx",
    "content": "import { BookingsEmpty } from \"./bookings-empty\";\nimport { BookingsNav } from \"@/components/app/bookings-nav\";\nimport { BookingsView } from \"@/components/app/bookings-view\";\n\nexport default function Page() {\n  return (\n    <>\n      <div className=\"mb-6 flex justify-between gap-2 max-sm:flex-col sm:flex-wrap sm:items-center\">\n        <BookingsNav />\n        <BookingsView />\n      </div>\n      {/* <BookingsFilters /> */}\n      <div className=\"mt-4\">\n        <BookingsEmpty />\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/upcoming/bookings-empty.tsx",
    "content": "\"use client\";\n\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@coss/ui/components/empty\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { BookingsListSkeleton } from \"../booking-skeleton\";\nimport { useLoadingState } from \"@/hooks/use-loading-state\";\n\nconst ARTIFICIAL_DELAY_MS = 400;\n\nexport function BookingsEmpty() {\n  const showLoading = useLoadingState(ARTIFICIAL_DELAY_MS);\n\n  if (showLoading) {\n    return <BookingsListSkeleton />;\n  }\n\n  return (\n    <Empty className=\"rounded-xl border border-dashed md:py-32\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <CalendarIcon />\n        </EmptyMedia>\n        <EmptyTitle>No upcoming bookings</EmptyTitle>\n        <EmptyDescription>\n          You have no upcoming bookings found. As soon as someone books a time\n          with you, it will show up here.\n        </EmptyDescription>\n      </EmptyHeader>\n    </Empty>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/upcoming/loading.tsx",
    "content": "import { BookingsListSkeleton } from \"../booking-skeleton\";\n\nexport default function Loading() {\n  return <BookingsListSkeleton />;\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/booking/upcoming/page.tsx",
    "content": "import { BookingsEmpty } from \"./bookings-empty\";\nimport { BookingsNav } from \"@/components/app/bookings-nav\";\nimport { BookingsView } from \"@/components/app/bookings-view\";\n\nexport default function Page() {\n  return (\n    <>\n      <div className=\"mb-6 flex justify-between gap-2 max-sm:flex-col sm:flex-wrap sm:items-center\">\n        <BookingsNav />\n        <BookingsView />\n      </div>\n      {/* <BookingsFilters /> */}\n      <div className=\"mt-4\">\n        <BookingsEmpty />\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/event-types/add-event-type-dialog.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@coss/ui/components/dialog\";\nimport { Field, FieldLabel } from \"@coss/ui/components/field\";\nimport { Form } from \"@coss/ui/components/form\";\nimport { Input } from \"@coss/ui/components/input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@coss/ui/components/input-group\";\nimport {\n  NumberField,\n  NumberFieldInput,\n} from \"@coss/ui/components/number-field\";\nimport { Toggle } from \"@coss/ui/components/toggle\";\nimport { BoldIcon, ItalicIcon } from \"lucide-react\";\n\nexport function AddEventTypeDialog({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button className={className} />}>\n        {children}\n      </DialogTrigger>\n      <DialogPopup className=\"sm:max-w-xl\">\n        <Form className=\"contents\">\n          <DialogHeader>\n            <DialogTitle>Add a new event type</DialogTitle>\n            <DialogDescription>\n              Set up event types to offer different types of meetings.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogPanel className=\"grid gap-5\">\n            <Field>\n              <FieldLabel>Title</FieldLabel>\n              <Input defaultValue=\"Quick Chat\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>URL</FieldLabel>\n              <Input defaultValue=\"https://i.cal.com/pasquale/\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Description</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  defaultValue=\"A quick video meeting.\"\n                  placeholder=\"Enter description…\"\n                />\n                <InputGroupAddon\n                  align=\"block-start\"\n                  className=\"gap-1 rounded-t-lg border-b bg-muted/72 p-2!\"\n                >\n                  <Toggle aria-label=\"Toggle bold\" size=\"sm\">\n                    <BoldIcon />\n                  </Toggle>\n                  <Toggle aria-label=\"Toggle italic\" size=\"sm\">\n                    <ItalicIcon />\n                  </Toggle>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel>Duration</FieldLabel>\n              <InputGroup>\n                <NumberField\n                  aria-label=\"Enter the duration\"\n                  defaultValue={15}\n                  min={1}\n                >\n                  <NumberFieldInput className=\"text-left\" />\n                </NumberField>\n                <InputGroupAddon align=\"inline-end\">\n                  <InputGroupText>minutes</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </DialogPanel>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>Close</DialogClose>\n            <Button type=\"submit\">Continue</Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/event-types/event-type-actions.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport { Group, GroupSeparator } from \"@coss/ui/components/group\";\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuGroup,\n  MenuItem,\n  MenuPopup,\n  MenuSeparator,\n  MenuTrigger,\n} from \"@coss/ui/components/menu\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport { Switch } from \"@coss/ui/components/switch\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@coss/ui/components/tooltip\";\nimport {\n  CodeIcon,\n  CopyIcon,\n  EllipsisIcon,\n  EyeIcon,\n  Link2Icon,\n  PencilIcon,\n  Share2Icon,\n  TrashIcon,\n} from \"lucide-react\";\n\ninterface EventTypeActionsProps {\n  isHidden: boolean;\n  onHiddenChange: (hidden: boolean) => void;\n  tooltipHandle?: Parameters<typeof TooltipTrigger>[0][\"handle\"];\n}\n\nexport function EventTypeActions({\n  isHidden,\n  onHiddenChange,\n  tooltipHandle,\n}: EventTypeActionsProps) {\n  return (\n    <>\n      <div className=\"flex items-center gap-4 max-md:hidden\">\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Switch\n                checked={!isHidden}\n                className=\"relative\"\n                onCheckedChange={(checked) => onHiddenChange(!checked)}\n              />\n            }\n          />\n          <TooltipPopup sideOffset={11}>\n            {isHidden ? \"Show on profile\" : \"Hide from profile\"}\n          </TooltipPopup>\n        </Tooltip>\n\n        <Group>\n          <TooltipTrigger\n            handle={tooltipHandle}\n            payload={() => \"Preview\"}\n            render={\n              <Button aria-label=\"Preview\" size=\"icon\" variant=\"outline\">\n                <EyeIcon />\n              </Button>\n            }\n          />\n          <GroupSeparator />\n          <TooltipTrigger\n            handle={tooltipHandle}\n            payload={() => \"Copy link\"}\n            render={\n              <Button aria-label=\"Copy link\" size=\"icon\" variant=\"outline\">\n                <Link2Icon />\n                <span className=\"sr-only\">Copy link</span>\n              </Button>\n            }\n          />\n          <GroupSeparator />\n          <Menu>\n            <MenuTrigger\n              render={\n                <TooltipTrigger\n                  handle={tooltipHandle}\n                  payload={() => \"More options\"}\n                  render={\n                    <Button\n                      aria-label=\"More options\"\n                      size=\"icon\"\n                      variant=\"outline\"\n                    >\n                      <EllipsisIcon />\n                    </Button>\n                  }\n                />\n              }\n            />\n            <MenuPopup align=\"end\">\n              <MenuItem>\n                <PencilIcon />\n                Edit\n              </MenuItem>\n              <MenuItem>\n                <CopyIcon />\n                Duplicate\n              </MenuItem>\n              <MenuItem>\n                <CodeIcon />\n                Embed\n              </MenuItem>\n              <MenuSeparator />\n              <MenuItem variant=\"destructive\">\n                <TrashIcon />\n                Delete\n              </MenuItem>\n            </MenuPopup>\n          </Menu>\n        </Group>\n      </div>\n\n      <Menu>\n        <MenuTrigger\n          className=\"md:hidden\"\n          render={\n            <Button aria-label=\"More options\" size=\"icon\" variant=\"outline\">\n              <EllipsisIcon />\n            </Button>\n          }\n        />\n        <MenuPopup align=\"end\">\n          <MenuItem>\n            <EyeIcon />\n            Preview\n          </MenuItem>\n          <MenuItem>\n            <Link2Icon />\n            Copy link to event\n          </MenuItem>\n          <MenuItem>\n            <Share2Icon />\n            Share\n          </MenuItem>\n          <MenuItem>\n            <PencilIcon />\n            Edit\n          </MenuItem>\n          <MenuItem>\n            <CopyIcon />\n            Duplicate\n          </MenuItem>\n          <MenuSeparator />\n          <MenuGroup>\n            <MenuCheckboxItem\n              checked={!isHidden}\n              onCheckedChange={(checked) => onHiddenChange(!checked)}\n              variant=\"switch\"\n            >\n              Show on profile\n            </MenuCheckboxItem>\n          </MenuGroup>\n          <MenuSeparator />\n          <MenuItem variant=\"destructive\">\n            <TrashIcon />\n            Delete\n          </MenuItem>\n        </MenuPopup>\n      </Menu>\n    </>\n  );\n}\n\nexport function EventTypeActionsSkeleton() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Skeleton className=\"h-4.5 w-7.5 rounded-full max-md:hidden\" />\n      <Skeleton className=\"size-9 rounded-lg sm:h-8 sm:w-24.5\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/event-types/event-types-list.tsx",
    "content": "\"use client\";\n\nimport { Badge } from \"@coss/ui/components/badge\";\nimport { Card, CardPanel } from \"@coss/ui/components/card\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport { toastManager } from \"@coss/ui/components/toast\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n} from \"@coss/ui/components/tooltip\";\nimport {\n  ArmchairIcon,\n  BanknoteIcon,\n  ClipboardCheckIcon,\n  ClockIcon,\n  EyeOffIcon,\n  RepeatIcon,\n  ShuffleIcon,\n  UsersIcon,\n} from \"lucide-react\";\nimport { useRef, useState } from \"react\";\nimport {\n  EventTypeActions,\n  EventTypeActionsSkeleton,\n} from \"./event-type-actions\";\nimport {\n  ListItem,\n  ListItemBadges,\n  ListItemContent,\n  ListItemDescription,\n  ListItemDragHandle,\n  ListItemHeader,\n  ListItemTitle,\n  ListItemTitleLink,\n  SortableListItem,\n  sortableListClasses,\n} from \"@/components/list-item\";\nimport {\n  SortableItem,\n  type SortableItemRenderProps,\n  SortableList,\n} from \"@/components/sortable\";\nimport { useLoadingState } from \"@/hooks/use-loading-state\";\nimport {\n  type EventType,\n  formatDuration,\n  mockEventTypeGroups,\n  mockEventTypes,\n} from \"@/lib/mock-event-types-data\";\n\nconst tooltipHandle = TooltipCreateHandle<React.ComponentType>();\n\nconst defaultProfile = mockEventTypeGroups[0]?.profile ?? {\n  eventTypesLockedByOrg: false,\n  image: null,\n  name: \"User\",\n  slug: \"user\",\n};\n\nfunction EventTypeSkeletonItem() {\n  return (\n    <ListItem>\n      <ListItemContent>\n        <ListItemHeader>\n          <div className=\"flex items-center gap-2\">\n            <Skeleton className=\"h-6 w-full max-w-48 sm:h-5\" />\n            <Skeleton className=\"h-4 w-full max-w-32 max-sm:hidden\" />\n          </div>\n          <Skeleton className=\"my-0.5 h-4 w-full max-w-82\" />\n        </ListItemHeader>\n        <ListItemBadges>\n          <Skeleton className=\"h-5.5 w-14 sm:h-4.5\" />\n          <Skeleton className=\"h-5.5 w-14 sm:h-4.5\" />\n        </ListItemBadges>\n      </ListItemContent>\n      <EventTypeActionsSkeleton />\n    </ListItem>\n  );\n}\n\nconst ARTIFICIAL_DELAY_MS = 800;\n\ninterface EventTypeItemContentProps {\n  eventType: EventType;\n  isHidden: boolean;\n  eventPath: string;\n  onHiddenChange: (hidden: boolean) => void;\n  sortableProps?: SortableItemRenderProps;\n}\n\nfunction EventTypeItemContent({\n  eventType,\n  isHidden,\n  eventPath,\n  onHiddenChange,\n  sortableProps,\n  isOverlay = false,\n}: EventTypeItemContentProps & { isOverlay?: boolean }) {\n  const getSchedulingTypeLabel = (et: EventType) => {\n    if (!et.schedulingType) return null;\n    switch (et.schedulingType) {\n      case \"ROUND_ROBIN\":\n        return \"Round Robin\";\n      case \"COLLECTIVE\":\n        return \"Collective\";\n      case \"MANAGED\":\n        return \"Managed\";\n      default:\n        return null;\n    }\n  };\n\n  const getEventTypeColors = (et: EventType) => {\n    if (!et.eventTypeColor) return null;\n    return {\n      dark: et.eventTypeColor.darkEventTypeColor,\n      light: et.eventTypeColor.lightEventTypeColor,\n    };\n  };\n\n  const isRecurring = (et: EventType) => et.recurringEvent !== null;\n  const isPaid = (et: EventType) => et.price > 0;\n  const requiresConfirmation = (et: EventType) => et.requiresConfirmation;\n  const hasSeats = (et: EventType) =>\n    et.seatsPerTimeSlot !== null && et.seatsPerTimeSlot > 0;\n\n  return (\n    <SortableListItem\n      hasDragged={sortableProps?.hasDragged}\n      isOverlay={isOverlay}\n      labelColorDark={getEventTypeColors(eventType)?.dark ?? undefined}\n      labelColorLight={getEventTypeColors(eventType)?.light ?? undefined}\n      sortableDragging={sortableProps?.isDragging}\n      sortableDraggingAny={sortableProps?.isDraggingAny}\n      sortableListeners={isOverlay ? undefined : sortableProps?.listeners}\n      sortableRef={isOverlay ? undefined : sortableProps?.setNodeRef}\n      sortableStyle={sortableProps?.style}\n    >\n      <ListItemDragHandle />\n      <ListItemContent>\n        <ListItemHeader>\n          <div className=\"flex items-center gap-2\">\n            <ListItemTitle>\n              <ListItemTitleLink href={eventPath}>\n                {eventType.title}\n              </ListItemTitleLink>\n            </ListItemTitle>\n            <span className=\"text-muted-foreground text-xs max-sm:hidden\">\n              {eventPath}\n            </span>\n          </div>\n          {eventType.safeDescription && (\n            <ListItemDescription className=\"line-clamp-2\">\n              {eventType.safeDescription}\n            </ListItemDescription>\n          )}\n        </ListItemHeader>\n\n        <ListItemBadges>\n          <Badge className=\"pointer-events-none tabular-nums\" variant=\"outline\">\n            <ClockIcon />\n            {formatDuration(eventType.length)}\n          </Badge>\n          {getSchedulingTypeLabel(eventType) && (\n            <Badge className=\"pointer-events-none\" variant=\"outline\">\n              {eventType.schedulingType === \"ROUND_ROBIN\" ? (\n                <ShuffleIcon />\n              ) : (\n                <UsersIcon />\n              )}\n              {getSchedulingTypeLabel(eventType)}\n            </Badge>\n          )}\n          {isRecurring(eventType) && (\n            <Badge className=\"pointer-events-none\" variant=\"outline\">\n              <RepeatIcon />\n              Recurring\n            </Badge>\n          )}\n          {isPaid(eventType) && (\n            <Badge\n              className=\"pointer-events-none tabular-nums\"\n              variant=\"outline\"\n            >\n              <BanknoteIcon />${(eventType.price / 100).toFixed(0)}\n            </Badge>\n          )}\n          {requiresConfirmation(eventType) && (\n            <Badge className=\"pointer-events-none\" variant=\"outline\">\n              <ClipboardCheckIcon />\n              Requires confirmation\n            </Badge>\n          )}\n          {hasSeats(eventType) && (\n            <Badge className=\"pointer-events-none\" variant=\"outline\">\n              <ArmchairIcon />\n              {eventType.seatsPerTimeSlot} seats\n            </Badge>\n          )}\n          {isHidden && (\n            <Badge className=\"pointer-events-none\" variant=\"warning\">\n              <EyeOffIcon />\n              Hidden\n            </Badge>\n          )}\n        </ListItemBadges>\n      </ListItemContent>\n\n      <EventTypeActions\n        isHidden={isHidden}\n        onHiddenChange={onHiddenChange}\n        tooltipHandle={tooltipHandle}\n      />\n    </SortableListItem>\n  );\n}\n\nexport function EventTypesList() {\n  const showLoading = useLoadingState(ARTIFICIAL_DELAY_MS);\n  const [eventTypes, setEventTypes] = useState<EventType[]>(mockEventTypes);\n  const [hiddenStates, setHiddenStates] = useState<Record<number, boolean>>(\n    Object.fromEntries(mockEventTypes.map((et) => [et.id, et.hidden])),\n  );\n  const previousOrderRef = useRef<EventType[]>(eventTypes);\n  const currentToastIdRef = useRef<string | null>(null);\n\n  const handleReorder = (newOrder: EventType[]) => {\n    if (currentToastIdRef.current) {\n      toastManager.close(currentToastIdRef.current);\n    }\n\n    const previousOrder = previousOrderRef.current;\n    previousOrderRef.current = newOrder;\n    setEventTypes(newOrder);\n\n    const toastId = toastManager.add({\n      actionProps: {\n        children: \"Undo\",\n        onClick: () => {\n          toastManager.close(toastId);\n          currentToastIdRef.current = null;\n          previousOrderRef.current = previousOrder;\n          setEventTypes(previousOrder);\n        },\n      },\n      title: \"Event type order updated\",\n      type: \"success\",\n    });\n    currentToastIdRef.current = toastId;\n  };\n\n  const handleHiddenToggle = (id: number, hidden: boolean) => {\n    setHiddenStates((prev) => ({\n      ...prev,\n      [id]: hidden,\n    }));\n  };\n\n  const getEventTypePath = (eventType: EventType) => {\n    return `/${defaultProfile.slug}/${eventType.slug}`;\n  };\n\n  if (showLoading) {\n    return (\n      <>\n        <Card>\n          <CardPanel className=\"p-0\">\n            <EventTypeSkeletonItem />\n            <EventTypeSkeletonItem />\n            <EventTypeSkeletonItem />\n            <EventTypeSkeletonItem />\n            <EventTypeSkeletonItem />\n          </CardPanel>\n        </Card>\n        <div className=\"mt-6 text-center text-muted-foreground/72 text-sm\">\n          <Skeleton className=\"mx-auto h-5 w-32\" />\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <TooltipProvider delay={0}>\n      <SortableList\n        items={eventTypes}\n        onReorder={handleReorder}\n        renderOverlay={(eventType) => (\n          <EventTypeItemContent\n            eventPath={getEventTypePath(eventType)}\n            eventType={eventType}\n            isHidden={hiddenStates[eventType.id] ?? false}\n            isOverlay\n            onHiddenChange={() => {}}\n          />\n        )}\n      >\n        <Card className={sortableListClasses}>\n          <CardPanel className=\"p-0\">\n            {eventTypes.map((eventType, _index) => {\n              const isHidden = hiddenStates[eventType.id];\n              const eventPath = getEventTypePath(eventType);\n\n              return (\n                <SortableItem id={eventType.id} key={eventType.id}>\n                  {(sortableProps) => (\n                    <EventTypeItemContent\n                      eventPath={eventPath}\n                      eventType={eventType}\n                      isHidden={isHidden ?? false}\n                      onHiddenChange={(hidden) =>\n                        handleHiddenToggle(eventType.id, hidden)\n                      }\n                      sortableProps={sortableProps}\n                    />\n                  )}\n                </SortableItem>\n              );\n            })}\n          </CardPanel>\n        </Card>\n      </SortableList>\n\n      <div className=\"mt-6 text-center text-muted-foreground/72 text-sm\">\n        No more results\n      </div>\n\n      <Tooltip handle={tooltipHandle}>\n        {({ payload: Payload }) => (\n          <TooltipPopup>{Payload !== undefined && <Payload />}</TooltipPopup>\n        )}\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/event-types/page.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@coss/ui/components/input-group\";\nimport { PlusIcon, SearchIcon } from \"lucide-react\";\nimport { AddEventTypeDialog } from \"./add-event-type-dialog\";\nimport { EventTypesList } from \"./event-types-list\";\nimport {\n  AppHeader,\n  AppHeaderActions,\n  AppHeaderContent,\n  AppHeaderDescription,\n} from \"@/components/app/app-header\";\n\nexport default function Page() {\n  return (\n    <>\n      <AppHeader>\n        <AppHeaderContent title=\"Event Types\">\n          <AppHeaderDescription>\n            Create events to share for people to book on your calendar.\n          </AppHeaderDescription>\n        </AppHeaderContent>\n        <AppHeaderActions className=\"max-md:hidden\">\n          <InputGroup>\n            <InputGroupInput\n              aria-label=\"Search\"\n              placeholder=\"Search…\"\n              type=\"search\"\n            />\n            <InputGroupAddon>\n              <SearchIcon />\n            </InputGroupAddon>\n          </InputGroup>\n          <AddEventTypeDialog>\n            <PlusIcon className=\"-ms-1\" />\n            New\n          </AddEventTypeDialog>\n        </AppHeaderActions>\n      </AppHeader>\n\n      <EventTypesList />\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/layout.tsx",
    "content": "\"use client\";\n\nimport { AppMobileFooter } from \"@/components/app/app-mobile-footer\";\nimport { AppMobileHeader } from \"@/components/app/app-mobile-header\";\nimport { AppSidebar } from \"@/components/app/app-sidebar\";\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\";\n\nexport default function DashboardLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}>) {\n  return (\n    <SidebarProvider>\n      <AppMobileHeader />\n      <AppSidebar />\n      <SidebarInset className=\"max-md:pt-14\">{children}</SidebarInset>\n      <AppMobileFooter />\n    </SidebarProvider>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(dashboard)/page.tsx",
    "content": "import { redirect } from \"next/navigation\";\n\nexport default function Page() {\n  redirect(\"/event-types\");\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(settings)/settings/layout.tsx",
    "content": "\"use client\";\n\nimport { SettingsMobileHeader } from \"@/components/settings/settings-mobile-header\";\nimport { SettingsSidebar } from \"@/components/settings/settings-sidebar\";\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\";\n\nexport default function SettingsLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode;\n}>) {\n  return (\n    <SidebarProvider>\n      <SettingsMobileHeader />\n      <SettingsSidebar />\n      <SidebarInset className=\"max-md:pt-14\">\n        <div className=\"mx-auto max-w-3xl\">{children}</div>\n      </SidebarInset>\n    </SidebarProvider>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(settings)/settings/my-account/general/page.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Card,\n  CardFrame,\n  CardFrameDescription,\n  CardFrameFooter,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@coss/ui/components/card\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@coss/ui/components/combobox\";\nimport { Field, FieldDescription, FieldLabel } from \"@coss/ui/components/field\";\nimport { Fieldset, FieldsetLegend } from \"@coss/ui/components/fieldset\";\nimport { Label } from \"@coss/ui/components/label\";\nimport {\n  Select,\n  SelectButton,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@coss/ui/components/select\";\nimport { CalendarIcon, SearchIcon } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { SettingsToggle } from \"@/components/settings/settings-toggle\";\n\nexport default function GeneralSettingsPage() {\n  const languageItems = [\n    { label: \"English\", value: \"en\" },\n    { label: \"Spanish\", value: \"es\" },\n    { label: \"French\", value: \"fr\" },\n    { label: \"German\", value: \"de\" },\n    { label: \"Italian\", value: \"it\" },\n  ];\n\n  const timezones = Intl.supportedValuesOf(\"timeZone\");\n\n  const formattedTimezones = useMemo(() => {\n    return timezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \" \")}`,\n          numericOffset: totalMinutes,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, [timezones]);\n\n  const defaultTimezone =\n    formattedTimezones.find((tz) => tz.value === \"Europe/Rome\") ??\n    formattedTimezones[0];\n\n  const timeFormatItems = [\n    { label: \"12-hour\", value: \"12\" },\n    { label: \"24-hour\", value: \"24\" },\n  ];\n\n  const startOfWeekItems = [\n    { label: \"Sunday\", value: \"sunday\" },\n    { label: \"Monday\", value: \"monday\" },\n    { label: \"Tuesday\", value: \"tuesday\" },\n    { label: \"Wednesday\", value: \"wednesday\" },\n    { label: \"Thursday\", value: \"thursday\" },\n    { label: \"Friday\", value: \"friday\" },\n    { label: \"Saturday\", value: \"saturday\" },\n  ];\n\n  return (\n    <div className=\"space-y-4\">\n      <CardFrame>\n        <CardFrameHeader>\n          <CardFrameTitle>General</CardFrameTitle>\n          <CardFrameDescription>\n            Manage settings for your language and timezone\n          </CardFrameDescription>\n        </CardFrameHeader>\n\n        <Card className=\"rounded-b-none!\">\n          <CardPanel>\n            <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n              <Field className=\"max-md:col-span-2\">\n                <FieldLabel>Language</FieldLabel>\n                <Select\n                  aria-label=\"Language\"\n                  defaultValue=\"en\"\n                  items={languageItems}\n                >\n                  <SelectTrigger>\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectPopup>\n                    {languageItems.map(({ label, value }) => (\n                      <SelectItem key={value} value={value}>\n                        {label}\n                      </SelectItem>\n                    ))}\n                  </SelectPopup>\n                </Select>\n              </Field>\n\n              <div className=\"col-span-2\">\n                <Fieldset className=\"max-w-none gap-2\">\n                  <Label render={<FieldsetLegend />}>Timezone</Label>\n                  <div className=\"grid w-full grid-cols-1 gap-4 md:grid-cols-2\">\n                    <Field className=\"contents\">\n                      <Combobox\n                        autoHighlight\n                        defaultValue={defaultTimezone}\n                        items={formattedTimezones}\n                      >\n                        <ComboboxTrigger render={<SelectButton />}>\n                          <ComboboxValue />\n                        </ComboboxTrigger>\n                        <ComboboxPopup aria-label=\"Select timezone\">\n                          <div className=\"border-b p-2\">\n                            <ComboboxInput\n                              className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n                              placeholder=\"e.g. Europe/Rome\"\n                              showTrigger={false}\n                              startAddon={<SearchIcon />}\n                            />\n                          </div>\n                          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n                          <ComboboxList>\n                            {(item) => (\n                              <ComboboxItem key={item.value} value={item}>\n                                {item.label}\n                              </ComboboxItem>\n                            )}\n                          </ComboboxList>\n                        </ComboboxPopup>\n                      </Combobox>\n                    </Field>\n                    <Button variant=\"outline\">\n                      <CalendarIcon />\n                      <span>Schedule timezone change</span>\n                    </Button>\n                  </div>\n                </Fieldset>\n              </div>\n\n              <div className=\"col-span-2 grid grid-cols-1 gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel>Time format</FieldLabel>\n                  <Select\n                    aria-label=\"Time format\"\n                    defaultValue=\"12\"\n                    items={timeFormatItems}\n                  >\n                    <SelectTrigger className=\"w-full\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectPopup>\n                      {timeFormatItems.map(({ label, value }) => (\n                        <SelectItem key={value} value={value}>\n                          {label}\n                        </SelectItem>\n                      ))}\n                    </SelectPopup>\n                  </Select>\n                  <FieldDescription>\n                    This is an internal setting and will not affect how times\n                    are displayed on public booking pages for you or anyone\n                    booking you.\n                  </FieldDescription>\n                </Field>\n\n                <Field>\n                  <FieldLabel>Start of week</FieldLabel>\n                  <Select\n                    aria-label=\"Start of week\"\n                    defaultValue=\"sunday\"\n                    items={startOfWeekItems}\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectPopup>\n                      {startOfWeekItems.map(({ label, value }) => (\n                        <SelectItem key={value} value={value}>\n                          {label}\n                        </SelectItem>\n                      ))}\n                    </SelectPopup>\n                  </Select>\n                </Field>\n              </div>\n            </div>\n          </CardPanel>\n        </Card>\n\n        <CardFrameFooter className=\"flex justify-end\">\n          <Button>Update</Button>\n        </CardFrameFooter>\n      </CardFrame>\n\n      <SettingsToggle\n        defaultChecked\n        description=\"Allow attendees to book you through dynamic group bookings\"\n        title=\"Dynamic group links\"\n      />\n\n      <SettingsToggle\n        defaultChecked\n        description=\"Allow search engines to access your public content\"\n        title=\"Allow search engine indexing\"\n      />\n\n      <SettingsToggle\n        defaultChecked\n        description=\"Monthly digest email for teams\"\n        title=\"Monthly digest email\"\n      />\n\n      <SettingsToggle\n        description=\"When enabled, anyone trying to book events using your email address must verify they own it via a one time code or be logged in to prevent impersonation\"\n        title=\"Prevent impersonation on bookings\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(settings)/settings/my-account/page.tsx",
    "content": "import { redirect } from \"next/navigation\";\n\nexport default function Page() {\n  redirect(\"/settings/my-account/general\");\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(settings)/settings/my-account/profile/page.tsx",
    "content": "\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@coss/ui/components/avatar\";\nimport { Badge } from \"@coss/ui/components/badge\";\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Card,\n  CardFrame,\n  CardFrameDescription,\n  CardFrameFooter,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@coss/ui/components/card\";\nimport { Field, FieldDescription, FieldLabel } from \"@coss/ui/components/field\";\nimport { Fieldset, FieldsetLegend } from \"@coss/ui/components/fieldset\";\nimport { Input } from \"@coss/ui/components/input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@coss/ui/components/input-group\";\nimport { Label } from \"@coss/ui/components/label\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@coss/ui/components/menu\";\nimport { Toggle } from \"@coss/ui/components/toggle\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@coss/ui/components/tooltip\";\nimport { useCopyToClipboard } from \"@coss/ui/hooks/use-copy-to-clipboard\";\nimport {\n  BoldIcon,\n  CheckIcon,\n  CopyIcon,\n  EllipsisIcon,\n  ItalicIcon,\n  LinkIcon,\n  PlusIcon,\n} from \"lucide-react\";\n\nfunction EmailInput({\n  email,\n  isPrimary,\n  isVerified,\n}: {\n  email: string;\n  isPrimary?: boolean;\n  isVerified?: boolean;\n}) {\n  return (\n    <Field className=\"contents\">\n      <InputGroup>\n        <InputGroupInput defaultValue={email} type=\"email\" />\n        <InputGroupAddon align=\"inline-end\">\n          {isPrimary && <Badge variant=\"info\">Primary</Badge>}\n          {!isVerified && <Badge variant=\"warning\">Unverified</Badge>}\n          <Menu>\n            <MenuTrigger\n              render={\n                <Button\n                  aria-label=\"Email options\"\n                  size=\"icon-xs\"\n                  variant=\"ghost\"\n                />\n              }\n            >\n              <EllipsisIcon />\n            </MenuTrigger>\n            <MenuPopup align=\"end\" alignOffset={-4} sideOffset={8}>\n              <MenuItem disabled={isPrimary}>Make primary</MenuItem>\n              <MenuItem disabled={isVerified}>Resend verification</MenuItem>\n              <MenuItem disabled={isPrimary} variant=\"destructive\">\n                Remove email\n              </MenuItem>\n            </MenuPopup>\n          </Menu>\n        </InputGroupAddon>\n      </InputGroup>\n    </Field>\n  );\n}\n\ninterface EmailItem {\n  email: string;\n  isPrimary?: boolean;\n  isVerified?: boolean;\n}\n\nconst emails: EmailItem[] = [\n  { email: \"pasquale@cal.com\", isPrimary: true, isVerified: true },\n  { email: \"test@sfsfd.com\", isPrimary: false, isVerified: false },\n];\n\nexport default function ProfileSettingsPage() {\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <CardFrame>\n        <CardFrameHeader>\n          <CardFrameTitle>Profile</CardFrameTitle>\n          <CardFrameDescription>\n            Manage settings for your Cal.com profile\n          </CardFrameDescription>\n        </CardFrameHeader>\n\n        <Card className=\"rounded-b-none!\">\n          <CardPanel>\n            <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n              <div className=\"flex items-center gap-4 max-md:col-span-2\">\n                <Avatar className=\"size-16\">\n                  <AvatarImage\n                    alt=\"Profile picture\"\n                    src=\"https://pbs.twimg.com/profile_images/1994776674391457792/7utKOMi6_400x400.jpg\"\n                  />\n                  <AvatarFallback className=\"text-xl\">PV</AvatarFallback>\n                </Avatar>\n                <div className=\"flex flex-col gap-1\">\n                  <Label className=\"text-sm\">Profile picture</Label>\n                  <div className=\"flex items-center gap-2\">\n                    <Button size=\"sm\" variant=\"outline\">\n                      Upload avatar\n                    </Button>\n                    <Button size=\"sm\" variant=\"ghost\">\n                      Remove\n                    </Button>\n                  </div>\n                </div>\n              </div>\n\n              <div className=\"col-span-2 grid grid-cols-1 gap-4 md:grid-cols-2\">\n                <Field>\n                  <FieldLabel>Username</FieldLabel>\n                  <InputGroup className=\"opacity-100! has-disabled:cursor-not-allowed has-disabled:bg-muted has-disabled:text-muted-foreground has-disabled:*:cursor-not-allowed\">\n                    <InputGroupAddon>\n                      <InputGroupText>i.cal.com/</InputGroupText>\n                    </InputGroupAddon>\n                    <InputGroupInput\n                      aria-label=\"Set your URL\"\n                      className=\"*:[input]:ps-0! has-disabled:*:[input]:cursor-not-allowed\"\n                      defaultValue=\"pasquale\"\n                      disabled\n                    />\n                    <InputGroupAddon align=\"inline-end\">\n                      <Tooltip>\n                        <TooltipTrigger\n                          render={\n                            <Button\n                              aria-label=\"Copy URL\"\n                              onClick={() =>\n                                copyToClipboard(\"https://i.cal.com/pasquale\")\n                              }\n                              size=\"icon-xs\"\n                              variant=\"ghost\"\n                            />\n                          }\n                        >\n                          {isCopied ? <CheckIcon /> : <CopyIcon />}\n                        </TooltipTrigger>\n                        <TooltipPopup>\n                          <p>{isCopied ? \"Copied!\" : \"Copy to clipboard\"}</p>\n                        </TooltipPopup>\n                      </Tooltip>\n                    </InputGroupAddon>\n                  </InputGroup>\n                  <FieldDescription>\n                    Tip: You can add a &apos;+&apos; between usernames (e.g.\n                    cal.com/anna+brian) to meet with multiple people\n                  </FieldDescription>\n                </Field>\n\n                <Field>\n                  <FieldLabel>Full name</FieldLabel>\n                  <Input defaultValue=\"Pasquale Vitiello\" />\n                </Field>\n              </div>\n\n              <div className=\"col-span-2\">\n                <Fieldset className=\"max-w-none gap-2\">\n                  <Label render={<FieldsetLegend />}>Email</Label>\n                  <div className=\"grid w-full grid-cols-1 gap-2 md:grid-cols-2 md:gap-4\">\n                    {emails.map((item) => (\n                      <EmailInput\n                        email={item.email}\n                        isPrimary={item.isPrimary}\n                        isVerified={item.isVerified}\n                        key={item.email}\n                      />\n                    ))}\n                  </div>\n                  <div>\n                    <Button size=\"sm\" variant=\"outline\">\n                      <PlusIcon />\n                      Add email\n                    </Button>\n                  </div>\n                </Fieldset>\n              </div>\n\n              <Field className=\"col-span-2\">\n                <FieldLabel>About</FieldLabel>\n                <InputGroup>\n                  <InputGroupTextarea placeholder=\"Tell us about yourself…\" />\n                  <InputGroupAddon\n                    align=\"block-start\"\n                    className=\"gap-1 rounded-t-lg border-b bg-muted/72 p-2!\"\n                  >\n                    <Toggle aria-label=\"Toggle bold\" size=\"sm\">\n                      <BoldIcon aria-hidden=\"true\" />\n                    </Toggle>\n                    <Toggle aria-label=\"Toggle italic\" size=\"sm\">\n                      <ItalicIcon aria-hidden=\"true\" />\n                    </Toggle>\n                    <Button aria-label=\"Link\" size=\"icon-sm\" variant=\"ghost\">\n                      <LinkIcon aria-hidden=\"true\" />\n                    </Button>\n                  </InputGroupAddon>\n                </InputGroup>\n              </Field>\n            </div>\n          </CardPanel>\n        </Card>\n\n        <CardFrameFooter className=\"flex justify-end\">\n          <Button>Update</Button>\n        </CardFrameFooter>\n      </CardFrame>\n\n      <CardFrame className=\"flex-row items-center justify-between\">\n        <CardFrameHeader>\n          <CardFrameTitle>Danger zone</CardFrameTitle>\n          <CardFrameDescription>\n            Be careful. Account deletion cannot be undone.\n          </CardFrameDescription>\n        </CardFrameHeader>\n\n        <CardFrameFooter className=\"flex justify-end\">\n          <Button variant=\"destructive-outline\">Delete account</Button>\n        </CardFrameFooter>\n      </CardFrame>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/(settings)/settings/page.tsx",
    "content": "import { redirect } from \"next/navigation\";\n\nexport default function Page() {\n  redirect(\"/settings/my-account/general\");\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/globals.css",
    "content": "@import \"@coss/ui/globals.css\";\n\n:root {\n  --sidebar-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-800) 80%,\n    var(--sidebar)\n  );\n}\n\n.dark {\n  --sidebar-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-200) 80%,\n    var(--sidebar)\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/app/layout.tsx",
    "content": "import \"./globals.css\";\n\nimport {\n  AnchoredToastProvider,\n  ToastProvider,\n} from \"@coss/ui/components/toast\";\nimport { fontHeading, fontSans } from \"@coss/ui/fonts\";\nimport { ThemeProvider } from \"@coss/ui/shared/theme-provider\";\nimport type { Metadata } from \"next\";\nimport { AppCommand } from \"@/components/app/app-command\";\nimport { DebugProvider } from \"@/components/debug-context\";\n\nexport const metadata: Metadata = {\n  description: \"coss.com - the everything but AI company\",\n  metadataBase: new URL(\"https://coss.com\"),\n  title: \"coss.com\",\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={`${fontHeading.variable} ${fontSans.variable} relative bg-sidebar font-sans text-foreground antialiased`}\n      >\n        <ThemeProvider>\n          <ToastProvider>\n            <AnchoredToastProvider>\n              <DebugProvider>\n                <AppCommand />\n                {children}\n              </DebugProvider>\n            </AnchoredToastProvider>\n          </ToastProvider>\n        </ThemeProvider>\n      </body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/app-command.tsx",
    "content": "\"use client\";\n\nimport { useAutocompleteFilter } from \"@coss/ui/components/autocomplete\";\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandCreateHandle,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@coss/ui/components/command\";\nimport { EmptyMedia } from \"@coss/ui/components/empty\";\nimport { Input } from \"@coss/ui/components/input\";\nimport { Kbd, KbdGroup } from \"@coss/ui/components/kbd\";\nimport { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport { Spinner } from \"@coss/ui/components/spinner\";\nimport {\n  ArrowDownIcon,\n  ArrowLeftIcon,\n  ArrowUpIcon,\n  CircleQuestionMarkIcon,\n  CornerDownLeftIcon,\n  SearchIcon,\n  SparklesIcon,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport * as React from \"react\";\nimport { markdownToSafeHTML } from \"@/lib/markdown-to-safe-html\";\nimport {\n  MOCK_AI_RESPONSE,\n  MOCK_REFERENCE_LINKS,\n  type ReferenceLink,\n} from \"@/lib/mock-ai-data\";\n\ninterface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n  keywords?: string[];\n}\n\ninterface Group {\n  value: string;\n  items: Item[];\n}\n\nconst commandGroups: Group[] = [\n  {\n    items: [\n      {\n        keywords: [\"wf\"],\n        label: \"Workflows\",\n        shortcut: \"w f\",\n        value: \"workflows\",\n      },\n    ],\n    value: \"Workflows\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"et\"],\n        label: \"Event Types\",\n        shortcut: \"e t\",\n        value: \"event-types\",\n      },\n      { label: \"15 Min Meeting\", value: \"15-min-meeting\" },\n      { label: \"30 Min Meeting\", value: \"30-min-meeting\" },\n      { label: \"Secret Meeting\", value: \"secret-meeting\" },\n    ],\n    value: \"Event Types\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"as\"],\n        label: \"App Store\",\n        shortcut: \"a s\",\n        value: \"app-store\",\n      },\n    ],\n    value: \"Apps\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"ub\"],\n        label: \"Upcoming\",\n        shortcut: \"u b\",\n        value: \"upcoming\",\n      },\n      {\n        keywords: [\"rb\"],\n        label: \"Recurring\",\n        shortcut: \"r b\",\n        value: \"recurring\",\n      },\n      { keywords: [\"pb\"], label: \"Past\", shortcut: \"p b\", value: \"past\" },\n      {\n        keywords: [\"cb\"],\n        label: \"Canceled\",\n        shortcut: \"c b\",\n        value: \"canceled\",\n      },\n    ],\n    value: \"Bookings\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"sa\"],\n        label: \"Availability\",\n        shortcut: \"s a\",\n        value: \"availability\",\n      },\n    ],\n    value: \"Availability\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"ps\"],\n        label: \"Profile\",\n        shortcut: \"p s\",\n        value: \"profile\",\n      },\n      {\n        keywords: [\"ca\"],\n        label: \"Change Avatar\",\n        shortcut: \"c a\",\n        value: \"change-avatar\",\n      },\n      {\n        keywords: [\"ct\"],\n        label: \"Timezone\",\n        shortcut: \"c t\",\n        value: \"timezone\",\n      },\n      {\n        keywords: [\"bc\"],\n        label: \"Brand Color\",\n        shortcut: \"b c\",\n        value: \"brand-color\",\n      },\n      { keywords: [\"ts\"], label: \"Teams\", shortcut: \"t s\", value: \"teams\" },\n    ],\n    value: \"Profile\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"cp\"],\n        label: \"Change Password\",\n        shortcut: \"c p\",\n        value: \"change-password\",\n      },\n      {\n        keywords: [\"tfa\"],\n        label: \"Two factor authentication\",\n        shortcut: \"t f a\",\n        value: \"two-factor-auth\",\n      },\n      {\n        keywords: [\"ui\"],\n        label: \"User Impersonation\",\n        shortcut: \"u i\",\n        value: \"user-impersonation\",\n      },\n    ],\n    value: \"Security\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"ul\"],\n        label: \"Choose a license\",\n        shortcut: \"u l\",\n        value: \"choose-license\",\n      },\n    ],\n    value: \"Admin\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"wh\"],\n        label: \"Webhooks\",\n        shortcut: \"w h\",\n        value: \"webhooks\",\n      },\n      {\n        keywords: [\"api\"],\n        label: \"API keys\",\n        shortcut: \"a p i\",\n        value: \"api-keys\",\n      },\n    ],\n    value: \"Developer\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"mb\"],\n        label: \"Manage billing\",\n        shortcut: \"m b\",\n        value: \"manage-billing\",\n      },\n    ],\n    value: \"Billing\",\n  },\n  {\n    items: [\n      { label: \"Alby\", value: \"alby\" },\n      { label: \"Amie\", value: \"amie\" },\n      { label: \"Apple Calendar\", value: \"apple-calendar\" },\n      { label: \"Attio\", value: \"attio\" },\n      { label: \"Autocheckin\", value: \"autocheckin\" },\n      { label: \"BAA for HIPAA\", value: \"baa-hipaa\" },\n    ],\n    value: \"Installable Apps\",\n  },\n];\n\ninterface AIState {\n  mode: boolean;\n  query: string;\n  submittedQuery: string;\n  response: string;\n  referenceLinks: ReferenceLink[];\n  isGenerating: boolean;\n  error: string | null;\n}\n\nconst initialAIState: AIState = {\n  error: null,\n  isGenerating: false,\n  mode: false,\n  query: \"\",\n  referenceLinks: [],\n  response: \"\",\n  submittedQuery: \"\",\n};\n\nexport const commandHandle: ReturnType<typeof CommandCreateHandle> =\n  CommandCreateHandle();\n\nexport function AppCommand(): React.ReactElement {\n  const [open, setOpen] = React.useState(false);\n  const [aiState, setAIState] = React.useState<AIState>(initialAIState);\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n  const aiInputRef = React.useRef<HTMLInputElement>(null);\n  const searchInputRef = React.useRef<HTMLInputElement>(null);\n  const abortControllerRef = React.useRef<AbortController | null>(null);\n  const commandResetKeyRef = React.useRef(0);\n\n  // Cleanup on unmount\n  React.useEffect((): (() => void) => {\n    return (): void => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  const resetAIState = React.useCallback(() => {\n    abortControllerRef.current?.abort();\n    setAIState(initialAIState);\n  }, []);\n\n  const handleItemClick = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleBackToSearch = React.useCallback(() => {\n    resetAIState();\n    setSearchQuery(\"\");\n    // Force Command remount to reset Autocomplete's internal query state\n    commandResetKeyRef.current += 1;\n    // Focus search input after state updates\n    searchInputRef.current?.focus();\n  }, [resetAIState]);\n\n  const handleGenerateAI = React.useCallback(\n    async (queryOverride?: string) => {\n      const query = queryOverride || aiState.query;\n      if (!query.trim()) return;\n\n      // Abort any ongoing request\n      abortControllerRef.current?.abort();\n      const controller = new AbortController();\n      abortControllerRef.current = controller;\n\n      setAIState((prev) => ({\n        ...prev,\n        error: null,\n        isGenerating: true,\n        query: \"\",\n        referenceLinks: [],\n        response: \"\",\n        submittedQuery: query,\n      }));\n\n      try {\n        // Simulate AI response - in production, this would call an API\n        await new Promise<void>((resolve, reject) => {\n          const timeout = setTimeout(resolve, 1500);\n          controller.signal.addEventListener(\"abort\", () => {\n            clearTimeout(timeout);\n            reject(new Error(\"aborted\"));\n          });\n        });\n\n        // Don't update state if request was aborted\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          isGenerating: false,\n          referenceLinks: MOCK_REFERENCE_LINKS,\n          response: MOCK_AI_RESPONSE,\n        }));\n      } catch (error) {\n        // Ignore abort errors - component cleanup handles this\n        if (error instanceof Error && error.message === \"aborted\") {\n          return;\n        }\n\n        // Only update if not aborted\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          error: \"Failed to generate response. Please try again.\",\n          isGenerating: false,\n        }));\n      }\n    },\n    [aiState.query],\n  );\n\n  const handleAskAI = React.useCallback(() => {\n    const currentQuery = searchQuery;\n    setSearchQuery(\"\");\n\n    if (currentQuery.trim()) {\n      // If there's a query, ask AI immediately\n      setAIState((prev) => ({ ...prev, mode: true }));\n      handleGenerateAI(currentQuery);\n    } else {\n      // If no query, just switch to AI mode\n      setAIState((prev) => ({ ...prev, mode: true, query: \"\" }));\n      aiInputRef.current?.focus();\n    }\n  }, [searchQuery, handleGenerateAI]);\n\n  const { contains } = useAutocompleteFilter({ sensitivity: \"base\" });\n\n  const filterItem = React.useCallback(\n    (itemValue: unknown, query: string): boolean => {\n      if (typeof itemValue !== \"object\" || itemValue === null) {\n        return false;\n      }\n\n      const item = itemValue as Item;\n\n      // Search in label\n      if (contains(item.label, query)) {\n        return true;\n      }\n\n      // Search in value\n      if (contains(item.value, query)) {\n        return true;\n      }\n\n      // Search in keywords\n      if (item.keywords?.some((keyword) => contains(keyword, query))) {\n        return true;\n      }\n\n      return false;\n    },\n    [contains],\n  );\n\n  React.useEffect((): (() => void) => {\n    const down = (e: KeyboardEvent): void => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        if (\n          (e.target instanceof HTMLElement && e.target.isContentEditable) ||\n          e.target instanceof HTMLInputElement ||\n          e.target instanceof HTMLTextAreaElement ||\n          e.target instanceof HTMLSelectElement\n        ) {\n          return;\n        }\n\n        e.preventDefault();\n        setOpen((open) => {\n          if (!open) {\n            setSearchQuery(\"\");\n          }\n          return !open;\n        });\n      }\n    };\n\n    document.addEventListener(\"keydown\", down);\n    return (): void => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  React.useEffect((): (() => void) | undefined => {\n    if (!open || !aiState.mode) return;\n\n    const handleEscape = (e: KeyboardEvent): void => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        e.stopPropagation();\n        handleBackToSearch();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape, true);\n    return (): void =>\n      document.removeEventListener(\"keydown\", handleEscape, true);\n  }, [open, aiState.mode, handleBackToSearch]);\n\n  React.useEffect(() => {\n    if (aiState.mode && !aiState.isGenerating) {\n      // Focus AI input when switching to AI mode or after response\n      aiInputRef.current?.focus();\n    }\n  }, [aiState.mode, aiState.isGenerating]);\n\n  const hasResults = React.useMemo(\n    () =>\n      !searchQuery.trim() ||\n      commandGroups.some((group) =>\n        group.items.some((item) => filterItem(item, searchQuery)),\n      ),\n    [searchQuery, filterItem],\n  );\n\n  const handleOpenChange = React.useCallback(\n    (newOpen: boolean) => {\n      setOpen(newOpen);\n      if (!newOpen) {\n        setSearchQuery(\"\");\n        resetAIState();\n      }\n    },\n    [resetAIState],\n  );\n\n  return (\n    <CommandDialog\n      handle={commandHandle}\n      onOpenChange={handleOpenChange}\n      open={open}\n    >\n      <CommandDialogPopup>\n        {!aiState.mode ? (\n          <Command\n            filter={filterItem}\n            items={commandGroups}\n            key={commandResetKeyRef.current}\n          >\n            <div className=\"relative flex items-center *:first:flex-1\">\n              <CommandInput\n                onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>\n                  setSearchQuery(e.target.value)\n                }\n                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {\n                  if (e.key === \"Tab\") {\n                    e.preventDefault();\n                    handleAskAI();\n                  }\n                  if (e.key === \"Enter\" && !hasResults && searchQuery.trim()) {\n                    e.preventDefault();\n                    handleAskAI();\n                  }\n                }}\n                placeholder=\"Type a command or search...\"\n                ref={searchInputRef}\n                value={searchQuery}\n              />\n              <Button\n                className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                onClick={handleAskAI}\n                size=\"sm\"\n                variant=\"ghost\"\n              >\n                <SparklesIcon className=\"size-4 sm:size-3.5\" />\n                Ask AI\n                <Kbd className=\"ms-0.5 -me-1.5\">Tab</Kbd>\n              </Button>\n            </div>\n            <CommandPanel>\n              <CommandEmpty className=\"not-empty:py-12\">\n                {searchQuery.trim() && (\n                  <div className=\"wrap-break-word flex flex-col flex-wrap items-center gap-2\">\n                    <EmptyMedia variant=\"icon\">\n                      <SearchIcon />\n                    </EmptyMedia>\n                    <p>No results found.</p>\n                    <p>\n                      Press <Kbd>Enter</Kbd> to ask AI about:\n                      <br />{\" \"}\n                      <strong className=\"font-medium text-foreground\">\n                        {searchQuery}\n                      </strong>\n                    </p>\n                  </div>\n                )}\n              </CommandEmpty>\n              <CommandList>\n                {(group: Group): React.ReactElement => (\n                  <React.Fragment key={group.value}>\n                    <CommandGroup items={group.items}>\n                      <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                      <CommandCollection>\n                        {(item: Item): React.ReactElement => (\n                          <CommandItem\n                            key={item.value}\n                            onClick={handleItemClick}\n                            value={item.value}\n                          >\n                            <span className=\"flex-1\">{item.label}</span>\n                            {item.shortcut && (\n                              <CommandShortcut>{item.shortcut}</CommandShortcut>\n                            )}\n                          </CommandItem>\n                        )}\n                      </CommandCollection>\n                    </CommandGroup>\n                    <CommandSeparator />\n                  </React.Fragment>\n                )}\n              </CommandList>\n            </CommandPanel>\n            <CommandFooter>\n              {hasResults ? (\n                <>\n                  <div className=\"flex items-center gap-4\">\n                    <div className=\"flex items-center gap-2\">\n                      <KbdGroup>\n                        <Kbd>\n                          <ArrowUpIcon />\n                        </Kbd>\n                        <Kbd>\n                          <ArrowDownIcon />\n                        </Kbd>\n                      </KbdGroup>\n                      <span>Navigate</span>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <Kbd>\n                        <CornerDownLeftIcon />\n                      </Kbd>\n                      <span>Open</span>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2\">\n                    <Kbd>Esc</Kbd>\n                    <span>Close</span>\n                  </div>\n                </>\n              ) : (\n                <div className=\"ms-auto flex items-center gap-2\">\n                  <Kbd>Esc</Kbd>\n                  <span>Close</span>\n                </div>\n              )}\n            </CommandFooter>\n          </Command>\n        ) : (\n          <Command>\n            <div className=\"flex items-center *:first:flex-1\">\n              <div className=\"px-2.5 py-1.5\">\n                <div className=\"relative w-full\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n                    data-slot=\"autocomplete-start-addon\"\n                  >\n                    <SparklesIcon />\n                  </div>\n                  <Input\n                    aria-label=\"AI query input\"\n                    className=\"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 *:data-[slot=input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=input]:ps-[calc(--spacing(8)-1px)]\"\n                    disabled={aiState.isGenerating}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>\n                      setAIState((prev) => ({ ...prev, query: e.target.value }))\n                    }\n                    onKeyDown={(\n                      e: React.KeyboardEvent<HTMLInputElement>,\n                    ): void => {\n                      if (e.key === \"Enter\" && !aiState.isGenerating) {\n                        handleGenerateAI();\n                      }\n                      if (e.key === \"Escape\") {\n                        e.preventDefault();\n                        handleBackToSearch();\n                      }\n                    }}\n                    placeholder=\"Ask AI anything…\"\n                    ref={aiInputRef}\n                    size=\"lg\"\n                    value={aiState.query}\n                  />\n                </div>\n              </div>\n              <Button\n                className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                onClick={handleBackToSearch}\n                size=\"sm\"\n                variant=\"ghost\"\n              >\n                <ArrowLeftIcon className=\"size-4 sm:size-3.5\" />\n                Back to search\n                <Kbd className=\"ms-0.5 -me-1.5\">Esc</Kbd>\n              </Button>\n            </div>\n            <CommandPanel>\n              <ScrollArea scrollbarGutter scrollFade>\n                <div className=\"p-5\">\n                  {!aiState.isGenerating &&\n                    !aiState.response &&\n                    !aiState.error && (\n                      <div className=\"flex items-center justify-center py-12\">\n                        <p className=\"text-muted-foreground text-sm\">\n                          Ask AI anything and press <Kbd>Enter</Kbd> to get\n                          started.\n                        </p>\n                      </div>\n                    )}\n\n                  {aiState.error && (\n                    <div\n                      aria-live=\"polite\"\n                      className=\"text-destructive text-sm\"\n                      role=\"alert\"\n                    >\n                      {aiState.error}\n                    </div>\n                  )}\n\n                  {aiState.isGenerating && (\n                    <div className=\"flex flex-col gap-4\">\n                      <div className=\"flex flex-col gap-2\">\n                        <Skeleton className=\"h-4 w-full\" />\n                        <Skeleton className=\"h-4 w-5/6\" />\n                      </div>\n                      <div className=\"flex flex-col gap-2\">\n                        <Skeleton className=\"h-4 w-full\" />\n                        <Skeleton className=\"h-4 w-3/4\" />\n                      </div>\n                      <div className=\"flex flex-col gap-2\">\n                        <Skeleton className=\"h-4 w-full\" />\n                        <Skeleton className=\"h-4 w-full\" />\n                        <Skeleton className=\"h-4 w-2/4\" />\n                      </div>\n                      <div className=\"flex flex-col gap-2\">\n                        <Skeleton className=\"h-4 w-full\" />\n                        <Skeleton className=\"h-4 w-4/5\" />\n                      </div>\n                      <div className=\"flex flex-col gap-2\">\n                        <Skeleton className=\"h-4 w-full\" />\n                        <Skeleton className=\"h-4 w-3/4\" />\n                      </div>\n                      <div className=\"flex flex-col gap-2\">\n                        <Skeleton className=\"h-4 w-full\" />\n                        <Skeleton className=\"h-4 w-2/3\" />\n                      </div>\n                    </div>\n                  )}\n\n                  {aiState.response && !aiState.isGenerating && (\n                    <>\n                      <div\n                        aria-live=\"polite\"\n                        className=\"text-muted-foreground text-sm **:[a]:underline **:[a]:underline-offset-4 **:[code]:rounded-md **:[code]:bg-muted **:[code]:px-[0.3rem] **:[code]:py-[0.2rem] **:[code]:font-mono **:[h1,h2,h3,strong,a]:font-medium **:[h1,h2,h3,strong,a]:text-foreground **:[h1,h2,h3]:not-first:mt-4 **:[h1,h2,h3]:text-base **:[p]:not-first:mt-3 **:[p]:leading-relaxed **:[ul]:my-3 **:[ul]:ms-4 **:[ul]:list-disc\"\n                        dangerouslySetInnerHTML={{\n                          __html: markdownToSafeHTML(aiState.response),\n                        }}\n                      />\n                      {aiState.referenceLinks.length > 0 && (\n                        <div className=\"mt-8 flex flex-wrap gap-2\">\n                          {aiState.referenceLinks.map((link, index) => (\n                            <Button\n                              key={`${link.url}-${index}`}\n                              render={<Link href={link.url} />}\n                              size=\"sm\"\n                              variant=\"secondary\"\n                            >\n                              {link.title}\n                            </Button>\n                          ))}\n                        </div>\n                      )}\n                    </>\n                  )}\n                </div>\n              </ScrollArea>\n            </CommandPanel>\n\n            <CommandFooter>\n              {aiState.isGenerating ? (\n                <div aria-live=\"polite\" className=\"flex items-center gap-2\">\n                  <div className=\"flex h-5 items-center justify-center\">\n                    <Spinner className=\"size-3\" />\n                  </div>\n                  <span className=\"animate-pulse\">Generating response…</span>\n                </div>\n              ) : aiState.response ? (\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"flex h-5 items-center justify-center\">\n                    <CircleQuestionMarkIcon className=\"size-3\" />\n                  </div>\n                  You asked: <span>&quot;{aiState.submittedQuery}&quot;</span>\n                </div>\n              ) : (\n                <div className=\"flex items-center gap-2\">\n                  <Kbd>\n                    <CornerDownLeftIcon />\n                  </Kbd>\n                  <span>Ask AI</span>\n                </div>\n              )}\n            </CommandFooter>\n          </Command>\n        )}\n      </CommandDialogPopup>\n    </CommandDialog>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/app-header.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport type * as React from \"react\";\n\nexport function AppHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"header\">): React.ReactElement {\n  return (\n    <header\n      className={cn(\"mb-6 flex items-start justify-between gap-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function AppHeaderContent({\n  children,\n  className,\n  title,\n  ...props\n}: React.ComponentProps<\"div\"> & { title: string }): React.ReactElement {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)} {...props}>\n      <h1 className=\"font-heading font-semibold text-lg leading-none\">\n        {title}\n      </h1>\n      {children}\n    </div>\n  );\n}\n\nexport function AppHeaderDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">): React.ReactElement {\n  return (\n    <p\n      className={cn(\"text-muted-foreground text-sm max-md:hidden\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function AppHeaderActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)} {...props} />\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/app-mobile-footer.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Menu,\n  MenuGroup,\n  MenuItem,\n  MenuPopup,\n  MenuSeparator,\n  MenuTrigger,\n} from \"@coss/ui/components/menu\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { EllipsisIcon, PlusIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport type * as React from \"react\";\nimport { WorkflowBadge } from \"@/components/workflows-badge\";\nimport { useScrollHide } from \"@/hooks/use-scroll-hide\";\nimport type { NavItem } from \"@/lib/navigation-data\";\nimport { navFooterItems, navMainItems } from \"@/lib/navigation-data\";\n\nconst primaryNavItems: NavItem[] = navMainItems.slice(0, 3);\nconst remainingMainItems: NavItem[] = navMainItems.slice(3);\n\nexport function AppMobileFooter(): React.ReactElement {\n  const isHidden = useScrollHide();\n\n  return (\n    <footer\n      className={cn(\n        \"fixed inset-x-0 bottom-0 z-50 flex items-center justify-center gap-2 pb-4 transition-transform duration-500 ease-in-out before:pointer-events-none before:absolute before:inset-x-0 before:-bottom-1 before:h-[200%] before:bg-linear-to-t before:from-60% before:from-background before:transition-opacity before:duration-500 before:ease-in-out md:hidden\",\n        isHidden\n          ? \"translate-y-full before:opacity-0\"\n          : \"translate-y-0 before:opacity-100\",\n      )}\n    >\n      <div className=\"relative flex w-fit items-center justify-around gap-1 rounded-full border bg-popover p-1 shadow-black/5 shadow-lg backdrop-blur-sm before:pointer-events-none before:absolute before:inset-0 before:rounded-full before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n        {primaryNavItems.map((item) => (\n          <Link\n            aria-current={item.isActive ? \"page\" : undefined}\n            className=\"flex size-11 items-center justify-center rounded-full text-sidebar-foreground/80 aria-[current=page]:bg-sidebar-accent aria-[current=page]:text-sidebar-accent-foreground\"\n            href={item.url}\n            key={item.title}\n          >\n            <item.icon className=\"size-5\" />\n          </Link>\n        ))}\n        <Menu>\n          <MenuTrigger\n            aria-label=\"More options\"\n            render={<Button className=\"size-11 rounded-full\" variant=\"ghost\" />}\n          >\n            <EllipsisIcon className=\"size-5\" />\n          </MenuTrigger>\n          <MenuPopup side=\"top\" sideOffset={8}>\n            <MenuGroup>\n              {remainingMainItems.map((item) => (\n                <MenuItem key={item.title} render={<Link href={item.url} />}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                  {item.title === \"Workflows\" && <WorkflowBadge />}\n                </MenuItem>\n              ))}\n            </MenuGroup>\n            <MenuSeparator />\n            <MenuGroup>\n              {navFooterItems.map((item) => (\n                <MenuItem key={item.title} render={<Link href={item.url} />}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </MenuItem>\n              ))}\n            </MenuGroup>\n          </MenuPopup>\n        </Menu>\n      </div>\n      <Button className=\"size-12 rounded-full sm:size-12\">\n        <PlusIcon className=\"size-5\" />\n      </Button>\n    </footer>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/app-mobile-header.tsx",
    "content": "import type * as React from \"react\";\nimport { HeaderActions } from \"@/components/header-actions\";\nimport { Logo } from \"@/components/logo\";\nimport { MobileHeader } from \"@/components/mobile-header\";\n\nexport function AppMobileHeader(): React.ReactElement {\n  return (\n    <MobileHeader>\n      <Logo />\n      <HeaderActions />\n    </MobileHeader>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/app-sidebar.tsx",
    "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { NavMain } from \"@/components/app/nav-main\";\nimport { NavSecondary } from \"@/components/app/nav-secondary\";\nimport { DebugPopover } from \"@/components/debug-popover\";\nimport { HeaderActions } from \"@/components/header-actions\";\nimport { Logo } from \"@/components/logo\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarMenuButton,\n} from \"@/components/ui/sidebar\";\nimport { navFooterItems, navMainItems } from \"@/lib/navigation-data\";\n\nexport function AppSidebar({\n  variant,\n  ...props\n}: React.ComponentProps<typeof Sidebar> & {\n  variant?: never;\n}): React.ReactElement {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <div className=\"flex flex-col items-center justify-between gap-0.5 px-1 lg:flex-row\">\n          <SidebarMenuButton\n            className=\"w-fit justify-center md:max-lg:p-0\"\n            render={(props: React.HTMLAttributes<HTMLAnchorElement>) => (\n              <Logo {...props} />\n            )}\n          />\n          <HeaderActions />\n        </div>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={navMainItems} />\n        <NavSecondary className=\"mt-auto\" items={navFooterItems} />\n        <div className=\"px-3 pb-4 text-[0.625rem] text-sidebar-foreground/50 max-lg:hidden\">\n          © 2025 Cal.com, Inc. v.5.9.6-h-2701b4d{\" - \"}\n          <DebugPopover />\n        </div>\n      </SidebarContent>\n    </Sidebar>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/bookings-filters.tsx",
    "content": "\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@coss/ui/components/avatar\";\nimport { Badge } from \"@coss/ui/components/badge\";\nimport { Button, buttonVariants } from \"@coss/ui/components/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n} from \"@coss/ui/components/combobox\";\nimport { Group, GroupSeparator, GroupText } from \"@coss/ui/components/group\";\nimport {\n  Menu,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuSeparator,\n  MenuTrigger,\n} from \"@coss/ui/components/menu\";\nimport { Separator } from \"@coss/ui/components/separator\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport {\n  ChevronsUpDownIcon,\n  CopyIcon,\n  EllipsisIcon,\n  FunnelIcon,\n  ListFilterIcon,\n  PencilIcon,\n  SearchIcon,\n  TrashIcon,\n  XIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { Booking } from \"@/lib/mock-bookings-data\";\nimport {\n  mockPastBookings,\n  mockUpcomingBookings,\n} from \"@/lib/mock-bookings-data\";\n\nfunction toKebabCase(str: string): string {\n  return str\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/(^-|-$)/g, \"\");\n}\n\nfunction getUniqueEventTypes(\n  bookings: Booking[],\n): { id: string; label: string }[] {\n  const eventTypeMap = new Map<string, { id: string; label: string }>();\n  for (const booking of bookings) {\n    if (booking.eventType) {\n      const id = toKebabCase(booking.eventType.slug);\n      if (!eventTypeMap.has(id)) {\n        eventTypeMap.set(id, {\n          id,\n          label: booking.eventType.title,\n        });\n      }\n    }\n  }\n  return Array.from(eventTypeMap.values()).sort((a, b) =>\n    a.label.localeCompare(b.label),\n  );\n}\n\nfunction getUniqueMembers(\n  bookings: Booking[],\n): { avatar: string | null; id: string; label: string }[] {\n  const memberMap = new Map<\n    string,\n    { avatar: string | null; id: string; label: string }\n  >();\n  for (const booking of bookings) {\n    if (booking.user?.name) {\n      const id = toKebabCase(booking.user.name);\n      if (!memberMap.has(id)) {\n        memberMap.set(id, {\n          avatar: booking.user.avatarUrl,\n          id,\n          label: booking.user.name,\n        });\n      }\n    }\n  }\n  return Array.from(memberMap.values()).sort((a, b) =>\n    a.label.localeCompare(b.label),\n  );\n}\n\nfunction getUniqueAttendeeNames(\n  bookings: Booking[],\n): { id: string; label: string }[] {\n  const attendeeMap = new Map<string, { id: string; label: string }>();\n  for (const booking of bookings) {\n    for (const attendee of booking.attendees) {\n      const id = toKebabCase(attendee.name);\n      if (!attendeeMap.has(id)) {\n        attendeeMap.set(id, {\n          id,\n          label: attendee.name,\n        });\n      }\n    }\n  }\n  return Array.from(attendeeMap.values()).sort((a, b) =>\n    a.label.localeCompare(b.label),\n  );\n}\n\nfunction getUniqueAttendeeEmails(\n  bookings: Booking[],\n): { id: string; label: string }[] {\n  const emailMap = new Map<string, { id: string; label: string }>();\n  for (const booking of bookings) {\n    for (const attendee of booking.attendees) {\n      const id = toKebabCase(attendee.email.split(\"@\")[0] ?? attendee.email);\n      if (!emailMap.has(attendee.email)) {\n        emailMap.set(attendee.email, {\n          id,\n          label: attendee.email,\n        });\n      }\n    }\n  }\n  return Array.from(emailMap.values()).sort((a, b) =>\n    a.label.localeCompare(b.label),\n  );\n}\n\nfunction getUniqueBookingUids(\n  bookings: Booking[],\n): { id: string; label: string }[] {\n  return bookings\n    .map((booking) => ({\n      id: toKebabCase(booking.uid),\n      label: booking.uid,\n    }))\n    .sort((a, b) => a.label.localeCompare(b.label));\n}\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) {\n    return parts[0]?.charAt(0).toUpperCase() ?? \"\";\n  }\n  const first = parts[0]?.charAt(0) ?? \"\";\n  const last = parts[parts.length - 1]?.charAt(0) ?? \"\";\n  return (first + last).toUpperCase();\n}\n\nfunction CountBadge({ count }: { count: number }): React.ReactElement {\n  return (\n    <Badge className=\"tabular-nums\" variant=\"secondary\">\n      +{count}\n    </Badge>\n  );\n}\n\nfunction SelectionDisplay({\n  children,\n  label,\n  remainingCount,\n}: {\n  children?: React.ReactNode;\n  label: string;\n  remainingCount: number;\n}): React.ReactElement {\n  return (\n    <div className=\"flex items-center gap-2\">\n      {children}\n      <span className=\"truncate\">{label}</span>\n      {remainingCount > 0 && <CountBadge count={remainingCount} />}\n    </div>\n  );\n}\n\nfunction MemberAvatar({\n  name,\n  avatarUrl,\n  className,\n}: {\n  name: string;\n  avatarUrl?: string | null;\n  className?: string;\n}): React.ReactElement {\n  return (\n    <Avatar className={cn(\"size-5\", className)}>\n      {avatarUrl ? <AvatarImage alt={name} src={avatarUrl} /> : null}\n      <AvatarFallback className=\"text-[0.5rem]\">\n        {getInitials(name)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\nconst allBookings: Booking[] = [...mockPastBookings, ...mockUpcomingBookings];\n\nfunction useActiveFilters(): {\n  activeFilters: ActiveFilter[];\n  addFilter: (columnId: string) => void;\n  clearAll: () => void;\n  removeFilter: (columnId: string) => void;\n  updateFilter: (columnId: string, values: string[]) => void;\n} {\n  const [activeFilters, setActiveFilters] = useState<ActiveFilter[]>([]);\n\n  const addFilter = (columnId: string): void => {\n    if (!activeFilters.some((filter) => filter.f === columnId)) {\n      setActiveFilters([...activeFilters, { f: columnId }]);\n    }\n  };\n\n  const updateFilter = (columnId: string, values: string[]): void => {\n    setActiveFilters((prev) => {\n      const exists = prev.some((filter) => filter.f === columnId);\n      if (exists) {\n        return prev.map((filter) =>\n          filter.f === columnId ? { ...filter, v: values } : filter,\n        );\n      }\n      return [...prev, { f: columnId, v: values }];\n    });\n  };\n\n  const removeFilter = (columnId: string): void => {\n    setActiveFilters((prev) => prev.filter((filter) => filter.f !== columnId));\n  };\n\n  const clearAll = (): void => {\n    setActiveFilters([]);\n  };\n\n  return {\n    activeFilters,\n    addFilter,\n    clearAll,\n    removeFilter,\n    updateFilter,\n  };\n}\n\nfunction FilterMenu({\n  hasFilters = false,\n  onSelectFilter,\n  activeFilterIds,\n}: {\n  hasFilters?: boolean;\n  onSelectFilter: (categoryId: string) => void;\n  activeFilterIds: string[];\n}): React.ReactElement | null {\n  const availableCategories = filterCategories.filter(\n    (category) => !activeFilterIds.includes(category.id),\n  );\n\n  if (availableCategories.length === 0 && hasFilters) {\n    return null;\n  }\n\n  return (\n    <Menu>\n      <MenuTrigger render={<Button size=\"sm\" variant=\"outline\" />}>\n        <ListFilterIcon />\n        <span className=\"max-sm:sr-only\">Add Filter</span>\n      </MenuTrigger>\n      <MenuPopup align=\"start\">\n        <MenuGroup>\n          <MenuGroupLabel>Filter by</MenuGroupLabel>\n          {availableCategories.map((category) => (\n            <MenuItem\n              key={category.id}\n              onClick={(): void => onSelectFilter(category.id)}\n            >\n              {category.label}\n            </MenuItem>\n          ))}\n        </MenuGroup>\n      </MenuPopup>\n    </Menu>\n  );\n}\n\nfunction ActiveFilterComponent({\n  filter,\n  category,\n  onUpdate,\n  onRemove,\n  autoOpen = false,\n}: {\n  filter: ActiveFilter;\n  category: FilterCategory;\n  onUpdate: (values: string[]) => void;\n  onRemove: () => void;\n  autoOpen?: boolean;\n}): React.ReactElement {\n  const [open, setOpen] = useState(autoOpen);\n  const hasAutoOpened = useRef(false);\n  // Snapshot of sorted items when combobox opens (selected first)\n  const [sortedItems, setSortedItems] = useState<FilterOption[]>(\n    category.options,\n  );\n\n  useEffect(() => {\n    if (autoOpen && !hasAutoOpened.current) {\n      setOpen(true);\n      hasAutoOpened.current = true;\n    }\n  }, [autoOpen]);\n\n  const selectedValues = filter.v ?? [];\n  // Get selected options in the order they were selected (based on filter.v order)\n  const selectedOptions = selectedValues\n    .map((id) => category.options.find((opt) => opt.id === id))\n    .filter((opt): opt is FilterOption => opt !== undefined);\n\n  const renderTriggerContent = (): string | React.ReactElement => {\n    if (selectedOptions.length === 0) return \"Select\";\n    const firstOption = selectedOptions[0];\n    const remainingCount = selectedOptions.length - 1;\n\n    // For members, show avatar + name + badge\n    if (category.id === \"userIds\") {\n      return (\n        <SelectionDisplay\n          label={firstOption?.label ?? \"\"}\n          remainingCount={remainingCount}\n        >\n          <MemberAvatar\n            avatarUrl={firstOption?.avatar}\n            name={firstOption?.label ?? \"\"}\n          />\n        </SelectionDisplay>\n      );\n    }\n\n    // For other filters, show text + badge\n    if (remainingCount > 0) {\n      return (\n        <SelectionDisplay\n          label={firstOption?.label ?? \"\"}\n          remainingCount={remainingCount}\n        />\n      );\n    }\n\n    return firstOption?.label ?? \"Select\";\n  };\n\n  const handleValueChange = (\n    newValue: FilterOption | FilterOption[] | null,\n  ): void => {\n    if (Array.isArray(newValue)) {\n      // Maintain selection order: keep existing selections in order, append new ones\n      const newIds = newValue.map((v) => v.id);\n      const existingIds = selectedValues.filter((id) => newIds.includes(id));\n      const addedIds = newIds.filter((id) => !selectedValues.includes(id));\n      onUpdate([...existingIds, ...addedIds]);\n    } else if (newValue) {\n      onUpdate([newValue.id]);\n    } else {\n      onUpdate([]);\n    }\n  };\n\n  const handleOpenChange = (isOpen: boolean): void => {\n    setOpen(isOpen);\n    if (isOpen) {\n      // When opening, sort items: selected first, then unselected\n      const selected = category.options.filter((opt) =>\n        selectedValues.includes(opt.id),\n      );\n      const unselected = category.options.filter(\n        (opt) => !selectedValues.includes(opt.id),\n      );\n      setSortedItems([...selected, ...unselected]);\n    }\n    // Remove filter if combobox closes with no selection\n    if (!isOpen && selectedValues.length === 0) {\n      onRemove();\n    }\n  };\n\n  return (\n    <Group>\n      <GroupText\n        className={cn(\n          buttonVariants({\n            size: \"sm\",\n            variant: \"outline\",\n          }),\n          \"pointer-events-none\",\n        )}\n      >\n        <FunnelIcon />\n        {category.label}\n      </GroupText>\n      <GroupSeparator />\n      <Combobox\n        autoHighlight\n        items={sortedItems}\n        multiple\n        onOpenChange={handleOpenChange}\n        onValueChange={handleValueChange}\n        open={open}\n        value={selectedOptions}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className={\n                selectedOptions.length === 0 ? \"justify-between\" : undefined\n              }\n              size=\"sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          {renderTriggerContent()}\n          {selectedOptions.length === 0 && (\n            <ChevronsUpDownIcon className=\"-me-1!\" />\n          )}\n        </ComboboxTrigger>\n        <ComboboxPopup aria-label={`Select ${category.label}`}>\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              placeholder={`Search ${category.label.toLowerCase()}…`}\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(option: FilterOption): React.ReactElement => (\n              <ComboboxItem key={option.id} value={option}>\n                {category.id === \"userIds\" ? (\n                  <div className=\"flex items-center gap-2\">\n                    <MemberAvatar\n                      avatarUrl={option.avatar}\n                      name={option.label}\n                    />\n                    <span>{option.label}</span>\n                  </div>\n                ) : (\n                  option.label\n                )}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      <GroupSeparator />\n      <Button\n        aria-label=\"Remove filter\"\n        onClick={onRemove}\n        size=\"icon-sm\"\n        variant=\"outline\"\n      >\n        <XIcon />\n      </Button>\n    </Group>\n  );\n}\n\ntype SavedFilter = {\n  id: string;\n  isDefault?: boolean;\n  label: string;\n};\n\nconst savedFilters: SavedFilter[] = [\n  { id: \"my-bookings\", isDefault: true, label: \"My bookings\" },\n  { id: \"team-meetings\", label: \"Team meetings\" },\n  { id: \"client-calls\", label: \"Client calls\" },\n];\n\nfunction SavedFiltersCombobox(): React.ReactElement {\n  const [selectedFilter, setSelectedFilter] = useState<SavedFilter | null>(\n    null,\n  );\n\n  const handleClearSelection = (): void => {\n    setSelectedFilter(null);\n  };\n\n  // When no filter is selected, show just the combobox trigger\n  if (!selectedFilter) {\n    return (\n      <Combobox\n        items={savedFilters}\n        onValueChange={setSelectedFilter}\n        value={selectedFilter}\n      >\n        <ComboboxTrigger render={<Button size=\"sm\" variant=\"outline\" />}>\n          Saved Filters\n          <ChevronsUpDownIcon />\n        </ComboboxTrigger>\n        <ComboboxPopup align=\"end\" aria-label=\"Select saved filter\">\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              placeholder=\"Search saved filters…\"\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No saved filters.</ComboboxEmpty>\n          <ComboboxList>\n            {(filter: SavedFilter): React.ReactElement => (\n              <ComboboxItem key={filter.id} value={filter}>\n                {filter.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n    );\n  }\n\n  // When a filter is selected, show Group with combobox and X button, plus edit menu outside\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Group>\n        <Combobox\n          items={savedFilters}\n          onValueChange={setSelectedFilter}\n          value={selectedFilter}\n        >\n          <ComboboxTrigger render={<Button size=\"sm\" variant=\"outline\" />}>\n            {selectedFilter.label}\n            <ChevronsUpDownIcon />\n          </ComboboxTrigger>\n          <ComboboxPopup align=\"end\" aria-label=\"Select saved filter\">\n            <div className=\"border-b p-2\">\n              <ComboboxInput\n                placeholder=\"Search saved filters…\"\n                showTrigger={false}\n                startAddon={<SearchIcon />}\n              />\n            </div>\n            <ComboboxEmpty>No saved filters.</ComboboxEmpty>\n            <ComboboxList>\n              {(filter: SavedFilter): React.ReactElement => (\n                <ComboboxItem key={filter.id} value={filter}>\n                  {filter.label}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxPopup>\n        </Combobox>\n        <GroupSeparator />\n        <Button\n          aria-label=\"Clear saved filter\"\n          onClick={handleClearSelection}\n          size=\"icon-sm\"\n          variant=\"outline\"\n        >\n          <XIcon />\n        </Button>\n      </Group>\n      <Menu>\n        <MenuTrigger\n          render={\n            <Button\n              aria-label=\"Edit saved filter\"\n              size=\"icon-sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <EllipsisIcon />\n        </MenuTrigger>\n        <MenuPopup align=\"end\">\n          {!selectedFilter.isDefault && (\n            <MenuItem>\n              <PencilIcon />\n              Rename\n            </MenuItem>\n          )}\n          <MenuItem>\n            <CopyIcon />\n            Duplicate\n          </MenuItem>\n          {!selectedFilter.isDefault && (\n            <>\n              <MenuSeparator />\n              <MenuItem variant=\"destructive\">\n                <TrashIcon />\n                Delete\n              </MenuItem>\n            </>\n          )}\n        </MenuPopup>\n      </Menu>\n    </div>\n  );\n}\n\nexport type FilterOption = {\n  id: string;\n  label: string;\n  avatar?: string | null;\n};\n\nexport type FilterCategory = {\n  id: string;\n  label: string;\n  options: FilterOption[];\n};\n\nexport type ActiveFilter = {\n  f: string;\n  v?: string[];\n};\n\nexport const filterCategories: FilterCategory[] = [\n  {\n    id: \"eventTypeId\",\n    label: \"Event Type\",\n    options: getUniqueEventTypes(allBookings),\n  },\n  {\n    id: \"userIds\",\n    label: \"Member\",\n    options: getUniqueMembers(allBookings),\n  },\n  {\n    id: \"attendeesName\",\n    label: \"Attendees Name\",\n    options: getUniqueAttendeeNames(allBookings),\n  },\n  {\n    id: \"attendeeEmail\",\n    label: \"Attendee Email\",\n    options: getUniqueAttendeeEmails(allBookings),\n  },\n  {\n    id: \"dateRange\",\n    label: \"Date Range\",\n    options: [\n      { id: \"today\", label: \"Today\" },\n      { id: \"yesterday\", label: \"Yesterday\" },\n      { id: \"this-week\", label: \"This Week\" },\n      { id: \"last-week\", label: \"Last Week\" },\n      { id: \"this-month\", label: \"This Month\" },\n      { id: \"last-month\", label: \"Last Month\" },\n      { id: \"custom\", label: \"Custom Range\" },\n    ],\n  },\n  {\n    id: \"bookingUid\",\n    label: \"Booking UID\",\n    options: getUniqueBookingUids(allBookings),\n  },\n];\n\nexport function BookingsFilters(): React.ReactElement {\n  const { activeFilters, addFilter, updateFilter, removeFilter, clearAll } =\n    useActiveFilters();\n  const [newlyAddedFilter, setNewlyAddedFilter] = useState<string | null>(null);\n\n  const handleSelectFilter = (categoryId: string): void => {\n    addFilter(categoryId);\n    setNewlyAddedFilter(categoryId);\n  };\n\n  const handleUpdateFilter = (columnId: string, values: string[]): void => {\n    updateFilter(columnId, values);\n  };\n\n  const handleRemoveFilter = (columnId: string): void => {\n    removeFilter(columnId);\n    if (newlyAddedFilter === columnId) {\n      setNewlyAddedFilter(null);\n    }\n  };\n\n  const hasFilters = activeFilters.length > 0;\n  const activeFilterIds = activeFilters.map((f) => f.f);\n\n  return (\n    <div className=\"mt-6 grid grid-cols-[auto_1fr] items-start justify-between gap-2 sm:flex\">\n      <div className=\"flex flex-1 flex-wrap gap-2 max-sm:contents\">\n        <FilterMenu\n          activeFilterIds={activeFilterIds}\n          hasFilters={hasFilters}\n          onSelectFilter={handleSelectFilter}\n        />\n        <div className=\"flex flex-wrap gap-2 max-sm:order-1 max-sm:col-span-2 sm:contents\">\n          {activeFilters.map((filter) => {\n            const category = filterCategories.find((c) => c.id === filter.f);\n            if (!category) return null;\n            return (\n              <ActiveFilterComponent\n                autoOpen={newlyAddedFilter === filter.f}\n                category={category}\n                filter={filter}\n                key={filter.f}\n                onRemove={(): void => handleRemoveFilter(filter.f)}\n                onUpdate={(values: string[]): void =>\n                  handleUpdateFilter(filter.f, values)\n                }\n              />\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"flex items-center justify-end gap-2\">\n        {hasFilters && (\n          <>\n            <div className=\"flex items-center gap-1\">\n              <Button onClick={clearAll} size=\"sm\" variant=\"ghost\">\n                Clear\n              </Button>\n              <Button size=\"sm\" variant=\"outline\">\n                Save\n              </Button>\n            </div>\n            <Separator className=\"my-1\" orientation=\"vertical\" />\n          </>\n        )}\n        <SavedFiltersCombobox />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/bookings-nav.tsx",
    "content": "import { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport type * as React from \"react\";\nimport type { Tab } from \"@/components/app/tabbed-nav\";\nimport { TabbedNav } from \"@/components/app/tabbed-nav\";\n\nconst bookingTabs: Tab[] = [\n  { title: \"Upcoming\", url: \"/booking/upcoming\" },\n  { title: \"Unconfirmed\", url: \"/booking/unconfirmed\" },\n  { title: \"Recurring\", url: \"/booking/recurring\" },\n  { title: \"Past\", url: \"/booking/past\" },\n  { title: \"Canceled\", url: \"/booking/canceled\" },\n];\n\nfunction BookingsNav(): React.ReactElement {\n  return (\n    <div className=\"max-sm:-mx-4 max-sm:-my-0.5\">\n      <ScrollArea scrollbarGutter scrollFade>\n        <div className=\"w-fit max-sm:px-4 max-sm:py-0.5\">\n          <TabbedNav\n            ariaLabel=\"Filter bookings\"\n            data-slot=\"bookings-nav\"\n            tabs={bookingTabs}\n          />\n        </div>\n      </ScrollArea>\n    </div>\n  );\n}\n\nexport { BookingsNav };\n"
  },
  {
    "path": "apps/examples/calcom/components/app/bookings-view.tsx",
    "content": "\"use client\";\n\nimport { CalendarIcon, LayoutListIcon } from \"lucide-react\";\nimport { usePathname } from \"next/navigation\";\nimport type * as React from \"react\";\nimport { TabbedNav } from \"@/components/app/tabbed-nav\";\n\nfunction BookingsView(): React.ReactElement {\n  const pathname = usePathname();\n\n  const viewTabs = [\n    {\n      icon: <LayoutListIcon className=\"size-4\" />,\n      title: \"List view\",\n      url: pathname,\n    },\n    {\n      icon: <CalendarIcon className=\"size-4\" />,\n      title: \"Calendar view\",\n      url: `${pathname}?view=calendar`,\n    },\n  ];\n\n  return <TabbedNav ariaLabel=\"View type\" tabs={viewTabs} />;\n}\n\nexport { BookingsView };\n"
  },
  {
    "path": "apps/examples/calcom/components/app/nav-main.tsx",
    "content": "\"use client\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@coss/ui/components/collapsible\";\nimport {\n  Menu,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@coss/ui/components/menu\";\nimport { useMediaQuery } from \"@coss/ui/hooks/use-media-query\";\nimport { ChevronRightIcon, type LucideIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport type * as React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  useSidebarMenuOpen,\n} from \"@/components/ui/sidebar\";\nimport { WorkflowBadge } from \"@/components/workflows-badge\";\n\ntype BaseNavItem = {\n  title: string;\n  url: string;\n  icon: LucideIcon;\n  isActive?: boolean;\n  matchPath?: string;\n};\n\ntype NavSubItem = {\n  title: string;\n  url: string;\n};\n\ntype NavItemWithChildren = BaseNavItem & { items: NavSubItem[] };\ntype NavItemLeaf = BaseNavItem & { items?: undefined };\ntype NavItem = NavItemLeaf | NavItemWithChildren;\n\nfunction hasSubItems(item: NavItem): item is NavItemWithChildren {\n  return Array.isArray(item.items) && item.items.length > 0;\n}\n\nfunction NavItemWithSubmenu({\n  item,\n}: {\n  item: NavItemWithChildren;\n}): React.ReactElement {\n  const isBetweenMdAndLg = useMediaQuery(\"md:max-lg\");\n  const { registerMenu } = useSidebarMenuOpen();\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  useEffect(() => {\n    return (): void => {\n      if (unregisterRef.current) {\n        unregisterRef.current();\n      }\n    };\n  }, []);\n\n  /* Collapsible version for expanded sidebar */\n  const pathname = usePathname();\n  const isActive = useMemo(\n    () => item.items.some((subItem) => pathname.startsWith(subItem.url)),\n    [item.items, pathname],\n  );\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(\n    !!(isActive || item.isActive),\n  );\n\n  // Auto-expand when active\n  useEffect(() => {\n    if (isActive) {\n      setIsExpanded(true);\n    }\n  }, [isActive]);\n\n  return (\n    <SidebarMenuItem>\n      {/* Menu version for collapsed sidebar (md-lg breakpoint) */}\n      <Menu\n        onOpenChange={(open: boolean): void => {\n          if (open) {\n            unregisterRef.current = registerMenu();\n          } else {\n            if (unregisterRef.current) {\n              unregisterRef.current();\n              unregisterRef.current = null;\n            }\n          }\n        }}\n      >\n        <div className=\"hidden md:max-lg:block\">\n          <SidebarMenuButton\n            aria-label={item.title}\n            isActive={isActive || item.isActive}\n            render={<MenuTrigger />}\n            tooltip={isBetweenMdAndLg ? item.title : undefined}\n          >\n            <item.icon />\n          </SidebarMenuButton>\n        </div>\n        <MenuPopup align=\"start\" alignOffset={0} side=\"right\">\n          <MenuGroup>\n            <MenuGroupLabel>{item.title}</MenuGroupLabel>\n            {item.items.map((subItem) => (\n              <MenuItem\n                key={subItem.title}\n                render={<Link href={subItem.url} />}\n              >\n                <span>{subItem.title}</span>\n              </MenuItem>\n            ))}\n          </MenuGroup>\n        </MenuPopup>\n      </Menu>\n\n      {/* Collapsible version for expanded sidebar */}\n      <Collapsible\n        className=\"md:max-lg:hidden\"\n        onOpenChange={setIsExpanded}\n        open={isExpanded}\n      >\n        <CollapsibleTrigger\n          className=\"justify-between\"\n          render={\n            <SidebarMenuButton\n              tooltip={isBetweenMdAndLg ? item.title : undefined}\n            />\n          }\n        >\n          <span className=\"flex items-center gap-2\">\n            <item.icon className=\"size-4\" />\n            <span>{item.title}</span>\n          </span>\n          <ChevronRightIcon className=\"in-data-open:rotate-90 opacity-80 transition-transform\" />\n        </CollapsibleTrigger>\n        <CollapsibleContent>\n          <SidebarMenuSub className=\"mx-0 gap-0.5 border-none px-0\">\n            {item.items.map((subItem) => (\n              <SidebarMenuSubItem key={subItem.title}>\n                <SidebarMenuSubButton\n                  className=\"ps-8 hover:bg-transparent active:bg-transparent data-[active=true]:bg-sidebar-accent\"\n                  isActive={pathname.startsWith(subItem.url)}\n                  render={<Link href={subItem.url} />}\n                >\n                  <span>{subItem.title}</span>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            ))}\n          </SidebarMenuSub>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarMenuItem>\n  );\n}\n\nfunction NavItemSimple({ item }: { item: NavItemLeaf }): React.ReactElement {\n  const isBetweenMdAndLg = useMediaQuery(\"md:max-lg\");\n  const pathname = usePathname();\n  const isActive = pathname.startsWith(item.matchPath ?? item.url);\n\n  return (\n    <SidebarMenuItem>\n      <SidebarMenuButton\n        isActive={isActive}\n        render={<Link href={item.url} />}\n        tooltip={isBetweenMdAndLg ? item.title : undefined}\n      >\n        <item.icon />\n        <span className=\"max-lg:sr-only\">{item.title}</span>\n        {item.title === \"Workflows\" && <WorkflowBadge />}\n      </SidebarMenuButton>\n    </SidebarMenuItem>\n  );\n}\n\nexport function NavMain({ items }: { items: NavItem[] }): React.ReactElement {\n  return (\n    <SidebarGroup>\n      <SidebarMenu className=\"gap-0.5\">\n        {items.map((item) =>\n          hasSubItems(item) ? (\n            <NavItemWithSubmenu item={item} key={item.title} />\n          ) : (\n            <NavItemSimple item={item} key={item.title} />\n          ),\n        )}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/nav-secondary.tsx",
    "content": "\"use client\";\n\nimport { useMediaQuery } from \"@coss/ui/hooks/use-media-query\";\nimport type { LucideIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport type * as React from \"react\";\nimport {\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\";\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string;\n    url: string;\n    icon: LucideIcon;\n  }[];\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>): React.ReactElement {\n  const isBetweenMdAndLg = useMediaQuery(\"md:max-lg\");\n\n  return (\n    <SidebarGroup {...props}>\n      <SidebarMenu className=\"gap-0.5\">\n        {items.map((item) => (\n          <SidebarMenuItem key={item.title}>\n            <SidebarMenuButton\n              render={<Link href={item.url} />}\n              tooltip={isBetweenMdAndLg ? item.title : undefined}\n            >\n              <item.icon />\n              <span className=\"md:max-lg:sr-only lg:inline\">{item.title}</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/app/tabbed-nav.tsx",
    "content": "\"use client\";\n\nimport { cn } from \"@coss/ui/lib/utils\";\nimport Link from \"next/link\";\nimport { usePathname, useSearchParams } from \"next/navigation\";\nimport type * as React from \"react\";\n\ntype Tab = {\n  icon?: React.ReactNode;\n  title: string;\n  url: string;\n};\n\ntype TabbedNavProps = {\n  ariaLabel?: string;\n  className?: string;\n  dataSlot?: string;\n  tabs: Tab[];\n};\n\nfunction TabbedNav({\n  ariaLabel,\n  className,\n  dataSlot,\n  tabs,\n}: TabbedNavProps): React.ReactElement {\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n  const anyTabHasQuery = tabs.some((t) => t.url.includes(\"?\"));\n  const currentView = searchParams.get(\"view\");\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={cn(\n        \"flex w-fit items-center gap-x-0.5 rounded-lg bg-muted p-0.5 text-muted-foreground/72\",\n        className,\n      )}\n      data-slot={dataSlot}\n    >\n      {tabs.map((tab) => {\n        const tabUrl = tab.url.split(\"?\")[0];\n        const tabHasQuery = tab.url.includes(\"?\");\n        const tabView = tab.url.split(\"?view=\")[1];\n\n        let isActive = false;\n\n        if (anyTabHasQuery) {\n          if (tabHasQuery) {\n            isActive = pathname === tabUrl && tabView === currentView;\n          } else {\n            isActive = pathname === tabUrl && !currentView;\n          }\n        } else {\n          isActive = pathname === tabUrl;\n        }\n        const isIconOnly = !!tab.icon;\n        return (\n          <Link\n            aria-current={isActive ? \"page\" : undefined}\n            aria-label={isIconOnly ? tab.title : undefined}\n            className={cn(\n              \"relative flex h-8 shrink-0 cursor-pointer items-center justify-center rounded-md font-medium text-sm outline-none transition-[color,background-color,box-shadow] not-aria-[current=page]:hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-background aria-[current=page]:text-foreground aria-[current=page]:shadow-sm/5 dark:aria-[current=page]:bg-input\",\n              isIconOnly ? \"w-8\" : \"gap-1.5 whitespace-nowrap px-2.5\",\n            )}\n            href={tab.url}\n            key={tab.url}\n          >\n            {tab.icon ?? tab.title}\n          </Link>\n        );\n      })}\n    </nav>\n  );\n}\n\nexport { TabbedNav };\nexport type { Tab, TabbedNavProps };\n"
  },
  {
    "path": "apps/examples/calcom/components/copyable-field.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport { Field, FieldDescription, FieldLabel } from \"@coss/ui/components/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@coss/ui/components/input-group\";\nimport { anchoredToastManager, toastManager } from \"@coss/ui/components/toast\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@coss/ui/components/tooltip\";\nimport { useCopyToClipboard } from \"@coss/ui/hooks/use-copy-to-clipboard\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { CheckIcon, ClipboardIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useRef } from \"react\";\n\nconst RESET_DELAY = 2000;\n\ninterface CopyableFieldProps {\n  label: string;\n  value: string;\n  monospace?: boolean;\n  \"aria-label\"?: string;\n  description?: React.ReactNode;\n  copyTooltip?: string;\n  copiedTooltip?: string;\n  onCopySuccess?: () => void;\n  \"data-testid\"?: string;\n}\n\nexport function CopyableField({\n  label,\n  value,\n  monospace = false,\n  \"aria-label\": ariaLabel,\n  description,\n  copyTooltip = \"Copy to clipboard\",\n  copiedTooltip = \"Copied!\",\n  onCopySuccess,\n  \"data-testid\": dataTestId,\n}: CopyableFieldProps): React.ReactElement {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { copyToClipboard, isCopied } = useCopyToClipboard({\n    onCopy: () => {\n      if (buttonRef.current) {\n        anchoredToastManager.add({\n          data: { tooltipStyle: true },\n          positionerProps: { anchor: buttonRef.current },\n          timeout: RESET_DELAY,\n          title: copiedTooltip,\n          type: \"success\",\n        });\n      } else {\n        toastManager.add({ title: copiedTooltip, type: \"success\" });\n      }\n      onCopySuccess?.();\n    },\n    timeout: RESET_DELAY,\n  });\n\n  const handleCopy = (): void => {\n    if (isCopied) {\n      return;\n    }\n    copyToClipboard(value);\n  };\n\n  return (\n    <Field>\n      <FieldLabel>{label}</FieldLabel>\n      <InputGroup>\n        <InputGroupInput\n          aria-label={ariaLabel ?? label}\n          className={cn(\"*:truncate\", monospace && \"font-mono\")}\n          data-testid={dataTestId}\n          readOnly\n          value={value}\n        />\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <Button\n                  ref={buttonRef}\n                  aria-label={`Copy ${label}`}\n                  size=\"icon-xs\"\n                  type=\"button\"\n                  variant=\"ghost\"\n                  onClick={handleCopy}\n                  disabled={isCopied}\n                />\n              }\n            >\n              {isCopied ? (\n                <CheckIcon aria-hidden />\n              ) : (\n                <ClipboardIcon aria-hidden />\n              )}\n            </TooltipTrigger>\n            <TooltipPopup>\n              <p>{isCopied ? copiedTooltip : copyTooltip}</p>\n            </TooltipPopup>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      {description && <FieldDescription>{description}</FieldDescription>}\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/debug-context.tsx",
    "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport type { Context } from \"react\";\nimport { createContext, type ReactNode, useContext, useState } from \"react\";\n\ninterface DebugContextValue {\n  enableArtificialDelay: boolean;\n  isLoadingOverride: boolean | null;\n  setEnableArtificialDelay: (value: boolean) => void;\n  setIsLoadingOverride: (value: boolean | null) => void;\n}\n\nconst DebugContext: Context<DebugContextValue | null> =\n  createContext<DebugContextValue | null>(null);\n\nexport function DebugProvider({\n  children,\n}: {\n  children: ReactNode;\n}): React.ReactElement {\n  const [isLoadingOverride, setIsLoadingOverride] = useState<boolean | null>(\n    null,\n  );\n  const [enableArtificialDelay, setEnableArtificialDelay] = useState(false);\n\n  return (\n    <DebugContext.Provider\n      value={{\n        enableArtificialDelay,\n        isLoadingOverride,\n        setEnableArtificialDelay,\n        setIsLoadingOverride,\n      }}\n    >\n      {children}\n    </DebugContext.Provider>\n  );\n}\n\nexport function useDebug(): DebugContextValue {\n  const context = useContext(DebugContext);\n  if (!context) {\n    throw new Error(\"useDebug must be used within a DebugProvider\");\n  }\n  return context;\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/debug-popover.tsx",
    "content": "\"use client\";\n\nimport { Label } from \"@coss/ui/components/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@coss/ui/components/popover\";\nimport { Switch } from \"@coss/ui/components/switch\";\nimport type * as React from \"react\";\nimport { useDebug } from \"./debug-context\";\n\nexport function DebugPopover(): React.ReactElement {\n  const {\n    enableArtificialDelay,\n    isLoadingOverride,\n    setEnableArtificialDelay,\n    setIsLoadingOverride,\n  } = useDebug();\n\n  return (\n    <Popover>\n      <PopoverTrigger className=\"cursor-pointer text-[0.625rem] text-sidebar-foreground/50 hover:text-sidebar-foreground/70\">\n        Debug\n      </PopoverTrigger>\n      <PopoverPopup align=\"center\" className=\"w-64\" side=\"top\">\n        <div className=\"flex flex-col gap-4\">\n          <div className=\"flex items-center justify-between gap-4\">\n            <Label htmlFor=\"delay-switch\">Enable artificial delay</Label>\n            <Switch\n              checked={enableArtificialDelay}\n              id=\"delay-switch\"\n              onCheckedChange={setEnableArtificialDelay}\n            />\n          </div>\n          <div className=\"flex items-center justify-between gap-4\">\n            <Label htmlFor=\"loading-switch\">Force loading state</Label>\n            <Switch\n              checked={isLoadingOverride === true}\n              id=\"loading-switch\"\n              onCheckedChange={(checked: boolean): void =>\n                setIsLoadingOverride(checked ? true : null)\n              }\n            />\n          </div>\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/header-actions.tsx",
    "content": "\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@coss/ui/components/avatar\";\nimport { CommandDialogTrigger } from \"@coss/ui/components/command\";\nimport { SearchIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport type * as React from \"react\";\nimport { commandHandle } from \"@/components/app/app-command\";\nimport { SidebarMenuButton } from \"@/components/ui/sidebar\";\nimport { UserMenu } from \"@/components/user-menu\";\n\nexport function HeaderActions(): React.ReactElement {\n  return (\n    <div className=\"flex items-center gap-0.5 md:flex-col lg:flex-row\">\n      <CommandDialogTrigger\n        handle={commandHandle}\n        render={\n          <SidebarMenuButton\n            aria-label=\"Search\"\n            className=\"shrink-0 justify-center p-0 md:max-lg:order-1 lg:size-8\"\n          />\n        }\n      >\n        <SearchIcon />\n      </CommandDialogTrigger>\n      <SidebarMenuButton\n        className=\"shrink-0 justify-center p-0 lg:size-8\"\n        render={\n          <Link href=\"#\">\n            <Avatar className=\"lg:size-6\">\n              <AvatarImage\n                alt=\"Luke Tracy\"\n                src=\"https://pbs.twimg.com/profile_images/1994776674391457792/7utKOMi6_400x400.jpg\"\n              />\n              <AvatarFallback>CC</AvatarFallback>\n            </Avatar>\n          </Link>\n        }\n      />\n      <UserMenu />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/item-label.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport type * as React from \"react\";\nimport type { CSSProperties } from \"react\";\n\ninterface ItemLabelProps {\n  colorLight?: string;\n  colorDark?: string;\n  className?: string;\n}\n\nexport function ItemLabel({\n  colorLight,\n  colorDark,\n  className,\n}: ItemLabelProps): React.ReactElement | null {\n  const hasColor = colorLight || colorDark;\n  if (!hasColor) return null;\n\n  const style = {\n    \"--label-color-dark\": colorDark || \"transparent\",\n    \"--label-color-light\": colorLight || \"transparent\",\n  } as CSSProperties;\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-y-4.5 start-2.5 in-[[data-draggable]:hover,[data-draggable]:has([data-slot=list-item-drag-handle]:focus-visible),[data-draggable][data-drag-overlay],[data-drag-release]]:top-10.5 w-[3px] rounded-full bg-(--label-color-light) not-in-data-drag-release:transition-[top] dark:bg-(--label-color-dark)\",\n        className,\n      )}\n      data-slot=\"item-label-color\"\n      style={style}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/list-item.tsx",
    "content": "import { mergeProps } from \"@coss/ui/base-ui/merge-props\";\nimport { useRender } from \"@coss/ui/base-ui/use-render\";\nimport { Button } from \"@coss/ui/components/button\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type { SyntheticListenerMap } from \"@dnd-kit/core/dist/hooks/utilities\";\nimport { GripVerticalIcon } from \"lucide-react\";\nimport Link, { type LinkProps } from \"next/link\";\nimport type * as React from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { ItemLabel } from \"./item-label\";\n\nconst sortableListClasses =\n  \"has-[[data-drag-ghost],[data-drag-release]]:border-transparent has-[[data-drag-ghost],[data-drag-release]]:bg-transparent has-[[data-drag-ghost],[data-drag-release]]:shadow-none has-[[data-drag-ghost],[data-drag-release]]:before:hidden has-[[data-drag-ghost],[data-drag-release]]:**:data-[slot=list-item]:border-transparent has-[[data-drag-ghost],[data-drag-release]]:**:data-[slot=list-item]:after:visible\";\n\ninterface ListItemProps extends useRender.ComponentProps<\"div\"> {\n  sortable?: boolean;\n  labelColorLight?: string;\n  labelColorDark?: string;\n  isOverlay?: boolean;\n  sortableRef?: (node: HTMLElement | null) => void;\n  sortableStyle?: CSSProperties;\n  sortableDragging?: boolean;\n  sortableDraggingAny?: boolean;\n  sortableListeners?: SyntheticListenerMap;\n  hasDragged?: boolean;\n}\n\nfunction ListItem({\n  children,\n  className,\n  render,\n  sortable = false,\n  labelColorLight,\n  labelColorDark,\n  isOverlay,\n  sortableRef,\n  sortableStyle,\n  sortableDragging,\n  sortableDraggingAny,\n  sortableListeners,\n  hasDragged,\n  ...props\n}: ListItemProps): React.ReactElement {\n  const baseClasses =\n    \"not-last:border-b bg-clip-padding has-[[data-slot=list-item-title]_a:hover]:z-1 has-[[data-slot=list-item-title]_a:hover]:bg-[color-mix(in_srgb,var(--card),var(--color-black)_2%)] dark:has-[[data-slot=list-item-title]_a:hover]:bg-[color-mix(in_srgb,var(--card),var(--color-white)_2%)] first:rounded-t-[calc(var(--radius-2xl)-1px)] last:rounded-b-[calc(var(--radius-2xl)-1px)] in-[[data-slot=card-frame]:has([data-slot=card-frame-header])]:first:rounded-t-[calc(var(--radius-xl)-1px)] in-[[data-slot=card-frame]:has([data-slot=card-frame-footer])]:last:rounded-b-[calc(var(--radius-xl)-1px)]\";\n\n  const staticClasses = \"transition-[background-color]\";\n\n  const sortableClasses =\n    \"after:-inset-px relative translate-y-(--translate-y) data-has-dragged:starting:rounded-2xl not-data-drag-on:transition-[background-color] data-has-dragged:not-data-drag-on:transition-[background-color,border-radius] after:pointer-events-none after:invisible after:absolute data-has-dragged:starting:after:inset-y-1 data-has-dragged:starting:after:rounded-2xl first:after:rounded-t-2xl last:after:rounded-b-2xl after:border after:border-border after:bg-card after:transition-[border-radius,inset] data-drag-overlay:data-drag-release:hidden data-drag-overlay:pointer-events-none data-drag-on:not-data-drag-ghost:z-1 data-drag-on:rounded-2xl data-drag-on:transition-[translate] data-drag-on:after:visible data-drag-overlay:after:visible data-drag-on:after:inset-y-1 data-drag-overlay:after:inset-y-1 data-drag-on:after:rounded-2xl data-drag-overlay:after:rounded-2xl data-drag-ghost:after:border-dashed data-drag-ghost:after:bg-muted/24 not-dark:data-drag-overlay:after:bg-clip-padding data-drag-overlay:after:shadow-lg data-drag-ghost:*:opacity-0 before:pointer-events-none before:absolute before:inset-x-0 before:inset-y-[5px] before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] not-data-drag-overlay:before:hidden before:z-1\";\n\n  const innerContent = (\n    <div\n      className={cn(\n        \"relative flex items-center justify-between gap-4 px-6 py-4\",\n        sortable && \"z-1\",\n      )}\n    >\n      {sortable && (\n        <ItemLabel colorDark={labelColorDark} colorLight={labelColorLight} />\n      )}\n      {children}\n    </div>\n  );\n\n  const defaultProps = {\n    className: cn(\n      baseClasses,\n      sortable ? sortableClasses : staticClasses,\n      className,\n    ),\n    \"data-drag-ghost\": sortable && sortableDragging ? \"\" : undefined,\n    \"data-drag-on\": sortable && sortableDraggingAny ? \"\" : undefined,\n    \"data-drag-overlay\": sortable && isOverlay ? \"\" : undefined,\n    \"data-draggable\": sortable ? \"\" : undefined,\n    \"data-has-dragged\": sortable && hasDragged ? \"\" : undefined,\n    \"data-slot\": \"list-item\",\n    ref: sortable ? sortableRef : undefined,\n    style: sortable ? sortableStyle : undefined,\n    ...(sortable ? sortableListeners : {}),\n  };\n\n  const mergedProps = mergeProps<\"div\">(defaultProps, props);\n  const propsWithInnerContent = {\n    ...mergedProps,\n    children: innerContent,\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: propsWithInnerContent,\n    render,\n  });\n}\n\ninterface SortableListItemProps {\n  children: ReactNode;\n  className?: string;\n  labelColorLight?: string;\n  labelColorDark?: string;\n  isOverlay?: boolean;\n  sortableRef?: (node: HTMLElement | null) => void;\n  sortableStyle?: CSSProperties;\n  sortableDragging?: boolean;\n  sortableDraggingAny?: boolean;\n  sortableListeners?: SyntheticListenerMap;\n  hasDragged?: boolean;\n}\n\nfunction SortableListItem({\n  children,\n  className,\n  labelColorLight,\n  labelColorDark,\n  isOverlay,\n  sortableRef,\n  sortableStyle,\n  sortableDragging,\n  sortableDraggingAny,\n  sortableListeners,\n  hasDragged,\n}: SortableListItemProps): React.ReactElement {\n  return (\n    <ListItem\n      className={className}\n      hasDragged={hasDragged}\n      isOverlay={isOverlay}\n      labelColorDark={labelColorDark}\n      labelColorLight={labelColorLight}\n      sortable\n      sortableDragging={sortableDragging}\n      sortableDraggingAny={sortableDraggingAny}\n      sortableListeners={sortableListeners}\n      sortableRef={sortableRef}\n      sortableStyle={sortableStyle}\n    >\n      {children}\n    </ListItem>\n  );\n}\n\nfunction ListItemDragHandle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">): React.ReactElement {\n  const defaultProps = {\n    \"aria-label\": \"Drag to reorder\",\n    className: cn(\n      \"pointer-events-auto absolute inset-y-px start-0 z-1 h-auto! cursor-grab items-start bg-transparent! pt-4.25 in-[[data-slot=list-item]_a:hover,[data-slot=list-item][data-drag-overlay],[data-drag-release]]:opacity-100 opacity-0 not-in-data-drag-release:transition-opacity focus:opacity-100 focus-visible:ring-0 focus-visible:ring-offset-0 active:cursor-grabbing\",\n      className,\n    ),\n    \"data-slot\": \"list-item-drag-handle\",\n  };\n  const mergedProps = mergeProps<\"button\">(defaultProps, props);\n  const defaultElement = (\n    <Button size=\"icon-xs\" variant=\"ghost\">\n      <GripVerticalIcon\n        aria-hidden=\"true\"\n        className=\"in-[[data-slot=list-item-drag-handle]:hover,[data-slot=list-item-drag-handle]:focus-visible]:opacity-100 opacity-40\"\n      />\n    </Button>\n  );\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergedProps,\n    render: render ?? defaultElement,\n  });\n}\n\nfunction ListItemContent({\n  children,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex min-w-0 flex-1 flex-col gap-3\", className),\n    \"data-slot\": \"list-item-content\",\n  };\n  const mergedProps = mergeProps<\"div\">(defaultProps, props);\n  const propsWithChildren = { ...mergedProps, children };\n  return useRender({\n    defaultTagName: \"div\",\n    props: propsWithChildren,\n    render,\n  });\n}\n\nfunction ListItemHeader({\n  children,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col gap-1\", className),\n    \"data-slot\": \"list-item-header\",\n  };\n  const mergedProps = mergeProps<\"div\">(defaultProps, props);\n  const propsWithChildren = { ...mergedProps, children };\n  return useRender({\n    defaultTagName: \"div\",\n    props: propsWithChildren,\n    render,\n  });\n}\n\nfunction ListItemTitle({\n  children,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"h2\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-semibold sm:text-sm\", className),\n    \"data-slot\": \"list-item-title\",\n  };\n  const mergedProps = mergeProps<\"h2\">(defaultProps, props);\n  const propsWithChildren = { ...mergedProps, children };\n  return useRender({\n    defaultTagName: \"h2\",\n    props: propsWithChildren,\n    render,\n  });\n}\n\nfunction ListItemTitleLink({\n  children,\n  className,\n  href,\n  render,\n  ...props\n}: LinkProps & useRender.ComponentProps<\"a\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"before:absolute before:inset-0\", className),\n    \"data-slot\": \"list-item-title-link\",\n    href,\n  };\n  const mergedProps = mergeProps<\"a\">(defaultProps, props);\n  const propsWithChildren = { ...mergedProps, children };\n  const defaultElement = <Link href={href} />;\n  return useRender({\n    defaultTagName: \"a\",\n    props: propsWithChildren,\n    render: render ?? defaultElement,\n  });\n}\n\nfunction ListItemDescription({\n  children,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"p\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"list-item-description\",\n  };\n  const mergedProps = mergeProps<\"p\">(defaultProps, props);\n  const propsWithChildren = { ...mergedProps, children };\n  return useRender({\n    defaultTagName: \"p\",\n    props: propsWithChildren,\n    render,\n  });\n}\n\nfunction ListItemBadges({\n  children,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-wrap items-center gap-2\", className),\n    \"data-slot\": \"list-item-badges\",\n  };\n  const mergedProps = mergeProps<\"div\">(defaultProps, props);\n  const propsWithChildren = { ...mergedProps, children };\n  return useRender({\n    defaultTagName: \"div\",\n    props: propsWithChildren,\n    render,\n  });\n}\n\nfunction ListItemActions({\n  children,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"relative flex items-center gap-4\", className),\n    \"data-slot\": \"list-item-actions\",\n  };\n  const mergedProps = mergeProps<\"div\">(defaultProps, props);\n  const propsWithChildren = { ...mergedProps, children };\n  return useRender({\n    defaultTagName: \"div\",\n    props: propsWithChildren,\n    render,\n  });\n}\n\nexport {\n  ItemLabel,\n  ListItem,\n  ListItemActions,\n  ListItemBadges,\n  ListItemContent,\n  ListItemDescription,\n  ListItemDragHandle,\n  ListItemHeader,\n  ListItemTitle,\n  ListItemTitleLink,\n  sortableListClasses,\n  SortableListItem,\n};\n"
  },
  {
    "path": "apps/examples/calcom/components/logo.tsx",
    "content": "import Link from \"next/link\";\nimport type * as React from \"react\";\n\ntype LogoProps = Omit<React.ComponentPropsWithoutRef<typeof Link>, \"href\">;\n\nexport function Logo(props: LogoProps): React.ReactElement {\n  return (\n    <Link href=\"/\" {...props}>\n      <h1 className=\"font-heading font-semibold text-foreground text-xl leading-none md:text-base lg:text-lg\">\n        Cal<span className=\"md:max-lg:sr-only\">.com</span>\n      </h1>\n    </Link>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/mobile-header.tsx",
    "content": "\"use client\";\n\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type * as React from \"react\";\nimport { useScrollHide } from \"@/hooks/use-scroll-hide\";\n\nexport function MobileHeader({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}): React.ReactElement {\n  const isHidden = useScrollHide();\n\n  return (\n    <header\n      className={cn(\n        \"fixed top-0 z-50 flex h-14 w-full items-center justify-between border-border border-b bg-sidebar px-4 transition-transform duration-500 ease-in-out md:hidden\",\n        isHidden ? \"-translate-y-full\" : \"translate-y-0\",\n        className,\n      )}\n    >\n      {children}\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/settings/settings-mobile-header.tsx",
    "content": "import { Button } from \"@coss/ui/components/button\";\nimport { ArrowLeftIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport type * as React from \"react\";\nimport { MobileHeader } from \"@/components/mobile-header\";\nimport { SettingsSheet } from \"@/components/settings/settings-sheet\";\n\nexport function SettingsMobileHeader(): React.ReactElement {\n  return (\n    <MobileHeader>\n      <Button\n        aria-label=\"Back\"\n        render={<Link href=\"/event-types\" />}\n        variant=\"ghost\"\n      >\n        <ArrowLeftIcon className=\"-ms-0.5\" />\n        <span>Back</span>\n      </Button>\n      <SettingsSheet />\n    </MobileHeader>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/settings/settings-nav-section.tsx",
    "content": "\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@coss/ui/components/avatar\";\nimport { ExternalLinkIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport type * as React from \"react\";\nimport type {\n  SettingsNavChild,\n  SettingsNavItem,\n} from \"@/lib/settings-navigation-data\";\n\ninterface SettingsNavSectionProps {\n  section: SettingsNavItem;\n  pathname: string;\n  variant: \"sidebar\" | \"sheet\";\n  onItemClick?: () => void;\n}\n\nfunction SettingsNavSectionHeader({\n  section,\n  variant,\n}: {\n  section: SettingsNavItem;\n  variant: \"sidebar\" | \"sheet\";\n}): React.ReactElement {\n  const baseClassName =\n    variant === \"sheet\"\n      ? \"flex items-center gap-2 font-medium text-sidebar-accent-foreground text-sm\"\n      : \"flex items-center gap-2 font-medium text-sidebar-accent-foreground text-sm\";\n\n  return (\n    <div className={baseClassName}>\n      {section.avatar && (\n        <Avatar className=\"size-4\">\n          <AvatarImage alt={section.title} src={section.avatar.src} />\n          <AvatarFallback className=\"text-[10px]\">\n            {section.avatar.fallback}\n          </AvatarFallback>\n        </Avatar>\n      )}\n      {section.icon && <section.icon className=\"size-4 opacity-80\" />}\n      <span>{section.title}</span>\n    </div>\n  );\n}\n\nfunction SettingsNavSheetItem({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: SettingsNavChild;\n  isActive: boolean;\n  onClick?: () => void;\n}): React.ReactElement {\n  return (\n    <Link\n      className=\"flex items-center gap-1 rounded-lg px-2 py-1.5 text-muted-foreground text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\"\n      data-active={isActive}\n      href={item.url}\n      onClick={onClick}\n    >\n      {item.title}\n      {item.external && <ExternalLinkIcon className=\"size-3 opacity-80\" />}\n    </Link>\n  );\n}\n\nexport function SettingsNavSection({\n  section,\n  pathname,\n  variant,\n  onItemClick,\n}: SettingsNavSectionProps): React.ReactElement | null {\n  if (variant === \"sheet\") {\n    return (\n      <div className=\"flex flex-col gap-2\">\n        <SettingsNavSectionHeader section={section} variant=\"sheet\" />\n        {section.children && (\n          <div className=\"flex flex-col gap-0.5 ps-6\">\n            {section.children.map((item) => (\n              <SettingsNavSheetItem\n                isActive={pathname === item.url}\n                item={item}\n                key={item.url}\n                onClick={onItemClick}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // Sidebar variant - uses sidebar-specific components\n  return null; // Sidebar uses its own components, this is handled in settings-sidebar.tsx\n}\n\nexport { SettingsNavSectionHeader, SettingsNavSheetItem };\n"
  },
  {
    "path": "apps/examples/calcom/components/settings/settings-sheet.tsx",
    "content": "\"use client\";\n\nimport { Sheet, SheetPopup, SheetTrigger } from \"@coss/ui/components/sheet\";\nimport { MenuIcon } from \"lucide-react\";\nimport { usePathname } from \"next/navigation\";\nimport * as React from \"react\";\nimport { SettingsNavSection } from \"@/components/settings/settings-nav-section\";\nimport { SidebarMenuButton } from \"@/components/ui/sidebar\";\nimport { settingsNavItems } from \"@/lib/settings-navigation-data\";\n\nexport function SettingsSheet(): React.ReactElement {\n  const [open, setOpen] = React.useState(false);\n  const pathname = usePathname();\n\n  const handleCloseSheet = React.useCallback((): void => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Sheet onOpenChange={setOpen} open={open}>\n      <SidebarMenuButton render={<SheetTrigger />} tooltip=\"Menu\">\n        <MenuIcon />\n      </SidebarMenuButton>\n      <SheetPopup className=\"max-w-sm\" showCloseButton={false} side=\"left\">\n        <div className=\"flex flex-col gap-6 overflow-auto p-6 pt-8\">\n          {settingsNavItems.map((section) => (\n            <SettingsNavSection\n              key={section.url}\n              onItemClick={handleCloseSheet}\n              pathname={pathname}\n              section={section}\n              variant=\"sheet\"\n            />\n          ))}\n        </div>\n      </SheetPopup>\n    </Sheet>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/settings/settings-sidebar.tsx",
    "content": "\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@coss/ui/components/avatar\";\nimport { ArrowLeftIcon, ExternalLinkIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport type * as React from \"react\";\nimport { SettingsSheet } from \"@/components/settings/settings-sheet\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenuButton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\";\nimport type { SettingsNavItem } from \"@/lib/settings-navigation-data\";\nimport { settingsNavItems } from \"@/lib/settings-navigation-data\";\n\nfunction SettingsNavSection({\n  section,\n  pathname,\n}: {\n  section: SettingsNavItem;\n  pathname: string;\n}): React.ReactElement {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel className=\"h-7 text-sidebar-accent-foreground\">\n        {section.avatar && (\n          <Avatar className=\"size-4\">\n            <AvatarImage alt={section.title} src={section.avatar.src} />\n            <AvatarFallback className=\"text-[10px]\">\n              {section.avatar.fallback}\n            </AvatarFallback>\n          </Avatar>\n        )}\n        {section.icon && <section.icon className=\"opacity-80\" />}\n        <span className=\"max-lg:sr-only\">{section.title}</span>\n      </SidebarGroupLabel>\n      {section.children && (\n        <SidebarMenuSub className=\"mx-0 gap-0.5 border-none px-0\">\n          {section.children.map((item) => (\n            <SidebarMenuSubItem key={item.url}>\n              <SidebarMenuSubButton\n                className=\"ps-8 hover:bg-transparent active:bg-transparent data-[active=true]:bg-sidebar-accent\"\n                isActive={pathname === item.url}\n                render={<Link href={item.url} />}\n              >\n                <span className=\"flex items-center gap-1\">\n                  {item.title}\n                  {item.external && (\n                    <ExternalLinkIcon className=\"size-3 opacity-80\" />\n                  )}\n                </span>\n              </SidebarMenuSubButton>\n            </SidebarMenuSubItem>\n          ))}\n        </SidebarMenuSub>\n      )}\n    </SidebarGroup>\n  );\n}\n\nexport function SettingsSidebar({\n  ...props\n}: React.ComponentProps<typeof Sidebar>): React.ReactElement {\n  const pathname = usePathname();\n\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <div className=\"flex flex-col gap-1 px-2\">\n          <SidebarMenuButton\n            render={<Link aria-label=\"Back\" href=\"/event-types\" />}\n            tooltip=\"Back\"\n          >\n            <ArrowLeftIcon className=\"lg:-ms-0.5\" />\n            <span className=\"max-lg:sr-only\">Back</span>\n          </SidebarMenuButton>\n          <div className=\"hidden md:max-lg:block\">\n            <SettingsSheet />\n          </div>\n        </div>\n      </SidebarHeader>\n      <SidebarContent className=\"hidden lg:block\">\n        {settingsNavItems.map((section) => (\n          <SettingsNavSection\n            key={section.url}\n            pathname={pathname}\n            section={section}\n          />\n        ))}\n      </SidebarContent>\n    </Sidebar>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/settings/settings-toggle.tsx",
    "content": "\"use client\";\n\nimport {\n  Card,\n  CardFrameDescription,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@coss/ui/components/card\";\nimport { Switch } from \"@coss/ui/components/switch\";\nimport type * as React from \"react\";\n\ninterface SettingsToggleProps {\n  title: string;\n  description: string;\n  defaultChecked?: boolean;\n}\n\nexport function SettingsToggle({\n  title,\n  description,\n  defaultChecked = false,\n}: SettingsToggleProps): React.ReactElement {\n  return (\n    <Card>\n      <CardPanel>\n        <div className=\"flex items-center justify-between gap-4\">\n          <CardFrameHeader className=\"gap-0 p-0!\">\n            <CardFrameTitle>{title}</CardFrameTitle>\n            <CardFrameDescription>{description}</CardFrameDescription>\n          </CardFrameHeader>\n          <Switch defaultChecked={defaultChecked} />\n        </div>\n      </CardPanel>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/settings-toggle.tsx",
    "content": "\"use client\";\n\nimport {\n  Card,\n  CardFrameDescription,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@coss/ui/components/card\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport { Switch } from \"@coss/ui/components/switch\";\nimport type * as React from \"react\";\n\ninterface SettingsToggleProps {\n  title: string;\n  description: string;\n  defaultChecked?: boolean;\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  loading?: boolean;\n}\n\nexport function SettingsToggle({\n  title,\n  description,\n  defaultChecked = false,\n  checked,\n  onCheckedChange,\n  disabled,\n  loading = false,\n}: SettingsToggleProps): React.ReactElement {\n  const isControlled = checked !== undefined;\n  return (\n    <Card>\n      <CardPanel>\n        <div className=\"flex items-center justify-between gap-4\">\n          <CardFrameHeader className=\"p-0\">\n            <CardFrameTitle>{title}</CardFrameTitle>\n            <CardFrameDescription>{description}</CardFrameDescription>\n          </CardFrameHeader>\n          {loading ? (\n            <Skeleton className=\"h-4.5 w-7.5 rounded-full\" />\n          ) : (\n            <Switch\n              checked={isControlled ? checked : undefined}\n              defaultChecked={isControlled ? undefined : defaultChecked}\n              disabled={disabled}\n              onCheckedChange={onCheckedChange}\n            />\n          )}\n        </div>\n      </CardPanel>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/sortable.tsx",
    "content": "\"use client\";\n\nimport type { DraggableAttributes } from \"@dnd-kit/core\";\nimport {\n  closestCenter,\n  DndContext,\n  type DragCancelEvent,\n  type DragEndEvent,\n  DragOverlay,\n  type DragStartEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  type UniqueIdentifier,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport type { SyntheticListenerMap } from \"@dnd-kit/core/dist/hooks/utilities\";\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport type * as React from \"react\";\nimport {\n  type Context,\n  type CSSProperties,\n  createContext,\n  type ReactNode,\n  useContext,\n  useId,\n  useState,\n} from \"react\";\n\nconst SortableStateContext: Context<{\n  isDraggingAny: boolean;\n  activeId: UniqueIdentifier | null;\n  hasDragged: boolean;\n}> = createContext<{\n  isDraggingAny: boolean;\n  activeId: UniqueIdentifier | null;\n  hasDragged: boolean;\n}>({\n  activeId: null,\n  hasDragged: false,\n  isDraggingAny: false,\n});\n\ninterface SortableItemProps {\n  id: UniqueIdentifier;\n  children: (props: SortableItemRenderProps) => ReactNode;\n}\n\ninterface SortableListProps<T extends { id: UniqueIdentifier }> {\n  items: T[];\n  onReorder: (items: T[]) => void;\n  children: ReactNode;\n  renderOverlay?: (activeItem: T) => ReactNode;\n}\n\nexport interface SortableItemRenderProps {\n  attributes: DraggableAttributes;\n  listeners: SyntheticListenerMap | undefined;\n  isDragging: boolean;\n  isDraggingAny: boolean;\n  hasDragged: boolean;\n  setNodeRef: (node: HTMLElement | null) => void;\n  style: CSSProperties;\n}\n\nexport function SortableItem({ id, children }: SortableItemProps): ReactNode {\n  const { isDraggingAny, hasDragged } = useContext(SortableStateContext);\n  const { attributes, listeners, setNodeRef, transform, isDragging } =\n    useSortable({ id });\n\n  const style = {\n    \"--translate-y\": `${transform?.y ?? 0}px`,\n  } as CSSProperties;\n\n  return children({\n    attributes,\n    hasDragged,\n    isDragging,\n    isDraggingAny,\n    listeners,\n    setNodeRef,\n    style,\n  });\n}\n\nexport function SortableList<T extends { id: UniqueIdentifier }>({\n  items,\n  onReorder,\n  children,\n  renderOverlay,\n}: SortableListProps<T>): React.ReactElement {\n  const id = useId();\n  const [isDraggingAny, setIsDraggingAny] = useState(false);\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);\n  const [hasDragged, setHasDragged] = useState(false);\n  const sensors = useSensors(\n    useSensor(MouseSensor, {\n      activationConstraint: {\n        distance: 4,\n      },\n    }),\n    useSensor(TouchSensor, {\n      activationConstraint: {\n        delay: 250,\n        tolerance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const ids: UniqueIdentifier[] = items.map((item) => item.id);\n\n  const handleDragStart = (event: DragStartEvent): void => {\n    setIsDraggingAny(true);\n    setActiveId(event.active.id);\n    if (!hasDragged) {\n      setHasDragged(true);\n    }\n  };\n\n  const handleDragEnd = (event: DragEndEvent): void => {\n    setIsDraggingAny(false);\n    setActiveId(null);\n    const { active, over } = event;\n\n    if (over && active.id !== over.id) {\n      const oldIndex = items.findIndex((item) => item.id === active.id);\n      const newIndex = items.findIndex((item) => item.id === over.id);\n      onReorder(arrayMove(items, oldIndex, newIndex));\n    }\n  };\n\n  const handleDragCancel = (_event: DragCancelEvent): void => {\n    setIsDraggingAny(false);\n    setActiveId(null);\n  };\n\n  const activeItem: T | undefined =\n    activeId !== null ? items.find((item) => item.id === activeId) : undefined;\n\n  return (\n    <SortableStateContext.Provider\n      value={{ activeId, hasDragged, isDraggingAny }}\n    >\n      <DndContext\n        collisionDetection={closestCenter}\n        id={id}\n        onDragCancel={handleDragCancel}\n        onDragEnd={handleDragEnd}\n        onDragStart={handleDragStart}\n        sensors={sensors}\n      >\n        <SortableContext items={ids} strategy={verticalListSortingStrategy}>\n          {children}\n        </SortableContext>\n        <DragOverlay\n          dropAnimation={{\n            duration: 150,\n            easing: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n            sideEffects({\n              active,\n              dragOverlay,\n            }: {\n              active: { node: Element };\n              dragOverlay: { node: Element };\n            }): () => void {\n              active.node.setAttribute(\"data-drag-release\", \"\");\n              dragOverlay.node.firstElementChild?.setAttribute(\n                \"data-drag-release\",\n                \"\",\n              );\n              return (): void => {\n                requestAnimationFrame(() =>\n                  requestAnimationFrame(() => {\n                    active.node.removeAttribute(\"data-drag-release\");\n                    dragOverlay.node.firstElementChild?.removeAttribute(\n                      \"data-drag-release\",\n                    );\n                  }),\n                );\n              };\n            },\n          }}\n        >\n          {activeItem && renderOverlay ? renderOverlay(activeItem) : null}\n        </DragOverlay>\n      </DndContext>\n    </SortableStateContext.Provider>\n  );\n}\n\nexport { arrayMove };\n"
  },
  {
    "path": "apps/examples/calcom/components/ui/sidebar.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@coss/ui/base-ui/merge-props\";\nimport { useRender } from \"@coss/ui/base-ui/use-render\";\nimport { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { Separator } from \"@coss/ui/components/separator\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@coss/ui/components/tooltip\";\nimport { useMediaQuery } from \"@coss/ui/hooks/use-media-query\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport * as React from \"react\";\n\ntype SidebarTooltipHandle = ReturnType<\n  typeof TooltipCreateHandle<React.ComponentType>\n>;\n\nconst SidebarMenuOpenContext: React.Context<{\n  openMenuCount: number;\n  registerMenu: () => () => void;\n}> = React.createContext<{\n  openMenuCount: number;\n  registerMenu: () => () => void;\n}>({\n  openMenuCount: 0,\n  registerMenu: () => () => {},\n});\n\nexport const sidebarTooltipHandle: SidebarTooltipHandle =\n  TooltipCreateHandle<React.ComponentType>();\n\nexport function SidebarProvider({\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  const [openMenuCount, setOpenMenuCount] = React.useState(0);\n\n  const registerMenu = React.useCallback((): (() => void) => {\n    setOpenMenuCount((prev) => prev + 1);\n    return (): void => {\n      setOpenMenuCount((prev) => Math.max(0, prev - 1));\n    };\n  }, []);\n\n  return (\n    <SidebarMenuOpenContext.Provider value={{ openMenuCount, registerMenu }}>\n      <TooltipProvider delay={150} timeout={0}>\n        <div\n          className={cn(\n            \"group/sidebar-wrapper isolate flex min-h-svh w-full bg-sidebar [--sidebar-width:4rem] lg:[--sidebar-width:16rem]\",\n            className,\n          )}\n          data-slot=\"sidebar-wrapper\"\n          {...props}\n        >\n          {children}\n          <Tooltip handle={sidebarTooltipHandle}>\n            {({\n              payload: Payload,\n            }: {\n              payload: React.ComponentType | undefined;\n            }): React.ReactElement => (\n              <TooltipPopup align=\"center\" side=\"right\">\n                {Payload !== undefined && <Payload />}\n              </TooltipPopup>\n            )}\n          </Tooltip>\n        </div>\n      </TooltipProvider>\n    </SidebarMenuOpenContext.Provider>\n  );\n}\n\nexport function useSidebarMenuOpen(): {\n  openMenuCount: number;\n  registerMenu: () => () => void;\n} {\n  return React.useContext(SidebarMenuOpenContext);\n}\n\nexport function Sidebar({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className=\"group peer hidden w-(--sidebar-width) text-sidebar-foreground md:block\"\n      data-slot=\"sidebar\"\n    >\n      <div\n        className={cn(\n          \"fixed inset-y-0 h-svh w-(--sidebar-width) pt-2\",\n          className,\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"flex h-full w-full flex-col\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function SidebarInset({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"main\">): React.ReactElement {\n  return (\n    <main\n      className={cn(\n        \"relative flex w-full min-w-0 flex-1 flex-col border-sidebar-border bg-background not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] md:my-2 md:me-2 md:rounded-2xl md:border dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    >\n      <div className=\"px-4 py-6 max-md:pb-24 md:p-6 lg:px-10\">{children}</div>\n    </main>\n  );\n}\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 px-1 py-2 lg:px-2\", className)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <ScrollArea scrollFade>\n      <div\n        className={cn(\"flex h-full flex-col gap-2 px-2\", className)}\n        data-sidebar=\"content\"\n        data-slot=\"sidebar-content\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function SidebarGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative flex w-full min-w-0 flex-col px-1 py-2\",\n        className,\n      )}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 shrink-0 items-center gap-2 rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"group-label\",\n    \"data-slot\": \"sidebar-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"md:max-lg:hidden\",\n      className,\n    ),\n    \"data-sidebar\": \"group-action\",\n    \"data-slot\": \"sidebar-group-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"w-full text-sm\", className)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex min-w-0 flex-col gap-1 lg:w-full\", className)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-item relative\", className)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuButton({\n  isActive = false,\n  tooltip,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentType;\n}): React.ReactElement {\n  const isMobile = useMediaQuery(\"max-md\");\n  const isBetweenMdAndLg = useMediaQuery(\"md:max-lg\");\n  const state = isBetweenMdAndLg ? \"collapsed\" : \"expanded\";\n  const showTooltip = state === \"collapsed\" && !isMobile;\n\n  const defaultProps = {\n    className: cn(\n      \"peer/menu-button relative flex h-8 w-full cursor-pointer items-center gap-2 rounded-lg p-2 text-left font-medium text-sidebar-foreground text-sm outline-hidden ring-sidebar-ring after:absolute after:top-full after:h-1 after:w-full hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-pressed:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-pressed:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground max-lg:size-10 max-lg:justify-center max-lg:p-0 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-button\",\n    \"data-slot\": \"sidebar-menu-button\",\n  };\n\n  const buttonProps = mergeProps<\"button\">(defaultProps, props);\n\n  const buttonElement = useRender({\n    defaultTagName: \"button\",\n    props: buttonProps,\n    render,\n  });\n\n  if (!tooltip || !showTooltip) {\n    return buttonElement;\n  }\n\n  // Convert string tooltip to a component\n  const TooltipContent: React.ComponentType =\n    typeof tooltip === \"string\" ? (): React.ReactNode => tooltip : tooltip;\n\n  return (\n    <TooltipTrigger\n      handle={sidebarTooltipHandle}\n      payload={TooltipContent}\n      render={buttonElement as React.ReactElement<Record<string, unknown>>}\n    />\n  );\n}\n\nexport function SidebarMenuAction({\n  className,\n  showOnHover = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  showOnHover?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"md:max-lg:hidden\",\n      showOnHover &&\n        \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"menu-action\",\n    \"data-slot\": \"sidebar-menu-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean;\n}): React.ReactElement {\n  // Random width between 50 to 90%.\n  const width = React.useMemo((): string => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      className={cn(\"flex h-8 items-center gap-2 rounded-lg px-2\", className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-lg\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nexport function SidebarMenuSub({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"md:max-lg:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-sub-item relative\", className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubButton({\n  isActive = false,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\"> & {\n  isActive?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-7 min-w-0 -translate-x-px items-center gap-2 rounded-lg px-2 text-sidebar-foreground text-sm outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n      \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n      \"md:max-lg:hidden\",\n      className,\n    ),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-sub-button\",\n    \"data-slot\": \"sidebar-menu-sub-button\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/user-menu.tsx",
    "content": "\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@coss/ui/components/avatar\";\nimport {\n  Menu,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuSeparator,\n  MenuTrigger,\n} from \"@coss/ui/components/menu\";\nimport { useMediaQuery } from \"@coss/ui/hooks/use-media-query\";\nimport {\n  GaugeIcon,\n  LogOutIcon,\n  MessageCircleQuestionMarkIcon,\n  MilestoneIcon,\n  MonitorDownIcon,\n  MoonStarIcon,\n  SettingsIcon,\n  UserRoundIcon,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport type * as React from \"react\";\nimport { SidebarMenuButton } from \"@/components/ui/sidebar\";\n\ninterface UserMenuProps {\n  variant?: \"sidebar\" | \"mobile\";\n}\n\nexport function UserMenu({\n  variant = \"sidebar\",\n}: UserMenuProps): React.ReactElement {\n  const isBetweenMdAndLg = useMediaQuery(\"md:max-lg\");\n\n  return (\n    <Menu>\n      <MenuTrigger\n        render={\n          <SidebarMenuButton className=\"relative shrink-0 justify-center p-0 lg:size-8\" />\n        }\n      >\n        <Avatar className=\"lg:size-6\">\n          <AvatarImage\n            alt=\"Luke Tracy\"\n            src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          />\n          <AvatarFallback>LT</AvatarFallback>\n        </Avatar>\n        <span className=\"absolute right-[3px] bottom-[3px] size-2.5 rounded-full border-2 border-sidebar bg-emerald-500 lg:right-0.5 lg:bottom-0.5\" />\n        <span className=\"sr-only\">User menu</span>\n      </MenuTrigger>\n      <MenuPopup\n        align={variant === \"mobile\" ? \"end\" : \"start\"}\n        alignOffset={variant === \"sidebar\" && isBetweenMdAndLg ? -3 : undefined}\n        side={\n          variant === \"mobile\"\n            ? \"bottom\"\n            : isBetweenMdAndLg\n              ? \"right\"\n              : \"bottom\"\n        }\n      >\n        <MenuGroup>\n          <MenuGroupLabel>Luke Tracy</MenuGroupLabel>\n          <MenuItem>\n            <UserRoundIcon />\n            My profile\n          </MenuItem>\n          <MenuItem render={<Link href=\"/settings/my-account/general\" />}>\n            <SettingsIcon />\n            My settings\n          </MenuItem>\n          <MenuItem>\n            <MoonStarIcon />\n            Out of office\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuItem>\n            <MilestoneIcon />\n            Roadmap\n          </MenuItem>\n          <MenuItem>\n            <MessageCircleQuestionMarkIcon />\n            Help\n          </MenuItem>\n          <MenuItem>\n            <MonitorDownIcon />\n            Download desktop app\n          </MenuItem>\n          <MenuItem>\n            <GaugeIcon />\n            Platform\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuItem>\n          <LogOutIcon />\n          Sign out\n        </MenuItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/components/workflows-badge.tsx",
    "content": "import { Badge } from \"@coss/ui/components/badge\";\nimport { SparklesIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport function WorkflowBadge(): React.ReactElement {\n  return (\n    <Badge className=\"ms-auto border-none bg-background bg-linear-to-r from-purple-500/8 to-pink-500/12 text-fuchsia-700 md:max-lg:absolute md:max-lg:-end-1 md:max-lg:-top-1 dark:from-purple-500/16 dark:to-pink-500/20 dark:text-fuchsia-400\">\n      <SparklesIcon />\n      <span className=\"md:max-lg:sr-only\">Cal.ai</span>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/hooks/use-loading-state.ts",
    "content": "import { useEffect, useState } from \"react\";\nimport { useDebug } from \"@/components/debug-context\";\n\n/**\n * Custom hook to manage loading state with artificial delay support\n * @param delayMs - The artificial delay in milliseconds\n * @returns Whether to show the loading state\n */\nexport function useLoadingState(delayMs: number) {\n  const { enableArtificialDelay, isLoadingOverride } = useDebug();\n  const [isLoading, setIsLoading] = useState(enableArtificialDelay);\n\n  useEffect(() => {\n    if (!enableArtificialDelay) {\n      setIsLoading(false);\n      return;\n    }\n    const timer = setTimeout(() => {\n      setIsLoading(false);\n    }, delayMs);\n    return () => clearTimeout(timer);\n  }, [enableArtificialDelay, delayMs]);\n\n  return isLoadingOverride ?? isLoading;\n}\n"
  },
  {
    "path": "apps/examples/calcom/hooks/use-scroll-hide.ts",
    "content": "import * as React from \"react\";\n\nconst DEFAULT_SCROLL_THRESHOLD = 48;\n\nexport function useScrollHide(threshold = DEFAULT_SCROLL_THRESHOLD) {\n  const [isHidden, setIsHidden] = React.useState(false);\n  const lastScrollY = React.useRef(0);\n\n  React.useEffect(() => {\n    lastScrollY.current = window.scrollY;\n\n    const handleScroll = () => {\n      const currentY = window.scrollY;\n      const delta = currentY - lastScrollY.current;\n\n      if (currentY <= 0) {\n        setIsHidden(false);\n        lastScrollY.current = currentY;\n        return;\n      }\n\n      if (Math.abs(delta) < threshold) {\n        return;\n      }\n\n      if (delta > 0) {\n        setIsHidden(true);\n      } else {\n        setIsHidden(false);\n      }\n\n      lastScrollY.current = currentY;\n    };\n\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, [threshold]);\n\n  return isHidden;\n}\n"
  },
  {
    "path": "apps/examples/calcom/lib/event-types-types.ts",
    "content": "/**\n * Type definitions for event types matching Cal.com's structure.\n * These types are based on Cal.com's Prisma schema and tRPC outputs.\n */\n\n/**\n * Scheduling type for team events\n * - COLLECTIVE: All hosts must be available and attend\n * - ROUND_ROBIN: Distribute bookings among hosts\n * - MANAGED: Admin-controlled parent that creates child events per member\n */\nexport type SchedulingType = \"COLLECTIVE\" | \"ROUND_ROBIN\" | \"MANAGED\";\n\n/**\n * Period type for booking availability windows\n */\nexport type PeriodType = \"UNLIMITED\" | \"ROLLING\" | \"RANGE\";\n\n/**\n * Location types supported by Cal.com\n */\nexport type LocationType =\n  | \"integrations:daily\"\n  | \"integrations:zoom\"\n  | \"integrations:google_meet\"\n  | \"integrations:office365_video\"\n  | \"integrations:teams\"\n  | \"inPerson\"\n  | \"phone\"\n  | \"link\"\n  | \"userPhone\";\n"
  },
  {
    "path": "apps/examples/calcom/lib/markdown-to-safe-html.ts",
    "content": "import DOMPurify from \"dompurify\";\nimport { marked } from \"marked\";\n\nmarked.use({ async: false });\n\nexport function markdownToSafeHTML(markdown: string | null) {\n  if (!markdown) return \"\";\n  const parsedMd = marked.parse(markdown) as string;\n  return DOMPurify.sanitize(parsedMd);\n}\n"
  },
  {
    "path": "apps/examples/calcom/lib/mock-ai-data.ts",
    "content": "export interface ReferenceLink {\n  title: string;\n  url: string;\n}\n\nexport const MOCK_AI_RESPONSE = `I'd be happy to help you with billing information for [Cal.com](http://Cal.com)! Here's what you need to know about billing and costs:\n\n## Credit System Overview\n\n[Cal.com](http://Cal.com) uses a credit-based system for messaging (SMS/WhatsApp) and AI phone calls. Credits work as a flexible payment method where **1 credit = $0.01 USD**.\n\n## Credit Allocations by Plan\n\n**Free Users:**\n- No free credits included\n- Must purchase credits manually from Billing Settings\n\n**Team Plan:**\n- 750 credits per team member per month\n- Credits reset at the start of each billing cycle\n- Additional credits can be purchased from Team Settings\n\n**Organizations (Enterprise):**\n- 1000 credits per team member per month\n- SMS/WhatsApp sending is free (doesn't consume credits)\n- Messaging costs covered through organization billing\n\n## Credit Usage Costs\n\n**SMS/WhatsApp Messages:**\n- Charged per segment (not per message)\n- Standard messages: up to 160 characters per segment\n- Messages with emojis/special characters: up to 70 characters per segment\n- International rates vary by country (based on Twilio rates + 80% processing fee)\n\n**[Cal.ai](http://Cal.ai) (AI Phone Agent):**\n- 29 credits per minute\n- Equals $0.29 per minute\n\n## Paid Bookings\n\nFor collecting payments from clients, [Cal.com](http://Cal.com) integrates with Stripe. You can set up paid event types to receive payments when someone books with you.\n\nWould you like more details about any specific aspect of billing, such as setting up paid bookings or purchasing additional credits?`;\n\nexport const MOCK_REFERENCE_LINKS: ReferenceLink[] = [\n  {\n    title: \"Organizations (Enterprise)\",\n    url: \"https://cal.com/help/billing-and-usage/messaging-credits#organizations-enterprise\",\n  },\n  {\n    title: \"Free Users\",\n    url: \"https://cal.com/help/billing-and-usage/messaging-credits#free-users\",\n  },\n  {\n    title: \"Credit System\",\n    url: \"https://cal.com/help/billing-and-usage/messaging-credits#credit-system\",\n  },\n  {\n    title: \"How Many Credits Do You Get?\",\n    url: \"https://cal.com/help/workflows/credits#how-many-credits-do-you-get\",\n  },\n  {\n    title: \"Segment-Based Billing\",\n    url: \"https://cal.com/help/billing-and-usage/messaging-credits#segment-based-billing\",\n  },\n  {\n    title: \"Team Plan\",\n    url: \"https://cal.com/help/billing-and-usage/messaging-credits#team-plan\",\n  },\n  {\n    title: \"How to set up an event type to receive payments\",\n    url: \"https://cal.com/help/event-types/how-to-receive-payments#how-to-set-up-an-event-type-to-receive-payments\",\n  },\n  {\n    title: \"Cal.ai\",\n    url: \"https://cal.com/help/billing-and-usage/messaging-credits#calai\",\n  },\n  {\n    title: \"How does pricing work for Cal.ai? What is the cost per minute?\",\n    url: \"https://cal.com/help/cal-ai/cal-ai-help#how-does-pricing-work-for-calai-what-is-the-cost-per-minute\",\n  },\n  {\n    title: \"Overview of Credits\",\n    url: \"https://cal.com/help/billing-and-usage/messaging-credits#overview-of-credits\",\n  },\n  {\n    title: \"Multiple Field Connections\",\n    url: \"https://cal.com/help/routing/connect-routing-form-to-booking-questions#multiple-field-connections\",\n  },\n  {\n    title: \"Paid Bookings\",\n    url: \"https://cal.com/help/bookings/paid-bookings#paid-bookings\",\n  },\n  {\n    title: \"🌍 Other Countries\",\n    url: \"https://cal.com/help/billing-and-usage/messaging-credits#-other-countries\",\n  },\n  {\n    title: \"Create your account\",\n    url: \"https://cal.com/help/quick-start/create-account#create-your-account\",\n  },\n  {\n    title: \"The Solution: Matching Identifiers\",\n    url: \"https://cal.com/help/routing/connect-routing-form-to-booking-questions#the-solution-matching-identifiers\",\n  },\n  {\n    title: \"Step 2: Create a Matching Booking Question\",\n    url: \"https://cal.com/help/routing/connect-routing-form-to-booking-questions#step-2-create-a-matching-booking-question\",\n  },\n  {\n    title: \"Booking Question Configuration\",\n    url: \"https://cal.com/help/routing/connect-routing-form-to-booking-questions#booking-question-configuration\",\n  },\n];\n"
  },
  {
    "path": "apps/examples/calcom/lib/mock-bookings-data.ts",
    "content": "/**\n * Mock data for bookings that matches Cal.com's data structure.\n * This enables easier integration with the actual Cal.com API later.\n *\n * Based on Cal.com's Booking model from packages/trpc/server/routers/viewer/bookings/get.handler.ts\n */\n\n// =============================================================================\n// TYPE DEFINITIONS\n// =============================================================================\n\nexport type BookingStatus =\n  | \"ACCEPTED\"\n  | \"PENDING\"\n  | \"CANCELLED\"\n  | \"REJECTED\"\n  | \"AWAITING_HOST\";\n\nexport type SchedulingType = \"ROUND_ROBIN\" | \"COLLECTIVE\" | \"MANAGED\" | null;\n\nexport interface BookingUser {\n  id: number;\n  name: string | null;\n  email: string;\n  avatarUrl: string | null;\n  username: string | null;\n  timeZone: string;\n}\n\nexport interface BookingAttendee {\n  id: number;\n  email: string;\n  name: string;\n  timeZone: string;\n  locale: string | null;\n  bookingId: number;\n  noShow: boolean | null;\n}\n\nexport interface BookingEventType {\n  id: number;\n  slug: string;\n  title: string;\n  eventName: string | null;\n  price: number;\n  recurringEvent: {\n    freq: number;\n    count: number;\n    interval: number;\n  } | null;\n  currency: string;\n  metadata: Record<string, unknown> | null;\n  disableGuests: boolean;\n  bookingFields: unknown[] | null;\n  seatsPerTimeSlot: number | null;\n  seatsShowAttendees: boolean;\n  seatsShowAvailabilityCount: boolean;\n  eventTypeColor: {\n    lightEventTypeColor: string;\n    darkEventTypeColor: string;\n  } | null;\n  customReplyToEmail: string | null;\n  allowReschedulingPastBookings: boolean;\n  hideOrganizerEmail: boolean;\n  disableCancelling: boolean;\n  disableRescheduling: boolean;\n  minimumRescheduleNotice: number;\n  teamId: number | null;\n  parentId: number | null;\n  schedulingType: SchedulingType;\n  hosts: {\n    userId: number;\n    user: {\n      id: number;\n      email: string;\n    };\n  }[];\n  length: number;\n  team: {\n    id: number;\n    name: string;\n    slug: string;\n  } | null;\n  hostGroups: {\n    id: number;\n    name: string;\n  }[];\n}\n\nexport interface BookingReference {\n  id: number;\n  type: string;\n  uid: string;\n  meetingId: string | null;\n  meetingPassword: string | null;\n  meetingUrl: string | null;\n  bookingId: number;\n  externalCalendarId: string | null;\n  deleted: boolean | null;\n  credentialId: number | null;\n}\n\nexport interface BookingPayment {\n  paymentOption: string | null;\n  amount: number;\n  currency: string;\n  success: boolean;\n  appId: string | null;\n  refunded: boolean;\n}\n\nexport interface BookingSeat {\n  referenceUid: string;\n  attendee: {\n    email: string;\n  };\n}\n\nexport interface AssignmentReason {\n  id: number;\n  reasonString: string;\n  bookingId: number;\n  createdAt: Date;\n}\n\nexport interface BookingReport {\n  id: number;\n  reportedById: number;\n  reason: string;\n  description: string | null;\n  createdAt: Date;\n}\n\nexport interface Booking {\n  id: number;\n  title: string;\n  userPrimaryEmail: string | null;\n  description: string | null;\n  customInputs: Record<string, unknown> | null;\n  startTime: Date;\n  createdAt: Date;\n  updatedAt: Date;\n  endTime: Date;\n  metadata: Record<string, unknown> | null;\n  uid: string;\n  responses: Record<string, unknown> | null;\n  recurringEventId: string | null;\n  location: string | null;\n  status: BookingStatus;\n  paid: boolean;\n  fromReschedule: string | null;\n  rescheduled: boolean;\n  rescheduledBy: string | null;\n  cancelledBy: string | null;\n  isRecorded: boolean;\n  cancellationReason: string | null;\n  rejectionReason: string | null;\n  routedFromRoutingFormReponse: { id: number } | null;\n  eventType: BookingEventType | null;\n  references: BookingReference[];\n  payment: BookingPayment[];\n  user: BookingUser | null;\n  attendees: BookingAttendee[];\n  seatsReferences: BookingSeat[];\n  assignmentReason: AssignmentReason[];\n  report: BookingReport | null;\n}\n\n// =============================================================================\n// MOCK DATA\n// =============================================================================\n\nconst userPasquale: BookingUser = {\n  avatarUrl:\n    \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\",\n  email: \"pasquale@cal.com\",\n  id: 1,\n  name: \"Pasquale Vitiello\",\n  timeZone: \"Europe/Rome\",\n  username: \"pasquale\",\n};\n\nconst userKeith: BookingUser = {\n  avatarUrl: null,\n  email: \"keith@cal.com\",\n  id: 2,\n  name: \"Keith Williams\",\n  timeZone: \"America/Los_Angeles\",\n  username: \"keith\",\n};\n\nconst userPeer: BookingUser = {\n  avatarUrl:\n    \"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\",\n  email: \"peer@cal.com\",\n  id: 3,\n  name: \"Peer Richelsen\",\n  timeZone: \"Europe/London\",\n  username: \"peer\",\n};\n\nconst _userCarina: BookingUser = {\n  avatarUrl: null,\n  email: \"carina@cal.com\",\n  id: 4,\n  name: \"Carina Wollheim\",\n  timeZone: \"Europe/Berlin\",\n  username: \"carina\",\n};\n\nconst _userJonathan: BookingUser = {\n  avatarUrl: null,\n  email: \"jonathan@cal.com\",\n  id: 5,\n  name: \"Jonathan Djalo\",\n  timeZone: \"Europe/London\",\n  username: \"jonathan\",\n};\n\nconst _userSusan: BookingUser = {\n  avatarUrl: null,\n  email: \"susan@example.com\",\n  id: 6,\n  name: \"Susan Moeller\",\n  timeZone: \"America/New_York\",\n  username: \"susan\",\n};\n\nconst _userDavid: BookingUser = {\n  avatarUrl: null,\n  email: \"david@example.com\",\n  id: 7,\n  name: \"David Borenius\",\n  timeZone: \"Europe/Stockholm\",\n  username: \"david\",\n};\n\nconst defaultEventType: BookingEventType = {\n  allowReschedulingPastBookings: false,\n  bookingFields: null,\n  currency: \"usd\",\n  customReplyToEmail: null,\n  disableCancelling: false,\n  disableGuests: false,\n  disableRescheduling: false,\n  eventName: null,\n  eventTypeColor: null,\n  hideOrganizerEmail: false,\n  hostGroups: [],\n  hosts: [],\n  id: 1,\n  length: 30,\n  metadata: null,\n  minimumRescheduleNotice: 0,\n  parentId: null,\n  price: 0,\n  recurringEvent: null,\n  schedulingType: null,\n  seatsPerTimeSlot: null,\n  seatsShowAttendees: false,\n  seatsShowAvailabilityCount: false,\n  slug: \"30min\",\n  team: null,\n  teamId: null,\n  title: \"30 Min Meeting\",\n};\n\nconst defaultBookingFields = {\n  assignmentReason: [],\n  cancellationReason: null,\n  cancelledBy: null,\n  customInputs: null,\n  fromReschedule: null,\n  isRecorded: false,\n  metadata: null,\n  paid: false,\n  payment: [],\n  recurringEventId: null,\n  references: [],\n  rejectionReason: null,\n  report: null,\n  rescheduledBy: null,\n  responses: null,\n  routedFromRoutingFormReponse: null,\n  seatsReferences: [],\n};\n\nexport const mockPastBookings: Booking[] = [\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 1,\n        email: \"keith@cal.com\",\n        id: 1,\n        locale: \"en\",\n        name: \"Keith Williams\",\n        noShow: false,\n        timeZone: \"America/Los_Angeles\",\n      },\n      {\n        bookingId: 1,\n        email: \"pasquale@cal.com\",\n        id: 2,\n        locale: \"en\",\n        name: \"Pasquale Vitiello\",\n        noShow: false,\n        timeZone: \"Europe/Rome\",\n      },\n    ],\n    createdAt: new Date(\"2025-11-20T10:00:00\"),\n    description:\n      \"Weekly engineering sync to discuss ongoing projects and blockers.\",\n    endTime: new Date(\"2025-11-25T15:00:00\"),\n    eventType: {\n      ...defaultEventType,\n      id: 10,\n      length: 20,\n      slug: \"engineering-chat\",\n      title: \"Engineering Chat\",\n    },\n    id: 1,\n    location: \"integrations:daily\",\n    rescheduled: true,\n    startTime: new Date(\"2025-11-25T14:40:00\"),\n    status: \"ACCEPTED\",\n    title: \"Engineering Chat between Keith Williams and Pasquale Vitiello\",\n    uid: \"abc123-booking-1\",\n    updatedAt: new Date(\"2025-11-24T09:30:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 2,\n        email: \"carina@cal.com\",\n        id: 3,\n        locale: \"en\",\n        name: \"Carina Wollheim\",\n        noShow: false,\n        timeZone: \"Europe/Berlin\",\n      },\n      {\n        bookingId: 2,\n        email: \"jonathan@cal.com\",\n        id: 4,\n        locale: \"en\",\n        name: \"Jonathan Djalo\",\n        noShow: false,\n        timeZone: \"Europe/London\",\n      },\n      {\n        bookingId: 2,\n        email: \"pasquale@cal.com\",\n        id: 5,\n        locale: \"en\",\n        name: \"Pasquale Vitiello\",\n        noShow: false,\n        timeZone: \"Europe/Rome\",\n      },\n    ],\n    createdAt: new Date(\"2025-11-01T14:00:00\"),\n    description:\n      \"Discussion about the platform onboarding flow and upcoming improvements.\",\n    endTime: new Date(\"2025-11-07T12:00:00\"),\n    eventType: {\n      ...defaultEventType,\n      eventTypeColor: {\n        darkEventTypeColor: \"#f53468\",\n        lightEventTypeColor: \"#f53468\",\n      },\n      id: 11,\n      slug: \"platform-meeting\",\n      title: \"Platform Meeting\",\n    },\n    id: 2,\n    location: \"integrations:daily\",\n    rescheduled: false,\n    startTime: new Date(\"2025-11-07T11:30:00\"),\n    status: \"ACCEPTED\",\n    title: \"Platform onboarding roadmap\",\n    uid: \"abc123-booking-2\",\n    updatedAt: new Date(\"2025-11-01T14:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 3,\n        email: \"keith@cal.com\",\n        id: 6,\n        locale: \"en\",\n        name: \"Keith Williams\",\n        noShow: false,\n        timeZone: \"America/Los_Angeles\",\n      },\n      {\n        bookingId: 3,\n        email: \"pasquale@cal.com\",\n        id: 7,\n        locale: \"en\",\n        name: \"Pasquale Vitiello\",\n        noShow: false,\n        timeZone: \"Europe/Rome\",\n      },\n    ],\n    createdAt: new Date(\"2025-11-01T09:00:00\"),\n    description: null,\n    endTime: new Date(\"2025-11-06T15:20:00\"),\n    eventType: {\n      ...defaultEventType,\n      id: 10,\n      length: 20,\n      slug: \"engineering-chat\",\n      title: \"Engineering Chat\",\n    },\n    id: 3,\n    location: \"integrations:daily\",\n    rescheduled: false,\n    startTime: new Date(\"2025-11-06T15:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"Engineering Chat between Keith Williams and Pasquale Vitiello\",\n    uid: \"abc123-booking-3\",\n    updatedAt: new Date(\"2025-11-01T09:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 4,\n        email: \"susan@example.com\",\n        id: 8,\n        locale: \"en\",\n        name: \"Susan Moeller\",\n        noShow: false,\n        timeZone: \"America/New_York\",\n      },\n      {\n        bookingId: 4,\n        email: \"pasquale@cal.com\",\n        id: 9,\n        locale: \"en\",\n        name: \"Pasquale Vitiello\",\n        noShow: false,\n        timeZone: \"Europe/Rome\",\n      },\n    ],\n    createdAt: new Date(\"2025-10-28T11:00:00\"),\n    description: \"Quick sync about the new feature requirements.\",\n    endTime: new Date(\"2025-11-03T15:30:00\"),\n    eventType: defaultEventType,\n    id: 4,\n    location: \"integrations:google_meet\",\n    rescheduled: false,\n    startTime: new Date(\"2025-11-03T15:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"30 Min Meeting between Susan Moeller and Pasquale Vitiello\",\n    uid: \"abc123-booking-4\",\n    updatedAt: new Date(\"2025-10-28T11:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 5,\n        email: \"pasquale@cal.com\",\n        id: 10,\n        locale: \"en\",\n        name: \"Pasquale Vitiello\",\n        noShow: false,\n        timeZone: \"Europe/Rome\",\n      },\n      {\n        bookingId: 5,\n        email: \"david@example.com\",\n        id: 11,\n        locale: \"en\",\n        name: \"David Borenius\",\n        noShow: false,\n        timeZone: \"Europe/Stockholm\",\n      },\n    ],\n    createdAt: new Date(\"2025-10-01T08:00:00\"),\n    description: \"Follow-up discussion on partnership opportunities.\",\n    endTime: new Date(\"2025-10-13T16:00:00\"),\n    eventType: defaultEventType,\n    id: 5,\n    location: \"integrations:google_meet\",\n    rescheduled: true,\n    startTime: new Date(\"2025-10-13T15:30:00\"),\n    status: \"ACCEPTED\",\n    title: \"30 Min Meeting between Pasquale Vitiello and David Borenius\",\n    uid: \"abc123-booking-5\",\n    updatedAt: new Date(\"2025-10-12T14:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 6,\n        email: \"peer@cal.com\",\n        id: 12,\n        locale: \"en\",\n        name: \"Peer Richelsen\",\n        noShow: false,\n        timeZone: \"Europe/London\",\n      },\n      {\n        bookingId: 6,\n        email: \"keith@cal.com\",\n        id: 13,\n        locale: \"en\",\n        name: \"Keith Williams\",\n        noShow: false,\n        timeZone: \"America/Los_Angeles\",\n      },\n      {\n        bookingId: 6,\n        email: \"pasquale@cal.com\",\n        id: 14,\n        locale: \"en\",\n        name: \"Pasquale Vitiello\",\n        noShow: false,\n        timeZone: \"Europe/Rome\",\n      },\n    ],\n    createdAt: new Date(\"2025-10-05T10:00:00\"),\n    description:\n      \"Planning session for the @coss/ui component library migration.\",\n    endTime: new Date(\"2025-10-10T17:30:00\"),\n    eventType: {\n      ...defaultEventType,\n      id: 12,\n      schedulingType: \"COLLECTIVE\",\n      slug: \"team-meeting\",\n      team: {\n        id: 1,\n        name: \"Cal.com\",\n        slug: \"cal\",\n      },\n      teamId: 1,\n      title: \"Team Meeting\",\n    },\n    id: 6,\n    location: \"integrations:google_meet\",\n    rescheduled: false,\n    startTime: new Date(\"2025-10-10T17:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"@coss/ui migration\",\n    uid: \"abc123-booking-6\",\n    updatedAt: new Date(\"2025-10-05T10:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 7,\n        email: \"alex@example.com\",\n        id: 15,\n        locale: \"en\",\n        name: \"Alex Chen\",\n        noShow: false,\n        timeZone: \"America/Los_Angeles\",\n      },\n    ],\n    createdAt: new Date(\"2025-10-01T09:00:00\"),\n    description: \"Premium consultation session.\",\n    endTime: new Date(\"2025-10-08T14:45:00\"),\n    eventType: {\n      ...defaultEventType,\n      eventTypeColor: {\n        darkEventTypeColor: \"#fd6d06\",\n        lightEventTypeColor: \"#fd6d06\",\n      },\n      id: 5,\n      length: 45,\n      price: 9900,\n      slug: \"paid-consultation\",\n      title: \"Paid Consultation\",\n    },\n    id: 7,\n    location: \"integrations:zoom\",\n    paid: true,\n    payment: [\n      {\n        amount: 9900,\n        appId: \"stripe\",\n        currency: \"usd\",\n        paymentOption: \"ON_BOOKING\",\n        refunded: false,\n        success: true,\n      },\n    ],\n    rescheduled: false,\n    startTime: new Date(\"2025-10-08T14:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"Paid Consultation with Alex Chen\",\n    uid: \"abc123-booking-7\",\n    updatedAt: new Date(\"2025-10-01T09:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 8,\n        email: \"designer@example.com\",\n        id: 16,\n        locale: \"en\",\n        name: \"Jane Designer\",\n        noShow: null,\n        timeZone: \"America/New_York\",\n      },\n    ],\n    cancellationReason: \"Schedule conflict - will reschedule for next week.\",\n    cancelledBy: \"user\",\n    createdAt: new Date(\"2025-09-28T15:00:00\"),\n    description: \"Review of the new design mockups.\",\n    endTime: new Date(\"2025-10-05T10:30:00\"),\n    eventType: {\n      ...defaultEventType,\n      id: 13,\n      slug: \"design-review\",\n      title: \"Design Review\",\n    },\n    id: 8,\n    location: \"integrations:daily\",\n    rescheduled: false,\n    startTime: new Date(\"2025-10-05T10:00:00\"),\n    status: \"CANCELLED\",\n    title: \"Cancelled: Design Review\",\n    uid: \"abc123-booking-8\",\n    updatedAt: new Date(\"2025-10-04T08:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 9,\n        email: \"team@cal.com\",\n        id: 17,\n        locale: \"en\",\n        name: \"Team Member\",\n        noShow: false,\n        timeZone: \"Europe/London\",\n      },\n    ],\n    createdAt: new Date(\"2025-09-01T10:00:00\"),\n    description: \"Weekly team sync - recurring meeting.\",\n    endTime: new Date(\"2025-10-02T09:30:00\"),\n    eventType: {\n      ...defaultEventType,\n      id: 6,\n      recurringEvent: {\n        count: 12,\n        freq: 2,\n        interval: 1,\n      },\n      slug: \"weekly-sync\",\n      title: \"Weekly Sync\",\n    },\n    id: 9,\n    location: \"integrations:daily\",\n    recurringEventId: \"recurring-abc123\",\n    rescheduled: false,\n    startTime: new Date(\"2025-10-02T09:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"Weekly Sync (Recurring)\",\n    uid: \"abc123-booking-9\",\n    updatedAt: new Date(\"2025-09-01T10:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    assignmentReason: [\n      {\n        bookingId: 10,\n        createdAt: new Date(\"2025-09-20T11:00:00\"),\n        id: 1,\n        reasonString:\n          \"Round Robin: Assigned based on availability and equal distribution\",\n      },\n    ],\n    attendees: [\n      {\n        bookingId: 10,\n        email: \"prospect@company.com\",\n        id: 18,\n        locale: \"en\",\n        name: \"John Prospect\",\n        noShow: false,\n        timeZone: \"America/Chicago\",\n      },\n    ],\n    createdAt: new Date(\"2025-09-20T11:00:00\"),\n    description: \"Sales call assigned via round robin.\",\n    endTime: new Date(\"2025-09-28T16:30:00\"),\n    eventType: {\n      ...defaultEventType,\n      eventTypeColor: {\n        darkEventTypeColor: \"#0dbf82\",\n        lightEventTypeColor: \"#0dbf82\",\n      },\n      hosts: [\n        {\n          user: { email: \"pasquale@cal.com\", id: 1 },\n          userId: 1,\n        },\n        {\n          user: { email: \"keith@cal.com\", id: 2 },\n          userId: 2,\n        },\n      ],\n      id: 101,\n      schedulingType: \"ROUND_ROBIN\",\n      slug: \"sales-call\",\n      team: {\n        id: 1,\n        name: \"Cal.com\",\n        slug: \"cal\",\n      },\n      teamId: 1,\n      title: \"Sales Call\",\n    },\n    id: 10,\n    location: \"integrations:zoom\",\n    rescheduled: false,\n    startTime: new Date(\"2025-09-28T16:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"Round Robin Sales Call\",\n    uid: \"abc123-booking-10\",\n    updatedAt: new Date(\"2025-09-20T11:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 11,\n        email: \"attendee1@example.com\",\n        id: 19,\n        locale: \"en\",\n        name: \"Attendee One\",\n        noShow: false,\n        timeZone: \"America/New_York\",\n      },\n      {\n        bookingId: 11,\n        email: \"attendee2@example.com\",\n        id: 20,\n        locale: \"fr\",\n        name: \"Attendee Two\",\n        noShow: false,\n        timeZone: \"Europe/Paris\",\n      },\n    ],\n    createdAt: new Date(\"2025-09-10T10:00:00\"),\n    description: \"Public webinar introducing Cal.com features.\",\n    endTime: new Date(\"2025-09-25T19:00:00\"),\n    eventType: {\n      ...defaultEventType,\n      eventTypeColor: null,\n      id: 7,\n      length: 60,\n      seatsPerTimeSlot: 50,\n      seatsShowAttendees: true,\n      seatsShowAvailabilityCount: true,\n      slug: \"webinar\",\n      title: \"Webinar\",\n    },\n    id: 11,\n    isRecorded: true,\n    location: \"integrations:zoom\",\n    rescheduled: false,\n    seatsReferences: [\n      { attendee: { email: \"attendee1@example.com\" }, referenceUid: \"seat-1\" },\n      { attendee: { email: \"attendee2@example.com\" }, referenceUid: \"seat-2\" },\n    ],\n    startTime: new Date(\"2025-09-25T18:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"Webinar: Introduction to Cal.com\",\n    uid: \"abc123-booking-11\",\n    updatedAt: new Date(\"2025-09-10T10:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 12,\n        email: \"noshow@example.com\",\n        id: 21,\n        locale: \"en\",\n        name: \"No Show Person\",\n        noShow: true,\n        timeZone: \"America/Los_Angeles\",\n      },\n    ],\n    createdAt: new Date(\"2025-09-15T09:00:00\"),\n    description: \"Quick chat that was marked as no-show.\",\n    endTime: new Date(\"2025-09-20T11:15:00\"),\n    eventType: {\n      ...defaultEventType,\n      id: 1,\n      length: 15,\n      slug: \"15min\",\n      title: \"15 Min Meeting\",\n    },\n    id: 12,\n    location: \"integrations:daily\",\n    rescheduled: false,\n    startTime: new Date(\"2025-09-20T11:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"No-show: Quick Chat\",\n    uid: \"abc123-booking-12\",\n    updatedAt: new Date(\"2025-09-20T11:30:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 13,\n        email: \"enterprise@example.com\",\n        id: 22,\n        locale: \"en\",\n        name: \"Enterprise Client\",\n        noShow: false,\n        timeZone: \"America/New_York\",\n      },\n      {\n        bookingId: 13,\n        email: \"sales@cal.com\",\n        id: 23,\n        locale: \"en\",\n        name: \"Sales Team Member\",\n        noShow: false,\n        timeZone: \"America/Los_Angeles\",\n      },\n    ],\n    createdAt: new Date(\"2025-09-01T10:00:00\"),\n    description:\n      \"Enterprise onboarding session - rescheduled, paid, recurring team event.\",\n    endTime: new Date(\"2025-09-10T16:00:00\"),\n    eventType: {\n      ...defaultEventType,\n      eventTypeColor: {\n        darkEventTypeColor: \"#0dbf82\",\n        lightEventTypeColor: \"#0dbf82\",\n      },\n      id: 20,\n      length: 60,\n      price: 29900,\n      recurringEvent: {\n        count: 4,\n        freq: 2,\n        interval: 1,\n      },\n      schedulingType: \"ROUND_ROBIN\",\n      slug: \"enterprise-onboarding\",\n      team: {\n        id: 2,\n        name: \"Sales Team\",\n        slug: \"sales\",\n      },\n      teamId: 2,\n      title: \"Enterprise Onboarding\",\n    },\n    id: 13,\n    location: \"integrations:zoom\",\n    paid: true,\n    payment: [\n      {\n        amount: 29900,\n        appId: \"stripe\",\n        currency: \"usd\",\n        paymentOption: \"ON_BOOKING\",\n        refunded: false,\n        success: true,\n      },\n    ],\n    recurringEventId: \"recurring-stress-test\",\n    rescheduled: false,\n    startTime: new Date(\"2025-09-10T15:00:00\"),\n    status: \"PENDING\",\n    title: \"Enterprise Onboarding: Stress Test with Multiple Badges\",\n    uid: \"abc123-booking-13\",\n    updatedAt: new Date(\"2025-09-05T14:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n];\n\nexport const mockUpcomingBookings: Booking[] = [\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 100,\n        email: \"peer@cal.com\",\n        id: 100,\n        locale: \"en\",\n        name: \"Peer Richelsen\",\n        noShow: null,\n        timeZone: \"Europe/London\",\n      },\n      {\n        bookingId: 100,\n        email: \"keith@cal.com\",\n        id: 101,\n        locale: \"en\",\n        name: \"Keith Williams\",\n        noShow: null,\n        timeZone: \"America/Los_Angeles\",\n      },\n    ],\n    createdAt: new Date(\"2026-01-10T10:00:00\"),\n    description: \"Quarterly product planning and roadmap discussion.\",\n    endTime: new Date(\"2026-01-15T15:00:00\"),\n    eventType: {\n      ...defaultEventType,\n      id: 14,\n      length: 60,\n      schedulingType: \"COLLECTIVE\",\n      slug: \"product-planning\",\n      team: {\n        id: 1,\n        name: \"Cal.com\",\n        slug: \"cal\",\n      },\n      teamId: 1,\n      title: \"Product Planning\",\n    },\n    id: 100,\n    location: \"integrations:google_meet\",\n    rescheduled: false,\n    startTime: new Date(\"2026-01-15T14:00:00\"),\n    status: \"ACCEPTED\",\n    title: \"Product Planning Session\",\n    uid: \"upcoming-booking-1\",\n    updatedAt: new Date(\"2026-01-10T10:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 101,\n        email: \"candidate@example.com\",\n        id: 102,\n        locale: \"en\",\n        name: \"Jane Candidate\",\n        noShow: null,\n        timeZone: \"America/New_York\",\n      },\n    ],\n    createdAt: new Date(\"2026-01-12T09:00:00\"),\n    description: \"Technical interview - awaiting confirmation.\",\n    endTime: new Date(\"2026-01-20T11:00:00\"),\n    eventType: {\n      ...defaultEventType,\n      eventTypeColor: null,\n      id: 102,\n      length: 60,\n      schedulingType: \"COLLECTIVE\",\n      slug: \"technical-interview\",\n      team: {\n        id: 1,\n        name: \"Cal.com\",\n        slug: \"cal\",\n      },\n      teamId: 1,\n      title: \"Technical Interview\",\n    },\n    id: 101,\n    location: \"integrations:zoom\",\n    rescheduled: false,\n    startTime: new Date(\"2026-01-20T10:00:00\"),\n    status: \"PENDING\",\n    title: \"Pending: Interview with Candidate\",\n    uid: \"upcoming-booking-2\",\n    updatedAt: new Date(\"2026-01-12T09:00:00\"),\n    user: userPasquale,\n    userPrimaryEmail: \"pasquale@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 102,\n        email: \"pasquale@cal.com\",\n        id: 103,\n        locale: \"en\",\n        name: \"Pasquale Vitiello\",\n        noShow: null,\n        timeZone: \"Europe/Rome\",\n      },\n      {\n        bookingId: 102,\n        email: \"carina@cal.com\",\n        id: 104,\n        locale: \"en\",\n        name: \"Carina Wollheim\",\n        noShow: null,\n        timeZone: \"Europe/Berlin\",\n      },\n    ],\n    createdAt: new Date(\"2026-01-18T11:00:00\"),\n    description: \"Weekly engineering standup and code review session.\",\n    endTime: new Date(\"2026-01-25T16:00:00\"),\n    eventType: {\n      ...defaultEventType,\n      id: 10,\n      length: 30,\n      slug: \"engineering-chat\",\n      title: \"Engineering Chat\",\n    },\n    id: 102,\n    location: \"integrations:daily\",\n    rescheduled: false,\n    startTime: new Date(\"2026-01-25T15:30:00\"),\n    status: \"ACCEPTED\",\n    title: \"Engineering Chat with Keith Williams\",\n    uid: \"upcoming-booking-3\",\n    updatedAt: new Date(\"2026-01-18T11:00:00\"),\n    user: userKeith,\n    userPrimaryEmail: \"keith@cal.com\",\n  },\n  {\n    ...defaultBookingFields,\n    attendees: [\n      {\n        bookingId: 103,\n        email: \"keith@cal.com\",\n        id: 105,\n        locale: \"en\",\n        name: \"Keith Williams\",\n        noShow: null,\n        timeZone: \"America/Los_Angeles\",\n      },\n      {\n        bookingId: 103,\n        email: \"jonathan@cal.com\",\n        id: 106,\n        locale: \"en\",\n        name: \"Jonathan Djalo\",\n        noShow: null,\n        timeZone: \"Europe/London\",\n      },\n    ],\n    createdAt: new Date(\"2026-01-20T09:00:00\"),\n    description: \"Design review for the new dashboard components.\",\n    endTime: new Date(\"2026-01-28T12:00:00\"),\n    eventType: {\n      ...defaultEventType,\n      eventTypeColor: {\n        darkEventTypeColor: \"#3b82f6\",\n        lightEventTypeColor: \"#3b82f6\",\n      },\n      id: 15,\n      length: 45,\n      slug: \"design-review\",\n      title: \"Design Review\",\n    },\n    id: 103,\n    location: \"integrations:google_meet\",\n    rescheduled: false,\n    startTime: new Date(\"2026-01-28T11:15:00\"),\n    status: \"ACCEPTED\",\n    title: \"Design Review with Peer Richelsen\",\n    uid: \"upcoming-booking-4\",\n    updatedAt: new Date(\"2026-01-20T09:00:00\"),\n    user: userPeer,\n    userPrimaryEmail: \"peer@cal.com\",\n  },\n];\n\nexport const mockCancelledBookings: Booking[] = mockPastBookings.filter(\n  (b) => b.status === \"CANCELLED\",\n);\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n\nexport function formatBookingDate(date: Date): string {\n  return date.toLocaleDateString(\"en-US\", {\n    day: \"numeric\",\n    month: \"long\",\n    year: \"numeric\",\n  });\n}\n\nexport function formatBookingTime(startTime: Date, endTime: Date): string {\n  const formatTime = (d: Date) =>\n    d.toLocaleTimeString(\"en-US\", {\n      hour: \"numeric\",\n      hour12: true,\n      minute: \"2-digit\",\n    });\n  return `${formatTime(startTime)} - ${formatTime(endTime)}`;\n}\n\nexport function getBookingParticipants(booking: Booking): string {\n  const names = booking.attendees.map((a) => a.name);\n  if (names.length === 0) return \"\";\n  const firstName = names[0] ?? \"\";\n  if (names.length === 1) return firstName;\n  const secondName = names[1] ?? \"\";\n  if (names.length === 2) return `${firstName} and ${secondName}`;\n  const lastName = names[names.length - 1] ?? \"\";\n  return `${names.slice(0, -1).join(\", \")} and ${lastName}`;\n}\n\nexport function getLocationLabel(location: string | null): string {\n  if (!location) return \"\";\n  const locationMap: Record<string, string> = {\n    \"integrations:daily\": \"Join Cal Video\",\n    \"integrations:google_meet\": \"Join Google Meet\",\n    \"integrations:teams\": \"Join Microsoft Teams\",\n    \"integrations:zoom\": \"Join Zoom\",\n  };\n  return locationMap[location] || location;\n}\n\nexport function getLocationIcon(\n  location: string | null,\n): \"video\" | \"phone\" | \"location\" | null {\n  if (!location) return null;\n  if (location.startsWith(\"integrations:\")) return \"video\";\n  if (location.includes(\"phone\")) return \"phone\";\n  return \"location\";\n}\n\n// =============================================================================\n// FILTER FUNCTIONS\n// =============================================================================\n\nexport interface BookingFilter {\n  categoryId: string;\n  selectedOptionIds: string[];\n}\n\nexport function filterBookings(\n  bookings: Booking[],\n  filters: BookingFilter[],\n): Booking[] {\n  if (filters.length === 0) return bookings;\n\n  return bookings.filter((booking) => {\n    return filters.every((filter) => {\n      const { categoryId, selectedOptionIds } = filter;\n      if (selectedOptionIds.length === 0) return true;\n\n      switch (categoryId) {\n        case \"event-type\": {\n          const eventTypeTitle = booking.eventType?.title?.toLowerCase() ?? \"\";\n          const eventTypeSlug = booking.eventType?.slug?.toLowerCase() ?? \"\";\n          return selectedOptionIds.some((optionId) => {\n            const optionLabel = getEventTypeLabel(optionId).toLowerCase();\n            return (\n              eventTypeTitle.includes(optionLabel) ||\n              eventTypeSlug.includes(optionId.replace(/-/g, \"\"))\n            );\n          });\n        }\n        case \"member\": {\n          const hostName = booking.user?.name?.toLowerCase() ?? \"\";\n          const hostEmail = booking.user?.email?.toLowerCase() ?? \"\";\n          return selectedOptionIds.some((optionId) => {\n            const memberName = optionId.replace(/-/g, \" \").toLowerCase();\n            return (\n              hostName.includes(memberName) ||\n              hostEmail.includes(optionId.replace(/-/g, \"\"))\n            );\n          });\n        }\n        case \"attendees-name\": {\n          return selectedOptionIds.some((optionId) => {\n            const searchName = optionId.replace(/-/g, \" \").toLowerCase();\n            return booking.attendees.some((attendee) =>\n              attendee.name.toLowerCase().includes(searchName),\n            );\n          });\n        }\n        case \"attendee-email\": {\n          return selectedOptionIds.some((optionId) => {\n            return booking.attendees.some((attendee) =>\n              attendee.email\n                .toLowerCase()\n                .includes(optionId.split(\"-\")[0] ?? \"\"),\n            );\n          });\n        }\n        case \"date-range\": {\n          const now = new Date();\n          const bookingDate = new Date(booking.startTime);\n          return selectedOptionIds.some((optionId) => {\n            switch (optionId) {\n              case \"today\":\n                return isSameDay(bookingDate, now);\n              case \"yesterday\":\n                return isSameDay(bookingDate, addDays(now, -1));\n              case \"this-week\":\n                return isWithinWeek(bookingDate, now);\n              case \"last-week\":\n                return isWithinLastWeek(bookingDate, now);\n              case \"this-month\":\n                return isSameMonth(bookingDate, now);\n              case \"last-month\":\n                return isLastMonth(bookingDate, now);\n              default:\n                return true;\n            }\n          });\n        }\n        case \"booking-uid\": {\n          return selectedOptionIds.some((optionId) =>\n            booking.uid.toLowerCase().includes(optionId.toLowerCase()),\n          );\n        }\n        default:\n          return true;\n      }\n    });\n  });\n}\n\nfunction getEventTypeLabel(optionId: string): string {\n  const labels: Record<string, string> = {\n    \"15-min\": \"15 Min Meeting\",\n    \"30-min\": \"30 Min Meeting\",\n    \"60-min\": \"60 Min Meeting\",\n    consultation: \"Consultation\",\n    interview: \"Interview\",\n    onboarding: \"Onboarding Call\",\n  };\n  return labels[optionId] ?? optionId;\n}\n\nfunction isSameDay(date1: Date, date2: Date): boolean {\n  return (\n    date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getDate() === date2.getDate()\n  );\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nfunction isWithinWeek(date: Date, referenceDate: Date): boolean {\n  const startOfWeek = new Date(referenceDate);\n  startOfWeek.setDate(referenceDate.getDate() - referenceDate.getDay());\n  startOfWeek.setHours(0, 0, 0, 0);\n  const endOfWeek = new Date(startOfWeek);\n  endOfWeek.setDate(startOfWeek.getDate() + 7);\n  return date >= startOfWeek && date < endOfWeek;\n}\n\nfunction isWithinLastWeek(date: Date, referenceDate: Date): boolean {\n  const startOfLastWeek = new Date(referenceDate);\n  startOfLastWeek.setDate(referenceDate.getDate() - referenceDate.getDay() - 7);\n  startOfLastWeek.setHours(0, 0, 0, 0);\n  const endOfLastWeek = new Date(startOfLastWeek);\n  endOfLastWeek.setDate(startOfLastWeek.getDate() + 7);\n  return date >= startOfLastWeek && date < endOfLastWeek;\n}\n\nfunction isSameMonth(date: Date, referenceDate: Date): boolean {\n  return (\n    date.getFullYear() === referenceDate.getFullYear() &&\n    date.getMonth() === referenceDate.getMonth()\n  );\n}\n\nfunction isLastMonth(date: Date, referenceDate: Date): boolean {\n  const lastMonth = new Date(referenceDate);\n  lastMonth.setMonth(lastMonth.getMonth() - 1);\n  return (\n    date.getFullYear() === lastMonth.getFullYear() &&\n    date.getMonth() === lastMonth.getMonth()\n  );\n}\n"
  },
  {
    "path": "apps/examples/calcom/lib/mock-event-types-data.ts",
    "content": "/**\n * Mock data for event types that matches Cal.com's data structure.\n * This enables easier integration with the actual Cal.com API later.\n *\n * Based on Cal.com's EventType model from packages/prisma/schema.prisma\n * and the data returned by viewer.eventTypes.getEventTypesFromGroup\n */\n\nimport type { SchedulingType } from \"./event-types-types\";\n\n/**\n * User type matching Cal.com's user select in eventTypeRepository\n */\nexport interface EventTypeUser {\n  id: number;\n  name: string | null;\n  username: string | null;\n  avatarUrl: string | null;\n  timeZone: string;\n}\n\n/**\n * Host type for team event types\n */\nexport interface EventTypeHost {\n  isFixed: boolean;\n  userId: number;\n  priority: number | null;\n  weight: number | null;\n  weightAdjustment: number | null;\n  user: EventTypeUser;\n}\n\n/**\n * Hashed link for private event URLs\n */\nexport interface HashedLink {\n  id: number;\n  link: string;\n  expiresAt: Date | null;\n  maxUsageCount: number | null;\n  usageCount: number;\n}\n\n/**\n * Child event type (for managed event types)\n */\nexport interface ChildEventType {\n  id: number;\n  slug: string;\n  hidden: boolean;\n  users: EventTypeUser[];\n}\n\n/**\n * Event type color configuration\n */\nexport interface EventTypeColor {\n  lightEventTypeColor: string;\n  darkEventTypeColor: string;\n}\n\n/**\n * Recurring event configuration\n */\nexport interface RecurringEvent {\n  freq: number; // 0 = yearly, 1 = monthly, 2 = weekly, 3 = daily\n  count: number;\n  interval: number;\n}\n\n/**\n * AI Phone Call configuration\n */\nexport interface AIPhoneCallConfig {\n  enabled: boolean;\n  templateType: string;\n  generalPrompt: string | null;\n  beginMessage: string | null;\n}\n\n/**\n * Instant meeting schedule\n */\nexport interface InstantMeetingSchedule {\n  id: number;\n  name: string;\n}\n\n/**\n * Main EventType interface matching Cal.com's structure\n * Based on packages/lib/server/eventTypeSelect.ts\n */\nexport interface EventType {\n  id: number;\n  title: string;\n  slug: string;\n  description: string | null;\n  length: number; // Duration in minutes\n  hidden: boolean;\n  position: number;\n\n  // Scheduling\n  schedulingType: SchedulingType | null;\n  recurringEvent: RecurringEvent | null;\n\n  // User/Team ownership\n  userId: number | null;\n  teamId: number | null;\n  parentId: number | null;\n\n  // Related data\n  users: EventTypeUser[];\n  hosts: EventTypeHost[];\n  children: ChildEventType[];\n  hashedLink: HashedLink[];\n\n  // Visual\n  eventTypeColor: EventTypeColor | null;\n\n  // Computed/derived (added by mapEventType)\n  safeDescription: string | null;\n\n  // Core fields from eventTypeSelect\n  requiresConfirmation: boolean;\n  metadata: Record<string, unknown> | null;\n  profileId: number | null;\n  offsetStart: number;\n  timeZone: string | null;\n  periodType: \"UNLIMITED\" | \"ROLLING\" | \"RANGE\";\n  periodStartDate: Date | null;\n  periodEndDate: Date | null;\n  periodDays: number | null;\n  periodCountCalendarDays: boolean | null;\n  minimumBookingNotice: number;\n  beforeEventBuffer: number;\n  afterEventBuffer: number;\n  seatsPerTimeSlot: number | null;\n  price: number;\n  currency: string;\n  slotInterval: number | null;\n  isInstantEvent: boolean;\n  locations: unknown[] | null;\n  bookingFields: unknown[] | null;\n  bookingLimits: Record<string, number> | null;\n  durationLimits: Record<string, number> | null;\n\n  // Additional fields from eventTypeSelect (for complete UI coverage)\n  interfaceLanguage: string | null;\n  canSendCalVideoTranscriptionEmails: boolean;\n  requiresConfirmationForFreeEmail: boolean;\n  requiresConfirmationWillBlockSlot: boolean;\n  autoTranslateDescriptionEnabled: boolean;\n  eventName: string | null;\n  lockTimeZoneToggleOnBookingPage: boolean;\n  lockedTimeZone: string | null;\n  requiresBookerEmailVerification: boolean;\n  disableGuests: boolean;\n  disableCancelling: boolean;\n  disableRescheduling: boolean;\n  minimumRescheduleNotice: number;\n  allowReschedulingCancelledBookings: boolean;\n  hideCalendarNotes: boolean;\n  onlyShowFirstAvailableSlot: boolean;\n  allowReschedulingPastBookings: boolean;\n  hideOrganizerEmail: boolean;\n  showOptimizedSlots: boolean;\n  seatsShowAttendees: boolean;\n  seatsShowAvailabilityCount: boolean;\n  scheduleId: number | null;\n  instantMeetingScheduleId: number | null;\n  successRedirectUrl: string | null;\n  instantMeetingExpiryTimeOffsetInSeconds: number | null;\n  instantMeetingParameters: Record<string, unknown> | null;\n  aiPhoneCallConfig: AIPhoneCallConfig | null;\n  assignAllTeamMembers: boolean;\n  isRRWeightsEnabled: boolean;\n  rescheduleWithSameRoundRobinHost: boolean;\n  useEventTypeDestinationCalendarEmail: boolean;\n  secondaryEmailId: number | null;\n  hideCalendarEventDetails: boolean;\n  rrSegmentQueryValue: Record<string, unknown> | null;\n  assignRRMembersUsingSegment: boolean;\n  maxLeadThreshold: number | null;\n  useEventLevelSelectedCalendars: boolean;\n  customReplyToEmail: string | null;\n  restrictionScheduleId: number | null;\n  useBookerTimezone: boolean;\n  instantMeetingSchedule: InstantMeetingSchedule | null;\n}\n\n/**\n * Profile information for URL construction\n */\nexport interface EventTypeProfile {\n  slug: string | null;\n  name: string | null;\n  image: string | null;\n  eventTypesLockedByOrg: boolean;\n}\n\n/**\n * Event type group (personal or team)\n */\nexport interface EventTypeGroup {\n  teamId: number | null;\n  parentId: number | null;\n  bookerUrl: string;\n  profile: EventTypeProfile;\n  metadata: {\n    readOnly: boolean;\n  };\n}\n\n// =============================================================================\n// MOCK DATA\n// =============================================================================\n\n/**\n * Mock users for event types - defined as named constants for type safety\n */\nconst userPasquale: EventTypeUser = {\n  avatarUrl: null,\n  id: 1,\n  name: \"Pasquale Vitiello\",\n  timeZone: \"Europe/Rome\",\n  username: \"pasquale\",\n};\n\nconst userAlex: EventTypeUser = {\n  avatarUrl: null,\n  id: 2,\n  name: \"Alex Chen\",\n  timeZone: \"America/Los_Angeles\",\n  username: \"alex\",\n};\n\nconst userSarah: EventTypeUser = {\n  avatarUrl: null,\n  id: 3,\n  name: \"Sarah Johnson\",\n  timeZone: \"America/New_York\",\n  username: \"sarah\",\n};\n\nconst userMike: EventTypeUser = {\n  avatarUrl: null,\n  id: 4,\n  name: \"Mike Wilson\",\n  timeZone: \"Europe/London\",\n  username: \"mike\",\n};\n\nconst _mockUsers: EventTypeUser[] = [\n  userPasquale,\n  userAlex,\n  userSarah,\n  userMike,\n];\n\n/**\n * Default values for the additional eventTypeSelect fields\n * These are the typical defaults from Cal.com\n */\nconst defaultEventTypeFields = {\n  aiPhoneCallConfig: null,\n  allowReschedulingCancelledBookings: false,\n  allowReschedulingPastBookings: false,\n  assignAllTeamMembers: false,\n  assignRRMembersUsingSegment: false,\n  autoTranslateDescriptionEnabled: false,\n  canSendCalVideoTranscriptionEmails: false,\n  customReplyToEmail: null,\n  disableCancelling: false,\n  disableGuests: false,\n  disableRescheduling: false,\n  eventName: null,\n  hideCalendarEventDetails: false,\n  hideCalendarNotes: false,\n  hideOrganizerEmail: false,\n  instantMeetingExpiryTimeOffsetInSeconds: null,\n  instantMeetingParameters: null,\n  instantMeetingSchedule: null,\n  instantMeetingScheduleId: null,\n  interfaceLanguage: null,\n  isRRWeightsEnabled: false,\n  lockedTimeZone: null,\n  lockTimeZoneToggleOnBookingPage: false,\n  maxLeadThreshold: null,\n  minimumRescheduleNotice: 0,\n  onlyShowFirstAvailableSlot: false,\n  requiresBookerEmailVerification: false,\n  requiresConfirmationForFreeEmail: false,\n  requiresConfirmationWillBlockSlot: false,\n  rescheduleWithSameRoundRobinHost: false,\n  restrictionScheduleId: null,\n  rrSegmentQueryValue: null,\n  scheduleId: null,\n  seatsShowAttendees: false,\n  seatsShowAvailabilityCount: false,\n  secondaryEmailId: null,\n  showOptimizedSlots: false,\n  successRedirectUrl: null,\n  useBookerTimezone: false,\n  useEventLevelSelectedCalendars: false,\n  useEventTypeDestinationCalendarEmail: false,\n} as const;\n\n/**\n * Mock event types matching Cal.com's data structure\n * Includes various scenarios for UI stress testing:\n * - Different durations (15, 30, 45, 60 min)\n * - Hidden and visible events\n * - Personal and team events\n * - Events with and without descriptions\n * - Events with recurring settings\n * - Events with private links\n * - Events with multiple hosts (round robin, collective)\n * - Managed event types with children\n * - Events with custom colors\n * - Paid events\n * - Seated events\n */\nexport const mockEventTypes: EventType[] = [\n  // Personal event types\n  {\n    ...defaultEventTypeFields,\n    afterEventBuffer: 0,\n    beforeEventBuffer: 0,\n    bookingFields: null,\n    bookingLimits: null,\n    children: [],\n    currency: \"usd\",\n    description: \"A quick 15 minute call to discuss anything.\",\n    durationLimits: null,\n    eventTypeColor: null,\n    hashedLink: [],\n    hidden: false,\n    hosts: [],\n    id: 1,\n    isInstantEvent: false,\n    length: 15,\n    locations: [{ type: \"integrations:daily\" }],\n    metadata: null,\n    minimumBookingNotice: 120,\n    offsetStart: 0,\n    parentId: null,\n    periodCountCalendarDays: null,\n    periodDays: null,\n    periodEndDate: null,\n    periodStartDate: null,\n    periodType: \"UNLIMITED\",\n    position: 0,\n    price: 0,\n    profileId: 1,\n    recurringEvent: null,\n    requiresConfirmation: false,\n    safeDescription: \"A quick 15 minute call to discuss anything.\",\n    schedulingType: null,\n    seatsPerTimeSlot: null,\n    slotInterval: null,\n    slug: \"15min\",\n    teamId: null,\n    timeZone: null,\n    title: \"15 Min Meeting\",\n    userId: 1,\n    users: [userPasquale],\n  },\n  {\n    ...defaultEventTypeFields,\n    afterEventBuffer: 5,\n    beforeEventBuffer: 5,\n    bookingFields: null,\n    bookingLimits: null,\n    children: [],\n    currency: \"usd\",\n    description: \"A standard 30 minute meeting for detailed discussions.\",\n    durationLimits: null,\n    eventTypeColor: {\n      darkEventTypeColor: \"#fd6d06\",\n      lightEventTypeColor: \"#fd6d06\",\n    },\n    hashedLink: [],\n    hidden: false,\n    hosts: [],\n    id: 2,\n    isInstantEvent: false,\n    length: 30,\n    locations: [{ type: \"integrations:zoom\" }],\n    metadata: null,\n    minimumBookingNotice: 120,\n    offsetStart: 0,\n    parentId: null,\n    periodCountCalendarDays: null,\n    periodDays: null,\n    periodEndDate: null,\n    periodStartDate: null,\n    periodType: \"UNLIMITED\",\n    position: 1,\n    price: 0,\n    profileId: 1,\n    recurringEvent: null,\n    requiresConfirmation: false,\n    safeDescription: \"A standard 30 minute meeting for detailed discussions.\",\n    schedulingType: null,\n    seatsPerTimeSlot: null,\n    slotInterval: null,\n    slug: \"30min\",\n    teamId: null,\n    timeZone: null,\n    title: \"30 Min Meeting\",\n    userId: 1,\n    users: [userPasquale],\n  },\n  {\n    ...defaultEventTypeFields,\n    afterEventBuffer: 15,\n    beforeEventBuffer: 15,\n    bookingFields: null,\n    bookingLimits: { PER_DAY: 3 },\n    children: [],\n    currency: \"usd\",\n    description:\n      \"An in-depth consultation session for complex topics requiring detailed discussion and planning.\",\n    durationLimits: null,\n    eventTypeColor: null,\n    hashedLink: [],\n    hidden: false,\n    hosts: [],\n    id: 3,\n    isInstantEvent: false,\n    length: 60,\n    locations: [{ type: \"integrations:google_meet\" }],\n    metadata: null,\n    minimumBookingNotice: 1440, // 24 hours\n    offsetStart: 0,\n    parentId: null,\n    periodCountCalendarDays: null,\n    periodDays: null,\n    periodEndDate: null,\n    periodStartDate: null,\n    periodType: \"UNLIMITED\",\n    position: 2,\n    price: 0,\n    profileId: 1,\n    recurringEvent: null,\n    requiresConfirmation: true,\n    safeDescription:\n      \"An in-depth consultation session for complex topics requiring detailed discussion and planning.\",\n    schedulingType: null,\n    seatsPerTimeSlot: null,\n    slotInterval: null,\n    slug: \"consultation\",\n    teamId: null,\n    timeZone: null,\n    title: \"60 Min Consultation\",\n    userId: 1,\n    users: [userPasquale],\n  },\n  {\n    ...defaultEventTypeFields,\n    afterEventBuffer: 0,\n    beforeEventBuffer: 0,\n    bookingFields: null,\n    bookingLimits: null,\n    children: [],\n    currency: \"usd\",\n    description: \"A private meeting only accessible via direct link.\",\n    durationLimits: null,\n    eventTypeColor: null,\n    hashedLink: [\n      {\n        expiresAt: null,\n        id: 1,\n        link: \"abc123xyz\",\n        maxUsageCount: null,\n        usageCount: 5,\n      },\n    ],\n    hidden: true,\n    hosts: [],\n    id: 4,\n    isInstantEvent: false,\n    length: 30,\n    locations: [{ type: \"integrations:daily\" }],\n    metadata: null,\n    minimumBookingNotice: 120,\n    offsetStart: 0,\n    parentId: null,\n    periodCountCalendarDays: null,\n    periodDays: null,\n    periodEndDate: null,\n    periodStartDate: null,\n    periodType: \"UNLIMITED\",\n    position: 3,\n    price: 0,\n    profileId: 1,\n    recurringEvent: null,\n    requiresConfirmation: false,\n    safeDescription: \"A private meeting only accessible via direct link.\",\n    schedulingType: null,\n    seatsPerTimeSlot: null,\n    slotInterval: null,\n    slug: \"secret\",\n    teamId: null,\n    timeZone: null,\n    title: \"Secret Meeting\",\n    userId: 1,\n    users: [userPasquale],\n  },\n  {\n    ...defaultEventTypeFields,\n    afterEventBuffer: 10,\n    beforeEventBuffer: 10,\n    bookingFields: null,\n    bookingLimits: null,\n    children: [],\n    currency: \"usd\",\n    description: \"Premium consultation with payment required.\",\n    durationLimits: null,\n    eventTypeColor: {\n      darkEventTypeColor: \"#0dbf82\",\n      lightEventTypeColor: \"#0dbf82\",\n    },\n    hashedLink: [],\n    hidden: false,\n    hosts: [],\n    id: 5,\n    isInstantEvent: false,\n    length: 45,\n    locations: [{ type: \"integrations:zoom\" }],\n    metadata: {\n      apps: {\n        stripe: {\n          currency: \"usd\",\n          enabled: true,\n          price: 9900, // $99.00 in cents\n        },\n      },\n    },\n    minimumBookingNotice: 1440,\n    offsetStart: 0,\n    parentId: null,\n    periodCountCalendarDays: null,\n    periodDays: null,\n    periodEndDate: null,\n    periodStartDate: null,\n    periodType: \"UNLIMITED\",\n    position: 4,\n    price: 9900,\n    profileId: 1,\n    recurringEvent: null,\n    requiresConfirmation: false,\n    safeDescription: \"Premium consultation with payment required.\",\n    schedulingType: null,\n    seatsPerTimeSlot: null,\n    slotInterval: null,\n    slug: \"paid-consultation\",\n    teamId: null,\n    timeZone: null,\n    title: \"Paid Consultation\",\n    userId: 1,\n    users: [userPasquale],\n  },\n  // {\n  //   ...defaultEventTypeFields,\n  //   afterEventBuffer: 0,\n  //   beforeEventBuffer: 0,\n  //   bookingFields: null,\n  //   bookingLimits: null,\n  //   children: [],\n  //   currency: \"usd\",\n  //   description: \"Recurring weekly sync meeting.\",\n  //   durationLimits: null,\n  //   eventTypeColor: null,\n  //   hashedLink: [],\n  //   hidden: false,\n  //   hosts: [],\n  //   id: 6,\n  //   isInstantEvent: false,\n  //   length: 30,\n  //   locations: [{ type: \"integrations:daily\" }],\n  //   metadata: null,\n  //   minimumBookingNotice: 120,\n  //   offsetStart: 0,\n  //   parentId: null,\n  //   periodCountCalendarDays: null,\n  //   periodDays: null,\n  //   periodEndDate: null,\n  //   periodStartDate: null,\n  //   periodType: \"UNLIMITED\",\n  //   position: 5,\n  //   price: 0,\n  //   profileId: 1,\n  //   recurringEvent: {\n  //     count: 12,\n  //     freq: 2, // Weekly\n  //     interval: 1,\n  //   },\n  //   requiresConfirmation: false,\n  //   safeDescription: \"Recurring weekly sync meeting.\",\n  //   schedulingType: null,\n  //   seatsPerTimeSlot: null,\n  //   slotInterval: null,\n  //   slug: \"weekly-sync\",\n  //   teamId: null,\n  //   timeZone: null,\n  //   title: \"Weekly Sync\",\n  //   userId: 1,\n  //   users: [userPasquale],\n  // },\n  // {\n  //   ...defaultEventTypeFields,\n  //   afterEventBuffer: 15,\n  //   beforeEventBuffer: 30,\n  //   bookingFields: null,\n  //   bookingLimits: null,\n  //   children: [],\n  //   currency: \"usd\",\n  //   description: \"Group webinar session with multiple attendees.\",\n  //   durationLimits: null,\n  //   eventTypeColor: null,\n  //   hashedLink: [],\n  //   hidden: false,\n  //   hosts: [],\n  //   id: 7,\n  //   isInstantEvent: false,\n  //   length: 60,\n  //   locations: [{ type: \"integrations:zoom\" }],\n  //   metadata: null,\n  //   minimumBookingNotice: 2880, // 48 hours\n  //   offsetStart: 0,\n  //   parentId: null,\n  //   periodCountCalendarDays: null,\n  //   periodDays: null,\n  //   periodEndDate: null,\n  //   periodStartDate: null,\n  //   periodType: \"UNLIMITED\",\n  //   position: 6,\n  //   price: 0,\n  //   profileId: 1,\n  //   recurringEvent: null,\n  //   requiresConfirmation: true,\n  //   safeDescription: \"Group webinar session with multiple attendees.\",\n  //   schedulingType: null,\n  //   seatsPerTimeSlot: 50,\n  //   slotInterval: null,\n  //   slug: \"webinar\",\n  //   teamId: null,\n  //   timeZone: null,\n  //   title: \"Webinar\",\n  //   userId: 1,\n  //   users: [userPasquale],\n  // },\n  // {\n  //   ...defaultEventTypeFields,\n  //   afterEventBuffer: 0,\n  //   beforeEventBuffer: 0,\n  //   bookingFields: null,\n  //   bookingLimits: null,\n  //   children: [],\n  //   currency: \"usd\",\n  //   description: \"Start a meeting right now.\",\n  //   durationLimits: null,\n  //   eventTypeColor: null,\n  //   hashedLink: [],\n  //   hidden: true,\n  //   hosts: [],\n  //   id: 8,\n  //   isInstantEvent: true,\n  //   length: 15,\n  //   locations: [{ type: \"integrations:daily\" }],\n  //   metadata: null,\n  //   minimumBookingNotice: 0,\n  //   offsetStart: 0,\n  //   parentId: null,\n  //   periodCountCalendarDays: null,\n  //   periodDays: null,\n  //   periodEndDate: null,\n  //   periodStartDate: null,\n  //   periodType: \"UNLIMITED\",\n  //   position: 7,\n  //   price: 0,\n  //   profileId: 1,\n  //   recurringEvent: null,\n  //   requiresConfirmation: false,\n  //   safeDescription: \"Start a meeting right now.\",\n  //   schedulingType: null,\n  //   seatsPerTimeSlot: null,\n  //   slotInterval: null,\n  //   slug: \"instant\",\n  //   teamId: null,\n  //   timeZone: null,\n  //   title: \"Instant Meeting\",\n  //   userId: 1,\n  //   users: [userPasquale],\n  // },\n\n  // // Team event types\n  // {\n  //   ...defaultEventTypeFields,\n  //   afterEventBuffer: 0,\n  //   beforeEventBuffer: 0,\n  //   bookingFields: null,\n  //   bookingLimits: null,\n  //   children: [],\n  //   currency: \"usd\",\n  //   description: \"Daily team standup meeting.\",\n  //   durationLimits: null,\n  //   eventTypeColor: null,\n  //   hashedLink: [],\n  //   hidden: false,\n  //   hosts: [\n  //     {\n  //       isFixed: true,\n  //       priority: null,\n  //       user: userPasquale,\n  //       userId: 1,\n  //       weight: null,\n  //       weightAdjustment: null,\n  //     },\n  //     {\n  //       isFixed: true,\n  //       priority: null,\n  //       user: userAlex,\n  //       userId: 2,\n  //       weight: null,\n  //       weightAdjustment: null,\n  //     },\n  //     {\n  //       isFixed: true,\n  //       priority: null,\n  //       user: userSarah,\n  //       userId: 3,\n  //       weight: null,\n  //       weightAdjustment: null,\n  //     },\n  //   ],\n  //   id: 100,\n  //   isInstantEvent: false,\n  //   length: 15,\n  //   locations: [{ type: \"integrations:daily\" }],\n  //   metadata: null,\n  //   minimumBookingNotice: 60,\n  //   offsetStart: 0,\n  //   parentId: null,\n  //   periodCountCalendarDays: null,\n  //   periodDays: null,\n  //   periodEndDate: null,\n  //   periodStartDate: null,\n  //   periodType: \"UNLIMITED\",\n  //   position: 0,\n  //   price: 0,\n  //   profileId: null,\n  //   recurringEvent: {\n  //     count: 30,\n  //     freq: 3, // Daily\n  //     interval: 1,\n  //   },\n  //   requiresConfirmation: false,\n  //   safeDescription: \"Daily team standup meeting.\",\n  //   schedulingType: \"COLLECTIVE\",\n  //   seatsPerTimeSlot: null,\n  //   slotInterval: null,\n  //   slug: \"standup\",\n  //   teamId: 1,\n  //   timeZone: null,\n  //   title: \"Team Standup\",\n  //   userId: null,\n  //   users: [],\n  // },\n  // {\n  //   ...defaultEventTypeFields,\n  //   afterEventBuffer: 5,\n  //   beforeEventBuffer: 5,\n  //   bookingFields: null,\n  //   bookingLimits: { PER_DAY: 10 },\n  //   children: [],\n  //   currency: \"usd\",\n  //   description: \"Connect with our sales team.\",\n  //   durationLimits: null,\n  //   eventTypeColor: {\n  //     darkEventTypeColor: \"#fd6d06\",\n  //     lightEventTypeColor: \"#fd6d06\",\n  //   },\n  //   hashedLink: [],\n  //   hidden: false,\n  //   hosts: [\n  //     {\n  //       isFixed: false,\n  //       priority: 1,\n  //       user: userAlex,\n  //       userId: 2,\n  //       weight: 100,\n  //       weightAdjustment: 0,\n  //     },\n  //     {\n  //       isFixed: false,\n  //       priority: 2,\n  //       user: userSarah,\n  //       userId: 3,\n  //       weight: 100,\n  //       weightAdjustment: 0,\n  //     },\n  //     {\n  //       isFixed: false,\n  //       priority: 3,\n  //       user: userMike,\n  //       userId: 4,\n  //       weight: 50,\n  //       weightAdjustment: 0,\n  //     },\n  //   ],\n  //   id: 101,\n  //   isInstantEvent: false,\n  //   length: 30,\n  //   locations: [{ type: \"integrations:zoom\" }],\n  //   metadata: null,\n  //   minimumBookingNotice: 120,\n  //   offsetStart: 0,\n  //   parentId: null,\n  //   periodCountCalendarDays: null,\n  //   periodDays: null,\n  //   periodEndDate: null,\n  //   periodStartDate: null,\n  //   periodType: \"UNLIMITED\",\n  //   position: 1,\n  //   price: 0,\n  //   profileId: null,\n  //   recurringEvent: null,\n  //   requiresConfirmation: false,\n  //   safeDescription: \"Connect with our sales team.\",\n  //   schedulingType: \"ROUND_ROBIN\",\n  //   seatsPerTimeSlot: null,\n  //   slotInterval: null,\n  //   slug: \"sales\",\n  //   teamId: 1,\n  //   timeZone: null,\n  //   title: \"Sales Call\",\n  //   userId: null,\n  //   users: [],\n  // },\n  // {\n  //   ...defaultEventTypeFields,\n  //   afterEventBuffer: 15,\n  //   beforeEventBuffer: 15,\n  //   bookingFields: null,\n  //   bookingLimits: { PER_WEEK: 5 },\n  //   children: [],\n  //   currency: \"usd\",\n  //   description: \"Technical interview with our engineering team.\",\n  //   durationLimits: null,\n  //   eventTypeColor: null,\n  //   hashedLink: [],\n  //   hidden: false,\n  //   hosts: [\n  //     {\n  //       isFixed: true,\n  //       priority: null,\n  //       user: userPasquale,\n  //       userId: 1,\n  //       weight: null,\n  //       weightAdjustment: null,\n  //     },\n  //     {\n  //       isFixed: true,\n  //       priority: null,\n  //       user: userAlex,\n  //       userId: 2,\n  //       weight: null,\n  //       weightAdjustment: null,\n  //     },\n  //   ],\n  //   id: 102,\n  //   isInstantEvent: false,\n  //   length: 60,\n  //   locations: [{ type: \"integrations:google_meet\" }],\n  //   metadata: null,\n  //   minimumBookingNotice: 2880, // 48 hours\n  //   offsetStart: 0,\n  //   parentId: null,\n  //   periodCountCalendarDays: true,\n  //   periodDays: 30,\n  //   periodEndDate: null,\n  //   periodStartDate: null,\n  //   periodType: \"ROLLING\",\n  //   position: 2,\n  //   price: 0,\n  //   profileId: null,\n  //   recurringEvent: null,\n  //   requiresConfirmation: true,\n  //   safeDescription: \"Technical interview with our engineering team.\",\n  //   schedulingType: \"COLLECTIVE\",\n  //   seatsPerTimeSlot: null,\n  //   slotInterval: null,\n  //   slug: \"tech-interview\",\n  //   teamId: 1,\n  //   timeZone: null,\n  //   title: \"Technical Interview\",\n  //   userId: null,\n  //   users: [],\n  // },\n\n  // // Managed event type with children\n  // {\n  //   ...defaultEventTypeFields,\n  //   afterEventBuffer: 5,\n  //   beforeEventBuffer: 5,\n  //   bookingFields: null,\n  //   bookingLimits: null,\n  //   children: [\n  //     {\n  //       hidden: false,\n  //       id: 201,\n  //       slug: \"one-on-one\",\n  //       users: [userAlex],\n  //     },\n  //     {\n  //       hidden: false,\n  //       id: 202,\n  //       slug: \"one-on-one\",\n  //       users: [userSarah],\n  //     },\n  //     {\n  //       hidden: true,\n  //       id: 203,\n  //       slug: \"one-on-one\",\n  //       users: [userMike],\n  //     },\n  //   ],\n  //   currency: \"usd\",\n  //   description: \"Personal one-on-one meeting with team members.\",\n  //   durationLimits: null,\n  //   eventTypeColor: null,\n  //   hashedLink: [],\n  //   hidden: false,\n  //   hosts: [],\n  //   id: 200,\n  //   isInstantEvent: false,\n  //   length: 30,\n  //   locations: [{ type: \"integrations:daily\" }],\n  //   metadata: {\n  //     managedEventConfig: {\n  //       unlockedFields: [\"locations\", \"description\"],\n  //     },\n  //   },\n  //   minimumBookingNotice: 120,\n  //   offsetStart: 0,\n  //   parentId: null,\n  //   periodCountCalendarDays: null,\n  //   periodDays: null,\n  //   periodEndDate: null,\n  //   periodStartDate: null,\n  //   periodType: \"UNLIMITED\",\n  //   position: 0,\n  //   price: 0,\n  //   profileId: null,\n  //   recurringEvent: null,\n  //   requiresConfirmation: false,\n  //   safeDescription: \"Personal one-on-one meeting with team members.\",\n  //   schedulingType: \"MANAGED\",\n  //   seatsPerTimeSlot: null,\n  //   slotInterval: null,\n  //   slug: \"one-on-one\",\n  //   teamId: 1,\n  //   timeZone: null,\n  //   title: \"One-on-One\",\n  //   userId: null,\n  //   users: [],\n  // },\n];\n\n/**\n * Mock event type groups (personal + team)\n */\nexport const mockEventTypeGroups: EventTypeGroup[] = [\n  {\n    bookerUrl: \"https://cal.com\",\n    metadata: {\n      readOnly: false,\n    },\n    parentId: null,\n    profile: {\n      eventTypesLockedByOrg: false,\n      image: null,\n      name: \"Pasquale Vitiello\",\n      slug: \"pasquale\",\n    },\n    teamId: null,\n  },\n  {\n    bookerUrl: \"https://cal.com\",\n    metadata: {\n      readOnly: false,\n    },\n    parentId: null,\n    profile: {\n      eventTypesLockedByOrg: false,\n      image: null,\n      name: \"Acme Team\",\n      slug: \"acme-team\",\n    },\n    teamId: 1,\n  },\n];\n\n/**\n * Helper to get personal event types\n */\nexport function getPersonalEventTypes(): EventType[] {\n  return mockEventTypes.filter((et) => et.teamId === null);\n}\n\n/**\n * Helper to get team event types\n */\nexport function getTeamEventTypes(teamId: number): EventType[] {\n  return mockEventTypes.filter((et) => et.teamId === teamId);\n}\n\n/**\n * Helper to format duration for display\n */\nexport function formatDuration(minutes: number): string {\n  if (minutes < 60) {\n    return `${minutes}m`;\n  }\n  const hours = Math.floor(minutes / 60);\n  const remainingMinutes = minutes % 60;\n  if (remainingMinutes === 0) {\n    return `${hours}h`;\n  }\n  return `${hours}h ${remainingMinutes}m`;\n}\n\n/**\n * Helper to build event type URL path\n */\nexport function buildEventTypePath(\n  eventType: EventType,\n  profile: EventTypeProfile,\n): string {\n  return `/${profile.slug}/${eventType.slug}`;\n}\n"
  },
  {
    "path": "apps/examples/calcom/lib/navigation-data.ts",
    "content": "import {\n  ActivityIcon,\n  CalendarIcon,\n  ClockFadingIcon,\n  ContactRoundIcon,\n  CopyIcon,\n  ExternalLinkIcon,\n  GiftIcon,\n  Grid2x2Plus,\n  Link2Icon,\n  type LucideIcon,\n  RouteIcon,\n  SettingsIcon,\n  UsersRoundIcon,\n  WorkflowIcon,\n} from \"lucide-react\";\n\nexport interface NavItem {\n  title: string;\n  url: string;\n  icon: LucideIcon;\n  isActive?: boolean;\n  badge?: string;\n  matchPath?: string;\n  items?: {\n    title: string;\n    url: string;\n  }[];\n}\n\nexport interface User {\n  avatar: string;\n  email: string;\n  name: string;\n}\n\nexport const navMainItems: NavItem[] = [\n  {\n    icon: Link2Icon,\n    title: \"Event Types\",\n    url: \"/event-types\",\n  },\n  {\n    icon: CalendarIcon,\n    matchPath: \"/booking\",\n    title: \"Bookings\",\n    url: \"/booking/upcoming\",\n  },\n  {\n    icon: ClockFadingIcon,\n    title: \"Availability\",\n    url: \"/availability\",\n  },\n  {\n    icon: ContactRoundIcon,\n    title: \"Members\",\n    url: \"/members\",\n  },\n  {\n    icon: UsersRoundIcon,\n    title: \"Teams\",\n    url: \"/teams\",\n  },\n  {\n    icon: Grid2x2Plus,\n    items: [\n      {\n        title: \"App Store\",\n        url: \"/apps/store\",\n      },\n      {\n        title: \"Installed Apps\",\n        url: \"/apps/installed\",\n      },\n    ],\n    title: \"Apps\",\n    url: \"/apps\",\n  },\n  {\n    icon: RouteIcon,\n    title: \"Routing\",\n    url: \"/routing\",\n  },\n  {\n    icon: WorkflowIcon,\n    title: \"Workflows\",\n    url: \"/workflows\",\n  },\n  {\n    icon: ActivityIcon,\n    title: \"Insights\",\n    url: \"/insights\",\n  },\n];\n\nexport const navFooterItems: NavItem[] = [\n  {\n    icon: ExternalLinkIcon,\n    title: \"View public page\",\n    url: \"/public\",\n  },\n  {\n    icon: CopyIcon,\n    title: \"Copy public page link\",\n    url: \"#\",\n  },\n  {\n    icon: GiftIcon,\n    title: \"Refer and earn\",\n    url: \"/refer\",\n  },\n  {\n    icon: SettingsIcon,\n    title: \"Settings\",\n    url: \"/settings\",\n  },\n];\n\nexport const user: User = {\n  avatar: \"\",\n  email: \"pasqua@example.com\",\n  name: \"Pasquale\",\n};\n"
  },
  {
    "path": "apps/examples/calcom/lib/settings-navigation-data.ts",
    "content": "import {\n  CreditCardIcon,\n  KeyIcon,\n  type LucideIcon,\n  TerminalIcon,\n} from \"lucide-react\";\n\nexport interface SettingsNavChild {\n  title: string;\n  url: string;\n  external?: boolean;\n}\n\nexport interface SettingsNavItem {\n  title: string;\n  url: string;\n  icon?: LucideIcon;\n  avatar?: {\n    src: string;\n    fallback: string;\n  };\n  children?: SettingsNavChild[];\n}\n\nexport const userSettingsItems: SettingsNavItem[] = [\n  {\n    avatar: {\n      fallback: \"LT\",\n      src: \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\",\n    },\n    children: [\n      { title: \"Profile\", url: \"/settings/my-account/profile\" },\n      { title: \"General\", url: \"/settings/my-account/general\" },\n      { title: \"Calendars\", url: \"/settings/my-account/calendars\" },\n      { title: \"Conferencing\", url: \"/settings/my-account/conferencing\" },\n      { title: \"Appearance\", url: \"/settings/my-account/appearance\" },\n      { title: \"Out of office\", url: \"/settings/my-account/out-of-office\" },\n      {\n        title: \"Push notifications\",\n        url: \"/settings/my-account/push-notifications\",\n      },\n    ],\n    title: \"Luke Tracy\",\n    url: \"/settings/my-account\",\n  },\n  {\n    children: [\n      { title: \"Password\", url: \"/settings/security/password\" },\n      { title: \"Impersonation\", url: \"/settings/security/impersonation\" },\n      {\n        title: \"Two factor authentication\",\n        url: \"/settings/security/two-factor-auth\",\n      },\n      { title: \"Compliance\", url: \"/settings/security/compliance\" },\n    ],\n    icon: KeyIcon,\n    title: \"Security\",\n    url: \"/settings/security\",\n  },\n  {\n    children: [{ title: \"Manage billing\", url: \"/settings/billing\" }],\n    icon: CreditCardIcon,\n    title: \"Billing\",\n    url: \"/settings/billing\",\n  },\n  {\n    children: [\n      { title: \"Webhooks\", url: \"/settings/developer/webhooks\" },\n      { title: \"API keys\", url: \"/settings/developer/api-keys\" },\n    ],\n    icon: TerminalIcon,\n    title: \"Developer\",\n    url: \"/settings/developer\",\n  },\n];\n\nexport const orgSettingsItems: SettingsNavItem[] = [\n  {\n    avatar: {\n      fallback: \"CC\",\n      src: \"https://pbs.twimg.com/profile_images/1994776674391457792/7utKOMi6_400x400.jpg\",\n    },\n    children: [\n      { title: \"Profile\", url: \"/settings/organizations/profile\" },\n      { title: \"General\", url: \"/settings/organizations/general\" },\n      {\n        title: \"Guest notifications\",\n        url: \"/settings/organizations/guest-notifications\",\n      },\n      {\n        external: true,\n        title: \"Members\",\n        url: \"/settings/organizations/members\",\n      },\n      { title: \"Attributes\", url: \"/settings/organizations/attributes\" },\n      {\n        external: true,\n        title: \"Admin API\",\n        url: \"/settings/organizations/admin-api\",\n      },\n      {\n        title: \"Delegation credential\",\n        url: \"/settings/organizations/delegation-credential\",\n      },\n      {\n        title: \"Roles & permissions\",\n        url: \"/settings/organizations/roles-permissions\",\n      },\n    ],\n    title: \"Cal.com\",\n    url: \"/settings/organizations\",\n  },\n];\n\nexport const settingsNavItems: SettingsNavItem[] = [\n  ...userSettingsItems,\n  ...orgSettingsItems,\n];\n"
  },
  {
    "path": "apps/examples/calcom/next.config.ts",
    "content": "import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  transpilePackages: [\"@coss/ui\"],\n};\n\nexport default nextConfig;\n"
  },
  {
    "path": "apps/examples/calcom/package.json",
    "content": "{\n  \"dependencies\": {\n    \"@coss/ui\": \"workspace:*\",\n    \"@dnd-kit/core\": \"^6.3.1\",\n    \"@dnd-kit/sortable\": \"^10.0.0\",\n    \"@dnd-kit/utilities\": \"^3.2.2\",\n    \"@hugeicons/core-free-icons\": \"^2.0.0\",\n    \"@hugeicons/react\": \"^1.1.1\",\n    \"dompurify\": \"^3.3.1\",\n    \"lucide-react\": \"^0.555.0\",\n    \"marked\": \"^17.0.1\",\n    \"next\": \"16.0.9\",\n    \"next-themes\": \"^0.4.6\",\n    \"react\": \"19.2.3\",\n    \"react-dom\": \"19.2.3\"\n  },\n  \"devDependencies\": {\n    \"@coss/typescript-config\": \"workspace:*\",\n    \"@tailwindcss/postcss\": \"^4.1.17\",\n    \"@types/dompurify\": \"^3.2.0\",\n    \"@types/node\": \"^24.10.1\",\n    \"@types/react\": \"19.2.6\",\n    \"@types/react-dom\": \"19.2.3\",\n    \"tailwindcss\": \"^4.1.17\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"license\": \"AGPL-3.0-or-later\",\n  \"name\": \"@examples/calcom\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"next build\",\n    \"clean\": \"rm -rf node_modules && rm -rf .turbo && rm -rf .next\",\n    \"dev\": \"next dev --port 4002\",\n    \"lint\": \"biome lint .\",\n    \"start\": \"next start\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"version\": \"0.1.0\"\n}\n"
  },
  {
    "path": "apps/examples/calcom/postcss.config.mjs",
    "content": "import { postcssConfig } from \"@coss/ui/postcss.config\";\n\nexport default postcssConfig;\n"
  },
  {
    "path": "apps/examples/calcom/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    },\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ]\n  },\n  \"exclude\": [\"node_modules\"],\n  \"extends\": \"@coss/typescript-config/nextjs.json\",\n  \"include\": [\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \"next-env.d.ts\",\n    \"next.config.ts\",\n    \".next/types/**/*.ts\"\n  ]\n}\n"
  },
  {
    "path": "apps/examples/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\nimport \"./.next/dev/types/routes.d.ts\";\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.\n"
  },
  {
    "path": "apps/origin/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n.yarn/install-state.gz\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n"
  },
  {
    "path": "apps/origin/LICENSE.md",
    "content": "MIT License\n\nCopyright (c) 2025 coss.com\nOriginally Copyright (c) 2025 Origin UI\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "apps/origin/README.md",
    "content": "> Legacy snapshot\n>\n> - This app is a preserved, pre-acquisition version of Origin UI (Radix-based, shadcn-style).\n> - It remains available for use, but support and maintenance are limited.\n> - Active development now focuses on the new [Particles](https://coss.com/ui/particles) components built on the [coss ui](https://coss.com/ui/docs) primitives.\n\n# coss.com origin (formerly Origin UI)\n\n**Beautiful UI components built with Tailwind CSS and React.**\n\nThis is an extensive collection of copy-and-paste components for quickly building app UIs. It includes hundreds of components and is constantly updated with new designs.\n\n**Demo** → [https://coss.com/origin](https://coss.com/origin)\n\n![coss.com origin](https://github.com/user-attachments/assets/a6428743-1628-4498-8b45-7000e30bdc24)\n\n## Getting Started\n\nThis UI collection is designed to integrate seamlessly with Next.js projects, but the components are also compatible with any React-based project. The components follow shadcn conventions, so they'll feel familiar to anyone who has used shadcn before.\n\n**1. Set up the required files:**\n\n- Copy all `.tsx` files from `registry/default/ui` folder to your project's `components/ui` folder.\n- Copy `utils.ts` from `registry/default/lib` folder to your project's `lib` folder.\n\nNote: If you're using shadcn, you may likely already have these files - however, I would recommend using our components over shadcn's for a consistent styling experience.\n\n**2. Add the following CSS variables to your stylesheet (you don't need to overwrite them if you already have them):**\n\n```\n:root {\n  --radius: 0.625rem;\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.141 0.005 285.823);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.141 0.005 285.823);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.141 0.005 285.823);\n  --primary: oklch(0.21 0.006 285.885);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.967 0.001 286.375);\n  --secondary-foreground: oklch(0.21 0.006 285.885);\n  --muted: oklch(0.967 0.001 286.375);\n  --muted-foreground: oklch(0.552 0.016 285.938);\n  --accent: oklch(0.967 0.001 286.375);\n  --accent-foreground: oklch(0.21 0.006 285.885);\n  --destructive: oklch(0.637 0.237 25.331);\n  --destructive-foreground: oklch(0.637 0.237 25.331);\n  --border: oklch(0.92 0.004 286.32);\n  --input: oklch(0.871 0.006 286.286);\n  --ring: oklch(0.871 0.006 286.286);\n  --chart-1: oklch(0.646 0.222 41.116);\n  --chart-2: oklch(0.6 0.118 184.704);\n  --chart-3: oklch(0.398 0.07 227.392);\n  --chart-4: oklch(0.828 0.189 84.429);\n  --chart-5: oklch(0.769 0.188 70.08);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.141 0.005 285.823);\n  --sidebar-primary: oklch(0.21 0.006 285.885);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.967 0.001 286.375);\n  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);\n  --sidebar-border: oklch(0.92 0.004 286.32);\n  --sidebar-ring: oklch(0.871 0.006 286.286);\n}\n\n.dark {\n  --background: oklch(0.141 0.005 285.823);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.141 0.005 285.823);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.141 0.005 285.823);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.985 0 0);\n  --primary-foreground: oklch(0.21 0.006 285.885);\n  --secondary: oklch(0.274 0.006 286.033);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.21 0.006 285.885);\n  --muted-foreground: oklch(0.65 0.01 286);\n  --accent: oklch(0.21 0.006 285.885);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.396 0.141 25.723);\n  --destructive-foreground: oklch(0.637 0.237 25.331);\n  --border: oklch(0.274 0.006 286.033);\n  --input: oklch(0.274 0.006 286.033);\n  --ring: oklch(0.442 0.017 285.786);\n  --chart-1: oklch(0.488 0.243 264.376);\n  --chart-2: oklch(0.696 0.17 162.48);\n  --chart-3: oklch(0.769 0.188 70.08);\n  --chart-4: oklch(0.627 0.265 303.9);\n  --chart-5: oklch(0.645 0.246 16.439);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(0.274 0.006 286.033);\n  --sidebar-ring: oklch(0.442 0.017 285.786);\n}\n```\n\nAfter completing these steps, you can copy and use the components in your project. Note that some components (e.g., number inputs, date pickers, time pickers, phone number inputs) may require additional libraries.\n\n## License\n\nLicensed under the [MIT License](LICENSE.md).\n"
  },
  {
    "path": "apps/origin/app/[category]/page.tsx",
    "content": "import type { Metadata } from \"next\";\nimport { notFound } from \"next/navigation\";\nimport ComponentCard from \"@/components/component-card\";\nimport ComponentDetails from \"@/components/component-details\";\nimport ComponentLoader from \"@/components/component-loader-server\";\nimport Cta from \"@/components/cta\";\nimport PageGrid from \"@/components/page-grid\";\nimport PageHeader from \"@/components/page-header\";\nimport { categories, getCategory } from \"@/config/components\";\nimport { getComponentsByNames } from \"@/lib/utils\";\n\ntype Props = {\n  params: Promise<{ category: string }>;\n};\n\nexport async function generateMetadata({ params }: Props): Promise<Metadata> {\n  const category = getCategory((await params).category);\n\n  if (!category) {\n    return {};\n  }\n\n  // Get components to check count\n  const components = getComponentsByNames(\n    category.components.map((item) => item.name),\n  );\n\n  const isSingleComponent = components.length === 1;\n\n  // Custom title and description for event-calendar\n  if (category.slug === \"event-calendar\") {\n    return {\n      description:\n        \"An event calendar component built with React and Tailwind CSS. Originally built in v0 and currently in early alpha stage.\",\n      title:\n        \"Event calendar component built with React and Tailwind CSS - coss.com origin\",\n    };\n  }\n\n  return {\n    description: isSingleComponent\n      ? `A beautiful and accessible ${category.name.toLowerCase()} component built with React and Tailwind CSS.`\n      : `A collection of beautiful and accessible ${category.name.toLowerCase()} components built with React and Tailwind CSS.`,\n    title: isSingleComponent\n      ? `${category.name} component built with React and Tailwind CSS - coss.com origin`\n      : `${category.name} components built with React and Tailwind CSS - coss.com origin`,\n  };\n}\n\nexport async function generateStaticParams() {\n  return categories.map((category) => ({\n    category: category.slug,\n  }));\n}\n\nexport default async function Page({ params }: Props) {\n  const category = getCategory((await params).category);\n\n  if (!category) {\n    notFound();\n  }\n\n  const components = getComponentsByNames(\n    category.components.map((item) => item.name),\n  );\n\n  // Determine the description text based on category\n  const getDescriptionText = () => {\n    // Special case for event-calendar\n    if (category.slug === \"event-calendar\") {\n      return (\n        <span className=\"block text-balance\">\n          An event calendar component built with React and Tailwind CSS.\n          Originally built in{\" \"}\n          <a\n            className=\"text-primary hover:underline\"\n            href=\"https://v0.dev\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            v0\n          </a>{\" \"}\n          and currently in early alpha stage.{\" \"}\n          <a\n            className=\"inline-flex items-center gap-1 text-primary hover:underline\"\n            href=\"https://github.com/origin-space/event-calendar\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            Docs\n            <svg\n              className=\"-mt-1 fill-current\"\n              height=\"9\"\n              width=\"9\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"m1.55 8.445-.776-.776 5.767-5.777H2.087l.01-1.074H8.39v6.304H7.307l.01-4.454L1.55 8.445Z\" />\n            </svg>\n          </a>\n        </span>\n      );\n    }\n\n    // Default case based on component count\n    return components.length === 1\n      ? `A ${category.name.toLowerCase()} component built with React and Tailwind CSS.`\n      : `A growing collection of ${components.length} ${category.name.toLowerCase()} components built with React and Tailwind CSS.`;\n  };\n\n  return (\n    <>\n      <PageHeader title={category.name}>{getDescriptionText()}</PageHeader>\n      <PageGrid>\n        {components.map((component) => (\n          <ComponentCard\n            className=\"data-[slot=comp-542]:px-0\"\n            component={component}\n            key={component.name}\n          >\n            <ComponentLoader component={component} />\n            <ComponentDetails component={component} />\n          </ComponentCard>\n        ))}\n      </PageGrid>\n      <Cta />\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/easings/copy-class.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nconst CopyClass = ({ value }: { value: string }) => {\n  const [copied, setCopied] = useState<boolean>(false);\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  return (\n    <div>\n      <Button\n        aria-label={copied ? \"Copied\" : \"Copy Tailwind class\"}\n        className=\"h-7 max-w-full whitespace-normal font-normal text-muted-foreground/80 text-xs hover:bg-transparent hover:text-foreground disabled:opacity-100\"\n        disabled={copied}\n        onClick={handleCopy}\n        variant=\"ghost\"\n      >\n        <div className=\"flex-1\">\n          {copied ? (\n            \"Copied\"\n          ) : (\n            <span className=\"transition-colors\">Copy class</span>\n          )}\n        </div>\n        <div className=\"relative\">\n          <div\n            className={cn(\n              \"transition-all\",\n              copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\",\n            )}\n          >\n            <svg\n              aria-hidden=\"true\"\n              fill=\"none\"\n              height=\"16\"\n              width=\"16\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M14.548 3.488a.75.75 0 0 1-.036 1.06l-8.572 8a.75.75 0 0 1-1.023 0l-3.429-3.2a.75.75 0 0 1 1.024-1.096l2.917 2.722 8.06-7.522a.75.75 0 0 1 1.06.036Z\"\n                fill=\"#10B981\"\n              />\n            </svg>\n          </div>\n          <div\n            className={cn(\n              \"absolute -top-0.5 transition-all\",\n              copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-80\",\n            )}\n          >\n            <svg\n              aria-hidden=\"true\"\n              className=\"fill-current\"\n              fill=\"none\"\n              height=\"16\"\n              width=\"16\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M3 2.5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5ZM10 1H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm3 5.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5v-1H5v1a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1v1.5Z\" />\n            </svg>\n          </div>\n        </div>\n      </Button>\n    </div>\n  );\n};\n\nexport default CopyClass;\n"
  },
  {
    "path": "apps/origin/app/easings/easings.tsx",
    "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport { Slider } from \"@/registry/default/ui/slider\";\nimport CopyClass from \"./copy-class\";\n\ninterface Easing {\n  name: string;\n  points: number[];\n}\n\ninterface EasingsProps {\n  easings: Easing[];\n}\n\ntype EasingFilter = \"all\" | \"in\" | \"out\" | \"in-out\";\n\nconst defaultConfig = {\n  animationDuration: 1000,\n  height: 140,\n  padding: 20,\n  pauseDuration: 1000,\n  plotSize: 100,\n  width: 140,\n};\n\ntype AnimationType = \"translate\" | \"scale\" | \"rotate\";\n\nfunction useAnimationKey(\n  duration: number,\n  pauseDuration: number,\n  _animationType: AnimationType,\n) {\n  const [key, setKey] = useState(0);\n\n  useEffect(() => {\n    const timer = setInterval(\n      () => {\n        setKey((prevKey) => prevKey + 1);\n      },\n      (duration + pauseDuration) * 1000,\n    );\n\n    return () => clearInterval(timer);\n  }, [duration, pauseDuration]);\n\n  return key;\n}\n\nconst EasingSVG = ({\n  easing,\n  config,\n  duration,\n  animationType,\n  pauseDuration,\n}: {\n  easing: Easing;\n  config: typeof defaultConfig;\n  duration: number;\n  animationType: AnimationType;\n  pauseDuration: number;\n}) => {\n  const key = useAnimationKey(duration, pauseDuration, animationType);\n\n  const getAnimationStyle = () => {\n    if (!easing.points.length || duration <= 0) return {};\n\n    return {\n      [\"--bezier-coordinates\" as string]: easing.points.join(\",\"),\n      [\"--animation-duration\" as string]: `${duration}s`,\n      [\"--total-duration\" as string]: `${duration + pauseDuration}s`,\n      animationDelay: \"0s\",\n      animationDuration: `${duration}s`,\n      animationFillMode: \"forwards\",\n      animationIterationCount: \"1\",\n      animationName: \"moveCircleVertically\",\n      animationTimingFunction: `cubic-bezier(${easing.points.join(\",\")})`,\n    };\n  };\n\n  return (\n    <svg\n      className=\"w-full\"\n      height={config.height}\n      viewBox={`0 0 ${config.width} ${config.height}`}\n      width={config.width}\n    >\n      {/* Grid */}\n      <rect\n        className=\"fill-none stroke-muted-foreground/20\"\n        height={config.plotSize}\n        strokeWidth=\"1\"\n        width={config.plotSize}\n        x={config.padding}\n        y={config.padding}\n      />\n\n      {/* Diagonal line */}\n      <line\n        className=\"stroke-muted-foreground/20\"\n        strokeWidth=\"1\"\n        x1={config.padding}\n        x2={config.width - config.padding}\n        y1={config.height - config.padding}\n        y2={config.padding}\n      />\n\n      {/* Bezier curve */}\n      <path\n        className=\"stroke-muted-foreground\"\n        d={`M${config.padding},${config.height - config.padding} C${config.padding + easing.points[0] * config.plotSize},${\n          config.height - config.padding - easing.points[1] * config.plotSize\n        } ${config.padding + easing.points[2] * config.plotSize},${\n          config.height - config.padding - easing.points[3] * config.plotSize\n        } ${config.padding + config.plotSize},${config.height - config.padding - config.plotSize}`}\n        fill=\"none\"\n        strokeWidth=\"2\"\n      />\n\n      {/* Start point */}\n      <circle\n        className=\"fill-muted-foreground\"\n        cx={config.padding}\n        cy={config.height - config.padding}\n        r=\"4\"\n      />\n\n      {/* End point */}\n      <circle\n        className=\"fill-muted-foreground\"\n        cx={config.width - config.padding}\n        cy={config.padding}\n        r=\"4\"\n      />\n\n      {/* Animated circle */}\n      <g\n        className=\"animated-circle\"\n        key={`${key}-${duration}-${pauseDuration}-${animationType}`}\n        style={getAnimationStyle()}\n      >\n        <circle\n          className=\"fill-primary\"\n          cx={config.padding}\n          cy={config.height - config.padding}\n          r=\"4\"\n          style={{\n            animationDelay: \"0s\",\n            animationDuration: `${duration}s`,\n            animationFillMode: \"forwards\",\n            animationIterationCount: \"1\",\n            animationName: \"moveCircleHorizontally\",\n            animationTimingFunction: \"linear\",\n          }}\n        />\n      </g>\n      <style jsx>{`\n        @keyframes moveCircleHorizontally {\n          0% {\n            transform: translateX(0);\n          }\n          100% {\n            transform: translateX(${config.plotSize}px);\n          }\n        }\n        @keyframes moveCircleVertically {\n          0% {\n            transform: translateY(0);\n          }\n          100% {\n            transform: translateY(-${config.plotSize}px);\n          }\n        }\n      `}</style>\n    </svg>\n  );\n};\n\nconst AnimatedSquare = ({\n  easing,\n  duration,\n  animationType,\n  pauseDuration,\n}: {\n  easing: Easing;\n  duration: number;\n  animationType: AnimationType;\n  pauseDuration: number;\n}) => {\n  const key = useAnimationKey(duration, pauseDuration, animationType);\n\n  const getAnimationStyle = () => {\n    if (!easing.points.length || duration <= 0) return {};\n\n    const baseStyle = {\n      [\"--bezier-coordinates\" as string]: easing.points.join(\",\"),\n      [\"--animation-duration\" as string]: `${duration}s`,\n      [\"--total-duration\" as string]: `${duration + pauseDuration}s`,\n    };\n\n    const animationName = {\n      rotate: \"rotateSquare\",\n      scale: \"scaleSquare\",\n      translate: \"translateSquare\",\n    }[animationType];\n\n    return {\n      ...baseStyle,\n      animationDelay: \"0s\",\n      animationDuration: `${duration}s`,\n      animationFillMode: \"forwards\",\n      animationIterationCount: \"1\",\n      animationName,\n      animationTimingFunction: `cubic-bezier(${easing.points.join(\",\")})`,\n    };\n  };\n\n  const animationStyle = getAnimationStyle();\n\n  return (\n    <div\n      className={`pointer-events-none flex w-full items-center ${animationType === \"translate\" ? \"justify-start\" : \"justify-center\"}`}\n      key={`${key}-${duration}-${pauseDuration}-${animationType}`}\n      style={animationType === \"translate\" ? animationStyle : undefined}\n    >\n      <div\n        className=\"animated-square h-10 w-10 rounded-md bg-linear-to-tr from-primary to-primary/80 shadow-lg shadow-primary/10\"\n        style={animationType !== \"translate\" ? animationStyle : undefined}\n      />\n      <style jsx>{`\n        @keyframes translateSquare {\n          0% {\n            transform: translateX(0);\n          }\n          100% {\n            transform: translateX(calc(100% - 2.5rem));\n          }\n        }\n        @keyframes scaleSquare {\n          0% {\n            transform: scale(0);\n          }\n          100% {\n            transform: scale(1);\n          }\n        }\n        @keyframes rotateSquare {\n          0% {\n            transform: rotate(0deg);\n          }\n          100% {\n            transform: rotate(360deg);\n          }\n        }\n      `}</style>\n    </div>\n  );\n};\n\nexport default function Easings({ easings }: EasingsProps) {\n  const [duration, setDuration] = useState(defaultConfig.animationDuration);\n  const [tempDuration, setTempDuration] = useState(\n    defaultConfig.animationDuration,\n  );\n  const pauseDuration = defaultConfig.pauseDuration;\n  const [animationType, setAnimationType] =\n    useState<AnimationType>(\"translate\");\n  const [easingFilter, setEasingFilter] = useState<EasingFilter>(\"all\");\n\n  const handleSliderChangeEnd = (value: number[]) => {\n    setDuration(value[0]);\n  };\n\n  const handleSliderChange = (value: number[]) => {\n    setTempDuration(value[0]);\n  };\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const value = Number.parseInt(event.target.value, 10);\n    if (!Number.isNaN(value) && value >= 0 && value <= 5000) {\n      setTempDuration(value);\n    }\n  };\n\n  const handleInputBlur = () => {\n    if (tempDuration >= 0 && tempDuration <= 5000) {\n      setDuration(tempDuration);\n    } else {\n      setTempDuration(duration);\n    }\n  };\n\n  const getFilteredEasings = () => {\n    if (easingFilter === \"all\") return easings;\n\n    return easings.filter((easing) => {\n      const name = easing.name.toLowerCase();\n      switch (easingFilter) {\n        case \"in\":\n          return (\n            (name.startsWith(\"easein\") && !name.includes(\"inout\")) ||\n            name === \"ease-in\"\n          );\n        case \"out\":\n          return name.startsWith(\"easeout\") || name === \"ease-out\";\n        case \"in-out\":\n          return (\n            name.startsWith(\"easeinout\") ||\n            name === \"ease-in-out\" ||\n            name === \"ease\"\n          );\n        default:\n          return true;\n      }\n    });\n  };\n\n  return (\n    <div className=\"mb-12 space-y-6\">\n      <div className=\"py-4\">\n        <div className=\"flex flex-col justify-between gap-4 md:flex-row md:items-center\">\n          <div className=\"flex flex-col gap-2\">\n            <Label>Duration</Label>\n            <div className=\"flex items-center gap-4\">\n              <Slider\n                className=\"w-[180px]\"\n                max={5000}\n                min={0}\n                onValueChange={handleSliderChange}\n                onValueCommit={handleSliderChangeEnd}\n                step={1}\n                value={[tempDuration]}\n              />\n              <Input\n                className=\"w-[90px]\"\n                max={5000}\n                min={0}\n                onBlur={handleInputBlur}\n                onChange={handleInputChange}\n                type=\"number\"\n                value={tempDuration}\n              />\n              <span className=\"text-muted-foreground text-sm\">ms</span>\n            </div>\n          </div>\n\n          <div className=\"flex items-center gap-4\">\n            <div className=\"flex flex-col gap-2\">\n              <Label>Filter</Label>\n              <Select\n                onValueChange={(value: EasingFilter) => setEasingFilter(value)}\n                value={easingFilter}\n              >\n                <SelectTrigger className=\"h-9 w-[100px]\">\n                  <SelectValue placeholder=\"Select animation type\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">All</SelectItem>\n                  <SelectItem value=\"in\">In</SelectItem>\n                  <SelectItem value=\"out\">Out</SelectItem>\n                  <SelectItem value=\"in-out\">In-Out</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex flex-col gap-2\">\n              <Label>Animation type</Label>\n              <Select\n                onValueChange={(value: AnimationType) =>\n                  setAnimationType(value)\n                }\n                value={animationType}\n              >\n                <SelectTrigger className=\"h-9 w-[180px]\">\n                  <SelectValue placeholder=\"Select animation type\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"translate\">Translate</SelectItem>\n                  <SelectItem value=\"scale\">Scale</SelectItem>\n                  <SelectItem value=\"rotate\">Rotate</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\" id=\"grid\">\n        {getFilteredEasings().map((easing) => (\n          <div\n            className=\"group relative flex aspect-square flex-col items-center justify-center gap-4 rounded-xl bg-muted/65\"\n            key={`${easing.name}-${easingFilter}`}\n          >\n            <div className=\"pt-6 text-center font-medium text-sm\">\n              {easing.name}\n            </div>\n\n            <div className=\"flex w-full grow flex-col items-start justify-center px-8\">\n              <div className=\"mb-4 flex w-full justify-center\">\n                <EasingSVG\n                  animationType={animationType}\n                  config={defaultConfig}\n                  duration={duration / 1000}\n                  easing={easing}\n                  key={`svg-${easing.name}-${easingFilter}`}\n                  pauseDuration={pauseDuration / 1000}\n                />\n              </div>\n              <AnimatedSquare\n                animationType={animationType}\n                duration={duration / 1000}\n                easing={easing}\n                key={`square-${easing.name}-${easingFilter}`}\n                pauseDuration={pauseDuration / 1000}\n              />\n            </div>\n\n            <div className=\"flex items-center justify-center gap-2 pb-5\">\n              {/* Using decodeURIComponent to properly escape special characters in the class name.\n                  Without this, Tailwind shows a warning: The class ... is ambiguous and matches multiple utilities. */}\n              <CopyClass\n                value={`ease-[cubic-bezier(${easing.points.join(\",\")})]`}\n              />\n            </div>\n          </div>\n        ))}\n      </div>\n      <style global jsx>{`\n        @media (min-width: 768px) {\n          .group,\n          .animated-circle,\n          .animated-square {\n            transition: opacity 0.25s ease;\n          }\n          #grid:hover .group {\n            opacity: 0.5;\n          }\n          #grid:hover .group .animated-circle,\n          #grid:hover .group .animated-square {\n            opacity: 0;\n          }\n          #grid .group:hover,\n          #grid .group:hover .animated-circle,\n          #grid .group:hover .animated-square {\n            opacity: 1;\n          }\n        }\n      `}</style>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/easings/page.tsx",
    "content": "import type { Metadata } from \"next\";\nimport Easings from \"./easings\";\nimport PageHeader from \"@/components/page-header\";\n\nexport const metadata: Metadata = {\n  description:\n    \"A collection of easing utility classes to enhance your Tailwind CSS animations and transitions.\",\n  title: \"Tailwind CSS Easing Classes - coss.com origin\",\n};\n\nconst easings = [\n  {\n    name: \"linear\",\n    points: [0, 0, 1, 1],\n  },\n  {\n    name: \"ease\",\n    points: [0.25, 0.1, 0.25, 1],\n  },\n  {\n    name: \"ease-in\",\n    points: [0.42, 0, 1, 1],\n  },\n  {\n    name: \"ease-out\",\n    points: [0, 0, 0.58, 1],\n  },\n  {\n    name: \"ease-in-out\",\n    points: [0.42, 0, 0.58, 1],\n  },\n  {\n    name: \"ease-in-sine\",\n    points: [0.12, 0, 0.39, 0],\n  },\n  {\n    name: \"ease-out-sine\",\n    points: [0.61, 1, 0.88, 1],\n  },\n  {\n    name: \"ease-in-out-sine\",\n    points: [0.37, 0, 0.63, 1],\n  },\n  {\n    name: \"ease-in-quad\",\n    points: [0.11, 0, 0.5, 0],\n  },\n  {\n    name: \"ease-out-quad\",\n    points: [0.5, 1, 0.89, 1],\n  },\n  {\n    name: \"ease-in-out-quad\",\n    points: [0.45, 0, 0.55, 1],\n  },\n  {\n    name: \"ease-in-cubic\",\n    points: [0.32, 0, 0.67, 0],\n  },\n  {\n    name: \"ease-out-cubic\",\n    points: [0.33, 1, 0.68, 1],\n  },\n  {\n    name: \"ease-in-out-cubic\",\n    points: [0.65, 0, 0.35, 1],\n  },\n  {\n    name: \"ease-in-quart\",\n    points: [0.5, 0, 0.75, 0],\n  },\n  {\n    name: \"ease-out-quart\",\n    points: [0.25, 1, 0.5, 1],\n  },\n  {\n    name: \"ease-in-out-quart\",\n    points: [0.76, 0, 0.24, 1],\n  },\n  {\n    name: \"ease-in-quint\",\n    points: [0.64, 0, 0.78, 0],\n  },\n  {\n    name: \"ease-out-quint\",\n    points: [0.22, 1, 0.36, 1],\n  },\n  {\n    name: \"ease-in-out-quint\",\n    points: [0.83, 0, 0.17, 1],\n  },\n  {\n    name: \"ease-in-expo\",\n    points: [0.7, 0, 0.84, 0],\n  },\n  {\n    name: \"ease-out-expo\",\n    points: [0.16, 1, 0.3, 1],\n  },\n  {\n    name: \"ease-in-out-expo\",\n    points: [0.87, 0, 0.13, 1],\n  },\n  {\n    name: \"ease-in-circ\",\n    points: [0.55, 0, 1, 0.45],\n  },\n  {\n    name: \"ease-out-circ\",\n    points: [0, 0.55, 0.45, 1],\n  },\n  {\n    name: \"ease-in-out-circ\",\n    points: [0.85, 0, 0.15, 1],\n  },\n  {\n    name: \"ease-in-back\",\n    points: [0.36, 0, 0.66, -0.56],\n  },\n  {\n    name: \"ease-out-back\",\n    points: [0.34, 1.56, 0.64, 1],\n  },\n  {\n    name: \"ease-in-out-back\",\n    points: [0.68, -0.6, 0.32, 1.6],\n  },\n];\n\nexport default function Page() {\n  return (\n    <>\n      <PageHeader title=\"Tailwind CSS easing classes\">\n        A set of easing functions ready to copy and paste into your Tailwind CSS\n        project.\n      </PageHeader>\n\n      <Easings easings={easings} />\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/globals.css",
    "content": "@import \"tailwindcss\";\n@import \"tw-animate-css\";\n\n@custom-variant dark (&:is(.dark *));\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --font-sans: var(--font-sans);\n  --font-mono: var(--font-mono);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar: var(--sidebar);\n  --color-chart-5: var(--chart-5);\n  --color-chart-4: var(--chart-4);\n  --color-chart-3: var(--chart-3);\n  --color-chart-2: var(--chart-2);\n  --color-chart-1: var(--chart-1);\n  --color-ring: var(--ring);\n  --color-input: var(--input);\n  --color-border: var(--border);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-destructive: var(--destructive);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-accent: var(--accent);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-muted: var(--muted);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-secondary: var(--secondary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-primary: var(--primary);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-popover: var(--popover);\n  --color-card-foreground: var(--card-foreground);\n  --color-card: var(--card);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}\n\n:root {\n  --radius: 0.625rem;\n  --background: oklch(1 0 0); /* --color-white */\n  --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */\n  --card: oklch(1 0 0); /* --color-white */\n  --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */\n  --popover: oklch(1 0 0); /* --color-white */\n  --popover-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */\n  --primary: oklch(0.21 0.006 285.885); /* --color-zinc-900 */\n  --primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --secondary: oklch(0.967 0.001 286.375); /* --color-zinc-100 */\n  --secondary-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */\n  --muted: oklch(0.967 0.001 286.375); /* --color-zinc-100 */\n  --muted-foreground: oklch(0.552 0.016 285.938); /* --color-zinc-500 */\n  --accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */\n  --accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */\n  --destructive: oklch(0.637 0.237 25.331); /* --color-red-500 */\n  --destructive-foreground: oklch(0.637 0.237 25.331); /* --color-red-500 */\n  --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */\n  --input: oklch(0.871 0.006 286.286); /* --color-zinc-300 */\n  --ring: oklch(0.871 0.006 286.286); /* --color-zinc-300 */\n  --chart-1: oklch(0.646 0.222 41.116); /* --color-orange-600 */\n  --chart-2: oklch(0.6 0.118 184.704); /* --color-teal-600 */\n  --chart-3: oklch(0.398 0.07 227.392); /* --color-cyan-900 */\n  --chart-4: oklch(0.828 0.189 84.429); /* --color-amber-400 */\n  --chart-5: oklch(0.769 0.188 70.08); /* --color-amber-500 */\n  --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */\n  --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */\n  --sidebar-primary: oklch(0.21 0.006 285.885); /* --color-zinc-900 */\n  --sidebar-primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */\n  --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */\n  --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */\n  --sidebar-ring: oklch(0.871 0.006 286.286); /* --color-zinc-300 */\n}\n\n.dark {\n  --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */\n  --foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --card: oklch(0.141 0.005 285.823); /* --color-zinc-950 */\n  --card-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --popover: oklch(0.141 0.005 285.823); /* --color-zinc-950 */\n  --popover-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --primary: oklch(0.985 0 0); /* --color-zinc-50 */\n  --primary-foreground: oklch(0.21 0.006 285.885); /* --color-zinc-900 */\n  --secondary: oklch(0.274 0.006 286.033); /* --color-zinc-800 */\n  --secondary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --muted: oklch(0.21 0.006 285.885); /* --color-zinc-900 */\n  --muted-foreground: oklch(0.65 0.01 286); /* 🔥 near --color-zinc-400 */\n  --accent: oklch(0.21 0.006 285.885); /* --color-zinc-900 */\n  --accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --destructive: oklch(0.396 0.141 25.723); /* --color-red-900 */\n  --destructive-foreground: oklch(0.637 0.237 25.331); /* --color-red-500 */\n  --border: oklch(0.274 0.006 286.033); /* --color-zinc-800 */\n  --input: oklch(0.274 0.006 286.033); /* --color-zinc-800 */\n  --ring: oklch(0.442 0.017 285.786); /* --color-zinc-600 */\n  --chart-1: oklch(0.488 0.243 264.376); /* --color-blue-700 */\n  --chart-2: oklch(0.696 0.17 162.48); /* --color-emerald-500 */\n  --chart-3: oklch(0.769 0.188 70.08); /* --color-amber-500 */\n  --chart-4: oklch(0.627 0.265 303.9); /* --color-purple-500 */\n  --chart-5: oklch(0.645 0.246 16.439); /* --color-rose-500 */\n  --sidebar: oklch(0.205 0 0); /* --color-neutral-900 */\n  --sidebar-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --sidebar-primary: oklch(0.488 0.243 264.376); /* --color-blue-700 */\n  --sidebar-primary-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --sidebar-accent: oklch(0.269 0 0); /* --color-neutral-800 */\n  --sidebar-accent-foreground: oklch(0.985 0 0); /* --color-zinc-50 */\n  --sidebar-border: oklch(0.274 0.006 286.033); /* --color-zinc-800 */\n  --sidebar-ring: oklch(0.442 0.017 285.786); /* --color-zinc-600 */\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}\n\n/* originui css below */\n\n@theme inline {\n  --font-heading: var(--font-heading);\n  --font-mono:\n    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n    \"Courier New\", monospace;\n}\n\n@layer base {\n  /* Custom scrollbar styling. Thanks @pranathiperii. */\n  pre::-webkit-scrollbar {\n    width: 5px;\n  }\n  pre::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  pre::-webkit-scrollbar-thumb {\n    background: var(--border);\n    border-radius: 5px;\n  }\n  pre {\n    scrollbar-width: thin;\n    scrollbar-color: var(--border) transparent;\n  }\n}\n"
  },
  {
    "path": "apps/origin/app/layout.tsx",
    "content": "import type { Metadata, Viewport } from \"next\";\nimport { Cal_Sans as FontHeading, Inter as FontSans } from \"next/font/google\";\nimport { Toaster as Sonner } from \"@/registry/default/ui/sonner\";\nimport { Toaster } from \"@/registry/default/ui/toaster\";\nimport Footer from \"@/components/footer\";\nimport Header from \"@/components/header\";\nimport { ThemeProvider } from \"@/components/theme-provider\";\nimport TopBanner from \"@/components/top-banner\";\n\nimport \"./globals.css\";\n\nconst fontSans = FontSans({\n  subsets: [\"latin\"],\n  variable: \"--font-sans\",\n});\n\nconst fontHeading = FontHeading({\n  subsets: [\"latin\"],\n  variable: \"--font-heading\",\n  weight: \"400\",\n});\n\nexport const viewport: Viewport = {\n  initialScale: 1,\n  maximumScale: 1,\n  viewportFit: \"cover\",\n  width: \"device-width\",\n};\n\nexport const metadata: Metadata = {\n  description:\n    \"An extensive collection of copy-and-paste components for quickly building app UIs. Free, open-source, and ready to drop into your projects.\",\n  metadataBase: new URL(\"https://coss.com\"),\n  title:\n    \"coss.com origin - Beautiful UI components built with Tailwind CSS and React\",\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={`${fontSans.variable} ${fontHeading.variable} font-sans tracking-[-0.25px] antialiased`}\n      >\n        <ThemeProvider\n          attribute=\"class\"\n          defaultTheme=\"system\"\n          disableTransitionOnChange\n          enableSystem\n        >\n          <TopBanner />\n          <div className=\"overflow-hidden px-4 has-data-home:bg-zinc-50 has-not-data-home:before:absolute has-not-data-home:before:inset-x-0 has-not-data-home:before:h-100 has-not-data-home:before:bg-linear-to-b has-not-data-home:before:from-zinc-100 supports-[overflow:clip]:overflow-clip sm:px-6 dark:has-data-home:bg-zinc-950 dark:has-not-data-home:before:hidden\">\n            <div className=\"relative mx-auto w-full max-w-6xl before:absolute before:inset-y-0 before:-left-12 before:w-px before:bg-[linear-gradient(to_bottom,--theme(--color-border/.3),--theme(--color-border)_200px,--theme(--color-border)_calc(100%-200px),--theme(--color-border/.3))] after:absolute after:inset-y-0 after:-right-12 after:w-px after:bg-[linear-gradient(to_bottom,--theme(--color-border/.3),--theme(--color-border)_200px,--theme(--color-border)_calc(100%-200px),--theme(--color-border/.3))]\">\n              <div className=\"relative flex min-h-screen flex-col\">\n                <Header />\n                <main className=\"grow\">{children}</main>\n                <Footer />\n              </div>\n            </div>\n          </div>\n          <Toaster />\n          <Sonner />\n        </ThemeProvider>\n      </body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/not-found.tsx",
    "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport PageHeader from \"@/components/page-header\";\n\nexport default function NotFound() {\n  return (\n    <>\n      <PageHeader className=\"mb-6\" title=\"404\">\n        The page you&apos;re looking for does not exist or is no longer here.\n      </PageHeader>\n      <div className=\"text-center\">\n        <Button asChild className=\"rounded-full\">\n          <Link href=\"/origin\">Browse components</Link>\n        </Button>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/page.tsx",
    "content": "import Image from \"next/image\";\nimport Link from \"next/link\";\nimport SearchButton from \"@/components/search-button\";\nimport { SubscribeBottom } from \"@/components/subscribe-form\";\nimport { categories } from \"@/config/components\";\n\nexport default function Page() {\n  return (\n    <div data-home>\n      <div className=\"max-w-3xl max-sm:text-center\">\n        <h1 className=\"mb-4 font-heading text-4xl/[1.1] text-foreground md:text-5xl/[1.1]\">\n          Beautiful UI components built with Tailwind CSS and React.\n        </h1>\n        <p className=\"mb-8 text-lg text-muted-foreground\">\n          An open-source collection of copy-and-paste components for quickly\n          build application UIs.\n        </p>\n        <SearchButton />\n      </div>\n\n      <div className=\"relative my-16\">\n        <div className=\"grid gap-x-6 gap-y-12 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4\">\n          {categories\n            .sort((a, b) => {\n              if (a.isNew && !b.isNew) return -1;\n              if (!a.isNew && b.isNew) return 1;\n              return 0;\n            })\n            .map((category) => (\n              <CategoryCard\n                componentsCount={category.components.length}\n                isNew={category.isNew}\n                key={category.slug}\n                name={category.name}\n                slug={category.slug}\n              />\n            ))}\n        </div>\n      </div>\n\n      <SubscribeBottom />\n    </div>\n  );\n}\n\ntype CategoryCardProps = {\n  slug: string;\n  name: string;\n  componentsCount?: number;\n  isNew?: boolean;\n};\n\nfunction CategoryCard({\n  slug,\n  name,\n  componentsCount,\n  isNew = false,\n}: CategoryCardProps) {\n  const href = `/${slug}`;\n  const imageBasePath = `/origin/thumbs/${slug}`;\n  const alt = `${name} components`;\n  const isComingSoon = componentsCount === undefined;\n\n  return (\n    <div className=\"space-y-3 text-center\">\n      {isComingSoon ? (\n        <div className=\"relative inline-flex overflow-hidden rounded-xl border sm:flex dark:border-zinc-700/80\">\n          <svg\n            className=\"absolute top-5 right-5 z-10 text-zinc-400 dark:text-zinc-500\"\n            fill=\"currentColor\"\n            height=\"13\"\n            width=\"27\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <title>Coming Soon</title>\n            <path d=\"M21.74 12.504c-.27 0-.461-.088-.573-.266-.112-.177-.168-.48-.168-.91 0-.345.042-.774.126-1.288.093-.513.205-1.078.336-1.694.13-.625.266-1.27.406-1.932-.57.775-1.2 1.396-1.89 1.862a5.728 5.728 0 0 1-2.268.896c-.196.458-.42.873-.672 1.246a3.67 3.67 0 0 1-.826.896c-.299.224-.612.336-.938.336-.402 0-.742-.163-1.022-.49-.27-.326-.406-.802-.406-1.428 0-.43.056-.812.168-1.148.112-.345.238-.592.378-.742a3.35 3.35 0 0 1-.196-1.19c0-.55.126-1.036.378-1.456.252-.43.588-.76 1.008-.994.42-.242.872-.364 1.358-.364.392 0 .742.182 1.05.546.308.364.462.887.462 1.568 0 .635-.112 1.34-.336 2.114a5.983 5.983 0 0 0 1.54-.896 10.364 10.364 0 0 0 1.512-1.442c.485-.56.924-1.18 1.316-1.862a.483.483 0 0 1 .434-.252c.168 0 .298.052.392.154a.503.503 0 0 1 .154.392c0 .047-.028.206-.084.476-.047.27-.112.616-.196 1.036-.075.42-.159.882-.252 1.386-.094.504-.187 1.013-.28 1.526-.084.514-.154.99-.21 1.428a57.095 57.095 0 0 1 1.554-2.772c.29-.476.564-.91.826-1.302.27-.392.508-.704.714-.938.214-.242.382-.364.504-.364.224 0 .42.075.588.224.168.15.252.304.252.462 0 .215-.024.542-.07.98-.047.43-.103.915-.168 1.456l-.196 1.624a106.6 106.6 0 0 0-.168 1.47c-.047.439-.07.766-.07.98 0 .14-.06.266-.182.378a.584.584 0 0 1-.406.168.391.391 0 0 1-.266-.098c-.066-.056-.117-.186-.154-.392-.038-.205-.056-.522-.056-.952 0-.42.014-.877.042-1.372a39.09 39.09 0 0 1 .112-1.498 27.3 27.3 0 0 1 .182-1.358c-.215.355-.462.78-.742 1.274-.27.495-.556 1.004-.854 1.526a56.588 56.588 0 0 1-.868 1.47c-.28.458-.532.826-.756 1.106-.224.28-.397.42-.518.42Z\" />\n          </svg>\n          <ImageComponent alt={alt} imageBasePath={imageBasePath} />\n        </div>\n      ) : (\n        <Link\n          className=\"peer relative inline-flex overflow-hidden rounded-xl border sm:flex dark:border-zinc-700/80\"\n          href={href}\n          tabIndex={-1}\n        >\n          {isNew && (\n            <svg\n              className=\"absolute top-5 left-5 z-10 text-zinc-950 dark:text-zinc-200\"\n              fill=\"currentColor\"\n              height=\"13\"\n              width=\"29\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <title>New</title>\n              <path d=\"M18.805 12.406c-.326 0-.597-.145-.811-.434-.206-.299-.308-.826-.308-1.582 0-.793.014-1.563.041-2.31.029-.756.08-1.433.154-2.03.084-.597.197-1.073.337-1.428s.322-.532.546-.532c.158 0 .298.089.42.266.12.168.181.392.181.672 0 .29-.027.677-.083 1.162a46.698 46.698 0 0 1-.21 1.568c-.075.55-.14 1.087-.197 1.61-.055.513-.084.947-.084 1.302 0 .15.005.27.014.364.02.084.047.126.085.126.14 0 .289-.121.447-.364a7.49 7.49 0 0 0 .532-.98c.187-.41.383-.859.588-1.344.206-.495.416-.985.63-1.47.215-.485.434-.929.659-1.33.224-.41.448-.737.672-.98.224-.252.443-.378.658-.378.252 0 .485.121.7.364.224.233.335.57.335 1.008 0 .13-.018.36-.056.686a60.22 60.22 0 0 1-.14 1.092l-.168 1.232c-.055.401-.102.76-.14 1.078a6.3 6.3 0 0 0-.055.658c0 .485.046.728.14.728.26 0 .536-.164.825-.49a7.67 7.67 0 0 0 .896-1.288c.308-.532.612-1.106.91-1.722l.883-1.792c.13-.299.238-.5.322-.602.093-.112.186-.168.28-.168.13 0 .252.07.364.21.12.14.181.331.181.574 0 .084-.004.168-.014.252-.009.075-.032.159-.07.252-.317.84-.657 1.62-1.021 2.338-.364.71-.738 1.33-1.12 1.862-.374.522-.742.933-1.107 1.232-.364.29-.7.434-1.008.434-.532 0-.947-.15-1.246-.448-.289-.308-.433-.719-.433-1.232 0-.215.014-.495.041-.84.038-.345.08-.719.127-1.12.056-.401.111-.789.168-1.162.055-.373.102-.7.14-.98.046-.28.074-.471.084-.574.009-.13-.005-.196-.042-.196-.038 0-.113.121-.224.364-.103.233-.23.532-.378.896-.14.355-.29.723-.448 1.106-.178.42-.383.882-.616 1.386-.224.495-.467.966-.729 1.414a5.366 5.366 0 0 1-.797 1.106c-.28.29-.565.434-.855.434Z\" />\n              <path d=\"M16.554 5.966c0 .299-.094.593-.28.882-.187.28-.434.55-.742.812-.308.252-.649.49-1.022.714-.374.224-.747.42-1.12.588-.374.168-.714.303-1.022.406a4.88 4.88 0 0 0-.112.966c0 .177.042.303.126.378.084.075.214.112.392.112.392 0 .807-.07 1.246-.21.438-.14.886-.322 1.344-.546.457-.224.896-.462 1.316-.714.42-.252.802-.49 1.148-.714.354-.224.648-.406.882-.546.233-.14.387-.21.462-.21.112 0 .196.037.252.112a.324.324 0 0 1 .098.238c0 .075-.117.22-.35.434-.224.215-.528.467-.91.756-.383.28-.812.57-1.288.868-.476.299-.97.579-1.484.84-.504.261-.994.471-1.47.63-.467.159-.887.238-1.26.238-.486 0-.864-.182-1.134-.546-.27-.364-.406-.929-.406-1.694 0-.513.065-1.031.196-1.554.14-.523.326-1.022.56-1.498a7.77 7.77 0 0 1 .798-1.288c.298-.383.611-.681.938-.896.326-.224.644-.336.952-.336.588 0 1.05.163 1.386.49.336.327.504.756.504 1.288ZM12.662 8.29c.29-.177.588-.364.896-.56.308-.196.592-.397.854-.602.261-.205.471-.42.63-.644a1.21 1.21 0 0 0 .252-.714c0-.345-.187-.518-.56-.518-.234 0-.48.15-.742.448-.252.29-.495.667-.728 1.134-.234.467-.434.952-.602 1.456ZM7.326 12.84a.664.664 0 0 1-.518-.238c-.13-.159-.196-.42-.196-.784 0-.121.014-.252.042-.392.028-.15.08-.299.154-.448a35.616 35.616 0 0 1-1.176-3.374 36.19 36.19 0 0 1-.812-3.43 32.977 32.977 0 0 0-.854 1.918A88.035 88.035 0 0 0 2.594 9.76c-.187.541-.35 1.008-.49 1.4-.15.467-.299.78-.448.938-.15.168-.304.252-.462.252-.215 0-.378-.051-.49-.154C.6 12.093.55 11.911.55 11.65c0-.196.051-.5.154-.91.102-.41.242-.887.42-1.428.186-.541.396-1.11.63-1.708.233-.597.48-1.18.742-1.75.27-.57.541-1.083.812-1.54.27-.467.527-.835.77-1.106.252-.28.48-.42.686-.42.214 0 .396.042.546.126.158.084.331.303.518.658.121.243.261.597.42 1.064.158.457.317.975.476 1.554.158.57.312 1.157.462 1.764.15.597.28 1.153.392 1.666l.98-4.536c.28-1.307.494-2.329.644-3.066.158-.737.242-1.125.252-1.162.056-.243.116-.392.182-.448a.418.418 0 0 1 .28-.084c.168 0 .331.07.49.21.168.13.252.313.252.546 0 .112-.028.369-.084.77-.047.401-.121.905-.224 1.512a45.805 45.805 0 0 1-.364 2.002 58.78 58.78 0 0 1-.518 2.282 41.448 41.448 0 0 1-.658 2.338c-.234.765-.49 1.489-.77 2.17-.103.261-.224.439-.364.532-.13.103-.248.154-.35.154Z\" />\n            </svg>\n          )}\n          <ImageComponent alt={alt} imageBasePath={imageBasePath} />\n        </Link>\n      )}\n      <div className=\"[&_a]:peer-hover:underline\">\n        <h2>\n          {!isComingSoon ? (\n            <Link className=\"font-medium text-sm hover:underline\" href={href}>\n              {name}\n            </Link>\n          ) : (\n            <span className=\"font-medium text-sm\">{name}</span>\n          )}\n        </h2>\n        <p className=\"text-[13px] text-muted-foreground\">\n          {!isComingSoon\n            ? `${componentsCount} ${componentsCount === 1 ? \"Component\" : \"Components\"}`\n            : \"-\"}\n        </p>\n      </div>\n    </div>\n  );\n}\n\ntype ImageComponentProps = {\n  imageBasePath: string;\n  alt: string;\n};\n\nfunction ImageComponent({ imageBasePath, alt }: ImageComponentProps) {\n  return (\n    <>\n      <Image\n        alt={alt}\n        className=\"w-full dark:hidden\"\n        height={198}\n        src={`${imageBasePath}.png`}\n        width={268}\n      />\n      <Image\n        alt={`${alt} dark`}\n        className=\"hidden w-full dark:block\"\n        height={198}\n        src={`${imageBasePath}-dark.png`}\n        width={268}\n      />\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/search/components-container.tsx",
    "content": "\"use client\";\n\nimport { useSearchParams } from \"next/navigation\";\nimport { useCallback, useMemo } from \"react\";\nimport type { RegistryItem } from \"shadcn/registry\";\nimport type { RegistryTag } from \"@/registry/registry-tags\";\nimport SearchField from \"./search-field\";\nimport ComponentCard from \"@/components/component-card\";\nimport ComponentDetails from \"@/components/component-details\";\nimport ComponentLoader from \"@/components/component-loader-client\";\nimport PageGrid from \"@/components/page-grid\";\nimport { getComponents } from \"@/lib/utils\";\n\nexport default function ComponentsContainer() {\n  const searchParams = useSearchParams();\n  const tags = useMemo(() => {\n    return (searchParams\n      ?.get(\"tags\")\n      ?.split(\",\")\n      .filter(Boolean)\n      .map((tag) => tag.replace(/\\+/g, \" \")) || []) as RegistryTag[];\n  }, [searchParams]);\n\n  const filtered = useMemo(() => {\n    if (!tags.length) return [];\n    return getComponents(tags);\n  }, [tags]);\n\n  const updateTags = useCallback((newTags: string[]) => {\n    const url = new URL(window.location.href);\n    if (newTags.length > 0) {\n      const formattedTags = newTags\n        .map((tag) => tag.replace(/\\s+/g, \"+\"))\n        .join(\",\");\n      url.searchParams.set(\"tags\", formattedTags);\n    } else {\n      url.searchParams.delete(\"tags\");\n    }\n    window.history.replaceState({}, \"\", url.toString());\n  }, []);\n\n  return (\n    <div className=\"space-y-4\">\n      <SearchField onTagChange={updateTags} selectedTags={tags} />\n      <PageGrid>\n        {filtered.map((component: RegistryItem) => (\n          <ComponentCard\n            component={component}\n            isSearchPage\n            key={component.name}\n          >\n            <ComponentLoader component={component} />\n            <ComponentDetails component={component} />\n          </ComponentCard>\n        ))}\n        {tags.length > 0 && filtered.length === 0 && (\n          <div className=\"col-span-full py-8 text-center\">\n            <p className=\"text-muted-foreground\">\n              No components found for the selected tags.\n            </p>\n          </div>\n        )}\n      </PageGrid>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/search/multiselect.tsx",
    "content": "\"use client\";\n\nimport { RiCloseCircleFill, RiCloseLine } from \"@remixicon/react\";\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\nimport * as React from \"react\";\nimport { useEffect } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Command,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport interface Option {\n  value: string;\n  label: string;\n  disable?: boolean;\n  /** fixed option that can't be removed. */\n  fixed?: boolean;\n  /** Group the options by providing key. */\n  [key: string]: string | boolean | undefined;\n}\ninterface GroupOption {\n  [key: string]: Option[];\n}\n\ninterface MultipleSelectorProps {\n  value?: Option[];\n  defaultOptions?: Option[];\n  /** manually controlled options */\n  options?: Option[];\n  placeholder?: string;\n  /** Loading component. */\n  loadingIndicator?: React.ReactNode;\n  /** Empty component. */\n  emptyIndicator?: React.ReactNode;\n  /** Debounce time for async search. Only work with `onSearch`. */\n  delay?: number;\n  /**\n   * Only work with `onSearch` prop. Trigger search when `onFocus`.\n   * For example, when user click on the input, it will trigger the search to get initial options.\n   **/\n  triggerSearchOnFocus?: boolean;\n  /** async search */\n  onSearch?: (value: string) => Promise<Option[]>;\n  /**\n   * sync search. This search will not showing loadingIndicator.\n   * The rest props are the same as async search.\n   * i.e.: creatable, groupBy, delay.\n   **/\n  onSearchSync?: (value: string) => Option[];\n  onChange?: (options: Option[]) => void;\n  /** Limit the maximum number of selected options. */\n  maxSelected?: number;\n  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */\n  onMaxSelected?: (maxLimit: number) => void;\n  /** Hide the placeholder when there are options selected. */\n  hidePlaceholderWhenSelected?: boolean;\n  disabled?: boolean;\n  /** Group the options base on provided key. */\n  groupBy?: string;\n  className?: string;\n  badgeClassName?: string;\n  /**\n   * First item selected is a default behavior by cmdk. That is why the default is true.\n   * This is a workaround solution by add a dummy item.\n   *\n   * @reference: https://github.com/pacocoursey/cmdk/issues/171\n   */\n  selectFirstItem?: boolean;\n  /** Allow user to create option when there is no option matched. */\n  creatable?: boolean;\n  /** Props of `Command` */\n  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;\n  /** Props of `CommandInput` */\n  inputProps?: Omit<\n    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,\n    \"value\" | \"placeholder\" | \"disabled\"\n  >;\n  /** hide the clear all button. */\n  hideClearAllButton?: boolean;\n}\n\nexport interface MultipleSelectorRef {\n  selectedValue: Option[];\n  input: HTMLInputElement;\n  focus: () => void;\n  reset: () => void;\n}\n\nexport function useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: Option[], groupBy?: string) {\n  if (options.length === 0) {\n    return {};\n  }\n  if (!groupBy) {\n    return {\n      \"\": options,\n    };\n  }\n\n  const groupOption: GroupOption = {};\n  for (const option of options) {\n    const key = (option[groupBy] as string) || \"\";\n    if (!groupOption[key]) {\n      groupOption[key] = [];\n    }\n    groupOption[key].push(option);\n  }\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, picked: Option[]) {\n  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;\n\n  for (const [key, value] of Object.entries(cloneOption)) {\n    cloneOption[key] = value.filter(\n      (val) => !picked.find((p) => p.value === val.value),\n    );\n  }\n  return cloneOption;\n}\n\nfunction isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {\n  for (const [, value] of Object.entries(groupOption)) {\n    if (\n      value.some((option) => targetOption.find((p) => p.value === option.value))\n    ) {\n      return true;\n    }\n  }\n  return false;\n}\n\nconst CommandEmpty = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const render = useCommandState((state) => state.filtered.count === 0);\n\n  if (!render) return null;\n\n  return (\n    <div\n      className={cn(\"px-2 py-4 text-center text-sm\", className)}\n      role=\"presentation\"\n      {...props}\n    />\n  );\n};\n\nconst MultipleSelector = ({\n  value,\n  onChange,\n  placeholder,\n  defaultOptions: arrayDefaultOptions = [],\n  options: arrayOptions,\n  delay,\n  onSearch,\n  onSearchSync,\n  loadingIndicator,\n  emptyIndicator,\n  maxSelected = Number.MAX_SAFE_INTEGER,\n  onMaxSelected,\n  hidePlaceholderWhenSelected,\n  disabled,\n  groupBy,\n  className,\n  badgeClassName,\n  selectFirstItem = true,\n  creatable = false,\n  triggerSearchOnFocus = false,\n  commandProps,\n  inputProps,\n  hideClearAllButton = false,\n}: MultipleSelectorProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [open, setOpen] = React.useState(false);\n  const [onScrollbar, setOnScrollbar] = React.useState(false);\n  const [isLoading, setIsLoading] = React.useState(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (inputProps?.autoFocus) {\n      inputRef.current?.focus();\n      setOpen(true);\n    }\n  }, [inputProps?.autoFocus]);\n\n  const [selected, setSelected] = React.useState<Option[]>(value || []);\n  const [options, setOptions] = React.useState<GroupOption>(\n    transToGroupOption(arrayDefaultOptions, groupBy),\n  );\n  const [inputValue, setInputValue] = React.useState(\"\");\n  const debouncedSearchTerm = useDebounce(inputValue, delay || 500);\n\n  const handleClickOutside = React.useCallback(\n    (event: MouseEvent | TouchEvent) => {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node) &&\n        inputRef.current &&\n        !inputRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n        inputRef.current.blur();\n      }\n    },\n    [],\n  );\n\n  const handleUnselect = React.useCallback(\n    (option: Option) => {\n      const newOptions = selected.filter((s) => s.value !== option.value);\n      setSelected(newOptions);\n      onChange?.(newOptions);\n      if (newOptions.length > 0) {\n        setOpen(false);\n        inputRef.current?.blur();\n      } else {\n        setOpen(true);\n        inputRef.current?.focus();\n      }\n    },\n    [onChange, selected],\n  );\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const input = inputRef.current;\n      if (input) {\n        if (e.key === \"Delete\" || e.key === \"Backspace\") {\n          if (input.value === \"\" && selected.length > 0) {\n            const lastSelectOption = selected[selected.length - 1];\n            // If last item is fixed, we should not remove it.\n            if (!lastSelectOption.fixed) {\n              handleUnselect(selected[selected.length - 1]);\n            }\n          }\n        }\n        // This is not a default behavior of the <input /> field\n        if (e.key === \"Escape\") {\n          input.blur();\n        }\n      }\n    },\n    [handleUnselect, selected],\n  );\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      document.addEventListener(\"touchend\", handleClickOutside);\n    } else {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"touchend\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"touchend\", handleClickOutside);\n    };\n  }, [open, handleClickOutside]);\n\n  useEffect(() => {\n    if (value) {\n      setSelected(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    /** If `onSearch` is provided, do not trigger options updated. */\n    if (!arrayOptions || onSearch) {\n      return;\n    }\n    const newOption = transToGroupOption(arrayOptions || [], groupBy);\n    if (JSON.stringify(newOption) !== JSON.stringify(options)) {\n      setOptions(newOption);\n    }\n  }, [arrayOptions, groupBy, onSearch, options]);\n\n  useEffect(() => {\n    /** sync search */\n\n    const doSearchSync = () => {\n      const res = onSearchSync?.(debouncedSearchTerm);\n      setOptions(transToGroupOption(res || [], groupBy));\n    };\n\n    const exec = async () => {\n      if (!onSearchSync || !open) return;\n\n      if (triggerSearchOnFocus) {\n        doSearchSync();\n      }\n\n      if (debouncedSearchTerm) {\n        doSearchSync();\n      }\n    };\n\n    void exec();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearchSync]);\n\n  useEffect(() => {\n    /** async search */\n\n    const doSearch = async () => {\n      setIsLoading(true);\n      const res = await onSearch?.(debouncedSearchTerm);\n      setOptions(transToGroupOption(res || [], groupBy));\n      setIsLoading(false);\n    };\n\n    const exec = async () => {\n      if (!onSearch || !open) return;\n\n      if (triggerSearchOnFocus) {\n        await doSearch();\n      }\n\n      if (debouncedSearchTerm) {\n        await doSearch();\n      }\n    };\n\n    void exec();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\n\n  const CreatableItem = () => {\n    if (!creatable) return undefined;\n    if (\n      isOptionsExist(options, [{ label: inputValue, value: inputValue }]) ||\n      selected.find((s) => s.value === inputValue)\n    ) {\n      return undefined;\n    }\n\n    const Item = (\n      <CommandItem\n        className=\"cursor-pointer\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onSelect={(value: string) => {\n          if (selected.length >= maxSelected) {\n            onMaxSelected?.(selected.length);\n            return;\n          }\n          setInputValue(\"\");\n          const newOptions = [...selected, { label: value, value }];\n          setSelected(newOptions);\n          onChange?.(newOptions);\n          setOpen(false);\n          inputRef.current?.blur();\n        }}\n        value={inputValue}\n      >\n        {`Create \"${inputValue}\"`}\n      </CommandItem>\n    );\n\n    // For normal creatable\n    if (!onSearch && inputValue.length > 0) {\n      return Item;\n    }\n\n    // For async search creatable. avoid showing creatable item before loading at first.\n    if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {\n      return Item;\n    }\n\n    return undefined;\n  };\n\n  const EmptyItem = React.useCallback(() => {\n    if (!emptyIndicator) return undefined;\n\n    // For async search that showing emptyIndicator\n    if (onSearch && !creatable && Object.keys(options).length === 0) {\n      return (\n        <CommandItem disabled value=\"-\">\n          {emptyIndicator}\n        </CommandItem>\n      );\n    }\n\n    return <CommandEmpty>{emptyIndicator}</CommandEmpty>;\n  }, [creatable, emptyIndicator, onSearch, options]);\n\n  const selectables = React.useMemo<GroupOption>(\n    () => removePickedOption(options, selected),\n    [options, selected],\n  );\n\n  /** Avoid Creatable Selector freezing or lagging when paste a long string. */\n  const commandFilter = React.useCallback(() => {\n    if (commandProps?.filter) {\n      return commandProps.filter;\n    }\n\n    if (creatable) {\n      return (value: string, search: string) => {\n        return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;\n      };\n    }\n    // Using default filter in `cmdk`. We don&lsquo;t have to provide it.\n    return undefined;\n  }, [creatable, commandProps?.filter]);\n\n  return (\n    <Command\n      ref={dropdownRef}\n      {...commandProps}\n      className={cn(\n        \"h-auto overflow-visible bg-transparent\",\n        commandProps?.className,\n      )}\n      filter={commandFilter()}\n      onKeyDown={(e) => {\n        handleKeyDown(e);\n        commandProps?.onKeyDown?.(e);\n      }} // When onSearch is provided, we don&lsquo;t want to filter the options. You can still override it.\n      shouldFilter={\n        commandProps?.shouldFilter !== undefined\n          ? commandProps.shouldFilter\n          : !onSearch\n      }\n    >\n      <div\n        className={cn(\n          \"relative min-h-[46px] rounded-md border border-input text-sm outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n          {\n            \"cursor-text\": !disabled && selected.length !== 0,\n            \"p-2\": selected.length !== 0,\n          },\n          !hideClearAllButton && \"pe-10\",\n          className,\n        )}\n        onClick={() => {\n          if (disabled) return;\n          inputRef?.current?.focus();\n        }}\n      >\n        <div className=\"flex flex-wrap gap-1\">\n          {selected.map((option) => {\n            return (\n              <div\n                className={cn(\n                  \"relative inline-flex h-7 animate-fadeIn cursor-default items-center rounded-md border bg-background ps-2 pe-7 pl-2 font-medium text-secondary-foreground text-xs transition-all hover:bg-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-fixed:pe-2 dark:border-zinc-700 dark:bg-zinc-700/50\",\n                  badgeClassName,\n                )}\n                data-disabled={disabled || undefined}\n                data-fixed={option.fixed}\n                key={option.value}\n              >\n                {option.label}\n                <button\n                  aria-label=\"Remove\"\n                  className=\"absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-md border border-transparent p-0 text-muted-foreground/80 outline-none outline-hidden transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    handleUnselect(option);\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Enter\") {\n                      handleUnselect(option);\n                    }\n                  }}\n                  onMouseDown={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                  }}\n                  type=\"button\"\n                >\n                  <RiCloseLine aria-hidden=\"true\" size={16} />\n                </button>\n              </div>\n            );\n          })}\n          {/* Avoid having the \"Search\" Icon */}\n          <CommandPrimitive.Input\n            {...inputProps}\n            className={cn(\n              \"flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed\",\n              {\n                \"ml-1\": selected.length !== 0,\n                \"py-3 pe-3\": selected.length === 0,\n                \"w-full\": hidePlaceholderWhenSelected,\n              },\n              inputProps?.className,\n            )}\n            disabled={disabled}\n            onBlur={(event) => {\n              if (!onScrollbar) {\n                setOpen(false);\n              }\n              inputProps?.onBlur?.(event);\n            }}\n            onFocus={(event) => {\n              setOpen(true);\n              if (triggerSearchOnFocus) {\n                onSearch?.(debouncedSearchTerm);\n              }\n              inputProps?.onFocus?.(event);\n            }}\n            onValueChange={(value) => {\n              setInputValue(value);\n              inputProps?.onValueChange?.(value);\n            }}\n            placeholder={\n              hidePlaceholderWhenSelected && selected.length !== 0\n                ? \"\"\n                : placeholder\n            }\n            ref={inputRef}\n            value={inputValue}\n          />\n          <button\n            aria-label=\"Clear all\"\n            className={cn(\n              \"absolute end-0 top-0.5 flex size-10 items-center justify-center rounded-md border border-transparent text-muted-foreground/70 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n              (hideClearAllButton ||\n                disabled ||\n                selected.length < 1 ||\n                selected.filter((s) => s.fixed).length === selected.length) &&\n                \"hidden\",\n            )}\n            onClick={() => {\n              setSelected(selected.filter((s) => s.fixed));\n              onChange?.(selected.filter((s) => s.fixed));\n            }}\n            type=\"button\"\n          >\n            <RiCloseCircleFill aria-hidden=\"true\" size={20} />\n          </button>\n        </div>\n      </div>\n      <div className=\"relative\">\n        <div\n          className={cn(\n            \"absolute top-2 z-9999 w-full overflow-hidden rounded-md border border-input shadow-lg\",\n            \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            !open && \"hidden\",\n          )}\n          data-state={open ? \"open\" : \"closed\"}\n        >\n          {open && (\n            <CommandList\n              className=\"max-h-none overflow-visible bg-popover text-popover-foreground outline-hidden\"\n              onMouseEnter={() => {\n                setOnScrollbar(true);\n              }}\n              onMouseLeave={() => {\n                setOnScrollbar(false);\n              }}\n              onMouseUp={() => {\n                inputRef?.current?.focus();\n              }}\n            >\n              {isLoading ? (\n                loadingIndicator\n              ) : (\n                <>\n                  {EmptyItem()}\n                  {CreatableItem()}\n                  {!selectFirstItem && (\n                    <CommandItem className=\"hidden\" value=\"-\" />\n                  )}\n                  {Object.entries(selectables).map(([key, dropdowns]) => (\n                    <ScrollArea className=\"*:max-h-48 sm:*:max-h-80\" key={key}>\n                      <CommandGroup\n                        className=\"px-0 py-1 dark:bg-zinc-900\"\n                        heading={key}\n                      >\n                        {dropdowns.map((option) => {\n                          return (\n                            <CommandItem\n                              className={cn(\n                                \"cursor-pointer rounded-none px-4 py-2 data-[selected=true]:bg-zinc-50 dark:data-[selected=true]:bg-zinc-800/50\",\n                                option.disable &&\n                                  \"pointer-events-none cursor-not-allowed opacity-50\",\n                              )}\n                              disabled={option.disable}\n                              key={option.value}\n                              onMouseDown={(e) => {\n                                e.preventDefault();\n                                e.stopPropagation();\n                              }}\n                              onSelect={() => {\n                                if (selected.length >= maxSelected) {\n                                  onMaxSelected?.(selected.length);\n                                  return;\n                                }\n                                setInputValue(\"\");\n                                const newOptions = [...selected, option];\n                                setSelected(newOptions);\n                                onChange?.(newOptions);\n                                setOpen(false);\n                                inputRef.current?.blur();\n                              }}\n                              value={option.value}\n                            >\n                              {option.label}\n                            </CommandItem>\n                          );\n                        })}\n                      </CommandGroup>\n                    </ScrollArea>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          )}\n        </div>\n      </div>\n    </Command>\n  );\n};\n\nMultipleSelector.displayName = \"MultipleSelector\";\nexport default MultipleSelector;\n"
  },
  {
    "path": "apps/origin/app/search/page.tsx",
    "content": "import type { Metadata } from \"next\";\nimport { Suspense } from \"react\";\nimport ComponentsContainer from \"./components-container\";\nimport PageHeader from \"@/components/page-header\";\n\nexport const metadata: Metadata = {\n  description: \"Search for components in the UI library.\",\n  title: \"Search a UI component\",\n};\n\nexport default function Page() {\n  return (\n    <>\n      <PageHeader className=\"mb-10\" title=\"Search component\">\n        Use this page to quickly find a component (e.g., multiselect, vertical\n        slider, etc.)\n      </PageHeader>\n      <Suspense>\n        <ComponentsContainer />\n      </Suspense>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/search/search-field.tsx",
    "content": "\"use client\";\n\nimport { RiSearch2Line } from \"@remixicon/react\";\nimport { useState } from \"react\";\nimport type { RegistryTag } from \"@/registry/registry-tags\";\nimport { registryTags } from \"@/registry/registry-tags\";\nimport MultipleSelector, { type Option } from \"./multiselect\";\nimport { getAvailableTags } from \"@/lib/utils\";\n\ninterface SearchFieldProps {\n  selectedTags: string[];\n  onTagChange: (tags: string[]) => void;\n}\n\nconst baseOptions: Option[] = registryTags.map((tag) => ({\n  label: tag,\n  value: tag,\n}));\n\nexport default function SearchField({\n  selectedTags,\n  onTagChange,\n}: SearchFieldProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const handleMultipleSelectorChange = (selected: Option[]) => {\n    const newTags = selected.map((tag) => tag.value as RegistryTag);\n    onTagChange(newTags);\n    setInputValue(\"\"); // Reset the search input after selection\n  };\n\n  const selectedOptions = selectedTags\n    .map((tag) => baseOptions.find((option) => option.value === tag))\n    .filter((option): option is Option => !!option);\n\n  const getFilteredOptions = () => {\n    if (selectedTags.length === 0) {\n      return baseOptions.map((option) => ({\n        ...option,\n        label: `${option.value}`,\n      }));\n    }\n\n    const availableTags = getAvailableTags(selectedTags as RegistryTag[]);\n\n    return baseOptions\n      .map((option) => ({\n        ...option,\n        disable:\n          !selectedTags.includes(option.value) &&\n          !availableTags.includes(option.value as RegistryTag),\n        label: `${option.value}`,\n      }))\n      .sort((a, b) => {\n        // Selected tags first\n        if (selectedTags.includes(a.value) && !selectedTags.includes(b.value))\n          return -1;\n        if (!selectedTags.includes(a.value) && selectedTags.includes(b.value))\n          return 1;\n\n        // Then available tags\n        const aAvailable = !a.disable;\n        const bAvailable = !b.disable;\n        if (aAvailable && !bAvailable) return -1;\n        if (!aAvailable && bAvailable) return 1;\n\n        // Keep original order\n        return 0;\n      });\n  };\n\n  return (\n    <div className=\"mx-auto max-w-2xl\">\n      <div className=\"relative\">\n        <MultipleSelector\n          className=\"w-full rounded-xl border-border bg-zinc-200/40 ps-[52px] dark:bg-zinc-900\"\n          commandProps={{\n            label: \"Search components\",\n            shouldFilter: false,\n          }}\n          defaultOptions={baseOptions}\n          emptyIndicator={<p className=\"text-center text-sm\">No tags found</p>}\n          hidePlaceholderWhenSelected\n          inputProps={{\n            autoFocus: selectedTags.length === 0,\n            onValueChange: (v) => {\n              setInputValue(v);\n              return v;\n            },\n          }}\n          onChange={handleMultipleSelectorChange}\n          options={getFilteredOptions().filter(\n            (option) =>\n              !inputValue ||\n              option.value.toLowerCase().includes(inputValue.toLowerCase()),\n          )}\n          value={selectedOptions}\n        />\n        <div\n          aria-label=\"Search component\"\n          className=\"pointer-events-none absolute inset-y-0 start-0 flex items-start justify-center ps-4 pt-2.5 text-muted-foreground\"\n        >\n          <RiSearch2Line aria-hidden=\"true\" size={24} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/app/sitemap.ts",
    "content": "import type { MetadataRoute } from \"next\";\nimport { categories } from \"@/config/components\";\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n  const home = {\n    url: \"https://coss.com/origin\",\n  };\n  const search = {\n    url: \"https://coss.com/origin/search\",\n  };\n  const easings = {\n    url: \"https://coss.com/origin/easings\",\n  };\n  const categoryPages = categories.map((category) => ({\n    url: `https://coss.com/origin/${category.slug}`,\n  }));\n\n  return [home, ...categoryPages, search, easings];\n}\n"
  },
  {
    "path": "apps/origin/components/cli-commands.tsx",
    "content": "\"use client\";\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\nimport CopyButton from \"@/components/copy-button\";\nimport { useConfig } from \"@/hooks/use-config\";\n\nexport default function CliCommands({ name }: { name: string }) {\n  const originUrl =\n    process.env.NEXT_PUBLIC_APP_URL || \"https://coss.com/origin\";\n  const [config, setConfig] = useConfig();\n  const packageManager = config.packageManager || \"pnpm\";\n\n  const commands = {\n    bun: `bunx --bun shadcn@latest add ${originUrl}/r/${name}.json`,\n    npm: `npx shadcn@latest add ${originUrl}/r/${name}.json`,\n    pnpm: `pnpm dlx shadcn@latest add ${originUrl}/r/${name}.json`,\n    yarn: `yarn dlx shadcn@latest add ${originUrl}/r/${name}.json`,\n  };\n\n  return (\n    <div className=\"relative\">\n      <Tabs\n        className=\"rounded-md bg-zinc-950 dark:bg-zinc-900\"\n        onValueChange={(value) => {\n          setConfig({\n            ...config,\n            packageManager: value as \"pnpm\" | \"npm\" | \"yarn\" | \"bun\",\n          });\n        }}\n        value={packageManager}\n      >\n        <TabsList className=\"dark h-auto w-full justify-start rounded-none border-b bg-transparent px-4 py-0\">\n          <TabsTrigger\n            className=\"relative rounded-none py-3 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n            value=\"pnpm\"\n          >\n            pnpm\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative rounded-none py-3 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n            value=\"npm\"\n          >\n            npm\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative rounded-none py-3 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n            value=\"yarn\"\n          >\n            yarn\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative rounded-none py-3 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n            value=\"bun\"\n          >\n            bun\n          </TabsTrigger>\n        </TabsList>\n        {Object.entries(commands).map(([pkg, command]) => (\n          <TabsContent className=\"m-0\" key={pkg} value={pkg}>\n            <pre className=\"overflow-auto p-4 font-mono text-[12.8px] text-zinc-100\">\n              {command}\n            </pre>\n          </TabsContent>\n        ))}\n      </Tabs>\n      <CopyButton\n        className=\"top-1\"\n        componentSource={commands[packageManager as keyof typeof commands]}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/code-block.tsx",
    "content": "\"use client\";\n\nimport { toJsxRuntime } from \"hast-util-to-jsx-runtime\";\nimport { type JSX, useLayoutEffect, useState } from \"react\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nimport type { BundledLanguage } from \"shiki/bundle/web\";\nimport { codeToHast } from \"shiki/bundle/web\";\n\nexport async function highlight(code: string, lang: BundledLanguage) {\n  const hast = await codeToHast(code, {\n    lang,\n    theme: \"github-dark\",\n  });\n\n  return toJsxRuntime(hast, {\n    Fragment,\n    jsx,\n    jsxs,\n  }) as JSX.Element;\n}\n\ntype Props = {\n  code: string | null;\n  lang: BundledLanguage;\n  initial?: JSX.Element;\n  preHighlighted?: JSX.Element | null;\n};\n\nexport default function CodeBlock({\n  code,\n  lang,\n  initial,\n  preHighlighted,\n}: Props) {\n  const [content, setContent] = useState<JSX.Element | null>(\n    preHighlighted || initial || null,\n  );\n\n  useLayoutEffect(() => {\n    // If we have pre-highlighted content, use that\n    if (preHighlighted) {\n      setContent(preHighlighted);\n      return;\n    }\n\n    let isMounted = true;\n\n    if (code) {\n      highlight(code, lang).then((result) => {\n        if (isMounted) setContent(result);\n      });\n    } else {\n      setContent(\n        <pre className=\"rounded-md bg-zinc-950 p-4\">No code available</pre>,\n      );\n    }\n\n    return () => {\n      isMounted = false;\n    };\n  }, [code, lang, preHighlighted]);\n\n  return content ? (\n    <div className=\"[&_code]:font-mono [&_code]:text-[13px] [&_pre]:max-h-[450px] [&_pre]:overflow-auto [&_pre]:rounded-md [&_pre]:bg-zinc-950! [&_pre]:p-4 [&_pre]:leading-snug dark:[&_pre]:bg-zinc-900!\">\n      {content}\n    </div>\n  ) : (\n    <pre className=\"rounded-md bg-zinc-950 p-4\">Loading...</pre>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/component-card.tsx",
    "content": "import type { RegistryItem } from \"shadcn/registry\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport default function ComponentCard({\n  isSearchPage = false,\n  children,\n  component,\n  className,\n}: {\n  isSearchPage?: boolean;\n  children: React.ReactNode;\n  component: RegistryItem;\n  className?: string;\n}) {\n  const getColSpanClasses = (includeStart = false) => {\n    const baseClasses =\n      component.meta?.colSpan === 2\n        ? \"col-span-12 sm:col-span-6 lg:col-span-6\"\n        : component.meta?.colSpan === 3\n          ? \"col-span-12 sm:col-span-12 lg:col-span-12\"\n          : \"col-span-12 sm:col-span-6 lg:col-span-4\";\n\n    const startClasses =\n      includeStart && component.meta?.colSpan !== 3\n        ? component.meta?.colSpan === 2\n          ? \"sm:col-start-4 lg:col-start-4\"\n          : \"sm:col-start-4 lg:col-start-5\"\n        : \"\";\n\n    return cn(baseClasses, startClasses);\n  };\n\n  const styleClasses =\n    component.meta?.style === 1\n      ? \"flex justify-center items-center\"\n      : component.meta?.style === 2\n        ? \"text-center\"\n        : \"\";\n\n  return (\n    <div\n      className={cn(\n        \"group/item relative border border-zinc-200 has-[[data-comp-loading=true]]:border-none dark:border-zinc-900\",\n        isSearchPage\n          ? \"col-span-12 grid grid-cols-12\"\n          : cn(getColSpanClasses(), styleClasses),\n        className,\n      )}\n      data-slot={component.name}\n    >\n      {isSearchPage ? (\n        <div className={cn(getColSpanClasses(true), styleClasses)}>\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/component-details.tsx",
    "content": "\"use client\";\n\nimport { CodeIcon } from \"lucide-react\";\nimport { type JSX, useEffect, useState } from \"react\";\nimport type { RegistryItem } from \"shadcn/registry\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\nimport ComponentCli from \"@/components/cli-commands\";\nimport CodeBlock, { highlight } from \"@/components/code-block\";\nimport CopyButton from \"@/components/copy-button\";\nimport CopyRegistry from \"@/components/copy-registry\";\nimport OpenInV0 from \"@/components/open-in-v0\";\nimport { convertRegistryPaths } from \"@/lib/utils\";\n\nexport default function ComponentDetails({\n  component,\n}: {\n  component: RegistryItem;\n}) {\n  const originUrl =\n    process.env.NEXT_PUBLIC_APP_URL || \"https://coss.com/origin\";\n  const [code, setCode] = useState<string | null>(null);\n  const [highlightedCode, setHighlightedCode] = useState<JSX.Element | null>(\n    null,\n  );\n\n  useEffect(() => {\n    const handleEmptyCode = () => {\n      setCode(\"\");\n      setHighlightedCode(null);\n    };\n\n    const loadCode = async () => {\n      try {\n        const response = await fetch(`/origin/r/${component.name}.json`);\n        if (!response.ok) {\n          handleEmptyCode();\n          return;\n        }\n\n        const contentType = response.headers.get(\"content-type\");\n        if (!contentType || !contentType.includes(\"application/json\")) {\n          handleEmptyCode();\n          return;\n        }\n\n        const data = await response.json();\n        const codeContent = convertRegistryPaths(data.files[0].content) || \"\";\n        setCode(codeContent);\n\n        // Pre-highlight the code\n        const highlighted = await highlight(codeContent, \"tsx\");\n        setHighlightedCode(highlighted);\n      } catch (error) {\n        console.error(\"Failed to load code:\", error);\n        handleEmptyCode();\n      }\n    };\n\n    loadCode();\n  }, [component.name]);\n\n  return (\n    <div className=\"absolute top-2 right-2 flex gap-1 peer-data-comp-loading:hidden\">\n      <CopyRegistry url={`${originUrl}/r/${component.name}.json`} />\n      <OpenInV0 componentSource={`${originUrl}/r/${component.name}.json`} />\n      <Dialog>\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span>\n                <DialogTrigger asChild>\n                  <Button\n                    className=\"text-muted-foreground/80 transition-none hover:bg-transparent hover:text-foreground disabled:opacity-100 lg:opacity-0 lg:group-hover/item:opacity-100 lg:group-focus-within/item:opacity-100\"\n                    size=\"icon\"\n                    variant=\"ghost\"\n                  >\n                    <CodeIcon aria-hidden={true} size={16} />\n                  </Button>\n                </DialogTrigger>\n              </span>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-muted-foreground text-xs\">\n              View code\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <DialogContent className=\"sm:max-w-[600px]\">\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Installation</DialogTitle>\n            <DialogDescription className=\"sr-only\">\n              Use the CLI to add components to your project\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"min-w-0 space-y-5\">\n            <ComponentCli name={component.name} />\n            <div className=\"space-y-4\">\n              <p className=\"font-semibold text-lg tracking-tight\">Code</p>\n              <div className=\"relative\">\n                {code === \"\" ? (\n                  <p className=\"text-muted-foreground text-sm\">\n                    No code available. If you think this is an error, please{\" \"}\n                    <a\n                      className=\"font-medium text-foreground underline underline-offset-4 hover:no-underline\"\n                      href=\"https://github.com/cosscom/coss/issues\"\n                      rel=\"noopener noreferrer\"\n                      target=\"_blank\"\n                    >\n                      open an issue\n                    </a>\n                    .\n                  </p>\n                ) : (\n                  <>\n                    <CodeBlock\n                      code={code}\n                      lang=\"tsx\"\n                      preHighlighted={highlightedCode}\n                    />\n                    <CopyButton componentSource={code} />\n                  </>\n                )}\n              </div>\n            </div>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/component-loader-client.tsx",
    "content": "\"use client\";\n\nimport { LoaderCircleIcon } from \"lucide-react\";\nimport dynamic from \"next/dynamic\";\nimport type { ComponentType } from \"react\";\nimport type { RegistryItem } from \"shadcn/registry\";\n\ninterface ComponentLoaderProps {\n  component: RegistryItem;\n}\n\nexport default function ComponentLoader<TProps extends object>({\n  component,\n  ...props\n}: ComponentLoaderProps & TProps) {\n  if (!component.files?.length) {\n    return null;\n  }\n  const path = component.files[0].path;\n  const newPath = path.replace(\"registry/\", \"\");\n  const Component = dynamic(\n    () => import(`@/registry/${newPath}`).catch(() => () => null),\n    {\n      loading: () => (\n        <div\n          className=\"peer flex min-h-20 items-center justify-center\"\n          data-comp-loading=\"true\"\n        >\n          <span className=\"sr-only\">Loading component...</span>\n          <LoaderCircleIcon\n            aria-hidden=\"true\"\n            className=\"-ms-1 animate-spin text-input\"\n            size={24}\n          />\n        </div>\n      ),\n      ssr: false,\n    },\n  ) as ComponentType<TProps>;\n\n  return <Component {...(props as TProps)} currentPage={1} totalPages={10} />;\n}\n"
  },
  {
    "path": "apps/origin/components/component-loader-server.tsx",
    "content": "import type { ComponentType } from \"react\";\nimport type { RegistryItem } from \"shadcn/registry\";\n\ninterface ComponentLoaderProps {\n  component: RegistryItem;\n}\n\nexport default async function ComponentLoader<TProps extends object>({\n  component,\n  ...props\n}: ComponentLoaderProps & TProps) {\n  if (!component?.name) {\n    return null;\n  }\n\n  try {\n    const Component = (\n      await import(`@/registry/default/components/${component.name}`)\n    ).default as ComponentType<TProps>;\n\n    return <Component {...(props as TProps)} currentPage={1} totalPages={10} />;\n  } catch (error) {\n    console.error(`Failed to load component ${component.name}:`, error);\n    return null;\n  }\n}\n"
  },
  {
    "path": "apps/origin/components/copy-button.tsx",
    "content": "\"use client\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\nimport { useCopy } from \"@/hooks/use-copy\";\n\nconst CopyButton = ({\n  componentSource,\n  className,\n}: {\n  componentSource: string | null;\n  className?: string;\n}) => {\n  const { copied, copy } = useCopy();\n\n  return (\n    <div className={cn(\"dark absolute top-2 right-2\", className)}>\n      <TooltipProvider delayDuration={0}>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              aria-label={copied ? \"Copied\" : \"Copy component source\"}\n              className=\"text-muted-foreground transition-none hover:bg-transparent hover:text-foreground disabled:opacity-100\"\n              disabled={copied}\n              onClick={() => copy(componentSource || \"\")}\n              size=\"icon\"\n              variant=\"ghost\"\n            >\n              <div\n                className={cn(\n                  \"transition-all\",\n                  copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\",\n                )}\n              >\n                <svg\n                  aria-hidden=\"true\"\n                  fill=\"none\"\n                  height=\"16\"\n                  width=\"16\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M14.548 3.488a.75.75 0 0 1-.036 1.06l-8.572 8a.75.75 0 0 1-1.023 0l-3.429-3.2a.75.75 0 0 1 1.024-1.096l2.917 2.722 8.06-7.522a.75.75 0 0 1 1.06.036Z\"\n                    fill=\"#10B981\"\n                  />\n                </svg>\n              </div>\n              <div\n                className={cn(\n                  \"absolute transition-all\",\n                  copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\",\n                )}\n              >\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"fill-current\"\n                  fill=\"none\"\n                  height=\"16\"\n                  width=\"16\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M3 2.5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5ZM10 1H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm3 5.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5v-1H5v1a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1v1.5Z\" />\n                </svg>\n              </div>\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent className=\"px-2 py-1 text-muted-foreground text-xs\">\n            Copy\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </div>\n  );\n};\n\nexport default CopyButton;\n"
  },
  {
    "path": "apps/origin/components/copy-layout.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, TerminalIcon } from \"lucide-react\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\nimport { useCopy } from \"@/hooks/use-copy\";\n\nconst CopyLayout = ({ command }: { command: string | undefined }) => {\n  const { copied, copy } = useCopy();\n\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <button\n            aria-label={copied ? \"Copied\" : \"Copy command\"}\n            className=\"inline-flex items-center gap-1 text-sm hover:underline max-sm:hidden\"\n            disabled={copied}\n            onClick={() => copy(command || \"\")}\n            type=\"button\"\n          >\n            {copied ? (\n              <CheckIcon className=\"size-4 text-emerald-600\" />\n            ) : (\n              <TerminalIcon className=\"size-4 text-muted-foreground\" />\n            )}\n            CLI Command\n          </button>\n        </TooltipTrigger>\n        <TooltipContent className=\"px-2 py-1 text-muted-foreground text-xs\">\n          Click to copy\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nexport default CopyLayout;\n"
  },
  {
    "path": "apps/origin/components/copy-registry.tsx",
    "content": "\"use client\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\nimport { useCopy } from \"@/hooks/use-copy\";\n\nconst CopyButton = ({ url }: { url: string | null }) => {\n  const { copied, copy } = useCopy();\n\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            aria-label={copied ? \"Copied\" : \"Copy component source\"}\n            className=\"text-muted-foreground/80 transition-none hover:bg-transparent hover:text-foreground disabled:opacity-100 lg:opacity-0 lg:group-hover/item:opacity-100 lg:group-focus-within/item:opacity-100\"\n            disabled={copied}\n            onClick={() => copy(url || \"\")}\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <div\n              className={cn(\n                \"transition-all\",\n                copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\",\n              )}\n            >\n              <svg\n                aria-hidden=\"true\"\n                fill=\"none\"\n                height=\"16\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M14.548 3.488a.75.75 0 0 1-.036 1.06l-8.572 8a.75.75 0 0 1-1.023 0l-3.429-3.2a.75.75 0 0 1 1.024-1.096l2.917 2.722 8.06-7.522a.75.75 0 0 1 1.06.036Z\"\n                  fill=\"#10B981\"\n                />\n              </svg>\n            </div>\n            <div\n              className={cn(\n                \"absolute transition-all\",\n                copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\",\n              )}\n            >\n              <svg\n                aria-hidden=\"true\"\n                className=\"fill-current\"\n                fill=\"none\"\n                height=\"16\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M10.459 1.562a1.725 1.725 0 0 0-2.407 0L1.635 7.855a.575.575 0 0 1-.925-.18.549.549 0 0 1 .123-.606L7.25.775a2.875 2.875 0 0 1 4.01 0 2.743 2.743 0 0 1 .803 2.36 2.866 2.866 0 0 1 2.406.787l.034.033a2.743 2.743 0 0 1 0 3.934L8.699 13.58a.182.182 0 0 0 0 .262l1.192 1.17a.55.55 0 0 1 0 .786.575.575 0 0 1-.802 0l-1.192-1.169a1.28 1.28 0 0 1 0-1.836L13.7 7.101a1.647 1.647 0 0 0 0-2.36l-.034-.032a1.725 1.725 0 0 0-2.404-.002L6.48 9.396l-.001.001-.065.065a.575.575 0 0 1-.926-.18.549.549 0 0 1 .123-.607l4.849-4.755a1.645 1.645 0 0 0-.002-2.358Z\" />\n                <path d=\"M9.657 3.135a.549.549 0 0 0 0-.786.575.575 0 0 0-.803 0L4.108 7.003a2.743 2.743 0 0 0 0 3.934 2.876 2.876 0 0 0 4.01 0l4.747-4.655a.548.548 0 0 0 0-.787.575.575 0 0 0-.802 0L7.317 10.15a1.725 1.725 0 0 1-2.407 0 1.647 1.647 0 0 1 0-2.36l4.747-4.655Z\" />\n              </svg>\n            </div>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"px-2 py-1 text-muted-foreground text-xs\">\n          Copy Registry URL\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nexport default CopyButton;\n"
  },
  {
    "path": "apps/origin/components/cta.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Cta() {\n  return (\n    <div className=\"mt-16 text-center md:mt-20\">\n      <h2 className=\"mb-6 font-heading text-3xl/[1.1] text-foreground\">\n        Didn&apos;t find what you were looking for?\n      </h2>\n      <Button asChild className=\"rounded-full\">\n        <a\n          href=\"https://github.com/cosscom/coss/discussions/categories/suggestions\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          <span className=\"text-primary-foreground\">Suggest component</span>\n        </a>\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/footer.tsx",
    "content": "export default function Footer() {\n  return (\n    <footer className=\"relative mt-16 py-8 before:absolute before:-inset-x-32 before:top-0 before:h-px before:bg-[linear-gradient(to_right,--theme(--color-border/.3),--theme(--color-border)_200px,--theme(--color-border)_calc(100%-200px),--theme(--color-border/.3))] md:mt-20\">\n      <div\n        aria-hidden=\"true\"\n        className=\"before:absolute before:-top-px before:-left-12 before:z-10 before:-ml-px before:size-[3px] before:bg-ring/50 after:absolute after:-top-px after:-right-12 after:z-10 after:-mr-px after:size-[3px] after:bg-ring/50\"\n      />\n      <div className=\"flex justify-between gap-2 max-sm:flex-col max-sm:text-center\">\n        <p className=\"text-muted-foreground text-sm\">\n          &copy; {new Date().getFullYear()} coss.com\n        </p>\n      </div>\n    </footer>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/header-link.tsx",
    "content": "import { RiArrowRightUpLine } from \"@remixicon/react\";\nimport Link from \"next/link\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport default function HeaderLink({\n  text,\n  href,\n  external = false,\n  className,\n  isNew = false,\n}: {\n  text: string;\n  href: string;\n  external?: boolean;\n  className?: string;\n  isNew?: boolean;\n}) {\n  return (\n    <div className=\"flex items-start gap-1.5\">\n      {external ? (\n        <a\n          className={cn(\n            \"inline-flex gap-0.5 text-sm hover:underline\",\n            className,\n          )}\n          href={href}\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          {text}\n          <span className=\"hidden sm:inline\">\n            {\" \"}\n            <RiArrowRightUpLine\n              aria-hidden=\"true\"\n              className=\"text-muted-foreground/80\"\n              size={14}\n            />\n          </span>\n        </a>\n      ) : (\n        <>\n          <Link\n            className={cn(\n              \"inline-flex gap-0.5 text-sm hover:underline\",\n              className,\n            )}\n            href={href}\n          >\n            {text}\n          </Link>\n          {isNew && (\n            <span className=\"font-medium text-[10px] text-muted-foreground/80 text-xs uppercase\">\n              New\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/header.tsx",
    "content": "\"use client\";\n\nimport { RiGithubFill, RiTwitterXFill } from \"@remixicon/react\";\nimport Link from \"next/link\";\nimport HeaderLink from \"@/components/header-link\";\nimport ThemeToggle from \"@/components/theme-toggle\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\n\nconst links = [{ href: \"/easings\", text: \"Easing Classes\" }];\n\nexport default function Header() {\n  const isMobile = useIsMobile();\n  const cossHomeUrl = process.env.NEXT_PUBLIC_COSS_URL || \"\";\n\n  return (\n    <header className=\"relative mb-14 before:absolute before:-inset-x-32 before:bottom-0 before:h-px before:bg-[linear-gradient(to_right,--theme(--color-border/.3),--theme(--color-border)_200px,--theme(--color-border)_calc(100%-200px),--theme(--color-border/.3))]\">\n      <div\n        aria-hidden=\"true\"\n        className=\"before:absolute before:-bottom-px before:-left-12 before:z-10 before:-ml-px before:size-[3px] before:bg-ring/50 after:absolute after:-right-12 after:-bottom-px after:z-10 after:-mr-px after:size-[3px] after:bg-ring/50\"\n      />\n      <div className=\"mx-auto flex h-[72px] w-full max-w-6xl items-center justify-between gap-3\">\n        <div className=\"-mt-0.5 flex shrink-0 items-start gap-1.5 font-heading text-2xl sm:text-[1.625em]\">\n          <a aria-label=\"Home\" href={cossHomeUrl}>\n            coss.com\n          </a>\n          <Link\n            aria-label=\"Home\"\n            className=\"text-muted-foreground/72 hover:text-muted-foreground\"\n            href=\"/\"\n          >\n            origin\n          </Link>\n        </div>\n        <div className=\"flex items-center\">\n          {!isMobile && (\n            <>\n              <div className=\"flex items-center gap-4 md:gap-10\">\n                {links.map((link) => (\n                  <HeaderLink\n                    href={link.href}\n                    key={link.href}\n                    text={link.text}\n                  />\n                ))}\n              </div>\n              <div\n                aria-hidden=\"true\"\n                className=\"ms-4 me-4 h-5 w-px bg-input md:ms-10\"\n              />\n            </>\n          )}\n          <div className=\"flex items-center gap-1\">\n            <a\n              className=\"inline-flex size-9 items-center justify-center rounded text-muted-foreground outline-none hover:text-foreground/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              href=\"https://x.com/coss_com\"\n              rel=\"noopener noreferrer\"\n              target=\"_blank\"\n            >\n              <span className=\"sr-only\">X</span>\n              <RiTwitterXFill size={20} />\n            </a>\n            <a\n              className=\"inline-flex size-9 items-center justify-center rounded text-muted-foreground outline-none hover:text-foreground/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              href=\"https://github.com/cosscom/coss\"\n              rel=\"noopener noreferrer\"\n              target=\"_blank\"\n            >\n              <span className=\"sr-only\">GitHub</span>\n              <RiGithubFill size={20} />\n            </a>\n            <ThemeToggle />\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/open-in-v0.tsx",
    "content": "\"use client\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst OpenInV0 = ({ componentSource }: { componentSource: string }) => {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            aria-label=\"Open in v0\"\n            className={cn(\n              buttonVariants({\n                size: \"icon\",\n                variant: \"ghost\",\n              }),\n              \"text-muted-foreground/80 transition-none hover:bg-transparent hover:text-foreground disabled:opacity-100 lg:opacity-0 lg:group-hover/item:opacity-100 lg:group-focus-within/item:opacity-100\",\n            )}\n            href={`https://v0.dev/chat/api/open?url=${encodeURIComponent(componentSource)}`}\n            rel=\"noreferrer\"\n            target=\"_blank\"\n          >\n            <svg\n              height=\"16\"\n              strokeLinejoin=\"round\"\n              viewBox=\"0 0 16 16\"\n              width=\"16\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                clipRule=\"evenodd\"\n                d=\"M9.50321 5.5H13.2532C13.3123 5.5 13.3704 5.5041 13.4273 5.51203L9.51242 9.42692C9.50424 9.36912 9.5 9.31006 9.5 9.25L9.5 5.5L8 5.5L8 9.25C8 10.7688 9.23122 12 10.75 12H14.5V10.5L10.75 10.5C10.6899 10.5 10.6309 10.4958 10.5731 10.4876L14.4904 6.57028C14.4988 6.62897 14.5032 6.68897 14.5032 6.75V10.5H16.0032V6.75C16.0032 5.23122 14.772 4 13.2532 4H9.50321V5.5ZM0 5V5.00405L5.12525 11.5307C5.74119 12.3151 7.00106 11.8795 7.00106 10.8822V5H5.50106V9.58056L1.90404 5H0Z\"\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n              />\n            </svg>\n          </a>\n        </TooltipTrigger>\n        <TooltipContent className=\"px-2 py-1 text-muted-foreground text-xs\">\n          Open in v0\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nexport default OpenInV0;\n"
  },
  {
    "path": "apps/origin/components/page-grid.tsx",
    "content": "export default function PageGrid({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"overflow-hidden\">\n      <div className=\"-m-px grid grid-cols-12 *:not-first:-ms-px *:not-first:-mt-px *:px-1 *:py-12 sm:*:px-8 xl:*:px-12\">\n        {children}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/page-header.tsx",
    "content": "import { cn } from \"@/registry/default/lib/utils\";\n\ninterface PageHeaderProps {\n  title: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport default function PageHeader({\n  title,\n  className,\n  children,\n}: PageHeaderProps) {\n  return (\n    <div className={cn(\"mb-16 text-center\", className)}>\n      <h1 className=\"mb-3 font-heading text-4xl/[1.1] text-foreground md:text-5xl/[1.1]\">\n        {title}\n      </h1>\n      <p className=\"mx-auto max-w-3xl text-lg text-muted-foreground\">\n        {children}\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/search-button.tsx",
    "content": "\"use client\";\n\nimport { RiSearch2Line } from \"@remixicon/react\";\nimport Link from \"next/link\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect } from \"react\";\n\nexport default function SearchButton() {\n  const router = useRouter();\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n        e.preventDefault();\n        router.push(\"/search\");\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [router]);\n\n  return (\n    <Link\n      className=\"inline-flex h-10 w-fit min-w-72 cursor-text rounded-full border bg-background px-4 py-2 text-foreground text-sm outline-none placeholder:text-muted-foreground/70 focus:border-ring focus:ring-[3px] focus:ring-ring/50\"\n      href=\"/search\"\n    >\n      <span className=\"flex grow items-center gap-2\">\n        <RiSearch2Line\n          aria-hidden=\"true\"\n          className=\"-ms-1 text-muted-foreground\"\n          size={20}\n        />\n        <span className=\"font-normal text-zinc-400 dark:text-zinc-500\">\n          Quick search...\n        </span>\n        <div className=\"pointer-events-none ml-auto flex items-center justify-center text-muted-foreground/80\">\n          <kbd className=\"inline-flex font-[inherit] font-medium text-muted-foreground text-xs\">\n            <span className=\"opacity-70\">⌘</span>K\n          </kbd>\n        </div>\n      </span>\n    </Link>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/subscribe-action.ts",
    "content": "\"use server\";\n\nimport { z } from \"zod\";\n\ntype EmailOctopusError = {\n  code?: string;\n  detail?: string;\n  title?: string;\n};\n\nconst subscribeSchema = z.object({\n  email: z.email(\"Please enter a valid email address\"),\n});\n\ntype SubscribeResult = { success: true } | { success: false; error: string };\n\nexport async function subscribe(email: string): Promise<SubscribeResult> {\n  // Check environment variables and return error instead of throwing\n  if (!process.env.EMAIL_OCTOPUS_API_KEY) {\n    console.error(\"Missing EMAIL_OCTOPUS_API_KEY environment variable\");\n    return {\n      error: \"Service configuration error. Please try again later.\",\n      success: false,\n    };\n  }\n\n  if (!process.env.EMAIL_OCTOPUS_LIST_ID) {\n    console.error(\"Missing EMAIL_OCTOPUS_LIST_ID environment variable\");\n    return {\n      error: \"Service configuration error. Please try again later.\",\n      success: false,\n    };\n  }\n\n  const result = subscribeSchema.safeParse({ email: email.trim() });\n  if (!result.success) {\n    return {\n      error: result.error.issues[0]?.message || \"Invalid email format.\",\n      success: false,\n    };\n  }\n\n  try {\n    console.log(\"Attempting to subscribe email:\", result.data.email);\n\n    const response = await fetch(\n      `https://api.emailoctopus.com/lists/${process.env.EMAIL_OCTOPUS_LIST_ID}/contacts`,\n      {\n        body: JSON.stringify({\n          email_address: result.data.email,\n          fields: {},\n          status: \"subscribed\",\n          tags: [],\n        }),\n        headers: {\n          Authorization: `Bearer ${process.env.EMAIL_OCTOPUS_API_KEY}`,\n          \"Content-Type\": \"application/json\",\n        },\n        method: \"POST\",\n      },\n    );\n\n    const data = (await response.json()) as EmailOctopusError;\n\n    // Always log API errors for debugging\n    if (!response.ok) {\n      console.error(\"EmailOctopus API Error:\", {\n        data,\n        email: result.data.email,\n        status: response.status,\n        statusText: response.statusText,\n      });\n    }\n\n    if (!response.ok) {\n      if (response.status === 429) {\n        return {\n          error: \"Too many attempts. Please try again later.\",\n          success: false,\n        };\n      }\n\n      // Provide more specific error messages based on status codes\n      if (response.status === 400) {\n        return {\n          error: data.detail || data.title || \"Invalid email address.\",\n          success: false,\n        };\n      }\n\n      if (response.status === 401) {\n        console.error(\"EmailOctopus API authentication failed\");\n        return {\n          error: \"Service configuration error. Please try again later.\",\n          success: false,\n        };\n      }\n\n      return {\n        error:\n          data.detail || data.title || \"Failed to subscribe. Please try again.\",\n        success: false,\n      };\n    }\n\n    console.log(\"Successfully subscribed email:\", result.data.email);\n    return { success: true };\n  } catch (error) {\n    console.error(\"Unexpected error during subscription:\", {\n      email: result.data.email,\n      error: error instanceof Error ? error.message : String(error),\n      stack: error instanceof Error ? error.stack : undefined,\n    });\n\n    return {\n      error: \"Network error. Please check your connection and try again.\",\n      success: false,\n    };\n  }\n}\n"
  },
  {
    "path": "apps/origin/components/subscribe-form.tsx",
    "content": "\"use client\";\n\nimport { RiLoader3Line, RiNavigationLine } from \"@remixicon/react\";\nimport { useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { subscribe } from \"./subscribe-action\";\n\n// Add type for form state\ntype FormStatus = \"idle\" | \"loading\" | \"success\" | \"error\";\n\nfunction Form() {\n  const id = useId();\n  const [formState, setFormState] = useState({\n    email: \"\",\n    message: \"\",\n    status: \"idle\" as FormStatus,\n  });\n\n  const isLoading = formState.status === \"loading\";\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setFormState((prev) => ({ ...prev, message: \"\", status: \"loading\" }));\n\n    try {\n      const result = await subscribe(formState.email);\n      if (!result.success) {\n        setFormState((prev) => ({\n          ...prev,\n          message: result.error,\n          status: \"error\",\n        }));\n      } else {\n        setFormState({\n          email: \"\",\n          message: \"Thanks for subscribing!\",\n          status: \"success\",\n        });\n      }\n    } catch (error) {\n      setFormState((prev) => ({\n        ...prev,\n        message: error instanceof Error ? error.message : \"Failed to subscribe\",\n        status: \"error\",\n      }));\n    }\n  };\n\n  return (\n    <form className=\"space-y-4\" onSubmit={handleSubmit}>\n      <div className=\"space-y-2\">\n        <div className=\"inline-flex gap-2\">\n          <div className=\"relative\">\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground peer-disabled:opacity-50\">\n              <RiNavigationLine\n                aria-hidden=\"true\"\n                className=\"-scale-x-100\"\n                size={16}\n              />\n            </div>\n            <Input\n              aria-label=\"Subscribe to the newsletter\"\n              className=\"h-10 flex-1 rounded-full border-zinc-600/65 bg-zinc-700/30 ps-9 text-zinc-100 placeholder:text-zinc-500 md:min-w-64 [&:-webkit-autofill]:bg-zinc-700/30 [&:-webkit-autofill]:[-webkit-text-fill-color:#fff] [&:-webkit-autofill]:[transition:background-color_5000000s_ease-in-out_0s]\"\n              disabled={isLoading || undefined}\n              id={id}\n              onChange={(e) =>\n                setFormState((prev) => ({ ...prev, email: e.target.value }))\n              }\n              placeholder=\"Enter your email...\"\n              required\n              type=\"email\"\n              value={formState.email}\n            />\n          </div>\n          <Button\n            className=\"group relative h-10 rounded-full\"\n            data-loading={isLoading}\n            disabled={isLoading}\n            type=\"submit\"\n          >\n            <span className=\"group-data-[loading=true]:text-transparent\">\n              Subscribe\n            </span>\n            {isLoading && (\n              <div className=\"absolute inset-0 flex items-center justify-center\">\n                <RiLoader3Line\n                  aria-hidden=\"true\"\n                  className=\"animate-spin\"\n                  size={16}\n                />\n              </div>\n            )}\n          </Button>\n        </div>\n        {formState.message && (\n          <p\n            aria-live=\"polite\"\n            className={cn(\n              \"absolute mt-2 text-xs\",\n              formState.status === \"error\"\n                ? \"text-destructive\"\n                : \"text-muted-foreground\",\n            )}\n            role=\"alert\"\n          >\n            {formState.message}\n          </p>\n        )}\n      </div>\n    </form>\n  );\n}\n\nexport function SubscribeBottom() {\n  return (\n    <div className=\"dark relative overflow-hidden rounded-xl bg-zinc-900 px-4 py-14 sm:px-8\">\n      <Illustration\n        aria-hidden=\"true\"\n        className=\"absolute top-0 left-0 -translate-x-1/2\"\n      />\n      <Illustration\n        aria-hidden=\"true\"\n        className=\"absolute right-0 bottom-0 translate-x-1/4\"\n      />\n      <div className=\"flex flex-col items-center justify-between gap-6 lg:flex-row\">\n        <h2 className=\"font-heading text-2xl/[1.1] text-foreground md:text-3xl/[1.1]\">\n          Get notified when new stuff drops.\n        </h2>\n        <Form />\n      </div>\n    </div>\n  );\n}\n\nfunction Illustration({ className }: { className?: string }) {\n  const id = useId();\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"none\"\n      height=\"268\"\n      width=\"267\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <g filter={`url(#${id}a)`} style={{ mixBlendMode: \"plus-lighter\" }}>\n        <path\n          d=\"M189 76.284 242.642 24 189 83.753v19.691l-8.148-6.11L24 244 176.099 89.864v-13.58H189Z\"\n          fill=\"#fff\"\n          fillOpacity=\".48\"\n        />\n      </g>\n      <defs>\n        <filter\n          colorInterpolationFilters=\"sRGB\"\n          filterUnits=\"userSpaceOnUse\"\n          height=\"268\"\n          id={`${id}a`}\n          width=\"266.642\"\n          x=\"0\"\n          y=\"0\"\n        >\n          <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n          <feBlend in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n          <feGaussianBlur\n            result=\"effect1_foregroundBlur_809_24\"\n            stdDeviation=\"12\"\n          />\n        </filter>\n      </defs>\n    </svg>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/theme-provider.tsx",
    "content": "\"use client\";\n\nimport {\n  ThemeProvider as NextThemesProvider,\n  type ThemeProviderProps,\n} from \"next-themes\";\n\nexport function ThemeProvider({ children, ...props }: ThemeProviderProps) {\n  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;\n}\n"
  },
  {
    "path": "apps/origin/components/theme-toggle.tsx",
    "content": "\"use client\";\n\nimport { RiMoonClearLine, RiSunLine } from \"@remixicon/react\";\nimport { useTheme } from \"next-themes\";\nimport { useId, useState } from \"react\";\n\nexport default function ThemeToggle() {\n  const id = useId();\n  const { theme, setTheme } = useTheme();\n  const [system, setSystem] = useState(false);\n\n  const smartToggle = () => {\n    /* The smart toggle by @nrjdalal */\n    const prefersDarkScheme = window.matchMedia(\n      \"(prefers-color-scheme: dark)\",\n    ).matches;\n    if (theme === \"system\") {\n      setTheme(prefersDarkScheme ? \"light\" : \"dark\");\n      setSystem(false);\n    } else if (\n      (theme === \"light\" && !prefersDarkScheme) ||\n      (theme === \"dark\" && prefersDarkScheme)\n    ) {\n      setTheme(theme === \"light\" ? \"dark\" : \"light\");\n      setSystem(false);\n    } else {\n      setTheme(\"system\");\n      setSystem(true);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col justify-center\">\n      <input\n        aria-label=\"Toggle dark mode\"\n        checked={system}\n        className=\"peer sr-only\"\n        id={id}\n        name=\"theme-toggle\"\n        onChange={smartToggle}\n        type=\"checkbox\"\n      />\n      <label\n        aria-hidden=\"true\"\n        className=\"relative inline-flex size-9 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none transition-[color,box-shadow] hover:text-foreground/80 peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50\"\n        htmlFor={id}\n      >\n        <RiSunLine aria-hidden=\"true\" className=\"dark:hidden\" size={20} />\n        <RiMoonClearLine\n          aria-hidden=\"true\"\n          className=\"hidden dark:block\"\n          size={20}\n        />\n        <span className=\"sr-only\">Switch to system/light/dark version</span>\n      </label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components/top-banner.tsx",
    "content": "import { ArrowUpRightIcon } from \"lucide-react\";\n\nexport default function TopBanner() {\n  const gatewayOrigin = process.env.NEXT_PUBLIC_COSS_UI_URL || \"\";\n  const gatewayHome = gatewayOrigin ? `${gatewayOrigin}/` : \"/\";\n\n  return (\n    <div className=\"dark relative bg-zinc-900 px-4 text-foreground/80\">\n      <p className=\"mx-auto w-full max-w-6xl py-3 text-sm\">\n        A new, modern UI component library built on top of Base UI. Explore the\n        new{\" \"}\n        <a\n          className=\"group font-heading text-base text-foreground before:absolute before:inset-0 hover:underline\"\n          href={gatewayHome}\n        >\n          <span className=\"inline-flex items-center gap-1\">\n            <span className=\"decoration-muted-foreground underline-offset-4 group-hover:underline\">\n              coss.com <span className=\"text-muted-foreground\">ui</span>\n            </span>{\" \"}\n            <ArrowUpRightIcon className=\"size-4 opacity-60 transition-all group-hover:rotate-45 group-hover:opacity-100\" />\n          </span>\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/components.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema.json\",\n  \"aliases\": {\n    \"components\": \"@/registry/default/components\",\n    \"hooks\": \"@/registry/default/hooks\",\n    \"lib\": \"@/lib\",\n    \"ui\": \"@/registry/default\",\n    \"utils\": \"@/registry/default/lib/utils\"\n  },\n  \"iconLibrary\": \"lucide\",\n  \"rsc\": true,\n  \"style\": \"default\",\n  \"tailwind\": {\n    \"baseColor\": \"zinc\",\n    \"config\": \"tailwind.config.ts\",\n    \"css\": \"app/globals.css\",\n    \"cssVariables\": true,\n    \"prefix\": \"\"\n  },\n  \"tsx\": true\n}\n"
  },
  {
    "path": "apps/origin/config/components.ts",
    "content": "export interface ComponentCategory {\n  slug: string;\n  name: string;\n  components: { name: string }[];\n  isNew?: boolean;\n}\n\nexport const categories: ComponentCategory[] = [\n  {\n    components: [\n      { name: \"comp-334\" },\n      { name: \"comp-335\" },\n      { name: \"comp-336\" },\n      { name: \"comp-337\" },\n      { name: \"comp-338\" },\n      { name: \"comp-339\" },\n      { name: \"comp-340\" },\n      { name: \"comp-341\" },\n      { name: \"comp-342\" },\n      { name: \"comp-343\" },\n      { name: \"comp-344\" },\n      { name: \"comp-345\" },\n      { name: \"comp-346\" },\n      { name: \"comp-347\" },\n      { name: \"comp-348\" },\n      { name: \"comp-349\" },\n      { name: \"comp-350\" },\n      { name: \"comp-351\" },\n      { name: \"comp-352\" },\n      { name: \"comp-353\" },\n    ],\n    name: \"Accordion\",\n    slug: \"accordion\",\n  },\n  {\n    components: [\n      { name: \"comp-267\" },\n      { name: \"comp-268\" },\n      { name: \"comp-269\" },\n      { name: \"comp-270\" },\n      { name: \"comp-271\" },\n      { name: \"comp-272\" },\n      { name: \"comp-273\" },\n      { name: \"comp-274\" },\n      { name: \"comp-275\" },\n      { name: \"comp-276\" },\n      { name: \"comp-277\" },\n      { name: \"comp-278\" },\n    ],\n    name: \"Alert\",\n    slug: \"alert\",\n  },\n  {\n    components: [\n      { name: \"comp-390\" },\n      { name: \"comp-391\" },\n      { name: \"comp-392\" },\n      { name: \"comp-393\" },\n      { name: \"comp-394\" },\n      { name: \"comp-395\" },\n      { name: \"comp-396\" },\n      { name: \"comp-397\" },\n      { name: \"comp-398\" },\n      { name: \"comp-399\" },\n      { name: \"comp-400\" },\n      { name: \"comp-401\" },\n      { name: \"comp-402\" },\n      { name: \"comp-403\" },\n      { name: \"comp-404\" },\n      { name: \"comp-405\" },\n      { name: \"comp-406\" },\n      { name: \"comp-407\" },\n      { name: \"comp-408\" },\n      { name: \"comp-409\" },\n      { name: \"comp-410\" },\n      { name: \"comp-411\" },\n      { name: \"comp-412\" },\n    ],\n    name: \"Avatar\",\n    slug: \"avatar\",\n  },\n  {\n    components: [\n      { name: \"comp-413\" },\n      { name: \"comp-414\" },\n      { name: \"comp-415\" },\n      { name: \"comp-416\" },\n      { name: \"comp-417\" },\n      { name: \"comp-418\" },\n      { name: \"comp-419\" },\n      { name: \"comp-420\" },\n      { name: \"comp-421\" },\n      { name: \"comp-422\" },\n      { name: \"comp-423\" },\n      { name: \"comp-424\" },\n      { name: \"comp-425\" },\n    ],\n    name: \"Badge\",\n    slug: \"badge\",\n  },\n  {\n    components: [\n      { name: \"comp-301\" },\n      { name: \"comp-302\" },\n      { name: \"comp-303\" },\n      { name: \"comp-304\" },\n      { name: \"comp-305\" },\n      { name: \"comp-306\" },\n      { name: \"comp-307\" },\n      { name: \"comp-308\" },\n      { name: \"comp-309\" },\n      { name: \"comp-310\" },\n      { name: \"comp-311\" },\n      { name: \"comp-312\" },\n    ],\n    name: \"Banner\",\n    slug: \"banner\",\n  },\n  {\n    components: [\n      { name: \"comp-446\" },\n      { name: \"comp-447\" },\n      { name: \"comp-448\" },\n      { name: \"comp-449\" },\n      { name: \"comp-450\" },\n      { name: \"comp-451\" },\n      { name: \"comp-452\" },\n      { name: \"comp-453\" },\n    ],\n    name: \"Breadcrumb\",\n    slug: \"breadcrumb\",\n  },\n  {\n    components: [\n      { name: \"comp-78\" },\n      { name: \"comp-79\" },\n      { name: \"comp-80\" },\n      { name: \"comp-81\" },\n      { name: \"comp-82\" },\n      { name: \"comp-83\" },\n      { name: \"comp-84\" },\n      { name: \"comp-85\" },\n      { name: \"comp-86\" },\n      { name: \"comp-87\" },\n      { name: \"comp-88\" },\n      { name: \"comp-89\" },\n      { name: \"comp-90\" },\n      { name: \"comp-91\" },\n      { name: \"comp-92\" },\n      { name: \"comp-93\" },\n      { name: \"comp-94\" },\n      { name: \"comp-95\" },\n      { name: \"comp-96\" },\n      { name: \"comp-97\" },\n      { name: \"comp-98\" },\n      { name: \"comp-99\" },\n      { name: \"comp-100\" },\n      { name: \"comp-101\" },\n      { name: \"comp-129\" },\n      { name: \"comp-130\" },\n      { name: \"comp-102\" },\n      { name: \"comp-103\" },\n      { name: \"comp-104\" },\n      { name: \"comp-105\" },\n      { name: \"comp-106\" },\n      { name: \"comp-107\" },\n      { name: \"comp-108\" },\n      { name: \"comp-109\" },\n      { name: \"comp-110\" },\n      { name: \"comp-111\" },\n      { name: \"comp-112\" },\n      { name: \"comp-113\" },\n      { name: \"comp-114\" },\n      { name: \"comp-131\" },\n      { name: \"comp-115\" },\n      { name: \"comp-116\" },\n      { name: \"comp-117\" },\n      { name: \"comp-118\" },\n      { name: \"comp-119\" },\n      { name: \"comp-120\" },\n      { name: \"comp-121\" },\n      { name: \"comp-122\" },\n      { name: \"comp-123\" },\n      { name: \"comp-124\" },\n      { name: \"comp-125\" },\n      { name: \"comp-126\" },\n      { name: \"comp-127\" },\n      { name: \"comp-128\" },\n    ],\n    name: \"Button\",\n    slug: \"button\",\n  },\n  {\n    components: [\n      { name: \"comp-487\" },\n      { name: \"comp-488\" },\n      { name: \"comp-489\" },\n      { name: \"comp-490\" },\n      { name: \"comp-491\" },\n      { name: \"comp-492\" },\n      { name: \"comp-493\" },\n      { name: \"comp-494\" },\n      { name: \"comp-495\" },\n      { name: \"comp-496\" },\n      { name: \"comp-497\" },\n      { name: \"comp-498\" },\n      { name: \"comp-499\" },\n      { name: \"comp-500\" },\n      { name: \"comp-501\" },\n      { name: \"comp-502\" },\n      { name: \"comp-503\" },\n      { name: \"comp-504\" },\n      { name: \"comp-505\" },\n      { name: \"comp-506\" },\n      { name: \"comp-507\" },\n      { name: \"comp-508\" },\n      { name: \"comp-509\" },\n      { name: \"comp-510\" },\n      { name: \"comp-41\" },\n      { name: \"comp-42\" },\n      { name: \"comp-511\" },\n      { name: \"comp-512\" },\n    ],\n    name: \"Calendar & Date picker\",\n    slug: \"calendar-date-picker\",\n  },\n  {\n    components: [\n      { name: \"comp-132\" },\n      { name: \"comp-133\" },\n      { name: \"comp-134\" },\n      { name: \"comp-135\" },\n      { name: \"comp-136\" },\n      { name: \"comp-137\" },\n      { name: \"comp-138\" },\n      { name: \"comp-139\" },\n      { name: \"comp-151\" },\n      { name: \"comp-140\" },\n      { name: \"comp-141\" },\n      { name: \"comp-142\" },\n      { name: \"comp-143\" },\n      { name: \"comp-144\" },\n      { name: \"comp-145\" },\n      { name: \"comp-146\" },\n      { name: \"comp-147\" },\n      { name: \"comp-148\" },\n      { name: \"comp-149\" },\n      { name: \"comp-150\" },\n    ],\n    name: \"Checkbox\",\n    slug: \"checkbox\",\n  },\n  {\n    components: [\n      { name: \"comp-554\" },\n      { name: \"comp-555\" },\n      { name: \"comp-556\" },\n      { name: \"comp-557\" },\n      { name: \"comp-558\" },\n      { name: \"comp-559\" },\n      { name: \"comp-560\" },\n      { name: \"comp-561\" },\n      { name: \"comp-562\" },\n      { name: \"comp-563\" },\n      { name: \"comp-564\" },\n    ],\n    name: \"Image Cropper\",\n    slug: \"image-cropper\",\n  },\n  {\n    components: [\n      { name: \"comp-313\" },\n      { name: \"comp-314\" },\n      { name: \"comp-315\" },\n      { name: \"comp-316\" },\n      { name: \"comp-317\" },\n      { name: \"comp-318\" },\n      { name: \"comp-319\" },\n      { name: \"comp-320\" },\n      { name: \"comp-321\" },\n      { name: \"comp-322\" },\n      { name: \"comp-323\" },\n      { name: \"comp-324\" },\n      { name: \"comp-325\" },\n      { name: \"comp-326\" },\n      { name: \"comp-327\" },\n      { name: \"comp-328\" },\n      { name: \"comp-329\" },\n      { name: \"comp-330\" },\n      { name: \"comp-331\" },\n      { name: \"comp-332\" },\n      { name: \"comp-333\" },\n    ],\n    name: \"Dialog\",\n    slug: \"dialog\",\n  },\n  {\n    components: [\n      { name: \"comp-366\" },\n      { name: \"comp-367\" },\n      { name: \"comp-368\" },\n      { name: \"comp-369\" },\n      { name: \"comp-370\" },\n      { name: \"comp-371\" },\n      { name: \"comp-372\" },\n      { name: \"comp-373\" },\n      { name: \"comp-374\" },\n      { name: \"comp-375\" },\n      { name: \"comp-376\" },\n      { name: \"comp-377\" },\n      { name: \"comp-378\" },\n      { name: \"comp-379\" },\n      { name: \"comp-380\" },\n    ],\n    name: \"Dropdown\",\n    slug: \"dropdown\",\n  },\n  {\n    components: [\n      { name: \"comp-125\" },\n      { name: \"comp-126\" },\n      { name: \"comp-543\" },\n      { name: \"comp-544\" },\n      { name: \"comp-545\" },\n      { name: \"comp-546\" },\n      { name: \"comp-547\" },\n      { name: \"comp-548\" },\n      { name: \"comp-549\" },\n      { name: \"comp-550\" },\n      { name: \"comp-551\" },\n      { name: \"comp-552\" },\n      { name: \"comp-553\" },\n      { name: \"comp-554\" },\n    ],\n    name: \"File upload\",\n    slug: \"file-upload\",\n  },\n  {\n    components: [{ name: \"comp-542\" }],\n    name: \"Event calendar\",\n    slug: \"event-calendar\",\n  },\n  {\n    components: [\n      { name: \"comp-01\" },\n      { name: \"comp-02\" },\n      { name: \"comp-03\" },\n      { name: \"comp-04\" },\n      { name: \"comp-05\" },\n      { name: \"comp-06\" },\n      { name: \"comp-07\" },\n      { name: \"comp-08\" },\n      { name: \"comp-09\" },\n      { name: \"comp-10\" },\n      { name: \"comp-11\" },\n      { name: \"comp-12\" },\n      { name: \"comp-13\" },\n      { name: \"comp-14\" },\n      { name: \"comp-15\" },\n      { name: \"comp-16\" },\n      { name: \"comp-17\" },\n      { name: \"comp-18\" },\n      { name: \"comp-19\" },\n      { name: \"comp-20\" },\n      { name: \"comp-21\" },\n      { name: \"comp-22\" },\n      { name: \"comp-23\" },\n      { name: \"comp-24\" },\n      { name: \"comp-25\" },\n      { name: \"comp-26\" },\n      { name: \"comp-27\" },\n      { name: \"comp-28\" },\n      { name: \"comp-29\" },\n      { name: \"comp-30\" },\n      { name: \"comp-31\" },\n      { name: \"comp-32\" },\n      { name: \"comp-33\" },\n      { name: \"comp-34\" },\n      { name: \"comp-35\" },\n      { name: \"comp-36\" },\n      { name: \"comp-37\" },\n      { name: \"comp-38\" },\n      { name: \"comp-39\" },\n      { name: \"comp-40\" },\n      { name: \"comp-41\" },\n      { name: \"comp-42\" },\n      { name: \"comp-43\" },\n      { name: \"comp-44\" },\n      { name: \"comp-45\" },\n      { name: \"comp-58\" },\n      { name: \"comp-46\" },\n      { name: \"comp-47\" },\n      { name: \"comp-48\" },\n      { name: \"comp-49\" },\n      { name: \"comp-50\" },\n      { name: \"comp-51\" },\n      { name: \"comp-52\" },\n      { name: \"comp-53\" },\n      { name: \"comp-54\" },\n      { name: \"comp-55\" },\n      { name: \"comp-486\" },\n      { name: \"comp-56\" },\n      { name: \"comp-57\" },\n    ],\n    name: \"Input\",\n    slug: \"input\",\n  },\n  {\n    components: [\n      { name: \"comp-577\" },\n      { name: \"comp-578\" },\n      { name: \"comp-579\" },\n      { name: \"comp-580\" },\n      { name: \"comp-581\" },\n      { name: \"comp-582\" },\n      { name: \"comp-583\" },\n      { name: \"comp-584\" },\n      { name: \"comp-585\" },\n      { name: \"comp-586\" },\n      { name: \"comp-587\" },\n      { name: \"comp-588\" },\n      { name: \"comp-589\" },\n      { name: \"comp-590\" },\n      { name: \"comp-591\" },\n      { name: \"comp-592\" },\n      { name: \"comp-593\" },\n      { name: \"comp-594\" },\n      { name: \"comp-595\" },\n      { name: \"comp-596\" },\n    ],\n    name: \"Navbar\",\n    slug: \"navbar\",\n  },\n  {\n    components: [\n      { name: \"comp-279\" },\n      { name: \"comp-280\" },\n      { name: \"comp-281\" },\n      { name: \"comp-282\" },\n      { name: \"comp-283\" },\n      { name: \"comp-284\" },\n      { name: \"comp-285\" },\n      { name: \"comp-286\" },\n      { name: \"comp-287\" },\n      { name: \"comp-288\" },\n      { name: \"comp-289\" },\n      { name: \"comp-290\" },\n      { name: \"comp-291\" },\n      { name: \"comp-292\" },\n      { name: \"comp-293\" },\n      { name: \"comp-294\" },\n      { name: \"comp-295\" },\n      { name: \"comp-296\" },\n      { name: \"comp-297\" },\n      { name: \"comp-298\" },\n      { name: \"comp-299\" },\n      { name: \"comp-300\" },\n    ],\n    name: \"Notification\",\n    slug: \"notification\",\n  },\n  {\n    components: [\n      { name: \"comp-454\" },\n      { name: \"comp-455\" },\n      { name: \"comp-456\" },\n      { name: \"comp-457\" },\n      { name: \"comp-458\" },\n      { name: \"comp-459\" },\n      { name: \"comp-460\" },\n      { name: \"comp-461\" },\n      { name: \"comp-462\" },\n      { name: \"comp-463\" },\n      { name: \"comp-464\" },\n      { name: \"comp-465\" },\n    ],\n    name: \"Pagination\",\n    slug: \"pagination\",\n  },\n  {\n    components: [\n      { name: \"comp-381\" },\n      { name: \"comp-382\" },\n      { name: \"comp-383\" },\n      { name: \"comp-384\" },\n      { name: \"comp-385\" },\n      { name: \"comp-386\" },\n      { name: \"comp-387\" },\n      { name: \"comp-388\" },\n      { name: \"comp-389\" },\n    ],\n    name: \"Popover\",\n    slug: \"popover\",\n  },\n  {\n    components: [\n      { name: \"comp-152\" },\n      { name: \"comp-153\" },\n      { name: \"comp-154\" },\n      { name: \"comp-155\" },\n      { name: \"comp-156\" },\n      { name: \"comp-157\" },\n      { name: \"comp-158\" },\n      { name: \"comp-159\" },\n      { name: \"comp-160\" },\n      { name: \"comp-161\" },\n      { name: \"comp-162\" },\n      { name: \"comp-163\" },\n      { name: \"comp-164\" },\n      { name: \"comp-165\" },\n      { name: \"comp-166\" },\n      { name: \"comp-171\" },\n      { name: \"comp-167\" },\n      { name: \"comp-168\" },\n      { name: \"comp-169\" },\n      { name: \"comp-170\" },\n    ],\n    name: \"Radio\",\n    slug: \"radio\",\n  },\n  {\n    components: [\n      { name: \"comp-189\" },\n      { name: \"comp-190\" },\n      { name: \"comp-191\" },\n      { name: \"comp-192\" },\n      { name: \"comp-193\" },\n      { name: \"comp-194\" },\n      { name: \"comp-195\" },\n      { name: \"comp-196\" },\n      { name: \"comp-197\" },\n      { name: \"comp-198\" },\n      { name: \"comp-199\" },\n      { name: \"comp-200\" },\n      { name: \"comp-201\" },\n      { name: \"comp-202\" },\n      { name: \"comp-203\" },\n      { name: \"comp-204\" },\n      { name: \"comp-205\" },\n      { name: \"comp-206\" },\n      { name: \"comp-207\" },\n      { name: \"comp-208\" },\n      { name: \"comp-209\" },\n      { name: \"comp-210\" },\n      { name: \"comp-211\" },\n      { name: \"comp-212\" },\n      { name: \"comp-213\" },\n      { name: \"comp-214\" },\n      { name: \"comp-215\" },\n      { name: \"comp-216\" },\n      { name: \"comp-217\" },\n      { name: \"comp-218\" },\n      { name: \"comp-219\" },\n      { name: \"comp-220\" },\n      { name: \"comp-221\" },\n      { name: \"comp-222\" },\n      { name: \"comp-223\" },\n      { name: \"comp-224\" },\n      { name: \"comp-225\" },\n      { name: \"comp-226\" },\n      { name: \"comp-227\" },\n      { name: \"comp-228\" },\n      { name: \"comp-229\" },\n      { name: \"comp-230\" },\n      { name: \"comp-231\" },\n      { name: \"comp-232\" },\n      { name: \"comp-233\" },\n      { name: \"comp-234\" },\n      { name: \"comp-235\" },\n      { name: \"comp-236\" },\n      { name: \"comp-237\" },\n      { name: \"comp-238\" },\n      { name: \"comp-239\" },\n    ],\n    name: \"Select\",\n    slug: \"select\",\n  },\n  {\n    components: [\n      { name: \"comp-240\" },\n      { name: \"comp-241\" },\n      { name: \"comp-242\" },\n      { name: \"comp-243\" },\n      { name: \"comp-244\" },\n      { name: \"comp-245\" },\n      { name: \"comp-246\" },\n      { name: \"comp-247\" },\n      { name: \"comp-248\" },\n      { name: \"comp-249\" },\n      { name: \"comp-250\" },\n      { name: \"comp-251\" },\n      { name: \"comp-252\" },\n      { name: \"comp-253\" },\n      { name: \"comp-254\" },\n      { name: \"comp-255\" },\n      { name: \"comp-256\" },\n      { name: \"comp-257\" },\n      { name: \"comp-258\" },\n      { name: \"comp-259\" },\n      { name: \"comp-260\" },\n      { name: \"comp-261\" },\n      { name: \"comp-262\" },\n      { name: \"comp-263\" },\n      { name: \"comp-264\" },\n      { name: \"comp-265\" },\n      { name: \"comp-266\" },\n    ],\n    name: \"Slider\",\n    slug: \"slider\",\n  },\n  {\n    components: [\n      { name: \"comp-513\" },\n      { name: \"comp-514\" },\n      { name: \"comp-515\" },\n      { name: \"comp-516\" },\n      { name: \"comp-517\" },\n      { name: \"comp-518\" },\n      { name: \"comp-519\" },\n      { name: \"comp-520\" },\n      { name: \"comp-521\" },\n      { name: \"comp-522\" },\n      { name: \"comp-523\" },\n      { name: \"comp-524\" },\n      { name: \"comp-525\" },\n      { name: \"comp-526\" },\n      { name: \"comp-527\" },\n      { name: \"comp-528\" },\n      { name: \"comp-529\" },\n    ],\n    name: \"Stepper\",\n    slug: \"stepper\",\n  },\n  {\n    components: [\n      { name: \"comp-172\" },\n      { name: \"comp-173\" },\n      { name: \"comp-174\" },\n      { name: \"comp-175\" },\n      { name: \"comp-176\" },\n      { name: \"comp-177\" },\n      { name: \"comp-178\" },\n      { name: \"comp-179\" },\n      { name: \"comp-180\" },\n      { name: \"comp-181\" },\n      { name: \"comp-182\" },\n      { name: \"comp-183\" },\n      { name: \"comp-184\" },\n      { name: \"comp-185\" },\n      { name: \"comp-186\" },\n      { name: \"comp-187\" },\n      { name: \"comp-188\" },\n    ],\n    name: \"Switch\",\n    slug: \"switch\",\n  },\n  {\n    components: [\n      { name: \"comp-466\" },\n      { name: \"comp-467\" },\n      { name: \"comp-468\" },\n      { name: \"comp-469\" },\n      { name: \"comp-470\" },\n      { name: \"comp-471\" },\n      { name: \"comp-472\" },\n      { name: \"comp-473\" },\n      { name: \"comp-474\" },\n      { name: \"comp-475\" },\n      { name: \"comp-476\" },\n      { name: \"comp-477\" },\n      { name: \"comp-478\" },\n      { name: \"comp-479\" },\n      { name: \"comp-480\" },\n      { name: \"comp-481\" },\n      { name: \"comp-482\" },\n      { name: \"comp-483\" },\n      { name: \"comp-484\" },\n      { name: \"comp-485\" },\n    ],\n    name: \"Table\",\n    slug: \"table\",\n  },\n  {\n    components: [\n      { name: \"comp-426\" },\n      { name: \"comp-427\" },\n      { name: \"comp-428\" },\n      { name: \"comp-429\" },\n      { name: \"comp-430\" },\n      { name: \"comp-431\" },\n      { name: \"comp-432\" },\n      { name: \"comp-433\" },\n      { name: \"comp-434\" },\n      { name: \"comp-435\" },\n      { name: \"comp-436\" },\n      { name: \"comp-437\" },\n      { name: \"comp-438\" },\n      { name: \"comp-439\" },\n      { name: \"comp-440\" },\n      { name: \"comp-441\" },\n      { name: \"comp-442\" },\n      { name: \"comp-443\" },\n      { name: \"comp-444\" },\n      { name: \"comp-445\" },\n    ],\n    name: \"Tabs\",\n    slug: \"tabs\",\n  },\n  {\n    components: [\n      { name: \"comp-59\" },\n      { name: \"comp-60\" },\n      { name: \"comp-61\" },\n      { name: \"comp-62\" },\n      { name: \"comp-63\" },\n      { name: \"comp-64\" },\n      { name: \"comp-65\" },\n      { name: \"comp-66\" },\n      { name: \"comp-67\" },\n      { name: \"comp-68\" },\n      { name: \"comp-69\" },\n      { name: \"comp-70\" },\n      { name: \"comp-71\" },\n      { name: \"comp-72\" },\n      { name: \"comp-73\" },\n      { name: \"comp-74\" },\n      { name: \"comp-75\" },\n      { name: \"comp-76\" },\n      { name: \"comp-77\" },\n    ],\n    name: \"Textarea\",\n    slug: \"textarea\",\n  },\n  {\n    components: [\n      { name: \"comp-530\" },\n      { name: \"comp-531\" },\n      { name: \"comp-532\" },\n      { name: \"comp-533\" },\n      { name: \"comp-534\" },\n      { name: \"comp-535\" },\n      { name: \"comp-536\" },\n      { name: \"comp-537\" },\n      { name: \"comp-538\" },\n      { name: \"comp-539\" },\n      { name: \"comp-540\" },\n      { name: \"comp-541\" },\n    ],\n    name: \"Timeline\",\n    slug: \"timeline\",\n  },\n  {\n    components: [\n      { name: \"comp-354\" },\n      { name: \"comp-355\" },\n      { name: \"comp-356\" },\n      { name: \"comp-357\" },\n      { name: \"comp-358\" },\n      { name: \"comp-359\" },\n      { name: \"comp-360\" },\n      { name: \"comp-361\" },\n      { name: \"comp-362\" },\n      { name: \"comp-363\" },\n      { name: \"comp-364\" },\n      { name: \"comp-365\" },\n    ],\n    name: \"Tooltip\",\n    slug: \"tooltip\",\n  },\n  {\n    components: [\n      { name: \"comp-565\" },\n      { name: \"comp-566\" },\n      { name: \"comp-567\" },\n      { name: \"comp-568\" },\n      { name: \"comp-569\" },\n      { name: \"comp-570\" },\n      { name: \"comp-571\" },\n      { name: \"comp-572\" },\n      { name: \"comp-573\" },\n      { name: \"comp-574\" },\n      { name: \"comp-575\" },\n      { name: \"comp-576\" },\n      { name: \"comp-597\" },\n      { name: \"comp-598\" },\n      { name: \"comp-599\" },\n    ],\n    name: \"Tree\",\n    slug: \"tree\",\n  },\n];\n\nexport function getCategory(slug: string): ComponentCategory | undefined {\n  return categories.find((category) => category.slug === slug);\n}\n"
  },
  {
    "path": "apps/origin/docs/use-file-upload.md",
    "content": "# useFileUpload Hook\n\nA flexible and feature-rich React hook for handling file uploads with drag-and-drop support, file validation, and preview generation.\n\n> **Note:** This hook provides a solid foundation for file uploads but is designed to be extended. You can build upon it to implement additional features like pause/resume functionality, chunked uploads, retry mechanisms, or integration with specific backend services.\n\n## Features\n\n- 📁 Single or multiple file uploads\n- 🖱️ Drag and drop support\n- 🔍 File type validation\n- 📏 File size validation\n- 🖼️ Image preview generation\n- 🧹 Duplicate file detection\n- ⚠️ Error handling\n- 🔄 Progress tracking integration\n- 🎛️ Fully customizable UI\n\n## Installation\n\nThis hook is part of the component library and doesn't require separate installation.\n\n## Basic Usage\n\n```tsx\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\n\nfunction FileUploadComponent() {\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    multiple: true,\n    maxFiles: 5,\n    maxSize: 5 * 1024 * 1024, // 5MB\n    accept: \"image/*\",\n  });\n\n  return (\n    <div\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      <input {...getInputProps()} />\n\n      <button onClick={openFileDialog}>Select Files</button>\n\n      {files.length > 0 && (\n        <div>\n          <h3>Selected Files:</h3>\n          <ul>\n            {files.map((file) => (\n              <li key={file.id}>\n                {file.file.name} ({formatBytes(file.file.size)})\n                <button onClick={() => removeFile(file.id)}>Remove</button>\n              </li>\n            ))}\n          </ul>\n          <button onClick={clearFiles}>Clear All</button>\n        </div>\n      )}\n\n      {errors.length > 0 && (\n        <div style={{ color: \"red\" }}>\n          {errors.map((error, index) => (\n            <p key={index}>{error}</p>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n```\n\n## API Reference\n\n### Hook Parameters\n\nThe `useFileUpload` hook accepts a configuration object with the following options:\n\n| Option          | Type                                      | Default     | Description                                                                     |\n| --------------- | ----------------------------------------- | ----------- | ------------------------------------------------------------------------------- |\n| `maxFiles`      | `number`                                  | `Infinity`  | Maximum number of files allowed (only used when `multiple` is `true`)           |\n| `maxSize`       | `number`                                  | `Infinity`  | Maximum file size in bytes                                                      |\n| `accept`        | `string`                                  | `\"*\"`       | Comma-separated list of accepted file types (e.g., `\"image/*,application/pdf\"`) |\n| `multiple`      | `boolean`                                 | `false`     | Whether to allow multiple file selection                                        |\n| `initialFiles`  | `FileMetadata[]`                          | `[]`        | Initial files to populate the uploader with                                     |\n| `onFilesChange` | `(files: FileWithPreview[]) => void`      | `undefined` | Callback function called whenever the files array changes                       |\n| `onFilesAdded`  | `(addedFiles: FileWithPreview[]) => void` | `undefined` | Callback function called when new files are added                               |\n\n### Return Value\n\nThe hook returns a tuple with two elements:\n\n#### State Object\n\n| Property     | Type                | Description                                        |\n| ------------ | ------------------- | -------------------------------------------------- |\n| `files`      | `FileWithPreview[]` | Array of files with preview URLs                   |\n| `isDragging` | `boolean`           | Whether files are being dragged over the drop area |\n| `errors`     | `string[]`          | Array of error messages                            |\n\n#### Actions Object\n\n| Method             | Type                                                                                                                              | Description                          |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |\n| `addFiles`         | `(files: FileList \\| File[]) => void`                                                                                             | Add files programmatically           |\n| `removeFile`       | `(id: string) => void`                                                                                                            | Remove a file by its ID              |\n| `clearFiles`       | `() => void`                                                                                                                      | Remove all files                     |\n| `clearErrors`      | `() => void`                                                                                                                      | Clear all error messages             |\n| `handleDragEnter`  | `(e: DragEvent<HTMLElement>) => void`                                                                                             | Handle drag enter event              |\n| `handleDragLeave`  | `(e: DragEvent<HTMLElement>) => void`                                                                                             | Handle drag leave event              |\n| `handleDragOver`   | `(e: DragEvent<HTMLElement>) => void`                                                                                             | Handle drag over event               |\n| `handleDrop`       | `(e: DragEvent<HTMLElement>) => void`                                                                                             | Handle drop event                    |\n| `handleFileChange` | `(e: ChangeEvent<HTMLInputElement>) => void`                                                                                      | Handle file input change event       |\n| `openFileDialog`   | `() => void`                                                                                                                      | Open the file selection dialog       |\n| `getInputProps`    | `(props?: InputHTMLAttributes<HTMLInputElement>) => InputHTMLAttributes<HTMLInputElement> & { ref: React.Ref<HTMLInputElement> }` | Get props for the file input element |\n\n### Types\n\n```typescript\ntype FileMetadata = {\n  name: string;\n  size: number;\n  type: string;\n  url: string;\n  id: string;\n};\n\ntype FileWithPreview = {\n  file: File | FileMetadata;\n  id: string;\n  preview?: string;\n};\n```\n\n## Advanced Usage\n\n### Tracking Upload Progress with Server Integration\n\nHere's a real-world example of tracking file upload progress with server integration:\n\n```tsx\nimport { useState } from \"react\";\nimport { useFileUpload, type FileWithPreview } from \"./use-file-upload\";\n\n// Type for tracking upload progress\ntype UploadProgress = {\n  fileId: string;\n  progress: number;\n  completed: boolean;\n  error?: string;\n};\n\nfunction FileUploader() {\n  const maxSize = 5 * 1024 * 1024; // 5MB\n\n  // State to track upload progress for each file\n  const [uploadProgress, setUploadProgress] = useState<UploadProgress[]>([]);\n\n  // Function to handle file upload to server\n  const uploadFileToServer = async (file: File): Promise<{ url: string }> => {\n    return new Promise(async (resolve, reject) => {\n      try {\n        // Create FormData\n        const formData = new FormData();\n        formData.append(\"file\", file);\n\n        // Create XMLHttpRequest to track progress\n        const xhr = new XMLHttpRequest();\n\n        // Track upload progress\n        xhr.upload.addEventListener(\"progress\", (event) => {\n          if (event.lengthComputable) {\n            const progressPercent = Math.round(\n              (event.loaded / event.total) * 100,\n            );\n            // Update progress state for this file\n            setUploadProgress((prev) =>\n              prev.map((item) =>\n                item.fileId === file.name\n                  ? { ...item, progress: progressPercent }\n                  : item,\n              ),\n            );\n          }\n        });\n\n        // Handle completion\n        xhr.addEventListener(\"load\", () => {\n          if (xhr.status >= 200 && xhr.status < 300) {\n            const response = JSON.parse(xhr.responseText);\n            // Mark as completed\n            setUploadProgress((prev) =>\n              prev.map((item) =>\n                item.fileId === file.name ? { ...item, completed: true } : item,\n              ),\n            );\n            resolve(response);\n          } else {\n            // Handle error\n            setUploadProgress((prev) =>\n              prev.map((item) =>\n                item.fileId === file.name\n                  ? { ...item, error: \"Upload failed\" }\n                  : item,\n              ),\n            );\n            reject(new Error(\"Upload failed\"));\n          }\n        });\n\n        // Handle error\n        xhr.addEventListener(\"error\", () => {\n          setUploadProgress((prev) =>\n            prev.map((item) =>\n              item.fileId === file.name\n                ? { ...item, error: \"Network error\" }\n                : item,\n            ),\n          );\n          reject(new Error(\"Network error\"));\n        });\n\n        // Open and send the request\n        xhr.open(\"POST\", \"/api/upload\", true);\n        xhr.send(formData);\n      } catch (error) {\n        reject(error);\n      }\n    });\n  };\n\n  // Handle newly added files\n  const handleFilesAdded = (addedFiles: FileWithPreview[]) => {\n    // Initialize progress tracking for each new file\n    const newProgressItems = addedFiles.map((file) => ({\n      fileId: file.id,\n      progress: 0,\n      completed: false,\n    }));\n\n    // Add new progress items to state\n    setUploadProgress((prev) => [...prev, ...newProgressItems]);\n\n    // Start upload for each file\n    addedFiles.forEach((file) => {\n      if (file.file instanceof File) {\n        uploadFileToServer(file.file)\n          .then((response) => {\n            console.log(\"Upload successful:\", response.url);\n          })\n          .catch((error) => {\n            console.error(\"Upload failed:\", error);\n          });\n      }\n    });\n  };\n\n  // Remove the progress tracking for the file\n  const handleFileRemoved = (fileId: string) => {\n    setUploadProgress((prev) => prev.filter((item) => item.fileId !== fileId));\n  };\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    multiple: true,\n    maxSize,\n    onFilesAdded: handleFilesAdded,\n  });\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        data-dragging={isDragging || undefined}\n        data-files={files.length > 0 || undefined}\n        className=\"border-input data-[dragging=true]:bg-accent/50 has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:ring-[3px]\"\n      >\n        <input\n          {...getInputProps()}\n          className=\"sr-only\"\n          aria-label=\"Upload image file\"\n        />\n        {files.length > 0 ? (\n          <div className=\"flex w-full flex-col gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <h3 className=\"truncate text-sm font-medium\">\n                Files ({files.length})\n              </h3>\n              <div className=\"flex gap-2\">\n                <Button variant=\"outline\" size=\"sm\" onClick={openFileDialog}>\n                  <UploadIcon\n                    className=\"-ms-0.5 size-3.5 opacity-60\"\n                    aria-hidden=\"true\"\n                  />\n                  Add files\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => {\n                    // Clear all progress tracking\n                    setUploadProgress([]);\n                    clearFiles();\n                  }}\n                >\n                  <Trash2Icon\n                    className=\"-ms-0.5 size-3.5 opacity-60\"\n                    aria-hidden=\"true\"\n                  />\n                  Remove all\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"w-full space-y-2\">\n              {files.map((file) => {\n                const fileProgress = uploadProgress.find(\n                  (p) => p.fileId === file.id,\n                );\n                const isUploading = fileProgress && !fileProgress.completed;\n\n                return (\n                  <div\n                    key={file.id}\n                    data-uploading={isUploading || undefined}\n                    className=\"bg-background flex flex-col gap-1 rounded-lg border p-2 pe-3 transition-opacity duration-300\"\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <div className=\"flex items-center gap-3 overflow-hidden in-data-[uploading=true]:opacity-50\">\n                        <div className=\"flex aspect-square size-10 shrink-0 items-center justify-center rounded border\">\n                          {getFileIcon(file)}\n                        </div>\n                        <div className=\"flex min-w-0 flex-col gap-0.5\">\n                          <p className=\"truncate text-[13px] font-medium\">\n                            {file.file instanceof File\n                              ? file.file.name\n                              : file.file.name}\n                          </p>\n                          <p className=\"text-muted-foreground text-xs\">\n                            {formatBytes(\n                              file.file instanceof File\n                                ? file.file.size\n                                : file.file.size,\n                            )}\n                          </p>\n                        </div>\n                      </div>\n                      <Button\n                        size=\"icon\"\n                        variant=\"ghost\"\n                        className=\"text-muted-foreground/80 hover:text-foreground -me-2 size-8 hover:bg-transparent\"\n                        onClick={() => {\n                          handleFileRemoved(file.id);\n                          removeFile(file.id);\n                        }}\n                        aria-label=\"Remove file\"\n                      >\n                        <XIcon className=\"size-4\" aria-hidden=\"true\" />\n                      </Button>\n                    </div>\n\n                    {/* Upload progress bar */}\n                    {fileProgress &&\n                      (() => {\n                        const progress = fileProgress.progress || 0;\n                        const completed = fileProgress.completed || false;\n\n                        if (completed) return null;\n\n                        return (\n                          <div className=\"mt-1 flex items-center gap-2\">\n                            <div className=\"h-1.5 w-full overflow-hidden rounded-full bg-gray-100\">\n                              <div\n                                className=\"bg-primary h-full transition-all duration-300 ease-out\"\n                                style={{ width: `${progress}%` }}\n                              />\n                            </div>\n                            <span className=\"text-muted-foreground w-10 text-xs tabular-nums\">\n                              {progress}%\n                            </span>\n                          </div>\n                        );\n                      })()}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n            <div\n              className=\"bg-background mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border\"\n              aria-hidden=\"true\"\n            >\n              <ImageIcon className=\"size-4 opacity-60\" />\n            </div>\n            <p className=\"mb-1.5 text-sm font-medium\">Drop your files here</p>\n            <p className=\"text-muted-foreground text-xs\">\n              Max {maxFiles} files ∙ Up to {maxSizeMB}MB\n            </p>\n            <Button variant=\"outline\" className=\"mt-4\" onClick={openFileDialog}>\n              <UploadIcon className=\"-ms-1 opacity-60\" aria-hidden=\"true\" />\n              Select images\n            </Button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"text-destructive flex items-center gap-1 text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n```\n\n## Helper Functions\n\n### formatBytes\n\nFormats a byte value into a human-readable string.\n\n```typescript\nfunction formatBytes(bytes: number, decimals = 2): string;\n```\n\nExample:\n\n```tsx\nformatBytes(1024); // \"1 KB\"\nformatBytes(1536, 1); // \"1.5 KB\"\n```\n\n## Extending the Hook\n\nThe `useFileUpload` hook is designed as a starting point that handles the core functionality of file selection and validation. You can extend it to build more advanced features:\n\n### Pause and Resume Uploads\n\nYou can implement pause/resume functionality by using the XMLHttpRequest abort method and tracking upload progress:\n\n```tsx\nconst uploadWithPauseResume = (file: File) => {\n  let xhr: XMLHttpRequest | null = new XMLHttpRequest();\n  let isPaused = false;\n  let uploadedBytes = 0;\n\n  const pause = () => {\n    if (xhr && !isPaused) {\n      xhr.abort();\n      isPaused = true;\n    }\n  };\n\n  const resume = () => {\n    if (isPaused) {\n      // Create a new request\n      xhr = new XMLHttpRequest();\n\n      // Set up a Content-Range header to resume from where we left off\n      const formData = new FormData();\n      formData.append(\"file\", file);\n\n      xhr.open(\"POST\", \"/api/upload\", true);\n      xhr.setRequestHeader(\n        \"Content-Range\",\n        `bytes ${uploadedBytes}-${file.size - 1}/${file.size}`,\n      );\n\n      // Set up progress tracking again\n      xhr.upload.addEventListener(\"progress\", (event) => {\n        if (event.lengthComputable) {\n          uploadedBytes = event.loaded;\n          // Update progress UI\n        }\n      });\n\n      xhr.send(formData);\n      isPaused = false;\n    }\n  };\n\n  return { pause, resume };\n};\n```\n\n### Chunked Uploads\n\nFor large files, you might want to implement chunked uploads:\n\n```tsx\nconst uploadInChunks = (file: File, chunkSize = 1024 * 1024) => {\n  let currentChunk = 0;\n  const totalChunks = Math.ceil(file.size / chunkSize);\n\n  const uploadNextChunk = async () => {\n    if (currentChunk >= totalChunks) {\n      // All chunks uploaded\n      return;\n    }\n\n    const start = currentChunk * chunkSize;\n    const end = Math.min(file.size, start + chunkSize);\n    const chunk = file.slice(start, end);\n\n    const formData = new FormData();\n    formData.append(\"file\", chunk);\n    formData.append(\"fileName\", file.name);\n    formData.append(\"chunkIndex\", currentChunk.toString());\n    formData.append(\"totalChunks\", totalChunks.toString());\n\n    try {\n      await fetch(\"/api/upload-chunk\", {\n        method: \"POST\",\n        body: formData,\n      });\n\n      currentChunk++;\n      // Update progress UI\n      const progress = Math.round((currentChunk / totalChunks) * 100);\n\n      // Continue with next chunk\n      uploadNextChunk();\n    } catch (error) {\n      // Handle error, implement retry logic\n    }\n  };\n\n  // Start the upload process\n  uploadNextChunk();\n};\n```\n\n## More Examples\n\nFor more examples and live demos of the `useFileUpload` hook in action, visit the [File upload page](https://coss.com/origin/file-upload).\n\nThe documentation site includes various implementations and use cases, including:\n\n- Basic file uploaders\n- Image galleries\n- Document uploaders with progress tracking\n- Drag and drop interfaces\n- Custom validation examples\n- And more\n"
  },
  {
    "path": "apps/origin/hooks/use-config.ts",
    "content": "import { useAtom } from \"jotai\";\nimport { atomWithStorage } from \"jotai/utils\";\n\ntype Config = {\n  packageManager: \"npm\" | \"yarn\" | \"pnpm\" | \"bun\";\n};\n\nconst configAtom = atomWithStorage<Config>(\"config\", {\n  packageManager: \"pnpm\",\n});\n\nexport function useConfig() {\n  return useAtom(configAtom);\n}\n"
  },
  {
    "path": "apps/origin/hooks/use-copy.ts",
    "content": "import { useState } from \"react\";\n\nexport function useCopy(duration = 1500) {\n  const [copied, setCopied] = useState<boolean>(false);\n\n  const copy = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), duration);\n      return true;\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n      return false;\n    }\n  };\n\n  return {\n    copied,\n    copy,\n  };\n}\n"
  },
  {
    "path": "apps/origin/hooks/use-mobile.tsx",
    "content": "import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n    undefined,\n  );\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"
  },
  {
    "path": "apps/origin/lib/utils.ts",
    "content": "import { type ClassValue, clsx } from \"clsx\";\nimport type { RegistryItem } from \"shadcn/registry\";\nimport { twMerge } from \"tailwind-merge\";\nimport type { RegistryTag } from \"@/registry/registry-tags\";\nimport registry from \"@/registry.json\";\n\nconst components = registry.items as unknown as RegistryItem[];\n\nexport const getComponents = (\n  selectedTags: RegistryTag[] = [],\n): RegistryItem[] => {\n  return selectedTags.length\n    ? components.filter((component) =>\n        selectedTags.every(\n          (tag) => component.meta?.tags?.includes(tag) ?? false,\n        ),\n      )\n    : components;\n};\n\nexport const getComponentsByNames = (names: string[]): RegistryItem[] => {\n  const componentsMap = new Map(components.map((comp) => [comp.name, comp]));\n\n  return names\n    .map((name) => componentsMap.get(name))\n    .filter((comp): comp is RegistryItem => comp !== undefined);\n};\n\nexport const getAvailableTags = (\n  selectedTags: RegistryTag[],\n): RegistryTag[] => {\n  if (!selectedTags.length) return [];\n\n  // Get all components that have all the selected tags\n  const matchingComponents = components.filter((component) =>\n    selectedTags.every((tag) => component.meta?.tags?.includes(tag) ?? false),\n  );\n\n  // Get all unique tags from the matching components\n  const availableTags = new Set<RegistryTag>();\n  for (const component of matchingComponents) {\n    for (const tag of component.meta?.tags ?? []) {\n      if (!selectedTags.includes(tag)) {\n        availableTags.add(tag);\n      }\n    }\n  }\n\n  return Array.from(availableTags);\n};\n\nexport const convertRegistryPaths = (content: string): string => {\n  return content\n    .replace(/@\\/registry\\/default\\/ui/g, \"@/components/ui\")\n    .replace(/@\\/registry\\/default\\/compositions/g, \"@/components\")\n    .replace(/@\\/registry\\/default\\/hooks/g, \"@/hooks\")\n    .replace(/@\\/registry\\/default\\/lib/g, \"@/lib\");\n};\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
  },
  {
    "path": "apps/origin/next.config.ts",
    "content": "import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  basePath: process.env.NEXT_PUBLIC_BASE_PATH || \"/origin\",\n};\n\nexport default nextConfig;\n"
  },
  {
    "path": "apps/origin/package.json",
    "content": "{\n  \"dependencies\": {\n    \"@dnd-kit/core\": \"^6.3.1\",\n    \"@dnd-kit/modifiers\": \"^9.0.0\",\n    \"@dnd-kit/sortable\": \"^10.0.0\",\n    \"@dnd-kit/utilities\": \"^3.2.2\",\n    \"@headless-tree/core\": \"^1.5.1\",\n    \"@headless-tree/react\": \"^1.5.1\",\n    \"@internationalized/date\": \"^3.10.0\",\n    \"@origin-space/image-cropper\": \"^0.1.9\",\n    \"@radix-ui/react-icons\": \"^1.3.2\",\n    \"@remixicon/react\": \"^4.7.0\",\n    \"@tanstack/react-table\": \"^8.21.3\",\n    \"class-variance-authority\": \"^0.7.1\",\n    \"clsx\": \"^2.1.1\",\n    \"cmdk\": \"1.1.1\",\n    \"date-fns\": \"^4.1.0\",\n    \"emblor\": \"^1.4.8\",\n    \"hast-util-to-jsx-runtime\": \"^2.3.6\",\n    \"input-otp\": \"^1.4.2\",\n    \"jotai\": \"^2.15.1\",\n    \"lodash\": \"^4.17.21\",\n    \"lucide-react\": \"^0.539.0\",\n    \"next\": \"16.0.9\",\n    \"next-themes\": \"^0.4.6\",\n    \"radix-ui\": \"1.4.4-rc.1762291353631\",\n    \"react\": \"^19.2.3\",\n    \"react-aria\": \"^3.44.0\",\n    \"react-aria-components\": \"^1.13.0\",\n    \"react-day-picker\": \"^9.11.1\",\n    \"react-dom\": \"^19.2.3\",\n    \"react-intersection-observer\": \"^9.16.0\",\n    \"react-payment-inputs\": \"^1.2.0\",\n    \"react-phone-number-input\": \"^3.4.13\",\n    \"react-resizable-panels\": \"^3.0.6\",\n    \"shadcn\": \"^2.10.0\",\n    \"sonner\": \"^2.0.7\",\n    \"tailwind-merge\": \"^3.4.0\",\n    \"ts-morph\": \"^26.0.0\",\n    \"tsx\": \"^4.20.6\",\n    \"use-mask-input\": \"^3.5.2\",\n    \"zod\": \"^4.1.12\"\n  },\n  \"devDependencies\": {\n    \"@tailwindcss/postcss\": \"^4.1.17\",\n    \"@types/node\": \"^24.10.1\",\n    \"@types/react\": \"^19.2.6\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"@types/react-payment-inputs\": \"^1.1.4\",\n    \"postcss\": \"^8.5.6\",\n    \"rimraf\": \"^6.1.0\",\n    \"shiki\": \"^3.15.0\",\n    \"tailwindcss\": \"^4.1.17\",\n    \"tw-animate-css\": \"^1.4.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"license\": \"MIT\",\n  \"name\": \"origin\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"bun run --bun format:write && next build\",\n    \"clean\": \"rm -rf node_modules && rm -rf .turbo && rm -rf .next\",\n    \"dev\": \"next dev --port 4001\",\n    \"format:check\": \"biome format --check .\",\n    \"format:write\": \"biome format --write .\",\n    \"lint\": \"biome lint .\",\n    \"registry:build\": \"shadcn build\",\n    \"start\": \"next start\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"type\": \"module\",\n  \"version\": \"0.1.0\"\n}\n"
  },
  {
    "path": "apps/origin/postcss.config.mjs",
    "content": "/** @type {import('postcss-load-config').Config} */\nconst config = {\n  plugins: {\n    \"@tailwindcss/postcss\": {},\n  },\n};\n\nexport default config;\n"
  },
  {
    "path": "apps/origin/public/r/accordion.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"accordion\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/accordion.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Accordion({\\n  ...props\\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\\n  return <AccordionPrimitive.Root data-slot=\\\"accordion\\\" {...props} />;\\n}\\n\\nfunction AccordionItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\\n  return (\\n    <AccordionPrimitive.Item\\n      className={cn(\\\"border-b last:border-b-0\\\", className)}\\n      data-slot=\\\"accordion-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AccordionTrigger({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\\n  return (\\n    <AccordionPrimitive.Header className=\\\"flex\\\">\\n      <AccordionPrimitive.Trigger\\n        className={cn(\\n          \\\"flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left font-semibold text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\\\",\\n          className,\\n        )}\\n        data-slot=\\\"accordion-trigger\\\"\\n        {...props}\\n      >\\n        {children}\\n        <ChevronDownIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n          size={16}\\n        />\\n      </AccordionPrimitive.Trigger>\\n    </AccordionPrimitive.Header>\\n  );\\n}\\n\\nfunction AccordionContent({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\\n  return (\\n    <AccordionPrimitive.Content\\n      className=\\\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\\\"\\n      data-slot=\\\"accordion-content\\\"\\n      {...props}\\n    >\\n      <div className={cn(\\\"pt-0 pb-4\\\", className)}>{children}</div>\\n    </AccordionPrimitive.Content>\\n  );\\n}\\n\\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ],\n  \"tailwind\": {\n    \"config\": {\n      \"theme\": {\n        \"extend\": {\n          \"animation\": {\n            \"accordion-down\": \"accordion-down 0.2s ease-out\",\n            \"accordion-up\": \"accordion-up 0.2s ease-out\"\n          },\n          \"keyframes\": {\n            \"accordion-down\": {\n              \"from\": {\n                \"height\": \"0\"\n              },\n              \"to\": {\n                \"height\": \"var(--radix-accordion-content-height)\"\n              }\n            },\n            \"accordion-up\": {\n              \"from\": {\n                \"height\": \"var(--radix-accordion-content-height)\"\n              },\n              \"to\": {\n                \"height\": \"0\"\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/alert-dialog.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"alert-dialog\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/alert-dialog.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { AlertDialog as AlertDialogPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { buttonVariants } from \\\"@/registry/default/ui/button\\\";\\n\\nfunction AlertDialog({\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\\n  return <AlertDialogPrimitive.Root data-slot=\\\"alert-dialog\\\" {...props} />;\\n}\\n\\nfunction AlertDialogTrigger({\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\\n  return (\\n    <AlertDialogPrimitive.Trigger data-slot=\\\"alert-dialog-trigger\\\" {...props} />\\n  );\\n}\\n\\nfunction AlertDialogPortal({\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\\n  return (\\n    <AlertDialogPrimitive.Portal data-slot=\\\"alert-dialog-portal\\\" {...props} />\\n  );\\n}\\n\\nfunction AlertDialogOverlay({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\\n  return (\\n    <AlertDialogPrimitive.Overlay\\n      className={cn(\\n        \\\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-dialog-overlay\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AlertDialogContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\\n  return (\\n    <AlertDialogPortal>\\n      <AlertDialogOverlay />\\n      <AlertDialogPrimitive.Content\\n        className={cn(\\n          \\\"-translate-x-1/2 -translate-y-1/2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] gap-4 overflow-y-auto rounded-xl border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-100\\\",\\n          className,\\n        )}\\n        data-slot=\\\"alert-dialog-content\\\"\\n        {...props}\\n      />\\n    </AlertDialogPortal>\\n  );\\n}\\n\\nfunction AlertDialogHeader({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">) {\\n  return (\\n    <div\\n      className={cn(\\\"flex flex-col gap-1 text-center sm:text-left\\\", className)}\\n      data-slot=\\\"alert-dialog-header\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AlertDialogFooter({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">) {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-dialog-footer\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AlertDialogTitle({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\\n  return (\\n    <AlertDialogPrimitive.Title\\n      className={cn(\\\"font-semibold text-lg\\\", className)}\\n      data-slot=\\\"alert-dialog-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AlertDialogDescription({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\\n  return (\\n    <AlertDialogPrimitive.Description\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"alert-dialog-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AlertDialogAction({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\\n  return (\\n    <AlertDialogPrimitive.Action\\n      className={cn(buttonVariants(), className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AlertDialogCancel({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\\n  return (\\n    <AlertDialogPrimitive.Cancel\\n      className={cn(buttonVariants({ variant: \\\"outline\\\" }), className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  AlertDialog,\\n  AlertDialogAction,\\n  AlertDialogCancel,\\n  AlertDialogContent,\\n  AlertDialogDescription,\\n  AlertDialogFooter,\\n  AlertDialogHeader,\\n  AlertDialogOverlay,\\n  AlertDialogPortal,\\n  AlertDialogTitle,\\n  AlertDialogTrigger,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/avatar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"avatar\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/avatar.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Avatar as AvatarPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Avatar({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\\n  return (\\n    <AvatarPrimitive.Root\\n      className={cn(\\n        \\\"relative flex size-8 shrink-0 overflow-hidden rounded-full\\\",\\n        className,\\n      )}\\n      data-slot=\\\"avatar\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AvatarImage({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\\n  return (\\n    <AvatarPrimitive.Image\\n      className={cn(\\\"aspect-square size-full\\\", className)}\\n      data-slot=\\\"avatar-image\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction AvatarFallback({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\\n  return (\\n    <AvatarPrimitive.Fallback\\n      className={cn(\\n        \\\"flex size-full items-center justify-center rounded-[inherit] bg-secondary text-xs\\\",\\n        className,\\n      )}\\n      data-slot=\\\"avatar-fallback\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Avatar, AvatarFallback, AvatarImage };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/badge.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"badge\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/badge.tsx\",\n      \"content\": \"import { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport { Slot } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nconst badgeVariants = cva(\\n  \\\"inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-1.5 font-medium text-xs leading-normal transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:shrink-0\\\",\\n  {\\n    defaultVariants: {\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      variant: {\\n        default:\\n          \\\"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\\\",\\n        destructive:\\n          \\\"border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90\\\",\\n        outline:\\n          \\\"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\\\",\\n        secondary:\\n          \\\"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\\\",\\n      },\\n    },\\n  },\\n);\\n\\nfunction Badge({\\n  className,\\n  variant,\\n  asChild = false,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\"> &\\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\\n  const Comp = asChild ? Slot.Root : \\\"span\\\";\\n\\n  return (\\n    <Comp\\n      className={cn(badgeVariants({ variant }), className)}\\n      data-slot=\\\"badge\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Badge, badgeVariants };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/breadcrumb.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"breadcrumb\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/breadcrumb.tsx\",\n      \"content\": \"import { ChevronRightIcon, MoreHorizontal } from \\\"lucide-react\\\";\\nimport { Slot } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Breadcrumb({ ...props }: React.ComponentProps<\\\"nav\\\">) {\\n  return <nav aria-label=\\\"breadcrumb\\\" data-slot=\\\"breadcrumb\\\" {...props} />;\\n}\\n\\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\\\"ol\\\">) {\\n  return (\\n    <ol\\n      className={cn(\\n        \\\"flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5\\\",\\n        className,\\n      )}\\n      data-slot=\\\"breadcrumb-list\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\\\"li\\\">) {\\n  return (\\n    <li\\n      className={cn(\\\"inline-flex items-center gap-1.5\\\", className)}\\n      data-slot=\\\"breadcrumb-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction BreadcrumbLink({\\n  asChild,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"a\\\"> & {\\n  asChild?: boolean;\\n}) {\\n  const Comp = asChild ? Slot.Root : \\\"a\\\";\\n\\n  return (\\n    <Comp\\n      className={cn(\\\"transition-colors hover:text-foreground\\\", className)}\\n      data-slot=\\\"breadcrumb-link\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\\\"span\\\">) {\\n  return (\\n    // biome-ignore lint(a11y/useFocusableInteractive): known\\n    <span\\n      aria-current=\\\"page\\\"\\n      aria-disabled=\\\"true\\\"\\n      className={cn(\\\"font-normal text-foreground\\\", className)}\\n      data-slot=\\\"breadcrumb-page\\\"\\n      role=\\\"link\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction BreadcrumbSeparator({\\n  children,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"li\\\">) {\\n  return (\\n    <li\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      data-slot=\\\"breadcrumb-separator\\\"\\n      role=\\\"presentation\\\"\\n      {...props}\\n    >\\n      {children ?? <ChevronRightIcon size={16} />}\\n    </li>\\n  );\\n}\\n\\nfunction BreadcrumbEllipsis({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">) {\\n  return (\\n    <span\\n      aria-hidden=\\\"true\\\"\\n      className={cn(\\\"flex size-5 items-center justify-center\\\", className)}\\n      data-slot=\\\"breadcrumb-ellipsis\\\"\\n      role=\\\"presentation\\\"\\n      {...props}\\n    >\\n      <MoreHorizontal size={16} />\\n      <span className=\\\"sr-only\\\">More</span>\\n    </span>\\n  );\\n}\\n\\nexport {\\n  Breadcrumb,\\n  BreadcrumbEllipsis,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/button.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/button.tsx\",\n      \"content\": \"import { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport { Slot } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nconst buttonVariants = cva(\\n  \\\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n  {\\n    defaultVariants: {\\n      size: \\\"default\\\",\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      size: {\\n        default: \\\"h-9 px-4 py-2\\\",\\n        icon: \\\"size-9\\\",\\n        lg: \\\"h-10 rounded-md px-8\\\",\\n        sm: \\\"h-8 rounded-md px-3 text-xs\\\",\\n      },\\n      variant: {\\n        default:\\n          \\\"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\\\",\\n        destructive:\\n          \\\"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\\\",\\n        ghost: \\\"hover:bg-accent hover:text-accent-foreground\\\",\\n        link: \\\"text-primary underline-offset-4 hover:underline\\\",\\n        outline:\\n          \\\"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\\\",\\n        secondary:\\n          \\\"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\\\",\\n      },\\n    },\\n  },\\n);\\n\\nfunction Button({\\n  className,\\n  variant,\\n  size,\\n  asChild = false,\\n  ...props\\n}: React.ComponentProps<\\\"button\\\"> &\\n  VariantProps<typeof buttonVariants> & {\\n    asChild?: boolean;\\n  }) {\\n  const Comp = asChild ? Slot.Root : \\\"button\\\";\\n\\n  return (\\n    <Comp\\n      className={cn(buttonVariants({ className, size, variant }))}\\n      data-slot=\\\"button\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Button, buttonVariants };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/calendar-rac.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"calendar-rac\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"@internationalized/date\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/calendar-rac.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { getLocalTimeZone, today } from \\\"@internationalized/date\\\";\\nimport { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\nimport type { ComponentProps } from \\\"react\\\";\\nimport {\\n  Button,\\n  CalendarCell as CalendarCellRac,\\n  CalendarGridBody as CalendarGridBodyRac,\\n  CalendarGridHeader as CalendarGridHeaderRac,\\n  CalendarGrid as CalendarGridRac,\\n  CalendarHeaderCell as CalendarHeaderCellRac,\\n  Calendar as CalendarRac,\\n  composeRenderProps,\\n  Heading as HeadingRac,\\n  RangeCalendar as RangeCalendarRac,\\n} from \\\"react-aria-components\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\ninterface BaseCalendarProps {\\n  className?: string;\\n}\\n\\ntype CalendarProps = ComponentProps<typeof CalendarRac> & BaseCalendarProps;\\ntype RangeCalendarProps = ComponentProps<typeof RangeCalendarRac> &\\n  BaseCalendarProps;\\n\\nfunction CalendarHeader() {\\n  return (\\n    <header className=\\\"flex w-full items-center gap-1 pb-1\\\">\\n      <Button\\n        className=\\\"flex size-9 items-center justify-center rounded-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n        slot=\\\"previous\\\"\\n      >\\n        <ChevronLeftIcon size={16} />\\n      </Button>\\n      <HeadingRac className=\\\"grow text-center font-medium text-sm\\\" />\\n      <Button\\n        className=\\\"flex size-9 items-center justify-center rounded-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n        slot=\\\"next\\\"\\n      >\\n        <ChevronRightIcon size={16} />\\n      </Button>\\n    </header>\\n  );\\n}\\n\\nfunction CalendarGridComponent({ isRange = false }: { isRange?: boolean }) {\\n  const now = today(getLocalTimeZone());\\n\\n  return (\\n    <CalendarGridRac>\\n      <CalendarGridHeaderRac>\\n        {(day) => (\\n          <CalendarHeaderCellRac className=\\\"size-9 rounded-md p-0 font-medium text-muted-foreground/80 text-xs\\\">\\n            {day}\\n          </CalendarHeaderCellRac>\\n        )}\\n      </CalendarGridHeaderRac>\\n      <CalendarGridBodyRac className=\\\"[&_td]:px-0 [&_td]:py-px\\\">\\n        {(date) => (\\n          <CalendarCellRac\\n            className={cn(\\n              \\\"relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 font-normal text-foreground text-sm outline-none duration-150 [transition-property:color,background-color,border-radius,box-shadow] data-disabled:pointer-events-none data-unavailable:pointer-events-none data-focus-visible:z-10 data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-unavailable:line-through data-disabled:opacity-30 data-unavailable:opacity-30 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\",\\n              // Range-specific styles\\n              isRange &&\\n                \\\"data-invalid:data-selection-end:bg-destructive data-invalid:data-selection-start:bg-destructive data-invalid:data-selection-end:text-white data-invalid:data-selection-start:text-white data-selected:rounded-none data-selection-start:rounded-s-md data-selection-end:rounded-e-md data-invalid:bg-red-100 data-selected:bg-accent data-selection-end:bg-primary data-selection-start:bg-primary data-selected:text-foreground data-selection-end:text-primary-foreground data-selection-start:text-primary-foreground\\\",\\n              // Today indicator styles\\n              date.compare(now) === 0 &&\\n                cn(\\n                  \\\"after:-translate-x-1/2 after:pointer-events-none after:absolute after:start-1/2 after:bottom-1 after:z-10 after:size-[3px] after:rounded-full after:bg-primary\\\",\\n                  isRange\\n                    ? \\\"data-selection-end:after:bg-background data-selection-start:after:bg-background\\\"\\n                    : \\\"data-selected:after:bg-background\\\",\\n                ),\\n            )}\\n            date={date}\\n          />\\n        )}\\n      </CalendarGridBodyRac>\\n    </CalendarGridRac>\\n  );\\n}\\n\\nfunction Calendar({ className, ...props }: CalendarProps) {\\n  return (\\n    <CalendarRac\\n      {...props}\\n      className={composeRenderProps(className, (className) =>\\n        cn(\\\"w-fit\\\", className),\\n      )}\\n    >\\n      <CalendarHeader />\\n      <CalendarGridComponent />\\n    </CalendarRac>\\n  );\\n}\\n\\nfunction RangeCalendar({ className, ...props }: RangeCalendarProps) {\\n  return (\\n    <RangeCalendarRac\\n      {...props}\\n      className={composeRenderProps(className, (className) =>\\n        cn(\\\"w-fit\\\", className),\\n      )}\\n    >\\n      <CalendarHeader />\\n      <CalendarGridComponent isRange />\\n    </RangeCalendarRac>\\n  );\\n}\\n\\nexport { Calendar, RangeCalendar };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/calendar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"calendar\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"react-day-picker\",\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/calendar.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\nimport { DayPicker } from \\\"react-day-picker\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { buttonVariants } from \\\"@/registry/default/ui/button\\\";\\n\\nfunction Calendar({\\n  className,\\n  classNames,\\n  showOutsideDays = true,\\n  components: userComponents,\\n  ...props\\n}: React.ComponentProps<typeof DayPicker>) {\\n  const defaultClassNames = {\\n    button_next: cn(\\n      buttonVariants({ variant: \\\"ghost\\\" }),\\n      \\\"size-9 p-0 text-muted-foreground/80 hover:text-foreground\\\",\\n    ),\\n    button_previous: cn(\\n      buttonVariants({ variant: \\\"ghost\\\" }),\\n      \\\"size-9 p-0 text-muted-foreground/80 hover:text-foreground\\\",\\n    ),\\n    caption_label: \\\"text-sm font-medium\\\",\\n    day: \\\"group size-9 px-0 py-px text-sm\\\",\\n    day_button:\\n      \\\"relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 text-foreground group-[[data-selected]:not(.range-middle)]:[transition-property:color,background-color,border-radius,box-shadow] group-[[data-selected]:not(.range-middle)]:duration-150 group-data-disabled:pointer-events-none focus-visible:z-10 hover:not-in-data-selected:bg-accent group-data-selected:bg-primary hover:not-in-data-selected:text-foreground group-data-selected:text-primary-foreground group-data-disabled:text-foreground/30 group-data-disabled:line-through group-data-outside:text-foreground/30 group-data-selected:group-data-outside:text-primary-foreground outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] group-[.range-start:not(.range-end)]:rounded-e-none group-[.range-end:not(.range-start)]:rounded-s-none group-[.range-middle]:rounded-none group-[.range-middle]:group-data-selected:bg-accent group-[.range-middle]:group-data-selected:text-foreground\\\",\\n    hidden: \\\"invisible\\\",\\n    month: \\\"w-full\\\",\\n    month_caption:\\n      \\\"relative mx-10 mb-1 flex h-9 items-center justify-center z-20\\\",\\n    months: \\\"relative flex flex-col sm:flex-row gap-4\\\",\\n    nav: \\\"absolute top-0 flex w-full justify-between z-10\\\",\\n    outside:\\n      \\\"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\\\",\\n    range_end: \\\"range-end\\\",\\n    range_middle: \\\"range-middle\\\",\\n    range_start: \\\"range-start\\\",\\n    today:\\n      \\\"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors\\\",\\n    week_number: \\\"size-9 p-0 text-xs font-medium text-muted-foreground/80\\\",\\n    weekday: \\\"size-9 p-0 text-xs font-medium text-muted-foreground/80\\\",\\n  };\\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\\n    defaultClassNames,\\n  ).reduce(\\n    (acc, key) => {\\n      const userClass = classNames?.[key as keyof typeof classNames];\\n      const baseClass =\\n        defaultClassNames[key as keyof typeof defaultClassNames];\\n\\n      acc[key as keyof typeof defaultClassNames] = userClass\\n        ? cn(baseClass, userClass)\\n        : baseClass;\\n\\n      return acc;\\n    },\\n    { ...defaultClassNames } as typeof defaultClassNames,\\n  );\\n\\n  const defaultComponents = {\\n    Chevron: (props: {\\n      className?: string;\\n      size?: number;\\n      disabled?: boolean;\\n      orientation?: \\\"left\\\" | \\\"right\\\" | \\\"up\\\" | \\\"down\\\";\\n    }) => {\\n      if (props.orientation === \\\"left\\\") {\\n        return <ChevronLeftIcon size={16} {...props} aria-hidden=\\\"true\\\" />;\\n      }\\n      return <ChevronRightIcon size={16} {...props} aria-hidden=\\\"true\\\" />;\\n    },\\n  };\\n\\n  const mergedComponents = {\\n    ...defaultComponents,\\n    ...userComponents,\\n  };\\n\\n  return (\\n    <DayPicker\\n      className={cn(\\\"w-fit\\\", className)}\\n      classNames={mergedClassNames}\\n      components={mergedComponents}\\n      showOutsideDays={showOutsideDays}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Calendar };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/checkbox-tree.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"checkbox-tree\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/checkbox-tree.tsx\",\n      \"content\": \"/**\\n * IMPORTANT: This component was built for demo purposes only and has not been tested in production.\\n * It serves as a proof of concept for a checkbox tree implementation.\\n * If you're interested in collaborating to create a more robust, production-ready\\n * headless component, your contributions are welcome!\\n */\\n\\n\\\"use client\\\";\\n\\nimport type React from \\\"react\\\";\\nimport { useCallback, useMemo, useState } from \\\"react\\\";\\n\\ninterface TreeNode {\\n  id: string;\\n  label: string;\\n  defaultChecked?: boolean;\\n  children?: TreeNode[];\\n}\\n\\nfunction useCheckboxTree(initialTree: TreeNode) {\\n  const initialCheckedNodes = useMemo(() => {\\n    const checkedSet = new Set<string>();\\n    const initializeCheckedNodes = (node: TreeNode) => {\\n      if (node.defaultChecked) {\\n        checkedSet.add(node.id);\\n      }\\n      node.children?.forEach(initializeCheckedNodes);\\n    };\\n    initializeCheckedNodes(initialTree);\\n    return checkedSet;\\n  }, [initialTree]);\\n\\n  const [checkedNodes, setCheckedNodes] =\\n    useState<Set<string>>(initialCheckedNodes);\\n\\n  const isChecked = useCallback(\\n    (node: TreeNode): boolean | \\\"indeterminate\\\" => {\\n      if (!node.children) {\\n        return checkedNodes.has(node.id);\\n      }\\n\\n      const childrenChecked = node.children.map((child) => isChecked(child));\\n      if (childrenChecked.every((status) => status === true)) {\\n        return true;\\n      }\\n      if (\\n        childrenChecked.some(\\n          (status) => status === true || status === \\\"indeterminate\\\",\\n        )\\n      ) {\\n        return \\\"indeterminate\\\";\\n      }\\n      return false;\\n    },\\n    [checkedNodes],\\n  );\\n\\n  const handleCheck = useCallback(\\n    (node: TreeNode) => {\\n      const newCheckedNodes = new Set(checkedNodes);\\n\\n      const toggleNode = (n: TreeNode, check: boolean) => {\\n        if (check) {\\n          newCheckedNodes.add(n.id);\\n        } else {\\n          newCheckedNodes.delete(n.id);\\n        }\\n        for (const child of n.children ?? []) {\\n          toggleNode(child, check);\\n        }\\n      };\\n\\n      const currentStatus = isChecked(node);\\n      const newCheck = currentStatus !== true;\\n\\n      toggleNode(node, newCheck);\\n      setCheckedNodes(newCheckedNodes);\\n    },\\n    [checkedNodes, isChecked],\\n  );\\n\\n  return { handleCheck, isChecked };\\n}\\n\\ninterface CheckboxTreeProps {\\n  tree: TreeNode;\\n  renderNode: (props: {\\n    node: TreeNode;\\n    isChecked: boolean | \\\"indeterminate\\\";\\n    onCheckedChange: () => void;\\n    children: React.ReactNode;\\n  }) => React.ReactNode;\\n}\\n\\nexport function CheckboxTree({ tree, renderNode }: CheckboxTreeProps) {\\n  const { isChecked, handleCheck } = useCheckboxTree(tree);\\n\\n  const renderTreeNode = (node: TreeNode): React.ReactNode => {\\n    const children = node.children?.map(renderTreeNode);\\n\\n    return renderNode({\\n      children,\\n      isChecked: isChecked(node),\\n      node,\\n      onCheckedChange: () => handleCheck(node),\\n    });\\n  };\\n\\n  return renderTreeNode(tree);\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/checkbox.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"checkbox\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/checkbox.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Checkbox as CheckboxPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Checkbox({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\\n  return (\\n    <CheckboxPrimitive.Root\\n      className={cn(\\n        \\\"peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40\\\",\\n        className,\\n      )}\\n      data-slot=\\\"checkbox\\\"\\n      {...props}\\n    >\\n      <CheckboxPrimitive.Indicator\\n        className=\\\"grid place-content-center text-current\\\"\\n        data-slot=\\\"checkbox-indicator\\\"\\n      >\\n        {props.checked === \\\"indeterminate\\\" ? (\\n          <svg\\n            fill=\\\"currentcolor\\\"\\n            height=\\\"9\\\"\\n            viewBox=\\\"0 0 9 9\\\"\\n            width=\\\"9\\\"\\n            xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n          >\\n            <path\\n              clipRule=\\\"evenodd\\\"\\n              d=\\\"M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z\\\"\\n              fillRule=\\\"evenodd\\\"\\n            />\\n          </svg>\\n        ) : (\\n          <svg\\n            fill=\\\"currentcolor\\\"\\n            height=\\\"9\\\"\\n            viewBox=\\\"0 0 9 9\\\"\\n            width=\\\"9\\\"\\n            xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n          >\\n            <path\\n              clipRule=\\\"evenodd\\\"\\n              d=\\\"M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z\\\"\\n              fillRule=\\\"evenodd\\\"\\n            />\\n          </svg>\\n        )}\\n      </CheckboxPrimitive.Indicator>\\n    </CheckboxPrimitive.Root>\\n  );\\n}\\n\\nexport { Checkbox };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/collapsible.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"collapsible\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/collapsible.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Collapsible as CollapsiblePrimitive } from \\\"radix-ui\\\";\\n\\nfunction Collapsible({\\n  ...props\\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\\n  return <CollapsiblePrimitive.Root data-slot=\\\"collapsible\\\" {...props} />;\\n}\\n\\nfunction CollapsibleTrigger({\\n  ...props\\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\\n  return (\\n    <CollapsiblePrimitive.CollapsibleTrigger\\n      data-slot=\\\"collapsible-trigger\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CollapsibleContent({\\n  ...props\\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\\n  return (\\n    <CollapsiblePrimitive.CollapsibleContent\\n      data-slot=\\\"collapsible-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/command.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"command\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"cmdk\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/command.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Command as CommandPrimitive } from \\\"cmdk\\\";\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n} from \\\"@/registry/default/ui/dialog\\\";\\n\\nfunction Command({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive>) {\\n  return (\\n    <CommandPrimitive\\n      className={cn(\\n        \\\"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandDialog({\\n  title = \\\"Command Palette\\\",\\n  description = \\\"Search for a command to run...\\\",\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof Dialog> & {\\n  title?: string;\\n  description?: string;\\n}) {\\n  return (\\n    <Dialog {...props}>\\n      <DialogHeader className=\\\"sr-only\\\">\\n        <DialogTitle>{title}</DialogTitle>\\n        <DialogDescription>{description}</DialogDescription>\\n      </DialogHeader>\\n      <DialogContent className=\\\"overflow-hidden p-0 sm:max-w-lg [&>button:last-child]:hidden\\\">\\n        <Command className=\\\"max-h-[100svh] **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2\\\">\\n          {children}\\n        </Command>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\\nfunction CommandInput({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\\n  return (\\n    <div\\n      className=\\\"flex items-center border-input border-b px-5\\\"\\n      cmdk-input-wrapper=\\\"\\\"\\n    >\\n      <SearchIcon className=\\\"me-3 text-muted-foreground/80\\\" size={20} />\\n      <CommandPrimitive.Input\\n        className={cn(\\n          \\\"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50\\\",\\n          className,\\n        )}\\n        data-slot=\\\"command-input-wrapper\\\"\\n        {...props}\\n      />\\n    </div>\\n  );\\n}\\n\\nfunction CommandList({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\\n  return (\\n    <CommandPrimitive.List\\n      className={cn(\\n        \\\"max-h-80 flex-1 overflow-y-auto overflow-x-hidden\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command-list\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandEmpty({\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\\n  return (\\n    <CommandPrimitive.Empty\\n      className=\\\"py-6 text-center text-sm\\\"\\n      data-slot=\\\"command-empty\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandGroup({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\\n  return (\\n    <CommandPrimitive.Group\\n      className={cn(\\n        \\\"overflow-hidden p-2 text-foreground [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\\n  return (\\n    <CommandPrimitive.Separator\\n      className={cn(\\\"-mx-1 h-px bg-border\\\", className)}\\n      data-slot=\\\"command-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\\n  return (\\n    <CommandPrimitive.Item\\n      className={cn(\\n        \\\"relative flex cursor-default select-none items-center gap-3 rounded-md px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CommandShortcut({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">) {\\n  return (\\n    <kbd\\n      className={cn(\\n        \\\"-me-1 ms-auto inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command-shortcut\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  Command,\\n  CommandDialog,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n  CommandSeparator,\\n  CommandShortcut,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/comp-01.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-01\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-01.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Simple input</Label>\\n      <Input id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-02.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-02\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-02.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>\\n        Required input <span className=\\\"text-destructive\\\">*</span>\\n      </Label>\\n      <Input id={id} placeholder=\\\"Email\\\" required type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"required\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-03.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-03\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-03.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with helper text</Label>\\n      <Input id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        We won&lsquo;t share your email with anyone\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"helper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-04.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-04\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-04.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <Label className=\\\"leading-6\\\" htmlFor={id}>\\n          Input with hint\\n        </Label>\\n        <span className=\\\"text-muted-foreground text-sm\\\">Optional</span>\\n      </div>\\n      <Input id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"hint\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-05.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-05\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-05.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"[--ring:var(--color-indigo-300)] in-[.dark]:[--ring:var(--color-indigo-900)] *:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with colored border and ring</Label>\\n      <Input id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-06.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-06\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-06.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with error</Label>\\n      <Input\\n        aria-invalid\\n        className=\\\"peer\\\"\\n        defaultValue=\\\"invalid@email.com\\\"\\n        id={id}\\n        placeholder=\\\"Email\\\"\\n        type=\\\"email\\\"\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-xs peer-aria-invalid:text-destructive\\\"\\n        role=\\\"alert\\\"\\n      >\\n        Email is invalid\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"error\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-07.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-07\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-07.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with gray background</Label>\\n      <Input\\n        className=\\\"border-transparent bg-muted shadow-none\\\"\\n        id={id}\\n        placeholder=\\\"Email\\\"\\n        type=\\\"email\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-08.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-08\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-08.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Disabled input</Label>\\n      <Input disabled id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"disabled\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-09.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-09\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-09.tsx\",\n      \"content\": \"import { AtSignIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with start icon</Label>\\n      <div className=\\\"relative\\\">\\n        <Input className=\\\"peer ps-9\\\" id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n          <AtSignIcon aria-hidden=\\\"true\\\" size={16} />\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-10\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-10.tsx\",\n      \"content\": \"import { MailIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with end icon</Label>\\n      <div className=\\\"relative\\\">\\n        <Input className=\\\"peer pe-9\\\" id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n          <MailIcon aria-hidden=\\\"true\\\" size={16} />\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-100.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-100\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-100.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [open, setOpen] = useState<boolean>(false);\\n\\n  return (\\n    <Button\\n      aria-expanded={open}\\n      aria-label={open ? \\\"Close menu\\\" : \\\"Open menu\\\"}\\n      className=\\\"group\\\"\\n      onClick={() => setOpen((prevState) => !prevState)}\\n      size=\\\"icon\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      <svg\\n        className=\\\"pointer-events-none\\\"\\n        fill=\\\"none\\\"\\n        height={16}\\n        stroke=\\\"currentColor\\\"\\n        strokeLinecap=\\\"round\\\"\\n        strokeLinejoin=\\\"round\\\"\\n        strokeWidth=\\\"2\\\"\\n        viewBox=\\\"0 0 24 24\\\"\\n        width={16}\\n        xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n      >\\n        <path\\n          className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n          d=\\\"M4 12L20 12\\\"\\n        />\\n        <path\\n          className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n          d=\\\"M4 12H20\\\"\\n        />\\n        <path\\n          className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n          d=\\\"M4 12H20\\\"\\n        />\\n      </svg>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"menu\",\n      \"hamburger\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-101.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-101\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/toggle.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-101.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BookmarkIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  const [bookmarked, setBookmarked] = useState<boolean>(false);\\n  return (\\n    <TooltipProvider>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <div>\\n            <Toggle\\n              aria-label=\\\"Bookmark this\\\"\\n              className=\\\"group size-9 p-0 hover:bg-indigo-50 hover:text-indigo-500 data-[state=on]:bg-indigo-50 data-[state=on]:text-indigo-500\\\"\\n              onPressedChange={setBookmarked}\\n              pressed={bookmarked}\\n            >\\n              <BookmarkIcon aria-hidden=\\\"true\\\" size={16} />\\n            </Toggle>\\n          </div>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n          <p>{bookmarked ? \\\"Remove bookmark\\\" : \\\"Bookmark this\\\"}</p>\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"toggle\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-102.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-102\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-102.tsx\",\n      \"content\": \"import { ChevronDownIcon, ChevronUpIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"-space-x-px inline-flex rounded-md shadow-xs rtl:space-x-reverse\\\">\\n      <Button\\n        aria-label=\\\"Upvote\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <ChevronUpIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <span className=\\\"flex items-center border border-input px-3 font-medium text-sm\\\">\\n        235\\n      </span>\\n      <Button\\n        aria-label=\\\"Downvote\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"vote\",\n      \"counter\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-103.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-103\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-103.tsx\",\n      \"content\": \"import { ChevronDownIcon, ChevronUpIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"-space-x-px inline-flex rounded-full shadow-xs rtl:space-x-reverse\\\">\\n      <Button\\n        aria-label=\\\"Upvote\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-full last:rounded-e-full focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n      >\\n        <ChevronUpIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <span className=\\\"flex items-center bg-primary px-1 font-medium text-primary-foreground text-sm\\\">\\n        235\\n      </span>\\n      <Button\\n        aria-label=\\\"Downvote\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-full last:rounded-e-full focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n      >\\n        <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"vote\",\n      \"counter\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-104.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-104\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-104.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  MinusIcon,\\n  PlusIcon,\\n  Volume1Icon,\\n  Volume2Icon,\\n  VolumeIcon,\\n  VolumeXIcon,\\n} from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [volume, setVolume] = useState(3); // Initialize volume state (0-9)\\n\\n  const decreaseVolume = () => setVolume((prev) => Math.max(0, prev - 1));\\n  const increaseVolume = () => setVolume((prev) => Math.min(6, prev + 1));\\n\\n  // Optimized volume icon selection\\n  const Icon =\\n    volume === 0\\n      ? VolumeXIcon\\n      : volume < 3\\n        ? VolumeIcon\\n        : volume < 5\\n          ? Volume1Icon\\n          : Volume2Icon;\\n\\n  return (\\n    <div\\n      aria-labelledby=\\\"volume-control\\\"\\n      className=\\\"inline-flex items-center\\\"\\n      role=\\\"group\\\"\\n    >\\n      <span className=\\\"sr-only\\\" id=\\\"volume-control\\\">\\n        Volume Control\\n      </span>\\n      <Button\\n        aria-label=\\\"Decrease volume\\\"\\n        className=\\\"rounded-full\\\"\\n        disabled={volume === 0}\\n        onClick={decreaseVolume}\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <MinusIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <div\\n        aria-live=\\\"polite\\\"\\n        className=\\\"flex items-center px-3 font-medium text-sm tabular-nums\\\"\\n      >\\n        <Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n        <span aria-label={`Current volume is ${volume}`} className=\\\"ms-2\\\">\\n          {volume}\\n        </span>\\n      </div>\\n      <Button\\n        aria-label=\\\"Increase volume\\\"\\n        className=\\\"rounded-full\\\"\\n        disabled={volume === 6}\\n        onClick={increaseVolume}\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <PlusIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"volume\",\n      \"controls\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-105.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-105\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-105.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  const [copied, setCopied] = useState<boolean>(false);\\n\\n  const handleCopy = async () => {\\n    try {\\n      // await navigator.clipboard.writeText(\\\"string to copy\\\");\\n      setCopied(true);\\n      setTimeout(() => setCopied(false), 1500);\\n    } catch (err) {\\n      console.error(\\\"Failed to copy text: \\\", err);\\n    }\\n  };\\n\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button\\n            aria-label={copied ? \\\"Copied\\\" : \\\"Copy to clipboard\\\"}\\n            className=\\\"disabled:opacity-100\\\"\\n            disabled={copied}\\n            onClick={handleCopy}\\n            size=\\\"icon\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            <div\\n              className={cn(\\n                \\\"transition-all\\\",\\n                copied ? \\\"scale-100 opacity-100\\\" : \\\"scale-0 opacity-0\\\",\\n              )}\\n            >\\n              <CheckIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"stroke-emerald-500\\\"\\n                size={16}\\n              />\\n            </div>\\n            <div\\n              className={cn(\\n                \\\"absolute transition-all\\\",\\n                copied ? \\\"scale-0 opacity-0\\\" : \\\"scale-100 opacity-100\\\",\\n              )}\\n            >\\n              <CopyIcon aria-hidden=\\\"true\\\" size={16} />\\n            </div>\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n          Click to copy\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"copy\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-106.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-106\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-106.tsx\",\n      \"content\": \"import { FlipHorizontalIcon, FlipVerticalIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"-space-x-px inline-flex rounded-md shadow-xs rtl:space-x-reverse\\\">\\n      <Button\\n        aria-label=\\\"Flip Horizontal\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <FlipHorizontalIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <Button\\n        aria-label=\\\"Flip Vertical\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <FlipVerticalIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"toggle group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-107.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-107\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/toggle-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-107.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  AlignCenterIcon,\\n  AlignJustifyIcon,\\n  AlignLeftIcon,\\n  AlignRightIcon,\\n} from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport {\\n  ToggleGroup,\\n  ToggleGroupItem,\\n} from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Component() {\\n  const [value, setValue] = useState<string>(\\\"center\\\");\\n\\n  return (\\n    <ToggleGroup\\n      className=\\\"inline-flex divide-x divide-background\\\"\\n      onValueChange={(value) => {\\n        if (value) setValue(value);\\n      }}\\n      type=\\\"single\\\"\\n      value={value}\\n    >\\n      <ToggleGroupItem\\n        aria-label=\\\"Align Left\\\"\\n        className=\\\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\\\"\\n        value=\\\"left\\\"\\n      >\\n        <AlignLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem\\n        aria-label=\\\"Align Center\\\"\\n        className=\\\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\\\"\\n        value=\\\"center\\\"\\n      >\\n        <AlignCenterIcon aria-hidden=\\\"true\\\" size={16} />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem\\n        aria-label=\\\"Align Right\\\"\\n        className=\\\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\\\"\\n        value=\\\"right\\\"\\n      >\\n        <AlignRightIcon aria-hidden=\\\"true\\\" size={16} />\\n      </ToggleGroupItem>\\n      <ToggleGroupItem\\n        aria-label=\\\"Align Justify\\\"\\n        className=\\\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\\\"\\n        value=\\\"justify\\\"\\n      >\\n        <AlignJustifyIcon aria-hidden=\\\"true\\\" size={16} />\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"toggle group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-108.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-108\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-108.tsx\",\n      \"content\": \"import { EllipsisIcon, FilesIcon, FilmIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"-space-x-px inline-flex rounded-md shadow-xs rtl:space-x-reverse\\\">\\n      <Button\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <FilesIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n        Files\\n      </Button>\\n      <Button\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <FilmIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n        Media\\n      </Button>\\n      <Button\\n        aria-label=\\\"Menu\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <EllipsisIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"toggle group\",\n      \"dropdown\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-109.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-109\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/toggle-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-109.tsx\",\n      \"content\": \"import {\\n  ToggleGroup,\\n  ToggleGroupItem,\\n} from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Component() {\\n  return (\\n    <ToggleGroup className=\\\"inline-flex\\\" type=\\\"single\\\" variant=\\\"outline\\\">\\n      <ToggleGroupItem value=\\\"left\\\">Left</ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"center\\\">Center</ToggleGroupItem>\\n      <ToggleGroupItem value=\\\"right\\\">Right</ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"toggle group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-11\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-11.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with start inline add-on</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"peer ps-16\\\"\\n          id={id}\\n          placeholder=\\\"google.com\\\"\\n          type=\\\"text\\\"\\n        />\\n        <span className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm peer-disabled:opacity-50\\\">\\n          https://\\n        </span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-110.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-110\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/toggle-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-110.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport {\\n  ToggleGroup,\\n  ToggleGroupItem,\\n} from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Component() {\\n  const [value, setValue] = useState<string>(\\\"left\\\");\\n\\n  return (\\n    <ToggleGroup\\n      onValueChange={(value) => {\\n        if (value) setValue(value);\\n      }}\\n      type=\\\"single\\\"\\n      value={value}\\n      variant=\\\"outline\\\"\\n    >\\n      <ToggleGroupItem className=\\\"flex-1\\\" value=\\\"left\\\">\\n        Left\\n      </ToggleGroupItem>\\n      <ToggleGroupItem className=\\\"flex-1\\\" value=\\\"center\\\">\\n        Center\\n      </ToggleGroupItem>\\n      <ToggleGroupItem className=\\\"flex-1\\\" value=\\\"right\\\">\\n        Right\\n      </ToggleGroupItem>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"toggle group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-111.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-111\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-111.tsx\",\n      \"content\": \"import { QrCodeIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\\\">\\n      <Button\\n        aria-label=\\\"QR code\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n      >\\n        <QrCodeIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <Button className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\">\\n        Sign in\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-112.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-112\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-112.tsx\",\n      \"content\": \"import { SquareArrowOutUpRightIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"-space-x-px inline-flex rounded-md shadow-xs rtl:space-x-reverse\\\">\\n      <Button\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        Preview\\n      </Button>\\n      <Button\\n        aria-label=\\\"Open link\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <SquareArrowOutUpRightIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-113.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-113\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-113.tsx\",\n      \"content\": \"import { ChevronDownIcon, PinIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\\\">\\n      <Button\\n        aria-label=\\\"Options\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n      >\\n        <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <Button className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\">\\n        <PinIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n        Pinned\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"dropdown\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-114.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-114\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-114.tsx\",\n      \"content\": \"import { ChevronDownIcon, GitForkIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\\\">\\n      <Button className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\">\\n        <GitForkIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n        Fork\\n        <span className=\\\"-me-1 ms-1 inline-flex h-5 max-h-full items-center rounded border border-primary-foreground/30 px-1 font-[inherit] font-medium text-[0.625rem] text-primary-foreground/60\\\">\\n          18\\n        </span>\\n      </Button>\\n      <Button\\n        aria-label=\\\"Options\\\"\\n        className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n        size=\\\"icon\\\"\\n      >\\n        <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"dropdown\",\n      \"counter\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-115.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-115\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-115.tsx\",\n      \"content\": \"import { ChevronLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"relative ps-12\\\">\\n      Previous\\n      <span className=\\\"pointer-events-none absolute inset-y-0 start-0 flex w-9 items-center justify-center bg-primary-foreground/15\\\">\\n        <ChevronLeftIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n      </span>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"previous\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-116.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-116\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-116.tsx\",\n      \"content\": \"import { ChevronRightIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"relative pe-12\\\">\\n      Next\\n      <span className=\\\"pointer-events-none absolute inset-y-0 end-0 flex w-9 items-center justify-center bg-primary-foreground/15\\\">\\n        <ChevronRightIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n      </span>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"next\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-117.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-117\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-117.tsx\",\n      \"content\": \"import { ThumbsUpIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"py-0 pe-0\\\" variant=\\\"outline\\\">\\n      <ThumbsUpIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n      Like\\n      <span className=\\\"relative ms-1 inline-flex h-full items-center justify-center rounded-full px-3 font-medium text-muted-foreground text-xs before:absolute before:inset-0 before:left-0 before:w-px before:bg-input\\\">\\n        86\\n      </span>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"like\",\n      \"counter\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-118.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-118\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-118.tsx\",\n      \"content\": \"import { StarIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button>\\n      <StarIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n      <span className=\\\"flex items-baseline gap-2\\\">\\n        Star\\n        <span className=\\\"text-primary-foreground/60 text-xs\\\">729</span>\\n      </span>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"like\",\n      \"counter\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-119.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-119\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-119.tsx\",\n      \"content\": \"import {\\n  RiFacebookFill,\\n  RiGithubFill,\\n  RiGoogleFill,\\n  RiTwitterXFill,\\n} from \\\"@remixicon/react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"inline-flex flex-wrap gap-2\\\">\\n      <Button aria-label=\\\"Login with Google\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <RiGoogleFill aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <Button aria-label=\\\"Login with Facebook\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <RiFacebookFill aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <Button aria-label=\\\"Login with X\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <RiTwitterXFill aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <Button aria-label=\\\"Login with GitHub\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <RiGithubFill aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"social\",\n      \"login\",\n      \"authentication\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-12\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-12.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with end inline add-on</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"peer pe-12\\\"\\n          id={id}\\n          placeholder=\\\"google\\\"\\n          type=\\\"text\\\"\\n        />\\n        <span className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground text-sm peer-disabled:opacity-50\\\">\\n          .com\\n        </span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-120.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-120\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-120.tsx\",\n      \"content\": \"import {\\n  RiFacebookFill,\\n  RiGithubFill,\\n  RiGoogleFill,\\n  RiTwitterXFill,\\n} from \\\"@remixicon/react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-2\\\">\\n      <Button\\n        aria-label=\\\"Login with Google\\\"\\n        className=\\\"flex-1\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <RiGoogleFill\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"text-[#DB4437] dark:text-primary\\\"\\n          size={16}\\n        />\\n      </Button>\\n      <Button\\n        aria-label=\\\"Login with Facebook\\\"\\n        className=\\\"flex-1\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <RiFacebookFill\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"text-[#1877f2] dark:text-primary\\\"\\n          size={16}\\n        />\\n      </Button>\\n      <Button\\n        aria-label=\\\"Login with X\\\"\\n        className=\\\"flex-1\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <RiTwitterXFill\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"text-[#14171a] dark:text-primary\\\"\\n          size={16}\\n        />\\n      </Button>\\n      <Button\\n        aria-label=\\\"Login with GitHub\\\"\\n        className=\\\"flex-1\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <RiGithubFill\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"text-black dark:text-primary\\\"\\n          size={16}\\n        />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"social\",\n      \"login\",\n      \"authentication\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-121.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-121\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-121.tsx\",\n      \"content\": \"import {\\n  RiFacebookFill,\\n  RiGithubFill,\\n  RiGoogleFill,\\n  RiTwitterXFill,\\n} from \\\"@remixicon/react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Button variant=\\\"outline\\\">\\n        <RiGoogleFill\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"me-1 text-[#DB4437] dark:text-white/60\\\"\\n          size={16}\\n        />\\n        Login with Google\\n      </Button>\\n      <Button variant=\\\"outline\\\">\\n        <RiTwitterXFill\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"me-1 text-[#14171a] dark:text-white/60\\\"\\n          size={16}\\n        />\\n        Login with X\\n      </Button>\\n      <Button variant=\\\"outline\\\">\\n        <RiFacebookFill\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"me-1 text-[#1877f2] dark:text-white/60\\\"\\n          size={16}\\n        />\\n        Login with Facebook\\n      </Button>\\n      <Button variant=\\\"outline\\\">\\n        <RiGithubFill\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"me-1 text-[#333333] dark:text-white/60\\\"\\n          size={16}\\n        />\\n        Login with GitHub\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"social\",\n      \"login\",\n      \"authentication\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-122.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-122\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-122.tsx\",\n      \"content\": \"import {\\n  RiFacebookFill,\\n  RiGithubFill,\\n  RiGoogleFill,\\n  RiTwitterXFill,\\n} from \\\"@remixicon/react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Button className=\\\"bg-[#DB4437] text-white after:flex-1 hover:bg-[#DB4437]/90\\\">\\n        <span className=\\\"pointer-events-none me-2 flex-1\\\">\\n          <RiGoogleFill aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n        </span>\\n        Login with Google\\n      </Button>\\n      <Button className=\\\"bg-[#14171a] text-white after:flex-1 hover:bg-[#14171a]/90\\\">\\n        <span className=\\\"pointer-events-none me-2 flex-1\\\">\\n          <RiTwitterXFill aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n        </span>\\n        Login with X\\n      </Button>\\n      <Button className=\\\"bg-[#1877f2] text-white after:flex-1 hover:bg-[#1877f2]/90\\\">\\n        <span className=\\\"pointer-events-none me-2 flex-1\\\">\\n          <RiFacebookFill aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n        </span>\\n        Login with Facebook\\n      </Button>\\n      <Button className=\\\"bg-[#333333] text-white after:flex-1 hover:bg-[#333333]/90\\\">\\n        <span className=\\\"pointer-events-none me-2 flex-1\\\">\\n          <RiGithubFill aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n        </span>\\n        Login with GitHub\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"social\",\n      \"login\",\n      \"authentication\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-123.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-123\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-123.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronDownIcon, ChevronUpIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\\n\\n  const toggleExpand = () => {\\n    setIsExpanded((prevState) => !prevState);\\n  };\\n\\n  return (\\n    <Button\\n      aria-controls=\\\"expandable-content\\\"\\n      aria-expanded={isExpanded}\\n      className=\\\"gap-1\\\"\\n      onClick={toggleExpand}\\n      variant=\\\"ghost\\\" // Use this ID on the element that this button controls\\n    >\\n      {isExpanded ? \\\"Show less\\\" : \\\"Show more\\\"}\\n      {isExpanded ? (\\n        <ChevronUpIcon aria-hidden=\\\"true\\\" className=\\\"-me-1\\\" size={16} />\\n      ) : (\\n        <ChevronDownIcon aria-hidden=\\\"true\\\" className=\\\"-me-1\\\" size={16} />\\n      )}\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"collapsible\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-124.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-124\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-124.tsx\",\n      \"content\": \"import { ChevronLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"gap-1\\\" variant=\\\"link\\\">\\n      <ChevronLeftIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n      Go back\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"back\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-125.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-125\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-125.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CircleUserRoundIcon } from \\\"lucide-react\\\";\\n\\nimport { useFileUpload } from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\\n    useFileUpload({\\n      accept: \\\"image/*\\\",\\n    });\\n\\n  const previewUrl = files[0]?.preview || null;\\n  const fileName = files[0]?.file.name || null;\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <div className=\\\"inline-flex items-center gap-2 align-top\\\">\\n        <div\\n          aria-label={previewUrl ? \\\"Upload preview\\\" : \\\"Default user avatar\\\"}\\n          className=\\\"relative flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input\\\"\\n        >\\n          {previewUrl ? (\\n            <img\\n              alt=\\\"Upload preview\\\"\\n              className=\\\"size-full object-cover\\\"\\n              height={32}\\n              src={previewUrl}\\n              width={32}\\n            />\\n          ) : (\\n            <div aria-hidden=\\\"true\\\">\\n              <CircleUserRoundIcon className=\\\"opacity-60\\\" size={16} />\\n            </div>\\n          )}\\n        </div>\\n        <div className=\\\"relative inline-block\\\">\\n          <Button aria-haspopup=\\\"dialog\\\" onClick={openFileDialog}>\\n            {fileName ? \\\"Change image\\\" : \\\"Upload image\\\"}\\n          </Button>\\n          <input\\n            {...getInputProps()}\\n            aria-label=\\\"Upload image file\\\"\\n            className=\\\"sr-only\\\"\\n            tabIndex={-1}\\n          />\\n        </div>\\n      </div>\\n      {fileName && (\\n        <div className=\\\"inline-flex gap-2 text-xs\\\">\\n          <p aria-live=\\\"polite\\\" className=\\\"truncate text-muted-foreground\\\">\\n            {fileName}\\n          </p>{\\\" \\\"}\\n          <button\\n            aria-label={`Remove ${fileName}`}\\n            className=\\\"font-medium text-destructive hover:underline\\\"\\n            onClick={() => removeFile(files[0]?.id)}\\n            type=\\\"button\\\"\\n          >\\n            Remove\\n          </button>\\n        </div>\\n      )}\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Basic image uploader ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          Docs\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"upload\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"image\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-126.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-126\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-126.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CircleUserRoundIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { useFileUpload } from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\\n    useFileUpload({\\n      accept: \\\"image/*\\\",\\n    });\\n\\n  const previewUrl = files[0]?.preview || null;\\n  const fileName = files[0]?.file.name || null;\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <div className=\\\"relative inline-flex\\\">\\n        <Button\\n          aria-label={previewUrl ? \\\"Change image\\\" : \\\"Upload image\\\"}\\n          className=\\\"relative size-16 overflow-hidden p-0 shadow-none\\\"\\n          onClick={openFileDialog}\\n          variant=\\\"outline\\\"\\n        >\\n          {previewUrl ? (\\n            <img\\n              alt=\\\"Upload preview\\\"\\n              className=\\\"size-full object-cover\\\"\\n              height={64}\\n              src={previewUrl}\\n              style={{ objectFit: \\\"cover\\\" }}\\n              width={64}\\n            />\\n          ) : (\\n            <div aria-hidden=\\\"true\\\">\\n              <CircleUserRoundIcon className=\\\"size-4 opacity-60\\\" />\\n            </div>\\n          )}\\n        </Button>\\n        {previewUrl && (\\n          <Button\\n            aria-label=\\\"Remove image\\\"\\n            className=\\\"-top-2 -right-2 absolute size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\\\"\\n            onClick={() => removeFile(files[0]?.id)}\\n            size=\\\"icon\\\"\\n          >\\n            <XIcon className=\\\"size-3.5\\\" />\\n          </Button>\\n        )}\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload image file\\\"\\n          className=\\\"sr-only\\\"\\n          tabIndex={-1}\\n        />\\n      </div>\\n      {fileName && <p className=\\\"text-muted-foreground text-xs\\\">{fileName}</p>}\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Avatar upload button\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"upload\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"image\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-127.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-127\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-127.tsx\",\n      \"content\": \"import {\\n  ChevronDownIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  ChevronUpIcon,\\n  CircleIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"inline-grid w-fit grid-cols-3 gap-1\\\">\\n      <Button\\n        aria-label=\\\"Pan camera up\\\"\\n        className=\\\"col-start-2\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <ChevronUpIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <Button\\n        aria-label=\\\"Pan camera left\\\"\\n        className=\\\"col-start-1\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <div aria-hidden=\\\"true\\\" className=\\\"flex items-center justify-center\\\">\\n        <CircleIcon className=\\\"opacity-60\\\" size={16} />\\n      </div>\\n      <Button aria-label=\\\"Pan camera right\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n      <Button\\n        aria-label=\\\"Pan camera down\\\"\\n        className=\\\"col-start-2\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-128.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-128\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-128.tsx\",\n      \"content\": \"import { ChevronRightIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"group h-auto gap-4 py-3 text-left\\\" variant=\\\"outline\\\">\\n      <div className=\\\"space-y-1\\\">\\n        <h3>Talent Agency</h3>\\n        <p className=\\\"whitespace-break-spaces font-normal text-muted-foreground\\\">\\n          Matches for your roster\\n        </p>\\n      </div>\\n      <ChevronRightIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n        size={16}\\n      />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-129.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-129\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-129.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [count, setCount] = useState(3);\\n\\n  const handleClick = () => {\\n    setCount(0);\\n  };\\n\\n  return (\\n    <Button\\n      aria-label=\\\"Notifications\\\"\\n      className=\\\"relative\\\"\\n      onClick={handleClick}\\n      size=\\\"icon\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n      {count > 0 && (\\n        <Badge className=\\\"-top-2 -translate-x-1/2 absolute left-full min-w-5 px-1\\\">\\n          {count > 99 ? \\\"99+\\\" : count}\\n        </Badge>\\n      )}\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"dropdown\",\n      \"notification\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-13\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-13.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with inline add-ons</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"peer ps-6 pe-12\\\"\\n          id={id}\\n          placeholder=\\\"0.00\\\"\\n          type=\\\"text\\\"\\n        />\\n        <span className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm peer-disabled:opacity-50\\\">\\n          €\\n        </span>\\n        <span className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground text-sm peer-disabled:opacity-50\\\">\\n          EUR\\n        </span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-130.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-130\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/toggle.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-130.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Component() {\\n  const [theme, setTheme] = useState<string>(\\\"light\\\");\\n\\n  return (\\n    <div>\\n      <Toggle\\n        aria-label={`Switch to ${theme === \\\"dark\\\" ? \\\"light\\\" : \\\"dark\\\"} mode`}\\n        className=\\\"group size-9 data-[state=on]:bg-transparent data-[state=on]:hover:bg-muted\\\"\\n        onPressedChange={() =>\\n          setTheme((prev) => (prev === \\\"dark\\\" ? \\\"light\\\" : \\\"dark\\\"))\\n        }\\n        pressed={theme === \\\"dark\\\"}\\n        variant=\\\"outline\\\"\\n      >\\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\\n        <MoonIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\\\"\\n          size={16}\\n        />\\n        <SunIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\\\"\\n          size={16}\\n        />\\n      </Toggle>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"toggle\",\n      \"darkmode\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-131.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-131\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-131.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuRadioGroup,\\n  DropdownMenuRadioItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nconst options = [\\n  {\\n    description:\\n      \\\"All commits from this branch will be added to the base branch via a commit version.\\\",\\n    label: \\\"Merge pull request\\\",\\n  },\\n  {\\n    description:\\n      \\\"The 6 commits from this branch will be combined into one commit in the base branch.\\\",\\n    label: \\\"Squash and merge\\\",\\n  },\\n  {\\n    description:\\n      \\\"The 6 commits from this branch will be rebased and added to the base branch.\\\",\\n    label: \\\"Rebase and merge\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const [selectedIndex, setSelectedIndex] = useState(\\\"0\\\");\\n\\n  return (\\n    <div className=\\\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\\\">\\n      <Button className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\">\\n        {options[Number(selectedIndex)].label}\\n      </Button>\\n      <DropdownMenu>\\n        <DropdownMenuTrigger asChild>\\n          <Button\\n            aria-label=\\\"Options\\\"\\n            className=\\\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\\\"\\n            size=\\\"icon\\\"\\n          >\\n            <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n        </DropdownMenuTrigger>\\n        <DropdownMenuContent\\n          align=\\\"end\\\"\\n          className=\\\"max-w-64 md:max-w-xs\\\"\\n          side=\\\"bottom\\\"\\n          sideOffset={4}\\n        >\\n          <DropdownMenuRadioGroup\\n            onValueChange={setSelectedIndex}\\n            value={selectedIndex}\\n          >\\n            {options.map((option, index) => (\\n              <DropdownMenuRadioItem\\n                className=\\\"items-start [&>span]:pt-1.5\\\"\\n                key={option.label}\\n                value={String(index)}\\n              >\\n                <div className=\\\"flex flex-col gap-1\\\">\\n                  <span className=\\\"font-medium text-sm\\\">{option.label}</span>\\n                  <span className=\\\"text-muted-foreground text-xs\\\">\\n                    {option.description}\\n                  </span>\\n                </div>\\n              </DropdownMenuRadioItem>\\n            ))}\\n          </DropdownMenuRadioGroup>\\n        </DropdownMenuContent>\\n      </DropdownMenu>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"dropdown\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-132.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-132\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-132.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-center gap-2\\\">\\n      <Checkbox id={id} />\\n      <Label htmlFor={id}>Simple checkbox</Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-133.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-133\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-133.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState<boolean | \\\"indeterminate\\\">(\\n    \\\"indeterminate\\\",\\n  );\\n\\n  return (\\n    <div className=\\\"flex items-center gap-2\\\">\\n      <Checkbox checked={checked} id={id} onCheckedChange={setChecked} />\\n      <Label htmlFor={id}>Indeterminate checkbox</Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-134.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-134\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-134.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-center gap-2 [--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] in-[.dark]:[--primary:var(--color-indigo-500)] in-[.dark]:[--ring:var(--color-indigo-900)]\\\">\\n      <Checkbox defaultChecked id={id} />\\n      <Label htmlFor={id}>Colored checkbox</Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-135.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-135\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-135.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-center gap-2\\\">\\n      <Checkbox disabled id={id} />\\n      <Label htmlFor={id}>Disabled checkbox</Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"disabled\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-136.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-136\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-136.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-center gap-2\\\">\\n      <Checkbox defaultChecked id={id} />\\n      <Label className=\\\"peer-data-[state=checked]:line-through\\\" htmlFor={id}>\\n        Simple todo item\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-137.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-137\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-137.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-center gap-2\\\">\\n      <Checkbox className=\\\"rounded-full\\\" defaultChecked id={id} />\\n      <Label\\n        className=\\\"peer-data-[state=checked]:line-throgh after:-translate-y-1/2 relative [--primary:var(--color-emerald-500)] after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:scale-x-0 after:bg-muted-foreground after:transition-transform after:ease-in-out peer-data-[state=checked]:text-muted-foreground peer-data-[state=checked]:after:origin-bottom peer-data-[state=checked]:after:scale-x-100\\\"\\n        htmlFor={id}\\n      >\\n        Fancy todo item\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-138.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-138\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-138.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-center gap-2\\\">\\n      <Checkbox id={id} />\\n      <Label htmlFor={id}>\\n        I agree to the{\\\" \\\"}\\n        <a\\n          className=\\\"underline\\\"\\n          href=\\\"https://coss.com/origin\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          terms of service\\n        </a>\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"login\",\n      \"authentication\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-139.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-139\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-139.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex gap-6\\\">\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Checkbox id={`${id}-a`} />\\n        <Label htmlFor={`${id}-a`}>React</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Checkbox id={`${id}-b`} />\\n        <Label htmlFor={`${id}-b`}>Next.js</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Checkbox id={`${id}-c`} />\\n        <Label htmlFor={`${id}-c`}>Astro</Label>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-14\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-14.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with start add-on</Label>\\n      <div className=\\\"flex rounded-md shadow-xs\\\">\\n        <span className=\\\"-z-10 inline-flex items-center rounded-s-md border border-input bg-background px-3 text-muted-foreground text-sm\\\">\\n          https://\\n        </span>\\n        <Input\\n          className=\\\"-ms-px rounded-s-none shadow-none\\\"\\n          id={id}\\n          placeholder=\\\"google.com\\\"\\n          type=\\\"text\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-140.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-140\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-140.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-center justify-between gap-2\\\">\\n      <Checkbox className=\\\"order-1\\\" id={id} />\\n      <Label htmlFor={id}>Right aligned checkbox</Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-141.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-141\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-141.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-start gap-2\\\">\\n      <Checkbox aria-describedby={`${id}-description`} id={id} />\\n      <div className=\\\"grid grow gap-2\\\">\\n        <Label htmlFor={id}>\\n          Label{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (Sublabel)\\n          </span>\\n        </Label>\\n        <p className=\\\"text-muted-foreground text-xs\\\" id={`${id}-description`}>\\n          You can use this checkbox with a label and a description.\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-142.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-142\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-142.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useEffect, useId, useRef, useState } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const checkboxId = useId();\\n  const inputId = useId();\\n  const [checked, setChecked] = useState<boolean | \\\"indeterminate\\\">(false);\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  useEffect(() => {\\n    if (checked === true && inputRef.current) {\\n      inputRef.current.focus();\\n    }\\n  }, [checked]);\\n\\n  return (\\n    <div>\\n      <div className=\\\"flex items-start gap-2\\\">\\n        <Checkbox\\n          aria-controls={inputId}\\n          aria-describedby={`${checkboxId}-description`}\\n          checked={checked}\\n          id={checkboxId}\\n          onCheckedChange={setChecked}\\n        />\\n        <div className=\\\"grow\\\">\\n          <div className=\\\"grid gap-2\\\">\\n            <Label htmlFor={checkboxId}>Checkbox with expansion</Label>\\n            <p\\n              className=\\\"text-muted-foreground text-xs\\\"\\n              id={`${checkboxId}-description`}\\n            >\\n              You can use this checkbox with a label and a description.\\n            </p>\\n          </div>\\n          {/* Expandable field */}\\n          <div\\n            aria-labelledby={checkboxId}\\n            className=\\\"grid transition-all ease-in-out data-[state=collapsed]:grid-rows-[0fr] data-[state=expanded]:grid-rows-[1fr] data-[state=collapsed]:opacity-0 data-[state=expanded]:opacity-100\\\"\\n            data-state={checked ? \\\"expanded\\\" : \\\"collapsed\\\"}\\n            id={inputId}\\n            role=\\\"region\\\"\\n          >\\n            <div className=\\\"-m-2 pointer-events-none overflow-hidden p-2\\\">\\n              <div className=\\\"pointer-events-auto mt-3\\\">\\n                <Input\\n                  aria-label=\\\"Additional Information\\\"\\n                  disabled={!checked}\\n                  id=\\\"checkbox-11-additional-info\\\"\\n                  placeholder=\\\"Enter details\\\"\\n                  ref={inputRef}\\n                  type=\\\"text\\\"\\n                />\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"collapsible\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-143.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-143\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-143.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-start gap-2\\\">\\n      <Checkbox\\n        aria-describedby={`${id}-description`}\\n        className=\\\"order-1\\\"\\n        id={id}\\n      />\\n      <div className=\\\"grid grow gap-2\\\">\\n        <Label htmlFor={id}>\\n          Label{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (Sublabel)\\n          </span>\\n        </Label>\\n        <p className=\\\"text-muted-foreground text-xs\\\" id={`${id}-description`}>\\n          You can use this checkbox with a label and a description.\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-144.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-144\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-144.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n      <Checkbox\\n        aria-describedby={`${id}-description`}\\n        className=\\\"order-1 after:absolute after:inset-0\\\"\\n        id={id}\\n      />\\n      <div className=\\\"grid grow gap-2\\\">\\n        <Label htmlFor={id}>\\n          Label{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (Sublabel)\\n          </span>\\n        </Label>\\n        <p className=\\\"text-muted-foreground text-xs\\\" id={`${id}-description`}>\\n          A short description goes here.\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-145.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-145\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-145.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n      <Checkbox\\n        aria-describedby={`${id}-description`}\\n        className=\\\"order-1 after:absolute after:inset-0\\\"\\n        id={id}\\n      />\\n      <div className=\\\"flex grow items-start gap-3\\\">\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0\\\"\\n          height={24}\\n          viewBox=\\\"0 0 32 24\\\"\\n          width={32}\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <rect fill=\\\"#252525\\\" height=\\\"24\\\" rx=\\\"4\\\" width=\\\"32\\\" />\\n          <path\\n            d=\\\"M19.0537 6.49742H12.9282V17.5026H19.0537V6.49742Z\\\"\\n            fill=\\\"#FF5A00\\\"\\n          />\\n          <path\\n            d=\\\"M13.3359 12C13.3359 9.76408 14.3871 7.77961 16 6.49741C14.8129 5.56408 13.3155 5 11.6822 5C7.81295 5 4.68221 8.13074 4.68221 12C4.68221 15.8693 7.81295 19 11.6822 19C13.3155 19 14.8129 18.4359 16 17.5026C14.3848 16.2385 13.3359 14.2359 13.3359 12Z\\\"\\n            fill=\\\"#EB001B\\\"\\n          />\\n          <path\\n            d=\\\"M27.3178 12C27.3178 15.8693 24.1871 19 20.3178 19C18.6845 19 17.1871 18.4359 16 17.5026C17.6333 16.2181 18.6641 14.2359 18.6641 12C18.6641 9.76408 17.6129 7.77961 16 6.49741C17.1848 5.56408 18.6822 5 20.3155 5C24.1871 5 27.3178 8.15113 27.3178 12Z\\\"\\n            fill=\\\"#F79E1B\\\"\\n          />\\n        </svg>\\n        <div className=\\\"grid gap-2\\\">\\n          <Label htmlFor={id}>\\n            Label{\\\" \\\"}\\n            <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n              (Sublabel)\\n            </span>\\n          </Label>\\n          <p className=\\\"text-muted-foreground text-xs\\\" id={`${id}-description`}>\\n            A short description goes here.\\n          </p>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-146.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-146\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-146.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n      <Checkbox\\n        aria-describedby={`${id}-description`}\\n        className=\\\"order-1 after:absolute after:inset-0\\\"\\n        id={id}\\n      />\\n      <div className=\\\"flex grow items-center gap-3\\\">\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0\\\"\\n          height={32}\\n          width={32}\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <circle cx=\\\"16\\\" cy=\\\"16\\\" fill=\\\"#121212\\\" r=\\\"16\\\" />\\n          <g clipPath=\\\"url(#sb-a)\\\">\\n            <path\\n              d=\\\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\\\"\\n              fill=\\\"url(#sb-b)\\\"\\n            />\\n            <path\\n              d=\\\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\\\"\\n              fill=\\\"url(#sb-c)\\\"\\n              fillOpacity=\\\".2\\\"\\n            />\\n            <path\\n              d=\\\"M14.375 6.367c.506-.638 1.532-.289 1.544.525l.078 11.903H8.094c-1.45 0-2.258-1.674-1.357-2.81l7.638-9.618Z\\\"\\n              fill=\\\"#3ECF8E\\\"\\n            />\\n          </g>\\n          <defs>\\n            <linearGradient\\n              gradientUnits=\\\"userSpaceOnUse\\\"\\n              id=\\\"sb-b\\\"\\n              x1=\\\"15.907\\\"\\n              x2=\\\"23.02\\\"\\n              y1=\\\"15.73\\\"\\n              y2=\\\"18.713\\\"\\n            >\\n              <stop stopColor=\\\"#249361\\\" />\\n              <stop offset=\\\"1\\\" stopColor=\\\"#3ECF8E\\\" />\\n            </linearGradient>\\n            <linearGradient\\n              gradientUnits=\\\"userSpaceOnUse\\\"\\n              id=\\\"sb-c\\\"\\n              x1=\\\"12.753\\\"\\n              x2=\\\"15.997\\\"\\n              y1=\\\"11.412\\\"\\n              y2=\\\"17.519\\\"\\n            >\\n              <stop />\\n              <stop offset=\\\"1\\\" stopOpacity=\\\"0\\\" />\\n            </linearGradient>\\n            <clipPath id=\\\"sb-a\\\">\\n              <path d=\\\"M6.354 6h19.292v20H6.354z\\\" fill=\\\"#fff\\\" />\\n            </clipPath>\\n          </defs>\\n        </svg>\\n        <div className=\\\"grid gap-2\\\">\\n          <Label htmlFor={id}>\\n            Label{\\\" \\\"}\\n            <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n              (Sublabel)\\n            </span>\\n          </Label>\\n          <p className=\\\"text-muted-foreground text-xs\\\" id={`${id}-description`}>\\n            A short description goes here.\\n          </p>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-147.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-147\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-147.tsx\",\n      \"content\": \"import { Brush, Eraser, Scissors, SwatchBook } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const items = [\\n    { defaultChecked: true, Icon: SwatchBook, label: \\\"Palette\\\", value: \\\"1\\\" },\\n    { Icon: Brush, label: \\\"Brush\\\", value: \\\"2\\\" },\\n    { Icon: Eraser, label: \\\"Eraser\\\", value: \\\"3\\\" },\\n    { Icon: Scissors, label: \\\"Cut\\\", value: \\\"4\\\" },\\n  ];\\n\\n  return (\\n    <div className=\\\"grid grid-cols-2 gap-3\\\">\\n      {items.map((item) => (\\n        <div\\n          className=\\\"relative flex cursor-pointer flex-col gap-4 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\"\\n          key={`${id}-${item.value}`}\\n        >\\n          <div className=\\\"flex justify-between gap-2\\\">\\n            <Checkbox\\n              className=\\\"order-1 after:absolute after:inset-0\\\"\\n              defaultChecked={item.defaultChecked}\\n              id={`${id}-${item.value}`}\\n              value={item.value}\\n            />\\n            <item.Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          </div>\\n          <Label htmlFor={`${id}-${item.value}`}>{item.label}</Label>\\n        </div>\\n      ))}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-148.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-148\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/checkbox-tree.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-148.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Fragment, useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { CheckboxTree } from \\\"@/registry/default/ui/checkbox-tree\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\ninterface TreeNode {\\n  id: string;\\n  label: string;\\n  defaultChecked?: boolean;\\n  children?: TreeNode[];\\n}\\n\\nconst initialTree: TreeNode = {\\n  children: [\\n    { defaultChecked: true, id: \\\"2\\\", label: \\\"Mountains\\\" },\\n    {\\n      children: [\\n        { id: \\\"4\\\", label: \\\"Niagara Falls\\\" },\\n        { defaultChecked: true, id: \\\"5\\\", label: \\\"Angel Falls\\\" },\\n      ],\\n      id: \\\"3\\\",\\n      label: \\\"Waterfalls\\\",\\n    },\\n    { id: \\\"6\\\", label: \\\"Grand Canyon\\\" },\\n  ],\\n  id: \\\"1\\\",\\n  label: \\\"Natural Wonders\\\",\\n};\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"space-y-3\\\">\\n      <CheckboxTree\\n        renderNode={({ node, isChecked, onCheckedChange, children }) => (\\n          <Fragment key={`${id}-${node.id}`}>\\n            <div className=\\\"flex items-center gap-2\\\">\\n              <Checkbox\\n                checked={isChecked}\\n                id={`${id}-${node.id}`}\\n                onCheckedChange={onCheckedChange}\\n              />\\n              <Label htmlFor={`${id}-${node.id}`}>{node.label}</Label>\\n            </div>\\n            {children && <div className=\\\"ms-6 space-y-3\\\">{children}</div>}\\n          </Fragment>\\n        )}\\n        tree={initialTree}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"tree\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-149.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-149\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-149.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const items = [\\n    { defaultChecked: true, label: \\\"Monday\\\", value: \\\"1\\\" },\\n    { defaultChecked: true, label: \\\"Tuesday\\\", value: \\\"2\\\" },\\n    { label: \\\"Wednesday\\\", value: \\\"3\\\" },\\n    { defaultChecked: true, label: \\\"Thursday\\\", value: \\\"4\\\" },\\n    { defaultChecked: true, label: \\\"Friday\\\", value: \\\"5\\\" },\\n    { label: \\\"Saturday\\\", value: \\\"6\\\" },\\n    { disabled: true, label: \\\"Sunday\\\", value: \\\"7\\\" },\\n  ];\\n\\n  return (\\n    <fieldset className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        Days of the week\\n      </legend>\\n      <div className=\\\"flex gap-1.5\\\">\\n        {items.map((item) => (\\n          <label\\n            className=\\\"relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border border-input text-center shadow-xs outline-none transition-[color,box-shadow] has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary has-focus-visible:border-ring has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={`${id}-${item.value}`}\\n          >\\n            <Checkbox\\n              className=\\\"sr-only after:absolute after:inset-0\\\"\\n              defaultChecked={item.defaultChecked}\\n              disabled={item.disabled}\\n              id={`${id}-${item.value}`}\\n              value={item.value}\\n            />\\n            <span aria-hidden=\\\"true\\\" className=\\\"font-medium text-sm\\\">\\n              {item.label[0]}\\n            </span>\\n            <span className=\\\"sr-only\\\">{item.label}</span>\\n          </label>\\n        ))}\\n      </div>\\n    </fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"week\",\n      \"calendar\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-15\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-15.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with end add-on</Label>\\n      <div className=\\\"flex rounded-md shadow-xs\\\">\\n        <Input\\n          className=\\\"-me-px rounded-e-none shadow-none\\\"\\n          id={id}\\n          placeholder=\\\"google\\\"\\n          type=\\\"text\\\"\\n        />\\n        <span className=\\\"-z-10 inline-flex items-center rounded-e-md border border-input bg-background px-3 text-muted-foreground text-sm\\\">\\n          .com\\n        </span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-150.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-150\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-150.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [theme, setTheme] = useState<string>(\\\"light\\\");\\n\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        Dark mode toggle checkbox\\n      </legend>\\n      <div className=\\\"flex flex-col justify-center\\\">\\n        <input\\n          checked={theme === \\\"dark\\\"}\\n          className=\\\"peer sr-only\\\"\\n          id={id}\\n          name={id}\\n          onChange={() =>\\n            setTheme((prev) => (prev === \\\"dark\\\" ? \\\"light\\\" : \\\"dark\\\"))\\n          }\\n          type=\\\"checkbox\\\"\\n        />\\n        <label\\n          aria-label={`Switch to ${theme === \\\"dark\\\" ? \\\"light\\\" : \\\"dark\\\"} mode`}\\n          className=\\\"group relative inline-flex size-9 items-center justify-center rounded-md border border-input bg-background text-foreground shadow-xs outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50\\\"\\n          htmlFor={id}\\n        >\\n          {/* Note: After dark mode implementation, rely on dark: prefix rather than group-peer-checked: */}\\n          <MoonIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0 scale-0 opacity-0 transition-all group-peer-checked:scale-100 group-peer-checked:opacity-100\\\"\\n            size={16}\\n          />\\n          <SunIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"absolute shrink-0 scale-100 opacity-100 transition-all group-peer-checked:scale-0 group-peer-checked:opacity-0\\\"\\n            size={16}\\n          />\\n        </label>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"toggle\",\n      \"darkmode\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-151.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-151\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-151.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"grid gap-3\\\">\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Checkbox id={`${id}-1`} />\\n        <Label htmlFor={`${id}-1`}>React</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Checkbox id={`${id}-2`} />\\n        <Label htmlFor={`${id}-2`}>Next.js</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Checkbox id={`${id}-3`} />\\n        <Label htmlFor={`${id}-3`}>Astro</Label>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"checkbox\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-152.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-152\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-152.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup defaultValue=\\\"1\\\">\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-1`} value=\\\"1\\\" />\\n        <Label htmlFor={`${id}-1`}>Option 1</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-2`} value=\\\"2\\\" />\\n        <Label htmlFor={`${id}-2`}>Option 2</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-3`} value=\\\"3\\\" />\\n        <Label htmlFor={`${id}-3`}>Option 3</Label>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-153.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-153\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-153.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup\\n      className=\\\"[--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] in-[.dark]:[--primary:var(--color-indigo-500)] in-[.dark]:[--ring:var(--color-indigo-900)]\\\"\\n      defaultValue=\\\"1\\\"\\n    >\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-1`} value=\\\"1\\\" />\\n        <Label htmlFor={`${id}-1`}>Option 1</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-2`} value=\\\"2\\\" />\\n        <Label htmlFor={`${id}-2`}>Option 2</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-3`} value=\\\"3\\\" />\\n        <Label htmlFor={`${id}-3`}>Option 3</Label>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-154.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-154\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-154.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup defaultValue=\\\"2\\\" disabled>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-1`} value=\\\"1\\\" />\\n        <Label htmlFor={`${id}-1`}>Option 1</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-2`} value=\\\"2\\\" />\\n        <Label htmlFor={`${id}-2`}>Option 2</Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-3`} value=\\\"3\\\" />\\n        <Label htmlFor={`${id}-3`}>Option 3</Label>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-155.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-155\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-155.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup className=\\\"gap-6\\\" defaultValue=\\\"1\\\">\\n      <div className=\\\"flex items-start gap-2\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${id}-1-description`}\\n          id={`${id}-1`}\\n          value=\\\"1\\\"\\n        />\\n        <div className=\\\"grid grow gap-2\\\">\\n          <Label htmlFor={`${id}-1`}>\\n            Small{\\\" \\\"}\\n            <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n              (Sublabel)\\n            </span>\\n          </Label>\\n          <p\\n            className=\\\"text-muted-foreground text-xs\\\"\\n            id={`${id}-1-description`}\\n          >\\n            You can use this card with a label and a description.\\n          </p>\\n        </div>\\n      </div>\\n      <div className=\\\"flex items-start gap-2\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${id}-2-description`}\\n          id={`${id}-2`}\\n          value=\\\"2\\\"\\n        />\\n        <div className=\\\"grid grow gap-2\\\">\\n          <Label htmlFor={`${id}-2`}>\\n            Large{\\\" \\\"}\\n            <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n              (Sublabel)\\n            </span>\\n          </Label>\\n          <p\\n            className=\\\"text-muted-foreground text-xs\\\"\\n            id={`${id}-2-description`}\\n          >\\n            You can use this card with a label and a description.\\n          </p>\\n        </div>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-156.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-156\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-156.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useEffect, useId, useRef, useState } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const radioId = useId();\\n  const inputId = useId();\\n  const [selectedValue, setSelectedValue] = useState(\\\"without-expansion\\\");\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  useEffect(() => {\\n    if (selectedValue === \\\"with-expansion\\\" && inputRef.current) {\\n      inputRef.current.focus();\\n    }\\n  }, [selectedValue]);\\n\\n  return (\\n    <RadioGroup\\n      className=\\\"gap-6\\\"\\n      onValueChange={setSelectedValue}\\n      value={selectedValue}\\n    >\\n      <div>\\n        <div className=\\\"flex items-start gap-2\\\">\\n          <RadioGroupItem\\n            aria-controls={inputId}\\n            aria-describedby={`${radioId}-1-description`}\\n            id={`${radioId}-1`}\\n            value=\\\"with-expansion\\\"\\n          />\\n          <div className=\\\"grow\\\">\\n            <div className=\\\"grid grow gap-2\\\">\\n              <Label htmlFor={`${radioId}-1`}>Radio with expansion</Label>\\n              <p\\n                className=\\\"text-muted-foreground text-xs\\\"\\n                id={`${radioId}-1-description`}\\n              >\\n                You can use this radio with a label and a description.\\n              </p>\\n            </div>\\n            {/* Expandable field */}\\n            <div\\n              aria-labelledby={`${radioId}-1`}\\n              className=\\\"grid transition-all ease-in-out data-[state=collapsed]:grid-rows-[0fr] data-[state=expanded]:grid-rows-[1fr] data-[state=collapsed]:opacity-0 data-[state=expanded]:opacity-100\\\"\\n              data-state={\\n                selectedValue === \\\"with-expansion\\\" ? \\\"expanded\\\" : \\\"collapsed\\\"\\n              }\\n              id={inputId}\\n              role=\\\"region\\\"\\n            >\\n              <div className=\\\"-m-2 pointer-events-none overflow-hidden p-2\\\">\\n                <div className=\\\"pointer-events-auto mt-3\\\">\\n                  <Input\\n                    aria-label=\\\"Additional Information\\\"\\n                    disabled={selectedValue !== \\\"with-expansion\\\"}\\n                    id=\\\"radio-05-additional-info\\\"\\n                    placeholder=\\\"Enter details\\\"\\n                    ref={inputRef}\\n                    type=\\\"text\\\"\\n                  />\\n                </div>\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n\\n      <div className=\\\"flex items-start gap-2\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${radioId}-2-description`}\\n          id={`${radioId}-2`}\\n          value=\\\"without-expansion\\\"\\n        />\\n        <div className=\\\"grid grow gap-2\\\">\\n          <Label htmlFor={`${radioId}-2`}>Radio without expansion</Label>\\n          <p\\n            className=\\\"text-muted-foreground text-xs\\\"\\n            id={`${radioId}-2-description`}\\n          >\\n            You can use this checkbox with a label and a description.\\n          </p>\\n        </div>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"collapsible\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-157.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-157\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-157.tsx\",\n      \"content\": \"import { RiStarFill } from \\\"@remixicon/react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup defaultValue=\\\"all\\\">\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-1`} value=\\\"all\\\" />\\n        <Label htmlFor={`${id}-1`}>\\n          All reviews{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (12,921)\\n          </span>\\n        </Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-2`} value=\\\"5-stars\\\" />\\n        <Label className=\\\"inline-flex items-center gap-1\\\" htmlFor={`${id}-2`}>\\n          <span\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"inline-flex items-center text-amber-500\\\"\\n          >\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n          </span>\\n          <span className=\\\"sr-only\\\">5 stars</span>{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (5,168)\\n          </span>\\n        </Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-3`} value=\\\"4-stars\\\" />\\n        <Label className=\\\"inline-flex items-center gap-1\\\" htmlFor={`${id}-3`}>\\n          <span\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"inline-flex items-center text-amber-500\\\"\\n          >\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n          </span>\\n          <span className=\\\"sr-only\\\">4 stars</span>{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (4,726)\\n          </span>\\n        </Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-4`} value=\\\"3-stars\\\" />\\n        <Label className=\\\"inline-flex items-center gap-1\\\" htmlFor={`${id}-4`}>\\n          <span\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"inline-flex items-center text-amber-500\\\"\\n          >\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n          </span>\\n          <span className=\\\"sr-only\\\">3 stars</span>{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (3,234)\\n          </span>\\n        </Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-5`} value=\\\"2-stars\\\" />\\n        <Label className=\\\"inline-flex items-center gap-1\\\" htmlFor={`${id}-5`}>\\n          <span\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"inline-flex items-center text-amber-500\\\"\\n          >\\n            <RiStarFill size={16} />\\n            <RiStarFill size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n          </span>\\n          <span className=\\\"sr-only\\\">2 stars</span>{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (1,842)\\n          </span>\\n        </Label>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <RadioGroupItem id={`${id}-6`} value=\\\"1-star\\\" />\\n        <Label className=\\\"inline-flex items-center gap-1\\\" htmlFor={`${id}-6`}>\\n          <span\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"inline-flex items-center text-amber-500\\\"\\n          >\\n            <RiStarFill size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n            <RiStarFill className=\\\"opacity-30\\\" size={16} />\\n          </span>\\n          <span className=\\\"sr-only\\\">1 star</span>{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (452)\\n          </span>\\n        </Label>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"rating\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-158.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-158\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-158.tsx\",\n      \"content\": \"import { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  return (\\n    <fieldset className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        Choose a color\\n      </legend>\\n      <RadioGroup className=\\\"flex gap-1.5\\\" defaultValue=\\\"blue\\\">\\n        <RadioGroupItem\\n          aria-label=\\\"Blue\\\"\\n          className=\\\"size-6 border-blue-500 bg-blue-500 shadow-none data-[state=checked]:border-blue-500 data-[state=checked]:bg-blue-500\\\"\\n          value=\\\"blue\\\"\\n        />\\n        <RadioGroupItem\\n          aria-label=\\\"Indigo\\\"\\n          className=\\\"size-6 border-indigo-500 bg-indigo-500 shadow-none data-[state=checked]:border-indigo-500 data-[state=checked]:bg-indigo-500\\\"\\n          value=\\\"indigo\\\"\\n        />\\n        <RadioGroupItem\\n          aria-label=\\\"Pink\\\"\\n          className=\\\"size-6 border-pink-500 bg-pink-500 shadow-none data-[state=checked]:border-pink-500 data-[state=checked]:bg-pink-500\\\"\\n          value=\\\"pink\\\"\\n        />\\n        <RadioGroupItem\\n          aria-label=\\\"red\\\"\\n          className=\\\"size-6 border-red-500 bg-red-500 shadow-none data-[state=checked]:border-red-500 data-[state=checked]:bg-red-500\\\"\\n          value=\\\"red\\\"\\n        />\\n        <RadioGroupItem\\n          aria-label=\\\"orange\\\"\\n          className=\\\"size-6 border-orange-500 bg-orange-500 shadow-none data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500\\\"\\n          value=\\\"orange\\\"\\n        />\\n        <RadioGroupItem\\n          aria-label=\\\"amber\\\"\\n          className=\\\"size-6 border-amber-500 bg-amber-500 shadow-none data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500\\\"\\n          value=\\\"amber\\\"\\n        />\\n        <RadioGroupItem\\n          aria-label=\\\"emerald\\\"\\n          className=\\\"size-6 border-emerald-500 bg-emerald-500 shadow-none data-[state=checked]:border-emerald-500 data-[state=checked]:bg-emerald-500\\\"\\n          value=\\\"emerald\\\"\\n        />\\n      </RadioGroup>\\n    </fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"color\",\n      \"picker\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-159.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-159\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-159.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup className=\\\"gap-2\\\" defaultValue=\\\"1\\\">\\n      {/* Radio card #1 */}\\n      <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${id}-1-description`}\\n          className=\\\"order-1 after:absolute after:inset-0\\\"\\n          id={`${id}-1`}\\n          value=\\\"1\\\"\\n        />\\n        <div className=\\\"grid grow gap-2\\\">\\n          <Label htmlFor={`${id}-1`}>\\n            Label{\\\" \\\"}\\n            <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n              (Sublabel)\\n            </span>\\n          </Label>\\n          <p\\n            className=\\\"text-muted-foreground text-xs\\\"\\n            id={`${id}-1-description`}\\n          >\\n            You can use this card with a label and a description.\\n          </p>\\n        </div>\\n      </div>\\n      {/* Radio card #2 */}\\n      <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${id}-2-description`}\\n          className=\\\"order-1 after:absolute after:inset-0\\\"\\n          id={`${id}-2`}\\n          value=\\\"2\\\"\\n        />\\n        <div className=\\\"grid grow gap-2\\\">\\n          <Label htmlFor={`${id}-2`}>\\n            Label{\\\" \\\"}\\n            <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n              (Sublabel)\\n            </span>\\n          </Label>\\n          <p\\n            className=\\\"text-muted-foreground text-xs\\\"\\n            id={`${id}-2-description`}\\n          >\\n            You can use this card with a label and a description.\\n          </p>\\n        </div>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-16\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-16.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with inline start and end add-on</Label>\\n      <div className=\\\"relative flex rounded-md shadow-xs\\\">\\n        <span className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm\\\">\\n          €\\n        </span>\\n        <Input\\n          className=\\\"-me-px rounded-e-none ps-6 shadow-none\\\"\\n          id={id}\\n          placeholder=\\\"0.00\\\"\\n          type=\\\"text\\\"\\n        />\\n        <span className=\\\"-z-10 inline-flex items-center rounded-e-md border border-input bg-background px-3 text-muted-foreground text-sm\\\">\\n          EUR\\n        </span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-160.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-160\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-160.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup className=\\\"gap-2\\\" defaultValue=\\\"1\\\">\\n      {/* Radio card #1 */}\\n      <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${id}-1-description`}\\n          className=\\\"order-1 after:absolute after:inset-0\\\"\\n          id={`${id}-1`}\\n          value=\\\"1\\\"\\n        />\\n        <div className=\\\"flex grow items-start gap-3\\\">\\n          <svg\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0\\\"\\n            height={24}\\n            viewBox=\\\"0 0 32 24\\\"\\n            width={32}\\n            xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n          >\\n            <rect fill=\\\"#252525\\\" height=\\\"24\\\" rx=\\\"4\\\" width=\\\"32\\\" />\\n            <path\\n              d=\\\"M19.0537 6.49742H12.9282V17.5026H19.0537V6.49742Z\\\"\\n              fill=\\\"#FF5A00\\\"\\n            />\\n            <path\\n              d=\\\"M13.3359 12C13.3359 9.76408 14.3871 7.77961 16 6.49741C14.8129 5.56408 13.3155 5 11.6822 5C7.81295 5 4.68221 8.13074 4.68221 12C4.68221 15.8693 7.81295 19 11.6822 19C13.3155 19 14.8129 18.4359 16 17.5026C14.3848 16.2385 13.3359 14.2359 13.3359 12Z\\\"\\n              fill=\\\"#EB001B\\\"\\n            />\\n            <path\\n              d=\\\"M27.3178 12C27.3178 15.8693 24.1871 19 20.3178 19C18.6845 19 17.1871 18.4359 16 17.5026C17.6333 16.2181 18.6641 14.2359 18.6641 12C18.6641 9.76408 17.6129 7.77961 16 6.49741C17.1848 5.56408 18.6822 5 20.3155 5C24.1871 5 27.3178 8.15113 27.3178 12Z\\\"\\n              fill=\\\"#F79E1B\\\"\\n            />\\n          </svg>\\n          <div className=\\\"grid grow gap-2\\\">\\n            <Label htmlFor={`${id}-1`}>\\n              Label{\\\" \\\"}\\n              <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n                (Sublabel)\\n              </span>\\n            </Label>\\n            <p\\n              className=\\\"text-muted-foreground text-xs\\\"\\n              id={`${id}-1-description`}\\n            >\\n              You can use this card with a label and a description.\\n            </p>\\n          </div>\\n        </div>\\n      </div>\\n      {/* Radio card #2 */}\\n      <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${id}-2-description`}\\n          className=\\\"order-1 after:absolute after:inset-0\\\"\\n          id={`${id}-2`}\\n          value=\\\"2\\\"\\n        />\\n        <div className=\\\"flex grow items-start gap-3\\\">\\n          <svg\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0\\\"\\n            height={24}\\n            viewBox=\\\"0 0 32 24\\\"\\n            width={32}\\n            xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n          >\\n            <g clipPath=\\\"url(#vc-a)\\\">\\n              <path\\n                d=\\\"M28 0H4a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4Z\\\"\\n                fill=\\\"#252525\\\"\\n              />\\n              <path\\n                d=\\\"m15.884 8.262-1.604 7.496h-1.94l1.604-7.496h1.94Z\\\"\\n                fill=\\\"#fff\\\"\\n              />\\n              <path\\n                clipRule=\\\"evenodd\\\"\\n                d=\\\"M26.207 15.758H28l-1.567-7.496H24.78a.882.882 0 0 0-.826.55l-2.91 6.946h2.037l.404-1.12h2.488l.235 1.12Zm-2.165-2.656 1.021-2.815.587 2.815h-1.608Z\\\"\\n                fill=\\\"#fff\\\"\\n                fillRule=\\\"evenodd\\\"\\n              />\\n              <path\\n                d=\\\"M21.144 13.31c.005-1.183-.975-1.698-1.76-2.11-.526-.276-.964-.506-.957-.861.007-.27.263-.555.823-.628.277-.036 1.044-.065 1.913.335l.34-1.59a5.23 5.23 0 0 0-1.815-.331c-1.917 0-3.265 1.018-3.276 2.477-.013 1.08.963 1.681 1.697 2.04.756.368 1.01.604 1.006.932-.005.503-.604.726-1.16.734-.945.015-1.506-.247-1.95-.454l-.042-.02-.352 1.643c.454.208 1.29.39 2.156.398 2.038 0 3.371-1.006 3.377-2.565ZM13.112 8.262 9.97 15.758H7.92L6.374 9.775c-.094-.368-.175-.503-.46-.658-.467-.253-1.237-.49-1.914-.638l.046-.217h3.3c.42 0 .798.28.894.763l.817 4.338 2.018-5.101h2.037Z\\\"\\n                fill=\\\"#fff\\\"\\n              />\\n            </g>\\n            <defs>\\n              <clipPath id=\\\"vc-a\\\">\\n                <path d=\\\"M0 0h32v24H0z\\\" fill=\\\"#fff\\\" />\\n              </clipPath>\\n            </defs>\\n          </svg>\\n          <div className=\\\"grid grow gap-2\\\">\\n            <Label htmlFor={`${id}-2`}>\\n              Label{\\\" \\\"}\\n              <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n                (Sublabel)\\n              </span>\\n            </Label>\\n            <p\\n              className=\\\"text-muted-foreground text-xs\\\"\\n              id={`${id}-2-description`}\\n            >\\n              You can use this card with a label and a description.\\n            </p>\\n          </div>\\n        </div>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-161.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-161\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-161.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup className=\\\"gap-2\\\" defaultValue=\\\"1\\\">\\n      {/* Radio card #1 */}\\n      <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${id}-1-description`}\\n          className=\\\"order-1 after:absolute after:inset-0\\\"\\n          id={`${id}-1`}\\n          value=\\\"1\\\"\\n        />\\n        <div className=\\\"flex grow items-center gap-3\\\">\\n          <svg\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0\\\"\\n            height={32}\\n            width={32}\\n            xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n          >\\n            <circle cx=\\\"16\\\" cy=\\\"16\\\" fill=\\\"#121212\\\" r=\\\"16\\\" />\\n            <g clipPath=\\\"url(#sb-a)\\\">\\n              <path\\n                d=\\\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\\\"\\n                fill=\\\"url(#sb-b)\\\"\\n              />\\n              <path\\n                d=\\\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\\\"\\n                fill=\\\"url(#sb-c)\\\"\\n                fillOpacity=\\\".2\\\"\\n              />\\n              <path\\n                d=\\\"M14.375 6.367c.506-.638 1.532-.289 1.544.525l.078 11.903H8.094c-1.45 0-2.258-1.674-1.357-2.81l7.638-9.618Z\\\"\\n                fill=\\\"#3ECF8E\\\"\\n              />\\n            </g>\\n            <defs>\\n              <linearGradient\\n                gradientUnits=\\\"userSpaceOnUse\\\"\\n                id=\\\"sb-b\\\"\\n                x1=\\\"15.907\\\"\\n                x2=\\\"23.02\\\"\\n                y1=\\\"15.73\\\"\\n                y2=\\\"18.713\\\"\\n              >\\n                <stop stopColor=\\\"#249361\\\" />\\n                <stop offset=\\\"1\\\" stopColor=\\\"#3ECF8E\\\" />\\n              </linearGradient>\\n              <linearGradient\\n                gradientUnits=\\\"userSpaceOnUse\\\"\\n                id=\\\"sb-c\\\"\\n                x1=\\\"12.753\\\"\\n                x2=\\\"15.997\\\"\\n                y1=\\\"11.412\\\"\\n                y2=\\\"17.519\\\"\\n              >\\n                <stop />\\n                <stop offset=\\\"1\\\" stopOpacity=\\\"0\\\" />\\n              </linearGradient>\\n              <clipPath id=\\\"sb-a\\\">\\n                <path d=\\\"M6.354 6h19.292v20H6.354z\\\" fill=\\\"#fff\\\" />\\n              </clipPath>\\n            </defs>\\n          </svg>\\n          <div className=\\\"grid grow gap-2\\\">\\n            <Label htmlFor={`${id}-1`}>\\n              Label{\\\" \\\"}\\n              <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n                (Sublabel)\\n              </span>\\n            </Label>\\n            <p\\n              className=\\\"text-muted-foreground text-xs\\\"\\n              id={`${id}-1-description`}\\n            >\\n              You can use this card with a label and a description.\\n            </p>\\n          </div>\\n        </div>\\n      </div>\\n      {/* Radio card #2 */}\\n      <div className=\\\"relative flex items-center gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n        <RadioGroupItem\\n          aria-describedby={`${id}-2-description`}\\n          className=\\\"order-1 after:absolute after:inset-0\\\"\\n          id={`${id}-2`}\\n          value=\\\"2\\\"\\n        />\\n        <div className=\\\"flex grow items-start gap-3\\\">\\n          <svg\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0\\\"\\n            height={32}\\n            width={32}\\n            xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n          >\\n            <circle cx=\\\"16\\\" cy=\\\"16\\\" fill=\\\"#090A15\\\" r=\\\"16\\\" />\\n            <path\\n              clipRule=\\\"evenodd\\\"\\n              d=\\\"M8.004 19.728a.996.996 0 0 1-.008-1.054l7.478-12.199a.996.996 0 0 1 1.753.104l6.832 14.82a.996.996 0 0 1-.618 1.37l-10.627 3.189a.996.996 0 0 1-1.128-.42l-3.682-5.81Zm8.333-9.686a.373.373 0 0 1 .709-.074l4.712 10.904a.374.374 0 0 1-.236.506L14.18 23.57a.373.373 0 0 1-.473-.431l2.63-13.097Z\\\"\\n              fill=\\\"#fff\\\"\\n              fillRule=\\\"evenodd\\\"\\n            />\\n          </svg>\\n          <div className=\\\"grid grow gap-2\\\">\\n            <Label htmlFor={`${id}-2`}>\\n              Label{\\\" \\\"}\\n              <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n                (Sublabel)\\n              </span>\\n            </Label>\\n            <p\\n              className=\\\"text-muted-foreground text-xs\\\"\\n              id={`${id}-2-description`}\\n            >\\n              You can use this card with a label and a description.\\n            </p>\\n          </div>\\n        </div>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-162.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-162\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-162.tsx\",\n      \"content\": \"import { Brush, Eraser, Scissors, SwatchBook } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const items = [\\n    { Icon: SwatchBook, label: \\\"Palette\\\", value: \\\"1\\\" },\\n    { Icon: Brush, label: \\\"Brush\\\", value: \\\"2\\\" },\\n    { Icon: Eraser, label: \\\"Eraser\\\", value: \\\"3\\\" },\\n    { Icon: Scissors, label: \\\"Cut\\\", value: \\\"4\\\" },\\n  ];\\n\\n  return (\\n    <RadioGroup className=\\\"grid-cols-2\\\" defaultValue=\\\"1\\\">\\n      {items.map((item) => (\\n        <div\\n          className=\\\"relative flex flex-col gap-4 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\"\\n          key={`${id}-${item.value}`}\\n        >\\n          <div className=\\\"flex justify-between gap-2\\\">\\n            <RadioGroupItem\\n              className=\\\"order-1 after:absolute after:inset-0\\\"\\n              id={`${id}-${item.value}`}\\n              value={item.value}\\n            />\\n            <item.Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          </div>\\n          <Label htmlFor={`${id}-${item.value}`}>{item.label}</Label>\\n        </div>\\n      ))}\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-163.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-163\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-163.tsx\",\n      \"content\": \"import { RiAppleLine, RiBankCardLine, RiPaypalLine } from \\\"@remixicon/react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <RadioGroup className=\\\"grid-cols-3\\\" defaultValue=\\\"1\\\">\\n      {/* Credit card */}\\n      <div className=\\\"relative flex cursor-pointer flex-col items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\">\\n        <RadioGroupItem className=\\\"sr-only\\\" id={`${id}-1`} value=\\\"1\\\" />\\n        <RiBankCardLine aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={20} />\\n        <label\\n          className=\\\"cursor-pointer font-medium text-foreground text-xs leading-none after:absolute after:inset-0\\\"\\n          htmlFor={`${id}-1`}\\n        >\\n          Card\\n        </label>\\n      </div>\\n      {/* PayPal */}\\n      <div className=\\\"relative flex cursor-pointer flex-col items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\">\\n        <RadioGroupItem className=\\\"sr-only\\\" id={`${id}-2`} value=\\\"2\\\" />\\n        <RiPaypalLine aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={20} />\\n        <label\\n          className=\\\"cursor-pointer font-medium text-foreground text-xs leading-none after:absolute after:inset-0\\\"\\n          htmlFor={`${id}-2`}\\n        >\\n          PayPal\\n        </label>\\n      </div>\\n      {/* Apple Pay */}\\n      <div className=\\\"relative flex cursor-pointer flex-col items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\">\\n        <RadioGroupItem className=\\\"sr-only\\\" id={`${id}-3`} value=\\\"3\\\" />\\n        <RiAppleLine aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={20} />\\n        <label\\n          className=\\\"cursor-pointer font-medium text-foreground text-xs leading-none after:absolute after:inset-0\\\"\\n          htmlFor={`${id}-3`}\\n        >\\n          Apple Pay\\n        </label>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"card\",\n      \"checkout\",\n      \"payment\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-164.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-164\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-164.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const items = [\\n    { label: \\\"2 CPU\\\", value: \\\"1\\\" },\\n    { label: \\\"4 CPU\\\", value: \\\"2\\\" },\\n    { label: \\\"6 CPU\\\", value: \\\"3\\\" },\\n    { label: \\\"8 CPU\\\", value: \\\"4\\\" },\\n    { label: \\\"12 CPU\\\", value: \\\"5\\\" },\\n    { disabled: true, label: \\\"16 CPU\\\", value: \\\"6\\\" },\\n  ];\\n\\n  return (\\n    <fieldset className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        CPU Cores\\n      </legend>\\n      <RadioGroup className=\\\"grid grid-cols-3 gap-2\\\" defaultValue=\\\"1\\\">\\n        {items.map((item) => (\\n          <label\\n            className=\\\"relative flex cursor-pointer flex-col items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={`${id}-${item.value}`}\\n          >\\n            <RadioGroupItem\\n              className=\\\"sr-only after:absolute after:inset-0\\\"\\n              disabled={item.disabled}\\n              id={`${id}-${item.value}`}\\n              value={item.value}\\n            />\\n            <p className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n              {item.label}\\n            </p>\\n          </label>\\n        ))}\\n      </RadioGroup>\\n    </fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"card\",\n      \"pricing\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-165.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-165\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-165.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const items = [\\n    { label: \\\"USA\\\", value: \\\"1\\\" },\\n    { label: \\\"UK\\\", value: \\\"2\\\" },\\n    { label: \\\"France\\\", value: \\\"3\\\" },\\n  ];\\n\\n  return (\\n    <fieldset className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        Server location\\n      </legend>\\n      <RadioGroup className=\\\"flex flex-wrap gap-2\\\" defaultValue=\\\"1\\\">\\n        {items.map((item) => (\\n          <div\\n            className=\\\"relative flex flex-col items-start gap-4 rounded-md border border-input p-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\"\\n            key={`${id}-${item.value}`}\\n          >\\n            <div className=\\\"flex items-center gap-2\\\">\\n              <RadioGroupItem\\n                className=\\\"after:absolute after:inset-0\\\"\\n                id={`${id}-${item.value}`}\\n                value={item.value}\\n              />\\n              <Label htmlFor={`${id}-${item.value}`}>{item.label}</Label>\\n            </div>\\n          </div>\\n        ))}\\n      </RadioGroup>\\n    </fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-166.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-166\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-166.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const items = [\\n    { label: \\\"Hobby\\\", price: \\\"$9/mo\\\", value: \\\"1\\\" },\\n    { label: \\\"Plus\\\", price: \\\"$29/mo\\\", value: \\\"2\\\" },\\n    { label: \\\"Team\\\", price: \\\"$49/mo\\\", value: \\\"3\\\" },\\n    { label: \\\"Enterprise\\\", price: \\\"Custom\\\", value: \\\"4\\\" },\\n  ];\\n\\n  return (\\n    <fieldset className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        Choose plan\\n      </legend>\\n      <RadioGroup\\n        className=\\\"-space-y-px gap-0 rounded-md shadow-xs\\\"\\n        defaultValue=\\\"2\\\"\\n      >\\n        {items.map((item) => (\\n          <div\\n            className=\\\"relative flex flex-col gap-4 border border-input p-4 outline-none first:rounded-t-md last:rounded-b-md has-data-[state=checked]:z-10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\\\"\\n            key={`${id}-${item.value}`}\\n          >\\n            <div className=\\\"flex items-center justify-between\\\">\\n              <div className=\\\"flex items-center gap-2\\\">\\n                <RadioGroupItem\\n                  aria-describedby={`${`${id}-${item.value}`}-price`}\\n                  className=\\\"after:absolute after:inset-0\\\"\\n                  id={`${id}-${item.value}`}\\n                  value={item.value}\\n                />\\n                <Label\\n                  className=\\\"inline-flex items-start\\\"\\n                  htmlFor={`${id}-${item.value}`}\\n                >\\n                  {item.label}\\n                  {item.value === \\\"2\\\" && (\\n                    <Badge className=\\\"-mt-1 ms-2\\\">Popular</Badge>\\n                  )}\\n                </Label>\\n              </div>\\n              <div\\n                className=\\\"text-muted-foreground text-xs leading-[inherit]\\\"\\n                id={`${`${id}-${item.value}`}-price`}\\n              >\\n                {item.price}\\n              </div>\\n            </div>\\n          </div>\\n        ))}\\n      </RadioGroup>\\n    </fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"pricing\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-167.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-167\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-167.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const items = [\\n    { icon: \\\"😠\\\", label: \\\"Angry\\\", value: \\\"1\\\" },\\n    { icon: \\\"🙁\\\", label: \\\"Sad\\\", value: \\\"2\\\" },\\n    { icon: \\\"😐\\\", label: \\\"Neutral\\\", value: \\\"3\\\" },\\n    { icon: \\\"🙂\\\", label: \\\"Happy\\\", value: \\\"4\\\" },\\n    { icon: \\\"😀\\\", label: \\\"Laughing\\\", value: \\\"5\\\" },\\n  ];\\n\\n  return (\\n    <fieldset className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        How did it go?\\n      </legend>\\n      <RadioGroup className=\\\"flex gap-1.5\\\" defaultValue=\\\"3\\\">\\n        {items.map((item) => (\\n          <label\\n            className=\\\"relative flex size-9 cursor-pointer flex-col items-center justify-center rounded-full border border-input text-center text-xl shadow-xs outline-none transition-[color,box-shadow] has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={`${id}-${item.value}`}\\n          >\\n            <RadioGroupItem\\n              className=\\\"sr-only after:absolute after:inset-0\\\"\\n              id={`${id}-${item.value}`}\\n              value={item.value}\\n            />\\n            {item.icon}\\n          </label>\\n        ))}\\n      </RadioGroup>\\n    </fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"rating\",\n      \"vote\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-168.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-168\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-168.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <>\\n      <fieldset className=\\\"space-y-4\\\">\\n        <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n          How likely are you to recommend us?\\n        </legend>\\n        <RadioGroup className=\\\"-space-x-px flex gap-0 rounded-md shadow-xs\\\">\\n          {[\\\"0\\\", \\\"1\\\", \\\"2\\\", \\\"3\\\", \\\"4\\\", \\\"5\\\"].map((value) => (\\n            <label\\n              className=\\\"relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center font-medium text-sm outline-none transition-[color,box-shadow] first:rounded-s-md last:rounded-e-md has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n              key={value}\\n            >\\n              <RadioGroupItem\\n                className=\\\"sr-only after:absolute after:inset-0\\\"\\n                id={`${id}-${value}`}\\n                value={value}\\n              />\\n              {value}\\n            </label>\\n          ))}\\n        </RadioGroup>\\n      </fieldset>\\n      <div className=\\\"mt-1 flex justify-between font-medium text-xs\\\">\\n        <p>\\n          <span className=\\\"text-base\\\">😡</span> Not likely\\n        </p>\\n        <p>\\n          Very Likely <span className=\\\"text-base\\\">😍</span>\\n        </p>\\n      </div>\\n    </>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"rating\",\n      \"vote\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-169.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-169\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-169.tsx\",\n      \"content\": \"import { CheckIcon, MinusIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nconst items = [\\n  { image: \\\"/origin/ui-light.png\\\", label: \\\"Light\\\", value: \\\"1\\\" },\\n  { image: \\\"/origin/ui-dark.png\\\", label: \\\"Dark\\\", value: \\\"2\\\" },\\n  { image: \\\"/origin/ui-system.png\\\", label: \\\"System\\\", value: \\\"3\\\" },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <fieldset className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        Choose a theme\\n      </legend>\\n      <RadioGroup className=\\\"flex gap-3\\\" defaultValue=\\\"1\\\">\\n        {items.map((item) => (\\n          <label key={`${id}-${item.value}`}>\\n            <RadioGroupItem\\n              className=\\\"peer sr-only after:absolute after:inset-0\\\"\\n              id={`${id}-${item.value}`}\\n              value={item.value}\\n            />\\n            <img\\n              alt={item.label}\\n              className=\\\"relative cursor-pointer overflow-hidden rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-data-disabled:cursor-not-allowed peer-data-[state=checked]:border-ring peer-data-[state=checked]:bg-accent peer-data-disabled:opacity-50\\\"\\n              height={70}\\n              src={item.image}\\n              width={88}\\n            />\\n            <span className=\\\"group mt-2 flex items-center gap-1 peer-data-[state=unchecked]:text-muted-foreground/70\\\">\\n              <CheckIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"group-peer-data-[state=unchecked]:hidden\\\"\\n                size={16}\\n              />\\n              <MinusIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"group-peer-data-[state=checked]:hidden\\\"\\n                size={16}\\n              />\\n              <span className=\\\"font-medium text-xs\\\">{item.label}</span>\\n            </span>\\n          </label>\\n        ))}\\n      </RadioGroup>\\n    </fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"darkmode\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-17\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/select-native.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-17.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with start select</Label>\\n      <div className=\\\"flex rounded-md shadow-xs\\\">\\n        <SelectNative className=\\\"w-fit rounded-e-none text-muted-foreground shadow-none hover:text-foreground\\\">\\n          <option value=\\\"https://\\\">https://</option>\\n          <option value=\\\"http://\\\">http://</option>\\n          <option value=\\\"ftp://\\\">ftp://</option>\\n          <option value=\\\"sftp://\\\">sftp://</option>\\n          <option value=\\\"ws://\\\">ws://</option>\\n          <option value=\\\"wss://\\\">wss://</option>\\n        </SelectNative>\\n        <Input\\n          className=\\\"-ms-px rounded-s-none shadow-none focus-visible:z-10\\\"\\n          id={id}\\n          placeholder=\\\"192.168.1.1\\\"\\n          type=\\\"text\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-170.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-170\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-170.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [selectedValue, setSelectedValue] = useState(\\\"on\\\");\\n\\n  return (\\n    <div className=\\\"inline-flex h-9 rounded-md bg-input/50 p-0.5\\\">\\n      <RadioGroup\\n        className=\\\"group relative inline-grid grid-cols-[1fr_1fr] items-center gap-0 font-medium text-sm after:absolute after:inset-y-0 after:w-1/2 after:rounded-sm after:bg-background after:shadow-xs after:transition-[translate,box-shadow] after:duration-300 after:ease-[cubic-bezier(0.16,1,0.3,1)] has-focus-visible:after:border-ring has-focus-visible:after:ring-[3px] has-focus-visible:after:ring-ring/50 data-[state=off]:after:translate-x-0 data-[state=on]:after:translate-x-full\\\"\\n        data-state={selectedValue}\\n        onValueChange={setSelectedValue}\\n        value={selectedValue}\\n      >\\n        <label className=\\\"relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-4 transition-colors group-data-[state=on]:text-muted-foreground/70\\\">\\n          Bill Monthly\\n          <RadioGroupItem className=\\\"sr-only\\\" id={`${id}-1`} value=\\\"off\\\" />\\n        </label>\\n        <label className=\\\"relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-4 transition-colors group-data-[state=off]:text-muted-foreground/70\\\">\\n          <span>\\n            Bill Yearly{\\\" \\\"}\\n            <span className=\\\"transition-colors group-data-[state=off]:text-muted-foreground/70 group-data-[state=on]:text-emerald-500\\\">\\n              -20%\\n            </span>\\n          </span>\\n          <RadioGroupItem className=\\\"sr-only\\\" id={`${id}-2`} value=\\\"on\\\" />\\n        </label>\\n      </RadioGroup>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"pricing\",\n      \"switch\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-171.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-171\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-171.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RiStarFill } from \\\"@remixicon/react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [hoverRating, setHoverRating] = useState(\\\"\\\");\\n  const [currentRating, setCurrentRating] = useState(\\\"\\\");\\n\\n  return (\\n    <fieldset className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n        Rate your experience\\n      </legend>\\n      <RadioGroup\\n        className=\\\"inline-flex gap-0\\\"\\n        onValueChange={setCurrentRating}\\n      >\\n        {[\\\"1\\\", \\\"2\\\", \\\"3\\\", \\\"4\\\", \\\"5\\\"].map((value) => (\\n          <label\\n            className=\\\"group relative cursor-pointer rounded p-0.5 outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={value}\\n            onMouseEnter={() => setHoverRating(value)}\\n            onMouseLeave={() => setHoverRating(\\\"\\\")}\\n          >\\n            <RadioGroupItem\\n              className=\\\"sr-only\\\"\\n              id={`${id}-${value}`}\\n              value={value}\\n            />\\n            <RiStarFill\\n              className={`transition-all ${\\n                (hoverRating || currentRating) >= value\\n                  ? \\\"text-amber-500\\\"\\n                  : \\\"text-input\\\"\\n              } group-hover:scale-110`}\\n              size={24}\\n            />\\n            <span className=\\\"sr-only\\\">\\n              {value} star{value === \\\"1\\\" ? \\\"\\\" : \\\"s\\\"}\\n            </span>\\n          </label>\\n        ))}\\n      </RadioGroup>\\n    </fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"radio\",\n      \"label\",\n      \"rating\",\n      \"vote\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-172.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-172\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-172.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Switch id={id} />\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        Simple switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-173.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-173\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-173.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Switch\\n        className=\\\"data-[state=checked]:[&_span]:rtl:-translate-x-3 h-5 w-8 [&_span]:size-4 data-[state=checked]:[&_span]:translate-x-3\\\"\\n        id={id}\\n      />\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        Small switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-174.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-174\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-174.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2 [--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] in-[.dark]:[--primary:var(--color-indigo-500)] in-[.dark]:[--ring:var(--color-indigo-900)]\\\">\\n      <Switch defaultChecked id={id} />\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        Colored switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-175.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-175\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-175.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Switch disabled id={id} />\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        Disabled\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-176.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-176\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-176.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Switch className=\\\"rounded-sm [&_span]:rounded\\\" id={id} />\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        Square switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-177.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-177\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-177.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Switch\\n        className=\\\"h-3 w-9 border-none outline-offset-[6px] [&_span]:border [&_span]:border-input\\\"\\n        id={id}\\n      />\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        M2-style switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-178.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-178\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-178.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Switch\\n        className=\\\"data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5 data-[state=unchecked]:border-input data-[state=unchecked]:bg-transparent [&_span]:transition-all data-[state=unchecked]:[&_span]:size-4 data-[state=unchecked]:[&_span]:translate-x-0.5 data-[state=unchecked]:[&_span]:bg-input data-[state=unchecked]:[&_span]:shadow-none\\\"\\n        id={id}\\n      />\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        M3-style switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-179.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-179\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-179.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState<boolean>(true);\\n\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Switch\\n        aria-label=\\\"Toggle switch\\\"\\n        checked={checked}\\n        id={id}\\n        onCheckedChange={setChecked}\\n      />\\n      <Label className=\\\"font-medium text-sm\\\" htmlFor={id}>\\n        {checked ? \\\"On\\\" : \\\"Off\\\"}\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-18\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/select-native.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-18.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with end select</Label>\\n      <div className=\\\"flex rounded-md shadow-xs\\\">\\n        <Input\\n          className=\\\"-me-px rounded-e-none shadow-none focus-visible:z-10\\\"\\n          id={id}\\n          placeholder=\\\"google\\\"\\n          type=\\\"text\\\"\\n        />\\n        <SelectNative className=\\\"w-fit rounded-s-none text-muted-foreground shadow-none hover:text-foreground\\\">\\n          <option>.com</option>\\n          <option>.org</option>\\n          <option>.net</option>\\n        </SelectNative>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-180.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-180\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-180.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState(false);\\n\\n  const toggleSwitch = () => setChecked((prev) => !prev);\\n\\n  return (\\n    <div\\n      className=\\\"group inline-flex items-center gap-2\\\"\\n      data-state={checked ? \\\"checked\\\" : \\\"unchecked\\\"}\\n    >\\n      <span\\n        aria-controls={id}\\n        className=\\\"flex-1 cursor-pointer text-right font-medium text-sm group-data-[state=checked]:text-muted-foreground/70\\\"\\n        id={`${id}-off`}\\n        onClick={() => setChecked(false)}\\n      >\\n        Off\\n      </span>\\n      <Switch\\n        aria-labelledby={`${id}-off ${id}-on`}\\n        checked={checked}\\n        id={id}\\n        onCheckedChange={toggleSwitch}\\n      />\\n      <span\\n        aria-controls={id}\\n        className=\\\"flex-1 cursor-pointer text-left font-medium text-sm group-data-[state=unchecked]:text-muted-foreground/70\\\"\\n        id={`${id}-on`}\\n        onClick={() => setChecked(true)}\\n      >\\n        On\\n      </span>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-181.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-181\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-181.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState<boolean>(true);\\n\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Switch\\n        aria-label=\\\"Toggle switch\\\"\\n        checked={checked}\\n        id={id}\\n        onCheckedChange={setChecked}\\n      />\\n      <Label htmlFor={id}>\\n        <span className=\\\"sr-only\\\">Toggle switch</span>\\n        {checked ? (\\n          <SunIcon aria-hidden=\\\"true\\\" size={16} />\\n        ) : (\\n          <MoonIcon aria-hidden=\\\"true\\\" size={16} />\\n        )}\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"darkmode\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-182.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-182\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-182.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState(false);\\n\\n  const toggleSwitch = () => setChecked((prev) => !prev);\\n\\n  return (\\n    <div\\n      className=\\\"group inline-flex items-center gap-2\\\"\\n      data-state={checked ? \\\"checked\\\" : \\\"unchecked\\\"}\\n    >\\n      <span\\n        aria-controls={id}\\n        className=\\\"flex-1 cursor-pointer text-right font-medium text-sm group-data-[state=checked]:text-muted-foreground/70\\\"\\n        id={`${id}-off`}\\n        onClick={() => setChecked(false)}\\n      >\\n        <MoonIcon aria-hidden=\\\"true\\\" size={16} />\\n      </span>\\n      <Switch\\n        aria-label=\\\"Toggle between dark and light mode\\\"\\n        aria-labelledby={`${id}-off ${id}-on`}\\n        checked={checked}\\n        id={id}\\n        onCheckedChange={toggleSwitch}\\n      />\\n      <span\\n        aria-controls={id}\\n        className=\\\"flex-1 cursor-pointer text-left font-medium text-sm group-data-[state=unchecked]:text-muted-foreground/70\\\"\\n        id={`${id}-on`}\\n        onClick={() => setChecked(true)}\\n      >\\n        <SunIcon aria-hidden=\\\"true\\\" size={16} />\\n      </span>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"darkmode\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-183.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-183\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-183.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState<boolean>(true);\\n\\n  return (\\n    <div>\\n      <div className=\\\"relative inline-grid h-9 grid-cols-[1fr_1fr] items-center font-medium text-sm\\\">\\n        <Switch\\n          checked={checked}\\n          className=\\\"peer [&_span]:data-[state=checked]:rtl:-translate-x-full absolute inset-0 h-[inherit] w-auto data-[state=checked]:bg-input/50 data-[state=unchecked]:bg-input/50 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full\\\"\\n          id={id}\\n          onCheckedChange={setChecked}\\n        />\\n        <span className=\\\"pointer-events-none relative ms-0.5 flex min-w-8 items-center justify-center text-center peer-data-[state=checked]:text-muted-foreground/70\\\">\\n          <MoonIcon aria-hidden=\\\"true\\\" size={16} />\\n        </span>\\n        <span className=\\\"pointer-events-none relative me-0.5 flex min-w-8 items-center justify-center text-center peer-data-[state=unchecked]:text-muted-foreground/70\\\">\\n          <SunIcon aria-hidden=\\\"true\\\" size={16} />\\n        </span>\\n      </div>\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        Labeled switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"darkmode\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-184.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-184\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-184.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState<boolean>(true);\\n\\n  return (\\n    <div>\\n      <div className=\\\"relative inline-grid h-9 grid-cols-[1fr_1fr] items-center font-medium text-sm\\\">\\n        <Switch\\n          checked={checked}\\n          className=\\\"peer [&_span]:data-[state=checked]:rtl:-translate-x-full absolute inset-0 h-[inherit] w-auto data-[state=unchecked]:bg-input/50 [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full\\\"\\n          id={id}\\n          onCheckedChange={setChecked}\\n        />\\n        <span className=\\\"peer-data-[state=unchecked]:rtl:-translate-x-full pointer-events-none relative ms-0.5 flex min-w-8 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full\\\">\\n          <MoonIcon aria-hidden=\\\"true\\\" size={16} />\\n        </span>\\n        <span className=\\\"peer-data-[state=checked]:-translate-x-full pointer-events-none relative me-0.5 flex min-w-8 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=unchecked]:invisible peer-data-[state=checked]:text-background peer-data-[state=checked]:rtl:translate-x-full\\\">\\n          <SunIcon aria-hidden=\\\"true\\\" size={16} />\\n        </span>\\n      </div>\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        Labeled switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"darkmode\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-185.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-185\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-185.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState<boolean>(true);\\n\\n  return (\\n    <div>\\n      <div className=\\\"relative inline-grid h-9 grid-cols-[1fr_1fr] items-center font-medium text-sm\\\">\\n        <Switch\\n          checked={checked}\\n          className=\\\"peer [&_span]:data-[state=checked]:rtl:-translate-x-full absolute inset-0 h-[inherit] w-auto rounded-md data-[state=unchecked]:bg-input/50 [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:rounded-sm [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full\\\"\\n          id={id}\\n          onCheckedChange={setChecked}\\n        />\\n        <span className=\\\"peer-data-[state=unchecked]:rtl:-translate-x-full pointer-events-none relative ms-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full\\\">\\n          <span className=\\\"font-medium text-[10px] uppercase\\\">Off</span>\\n        </span>\\n        <span className=\\\"peer-data-[state=checked]:-translate-x-full pointer-events-none relative me-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=unchecked]:invisible peer-data-[state=checked]:text-background peer-data-[state=checked]:rtl:translate-x-full\\\">\\n          <span className=\\\"font-medium text-[10px] uppercase\\\">On</span>\\n        </span>\\n      </div>\\n      <Label className=\\\"sr-only\\\" htmlFor={id}>\\n        Labeled switch\\n      </Label>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-186.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-186\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-186.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n      <Switch\\n        aria-describedby={`${id}-description`}\\n        className=\\\"data-[state=checked]:[&_span]:rtl:-translate-x-2 order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2\\\"\\n        id={id}\\n      />\\n      <div className=\\\"grid grow gap-2\\\">\\n        <Label htmlFor={id}>\\n          Label{\\\" \\\"}\\n          <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n            (Sublabel)\\n          </span>\\n        </Label>\\n        <p className=\\\"text-muted-foreground text-xs\\\" id={`${id}-description`}>\\n          A short description goes here.\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-187.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-187\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-187.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n      <Switch\\n        aria-describedby={`${id}-description`}\\n        className=\\\"data-[state=checked]:[&_span]:rtl:-translate-x-2 order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2\\\"\\n        id={id}\\n      />\\n      <div className=\\\"flex grow items-start gap-3\\\">\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0\\\"\\n          height={24}\\n          viewBox=\\\"0 0 32 24\\\"\\n          width={32}\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <rect fill=\\\"#252525\\\" height=\\\"24\\\" rx=\\\"4\\\" width=\\\"32\\\" />\\n          <path\\n            d=\\\"M19.0537 6.49742H12.9282V17.5026H19.0537V6.49742Z\\\"\\n            fill=\\\"#FF5A00\\\"\\n          />\\n          <path\\n            d=\\\"M13.3359 12C13.3359 9.76408 14.3871 7.77961 16 6.49741C14.8129 5.56408 13.3155 5 11.6822 5C7.81295 5 4.68221 8.13074 4.68221 12C4.68221 15.8693 7.81295 19 11.6822 19C13.3155 19 14.8129 18.4359 16 17.5026C14.3848 16.2385 13.3359 14.2359 13.3359 12Z\\\"\\n            fill=\\\"#EB001B\\\"\\n          />\\n          <path\\n            d=\\\"M27.3178 12C27.3178 15.8693 24.1871 19 20.3178 19C18.6845 19 17.1871 18.4359 16 17.5026C17.6333 16.2181 18.6641 14.2359 18.6641 12C18.6641 9.76408 17.6129 7.77961 16 6.49741C17.1848 5.56408 18.6822 5 20.3155 5C24.1871 5 27.3178 8.15113 27.3178 12Z\\\"\\n            fill=\\\"#F79E1B\\\"\\n          />\\n        </svg>\\n        <div className=\\\"grid grow gap-2\\\">\\n          <Label htmlFor={id}>\\n            Label{\\\" \\\"}\\n            <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n              (Sublabel)\\n            </span>\\n          </Label>\\n          <p className=\\\"text-muted-foreground text-xs\\\" id={`${id}-description`}>\\n            A short description goes here.\\n          </p>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-188.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-188\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/switch.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-188.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\\\">\\n      <Switch\\n        aria-describedby={`${id}-description`}\\n        className=\\\"data-[state=checked]:[&_span]:rtl:-translate-x-2 order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2\\\"\\n        id={id}\\n      />\\n      <div className=\\\"flex grow items-center gap-3\\\">\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0\\\"\\n          height={32}\\n          width={32}\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <circle cx=\\\"16\\\" cy=\\\"16\\\" fill=\\\"#121212\\\" r=\\\"16\\\" />\\n          <g clipPath=\\\"url(#sb-a)\\\">\\n            <path\\n              d=\\\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\\\"\\n              fill=\\\"url(#sb-b)\\\"\\n            />\\n            <path\\n              d=\\\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\\\"\\n              fill=\\\"url(#sb-c)\\\"\\n              fillOpacity=\\\".2\\\"\\n            />\\n            <path\\n              d=\\\"M14.375 6.367c.506-.638 1.532-.289 1.544.525l.078 11.903H8.094c-1.45 0-2.258-1.674-1.357-2.81l7.638-9.618Z\\\"\\n              fill=\\\"#3ECF8E\\\"\\n            />\\n          </g>\\n          <defs>\\n            <linearGradient\\n              gradientUnits=\\\"userSpaceOnUse\\\"\\n              id=\\\"sb-b\\\"\\n              x1=\\\"15.907\\\"\\n              x2=\\\"23.02\\\"\\n              y1=\\\"15.73\\\"\\n              y2=\\\"18.713\\\"\\n            >\\n              <stop stopColor=\\\"#249361\\\" />\\n              <stop offset=\\\"1\\\" stopColor=\\\"#3ECF8E\\\" />\\n            </linearGradient>\\n            <linearGradient\\n              gradientUnits=\\\"userSpaceOnUse\\\"\\n              id=\\\"sb-c\\\"\\n              x1=\\\"12.753\\\"\\n              x2=\\\"15.997\\\"\\n              y1=\\\"11.412\\\"\\n              y2=\\\"17.519\\\"\\n            >\\n              <stop />\\n              <stop offset=\\\"1\\\" stopOpacity=\\\"0\\\" />\\n            </linearGradient>\\n            <clipPath id=\\\"sb-a\\\">\\n              <path d=\\\"M6.354 6h19.292v20H6.354z\\\" fill=\\\"#fff\\\" />\\n            </clipPath>\\n          </defs>\\n        </svg>\\n        <div className=\\\"grid grow gap-2\\\">\\n          <Label htmlFor={id}>\\n            Label{\\\" \\\"}\\n            <span className=\\\"font-normal text-muted-foreground text-xs leading-[inherit]\\\">\\n              (Sublabel)\\n            </span>\\n          </Label>\\n          <p className=\\\"text-muted-foreground text-xs\\\" id={`${id}-description`}>\\n            A short description goes here.\\n          </p>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"switch\",\n      \"label\",\n      \"card\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-189.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-189\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-189.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Simple select (native)</Label>\\n      <SelectNative id={id}>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-19\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-19.tsx\",\n      \"content\": \"import { SendIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with end inline button</Label>\\n      <div className=\\\"relative\\\">\\n        <Input className=\\\"pe-9\\\" id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n        <button\\n          aria-label=\\\"Subscribe\\\"\\n          className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n          type=\\\"button\\\"\\n        >\\n          <SendIcon aria-hidden=\\\"true\\\" size={16} />\\n        </button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-190.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-190\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-190.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with placeholder (native)</Label>\\n      <SelectNative defaultValue=\\\"\\\" id={id}>\\n        <option disabled value=\\\"\\\">\\n          Please select a value\\n        </option>\\n        <option value=\\\"1\\\">1 to 5</option>\\n        <option value=\\\"2\\\">5 to 10</option>\\n        <option value=\\\"3\\\">More than 10</option>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-191.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-191\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-191.tsx\",\n      \"content\": \"import { ClockIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with icon (native)</Label>\\n      <div className=\\\"group relative\\\">\\n        <SelectNative className=\\\"ps-9\\\" id={id}>\\n          <option value=\\\"1\\\">00:00 AM - 11:59 PM</option>\\n          <option value=\\\"2\\\">01:00 AM - 12:59 PM</option>\\n          <option value=\\\"3\\\">02:00 AM - 01:59 PM</option>\\n          <option value=\\\"4\\\">03:00 AM - 02:59 PM</option>\\n        </SelectNative>\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[select[disabled]]:opacity-50\\\">\\n          <ClockIcon aria-hidden=\\\"true\\\" size={16} />\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\",\n      \"time\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-192.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-192\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-192.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with helper text (native)</Label>\\n      <SelectNative id={id}>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Tell us what&lsquo;s your favorite Select framework\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-193.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-193\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-193.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"[--ring:var(--color-indigo-300)] in-[.dark]:[--ring:var(--color-indigo-900)] *:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with colored border (native)</Label>\\n      <SelectNative id={id}>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-194.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-194\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-194.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with error (native)</Label>\\n      <SelectNative aria-invalid id={id}>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-destructive text-xs\\\"\\n        role=\\\"alert\\\"\\n      >\\n        Selected option is invalid\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\",\n      \"error\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-195.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-195\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-195.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with gray background (native)</Label>\\n      <SelectNative className=\\\"border-transparent bg-muted shadow-none\\\" id={id}>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-196.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-196\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-196.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Disabled select (native)</Label>\\n      <SelectNative disabled id={id}>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\",\n      \"disabled\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-197.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-197\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-197.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>\\n        Required select (native) <span className=\\\"text-destructive\\\">*</span>\\n      </Label>\\n      <SelectNative id={id}>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-198.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-198\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-198.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with auto-width (native)</Label>\\n      <div className=\\\"w-fit\\\">\\n        <SelectNative id={id}>\\n          <option value=\\\"1\\\">React</option>\\n          <option value=\\\"2\\\">Next.js</option>\\n          <option value=\\\"3\\\">Astro</option>\\n          <option value=\\\"4\\\">Gatsby</option>\\n        </SelectNative>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-199.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-199\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-199.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with option groups (native)</Label>\\n      <SelectNative id={id}>\\n        <optgroup label=\\\"Frontend\\\">\\n          <option value=\\\"1\\\">React</option>\\n          <option value=\\\"2\\\">Vue</option>\\n          <option value=\\\"3\\\">Angular</option>\\n        </optgroup>\\n        <optgroup label=\\\"Backend\\\">\\n          <option value=\\\"4\\\">Node.js</option>\\n          <option value=\\\"5\\\">Python</option>\\n          <option value=\\\"6\\\">Java</option>\\n        </optgroup>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-20.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-20\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-20.tsx\",\n      \"content\": \"import { DownloadIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with end icon button</Label>\\n      <div className=\\\"flex rounded-md shadow-xs\\\">\\n        <Input\\n          className=\\\"-me-px flex-1 rounded-e-none shadow-none focus-visible:z-10\\\"\\n          id={id}\\n          placeholder=\\\"Email\\\"\\n          type=\\\"email\\\"\\n        />\\n        <button\\n          aria-label=\\\"Subscribe\\\"\\n          className=\\\"inline-flex w-9 items-center justify-center rounded-e-md border border-input bg-background text-muted-foreground/80 text-sm outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n          type=\\\"button\\\"\\n        >\\n          <DownloadIcon aria-hidden=\\\"true\\\" size={16} />\\n        </button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-200.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-200\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-200.tsx\",\n      \"content\": \"import { useId, useMemo } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const timezones = Intl.supportedValuesOf(\\\"timeZone\\\");\\n\\n  const formattedTimezones = useMemo(() => {\\n    return timezones\\n      .map((timezone) => {\\n        const formatter = new Intl.DateTimeFormat(\\\"en\\\", {\\n          timeZone: timezone,\\n          timeZoneName: \\\"shortOffset\\\",\\n        });\\n        const parts = formatter.formatToParts(new Date());\\n        const offset =\\n          parts.find((part) => part.type === \\\"timeZoneName\\\")?.value || \\\"\\\";\\n        const modifiedOffset = offset === \\\"GMT\\\" ? \\\"GMT+0\\\" : offset;\\n\\n        return {\\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \\\" \\\")}`,\\n          numericOffset: Number.parseInt(\\n            offset.replace(\\\"GMT\\\", \\\"\\\").replace(\\\"+\\\", \\\"\\\") || \\\"0\\\",\\n            10,\\n          ),\\n          value: timezone,\\n        };\\n      })\\n      .sort((a, b) => a.numericOffset - b.numericOffset);\\n  }, [timezones]);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Timezone select (native)</Label>\\n      <SelectNative defaultValue=\\\"Europe/London\\\" id={id}>\\n        {formattedTimezones.map(({ value, label }) => (\\n          <option key={value} value={value}>\\n            {label}\\n          </option>\\n        ))}\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\",\n      \"timezone\",\n      \"time\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-201.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-201\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-201.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"group relative\\\">\\n      <label\\n        className=\\\"-translate-y-1/2 absolute start-1 top-0 z-10 block bg-background px-2 font-medium text-foreground text-xs group-has-[select:disabled]:opacity-50\\\"\\n        htmlFor={id}\\n      >\\n        Select with overlapping label (native)\\n      </label>\\n      <SelectNative defaultValue=\\\"\\\" id={id}>\\n        <option disabled value=\\\"\\\">\\n          Select framework\\n        </option>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-202.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-202\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select-native.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-202.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative rounded-md border border-input bg-background shadow-xs outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[select:is(:disabled)_*]:pointer-events-none has-[select:disabled]:cursor-not-allowed has-aria-invalid:border-destructive has-[select:disabled]:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\\\">\\n      <label\\n        className=\\\"block px-3 pt-2 font-medium text-foreground text-xs\\\"\\n        htmlFor={id}\\n      >\\n        Select with inset label (native)\\n      </label>\\n      <SelectNative\\n        className=\\\"border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0\\\"\\n        defaultValue=\\\"\\\"\\n        id={id}\\n      >\\n        <option disabled value=\\\"\\\">\\n          Select framework\\n        </option>\\n        <option value=\\\"1\\\">React</option>\\n        <option value=\\\"2\\\">Next.js</option>\\n        <option value=\\\"3\\\">Astro</option>\\n        <option value=\\\"4\\\">Gatsby</option>\\n      </SelectNative>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-203.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-203\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-203.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Simple select with default value</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-204.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-204\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-204.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with placeholder</Label>\\n      <Select>\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-205.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-205\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-205.tsx\",\n      \"content\": \"import { ClockIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with icon</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger className=\\\"relative ps-9\\\" id={id}>\\n          <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[select[disabled]]:opacity-50\\\">\\n            <ClockIcon aria-hidden=\\\"true\\\" size={16} />\\n          </div>\\n          <SelectValue placeholder=\\\"Select time\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">00:00 AM - 11:59 PM</SelectItem>\\n          <SelectItem value=\\\"2\\\">01:00 AM - 12:59 PM</SelectItem>\\n          <SelectItem value=\\\"3\\\">02:00 AM - 01:59 PM</SelectItem>\\n          <SelectItem value=\\\"4\\\">03:00 AM - 02:59 PM</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-206.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-206\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-206.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with helper text</Label>\\n      <Select defaultValue=\\\"3\\\">\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Tell us what&lsquo;s your favorite Select framework\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"helper\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-207.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-207\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-207.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"[--ring:var(--color-indigo-300)] in-[.dark]:[--ring:var(--color-indigo-900)] *:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with colored border and ring</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-208.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-208\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-208.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with error</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger aria-invalid id={id}>\\n          <SelectValue />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-destructive text-xs\\\"\\n        role=\\\"alert\\\"\\n      >\\n        Selected option is invalid\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-209.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-209\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-209.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with gray background</Label>\\n      <Select defaultValue=\\\"2\\\">\\n        <SelectTrigger\\n          className=\\\"border-transparent bg-muted shadow-none\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-21.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-21\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-21.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with end button</Label>\\n      <div className=\\\"flex rounded-md shadow-xs\\\">\\n        <Input\\n          className=\\\"-me-px flex-1 rounded-e-none shadow-none focus-visible:z-10\\\"\\n          id={id}\\n          placeholder=\\\"Email\\\"\\n          type=\\\"email\\\"\\n        />\\n        <button\\n          className=\\\"inline-flex items-center rounded-e-md border border-input bg-background px-3 font-medium text-foreground text-sm outline-none transition-[color,box-shadow] hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50\\\"\\n          type=\\\"button\\\"\\n        >\\n          Send\\n        </button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-210.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-210\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-210.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Disabled select</Label>\\n      <Select defaultValue=\\\"1\\\" disabled>\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"disabled\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-211.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-211\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-211.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>\\n        Required select <span className=\\\"text-destructive\\\">*</span>\\n      </Label>\\n      <Select defaultValue=\\\"4\\\" required>\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"required\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-212.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-212\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-212.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with auto-width</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        {/* Adjust the min-width to fit the longest option */}\\n        <SelectTrigger className=\\\"w-auto min-w-48 max-w-full\\\" id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-213.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-213\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-213.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with options groups</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectGroup>\\n            <SelectLabel>Frontend</SelectLabel>\\n            <SelectItem value=\\\"1\\\">React</SelectItem>\\n            <SelectItem value=\\\"2\\\">Vue</SelectItem>\\n            <SelectItem value=\\\"3\\\">Angular</SelectItem>\\n          </SelectGroup>\\n          <SelectGroup>\\n            <SelectLabel>Backend</SelectLabel>\\n            <SelectItem value=\\\"4\\\">Node.js</SelectItem>\\n            <SelectItem value=\\\"5\\\">Python</SelectItem>\\n            <SelectItem value=\\\"6\\\">Java</SelectItem>\\n          </SelectGroup>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-214.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-214\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-214.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectSeparator,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with separator</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectGroup>\\n            <SelectLabel>Frontend</SelectLabel>\\n            <SelectItem value=\\\"1\\\">React</SelectItem>\\n            <SelectItem value=\\\"2\\\">Vue</SelectItem>\\n            <SelectItem value=\\\"3\\\">Angular</SelectItem>\\n          </SelectGroup>\\n          <SelectSeparator />\\n          <SelectGroup>\\n            <SelectLabel>Backend</SelectLabel>\\n            <SelectItem value=\\\"4\\\">Node.js</SelectItem>\\n            <SelectItem value=\\\"5\\\">Python</SelectItem>\\n            <SelectItem value=\\\"6\\\">Java</SelectItem>\\n          </SelectGroup>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-215.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-215\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-215.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with disabled options</Label>\\n      <Select defaultValue=\\\"2\\\">\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem disabled value=\\\"1\\\">\\n            React\\n          </SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem disabled value=\\\"3\\\">\\n            Astro\\n          </SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"disabled\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-216.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-216\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-216.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"group relative\\\">\\n      <label\\n        className=\\\"-translate-y-1/2 absolute start-1 top-0 z-10 block bg-background px-2 font-medium text-foreground text-xs group-has-disabled:opacity-50\\\"\\n        htmlFor={id}\\n      >\\n        Select with overlapping label\\n      </label>\\n      <Select>\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-217.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-217\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-217.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative rounded-md border border-input bg-background shadow-xs outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 has-[input:is(:disabled)]:*:pointer-events-none dark:has-aria-invalid:ring-destructive/40\\\">\\n      <label\\n        className=\\\"block px-3 pt-2 font-medium text-foreground text-xs\\\"\\n        htmlFor={id}\\n      >\\n        Select with inset label\\n      </label>\\n      <Select>\\n        <SelectTrigger\\n          className=\\\"border-none bg-transparent shadow-none focus:ring-0 focus:ring-offset-0\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-218.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-218\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-218.tsx\",\n      \"content\": \"import { useId, useMemo } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const timezones = Intl.supportedValuesOf(\\\"timeZone\\\");\\n\\n  const formattedTimezones = useMemo(() => {\\n    return timezones\\n      .map((timezone) => {\\n        const formatter = new Intl.DateTimeFormat(\\\"en\\\", {\\n          timeZone: timezone,\\n          timeZoneName: \\\"shortOffset\\\",\\n        });\\n        const parts = formatter.formatToParts(new Date());\\n        const offset =\\n          parts.find((part) => part.type === \\\"timeZoneName\\\")?.value || \\\"\\\";\\n        const modifiedOffset = offset === \\\"GMT\\\" ? \\\"GMT+0\\\" : offset;\\n\\n        return {\\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \\\" \\\")}`,\\n          numericOffset: Number.parseInt(\\n            offset.replace(\\\"GMT\\\", \\\"\\\").replace(\\\"+\\\", \\\"\\\") || \\\"0\\\",\\n            10,\\n          ),\\n          value: timezone,\\n        };\\n      })\\n      .sort((a, b) => a.numericOffset - b.numericOffset);\\n  }, [timezones]);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Timezone select</Label>\\n      <Select defaultValue=\\\"Europe/London\\\">\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select timezone\\\" />\\n        </SelectTrigger>\\n        <SelectContent>\\n          {formattedTimezones.map(({ value, label }) => (\\n            <SelectItem key={value} value={value}>\\n              {label}\\n            </SelectItem>\\n          ))}\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"timezone\",\n      \"time\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-219.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-219\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-219.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with right indicator</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger id={id}>\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n          <SelectItem value=\\\"1\\\">React</SelectItem>\\n          <SelectItem value=\\\"2\\\">Next.js</SelectItem>\\n          <SelectItem value=\\\"3\\\">Astro</SelectItem>\\n          <SelectItem value=\\\"4\\\">Gatsby</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-22.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-22\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-22.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with button</Label>\\n      <div className=\\\"flex gap-2\\\">\\n        <Input className=\\\"flex-1\\\" id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n        <Button variant=\\\"outline\\\">Send</Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-220.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-220\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-220.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nfunction StatusDot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"8\\\"\\n      viewBox=\\\"0 0 8 8\\\"\\n      width=\\\"8\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <circle cx=\\\"4\\\" cy=\\\"4\\\" r=\\\"4\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Status select</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger\\n          className=\\\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Select status\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n          <SelectItem value=\\\"1\\\">\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <StatusDot className=\\\"text-emerald-600\\\" />\\n              <span className=\\\"truncate\\\">Completed</span>\\n            </span>\\n          </SelectItem>\\n          <SelectItem value=\\\"2\\\">\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <StatusDot className=\\\"text-blue-500\\\" />\\n              <span className=\\\"truncate\\\">In Progress</span>\\n            </span>\\n          </SelectItem>\\n          <SelectItem value=\\\"3\\\">\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <StatusDot className=\\\"text-amber-500\\\" />\\n              <span className=\\\"truncate\\\">Pending</span>\\n            </span>\\n          </SelectItem>\\n          <SelectItem value=\\\"4\\\">\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <StatusDot className=\\\"text-gray-500\\\" />\\n              <span className=\\\"truncate\\\">Cancelled</span>\\n            </span>\\n          </SelectItem>\\n          <SelectItem value=\\\"5\\\">\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <StatusDot className=\\\"text-red-500\\\" />\\n              <span className=\\\"truncate\\\">Failed</span>\\n            </span>\\n          </SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"status\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-221.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-221\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-221.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with left text</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger id={id}>\\n          <span>\\n            Language: <SelectValue placeholder=\\\"Select a language\\\" />\\n          </span>\\n        </SelectTrigger>\\n        <SelectContent>\\n          <SelectItem value=\\\"1\\\">Javascript</SelectItem>\\n          <SelectItem value=\\\"2\\\">Bash</SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-222.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-222\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-222.tsx\",\n      \"content\": \"import { RiGatsbyLine, RiNextjsLine, RiReactjsLine } from \\\"@remixicon/react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Options with icon</Label>\\n      <Select defaultValue=\\\"3\\\">\\n        <SelectTrigger\\n          className=\\\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:flex [&_*[role=option]>span]:gap-2\\\">\\n          <SelectItem value=\\\"1\\\">\\n            <RiReactjsLine aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"truncate\\\">React</span>\\n          </SelectItem>\\n          <SelectItem value=\\\"2\\\">\\n            <RiNextjsLine aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"truncate\\\">Next.js</span>\\n          </SelectItem>\\n          <SelectItem value=\\\"3\\\">\\n            <RiGatsbyLine aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"truncate\\\">Gatsby</span>\\n          </SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-223.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-223\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-223.tsx\",\n      \"content\": \"import { RiGatsbyLine, RiNextjsLine, RiReactjsLine } from \\\"@remixicon/react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Options with icon and right indicator</Label>\\n      <Select defaultValue=\\\"2\\\">\\n        <SelectTrigger\\n          className=\\\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n          <SelectItem value=\\\"1\\\">\\n            <RiReactjsLine aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"truncate\\\">React</span>\\n          </SelectItem>\\n          <SelectItem value=\\\"2\\\">\\n            <RiNextjsLine aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"truncate\\\">Next.js</span>\\n          </SelectItem>\\n          <SelectItem value=\\\"3\\\">\\n            <RiGatsbyLine aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"truncate\\\">Gatsby</span>\\n          </SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-224.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-224\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-224.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with description and right indicator</Label>\\n      <Select defaultValue=\\\"2\\\">\\n        <SelectTrigger className=\\\"**:data-desc:hidden\\\" id={id}>\\n          <SelectValue placeholder=\\\"Choose a plan\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n          <SelectItem value=\\\"1\\\">\\n            Standard Plan\\n            <span\\n              className=\\\"mt-1 block text-muted-foreground text-xs\\\"\\n              data-desc\\n            >\\n              Ideal for individuals\\n            </span>\\n          </SelectItem>\\n          <SelectItem value=\\\"2\\\">\\n            Pro Plan\\n            <span\\n              className=\\\"mt-1 block text-muted-foreground text-xs\\\"\\n              data-desc\\n            >\\n              For professional users\\n            </span>\\n          </SelectItem>\\n          <SelectItem value=\\\"3\\\">\\n            Enterprise Plan\\n            <span\\n              className=\\\"mt-1 block text-muted-foreground text-xs\\\"\\n              data-desc\\n            >\\n              Built for large teams\\n            </span>\\n          </SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-225.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-225\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-225.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst countries = [\\n  {\\n    continent: \\\"America\\\",\\n    items: [\\n      { flag: \\\"🇺🇸\\\", label: \\\"United States\\\", value: \\\"1\\\" },\\n      { flag: \\\"🇨🇦\\\", label: \\\"Canada\\\", value: \\\"2\\\" },\\n      { flag: \\\"🇲🇽\\\", label: \\\"Mexico\\\", value: \\\"3\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Africa\\\",\\n    items: [\\n      { flag: \\\"🇿🇦\\\", label: \\\"South Africa\\\", value: \\\"4\\\" },\\n      { flag: \\\"🇳🇬\\\", label: \\\"Nigeria\\\", value: \\\"5\\\" },\\n      { flag: \\\"🇲🇦\\\", label: \\\"Morocco\\\", value: \\\"6\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Asia\\\",\\n    items: [\\n      { flag: \\\"🇨🇳\\\", label: \\\"China\\\", value: \\\"7\\\" },\\n      { flag: \\\"🇯🇵\\\", label: \\\"Japan\\\", value: \\\"8\\\" },\\n      { flag: \\\"🇮🇳\\\", label: \\\"India\\\", value: \\\"9\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Europe\\\",\\n    items: [\\n      { flag: \\\"🇬🇧\\\", label: \\\"United Kingdom\\\", value: \\\"10\\\" },\\n      { flag: \\\"🇫🇷\\\", label: \\\"France\\\", value: \\\"11\\\" },\\n      { flag: \\\"🇩🇪\\\", label: \\\"Germany\\\", value: \\\"12\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Oceania\\\",\\n    items: [\\n      { flag: \\\"🇦🇺\\\", label: \\\"Australia\\\", value: \\\"13\\\" },\\n      { flag: \\\"🇳🇿\\\", label: \\\"New Zealand\\\", value: \\\"14\\\" },\\n    ],\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Options with flag</Label>\\n      <Select defaultValue=\\\"2\\\">\\n        <SelectTrigger\\n          className=\\\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n          {countries.map((continent) => (\\n            <SelectGroup key={continent.continent}>\\n              <SelectLabel className=\\\"ps-2\\\">{continent.continent}</SelectLabel>\\n              {continent.items.map((item) => (\\n                <SelectItem key={item.value} value={item.value}>\\n                  <span className=\\\"text-lg leading-none\\\">{item.flag}</span>{\\\" \\\"}\\n                  <span className=\\\"truncate\\\">{item.label}</span>\\n                </SelectItem>\\n              ))}\\n            </SelectGroup>\\n          ))}\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"flag\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-226.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-226\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-226.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Options with avatar</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger\\n          className=\\\"ps-2 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n          <SelectGroup>\\n            <SelectLabel className=\\\"ps-2\\\">Impersonate user</SelectLabel>\\n            <SelectItem value=\\\"1\\\">\\n              <img\\n                alt=\\\"Frank Allison\\\"\\n                className=\\\"size-5 rounded\\\"\\n                height={20}\\n                src=\\\"/origin/avatar-20-01.jpg\\\"\\n                width={20}\\n              />\\n              <span className=\\\"truncate\\\">Jenny Hamilton</span>\\n            </SelectItem>\\n            <SelectItem value=\\\"2\\\">\\n              <img\\n                alt=\\\"Xavier Guerra\\\"\\n                className=\\\"size-5 rounded\\\"\\n                height={20}\\n                src=\\\"/origin/avatar-20-02.jpg\\\"\\n                width={20}\\n              />\\n              <span className=\\\"truncate\\\">Paul Smith</span>\\n            </SelectItem>\\n            <SelectItem value=\\\"3\\\">\\n              <img\\n                alt=\\\"Anne Kelley\\\"\\n                className=\\\"size-5 rounded\\\"\\n                height={20}\\n                src=\\\"/origin/avatar-20-03.jpg\\\"\\n                width={20}\\n              />\\n              <span className=\\\"truncate\\\">Luna Wyen</span>\\n            </SelectItem>\\n          </SelectGroup>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-227.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-227\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-227.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst Square = ({\\n  className,\\n  children,\\n}: {\\n  className?: string;\\n  children: React.ReactNode;\\n}) => (\\n  <span\\n    aria-hidden=\\\"true\\\"\\n    className={cn(\\n      \\\"flex size-5 items-center justify-center rounded bg-muted font-medium text-muted-foreground text-xs\\\",\\n      className,\\n    )}\\n    data-square\\n  >\\n    {children}\\n  </span>\\n);\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Options with placeholder avatar</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger\\n          className=\\\"ps-2 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_[data-square]]:shrink-0\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Select framework\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n          <SelectGroup>\\n            <SelectLabel className=\\\"ps-2\\\">Impersonate user</SelectLabel>\\n            <SelectItem value=\\\"1\\\">\\n              <Square className=\\\"bg-indigo-400/20 text-indigo-500\\\">F</Square>\\n              <span className=\\\"truncate\\\">Frank Morris</span>\\n            </SelectItem>\\n            <SelectItem value=\\\"2\\\">\\n              <Square className=\\\"bg-purple-400/20 text-purple-500\\\">X</Square>\\n              <span className=\\\"truncate\\\">Xavier Guerra</span>\\n            </SelectItem>\\n            <SelectItem value=\\\"3\\\">\\n              <Square className=\\\"bg-rose-400/20 text-rose-500\\\">A</Square>\\n              <span className=\\\"truncate\\\">Anne Kelley</span>\\n            </SelectItem>\\n          </SelectGroup>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-228.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-228\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-228.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Options with portrait</Label>\\n      <Select defaultValue=\\\"1\\\">\\n        <SelectTrigger\\n          className=\\\"h-auto ps-2 text-left [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0\\\"\\n          id={id}\\n        >\\n          <SelectValue placeholder=\\\"Choose a plan\\\" />\\n        </SelectTrigger>\\n        <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n          <SelectItem value=\\\"1\\\">\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <img\\n                alt=\\\"Jenny Hamilton\\\"\\n                className=\\\"rounded-full\\\"\\n                height={40}\\n                src=\\\"/origin/avatar-40-01.jpg\\\"\\n                width={40}\\n              />\\n              <span>\\n                <span className=\\\"block font-medium\\\">Jenny Hamilton</span>\\n                <span className=\\\"mt-0.5 block text-muted-foreground text-xs\\\">\\n                  @jennycodes\\n                </span>\\n              </span>\\n            </span>\\n          </SelectItem>\\n          <SelectItem value=\\\"2\\\">\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <img\\n                alt=\\\"Paul Smith\\\"\\n                className=\\\"rounded-full\\\"\\n                height={40}\\n                src=\\\"/origin/avatar-40-02.jpg\\\"\\n                width={40}\\n              />\\n              <span>\\n                <span className=\\\"block font-medium\\\">Paul Smith</span>\\n                <span className=\\\"mt-0.5 block text-muted-foreground text-xs\\\">\\n                  @paulsmith\\n                </span>\\n              </span>\\n            </span>\\n          </SelectItem>\\n          <SelectItem value=\\\"3\\\">\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <img\\n                alt=\\\"Luna Wyen\\\"\\n                className=\\\"rounded-full\\\"\\n                height={40}\\n                src=\\\"/origin/avatar-40-03.jpg\\\"\\n                width={40}\\n              />\\n              <span>\\n                <span className=\\\"block font-medium\\\">Luna Wyen</span>\\n                <span className=\\\"mt-0.5 block text-muted-foreground text-xs\\\">\\n                  @wyen.luna\\n                </span>\\n              </span>\\n            </span>\\n          </SelectItem>\\n        </SelectContent>\\n      </Select>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-229.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-229\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/command.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-229.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@/registry/default/ui/command\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst frameworks = [\\n  {\\n    label: \\\"Next.js\\\",\\n    value: \\\"next.js\\\",\\n  },\\n  {\\n    label: \\\"SvelteKit\\\",\\n    value: \\\"sveltekit\\\",\\n  },\\n  {\\n    label: \\\"Nuxt.js\\\",\\n    value: \\\"nuxt.js\\\",\\n  },\\n  {\\n    label: \\\"Remix\\\",\\n    value: \\\"remix\\\",\\n  },\\n  {\\n    label: \\\"Astro\\\",\\n    value: \\\"astro\\\",\\n  },\\n  {\\n    label: \\\"Angular\\\",\\n    value: \\\"angular\\\",\\n  },\\n  {\\n    label: \\\"Vue.js\\\",\\n    value: \\\"vue\\\",\\n  },\\n  {\\n    label: \\\"React\\\",\\n    value: \\\"react\\\",\\n  },\\n  {\\n    label: \\\"Ember.js\\\",\\n    value: \\\"ember\\\",\\n  },\\n  {\\n    label: \\\"Gatsby\\\",\\n    value: \\\"gatsby\\\",\\n  },\\n  {\\n    label: \\\"Eleventy\\\",\\n    value: \\\"eleventy\\\",\\n  },\\n  {\\n    label: \\\"SolidJS\\\",\\n    value: \\\"solid\\\",\\n  },\\n  {\\n    label: \\\"Preact\\\",\\n    value: \\\"preact\\\",\\n  },\\n  {\\n    label: \\\"Qwik\\\",\\n    value: \\\"qwik\\\",\\n  },\\n  {\\n    label: \\\"Alpine.js\\\",\\n    value: \\\"alpine\\\",\\n  },\\n  {\\n    label: \\\"Lit\\\",\\n    value: \\\"lit\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [open, setOpen] = useState<boolean>(false);\\n  const [value, setValue] = useState<string>(\\\"\\\");\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with search</Label>\\n      <Popover onOpenChange={setOpen} open={open}>\\n        <PopoverTrigger asChild>\\n          <Button\\n            aria-expanded={open}\\n            className=\\\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\"\\n            id={id}\\n            role=\\\"combobox\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            <span className={cn(\\\"truncate\\\", !value && \\\"text-muted-foreground\\\")}>\\n              {value\\n                ? frameworks.find((framework) => framework.value === value)\\n                    ?.label\\n                : \\\"Select framework\\\"}\\n            </span>\\n            <ChevronDownIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"shrink-0 text-muted-foreground/80\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent\\n          align=\\\"start\\\"\\n          className=\\\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\\\"\\n        >\\n          <Command>\\n            <CommandInput placeholder=\\\"Search framework...\\\" />\\n            <CommandList>\\n              <CommandEmpty>No framework found.</CommandEmpty>\\n              <CommandGroup>\\n                {frameworks.map((framework) => (\\n                  <CommandItem\\n                    key={framework.value}\\n                    onSelect={(currentValue) => {\\n                      setValue(currentValue === value ? \\\"\\\" : currentValue);\\n                      setOpen(false);\\n                    }}\\n                    value={framework.value}\\n                  >\\n                    {framework.label}\\n                    {value === framework.value && (\\n                      <CheckIcon className=\\\"ml-auto\\\" size={16} />\\n                    )}\\n                  </CommandItem>\\n                ))}\\n              </CommandGroup>\\n            </CommandList>\\n          </Command>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"command\",\n      \"combobox\",\n      \"popover\",\n      \"search\",\n      \"autocomplete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-23.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-23\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-23.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { EyeIcon, EyeOffIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [isVisible, setIsVisible] = useState<boolean>(false);\\n\\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Show/hide password input</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"pe-9\\\"\\n          id={id}\\n          placeholder=\\\"Password\\\"\\n          type={isVisible ? \\\"text\\\" : \\\"password\\\"}\\n        />\\n        <button\\n          aria-controls=\\\"password\\\"\\n          aria-label={isVisible ? \\\"Hide password\\\" : \\\"Show password\\\"}\\n          aria-pressed={isVisible}\\n          className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n          onClick={toggleVisibility}\\n          type=\\\"button\\\"\\n        >\\n          {isVisible ? (\\n            <EyeOffIcon aria-hidden=\\\"true\\\" size={16} />\\n          ) : (\\n            <EyeIcon aria-hidden=\\\"true\\\" size={16} />\\n          )}\\n        </button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\",\n      \"password\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-230.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-230\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/command.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-230.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, ChevronDownIcon, PlusIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n  CommandSeparator,\\n} from \\\"@/registry/default/ui/command\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst organizations = [\\n  {\\n    label: \\\"coss.com\\\",\\n    value: \\\"coss\\\",\\n  },\\n  {\\n    label: \\\"Cruip\\\",\\n    value: \\\"cruip\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [open, setOpen] = useState<boolean>(false);\\n  const [value, setValue] = useState<string>(\\\"coss\\\");\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Select with search and button</Label>\\n      <Popover onOpenChange={setOpen} open={open}>\\n        <PopoverTrigger asChild>\\n          <Button\\n            aria-expanded={open}\\n            className=\\\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\"\\n            id={id}\\n            role=\\\"combobox\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            <span className={cn(\\\"truncate\\\", !value && \\\"text-muted-foreground\\\")}>\\n              {value\\n                ? organizations.find(\\n                    (organization) => organization.value === value,\\n                  )?.label\\n                : \\\"Select organization\\\"}\\n            </span>\\n            <ChevronDownIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"shrink-0 text-muted-foreground/80\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent\\n          align=\\\"start\\\"\\n          className=\\\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\\\"\\n        >\\n          <Command>\\n            <CommandInput placeholder=\\\"Find organization\\\" />\\n            <CommandList>\\n              <CommandEmpty>No organization found.</CommandEmpty>\\n              <CommandGroup>\\n                {organizations.map((organization) => (\\n                  <CommandItem\\n                    key={organization.value}\\n                    onSelect={(currentValue) => {\\n                      setValue(currentValue === value ? \\\"\\\" : currentValue);\\n                      setOpen(false);\\n                    }}\\n                    value={organization.value}\\n                  >\\n                    {organization.label}\\n                    {value === organization.value && (\\n                      <CheckIcon className=\\\"ml-auto\\\" size={16} />\\n                    )}\\n                  </CommandItem>\\n                ))}\\n              </CommandGroup>\\n              <CommandSeparator />\\n              <CommandGroup>\\n                <Button\\n                  className=\\\"w-full justify-start font-normal\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  <PlusIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"-ms-2 opacity-60\\\"\\n                    size={16}\\n                  />\\n                  New organization\\n                </Button>\\n              </CommandGroup>\\n            </CommandList>\\n          </Command>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"command\",\n      \"combobox\",\n      \"popover\",\n      \"search\",\n      \"autocomplete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-231.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-231\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/command.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-231.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { useId, useMemo, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@/registry/default/ui/command\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [open, setOpen] = useState<boolean>(false);\\n  const [value, setValue] = useState<string>(\\\"Europe/London\\\");\\n\\n  const timezones = Intl.supportedValuesOf(\\\"timeZone\\\");\\n\\n  const formattedTimezones = useMemo(() => {\\n    return timezones\\n      .map((timezone) => {\\n        const formatter = new Intl.DateTimeFormat(\\\"en\\\", {\\n          timeZone: timezone,\\n          timeZoneName: \\\"shortOffset\\\",\\n        });\\n        const parts = formatter.formatToParts(new Date());\\n        const offset =\\n          parts.find((part) => part.type === \\\"timeZoneName\\\")?.value || \\\"\\\";\\n        const modifiedOffset = offset === \\\"GMT\\\" ? \\\"GMT+0\\\" : offset;\\n\\n        return {\\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \\\" \\\")}`,\\n          numericOffset: Number.parseInt(\\n            offset.replace(\\\"GMT\\\", \\\"\\\").replace(\\\"+\\\", \\\"\\\") || \\\"0\\\",\\n            10,\\n          ),\\n          value: timezone,\\n        };\\n      })\\n      .sort((a, b) => a.numericOffset - b.numericOffset);\\n  }, [timezones]);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Timezone select with search</Label>\\n      <Popover onOpenChange={setOpen} open={open}>\\n        <PopoverTrigger asChild>\\n          <Button\\n            aria-expanded={open}\\n            className=\\\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\"\\n            id={id}\\n            role=\\\"combobox\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            <span className={cn(\\\"truncate\\\", !value && \\\"text-muted-foreground\\\")}>\\n              {value\\n                ? formattedTimezones.find(\\n                    (timezone) => timezone.value === value,\\n                  )?.label\\n                : \\\"Select timezone\\\"}\\n            </span>\\n            <ChevronDownIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"shrink-0 text-muted-foreground/80\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent\\n          align=\\\"start\\\"\\n          className=\\\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\\\"\\n        >\\n          <Command\\n            filter={(value, search) => {\\n              const normalizedValue = value.toLowerCase();\\n              const normalizedSearch = search.toLowerCase().replace(/\\\\s+/g, \\\"\\\");\\n              return normalizedValue.includes(normalizedSearch) ? 1 : 0;\\n            }}\\n          >\\n            <CommandInput placeholder=\\\"Search timezone...\\\" />\\n            <CommandList>\\n              <CommandEmpty>No timezone found.</CommandEmpty>\\n              <CommandGroup>\\n                {formattedTimezones.map(({ value: itemValue, label }) => (\\n                  <CommandItem\\n                    key={itemValue}\\n                    onSelect={(currentValue) => {\\n                      setValue(currentValue === value ? \\\"\\\" : currentValue);\\n                      setOpen(false);\\n                    }}\\n                    value={itemValue}\\n                  >\\n                    {label}\\n                    {value === itemValue && (\\n                      <CheckIcon className=\\\"ml-auto\\\" size={16} />\\n                    )}\\n                  </CommandItem>\\n                ))}\\n              </CommandGroup>\\n            </CommandList>\\n          </Command>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"command\",\n      \"combobox\",\n      \"popover\",\n      \"search\",\n      \"autocomplete\",\n      \"timezone\",\n      \"time\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-232.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-232\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/command.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-232.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { Fragment, useId, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@/registry/default/ui/command\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst countries = [\\n  {\\n    continent: \\\"America\\\",\\n    items: [\\n      { flag: \\\"🇺🇸\\\", value: \\\"United States\\\" },\\n      { flag: \\\"🇨🇦\\\", value: \\\"Canada\\\" },\\n      { flag: \\\"🇲🇽\\\", value: \\\"Mexico\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Africa\\\",\\n    items: [\\n      { flag: \\\"🇿🇦\\\", value: \\\"South Africa\\\" },\\n      { flag: \\\"🇳🇬\\\", value: \\\"Nigeria\\\" },\\n      { flag: \\\"🇲🇦\\\", value: \\\"Morocco\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Asia\\\",\\n    items: [\\n      { flag: \\\"🇨🇳\\\", value: \\\"China\\\" },\\n      { flag: \\\"🇯🇵\\\", value: \\\"Japan\\\" },\\n      { flag: \\\"🇮🇳\\\", value: \\\"India\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Europe\\\",\\n    items: [\\n      { flag: \\\"🇬🇧\\\", value: \\\"United Kingdom\\\" },\\n      { flag: \\\"🇫🇷\\\", value: \\\"France\\\" },\\n      { flag: \\\"🇩🇪\\\", value: \\\"Germany\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Oceania\\\",\\n    items: [\\n      { flag: \\\"🇦🇺\\\", value: \\\"Australia\\\" },\\n      { flag: \\\"🇳🇿\\\", value: \\\"New Zealand\\\" },\\n    ],\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [open, setOpen] = useState<boolean>(false);\\n  const [value, setValue] = useState<string>(\\\"\\\");\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Options with flag and search</Label>\\n      <Popover onOpenChange={setOpen} open={open}>\\n        <PopoverTrigger asChild>\\n          <Button\\n            aria-expanded={open}\\n            className=\\\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\"\\n            id={id}\\n            role=\\\"combobox\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            {value ? (\\n              <span className=\\\"flex min-w-0 items-center gap-2\\\">\\n                <span className=\\\"text-lg leading-none\\\">\\n                  {\\n                    countries\\n                      .map((group) =>\\n                        group.items.find((item) => item.value === value),\\n                      )\\n                      .filter(Boolean)[0]?.flag\\n                  }\\n                </span>\\n                <span className=\\\"truncate\\\">{value}</span>\\n              </span>\\n            ) : (\\n              <span className=\\\"text-muted-foreground\\\">Select country</span>\\n            )}\\n            <ChevronDownIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"shrink-0 text-muted-foreground/80\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent\\n          align=\\\"start\\\"\\n          className=\\\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\\\"\\n        >\\n          <Command>\\n            <CommandInput placeholder=\\\"Search country...\\\" />\\n            <CommandList>\\n              <CommandEmpty>No country found.</CommandEmpty>\\n              {countries.map((group) => (\\n                <Fragment key={group.continent}>\\n                  <CommandGroup heading={group.continent}>\\n                    {group.items.map((country) => (\\n                      <CommandItem\\n                        key={country.value}\\n                        onSelect={(currentValue) => {\\n                          setValue(currentValue);\\n                          setOpen(false);\\n                        }}\\n                        value={country.value}\\n                      >\\n                        <span className=\\\"text-lg leading-none\\\">\\n                          {country.flag}\\n                        </span>{\\\" \\\"}\\n                        {country.value}\\n                        {value === country.value && (\\n                          <CheckIcon className=\\\"ml-auto\\\" size={16} />\\n                        )}\\n                      </CommandItem>\\n                    ))}\\n                  </CommandGroup>\\n                </Fragment>\\n              ))}\\n            </CommandList>\\n          </Command>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"command\",\n      \"combobox\",\n      \"popover\",\n      \"search\",\n      \"autocomplete\",\n      \"flag\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-233.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-233\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/command.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-233.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  BlocksIcon,\\n  BrainIcon,\\n  ChevronDownIcon,\\n  CpuIcon,\\n  DatabaseIcon,\\n  GlobeIcon,\\n  LayoutIcon,\\n  LineChartIcon,\\n  NetworkIcon,\\n  SearchIcon,\\n  ServerIcon,\\n} from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Command,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@/registry/default/ui/command\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst items = [\\n  {\\n    icon: LineChartIcon,\\n    label: \\\"Analytics Platform\\\",\\n    number: 2451,\\n    value: \\\"analytics platform\\\",\\n  },\\n  {\\n    icon: BrainIcon,\\n    label: \\\"AI Services\\\",\\n    number: 1832,\\n    value: \\\"ai services\\\",\\n  },\\n  {\\n    icon: DatabaseIcon,\\n    label: \\\"Database Systems\\\",\\n    number: 1654,\\n    value: \\\"database systems\\\",\\n  },\\n  {\\n    icon: CpuIcon,\\n    label: \\\"Compute Resources\\\",\\n    number: 943,\\n    value: \\\"compute resources\\\",\\n  },\\n  {\\n    icon: NetworkIcon,\\n    label: \\\"Network Services\\\",\\n    number: 832,\\n    value: \\\"network services\\\",\\n  },\\n  {\\n    icon: GlobeIcon,\\n    label: \\\"Web Services\\\",\\n    number: 654,\\n    value: \\\"web services\\\",\\n  },\\n  {\\n    icon: SearchIcon,\\n    label: \\\"Monitoring Tools\\\",\\n    number: 432,\\n    value: \\\"monitoring tools\\\",\\n  },\\n  {\\n    icon: ServerIcon,\\n    label: \\\"Server Management\\\",\\n    number: 321,\\n    value: \\\"server management\\\",\\n  },\\n  {\\n    icon: BlocksIcon,\\n    label: \\\"Infrastructure\\\",\\n    number: 234,\\n    value: \\\"infrastructure\\\",\\n  },\\n  {\\n    icon: LayoutIcon,\\n    label: \\\"Frontend Services\\\",\\n    number: 123,\\n    value: \\\"frontend services\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [open, setOpen] = useState<boolean>(false);\\n  const [value, setValue] = useState<string>(\\\"\\\");\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Options with icon and number</Label>\\n      <Popover onOpenChange={setOpen} open={open}>\\n        <PopoverTrigger asChild>\\n          <Button\\n            aria-expanded={open}\\n            className=\\\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\"\\n            id={id}\\n            role=\\\"combobox\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            {value ? (\\n              <span className=\\\"flex min-w-0 items-center gap-2\\\">\\n                {(() => {\\n                  const selectedItem = items.find(\\n                    (item) => item.value === value,\\n                  );\\n                  if (selectedItem) {\\n                    const Icon = selectedItem.icon;\\n                    return <Icon className=\\\"size-4 text-muted-foreground\\\" />;\\n                  }\\n                  return null;\\n                })()}\\n                <span className=\\\"truncate\\\">\\n                  {items.find((item) => item.value === value)?.label}\\n                </span>\\n              </span>\\n            ) : (\\n              <span className=\\\"text-muted-foreground\\\">\\n                Select service category\\n              </span>\\n            )}\\n            <ChevronDownIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"shrink-0 text-muted-foreground/80\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent\\n          align=\\\"start\\\"\\n          className=\\\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\\\"\\n        >\\n          <Command>\\n            <CommandInput placeholder=\\\"Search services...\\\" />\\n            <CommandList>\\n              <CommandEmpty>No service found.</CommandEmpty>\\n              <CommandGroup>\\n                {items.map((item) => (\\n                  <CommandItem\\n                    className=\\\"flex items-center justify-between\\\"\\n                    key={item.value}\\n                    onSelect={(currentValue) => {\\n                      setValue(currentValue === value ? \\\"\\\" : currentValue);\\n                      setOpen(false);\\n                    }}\\n                    value={item.value}\\n                  >\\n                    <div className=\\\"flex items-center gap-2\\\">\\n                      <item.icon className=\\\"size-4 text-muted-foreground\\\" />\\n                      {item.label}\\n                    </div>\\n                    <span className=\\\"text-muted-foreground text-xs\\\">\\n                      {item.number.toLocaleString()}\\n                    </span>\\n                  </CommandItem>\\n                ))}\\n              </CommandGroup>\\n            </CommandList>\\n          </Command>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"command\",\n      \"combobox\",\n      \"popover\",\n      \"search\",\n      \"autocomplete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-234.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-234\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/multiselect.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-234.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport MultipleSelector, {\\n  type Option,\\n} from \\\"@/registry/default/ui/multiselect\\\";\\n\\nconst frameworks: Option[] = [\\n  {\\n    label: \\\"Next.js\\\",\\n    value: \\\"next.js\\\",\\n  },\\n  {\\n    label: \\\"SvelteKit\\\",\\n    value: \\\"sveltekit\\\",\\n  },\\n  {\\n    disable: true,\\n    label: \\\"Nuxt.js\\\",\\n    value: \\\"nuxt.js\\\",\\n  },\\n  {\\n    label: \\\"Remix\\\",\\n    value: \\\"remix\\\",\\n  },\\n  {\\n    label: \\\"Astro\\\",\\n    value: \\\"astro\\\",\\n  },\\n  {\\n    label: \\\"Angular\\\",\\n    value: \\\"angular\\\",\\n  },\\n  {\\n    label: \\\"Vue.js\\\",\\n    value: \\\"vue\\\",\\n  },\\n  {\\n    label: \\\"React\\\",\\n    value: \\\"react\\\",\\n  },\\n  {\\n    label: \\\"Ember.js\\\",\\n    value: \\\"ember\\\",\\n  },\\n  {\\n    label: \\\"Gatsby\\\",\\n    value: \\\"gatsby\\\",\\n  },\\n  {\\n    disable: true,\\n    label: \\\"Eleventy\\\",\\n    value: \\\"eleventy\\\",\\n  },\\n  {\\n    label: \\\"SolidJS\\\",\\n    value: \\\"solid\\\",\\n  },\\n  {\\n    label: \\\"Preact\\\",\\n    value: \\\"preact\\\",\\n  },\\n  {\\n    label: \\\"Qwik\\\",\\n    value: \\\"qwik\\\",\\n  },\\n  {\\n    label: \\\"Alpine.js\\\",\\n    value: \\\"alpine\\\",\\n  },\\n  {\\n    label: \\\"Lit\\\",\\n    value: \\\"lit\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const _id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label>Multiselect</Label>\\n      <MultipleSelector\\n        commandProps={{\\n          label: \\\"Select frameworks\\\",\\n        }}\\n        defaultOptions={frameworks}\\n        emptyIndicator={<p className=\\\"text-center text-sm\\\">No results found</p>}\\n        hideClearAllButton\\n        hidePlaceholderWhenSelected\\n        placeholder=\\\"Select frameworks\\\"\\n        value={frameworks.slice(0, 2)}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Inspired by{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://shadcnui-expansions.typeart.cc/docs/multiple-selector\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          shadcn/ui expansions\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"multiselect\",\n      \"tag\",\n      \"input\",\n      \"search\",\n      \"autocomplete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-235.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-235\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/multiselect.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-235.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport MultipleSelector, {\\n  type Option,\\n} from \\\"@/registry/default/ui/multiselect\\\";\\n\\nconst frameworks: Option[] = [\\n  {\\n    label: \\\"Next.js\\\",\\n    value: \\\"next.js\\\",\\n  },\\n  {\\n    label: \\\"SvelteKit\\\",\\n    value: \\\"sveltekit\\\",\\n  },\\n  {\\n    label: \\\"Nuxt.js\\\",\\n    value: \\\"nuxt.js\\\",\\n  },\\n  {\\n    label: \\\"Remix\\\",\\n    value: \\\"remix\\\",\\n  },\\n  {\\n    label: \\\"Astro\\\",\\n    value: \\\"astro\\\",\\n  },\\n  {\\n    label: \\\"Angular\\\",\\n    value: \\\"angular\\\",\\n  },\\n  {\\n    label: \\\"Vue.js\\\",\\n    value: \\\"vue\\\",\\n  },\\n  {\\n    label: \\\"React\\\",\\n    value: \\\"react\\\",\\n  },\\n  {\\n    label: \\\"Ember.js\\\",\\n    value: \\\"ember\\\",\\n  },\\n  {\\n    label: \\\"Gatsby\\\",\\n    value: \\\"gatsby\\\",\\n  },\\n  {\\n    label: \\\"Eleventy\\\",\\n    value: \\\"eleventy\\\",\\n  },\\n  {\\n    label: \\\"SolidJS\\\",\\n    value: \\\"solid\\\",\\n  },\\n  {\\n    label: \\\"Preact\\\",\\n    value: \\\"preact\\\",\\n  },\\n  {\\n    label: \\\"Qwik\\\",\\n    value: \\\"qwik\\\",\\n  },\\n  {\\n    label: \\\"Alpine.js\\\",\\n    value: \\\"alpine\\\",\\n  },\\n  {\\n    label: \\\"Lit\\\",\\n    value: \\\"lit\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label>Multiselect with placeholder and clear</Label>\\n      <MultipleSelector\\n        commandProps={{\\n          label: \\\"Select frameworks\\\",\\n        }}\\n        defaultOptions={frameworks}\\n        emptyIndicator={<p className=\\\"text-center text-sm\\\">No results found</p>}\\n        placeholder=\\\"Select frameworks\\\"\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Inspired by{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://shadcnui-expansions.typeart.cc/docs/multiple-selector\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          shadcn/ui expansions\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"multiselect\",\n      \"tag\",\n      \"input\",\n      \"search\",\n      \"autocomplete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-236.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-236\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/select-native.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-236.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { SelectNative } from \\\"@/registry/default/ui/select-native\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Multiple select (native)</Label>\\n      <div className=\\\"overflow-hidden rounded-md border border-input\\\">\\n        <SelectNative className=\\\"rounded-none border-none\\\" id={id} multiple>\\n          <option value=\\\"1\\\">React</option>\\n          <option value=\\\"2\\\">Next.js</option>\\n          <option value=\\\"3\\\">Astro</option>\\n          <option value=\\\"4\\\">Gatsby</option>\\n          <option value=\\\"5\\\">Vue</option>\\n          <option value=\\\"6\\\">Angular</option>\\n        </SelectNative>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"multiselect\",\n      \"native select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-237.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-237\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-237.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ListBox, ListBoxItem } from \\\"react-aria-components\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label>Listbox with single option</Label>\\n      <div className=\\\"overflow-hidden rounded-md border border-input\\\">\\n        <ListBox\\n          aria-label=\\\"Select framework\\\"\\n          className=\\\"space-y-1 bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\\\"\\n          defaultSelectedKeys={[\\\"svelte\\\"]}\\n          selectionMode=\\\"single\\\"\\n        >\\n          <ListBoxItem\\n            className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n            id=\\\"react\\\"\\n          >\\n            React\\n          </ListBoxItem>\\n          <ListBoxItem\\n            className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n            id=\\\"vue\\\"\\n          >\\n            Vue\\n          </ListBoxItem>\\n          <ListBoxItem\\n            className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n            id=\\\"angular\\\"\\n            isDisabled\\n          >\\n            Angular\\n          </ListBoxItem>\\n          <ListBoxItem\\n            className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n            id=\\\"svelte\\\"\\n          >\\n            Svelte\\n          </ListBoxItem>\\n        </ListBox>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/ListBox.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"multiselect\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-238.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-238\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-238.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ListBox, ListBoxItem } from \\\"react-aria-components\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label>Listbox with multiple options</Label>\\n      <div className=\\\"overflow-hidden rounded-md border border-input\\\">\\n        <ListBox\\n          aria-label=\\\"Select framework\\\"\\n          className=\\\"max-h-72 min-h-20 space-y-1 overflow-auto bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\\\"\\n          defaultSelectedKeys={[\\\"react\\\", \\\"vue\\\"]}\\n          selectionMode=\\\"multiple\\\"\\n        >\\n          <ListBoxItem\\n            className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n            id=\\\"react\\\"\\n          >\\n            React\\n          </ListBoxItem>\\n          <ListBoxItem\\n            className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n            id=\\\"vue\\\"\\n          >\\n            Vue\\n          </ListBoxItem>\\n          <ListBoxItem\\n            className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n            id=\\\"angular\\\"\\n          >\\n            Angular\\n          </ListBoxItem>\\n          <ListBoxItem\\n            className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n            id=\\\"svelte\\\"\\n          >\\n            Svelte\\n          </ListBoxItem>\\n        </ListBox>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/ListBox.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"multiselect\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-239.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-239\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-239.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Header,\\n  ListBox,\\n  ListBoxItem,\\n  ListBoxSection,\\n  Separator,\\n} from \\\"react-aria-components\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label>Listbox with option groups</Label>\\n      <div className=\\\"overflow-hidden rounded-md border border-input\\\">\\n        <ListBox\\n          aria-label=\\\"Select some foods\\\"\\n          className=\\\"max-h-72 min-h-20 space-y-2 overflow-auto bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\\\"\\n          defaultSelectedKeys={[\\\"lettuce\\\", \\\"tuna\\\"]}\\n          selectionMode=\\\"multiple\\\"\\n        >\\n          <ListBoxSection className=\\\"space-y-1\\\">\\n            <Header className=\\\"px-2 py-1.5 font-medium text-muted-foreground text-xs\\\">\\n              Veggies\\n            </Header>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"lettuce\\\"\\n            >\\n              Lettuce\\n            </ListBoxItem>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"tomato\\\"\\n            >\\n              Tomato\\n            </ListBoxItem>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"onion\\\"\\n            >\\n              Onion\\n            </ListBoxItem>\\n          </ListBoxSection>\\n          <Separator className=\\\"-mx-1 my-2 h-px bg-border\\\" />\\n          <ListBoxSection className=\\\"space-y-1\\\">\\n            <Header className=\\\"px-2 py-1.5 font-medium text-muted-foreground text-xs\\\">\\n              Protein\\n            </Header>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"ham\\\"\\n            >\\n              Ham\\n            </ListBoxItem>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"tuna\\\"\\n            >\\n              Tuna\\n            </ListBoxItem>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"tofu\\\"\\n            >\\n              Tofu\\n            </ListBoxItem>\\n          </ListBoxSection>\\n          <Separator className=\\\"-mx-1 my-2 h-px bg-border\\\" />\\n          <ListBoxSection className=\\\"space-y-1\\\">\\n            <Header className=\\\"px-2 py-1.5 font-medium text-muted-foreground text-xs\\\">\\n              Condiments\\n            </Header>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"mayo\\\"\\n            >\\n              Mayonaise\\n            </ListBoxItem>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"mustard\\\"\\n            >\\n              Mustard\\n            </ListBoxItem>\\n            <ListBoxItem\\n              className=\\\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\"\\n              id=\\\"ranch\\\"\\n            >\\n              Ranch\\n            </ListBoxItem>\\n          </ListBoxSection>\\n        </ListBox>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/ListBox.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"select\",\n      \"multiselect\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-24.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-24\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-24.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CircleXIcon } from \\\"lucide-react\\\";\\nimport { useId, useRef, useState } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [inputValue, setInputValue] = useState(\\\"Click to clear\\\");\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const handleClearInput = () => {\\n    setInputValue(\\\"\\\");\\n    if (inputRef.current) {\\n      inputRef.current.focus();\\n    }\\n  };\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with clear button</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"pe-9\\\"\\n          id={id}\\n          onChange={(e) => setInputValue(e.target.value)}\\n          placeholder=\\\"Type something...\\\"\\n          ref={inputRef}\\n          type=\\\"text\\\"\\n          value={inputValue}\\n        />\\n        {inputValue && (\\n          <button\\n            aria-label=\\\"Clear input\\\"\\n            className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n            onClick={handleClearInput}\\n            type=\\\"button\\\"\\n          >\\n            <CircleXIcon aria-hidden=\\\"true\\\" size={16} />\\n          </button>\\n        )}\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-240.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-240\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-240.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Simple slider</Label>\\n      <Slider aria-label=\\\"Simple slider\\\" defaultValue={[25]} />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-241.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-241\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-241.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Disabled slider</Label>\\n      <Slider aria-label=\\\"Disabled slider\\\" defaultValue={[25]} disabled />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"disabled\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-242.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-242\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-242.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Slider with square thumb</Label>\\n      <Slider\\n        aria-label=\\\"Slider with square thumb\\\"\\n        className=\\\"[&>:last-child>span]:rounded\\\"\\n        defaultValue={[25]}\\n        max={100}\\n        step={10}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-243.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-243\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-243.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Slider with solid thumb</Label>\\n      <Slider\\n        aria-label=\\\"Slider with solid thumb\\\"\\n        className=\\\"[&>:first-child>span]:opacity-70 [&>:last-child>span]:bg-primary\\\"\\n        defaultValue={[25]}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-244.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-244\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-244.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Slider with tiny thumb</Label>\\n      <Slider\\n        aria-label=\\\"Slider with tiny thumb\\\"\\n        className=\\\"**:data-[slot=slider-thumb]:shadow-none [&>:last-child>span]:h-6 [&>:last-child>span]:w-2.5 [&>:last-child>span]:border-[3px] [&>:last-child>span]:border-background [&>:last-child>span]:bg-primary [&>:last-child>span]:ring-offset-0\\\"\\n        defaultValue={[25]}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-245.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-245\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-245.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Slider with reference labels</Label>\\n      <div>\\n        <Slider\\n          aria-label=\\\"Slider with reference labels\\\"\\n          defaultValue={[15]}\\n          max={35}\\n          min={5}\\n        />\\n        <span\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mt-4 flex w-full items-center justify-between gap-1 font-medium text-muted-foreground text-xs\\\"\\n        >\\n          <span>5 GB</span>\\n          <span>20 GB</span>\\n          <span>35 GB</span>\\n        </span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-246.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-246\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-246.tsx\",\n      \"content\": \"import { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const max = 12;\\n  const skipInterval = 2; // Set to 1 to allow no text skipping\\n  const ticks = [...Array(max + 1)].map((_, i) => i);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Slider with ticks</Label>\\n      <div>\\n        <Slider aria-label=\\\"Slider with ticks\\\" defaultValue={[5]} max={max} />\\n        <span\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs\\\"\\n        >\\n          {ticks.map((_, i) => (\\n            <span\\n              className=\\\"flex w-0 flex-col items-center justify-center gap-2\\\"\\n              key={String(i)}\\n            >\\n              <span\\n                className={cn(\\n                  \\\"h-1 w-px bg-muted-foreground/70\\\",\\n                  i % skipInterval !== 0 && \\\"h-0.5\\\",\\n                )}\\n              />\\n              <span className={cn(i % skipInterval !== 0 && \\\"opacity-0\\\")}>\\n                {i}\\n              </span>\\n            </span>\\n          ))}\\n        </span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-247.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-247\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-247.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const [value, setValue] = useState([25]);\\n\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <Label className=\\\"leading-6\\\">Slider with output</Label>\\n        <output className=\\\"font-medium text-sm tabular-nums\\\">{value[0]}</output>\\n      </div>\\n      <Slider\\n        aria-label=\\\"Slider with output\\\"\\n        onValueChange={setValue}\\n        value={value}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-248.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-248\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-248.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Slider with labels</Label>\\n      <div>\\n        <span\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mb-3 flex w-full items-center justify-between gap-2 font-medium text-muted-foreground text-xs\\\"\\n        >\\n          <span>Low</span>\\n          <span>High</span>\\n        </span>\\n        <Slider aria-label=\\\"Slider with labels\\\" defaultValue={[50]} step={10} />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-249.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-249\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-249.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Slider with labels and tooltip</Label>\\n      <div>\\n        <span\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mb-3 flex w-full items-center justify-between gap-2 font-medium text-muted-foreground text-xs\\\"\\n        >\\n          <span>Low</span>\\n          <span>High</span>\\n        </span>\\n        <Slider\\n          aria-label=\\\"Slider with labels and tooltip\\\"\\n          defaultValue={[50]}\\n          showTooltip={true}\\n          step={10}\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-25.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-25\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-25.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Search input with &lt;kbd&gt;</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"pe-11\\\"\\n          id={id}\\n          placeholder=\\\"Search...\\\"\\n          type=\\\"search\\\"\\n        />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-2 text-muted-foreground\\\">\\n          <kbd className=\\\"inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n            ⌘K\\n          </kbd>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"search\",\n      \"kbd\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-250.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-250\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-250.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Dual range slider</Label>\\n      <Slider\\n        aria-label=\\\"Dual range slider\\\"\\n        defaultValue={[25, 75]}\\n        step={10}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"range slider\",\n      \"label\",\n      \"range\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-251.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-251\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-251.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const [value, setValue] = useState([25, 75]);\\n\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <Label className=\\\"leading-6\\\">Dual range slider with output</Label>\\n        <output className=\\\"font-medium text-sm tabular-nums\\\">\\n          {value[0]} - {value[1]}\\n        </output>\\n      </div>\\n      <Slider\\n        aria-label=\\\"Dual range slider with output\\\"\\n        onValueChange={setValue}\\n        value={value}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"range slider\",\n      \"label\",\n      \"range\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-252.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-252\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-252.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Volume2Icon, VolumeXIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const [value, setValue] = useState([25]);\\n\\n  return (\\n    <div className=\\\"space-y-3\\\">\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <Label className=\\\"leading-6\\\">Volume</Label>\\n        <output className=\\\"font-medium text-sm tabular-nums\\\">{value[0]}</output>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <VolumeXIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0 opacity-60\\\"\\n          size={16}\\n        />\\n        <Slider\\n          aria-label=\\\"Volume slider\\\"\\n          onValueChange={setValue}\\n          value={value}\\n        />\\n        <Volume2Icon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0 opacity-60\\\"\\n          size={16}\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"volume\",\n      \"controls\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-253.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-253\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-253.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Slider with multiple thumbs</Label>\\n      <Slider\\n        aria-label=\\\"Slider with multiple thumbs\\\"\\n        defaultValue={[25, 50, 100]}\\n        showTooltip\\n        tooltipContent={(value) => `${value}%`}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"range slider\",\n      \"label\",\n      \"range\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-254.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-254\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-254.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RotateCcwIcon } from \\\"lucide-react\\\";\\n\\nimport { useSliderWithInput } from \\\"@/registry/default/hooks/use-slider-with-input\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  const minValue = 0;\\n  const maxValue = 2;\\n  const initialValue = [1.25];\\n  const defaultValue = [1];\\n\\n  const {\\n    sliderValue,\\n    inputValues,\\n    validateAndUpdateValue,\\n    handleInputChange,\\n    handleSliderChange,\\n    resetToDefault,\\n    showReset,\\n  } = useSliderWithInput({ defaultValue, initialValue, maxValue, minValue });\\n\\n  return (\\n    <div className=\\\"space-y-3\\\">\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <Label>Temperature</Label>\\n        <div className=\\\"flex items-center gap-1\\\">\\n          <TooltipProvider delayDuration={0}>\\n            <Tooltip>\\n              <TooltipTrigger asChild>\\n                <Button\\n                  aria-label=\\\"Reset\\\"\\n                  className={cn(\\n                    \\\"size-7 transition-opacity\\\",\\n                    showReset ? \\\"opacity-100\\\" : \\\"opacity-0\\\",\\n                  )}\\n                  onClick={resetToDefault}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  <RotateCcwIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </TooltipTrigger>\\n              <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n                Reset to default\\n              </TooltipContent>\\n            </Tooltip>\\n          </TooltipProvider>\\n          <Input\\n            aria-label=\\\"Enter value\\\"\\n            className=\\\"h-7 w-12 px-2 py-0\\\"\\n            inputMode=\\\"decimal\\\"\\n            onBlur={() => validateAndUpdateValue(inputValues[0] ?? \\\"\\\", 0)}\\n            onChange={(e) => handleInputChange(e, 0)}\\n            onKeyDown={(e) => {\\n              if (e.key === \\\"Enter\\\") {\\n                validateAndUpdateValue(inputValues[0] ?? \\\"\\\", 0);\\n              }\\n            }}\\n            type=\\\"text\\\"\\n            value={inputValues[0]}\\n          />\\n        </div>\\n      </div>\\n      <div className=\\\"flex items-center gap-4\\\">\\n        <Slider\\n          aria-label=\\\"Temperature\\\"\\n          className=\\\"grow\\\"\\n          max={maxValue}\\n          min={minValue}\\n          onValueChange={handleSliderChange}\\n          step={0.01}\\n          value={sliderValue}\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useState } from \\\"react\\\";\\n\\ntype UseSliderWithInputProps = {\\n  minValue?: number;\\n  maxValue?: number;\\n  initialValue?: number[];\\n  defaultValue?: number[];\\n};\\n\\nexport function useSliderWithInput({\\n  minValue = 0,\\n  maxValue = 100,\\n  initialValue = [minValue],\\n  defaultValue = [minValue],\\n}: UseSliderWithInputProps) {\\n  const [sliderValue, setSliderValue] = useState(initialValue);\\n  const [inputValues, setInputValues] = useState(\\n    initialValue.map((v) => v.toString()),\\n  );\\n\\n  const showReset =\\n    sliderValue.length === defaultValue.length &&\\n    !sliderValue.every((value, index) => value === defaultValue[index]);\\n\\n  const validateAndUpdateValue = useCallback(\\n    (rawValue: string, index: number) => {\\n      if (rawValue === \\\"\\\" || rawValue === \\\"-\\\") {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = \\\"0\\\";\\n        setInputValues(newInputValues);\\n\\n        const newSliderValues = [...sliderValue];\\n        newSliderValues[index] = 0;\\n        setSliderValue(newSliderValues);\\n        return;\\n      }\\n\\n      const numValue = Number.parseFloat(rawValue);\\n\\n      if (Number.isNaN(numValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = sliderValue[index]?.toString();\\n        setInputValues(newInputValues);\\n        return;\\n      }\\n\\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue));\\n\\n      if (sliderValue.length > 1) {\\n        if (index === 0) {\\n          clampedValue = Math.min(clampedValue, sliderValue[1]);\\n        } else {\\n          clampedValue = Math.max(clampedValue, sliderValue[0]);\\n        }\\n      }\\n\\n      const newSliderValues = [...sliderValue];\\n      newSliderValues[index] = clampedValue;\\n      setSliderValue(newSliderValues);\\n\\n      const newInputValues = [...inputValues];\\n      newInputValues[index] = clampedValue.toString();\\n      setInputValues(newInputValues);\\n    },\\n    [sliderValue, inputValues, minValue, maxValue],\\n  );\\n\\n  const handleInputChange = useCallback(\\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n      const newValue = e.target.value;\\n      if (newValue === \\\"\\\" || /^-?\\\\d*\\\\.?\\\\d*$/.test(newValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = newValue;\\n        setInputValues(newInputValues);\\n      }\\n    },\\n    [inputValues],\\n  );\\n\\n  const handleSliderChange = useCallback((newValue: number[]) => {\\n    setSliderValue(newValue);\\n    setInputValues(newValue.map((v) => v.toString()));\\n  }, []);\\n\\n  const resetToDefault = useCallback(() => {\\n    setSliderValue(defaultValue);\\n    setInputValues(defaultValue.map((v) => v.toString()));\\n  }, [defaultValue]);\\n\\n  return {\\n    handleInputChange,\\n    handleSliderChange,\\n    inputValues,\\n    resetToDefault,\\n    showReset,\\n    sliderValue,\\n    validateAndUpdateValue,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"button\",\n      \"input\",\n      \"tooltip\",\n      \"reset\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-255.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-255\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-255.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useSliderWithInput } from \\\"@/registry/default/hooks/use-slider-with-input\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const minValue = 0;\\n  const maxValue = 100;\\n  const initialValue = [25];\\n\\n  const {\\n    sliderValue,\\n    inputValues,\\n    validateAndUpdateValue,\\n    handleInputChange,\\n    handleSliderChange,\\n  } = useSliderWithInput({ initialValue, maxValue, minValue });\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-3\\\">\\n      <Label>Slider with input</Label>\\n      <div className=\\\"flex items-center gap-4\\\">\\n        <Slider\\n          aria-label=\\\"Slider with input\\\"\\n          className=\\\"grow\\\"\\n          max={maxValue}\\n          min={minValue}\\n          onValueChange={handleSliderChange}\\n          value={sliderValue}\\n        />\\n        <Input\\n          aria-label=\\\"Enter value\\\"\\n          className=\\\"h-8 w-12 px-2 py-1\\\"\\n          inputMode=\\\"decimal\\\"\\n          onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\\n          onChange={(e) => handleInputChange(e, 0)}\\n          onKeyDown={(e) => {\\n            if (e.key === \\\"Enter\\\") {\\n              validateAndUpdateValue(inputValues[0], 0);\\n            }\\n          }}\\n          type=\\\"text\\\"\\n          value={inputValues[0]}\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useState } from \\\"react\\\";\\n\\ntype UseSliderWithInputProps = {\\n  minValue?: number;\\n  maxValue?: number;\\n  initialValue?: number[];\\n  defaultValue?: number[];\\n};\\n\\nexport function useSliderWithInput({\\n  minValue = 0,\\n  maxValue = 100,\\n  initialValue = [minValue],\\n  defaultValue = [minValue],\\n}: UseSliderWithInputProps) {\\n  const [sliderValue, setSliderValue] = useState(initialValue);\\n  const [inputValues, setInputValues] = useState(\\n    initialValue.map((v) => v.toString()),\\n  );\\n\\n  const showReset =\\n    sliderValue.length === defaultValue.length &&\\n    !sliderValue.every((value, index) => value === defaultValue[index]);\\n\\n  const validateAndUpdateValue = useCallback(\\n    (rawValue: string, index: number) => {\\n      if (rawValue === \\\"\\\" || rawValue === \\\"-\\\") {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = \\\"0\\\";\\n        setInputValues(newInputValues);\\n\\n        const newSliderValues = [...sliderValue];\\n        newSliderValues[index] = 0;\\n        setSliderValue(newSliderValues);\\n        return;\\n      }\\n\\n      const numValue = Number.parseFloat(rawValue);\\n\\n      if (Number.isNaN(numValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = sliderValue[index]?.toString();\\n        setInputValues(newInputValues);\\n        return;\\n      }\\n\\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue));\\n\\n      if (sliderValue.length > 1) {\\n        if (index === 0) {\\n          clampedValue = Math.min(clampedValue, sliderValue[1]);\\n        } else {\\n          clampedValue = Math.max(clampedValue, sliderValue[0]);\\n        }\\n      }\\n\\n      const newSliderValues = [...sliderValue];\\n      newSliderValues[index] = clampedValue;\\n      setSliderValue(newSliderValues);\\n\\n      const newInputValues = [...inputValues];\\n      newInputValues[index] = clampedValue.toString();\\n      setInputValues(newInputValues);\\n    },\\n    [sliderValue, inputValues, minValue, maxValue],\\n  );\\n\\n  const handleInputChange = useCallback(\\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n      const newValue = e.target.value;\\n      if (newValue === \\\"\\\" || /^-?\\\\d*\\\\.?\\\\d*$/.test(newValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = newValue;\\n        setInputValues(newInputValues);\\n      }\\n    },\\n    [inputValues],\\n  );\\n\\n  const handleSliderChange = useCallback((newValue: number[]) => {\\n    setSliderValue(newValue);\\n    setInputValues(newValue.map((v) => v.toString()));\\n  }, []);\\n\\n  const resetToDefault = useCallback(() => {\\n    setSliderValue(defaultValue);\\n    setInputValues(defaultValue.map((v) => v.toString()));\\n  }, [defaultValue]);\\n\\n  return {\\n    handleInputChange,\\n    handleSliderChange,\\n    inputValues,\\n    resetToDefault,\\n    showReset,\\n    sliderValue,\\n    validateAndUpdateValue,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"input\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-256.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-256\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-256.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const [value, setValue] = useState([3]);\\n\\n  const labels = [\\\"Awful\\\", \\\"Poor\\\", \\\"Okay\\\", \\\"Good\\\", \\\"Amazing\\\"];\\n\\n  return (\\n    <div className=\\\"space-y-3\\\">\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <Label className=\\\"leading-6\\\">Rate your experience</Label>\\n        <span className=\\\"font-medium text-sm\\\">{labels[value[0] - 1]}</span>\\n      </div>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <span className=\\\"text-2xl\\\">😡</span>\\n        <Slider\\n          aria-label=\\\"Rate your experience\\\"\\n          max={5}\\n          min={1}\\n          onValueChange={setValue}\\n          value={value}\\n        />\\n        <span className=\\\"text-2xl\\\">😍</span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"vote\",\n      \"rating\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-257.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-257\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-257.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const [value, setValue] = useState([3]);\\n\\n  const emojis = [\\\"😡\\\", \\\"🙁\\\", \\\"😐\\\", \\\"🙂\\\", \\\"😍\\\"];\\n  const labels = [\\\"Awful\\\", \\\"Poor\\\", \\\"Okay\\\", \\\"Good\\\", \\\"Amazing\\\"];\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-3\\\">\\n      <Label>Rate your experience</Label>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Slider\\n          aria-label=\\\"Rate your experience\\\"\\n          max={5}\\n          min={1}\\n          onValueChange={setValue}\\n          showTooltip\\n          tooltipContent={(value) => labels[value - 1]}\\n          value={value}\\n        />\\n        <span className=\\\"text-2xl\\\">{emojis[value[0] - 1]}</span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"vote\",\n      \"rating\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-258.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-258\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-258.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useSliderWithInput } from \\\"@/registry/default/hooks/use-slider-with-input\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const minValue = 0;\\n  const maxValue = 200;\\n  const initialValue = [50, 150];\\n\\n  const {\\n    sliderValue,\\n    inputValues,\\n    validateAndUpdateValue,\\n    handleInputChange,\\n    handleSliderChange,\\n  } = useSliderWithInput({ initialValue, maxValue, minValue });\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-3\\\">\\n      <Label>Dual range slider with input</Label>\\n      <div className=\\\"flex items-center gap-4\\\">\\n        <Input\\n          aria-label=\\\"Enter minimum value\\\"\\n          className=\\\"h-8 w-12 px-2 py-1\\\"\\n          inputMode=\\\"decimal\\\"\\n          onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\\n          onChange={(e) => handleInputChange(e, 0)}\\n          onKeyDown={(e) => {\\n            if (e.key === \\\"Enter\\\") {\\n              validateAndUpdateValue(inputValues[0], 0);\\n            }\\n          }}\\n          type=\\\"text\\\"\\n          value={inputValues[0]}\\n        />\\n        <Slider\\n          aria-label=\\\"Dual range slider with input\\\"\\n          className=\\\"grow\\\"\\n          max={maxValue}\\n          min={minValue}\\n          onValueChange={handleSliderChange}\\n          value={sliderValue}\\n        />\\n        <Input\\n          aria-label=\\\"Enter maximum value\\\"\\n          className=\\\"h-8 w-12 px-2 py-1\\\"\\n          inputMode=\\\"decimal\\\"\\n          onBlur={() => validateAndUpdateValue(inputValues[1], 1)}\\n          onChange={(e) => handleInputChange(e, 1)}\\n          onKeyDown={(e) => {\\n            if (e.key === \\\"Enter\\\") {\\n              validateAndUpdateValue(inputValues[1], 1);\\n            }\\n          }}\\n          type=\\\"text\\\"\\n          value={inputValues[1]}\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useState } from \\\"react\\\";\\n\\ntype UseSliderWithInputProps = {\\n  minValue?: number;\\n  maxValue?: number;\\n  initialValue?: number[];\\n  defaultValue?: number[];\\n};\\n\\nexport function useSliderWithInput({\\n  minValue = 0,\\n  maxValue = 100,\\n  initialValue = [minValue],\\n  defaultValue = [minValue],\\n}: UseSliderWithInputProps) {\\n  const [sliderValue, setSliderValue] = useState(initialValue);\\n  const [inputValues, setInputValues] = useState(\\n    initialValue.map((v) => v.toString()),\\n  );\\n\\n  const showReset =\\n    sliderValue.length === defaultValue.length &&\\n    !sliderValue.every((value, index) => value === defaultValue[index]);\\n\\n  const validateAndUpdateValue = useCallback(\\n    (rawValue: string, index: number) => {\\n      if (rawValue === \\\"\\\" || rawValue === \\\"-\\\") {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = \\\"0\\\";\\n        setInputValues(newInputValues);\\n\\n        const newSliderValues = [...sliderValue];\\n        newSliderValues[index] = 0;\\n        setSliderValue(newSliderValues);\\n        return;\\n      }\\n\\n      const numValue = Number.parseFloat(rawValue);\\n\\n      if (Number.isNaN(numValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = sliderValue[index]?.toString();\\n        setInputValues(newInputValues);\\n        return;\\n      }\\n\\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue));\\n\\n      if (sliderValue.length > 1) {\\n        if (index === 0) {\\n          clampedValue = Math.min(clampedValue, sliderValue[1]);\\n        } else {\\n          clampedValue = Math.max(clampedValue, sliderValue[0]);\\n        }\\n      }\\n\\n      const newSliderValues = [...sliderValue];\\n      newSliderValues[index] = clampedValue;\\n      setSliderValue(newSliderValues);\\n\\n      const newInputValues = [...inputValues];\\n      newInputValues[index] = clampedValue.toString();\\n      setInputValues(newInputValues);\\n    },\\n    [sliderValue, inputValues, minValue, maxValue],\\n  );\\n\\n  const handleInputChange = useCallback(\\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n      const newValue = e.target.value;\\n      if (newValue === \\\"\\\" || /^-?\\\\d*\\\\.?\\\\d*$/.test(newValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = newValue;\\n        setInputValues(newInputValues);\\n      }\\n    },\\n    [inputValues],\\n  );\\n\\n  const handleSliderChange = useCallback((newValue: number[]) => {\\n    setSliderValue(newValue);\\n    setInputValues(newValue.map((v) => v.toString()));\\n  }, []);\\n\\n  const resetToDefault = useCallback(() => {\\n    setSliderValue(defaultValue);\\n    setInputValues(defaultValue.map((v) => v.toString()));\\n  }, [defaultValue]);\\n\\n  return {\\n    handleInputChange,\\n    handleSliderChange,\\n    inputValues,\\n    resetToDefault,\\n    showReset,\\n    sliderValue,\\n    validateAndUpdateValue,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"range slider\",\n      \"label\",\n      \"input\",\n      \"range\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-259.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-259\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-259.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MinusIcon, PlusIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const minValue = 0;\\n  const maxValue = 200;\\n  const steps = 5;\\n  const [value, setValue] = useState([100]);\\n\\n  const decreaseValue = () =>\\n    setValue((prev) => [Math.max(minValue, prev[0] - steps)]);\\n  const increaseValue = () =>\\n    setValue((prev) => [Math.min(maxValue, prev[0] + steps)]);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-3\\\">\\n      <Label className=\\\"tabular-nums\\\">{value[0]} credits/mo</Label>\\n      <div className=\\\"flex items-center gap-4\\\">\\n        <div>\\n          <Button\\n            aria-label=\\\"Decrease value\\\"\\n            className=\\\"size-8\\\"\\n            disabled={value[0] === 0}\\n            onClick={decreaseValue}\\n            size=\\\"icon\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            <MinusIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n        </div>\\n        <Slider\\n          aria-label=\\\"Dual range slider with buttons\\\"\\n          className=\\\"grow\\\"\\n          max={maxValue}\\n          min={minValue}\\n          onValueChange={setValue}\\n          step={steps}\\n          value={value}\\n        />\\n        <div>\\n          <Button\\n            aria-label=\\\"Increase value\\\"\\n            className=\\\"size-8\\\"\\n            disabled={value[0] === 200}\\n            onClick={increaseValue}\\n            size=\\\"icon\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            <PlusIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"button\",\n      \"pricing\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-26.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-26\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-26.tsx\",\n      \"content\": \"import { ArrowRightIcon, SearchIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Search input with icon and button</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"peer ps-9 pe-9\\\"\\n          id={id}\\n          placeholder=\\\"Search...\\\"\\n          type=\\\"search\\\"\\n        />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n          <SearchIcon size={16} />\\n        </div>\\n        <button\\n          aria-label=\\\"Submit search\\\"\\n          className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n          type=\\\"submit\\\"\\n        >\\n          <ArrowRightIcon aria-hidden=\\\"true\\\" size={16} />\\n        </button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\",\n      \"search\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-260.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-260\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-260.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const min_price = 5;\\n  const max_price = 1240;\\n  const [value, setValue] = useState([min_price, max_price]);\\n\\n  const formatPrice = (price: number) => {\\n    return price === max_price\\n      ? `$${price.toLocaleString()}+`\\n      : `$${price.toLocaleString()}`;\\n  };\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-3\\\">\\n      <Label className=\\\"tabular-nums\\\">\\n        From {formatPrice(value[0])} to {formatPrice(value[1])}\\n      </Label>\\n      <div className=\\\"flex items-center gap-4\\\">\\n        <Slider\\n          aria-label=\\\"Price range slider\\\"\\n          max={max_price}\\n          min={min_price}\\n          onValueChange={setValue}\\n          value={value}\\n        />\\n        <Button variant=\\\"outline\\\">Go</Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"range slider\",\n      \"label\",\n      \"button\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-261.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-261\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-261.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Vertical slider</Label>\\n      <div className=\\\"flex h-40 justify-center\\\">\\n        <Slider\\n          aria-label=\\\"Vertical slider\\\"\\n          defaultValue={[5]}\\n          max={10}\\n          orientation=\\\"vertical\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"vertical slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-262.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-262\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\",\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-262.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useSliderWithInput } from \\\"@/registry/default/hooks/use-slider-with-input\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const minValue = 0;\\n  const maxValue = 100;\\n  const initialValue = [25];\\n\\n  const {\\n    sliderValue,\\n    inputValues,\\n    validateAndUpdateValue,\\n    handleInputChange,\\n    handleSliderChange,\\n  } = useSliderWithInput({ initialValue, maxValue, minValue });\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Vertical slider with input</Label>\\n      <div className=\\\"flex h-40 flex-col items-center justify-center gap-4\\\">\\n        <Slider\\n          aria-label=\\\"Slider with input\\\"\\n          className=\\\"data-[orientation=vertical]:min-h-0\\\"\\n          max={maxValue}\\n          min={minValue}\\n          onValueChange={handleSliderChange}\\n          orientation=\\\"vertical\\\"\\n          value={sliderValue}\\n        />\\n        <Input\\n          aria-label=\\\"Enter value\\\"\\n          className=\\\"h-8 w-12 px-2 py-1\\\"\\n          inputMode=\\\"decimal\\\"\\n          onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\\n          onChange={(e) => handleInputChange(e, 0)}\\n          onKeyDown={(e) => {\\n            if (e.key === \\\"Enter\\\") {\\n              validateAndUpdateValue(inputValues[0], 0);\\n            }\\n          }}\\n          type=\\\"text\\\"\\n          value={inputValues[0]}\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useState } from \\\"react\\\";\\n\\ntype UseSliderWithInputProps = {\\n  minValue?: number;\\n  maxValue?: number;\\n  initialValue?: number[];\\n  defaultValue?: number[];\\n};\\n\\nexport function useSliderWithInput({\\n  minValue = 0,\\n  maxValue = 100,\\n  initialValue = [minValue],\\n  defaultValue = [minValue],\\n}: UseSliderWithInputProps) {\\n  const [sliderValue, setSliderValue] = useState(initialValue);\\n  const [inputValues, setInputValues] = useState(\\n    initialValue.map((v) => v.toString()),\\n  );\\n\\n  const showReset =\\n    sliderValue.length === defaultValue.length &&\\n    !sliderValue.every((value, index) => value === defaultValue[index]);\\n\\n  const validateAndUpdateValue = useCallback(\\n    (rawValue: string, index: number) => {\\n      if (rawValue === \\\"\\\" || rawValue === \\\"-\\\") {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = \\\"0\\\";\\n        setInputValues(newInputValues);\\n\\n        const newSliderValues = [...sliderValue];\\n        newSliderValues[index] = 0;\\n        setSliderValue(newSliderValues);\\n        return;\\n      }\\n\\n      const numValue = Number.parseFloat(rawValue);\\n\\n      if (Number.isNaN(numValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = sliderValue[index]?.toString();\\n        setInputValues(newInputValues);\\n        return;\\n      }\\n\\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue));\\n\\n      if (sliderValue.length > 1) {\\n        if (index === 0) {\\n          clampedValue = Math.min(clampedValue, sliderValue[1]);\\n        } else {\\n          clampedValue = Math.max(clampedValue, sliderValue[0]);\\n        }\\n      }\\n\\n      const newSliderValues = [...sliderValue];\\n      newSliderValues[index] = clampedValue;\\n      setSliderValue(newSliderValues);\\n\\n      const newInputValues = [...inputValues];\\n      newInputValues[index] = clampedValue.toString();\\n      setInputValues(newInputValues);\\n    },\\n    [sliderValue, inputValues, minValue, maxValue],\\n  );\\n\\n  const handleInputChange = useCallback(\\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n      const newValue = e.target.value;\\n      if (newValue === \\\"\\\" || /^-?\\\\d*\\\\.?\\\\d*$/.test(newValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = newValue;\\n        setInputValues(newInputValues);\\n      }\\n    },\\n    [inputValues],\\n  );\\n\\n  const handleSliderChange = useCallback((newValue: number[]) => {\\n    setSliderValue(newValue);\\n    setInputValues(newValue.map((v) => v.toString()));\\n  }, []);\\n\\n  const resetToDefault = useCallback(() => {\\n    setSliderValue(defaultValue);\\n    setInputValues(defaultValue.map((v) => v.toString()));\\n  }, [defaultValue]);\\n\\n  return {\\n    handleInputChange,\\n    handleSliderChange,\\n    inputValues,\\n    resetToDefault,\\n    showReset,\\n    sliderValue,\\n    validateAndUpdateValue,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"vertical slider\",\n      \"label\",\n      \"input\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-263.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-263\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-263.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Vertical dual range slider and tooltip</Label>\\n      <div className=\\\"flex h-40 justify-center\\\">\\n        <Slider\\n          aria-label=\\\"Vertical slider\\\"\\n          defaultValue={[2, 7]}\\n          max={10}\\n          orientation=\\\"vertical\\\"\\n          showTooltip\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"vertical slider\",\n      \"range slider\",\n      \"label\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-264.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-264\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-264.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RotateCcwIcon } from \\\"lucide-react\\\";\\nimport React, { useRef } from \\\"react\\\";\\n\\nimport { useSliderWithInput } from \\\"@/registry/default/hooks/use-slider-with-input\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  // Create refs to store reset functions\\n  const resetFunctionsRef = useRef<(() => void)[]>([]);\\n\\n  // Function to reset all sliders to default\\n  const resetAll = () => {\\n    for (const resetFn of resetFunctionsRef.current) {\\n      resetFn();\\n    }\\n  };\\n\\n  // Function to register reset functions\\n  const registerResetFunction = (resetFn: () => void, index: number) => {\\n    resetFunctionsRef.current[index] = resetFn;\\n  };\\n\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm\\\">\\n        Object position\\n      </legend>\\n      <div className=\\\"space-y-2\\\">\\n        <SliderWithInput\\n          defaultValue={[0]}\\n          initialValue={[-2]}\\n          label=\\\"X\\\"\\n          maxValue={10}\\n          minValue={-10}\\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 0)}\\n        />\\n        <SliderWithInput\\n          defaultValue={[0]}\\n          initialValue={[4]}\\n          label=\\\"Y\\\"\\n          maxValue={10}\\n          minValue={-10}\\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 1)}\\n        />\\n        <SliderWithInput\\n          defaultValue={[0]}\\n          initialValue={[2]}\\n          label=\\\"Z\\\"\\n          maxValue={10}\\n          minValue={-10}\\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 2)}\\n        />\\n      </div>\\n      <Button className=\\\"w-full\\\" onClick={resetAll} variant=\\\"outline\\\">\\n        <RotateCcwIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-ms-1 opacity-60\\\"\\n          size={16}\\n        />\\n        Reset\\n      </Button>\\n    </div>\\n  );\\n}\\n\\nfunction SliderWithInput({\\n  minValue,\\n  maxValue,\\n  initialValue,\\n  defaultValue,\\n  label,\\n  onRegisterReset,\\n}: {\\n  minValue: number;\\n  maxValue: number;\\n  initialValue: number[];\\n  defaultValue: number[];\\n  label: string;\\n  onRegisterReset: (resetFn: () => void) => void;\\n}) {\\n  const {\\n    sliderValue,\\n    inputValues,\\n    validateAndUpdateValue,\\n    handleInputChange,\\n    handleSliderChange,\\n    resetToDefault,\\n  } = useSliderWithInput({ defaultValue, initialValue, maxValue, minValue });\\n\\n  // Register the reset function when the component mounts\\n  React.useEffect(() => {\\n    onRegisterReset(resetToDefault);\\n  }, [onRegisterReset, resetToDefault]);\\n\\n  return (\\n    <div className=\\\"flex items-center gap-2\\\">\\n      <Label className=\\\"text-muted-foreground text-xs\\\">{label}</Label>\\n      <Slider\\n        aria-label={label}\\n        className=\\\"grow [&>:last-child>span]:rounded\\\"\\n        max={maxValue}\\n        min={minValue}\\n        onValueChange={handleSliderChange}\\n        value={sliderValue}\\n      />\\n      <Input\\n        aria-label=\\\"Enter value\\\"\\n        className=\\\"h-8 w-12 px-2 py-1\\\"\\n        inputMode=\\\"decimal\\\"\\n        onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\\n        onChange={(e) => handleInputChange(e, 0)}\\n        onKeyDown={(e) => {\\n          if (e.key === \\\"Enter\\\") {\\n            validateAndUpdateValue(inputValues[0], 0);\\n          }\\n        }}\\n        type=\\\"text\\\"\\n        value={inputValues[0]}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useState } from \\\"react\\\";\\n\\ntype UseSliderWithInputProps = {\\n  minValue?: number;\\n  maxValue?: number;\\n  initialValue?: number[];\\n  defaultValue?: number[];\\n};\\n\\nexport function useSliderWithInput({\\n  minValue = 0,\\n  maxValue = 100,\\n  initialValue = [minValue],\\n  defaultValue = [minValue],\\n}: UseSliderWithInputProps) {\\n  const [sliderValue, setSliderValue] = useState(initialValue);\\n  const [inputValues, setInputValues] = useState(\\n    initialValue.map((v) => v.toString()),\\n  );\\n\\n  const showReset =\\n    sliderValue.length === defaultValue.length &&\\n    !sliderValue.every((value, index) => value === defaultValue[index]);\\n\\n  const validateAndUpdateValue = useCallback(\\n    (rawValue: string, index: number) => {\\n      if (rawValue === \\\"\\\" || rawValue === \\\"-\\\") {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = \\\"0\\\";\\n        setInputValues(newInputValues);\\n\\n        const newSliderValues = [...sliderValue];\\n        newSliderValues[index] = 0;\\n        setSliderValue(newSliderValues);\\n        return;\\n      }\\n\\n      const numValue = Number.parseFloat(rawValue);\\n\\n      if (Number.isNaN(numValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = sliderValue[index]?.toString();\\n        setInputValues(newInputValues);\\n        return;\\n      }\\n\\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue));\\n\\n      if (sliderValue.length > 1) {\\n        if (index === 0) {\\n          clampedValue = Math.min(clampedValue, sliderValue[1]);\\n        } else {\\n          clampedValue = Math.max(clampedValue, sliderValue[0]);\\n        }\\n      }\\n\\n      const newSliderValues = [...sliderValue];\\n      newSliderValues[index] = clampedValue;\\n      setSliderValue(newSliderValues);\\n\\n      const newInputValues = [...inputValues];\\n      newInputValues[index] = clampedValue.toString();\\n      setInputValues(newInputValues);\\n    },\\n    [sliderValue, inputValues, minValue, maxValue],\\n  );\\n\\n  const handleInputChange = useCallback(\\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n      const newValue = e.target.value;\\n      if (newValue === \\\"\\\" || /^-?\\\\d*\\\\.?\\\\d*$/.test(newValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = newValue;\\n        setInputValues(newInputValues);\\n      }\\n    },\\n    [inputValues],\\n  );\\n\\n  const handleSliderChange = useCallback((newValue: number[]) => {\\n    setSliderValue(newValue);\\n    setInputValues(newValue.map((v) => v.toString()));\\n  }, []);\\n\\n  const resetToDefault = useCallback(() => {\\n    setSliderValue(defaultValue);\\n    setInputValues(defaultValue.map((v) => v.toString()));\\n  }, [defaultValue]);\\n\\n  return {\\n    handleInputChange,\\n    handleSliderChange,\\n    inputValues,\\n    resetToDefault,\\n    showReset,\\n    sliderValue,\\n    validateAndUpdateValue,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"input\",\n      \"button\",\n      \"reset\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-265.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-265\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-265.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\n\\nimport { useSliderWithInput } from \\\"@/registry/default/hooks/use-slider-with-input\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst items = [\\n  { id: 1, price: 80 },\\n  { id: 2, price: 95 },\\n  { id: 3, price: 110 },\\n  { id: 4, price: 125 },\\n  { id: 5, price: 130 },\\n  { id: 6, price: 140 },\\n  { id: 7, price: 145 },\\n  { id: 8, price: 150 },\\n  { id: 9, price: 155 },\\n  { id: 10, price: 165 },\\n  { id: 11, price: 175 },\\n  { id: 12, price: 185 },\\n  { id: 13, price: 195 },\\n  { id: 14, price: 205 },\\n  { id: 15, price: 215 },\\n  { id: 16, price: 225 },\\n  { id: 17, price: 235 },\\n  { id: 18, price: 245 },\\n  { id: 19, price: 255 },\\n  { id: 20, price: 260 },\\n  { id: 21, price: 265 },\\n  { id: 22, price: 270 },\\n  { id: 23, price: 275 },\\n  { id: 24, price: 280 },\\n  { id: 25, price: 285 },\\n  { id: 26, price: 290 },\\n  { id: 27, price: 290 },\\n  { id: 28, price: 295 },\\n  { id: 29, price: 295 },\\n  { id: 30, price: 295 },\\n  { id: 31, price: 298 },\\n  { id: 32, price: 299 },\\n  { id: 33, price: 300 },\\n  { id: 34, price: 305 },\\n  { id: 35, price: 310 },\\n  { id: 36, price: 315 },\\n  { id: 37, price: 320 },\\n  { id: 38, price: 325 },\\n  { id: 39, price: 330 },\\n  { id: 40, price: 335 },\\n  { id: 41, price: 340 },\\n  { id: 42, price: 345 },\\n  { id: 43, price: 350 },\\n  { id: 44, price: 355 },\\n  { id: 45, price: 360 },\\n  { id: 46, price: 365 },\\n  { id: 47, price: 365 },\\n  { id: 48, price: 375 },\\n  { id: 49, price: 380 },\\n  { id: 50, price: 385 },\\n  { id: 51, price: 390 },\\n  { id: 52, price: 395 },\\n  { id: 53, price: 400 },\\n  { id: 54, price: 405 },\\n  { id: 55, price: 410 },\\n  { id: 56, price: 415 },\\n  { id: 57, price: 420 },\\n  { id: 58, price: 425 },\\n  { id: 59, price: 430 },\\n  { id: 60, price: 435 },\\n  { id: 61, price: 440 },\\n  { id: 62, price: 445 },\\n  { id: 63, price: 450 },\\n  { id: 64, price: 455 },\\n  { id: 65, price: 460 },\\n  { id: 66, price: 465 },\\n  { id: 67, price: 470 },\\n  { id: 68, price: 475 },\\n  { id: 69, price: 480 },\\n  { id: 70, price: 485 },\\n  { id: 71, price: 490 },\\n  { id: 72, price: 495 },\\n  { id: 73, price: 495 },\\n  { id: 74, price: 498 },\\n  { id: 75, price: 499 },\\n  { id: 76, price: 500 },\\n  { id: 77, price: 500 },\\n  { id: 78, price: 500 },\\n  { id: 79, price: 515 },\\n  { id: 80, price: 530 },\\n  { id: 81, price: 545 },\\n  { id: 82, price: 560 },\\n  { id: 83, price: 575 },\\n  { id: 84, price: 590 },\\n  { id: 85, price: 605 },\\n  { id: 86, price: 620 },\\n  { id: 87, price: 635 },\\n  { id: 88, price: 650 },\\n  { id: 89, price: 655 },\\n  { id: 90, price: 660 },\\n  { id: 91, price: 665 },\\n  { id: 92, price: 670 },\\n  { id: 93, price: 675 },\\n  { id: 94, price: 680 },\\n  { id: 95, price: 685 },\\n  { id: 96, price: 690 },\\n  { id: 97, price: 695 },\\n  { id: 98, price: 700 },\\n  { id: 99, price: 700 },\\n  { id: 100, price: 700 },\\n  { id: 101, price: 700 },\\n  { id: 102, price: 700 },\\n  { id: 103, price: 700 },\\n  { id: 104, price: 725 },\\n  { id: 105, price: 750 },\\n  { id: 106, price: 775 },\\n  { id: 107, price: 800 },\\n  { id: 108, price: 815 },\\n  { id: 109, price: 830 },\\n  { id: 110, price: 845 },\\n  { id: 111, price: 845 },\\n  { id: 112, price: 845 },\\n  { id: 113, price: 870 },\\n  { id: 114, price: 875 },\\n  { id: 115, price: 880 },\\n  { id: 116, price: 885 },\\n  { id: 117, price: 890 },\\n  { id: 118, price: 895 },\\n  { id: 119, price: 898 },\\n  { id: 120, price: 900 },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  // Define the number of ticks\\n  const tick_count = 40;\\n  // Find the min and max values across all items\\n  const minValue = Math.min(...items.map((item) => item.price));\\n  const maxValue = Math.max(...items.map((item) => item.price));\\n\\n  const {\\n    sliderValue,\\n    inputValues,\\n    validateAndUpdateValue,\\n    handleInputChange,\\n    handleSliderChange,\\n  } = useSliderWithInput({ initialValue: [200, 780], maxValue, minValue }); // set initialValue: [minValue, maxValue] to show all items by default\\n\\n  // Calculate the price step based on the min and max prices\\n  const priceStep = (maxValue - minValue) / tick_count;\\n\\n  // Calculate item counts for each price range\\n  const itemCounts = Array(tick_count)\\n    .fill(0)\\n    .map((_, tick) => {\\n      const rangeMin = minValue + tick * priceStep;\\n      const rangeMax = minValue + (tick + 1) * priceStep;\\n      return items.filter(\\n        (item) => item.price >= rangeMin && item.price < rangeMax,\\n      ).length;\\n    });\\n\\n  // Find maximum count for scaling\\n  const maxCount = Math.max(...itemCounts);\\n\\n  const handleSliderValueChange = (values: number[]) => {\\n    handleSliderChange(values);\\n  };\\n\\n  // Function to count items in the selected range\\n  const countItemsInRange = (min: number, max: number) => {\\n    return items.filter((item) => item.price >= min && item.price <= max)\\n      .length;\\n  };\\n\\n  const isBarInSelectedRange = (\\n    index: number,\\n    minValue: number,\\n    priceStep: number,\\n    sliderValue: number[],\\n  ) => {\\n    const rangeMin = minValue + index * priceStep;\\n    const rangeMax = minValue + (index + 1) * priceStep;\\n    return (\\n      countItemsInRange(sliderValue[0], sliderValue[1]) > 0 &&\\n      rangeMin <= sliderValue[1] &&\\n      rangeMax >= sliderValue[0]\\n    );\\n  };\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-4\\\">\\n      <Label>Price slider</Label>\\n      <div>\\n        {/* Histogram bars */}\\n        <div aria-hidden=\\\"true\\\" className=\\\"flex h-12 w-full items-end px-3\\\">\\n          {itemCounts.map((count, i) => (\\n            <div\\n              className=\\\"flex flex-1 justify-center\\\"\\n              key={String(i)}\\n              style={{\\n                height: `${(count / maxCount) * 100}%`,\\n              }}\\n            >\\n              <span\\n                className=\\\"size-full bg-primary/20\\\"\\n                data-selected={isBarInSelectedRange(\\n                  i,\\n                  minValue,\\n                  priceStep,\\n                  sliderValue,\\n                )}\\n              />\\n            </div>\\n          ))}\\n        </div>\\n        <Slider\\n          aria-label=\\\"Price range\\\"\\n          max={maxValue}\\n          min={minValue}\\n          onValueChange={handleSliderValueChange}\\n          value={sliderValue}\\n        />\\n      </div>\\n\\n      {/* Inputs */}\\n      <div className=\\\"flex items-center justify-between gap-4\\\">\\n        <div className=\\\"*:not-first:mt-1\\\">\\n          <Label htmlFor={`${id}-min`}>Min price</Label>\\n          <div className=\\\"relative\\\">\\n            <Input\\n              aria-label=\\\"Enter minimum price\\\"\\n              className=\\\"peer w-full ps-6\\\"\\n              id={`${id}-min`}\\n              inputMode=\\\"decimal\\\"\\n              onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\\n              onChange={(e) => handleInputChange(e, 0)}\\n              onKeyDown={(e) => {\\n                if (e.key === \\\"Enter\\\") {\\n                  validateAndUpdateValue(inputValues[0], 0);\\n                }\\n              }}\\n              type=\\\"text\\\"\\n              value={inputValues[0]}\\n            />\\n            <span className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm peer-disabled:opacity-50\\\">\\n              $\\n            </span>\\n          </div>\\n        </div>\\n        <div className=\\\"*:not-first:mt-1\\\">\\n          <Label htmlFor={`${id}-max`}>Max price</Label>\\n          <div className=\\\"relative\\\">\\n            <Input\\n              aria-label=\\\"Enter maximum price\\\"\\n              className=\\\"peer w-full ps-6\\\"\\n              id={`${id}-max`}\\n              inputMode=\\\"decimal\\\"\\n              onBlur={() => validateAndUpdateValue(inputValues[1], 1)}\\n              onChange={(e) => handleInputChange(e, 1)}\\n              onKeyDown={(e) => {\\n                if (e.key === \\\"Enter\\\") {\\n                  validateAndUpdateValue(inputValues[1], 1);\\n                }\\n              }}\\n              type=\\\"text\\\"\\n              value={inputValues[1]}\\n            />\\n            <span className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm peer-disabled:opacity-50\\\">\\n              $\\n            </span>\\n          </div>\\n        </div>\\n      </div>\\n\\n      {/* Button */}\\n      <Button className=\\\"w-full\\\" variant=\\\"outline\\\">\\n        Show {countItemsInRange(sliderValue[0], sliderValue[1])} items\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useState } from \\\"react\\\";\\n\\ntype UseSliderWithInputProps = {\\n  minValue?: number;\\n  maxValue?: number;\\n  initialValue?: number[];\\n  defaultValue?: number[];\\n};\\n\\nexport function useSliderWithInput({\\n  minValue = 0,\\n  maxValue = 100,\\n  initialValue = [minValue],\\n  defaultValue = [minValue],\\n}: UseSliderWithInputProps) {\\n  const [sliderValue, setSliderValue] = useState(initialValue);\\n  const [inputValues, setInputValues] = useState(\\n    initialValue.map((v) => v.toString()),\\n  );\\n\\n  const showReset =\\n    sliderValue.length === defaultValue.length &&\\n    !sliderValue.every((value, index) => value === defaultValue[index]);\\n\\n  const validateAndUpdateValue = useCallback(\\n    (rawValue: string, index: number) => {\\n      if (rawValue === \\\"\\\" || rawValue === \\\"-\\\") {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = \\\"0\\\";\\n        setInputValues(newInputValues);\\n\\n        const newSliderValues = [...sliderValue];\\n        newSliderValues[index] = 0;\\n        setSliderValue(newSliderValues);\\n        return;\\n      }\\n\\n      const numValue = Number.parseFloat(rawValue);\\n\\n      if (Number.isNaN(numValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = sliderValue[index]?.toString();\\n        setInputValues(newInputValues);\\n        return;\\n      }\\n\\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue));\\n\\n      if (sliderValue.length > 1) {\\n        if (index === 0) {\\n          clampedValue = Math.min(clampedValue, sliderValue[1]);\\n        } else {\\n          clampedValue = Math.max(clampedValue, sliderValue[0]);\\n        }\\n      }\\n\\n      const newSliderValues = [...sliderValue];\\n      newSliderValues[index] = clampedValue;\\n      setSliderValue(newSliderValues);\\n\\n      const newInputValues = [...inputValues];\\n      newInputValues[index] = clampedValue.toString();\\n      setInputValues(newInputValues);\\n    },\\n    [sliderValue, inputValues, minValue, maxValue],\\n  );\\n\\n  const handleInputChange = useCallback(\\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n      const newValue = e.target.value;\\n      if (newValue === \\\"\\\" || /^-?\\\\d*\\\\.?\\\\d*$/.test(newValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = newValue;\\n        setInputValues(newInputValues);\\n      }\\n    },\\n    [inputValues],\\n  );\\n\\n  const handleSliderChange = useCallback((newValue: number[]) => {\\n    setSliderValue(newValue);\\n    setInputValues(newValue.map((v) => v.toString()));\\n  }, []);\\n\\n  const resetToDefault = useCallback(() => {\\n    setSliderValue(defaultValue);\\n    setInputValues(defaultValue.map((v) => v.toString()));\\n  }, [defaultValue]);\\n\\n  return {\\n    handleInputChange,\\n    handleSliderChange,\\n    inputValues,\\n    resetToDefault,\\n    showReset,\\n    sliderValue,\\n    validateAndUpdateValue,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"input\",\n      \"button\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-266.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-266\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-266.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm\\\">Equalizer</legend>\\n      <div className=\\\"flex h-48 justify-center gap-8\\\">\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <Slider\\n            aria-label=\\\"60 Hz\\\"\\n            className=\\\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\\\"\\n            defaultValue={[2]}\\n            max={5}\\n            min={-5}\\n            orientation=\\\"vertical\\\"\\n            showTooltip\\n          />\\n          <Label className=\\\"flex w-0 justify-center text-muted-foreground text-xs\\\">\\n            60\\n          </Label>\\n        </div>\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <Slider\\n            aria-label=\\\"250 Hz\\\"\\n            className=\\\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\\\"\\n            defaultValue={[1]}\\n            max={5}\\n            min={-5}\\n            orientation=\\\"vertical\\\"\\n            showTooltip\\n          />\\n          <Label className=\\\"flex w-0 justify-center text-muted-foreground text-xs\\\">\\n            250\\n          </Label>\\n        </div>\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <Slider\\n            aria-label=\\\"1k\\\"\\n            className=\\\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\\\"\\n            defaultValue={[-1]}\\n            max={5}\\n            min={-5}\\n            orientation=\\\"vertical\\\"\\n            showTooltip\\n          />\\n          <Label className=\\\"flex w-0 justify-center text-muted-foreground text-xs\\\">\\n            1k\\n          </Label>\\n        </div>\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <Slider\\n            aria-label=\\\"4k\\\"\\n            className=\\\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\\\"\\n            defaultValue={[-3]}\\n            max={5}\\n            min={-5}\\n            orientation=\\\"vertical\\\"\\n            showTooltip\\n          />\\n          <Label className=\\\"flex w-0 justify-center text-muted-foreground text-xs\\\">\\n            4k\\n          </Label>\\n        </div>\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <Slider\\n            aria-label=\\\"16k\\\"\\n            className=\\\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\\\"\\n            defaultValue={[2]}\\n            max={5}\\n            min={-5}\\n            orientation=\\\"vertical\\\"\\n            showTooltip\\n          />\\n          <Label className=\\\"flex w-0 justify-center text-muted-foreground text-xs\\\">\\n            16K\\n          </Label>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"slider\",\n      \"label\",\n      \"equalizer\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-267.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-267\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-267.tsx\",\n      \"content\": \"import { TriangleAlert } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border px-4 py-3\\\">\\n      <p className=\\\"text-sm\\\">\\n        <TriangleAlert\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex text-amber-500\\\"\\n          size={16}\\n        />\\n        Some information is missing!\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"warning\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-268.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-268\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-268.tsx\",\n      \"content\": \"import { TriangleAlert } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border border-amber-500/50 px-4 py-3 text-amber-600\\\">\\n      <p className=\\\"text-sm\\\">\\n        <TriangleAlert\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex opacity-60\\\"\\n          size={16}\\n        />\\n        Some information is missing!\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"warning\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-269.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-269\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-269.tsx\",\n      \"content\": \"import { CircleAlert } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border px-4 py-3\\\">\\n      <p className=\\\"text-sm\\\">\\n        <CircleAlert\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex text-red-500\\\"\\n          size={16}\\n        />\\n        An error occurred!\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"error\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-27.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-27\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-27.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { LoaderCircleIcon, MicIcon, SearchIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useId, useState } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [inputValue, setInputValue] = useState(\\\"\\\");\\n  const [isLoading, setIsLoading] = useState<boolean>(false);\\n\\n  useEffect(() => {\\n    if (inputValue) {\\n      setIsLoading(true);\\n      const timer = setTimeout(() => {\\n        setIsLoading(false);\\n      }, 500);\\n      return () => clearTimeout(timer);\\n    }\\n    setIsLoading(false);\\n  }, [inputValue]);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Search input with loader</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"peer ps-9 pe-9\\\"\\n          id={id}\\n          onChange={(e) => setInputValue(e.target.value)}\\n          placeholder=\\\"Search...\\\"\\n          type=\\\"search\\\"\\n          value={inputValue}\\n        />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n          {isLoading ? (\\n            <LoaderCircleIcon\\n              aria-label=\\\"Loading...\\\"\\n              className=\\\"animate-spin\\\"\\n              role=\\\"status\\\"\\n              size={16}\\n            />\\n          ) : (\\n            <SearchIcon aria-hidden=\\\"true\\\" size={16} />\\n          )}\\n        </div>\\n        <button\\n          aria-label=\\\"Press to speak\\\"\\n          className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n          type=\\\"submit\\\"\\n        >\\n          <MicIcon aria-hidden=\\\"true\\\" size={16} />\\n        </button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\",\n      \"search\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-270.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-270\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-270.tsx\",\n      \"content\": \"import { CircleAlert } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border border-red-500/50 px-4 py-3 text-red-600\\\">\\n      <p className=\\\"text-sm\\\">\\n        <CircleAlert\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex opacity-60\\\"\\n          size={16}\\n        />\\n        An error occurred!\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"error\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-271.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-271\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-271.tsx\",\n      \"content\": \"import { CircleCheckIcon } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border border-eborder px-4 py-3\\\">\\n      <p className=\\\"text-sm\\\">\\n        <CircleCheckIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex text-emerald-500\\\"\\n          size={16}\\n        />\\n        Completed successfully!\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"success\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-272.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-272\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-272.tsx\",\n      \"content\": \"import { CircleCheckIcon } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border border-emerald-500/50 px-4 py-3 text-emerald-600\\\">\\n      <p className=\\\"text-sm\\\">\\n        <CircleCheckIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex opacity-60\\\"\\n          size={16}\\n        />\\n        Completed successfully!\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"success\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-273.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-273\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-273.tsx\",\n      \"content\": \"import { InfoIcon } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border px-4 py-3\\\">\\n      <p className=\\\"text-sm\\\">\\n        <InfoIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex text-blue-500\\\"\\n          size={16}\\n        />\\n        Just a quick note!\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"info\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-274.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-274\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-274.tsx\",\n      \"content\": \"import { InfoIcon } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border border-blue-500/50 px-4 py-3 text-blue-600\\\">\\n      <p className=\\\"text-sm\\\">\\n        <InfoIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex opacity-60\\\"\\n          size={16}\\n        />\\n        Just a quick note!\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"info\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-275.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-275\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-275.tsx\",\n      \"content\": \"import { ArrowRightIcon, TriangleAlert } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border px-4 py-3\\\">\\n      <div className=\\\"flex gap-3\\\">\\n        <TriangleAlert\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"hrink-0 mt-0.5 text-amber-500\\\"\\n          size={16}\\n        />\\n        <div className=\\\"flex grow justify-between gap-3\\\">\\n          <p className=\\\"text-sm\\\">Some information is missing!</p>\\n          <a className=\\\"group whitespace-nowrap font-medium text-sm\\\" href=\\\"#\\\">\\n            Link\\n            <ArrowRightIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n              size={16}\\n            />\\n          </a>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"warning\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-276.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-276\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-276.tsx\",\n      \"content\": \"import { ArrowRightIcon, TriangleAlert } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border border-amber-500/50 px-4 py-3 text-amber-600\\\">\\n      <div className=\\\"flex gap-3\\\">\\n        <TriangleAlert\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mt-0.5 shrink-0 opacity-60\\\"\\n          size={16}\\n        />\\n        <div className=\\\"flex grow justify-between gap-3\\\">\\n          <p className=\\\"text-sm\\\">Some information is missing!</p>\\n          <a className=\\\"group whitespace-nowrap font-medium text-sm\\\" href=\\\"#\\\">\\n            Link\\n            <ArrowRightIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n              size={16}\\n            />\\n          </a>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"warning\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-277.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-277\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-277.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border px-4 py-3\\\">\\n      <div className=\\\"flex gap-3\\\">\\n        <CircleAlertIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mt-0.5 shrink-0 text-red-500 opacity-60\\\"\\n          size={16}\\n        />\\n        <div className=\\\"grow space-y-1\\\">\\n          <p className=\\\"font-medium text-sm\\\">\\n            Password does not meet requirements:\\n          </p>\\n          <ul className=\\\"list-inside list-disc text-muted-foreground text-sm\\\">\\n            <li>Minimum 8 characters</li>\\n            <li>Inlcude a special character</li>\\n          </ul>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"error\",\n      \"signup\",\n      \"authentication\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-278.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-278\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-278.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"rounded-md border border-red-500/50 px-4 py-3 text-red-600\\\">\\n      <div className=\\\"flex gap-3\\\">\\n        <CircleAlertIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mt-0.5 shrink-0 opacity-60\\\"\\n          size={16}\\n        />\\n        <div className=\\\"grow space-y-1\\\">\\n          <p className=\\\"font-medium text-sm\\\">\\n            Password does not meet requirements:\\n          </p>\\n          <ul className=\\\"list-inside list-disc text-sm opacity-80\\\">\\n            <li>Minimum 8 characters</li>\\n            <li>Inlcude a special character</li>\\n          </ul>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"alert\",\n      \"error\",\n      \"signup\",\n      \"authentication\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-279.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-279\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-279.tsx\",\n      \"content\": \"import { TriangleAlert, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <p className=\\\"grow text-sm\\\">\\n          <TriangleAlert\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-mt-0.5 me-3 inline-flex text-amber-500\\\"\\n            size={16}\\n          />\\n          Some information is missing!\\n        </p>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"warning\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-28.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-28\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-28.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MinusIcon, PlusIcon } from \\\"lucide-react\\\";\\nimport {\\n  Button,\\n  Group,\\n  Input,\\n  Label,\\n  NumberField,\\n} from \\\"react-aria-components\\\";\\n\\nexport default function Component() {\\n  return (\\n    <NumberField defaultValue={2048} minValue={0}>\\n      <div className=\\\"*:not-first:mt-2\\\">\\n        <Label className=\\\"font-medium text-foreground text-sm\\\">\\n          Number input with plus/minus buttons\\n        </Label>\\n        <Group className=\\\"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input text-sm shadow-xs outline-none transition-[color,box-shadow] data-focus-within:border-ring data-disabled:opacity-50 data-focus-within:ring-[3px] data-focus-within:ring-ring/50 data-focus-within:has-aria-invalid:border-destructive data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40\\\">\\n          <Button\\n            className=\\\"-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-md border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n            slot=\\\"decrement\\\"\\n          >\\n            <MinusIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n          <Input className=\\\"w-full grow bg-background px-3 py-2 text-center text-foreground tabular-nums\\\" />\\n          <Button\\n            className=\\\"-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-md border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n            slot=\\\"increment\\\"\\n          >\\n            <PlusIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n        </Group>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/NumberField.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\",\n      \"number\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-280.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-280\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-280.tsx\",\n      \"content\": \"import { CircleCheckIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <p className=\\\"grow text-sm\\\">\\n          <CircleCheckIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-mt-0.5 me-3 inline-flex text-red-500\\\"\\n            size={16}\\n          />\\n          An error occurred!\\n        </p>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"error\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-281.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-281\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-281.tsx\",\n      \"content\": \"import { CircleCheckIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <p className=\\\"grow text-sm\\\">\\n          <CircleCheckIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-mt-0.5 me-3 inline-flex text-emerald-500\\\"\\n            size={16}\\n          />\\n          Completed successfully!\\n        </p>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"success\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-282.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-282\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-282.tsx\",\n      \"content\": \"import { InfoIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <p className=\\\"grow text-sm\\\">\\n          <InfoIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-mt-0.5 me-3 inline-flex text-blue-500\\\"\\n            size={16}\\n          />\\n          Just a quick note!\\n        </p>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"info\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-283.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-283\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-283.tsx\",\n      \"content\": \"import { ArrowRightIcon, TriangleAlert, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <TriangleAlert\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-amber-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow justify-between gap-12\\\">\\n            <p className=\\\"text-sm\\\">Some information is missing!</p>\\n            <a className=\\\"group whitespace-nowrap font-medium text-sm\\\" href=\\\"#\\\">\\n              Link\\n              <ArrowRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n                size={16}\\n              />\\n            </a>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"warning\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-284.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-284\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-284.tsx\",\n      \"content\": \"import { ArrowRightIcon, CircleAlert, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <CircleAlert\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-red-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow justify-between gap-12\\\">\\n            <p className=\\\"text-sm\\\">An error occurred!</p>\\n            <a className=\\\"group whitespace-nowrap font-medium text-sm\\\" href=\\\"#\\\">\\n              Link\\n              <ArrowRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n                size={16}\\n              />\\n            </a>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"error\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-285.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-285\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-285.tsx\",\n      \"content\": \"import { ArrowRightIcon, CircleCheckIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <CircleCheckIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-emerald-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow justify-between gap-12\\\">\\n            <p className=\\\"text-sm\\\">Completed successfully!</p>\\n            <a className=\\\"group whitespace-nowrap font-medium text-sm\\\" href=\\\"#\\\">\\n              Link\\n              <ArrowRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n                size={16}\\n              />\\n            </a>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"success\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-286.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-286\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-286.tsx\",\n      \"content\": \"import { ArrowRightIcon, InfoIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <InfoIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-blue-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow justify-between gap-12\\\">\\n            <p className=\\\"text-sm\\\">Just a quick note!</p>\\n            <a className=\\\"group whitespace-nowrap font-medium text-sm\\\" href=\\\"#\\\">\\n              Link\\n              <ArrowRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n                size={16}\\n              />\\n            </a>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"info\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-287.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-287\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-287.tsx\",\n      \"content\": \"import { CircleCheckIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <div className=\\\"flex grow items-center gap-3\\\">\\n          <CircleCheckIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-emerald-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow items-center justify-between gap-12\\\">\\n            <p className=\\\"text-sm\\\">You&lsquo;ve made changes!</p>\\n            <Button size=\\\"sm\\\">Undo</Button>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\",\n      \"success\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-288.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-288\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-288.tsx\",\n      \"content\": \"import { CircleCheckIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <CircleCheckIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-emerald-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow justify-between gap-12\\\">\\n            <p className=\\\"text-sm\\\">Message sent</p>\\n            <div className=\\\"whitespace-nowrap text-sm\\\">\\n              <button\\n                className=\\\"font-medium text-sm hover:underline\\\"\\n                type=\\\"button\\\"\\n              >\\n                View\\n              </button>{\\\" \\\"}\\n              <span className=\\\"mx-1 text-muted-foreground\\\">·</span>{\\\" \\\"}\\n              <button\\n                className=\\\"font-medium text-sm hover:underline\\\"\\n                type=\\\"button\\\"\\n              >\\n                Undo\\n              </button>\\n            </div>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"success\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-289.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-289\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-289.tsx\",\n      \"content\": \"import { TriangleAlertIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <TriangleAlertIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-amber-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col gap-3\\\">\\n            <div className=\\\"space-y-1\\\">\\n              <p className=\\\"font-medium text-sm\\\">\\n                Something requires your action!\\n              </p>\\n              <p className=\\\"text-muted-foreground text-sm\\\">\\n                It conveys that a specific action is needed to resolve or\\n                address a situation.\\n              </p>\\n            </div>\\n            <div>\\n              <Button size=\\\"sm\\\">Learn more</Button>\\n            </div>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\",\n      \"warning\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-29.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-29\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-29.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronDownIcon, ChevronUpIcon } from \\\"lucide-react\\\";\\nimport {\\n  Button,\\n  Group,\\n  Input,\\n  Label,\\n  NumberField,\\n} from \\\"react-aria-components\\\";\\n\\nexport default function Component() {\\n  return (\\n    <NumberField\\n      defaultValue={99}\\n      formatOptions={{\\n        currency: \\\"EUR\\\",\\n        currencySign: \\\"accounting\\\",\\n        style: \\\"currency\\\",\\n      }}\\n    >\\n      <div className=\\\"*:not-first:mt-2\\\">\\n        <Label className=\\\"font-medium text-foreground text-sm\\\">\\n          Number input with chevrons\\n        </Label>\\n        <Group className=\\\"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input text-sm shadow-xs outline-none transition-[color,box-shadow] data-focus-within:border-ring data-disabled:opacity-50 data-focus-within:ring-[3px] data-focus-within:ring-ring/50 data-focus-within:has-aria-invalid:border-destructive data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40\\\">\\n          <Input className=\\\"flex-1 bg-background px-3 py-2 text-foreground tabular-nums\\\" />\\n          <div className=\\\"flex h-[calc(100%+2px)] flex-col\\\">\\n            <Button\\n              className=\\\"-me-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n              slot=\\\"increment\\\"\\n            >\\n              <ChevronUpIcon aria-hidden=\\\"true\\\" size={12} />\\n            </Button>\\n            <Button\\n              className=\\\"-me-px -mt-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n              slot=\\\"decrement\\\"\\n            >\\n              <ChevronDownIcon aria-hidden=\\\"true\\\" size={12} />\\n            </Button>\\n          </div>\\n        </Group>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/NumberField.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"button\",\n      \"number\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-290.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-290\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-290.tsx\",\n      \"content\": \"import { CircleAlertIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <CircleAlertIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-red-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col gap-3\\\">\\n            <div className=\\\"space-y-1\\\">\\n              <p className=\\\"font-medium text-sm\\\">\\n                We couldn&lsquo;t complete your request!\\n              </p>\\n              <p className=\\\"text-muted-foreground text-sm\\\">\\n                It indicates that an issue has prevented the processing of the\\n                request.\\n              </p>\\n            </div>\\n            <div className=\\\"flex gap-2\\\">\\n              <Button size=\\\"sm\\\">Learn more</Button>\\n            </div>\\n          </div>\\n          <Button\\n            aria-label=\\\"Close notification\\\"\\n            className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <XIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\",\n      \"error\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-291.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-291\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-291.tsx\",\n      \"content\": \"import { CircleCheckIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <CircleCheckIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-emerald-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col gap-3\\\">\\n            <div className=\\\"space-y-1\\\">\\n              <p className=\\\"font-medium text-sm\\\">Your request was completed!</p>\\n              <p className=\\\"text-muted-foreground text-sm\\\">\\n                It demonstrates that the task or request has been processed.\\n              </p>\\n            </div>\\n            <div className=\\\"flex gap-2\\\">\\n              <Button size=\\\"sm\\\">Learn more</Button>\\n            </div>\\n          </div>\\n          <Button\\n            aria-label=\\\"Close notification\\\"\\n            className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <XIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\",\n      \"success\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-292.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-292\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-292.tsx\",\n      \"content\": \"import { Info, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <Info\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-blue-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col gap-3\\\">\\n            <div className=\\\"space-y-1\\\">\\n              <p className=\\\"font-medium text-sm\\\">\\n                Here is some helpful information!\\n              </p>\\n              <p className=\\\"text-muted-foreground text-sm\\\">\\n                It aims to provide clarity or support for better\\n                decision-making.\\n              </p>\\n            </div>\\n            <div className=\\\"flex gap-2\\\">\\n              <Button size=\\\"sm\\\">Learn more</Button>\\n            </div>\\n          </div>\\n          <Button\\n            aria-label=\\\"Close notification\\\"\\n            className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <XIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\",\n      \"info\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-293.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-293\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-293.tsx\",\n      \"content\": \"import { XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow flex-col gap-3\\\">\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"font-medium text-sm\\\">We Value Your Privacy 🍪</p>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              We use cookies to improve your experience, and show personalized\\n              content.\\n            </p>\\n          </div>\\n          <div className=\\\"flex gap-2\\\">\\n            <Button size=\\\"sm\\\">Accept</Button>\\n            <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n              Decline\\n            </Button>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\",\n      \"cookies\",\n      \"gdpr\",\n      \"privacy\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-294.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-294\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-294.tsx\",\n      \"content\": \"import { RefreshCwIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\\\">\\n      <div className=\\\"flex gap-3\\\">\\n        <div\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"flex size-9 shrink-0 items-center justify-center rounded-full border\\\"\\n        >\\n          <RefreshCwIcon className=\\\"opacity-60\\\" size={16} />\\n        </div>\\n        <div className=\\\"flex grow flex-col gap-3\\\">\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"font-medium text-sm\\\">Version 1.4 is now available!</p>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              This update contains several bug fixes and performance\\n              improvements.\\n            </p>\\n          </div>\\n          <div className=\\\"flex gap-2\\\">\\n            <Button size=\\\"sm\\\">Install</Button>\\n            <Button size=\\\"sm\\\" variant=\\\"link\\\">\\n              Later\\n            </Button>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\",\n      \"info\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-295.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-295\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-295.tsx\",\n      \"content\": \"import { XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\\\">\\n      <div className=\\\"flex gap-3\\\">\\n        <img\\n          alt=\\\"Mary Palmer\\\"\\n          className=\\\"size-9 rounded-full\\\"\\n          height={32}\\n          src=\\\"/origin/avatar-32-01.jpg\\\"\\n          width={32}\\n        />\\n        <div className=\\\"flex grow flex-col gap-3\\\">\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              <a\\n                className=\\\"font-medium text-foreground hover:underline\\\"\\n                href=\\\"#\\\"\\n              >\\n                Mary Palmer\\n              </a>{\\\" \\\"}\\n              mentioned you in{\\\" \\\"}\\n              <a\\n                className=\\\"font-medium text-foreground hover:underline\\\"\\n                href=\\\"#\\\"\\n              >\\n                project-campaign-02\\n              </a>\\n              .\\n            </p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">2 min ago</p>\\n          </div>\\n          <div className=\\\"flex gap-2\\\">\\n            <Button size=\\\"sm\\\">Accept</Button>\\n            <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n              Decline\\n            </Button>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-296.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-296\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-296.tsx\",\n      \"content\": \"import { RadioIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\\n    <div className=\\\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\\\">\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <div\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"flex size-9 shrink-0 items-center justify-center rounded-full border\\\"\\n        >\\n          <RadioIcon className=\\\"opacity-60\\\" size={16} />\\n        </div>\\n        <div className=\\\"flex grow items-center gap-12\\\">\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"font-medium text-sm\\\">Live in 27 hours</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              November 20 at 8:00 PM.\\n            </p>\\n          </div>\\n          <Button size=\\\"sm\\\">Notify me</Button>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close notification\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-297.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-297\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/toast.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-297.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useToast } from \\\"@/registry/default/hooks/use-toast\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { ToastAction } from \\\"@/registry/default/ui/toast\\\";\\n\\nexport default function Component() {\\n  const { toast } = useToast();\\n\\n  return (\\n    <Button\\n      onClick={() => {\\n        toast({\\n          action: <ToastAction altText=\\\"Try again\\\">Try again</ToastAction>,\\n          description: \\\"There was a problem with your request.\\\",\\n          title: \\\"We couldn't complete your request!\\\",\\n        });\\n      }}\\n      variant=\\\"outline\\\"\\n    >\\n      Show toast\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-toast.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\n// Inspired by react-hot-toast library\\nimport * as React from \\\"react\\\";\\n\\nimport type {\\n  ToastActionElement,\\n  ToastProps,\\n} from \\\"@/registry/default/ui/toast\\\";\\n\\nconst TOAST_LIMIT = 1;\\nconst TOAST_REMOVE_DELAY = 1000000;\\n\\ntype ToasterToast = ToastProps & {\\n  id: string;\\n  title?: React.ReactNode;\\n  description?: React.ReactNode;\\n  action?: ToastActionElement;\\n};\\n\\nconst actionTypes = {\\n  ADD_TOAST: \\\"ADD_TOAST\\\",\\n  DISMISS_TOAST: \\\"DISMISS_TOAST\\\",\\n  REMOVE_TOAST: \\\"REMOVE_TOAST\\\",\\n  UPDATE_TOAST: \\\"UPDATE_TOAST\\\",\\n} as const;\\n\\nlet count = 0;\\n\\nfunction genId() {\\n  count = (count + 1) % Number.MAX_SAFE_INTEGER;\\n  return count.toString();\\n}\\n\\ntype ActionType = typeof actionTypes;\\n\\ntype Action =\\n  | {\\n      type: ActionType[\\\"ADD_TOAST\\\"];\\n      toast: ToasterToast;\\n    }\\n  | {\\n      type: ActionType[\\\"UPDATE_TOAST\\\"];\\n      toast: Partial<ToasterToast>;\\n    }\\n  | {\\n      type: ActionType[\\\"DISMISS_TOAST\\\"];\\n      toastId?: ToasterToast[\\\"id\\\"];\\n    }\\n  | {\\n      type: ActionType[\\\"REMOVE_TOAST\\\"];\\n      toastId?: ToasterToast[\\\"id\\\"];\\n    };\\n\\ninterface State {\\n  toasts: ToasterToast[];\\n}\\n\\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\\n\\nconst addToRemoveQueue = (toastId: string) => {\\n  if (toastTimeouts.has(toastId)) {\\n    return;\\n  }\\n\\n  const timeout = setTimeout(() => {\\n    toastTimeouts.delete(toastId);\\n    dispatch({\\n      toastId: toastId,\\n      type: \\\"REMOVE_TOAST\\\",\\n    });\\n  }, TOAST_REMOVE_DELAY);\\n\\n  toastTimeouts.set(toastId, timeout);\\n};\\n\\nexport const reducer = (state: State, action: Action): State => {\\n  switch (action.type) {\\n    case \\\"ADD_TOAST\\\":\\n      return {\\n        ...state,\\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\\n      };\\n\\n    case \\\"UPDATE_TOAST\\\":\\n      return {\\n        ...state,\\n        toasts: state.toasts.map((t) =>\\n          t.id === action.toast.id ? { ...t, ...action.toast } : t,\\n        ),\\n      };\\n\\n    case \\\"DISMISS_TOAST\\\": {\\n      const { toastId } = action;\\n\\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\\n      // but I'll keep it here for simplicity\\n      if (toastId) {\\n        addToRemoveQueue(toastId);\\n      } else {\\n        for (const toast of state.toasts) {\\n          addToRemoveQueue(toast.id);\\n        }\\n      }\\n\\n      return {\\n        ...state,\\n        toasts: state.toasts.map((t) =>\\n          t.id === toastId || toastId === undefined\\n            ? {\\n                ...t,\\n                open: false,\\n              }\\n            : t,\\n        ),\\n      };\\n    }\\n    case \\\"REMOVE_TOAST\\\":\\n      if (action.toastId === undefined) {\\n        return {\\n          ...state,\\n          toasts: [],\\n        };\\n      }\\n      return {\\n        ...state,\\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\\n      };\\n  }\\n};\\n\\nconst listeners: Array<(state: State) => void> = [];\\n\\nlet memoryState: State = { toasts: [] };\\n\\nfunction dispatch(action: Action) {\\n  memoryState = reducer(memoryState, action);\\n  for (const listener of listeners) {\\n    listener(memoryState);\\n  }\\n}\\n\\ntype Toast = Omit<ToasterToast, \\\"id\\\">;\\n\\nfunction toast({ ...props }: Toast) {\\n  const id = genId();\\n\\n  const update = (props: ToasterToast) =>\\n    dispatch({\\n      toast: { ...props, id },\\n      type: \\\"UPDATE_TOAST\\\",\\n    });\\n  const dismiss = () => dispatch({ toastId: id, type: \\\"DISMISS_TOAST\\\" });\\n\\n  dispatch({\\n    toast: {\\n      ...props,\\n      id,\\n      onOpenChange: (open) => {\\n        if (!open) dismiss();\\n      },\\n      open: true,\\n    },\\n    type: \\\"ADD_TOAST\\\",\\n  });\\n\\n  return {\\n    dismiss,\\n    id: id,\\n    update,\\n  };\\n}\\n\\nfunction useToast() {\\n  const [state, setState] = React.useState<State>(memoryState);\\n\\n  React.useEffect(() => {\\n    listeners.push(setState);\\n    return () => {\\n      const index = listeners.indexOf(setState);\\n      if (index > -1) {\\n        listeners.splice(index, 1);\\n      }\\n    };\\n  }, []);\\n\\n  return {\\n    ...state,\\n    dismiss: (toastId?: string) => dispatch({ toastId, type: \\\"DISMISS_TOAST\\\" }),\\n    toast,\\n  };\\n}\\n\\nexport { toast, useToast };\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"toast\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-298.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-298\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/toast.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-298.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CircleCheckIcon, XIcon } from \\\"lucide-react\\\";\\nimport { useCallback, useEffect, useRef, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Toast,\\n  ToastAction,\\n  ToastClose,\\n  ToastDescription,\\n  ToastProvider,\\n  ToastTitle,\\n  ToastViewport,\\n} from \\\"@/registry/default/ui/toast\\\";\\n\\ninterface UseProgressTimerProps {\\n  duration: number;\\n  interval?: number;\\n  onComplete?: () => void;\\n}\\n\\nfunction useProgressTimer({\\n  duration,\\n  interval = 100,\\n  onComplete,\\n}: UseProgressTimerProps) {\\n  const [progress, setProgress] = useState(duration);\\n  const timerRef = useRef(0);\\n  const timerState = useRef({\\n    isPaused: false,\\n    remaining: duration,\\n    startTime: 0,\\n  });\\n\\n  const cleanup = useCallback(() => {\\n    window.clearInterval(timerRef.current);\\n  }, []);\\n\\n  const reset = useCallback(() => {\\n    cleanup();\\n    setProgress(duration);\\n    timerState.current = {\\n      isPaused: false,\\n      remaining: duration,\\n      startTime: 0,\\n    };\\n  }, [duration, cleanup]);\\n\\n  const start = useCallback(() => {\\n    const state = timerState.current;\\n    state.startTime = Date.now();\\n    state.isPaused = false;\\n\\n    timerRef.current = window.setInterval(() => {\\n      const elapsedTime = Date.now() - state.startTime;\\n      const remaining = Math.max(0, state.remaining - elapsedTime);\\n\\n      setProgress(remaining);\\n\\n      if (remaining <= 0) {\\n        cleanup();\\n        onComplete?.();\\n      }\\n    }, interval);\\n  }, [interval, cleanup, onComplete]);\\n\\n  const pause = useCallback(() => {\\n    const state = timerState.current;\\n    if (!state.isPaused) {\\n      cleanup();\\n      state.remaining = Math.max(\\n        0,\\n        state.remaining - (Date.now() - state.startTime),\\n      );\\n      state.isPaused = true;\\n    }\\n  }, [cleanup]);\\n\\n  const resume = useCallback(() => {\\n    const state = timerState.current;\\n    if (state.isPaused && state.remaining > 0) {\\n      start();\\n    }\\n  }, [start]);\\n\\n  useEffect(() => {\\n    return cleanup;\\n  }, [cleanup]);\\n\\n  return {\\n    pause,\\n    progress,\\n    reset,\\n    resume,\\n    start,\\n  };\\n}\\n\\nexport default function Component() {\\n  const [open, setOpen] = useState(false);\\n  const toastDuration = 5000;\\n  const { progress, start, pause, resume, reset } = useProgressTimer({\\n    duration: toastDuration,\\n    onComplete: () => setOpen(false),\\n  });\\n\\n  const handleOpenChange = useCallback(\\n    (isOpen: boolean) => {\\n      setOpen(isOpen);\\n      if (isOpen) {\\n        reset();\\n        start();\\n      }\\n    },\\n    [reset, start],\\n  );\\n\\n  const handleButtonClick = useCallback(() => {\\n    if (open) {\\n      setOpen(false);\\n      // Wait for the close animation to finish\\n      window.setTimeout(() => {\\n        handleOpenChange(true);\\n      }, 150);\\n    } else {\\n      handleOpenChange(true);\\n    }\\n  }, [open, handleOpenChange]);\\n\\n  return (\\n    <ToastProvider swipeDirection=\\\"left\\\">\\n      <Button onClick={handleButtonClick} variant=\\\"outline\\\">\\n        Custom toast\\n      </Button>\\n      <Toast\\n        onOpenChange={handleOpenChange}\\n        onPause={pause}\\n        onResume={resume}\\n        open={open}\\n      >\\n        <div className=\\\"flex w-full justify-between gap-3\\\">\\n          <CircleCheckIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 text-emerald-500\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col gap-3\\\">\\n            <div className=\\\"space-y-1\\\">\\n              <ToastTitle>Your request was completed!</ToastTitle>\\n              <ToastDescription>\\n                It demonstrates that the task or request has been processed.\\n              </ToastDescription>\\n            </div>\\n            <div>\\n              <ToastAction altText=\\\"Undo changes\\\" asChild>\\n                <Button size=\\\"sm\\\">Undo changes</Button>\\n              </ToastAction>\\n            </div>\\n          </div>\\n          <ToastClose asChild>\\n            <Button\\n              aria-label=\\\"Close notification\\\"\\n              className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n              variant=\\\"ghost\\\"\\n            >\\n              <XIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n                size={16}\\n              />\\n            </Button>\\n          </ToastClose>\\n        </div>\\n        <div aria-hidden=\\\"true\\\" className=\\\"contents\\\">\\n          <div\\n            className=\\\"pointer-events-none absolute bottom-0 left-0 h-1 w-full bg-emerald-500\\\"\\n            style={{\\n              transition: \\\"width 100ms linear\\\",\\n              width: `${(progress / toastDuration) * 100}%`,\\n            }}\\n          />\\n        </div>\\n      </Toast>\\n      <ToastViewport className=\\\"sm:right-auto sm:left-0\\\" />\\n    </ToastProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"toast\",\n      \"success\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-299.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-299\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"sonner\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-299.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { toast } from \\\"sonner\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button\\n      onClick={() => {\\n        toast(\\\"Your request was completed!\\\", {\\n          action: {\\n            label: \\\"Undo\\\",\\n            onClick: () => console.log(\\\"Undo\\\"),\\n          },\\n          description: \\\"It was a long journey, but we made it!\\\",\\n        });\\n      }}\\n      variant=\\\"outline\\\"\\n    >\\n      Show sonner\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"toast\",\n      \"sonner\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-30.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-30\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-30.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>File input</Label>\\n      <Input\\n        className=\\\"p-0 pe-3 file:me-3 file:border-0 file:border-e\\\"\\n        id={id}\\n        type=\\\"file\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"file\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-300.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-300\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"sonner\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-300.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CircleCheckIcon, XIcon } from \\\"lucide-react\\\";\\nimport { toast } from \\\"sonner\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button\\n      onClick={() => {\\n        toast.custom((t) => (\\n          <div className=\\\"w-full rounded-md border bg-background px-4 py-3 text-foreground shadow-lg sm:w-[var(--width)]\\\">\\n            <div className=\\\"flex gap-2\\\">\\n              <div className=\\\"flex grow gap-3\\\">\\n                <CircleCheckIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"mt-0.5 shrink-0 text-emerald-500\\\"\\n                  size={16}\\n                />\\n                <div className=\\\"flex grow justify-between gap-12\\\">\\n                  <p className=\\\"text-sm\\\">Message sent</p>\\n                  <div className=\\\"whitespace-nowrap text-sm\\\">\\n                    <button\\n                      className=\\\"font-medium text-sm hover:underline\\\"\\n                      type=\\\"button\\\"\\n                    >\\n                      View\\n                    </button>{\\\" \\\"}\\n                    <span className=\\\"mx-1 text-muted-foreground\\\">·</span>{\\\" \\\"}\\n                    <button\\n                      className=\\\"font-medium text-sm hover:underline\\\"\\n                      onClick={() => toast.dismiss(t)}\\n                      type=\\\"button\\\"\\n                    >\\n                      Undo\\n                    </button>\\n                  </div>\\n                </div>\\n              </div>\\n              <Button\\n                aria-label=\\\"Close banner\\\"\\n                className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n                onClick={() => toast.dismiss(t)}\\n                variant=\\\"ghost\\\"\\n              >\\n                <XIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n                  size={16}\\n                />\\n              </Button>\\n            </div>\\n          </div>\\n        ));\\n      }}\\n      variant=\\\"outline\\\"\\n    >\\n      Custom sonner\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"notification\",\n      \"toast\",\n      \"sonner\",\n      \"success\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-301.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-301\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-301.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    // To make the notification fixed, add classes like `fixed bottom-4 inset-x-4` to the container element.\\n    <div className=\\\"z-50 rounded-md border bg-background px-4 py-3 shadow-lg\\\">\\n      <div className=\\\"flex flex-col justify-between gap-3 md:flex-row md:items-center\\\">\\n        <p className=\\\"text-sm\\\">\\n          We use cookies to improve your experience, analyze site usage, and\\n          show personalized content.\\n        </p>\\n        <div className=\\\"flex gap-2 max-md:flex-wrap\\\">\\n          <Button size=\\\"sm\\\">Accept</Button>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            Decline\\n          </Button>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\",\n      \"cookies\",\n      \"gdpr\",\n      \"privacy\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-302.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-302\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-302.tsx\",\n      \"content\": \"import { ArrowRightIcon } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground\\\">\\n      <p className=\\\"flex justify-center text-sm\\\">\\n        <a className=\\\"group\\\" href=\\\"#\\\">\\n          <span className=\\\"me-1 text-base leading-none\\\">✨</span>\\n          Introducing transactional and marketing emails\\n          <ArrowRightIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-mt-0.5 ms-2 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n            size={16}\\n          />\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-303.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-303\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-303.tsx\",\n      \"content\": \"import { EclipseIcon } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground\\\">\\n      <p className=\\\"text-center text-sm\\\">\\n        <EclipseIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"-mt-0.5 me-3 inline-flex opacity-60\\\"\\n          size={16}\\n        />\\n        Get the most out of your app with real-time updates and analytics{\\\" \\\"}\\n        <span className=\\\"text-muted-foreground\\\">·</span>{\\\" \\\"}\\n        <a className=\\\"font-medium underline hover:no-underline\\\" href=\\\"#\\\">\\n          Upgrade\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-304.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-304\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-304.tsx\",\n      \"content\": \"import { ArrowRightIcon, Eclipse } from \\\"lucide-react\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground\\\">\\n      <div className=\\\"flex flex-col justify-between gap-2 md:flex-row\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <Eclipse\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 opacity-60\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col justify-between gap-2 md:flex-row md:items-center\\\">\\n            <p className=\\\"text-sm\\\">\\n              We just added something awesome to make your experience even\\n              better.\\n            </p>\\n            <a className=\\\"group whitespace-nowrap font-medium text-sm\\\" href=\\\"#\\\">\\n              Learn more\\n              <ArrowRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n                size={16}\\n              />\\n            </a>\\n          </div>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-305.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-305\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-305.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ArrowRightIcon, Eclipse, XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [isVisible, setIsVisible] = useState(true);\\n\\n  if (!isVisible) return null;\\n\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground\\\">\\n      <div className=\\\"flex gap-2\\\">\\n        <div className=\\\"flex grow gap-3\\\">\\n          <Eclipse\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mt-0.5 shrink-0 opacity-60\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col justify-between gap-2 md:flex-row\\\">\\n            <p className=\\\"text-sm\\\">\\n              We just added something awesome to make your experience even\\n              better.\\n            </p>\\n            <a className=\\\"group whitespace-nowrap font-medium text-sm\\\" href=\\\"#\\\">\\n              Learn more\\n              <ArrowRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-mt-0.5 ms-1 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n                size={16}\\n              />\\n            </a>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          onClick={() => setIsVisible(false)}\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-306.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-306\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-306.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { EclipseIcon, XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [isVisible, setIsVisible] = useState(true);\\n\\n  if (!isVisible) return null;\\n\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground md:py-2\\\">\\n      <div className=\\\"flex gap-2 md:items-center\\\">\\n        <div className=\\\"flex grow gap-3 md:items-center\\\">\\n          <EclipseIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0 opacity-60 max-md:mt-0.5\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\\\">\\n            <p className=\\\"text-sm\\\">\\n              It&lsquo;s live and ready to use! Start exploring the latest\\n              addition to your toolkit.\\n            </p>\\n            <div className=\\\"flex gap-2 max-md:flex-wrap\\\">\\n              <Button className=\\\"text-sm\\\" size=\\\"sm\\\">\\n                Download\\n              </Button>\\n              <Button className=\\\"text-sm\\\" size=\\\"sm\\\" variant=\\\"outline\\\">\\n                Learn more\\n              </Button>\\n            </div>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          onClick={() => setIsVisible(false)}\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-307.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-307\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-307.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Eclipse, XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [isVisible, setIsVisible] = useState(true);\\n\\n  if (!isVisible) return null;\\n\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground md:py-2\\\">\\n      <div className=\\\"flex gap-2 md:items-center\\\">\\n        <div className=\\\"flex grow gap-3 md:items-center\\\">\\n          <Eclipse\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0 opacity-60 max-md:mt-0.5\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\\\">\\n            <p className=\\\"text-sm\\\">\\n              It&lsquo;s live and ready to use! Start exploring the latest\\n              addition to your toolkit.\\n            </p>\\n            <div className=\\\"flex gap-2 max-md:flex-wrap\\\">\\n              <Button className=\\\"text-sm\\\" size=\\\"sm\\\">\\n                Download\\n              </Button>\\n              <Button className=\\\"text-sm\\\" size=\\\"sm\\\" variant=\\\"link\\\">\\n                Learn more\\n              </Button>\\n            </div>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          onClick={() => setIsVisible(false)}\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-308.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-308\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-308.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Eclipse, XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [isVisible, setIsVisible] = useState(true);\\n\\n  if (!isVisible) return null;\\n\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground md:py-2\\\">\\n      <div className=\\\"flex gap-2 md:items-center\\\">\\n        <div className=\\\"flex grow gap-3 md:items-center md:justify-center\\\">\\n          <Eclipse\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0 opacity-60 max-md:mt-0.5\\\"\\n            size={16}\\n          />\\n          <div className=\\\"flex flex-col justify-between gap-3 md:flex-row md:items-center\\\">\\n            <p className=\\\"text-sm\\\">\\n              It&lsquo;s live and ready to use! Start exploring the latest\\n              addition to your toolkit.\\n            </p>\\n            <div className=\\\"flex gap-2 max-md:flex-wrap\\\">\\n              <Button className=\\\"rounded-full\\\" size=\\\"sm\\\">\\n                Learn more\\n              </Button>\\n            </div>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          onClick={() => setIsVisible(false)}\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-309.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-309\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-309.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RocketIcon, XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [isVisible, setIsVisible] = useState(true);\\n\\n  if (!isVisible) return null;\\n\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground\\\">\\n      <div className=\\\"flex gap-2 md:items-center\\\">\\n        <div className=\\\"flex grow gap-3 md:items-center\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/15 max-md:mt-0.5\\\"\\n          >\\n            <RocketIcon className=\\\"opacity-80\\\" size={16} />\\n          </div>\\n          <div className=\\\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\\\">\\n            <div className=\\\"space-y-0.5\\\">\\n              <p className=\\\"font-medium text-sm\\\">\\n                Boost your experience with coss.com\\n              </p>\\n              <p className=\\\"text-muted-foreground text-sm\\\">\\n                The new feature is live! Try it out and let us know what you\\n                think.\\n              </p>\\n            </div>\\n            <div className=\\\"flex gap-2 max-md:flex-wrap\\\">\\n              <Button className=\\\"text-sm\\\" size=\\\"sm\\\">\\n                Try now\\n              </Button>\\n            </div>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          onClick={() => setIsVisible(false)}\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-31.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-31\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-31.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"group relative\\\">\\n      <label\\n        className=\\\"-translate-y-1/2 absolute start-1 top-0 z-10 block bg-background px-2 font-medium text-foreground text-xs group-has-disabled:opacity-50\\\"\\n        htmlFor={id}\\n      >\\n        Input with overlapping label\\n      </label>\\n      <Input className=\\\"h-10\\\" id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-310.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-310\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-310.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { TicketPercent, XIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\n// Define the sale end date - eg: new Date('2024-12-31T23:59:59');\\nconst saleEndDate = new Date(\\n  Date.now() + 9 * 60 * 60 * 1000 + 45 * 60 * 1000 + 24 * 1000,\\n); // Setting 9h 45m 24s from now for demo purposes\\n\\ninterface TimeLeft {\\n  days: number;\\n  hours: number;\\n  minutes: number;\\n  seconds: number;\\n  isExpired: boolean;\\n}\\n\\nexport default function Component() {\\n  const [isVisible, setIsVisible] = useState(true);\\n  const [timeLeft, setTimeLeft] = useState<TimeLeft>({\\n    days: 0,\\n    hours: 0,\\n    isExpired: false,\\n    minutes: 0,\\n    seconds: 0,\\n  });\\n\\n  useEffect(() => {\\n    const calculateTimeLeft = () => {\\n      const now = new Date();\\n      const difference = saleEndDate.getTime() - now.getTime();\\n\\n      if (difference <= 0) {\\n        setTimeLeft({\\n          days: 0,\\n          hours: 0,\\n          isExpired: true,\\n          minutes: 0,\\n          seconds: 0,\\n        });\\n        return;\\n      }\\n\\n      const days = Math.floor(difference / (1000 * 60 * 60 * 24));\\n      const hours = Math.floor(\\n        (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),\\n      );\\n      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));\\n      const seconds = Math.floor((difference % (1000 * 60)) / 1000);\\n\\n      setTimeLeft({\\n        days,\\n        hours,\\n        isExpired: false,\\n        minutes,\\n        seconds,\\n      });\\n    };\\n\\n    // Calculate immediately and then every second\\n    calculateTimeLeft();\\n    const timer = setInterval(calculateTimeLeft, 1000);\\n\\n    return () => clearInterval(timer);\\n  }, []);\\n\\n  if (!isVisible || timeLeft.isExpired) return null;\\n\\n  return (\\n    <div className=\\\"dark bg-muted px-4 py-3 text-foreground\\\">\\n      <div className=\\\"flex gap-2 md:items-center\\\">\\n        <div className=\\\"flex grow gap-3 md:items-center\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/15 max-md:mt-0.5\\\"\\n          >\\n            <TicketPercent className=\\\"opacity-80\\\" size={16} />\\n          </div>\\n          <div className=\\\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\\\">\\n            <div className=\\\"space-y-0.5\\\">\\n              <p className=\\\"font-medium text-sm\\\">Black Friday Sale!</p>\\n              <p className=\\\"text-muted-foreground text-sm\\\">\\n                It kicks off today and is available for just 24\\n                hours—don&lsquo;t miss out!\\n              </p>\\n            </div>\\n            <div className=\\\"flex gap-3 max-md:flex-wrap\\\">\\n              <div className=\\\"flex items-center divide-x divide-primary-foreground rounded-md bg-primary/15 text-sm tabular-nums\\\">\\n                {timeLeft.days > 0 && (\\n                  <span className=\\\"flex h-8 items-center justify-center p-2\\\">\\n                    {timeLeft.days}\\n                    <span className=\\\"text-muted-foreground\\\">d</span>\\n                  </span>\\n                )}\\n                <span className=\\\"flex h-8 items-center justify-center p-2\\\">\\n                  {timeLeft.hours.toString().padStart(2, \\\"0\\\")}\\n                  <span className=\\\"text-muted-foreground\\\">h</span>\\n                </span>\\n                <span className=\\\"flex h-8 items-center justify-center p-2\\\">\\n                  {timeLeft.minutes.toString().padStart(2, \\\"0\\\")}\\n                  <span className=\\\"text-muted-foreground\\\">m</span>\\n                </span>\\n                <span className=\\\"flex h-8 items-center justify-center p-2\\\">\\n                  {timeLeft.seconds.toString().padStart(2, \\\"0\\\")}\\n                  <span className=\\\"text-muted-foreground\\\">s</span>\\n                </span>\\n              </div>\\n              <Button className=\\\"text-sm\\\" size=\\\"sm\\\">\\n                Buy now\\n              </Button>\\n            </div>\\n          </div>\\n        </div>\\n        <Button\\n          aria-label=\\\"Close banner\\\"\\n          className=\\\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\\\"\\n          onClick={() => setIsVisible(false)}\\n          variant=\\\"ghost\\\"\\n        >\\n          <XIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\",\n      \"countdown\",\n      \"sale\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-311.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-311\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-311.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"border-b px-4 py-3\\\">\\n      <p className=\\\"text-center text-sm\\\">\\n        <span className=\\\"mr-1 text-base leading-none\\\">📫</span> Subscribe to our\\n        newsletter and get 10% off your first order!{\\\" \\\"}\\n        <span className=\\\"mx-1 text-muted-foreground\\\">·</span>{\\\" \\\"}\\n        <a className=\\\"font-medium underline hover:no-underline\\\" href=\\\"#\\\">\\n          Subscribe\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\",\n      \"newsletter\",\n      \"subscribe\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-312.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-312\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-312.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { DownloadIcon, LoaderCircleIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [isDownloading, setIsDownloading] = useState(false);\\n\\n  const handleDownload = () => {\\n    setIsDownloading(true);\\n    // Simulate download\\n    setTimeout(() => {\\n      setIsDownloading(false);\\n    }, 2000);\\n  };\\n\\n  return (\\n    <div className=\\\"bg-muted px-4 py-3 md:py-2\\\">\\n      <div className=\\\"flex flex-wrap items-center justify-center gap-x-4 gap-y-2\\\">\\n        <p className=\\\"text-sm\\\">\\n          <span className=\\\"font-medium\\\">v2.1.0</span>\\n          <span className=\\\"mx-2 text-muted-foreground\\\">•</span>\\n          New features and improvements available\\n        </p>\\n        <Button\\n          className=\\\"min-w-24\\\"\\n          disabled={isDownloading}\\n          onClick={handleDownload}\\n          size=\\\"sm\\\"\\n          variant=\\\"outline\\\"\\n        >\\n          {isDownloading ? (\\n            <>\\n              <LoaderCircleIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-ms-0.5 me-2 animate-spin\\\"\\n                size={16}\\n              />\\n              Updating...\\n            </>\\n          ) : (\\n            <>\\n              <DownloadIcon aria-hidden=\\\"true\\\" className=\\\"-ms-0.5\\\" size={16} />\\n              Update now\\n            </>\\n          )}\\n        </Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"banner\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-313.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-313\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/alert-dialog.json\",\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-313.tsx\",\n      \"content\": \"import {\\n  AlertDialog,\\n  AlertDialogAction,\\n  AlertDialogCancel,\\n  AlertDialogContent,\\n  AlertDialogDescription,\\n  AlertDialogFooter,\\n  AlertDialogHeader,\\n  AlertDialogTitle,\\n  AlertDialogTrigger,\\n} from \\\"@/registry/default/ui/alert-dialog\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function AlertComponent() {\\n  return (\\n    <AlertDialog>\\n      <AlertDialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Alert dialog</Button>\\n      </AlertDialogTrigger>\\n      <AlertDialogContent>\\n        <AlertDialogHeader>\\n          <AlertDialogTitle>Are you sure?</AlertDialogTitle>\\n          <AlertDialogDescription>\\n            Take a moment to review the details provided to ensure you\\n            understand the implications.\\n          </AlertDialogDescription>\\n        </AlertDialogHeader>\\n        <AlertDialogFooter>\\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\\n          <AlertDialogAction>Okay</AlertDialogAction>\\n        </AlertDialogFooter>\\n      </AlertDialogContent>\\n    </AlertDialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"alert\",\n      \"alert dialog\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-314.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-314\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/alert-dialog.json\",\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-314.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  AlertDialog,\\n  AlertDialogAction,\\n  AlertDialogCancel,\\n  AlertDialogContent,\\n  AlertDialogDescription,\\n  AlertDialogFooter,\\n  AlertDialogHeader,\\n  AlertDialogTitle,\\n  AlertDialogTrigger,\\n} from \\\"@/registry/default/ui/alert-dialog\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function AlertComponent() {\\n  return (\\n    <AlertDialog>\\n      <AlertDialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Alert dialog with icon</Button>\\n      </AlertDialogTrigger>\\n      <AlertDialogContent>\\n        <div className=\\\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-9 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <CircleAlertIcon className=\\\"opacity-80\\\" size={16} />\\n          </div>\\n          <AlertDialogHeader>\\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\\n            <AlertDialogDescription>\\n              Are you sure you want to delete your account? All your data will\\n              be removed.\\n            </AlertDialogDescription>\\n          </AlertDialogHeader>\\n        </div>\\n        <AlertDialogFooter>\\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\\n          <AlertDialogAction>Confirm</AlertDialogAction>\\n        </AlertDialogFooter>\\n      </AlertDialogContent>\\n    </AlertDialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"alert\",\n      \"alert dialog\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-315.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-315\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-315.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Scrollable (native scrollbar)</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\\\">\\n        <div className=\\\"overflow-y-auto\\\">\\n          <DialogHeader className=\\\"contents space-y-0 text-left\\\">\\n            <DialogTitle className=\\\"px-6 pt-6\\\">\\n              Frequently Asked Questions (FAQ)\\n            </DialogTitle>\\n            <DialogDescription asChild>\\n              <div className=\\\"p-6\\\">\\n                <div className=\\\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\\\">\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Account Management</strong>\\n                    </p>\\n                    <p>\\n                      Navigate to the registration page, provide required\\n                      information, and verify your email address. You can sign\\n                      up using your email or through social media platforms.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Password Reset Process</strong>\\n                    </p>\\n                    <p>\\n                      Users can reset their password through the account\\n                      settings page. Click &quot;Forgot Password&quot; and\\n                      follow the email verification steps to regain account\\n                      access quickly and securely.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Service Pricing Tiers</strong>\\n                    </p>\\n                    <p>\\n                      We offer three primary subscription levels designed to\\n                      meet diverse user needs: Basic (free with limited\\n                      features), Professional (monthly fee with comprehensive\\n                      access), and Enterprise (custom pricing with full platform\\n                      capabilities).\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Technical Support Channels</strong>\\n                    </p>\\n                    <p>\\n                      Customer support is accessible through multiple\\n                      communication methods including email support, live chat\\n                      during business hours, an integrated support ticket\\n                      system, and phone support specifically for\\n                      enterprise-level customers.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Data Protection Strategies</strong>\\n                    </p>\\n                    <p>\\n                      Our platform implements rigorous security measures\\n                      including 256-bit SSL encryption, regular comprehensive\\n                      security audits, strict data access controls, and\\n                      compliance with international privacy protection\\n                      standards.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Platform Compatibility</strong>\\n                    </p>\\n                    <p>\\n                      The service supports multiple device and operating system\\n                      environments, including web browsers like Chrome and\\n                      Firefox, mobile applications for iOS and Android, and\\n                      desktop applications compatible with Windows and macOS.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Subscription Management</strong>\\n                    </p>\\n                    <p>\\n                      Subscriptions can be cancelled at any time through account\\n                      settings, with pro-rated refunds available within 30 days\\n                      of payment. Both monthly and annual billing options are\\n                      provided, with special discounts offered for annual\\n                      commitments.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Payment Method Options</strong>\\n                    </p>\\n                    <p>\\n                      We accept a wide range of payment methods including major\\n                      credit cards such as Visa, MasterCard, and American\\n                      Express, digital payment platforms like PayPal, and direct\\n                      bank transfers. Regional payment options may also be\\n                      available depending on user location.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Customer Support</strong>\\n                    </p>\\n                    <p>\\n                      Our dedicated customer support team is available 24/7,\\n                      providing quick and efficient assistance to address any\\n                      inquiries or issues you may have.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Privacy Policy</strong>\\n                    </p>\\n                    <p>\\n                      Our privacy policy outlines how we collect, use, and\\n                      protect your personal data, ensuring your privacy is\\n                      protected at all times.\\n                    </p>\\n                  </div>\\n                </div>\\n              </div>\\n            </DialogDescription>\\n          </DialogHeader>\\n          <DialogFooter className=\\\"px-6 pb-6 sm:justify-start\\\">\\n            <DialogClose asChild>\\n              <Button type=\\\"button\\\" variant=\\\"outline\\\">\\n                Cancel\\n              </Button>\\n            </DialogClose>\\n            <DialogClose asChild>\\n              <Button type=\\\"button\\\">Okay</Button>\\n            </DialogClose>\\n          </DialogFooter>\\n        </div>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-316.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-316\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/scroll-area.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-316.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Scrollable (custom scrollbar)</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\\\">\\n        <ScrollArea className=\\\"flex max-h-full flex-col overflow-hidden\\\">\\n          <DialogHeader className=\\\"contents space-y-0 text-left\\\">\\n            <DialogTitle className=\\\"px-6 pt-6\\\">\\n              Frequently Asked Questions (FAQ)\\n            </DialogTitle>\\n            <DialogDescription asChild>\\n              <div className=\\\"p-6\\\">\\n                <div className=\\\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\\\">\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Account Management</strong>\\n                    </p>\\n                    <p>\\n                      Navigate to the registration page, provide required\\n                      information, and verify your email address. You can sign\\n                      up using your email or through social media platforms.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Password Reset Process</strong>\\n                    </p>\\n                    <p>\\n                      Users can reset their password through the account\\n                      settings page. Click &quot;Forgot Password&quot; and\\n                      follow the email verification steps to regain account\\n                      access quickly and securely.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Service Pricing Tiers</strong>\\n                    </p>\\n                    <p>\\n                      We offer three primary subscription levels designed to\\n                      meet diverse user needs: Basic (free with limited\\n                      features), Professional (monthly fee with comprehensive\\n                      access), and Enterprise (custom pricing with full platform\\n                      capabilities).\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Technical Support Channels</strong>\\n                    </p>\\n                    <p>\\n                      Customer support is accessible through multiple\\n                      communication methods including email support, live chat\\n                      during business hours, an integrated support ticket\\n                      system, and phone support specifically for\\n                      enterprise-level customers.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Data Protection Strategies</strong>\\n                    </p>\\n                    <p>\\n                      Our platform implements rigorous security measures\\n                      including 256-bit SSL encryption, regular comprehensive\\n                      security audits, strict data access controls, and\\n                      compliance with international privacy protection\\n                      standards.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Platform Compatibility</strong>\\n                    </p>\\n                    <p>\\n                      The service supports multiple device and operating system\\n                      environments, including web browsers like Chrome and\\n                      Firefox, mobile applications for iOS and Android, and\\n                      desktop applications compatible with Windows and macOS.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Subscription Management</strong>\\n                    </p>\\n                    <p>\\n                      Subscriptions can be cancelled at any time through account\\n                      settings, with pro-rated refunds available within 30 days\\n                      of payment. Both monthly and annual billing options are\\n                      provided, with special discounts offered for annual\\n                      commitments.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Payment Method Options</strong>\\n                    </p>\\n                    <p>\\n                      We accept a wide range of payment methods including major\\n                      credit cards such as Visa, MasterCard, and American\\n                      Express, digital payment platforms like PayPal, and direct\\n                      bank transfers. Regional payment options may also be\\n                      available depending on user location.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Customer Support</strong>\\n                    </p>\\n                    <p>\\n                      Our dedicated customer support team is available 24/7,\\n                      providing quick and efficient assistance to address any\\n                      inquiries or issues you may have.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Privacy Policy</strong>\\n                    </p>\\n                    <p>\\n                      Our privacy policy outlines how we collect, use, and\\n                      protect your personal data, ensuring your privacy is\\n                      protected at all times.\\n                    </p>\\n                  </div>\\n                </div>\\n              </div>\\n            </DialogDescription>\\n          </DialogHeader>\\n          <DialogFooter className=\\\"px-6 pb-6 sm:justify-start\\\">\\n            <DialogClose asChild>\\n              <Button type=\\\"button\\\" variant=\\\"outline\\\">\\n                Cancel\\n              </Button>\\n            </DialogClose>\\n            <DialogClose asChild>\\n              <Button type=\\\"button\\\">Okay</Button>\\n            </DialogClose>\\n          </DialogFooter>\\n        </ScrollArea>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-317.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-317\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-317.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Scrollable (sticky header)</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5\\\">\\n        <DialogHeader className=\\\"contents space-y-0 text-left\\\">\\n          <DialogTitle className=\\\"border-b px-6 py-4 text-base\\\">\\n            Frequently Asked Questions (FAQ)\\n          </DialogTitle>\\n          <div className=\\\"overflow-y-auto\\\">\\n            <DialogDescription asChild>\\n              <div className=\\\"px-6 py-4\\\">\\n                <div className=\\\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\\\">\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Account Management</strong>\\n                    </p>\\n                    <p>\\n                      Navigate to the registration page, provide required\\n                      information, and verify your email address. You can sign\\n                      up using your email or through social media platforms.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Password Reset Process</strong>\\n                    </p>\\n                    <p>\\n                      Users can reset their password through the account\\n                      settings page. Click &quot;Forgot Password&quot; and\\n                      follow the email verification steps to regain account\\n                      access quickly and securely.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Service Pricing Tiers</strong>\\n                    </p>\\n                    <p>\\n                      We offer three primary subscription levels designed to\\n                      meet diverse user needs: Basic (free with limited\\n                      features), Professional (monthly fee with comprehensive\\n                      access), and Enterprise (custom pricing with full platform\\n                      capabilities).\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Technical Support Channels</strong>\\n                    </p>\\n                    <p>\\n                      Customer support is accessible through multiple\\n                      communication methods including email support, live chat\\n                      during business hours, an integrated support ticket\\n                      system, and phone support specifically for\\n                      enterprise-level customers.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Data Protection Strategies</strong>\\n                    </p>\\n                    <p>\\n                      Our platform implements rigorous security measures\\n                      including 256-bit SSL encryption, regular comprehensive\\n                      security audits, strict data access controls, and\\n                      compliance with international privacy protection\\n                      standards.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Platform Compatibility</strong>\\n                    </p>\\n                    <p>\\n                      The service supports multiple device and operating system\\n                      environments, including web browsers like Chrome and\\n                      Firefox, mobile applications for iOS and Android, and\\n                      desktop applications compatible with Windows and macOS.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Subscription Management</strong>\\n                    </p>\\n                    <p>\\n                      Subscriptions can be cancelled at any time through account\\n                      settings, with pro-rated refunds available within 30 days\\n                      of payment. Both monthly and annual billing options are\\n                      provided, with special discounts offered for annual\\n                      commitments.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Payment Method Options</strong>\\n                    </p>\\n                    <p>\\n                      We accept a wide range of payment methods including major\\n                      credit cards such as Visa, MasterCard, and American\\n                      Express, digital payment platforms like PayPal, and direct\\n                      bank transfers. Regional payment options may also be\\n                      available depending on user location.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Customer Support</strong>\\n                    </p>\\n                    <p>\\n                      Our dedicated customer support team is available 24/7,\\n                      providing quick and efficient assistance to address any\\n                      inquiries or issues you may have.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Privacy Policy</strong>\\n                    </p>\\n                    <p>\\n                      Our privacy policy outlines how we collect, use, and\\n                      protect your personal data, ensuring your privacy is\\n                      protected at all times.\\n                    </p>\\n                  </div>\\n                </div>\\n              </div>\\n            </DialogDescription>\\n            <DialogFooter className=\\\"px-6 pb-6 sm:justify-start\\\">\\n              <DialogClose asChild>\\n                <Button type=\\\"button\\\">Okay</Button>\\n              </DialogClose>\\n            </DialogFooter>\\n          </div>\\n        </DialogHeader>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-318.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-318\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-318.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Scrollable (sticky footer)</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\\\">\\n        <div className=\\\"overflow-y-auto\\\">\\n          <DialogHeader className=\\\"contents space-y-0 text-left\\\">\\n            <DialogTitle className=\\\"px-6 pt-6 text-base\\\">\\n              Frequently Asked Questions (FAQ)\\n            </DialogTitle>\\n            <DialogDescription asChild>\\n              <div className=\\\"p-6\\\">\\n                <div className=\\\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\\\">\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Account Management</strong>\\n                    </p>\\n                    <p>\\n                      Navigate to the registration page, provide required\\n                      information, and verify your email address. You can sign\\n                      up using your email or through social media platforms.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Password Reset Process</strong>\\n                    </p>\\n                    <p>\\n                      Users can reset their password through the account\\n                      settings page. Click &quot;Forgot Password&quot; and\\n                      follow the email verification steps to regain account\\n                      access quickly and securely.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Service Pricing Tiers</strong>\\n                    </p>\\n                    <p>\\n                      We offer three primary subscription levels designed to\\n                      meet diverse user needs: Basic (free with limited\\n                      features), Professional (monthly fee with comprehensive\\n                      access), and Enterprise (custom pricing with full platform\\n                      capabilities).\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Technical Support Channels</strong>\\n                    </p>\\n                    <p>\\n                      Customer support is accessible through multiple\\n                      communication methods including email support, live chat\\n                      during business hours, an integrated support ticket\\n                      system, and phone support specifically for\\n                      enterprise-level customers.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Data Protection Strategies</strong>\\n                    </p>\\n                    <p>\\n                      Our platform implements rigorous security measures\\n                      including 256-bit SSL encryption, regular comprehensive\\n                      security audits, strict data access controls, and\\n                      compliance with international privacy protection\\n                      standards.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Platform Compatibility</strong>\\n                    </p>\\n                    <p>\\n                      The service supports multiple device and operating system\\n                      environments, including web browsers like Chrome and\\n                      Firefox, mobile applications for iOS and Android, and\\n                      desktop applications compatible with Windows and macOS.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Subscription Management</strong>\\n                    </p>\\n                    <p>\\n                      Subscriptions can be cancelled at any time through account\\n                      settings, with pro-rated refunds available within 30 days\\n                      of payment. Both monthly and annual billing options are\\n                      provided, with special discounts offered for annual\\n                      commitments.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Payment Method Options</strong>\\n                    </p>\\n                    <p>\\n                      We accept a wide range of payment methods including major\\n                      credit cards such as Visa, MasterCard, and American\\n                      Express, digital payment platforms like PayPal, and direct\\n                      bank transfers. Regional payment options may also be\\n                      available depending on user location.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Customer Support</strong>\\n                    </p>\\n                    <p>\\n                      Our dedicated customer support team is available 24/7,\\n                      providing quick and efficient assistance to address any\\n                      inquiries or issues you may have.\\n                    </p>\\n                  </div>\\n                  <div className=\\\"space-y-1\\\">\\n                    <p>\\n                      <strong>Privacy Policy</strong>\\n                    </p>\\n                    <p>\\n                      Our privacy policy outlines how we collect, use, and\\n                      protect your personal data, ensuring your privacy is\\n                      protected at all times.\\n                    </p>\\n                  </div>\\n                </div>\\n              </div>\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n        <DialogFooter className=\\\"border-t px-6 py-4\\\">\\n          <DialogClose asChild>\\n            <Button type=\\\"button\\\" variant=\\\"outline\\\">\\n              Cancel\\n            </Button>\\n          </DialogClose>\\n          <DialogClose asChild>\\n            <Button type=\\\"button\\\">Okay</Button>\\n          </DialogClose>\\n        </DialogFooter>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-319.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-319\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-319.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useRef, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\n\\nexport default function Component() {\\n  const [hasReadToBottom, setHasReadToBottom] = useState(false);\\n  const contentRef = useRef<HTMLDivElement>(null);\\n\\n  const handleScroll = () => {\\n    const content = contentRef.current;\\n    if (!content) return;\\n\\n    const scrollPercentage =\\n      content.scrollTop / (content.scrollHeight - content.clientHeight);\\n    if (scrollPercentage >= 0.99 && !hasReadToBottom) {\\n      setHasReadToBottom(true);\\n    }\\n  };\\n\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Terms & Conditions</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5\\\">\\n        <DialogHeader className=\\\"contents space-y-0 text-left\\\">\\n          <DialogTitle className=\\\"border-b px-6 py-4 text-base\\\">\\n            Terms & Conditions\\n          </DialogTitle>\\n          <div\\n            className=\\\"overflow-y-auto\\\"\\n            onScroll={handleScroll}\\n            ref={contentRef}\\n          >\\n            <DialogDescription asChild>\\n              <div className=\\\"px-6 py-4\\\">\\n                <div className=\\\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\\\">\\n                  <div className=\\\"space-y-4\\\">\\n                    <div className=\\\"space-y-1\\\">\\n                      <p>\\n                        <strong>Acceptance of Terms</strong>\\n                      </p>\\n                      <p>\\n                        By accessing and using this website, users agree to\\n                        comply with and be bound by these Terms of Service.\\n                        Users who do not agree with these terms should\\n                        discontinue use of the website immediately.\\n                      </p>\\n                    </div>\\n\\n                    <div className=\\\"space-y-1\\\">\\n                      <p>\\n                        <strong>User Account Responsibilities</strong>\\n                      </p>\\n                      <p>\\n                        Users are responsible for maintaining the\\n                        confidentiality of their account credentials. Any\\n                        activities occurring under a user&lsquo;s account are\\n                        the sole responsibility of the account holder. Users\\n                        must notify the website administrators immediately of\\n                        any unauthorized account access.\\n                      </p>\\n                    </div>\\n\\n                    <div className=\\\"space-y-1\\\">\\n                      <p>\\n                        <strong>Content Usage and Restrictions</strong>\\n                      </p>\\n                      <p>\\n                        The website and its original content are protected by\\n                        intellectual property laws. Users may not reproduce,\\n                        distribute, modify, create derivative works, or\\n                        commercially exploit any content without explicit\\n                        written permission from the website owners.\\n                      </p>\\n                    </div>\\n\\n                    <div className=\\\"space-y-1\\\">\\n                      <p>\\n                        <strong>Limitation of Liability</strong>\\n                      </p>\\n                      <p>\\n                        The website provides content &ldquo;as is&ldquo; without\\n                        any warranties. The website owners shall not be liable\\n                        for direct, indirect, incidental, consequential, or\\n                        punitive damages arising from user interactions with the\\n                        platform.\\n                      </p>\\n                    </div>\\n\\n                    <div className=\\\"space-y-1\\\">\\n                      <p>\\n                        <strong>User Conduct Guidelines</strong>\\n                      </p>\\n                      <ul className=\\\"list-disc pl-6\\\">\\n                        <li>Not upload harmful or malicious content</li>\\n                        <li>Respect the rights of other users</li>\\n                        <li>\\n                          Avoid activities that could disrupt website\\n                          functionality\\n                        </li>\\n                        <li>\\n                          Comply with applicable local and international laws\\n                        </li>\\n                      </ul>\\n                    </div>\\n\\n                    <div className=\\\"space-y-1\\\">\\n                      <p>\\n                        <strong>Modifications to Terms</strong>\\n                      </p>\\n                      <p>\\n                        The website reserves the right to modify these terms at\\n                        any time. Continued use of the website after changes\\n                        constitutes acceptance of the new terms.\\n                      </p>\\n                    </div>\\n\\n                    <div className=\\\"space-y-1\\\">\\n                      <p>\\n                        <strong>Termination Clause</strong>\\n                      </p>\\n                      <p>\\n                        The website may terminate or suspend user access without\\n                        prior notice for violations of these terms or for any\\n                        other reason deemed appropriate by the administration.\\n                      </p>\\n                    </div>\\n\\n                    <div className=\\\"space-y-1\\\">\\n                      <p>\\n                        <strong>Governing Law</strong>\\n                      </p>\\n                      <p>\\n                        These terms are governed by the laws of the jurisdiction\\n                        where the website is primarily operated, without regard\\n                        to conflict of law principles.\\n                      </p>\\n                    </div>\\n                  </div>\\n                </div>\\n              </div>\\n            </DialogDescription>\\n          </div>\\n        </DialogHeader>\\n        <DialogFooter className=\\\"border-t px-6 py-4 sm:items-center\\\">\\n          {!hasReadToBottom && (\\n            <span className=\\\"grow text-muted-foreground text-xs max-sm:text-center\\\">\\n              Read all terms before accepting.\\n            </span>\\n          )}\\n          <DialogClose asChild>\\n            <Button type=\\\"button\\\" variant=\\\"outline\\\">\\n              Cancel\\n            </Button>\\n          </DialogClose>\\n          <DialogClose asChild>\\n            <Button disabled={!hasReadToBottom} type=\\\"button\\\">\\n              I agree\\n            </Button>\\n          </DialogClose>\\n        </DialogFooter>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-32.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-32\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-32.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"group relative\\\">\\n      <label\\n        className=\\\"-translate-y-1/2 absolute top-1/2 block origin-start cursor-text px-1 text-muted-foreground/70 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:font-medium group-focus-within:text-foreground group-focus-within:text-xs has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground has-[+input:not(:placeholder-shown)]:text-xs\\\"\\n        htmlFor={id}\\n      >\\n        <span className=\\\"inline-flex bg-background px-2\\\">\\n          Input with label animation\\n        </span>\\n      </label>\\n      <Input id={id} placeholder=\\\" \\\" type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-320.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-320\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-320.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CircleAlertIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nconst PROJECT_NAME = \\\"coss-ui\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [inputValue, setInputValue] = useState(\\\"\\\");\\n\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Delete project</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-9 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <CircleAlertIcon className=\\\"opacity-80\\\" size={16} />\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"sm:text-center\\\">\\n              Final confirmation\\n            </DialogTitle>\\n            <DialogDescription className=\\\"sm:text-center\\\">\\n              This action cannot be undone. To confirm, please enter the project\\n              name <span className=\\\"text-foreground\\\">coss-ui</span>.\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        <form className=\\\"space-y-5\\\">\\n          <div className=\\\"*:not-first:mt-2\\\">\\n            <Label htmlFor={id}>Project name</Label>\\n            <Input\\n              id={id}\\n              onChange={(e) => setInputValue(e.target.value)}\\n              placeholder=\\\"Type coss-ui to confirm\\\"\\n              type=\\\"text\\\"\\n              value={inputValue}\\n            />\\n          </div>\\n          <DialogFooter>\\n            <DialogClose asChild>\\n              <Button className=\\\"flex-1\\\" type=\\\"button\\\" variant=\\\"outline\\\">\\n                Cancel\\n              </Button>\\n            </DialogClose>\\n            <Button\\n              className=\\\"flex-1\\\"\\n              disabled={inputValue !== PROJECT_NAME}\\n              type=\\\"button\\\"\\n            >\\n              Delete\\n            </Button>\\n          </DialogFooter>\\n        </form>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"delete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-321.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-321\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-321.tsx\",\n      \"content\": \"import { MailIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Newsletter</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <div className=\\\"mb-2 flex flex-col items-center gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-11 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <svg\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"stroke-zinc-800 dark:stroke-zinc-100\\\"\\n              height=\\\"20\\\"\\n              viewBox=\\\"0 0 32 32\\\"\\n              width=\\\"20\\\"\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n            >\\n              <circle cx=\\\"16\\\" cy=\\\"16\\\" fill=\\\"none\\\" r=\\\"12\\\" strokeWidth=\\\"8\\\" />\\n            </svg>\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"sm:text-center\\\">\\n              Never miss an update\\n            </DialogTitle>\\n            <DialogDescription className=\\\"sm:text-center\\\">\\n              Subscribe to receive news and special offers.\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        <form className=\\\"space-y-5\\\">\\n          <div className=\\\"*:not-first:mt-2\\\">\\n            <div className=\\\"relative\\\">\\n              <Input\\n                aria-label=\\\"Email\\\"\\n                className=\\\"peer ps-9\\\"\\n                id=\\\"dialog-subscribe\\\"\\n                placeholder=\\\"hi@yourcompany.com\\\"\\n                type=\\\"email\\\"\\n              />\\n              <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n                <MailIcon aria-hidden=\\\"true\\\" size={16} />\\n              </div>\\n            </div>\\n          </div>\\n          <Button className=\\\"w-full\\\" type=\\\"button\\\">\\n            Subscribe\\n          </Button>\\n        </form>\\n\\n        <p className=\\\"text-center text-muted-foreground text-xs\\\">\\n          By subscribing you agree to our{\\\" \\\"}\\n          <a className=\\\"underline hover:no-underline\\\" href=\\\"#\\\">\\n            Privacy Policy\\n          </a>\\n          .\\n        </p>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"newsletter\",\n      \"subscribe\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-322.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-322\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-322.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Feedback</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <DialogHeader>\\n          <DialogTitle>Send us feedback</DialogTitle>\\n          <DialogDescription>\\n            Watch{\\\" \\\"}\\n            <a className=\\\"text-foreground hover:underline\\\" href=\\\"#\\\">\\n              tutorials\\n            </a>\\n            , read coss.com&lsquo;s{\\\" \\\"}\\n            <a className=\\\"text-foreground hover:underline\\\" href=\\\"#\\\">\\n              documentation\\n            </a>\\n            , or join our{\\\" \\\"}\\n            <a className=\\\"text-foreground hover:underline\\\" href=\\\"#\\\">\\n              Discord\\n            </a>{\\\" \\\"}\\n            for community help.\\n          </DialogDescription>\\n        </DialogHeader>\\n        <form className=\\\"space-y-5\\\">\\n          <Textarea\\n            aria-label=\\\"Send feedback\\\"\\n            id=\\\"feedback\\\"\\n            placeholder=\\\"How can we improve coss.com?\\\"\\n          />\\n          <div className=\\\"flex flex-col sm:flex-row sm:justify-end\\\">\\n            <Button type=\\\"button\\\">Send feedback</Button>\\n          </div>\\n        </form>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"feedback\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-323.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-323\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-323.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Rating</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"flex flex-col gap-0 p-0 [&>button:last-child]:top-3.5\\\">\\n        <DialogHeader className=\\\"contents space-y-0 text-left\\\">\\n          <DialogTitle className=\\\"border-b px-6 py-4 text-base\\\">\\n            Help us improve\\n          </DialogTitle>\\n        </DialogHeader>\\n        <div className=\\\"px-6 py-4\\\">\\n          <form className=\\\"space-y-5\\\">\\n            <div className=\\\"space-y-4\\\">\\n              <div>\\n                <fieldset className=\\\"space-y-4\\\">\\n                  <legend className=\\\"font-semibold text-foreground text-lg leading-none\\\">\\n                    How hard was it to set up your account?\\n                  </legend>\\n                  <RadioGroup className=\\\"-space-x-px flex gap-0 rounded-md shadow-xs\\\">\\n                    {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((number) => (\\n                      <label\\n                        className=\\\"relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm outline-none transition-[color,box-shadow] first:rounded-s-md last:rounded-e-md has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n                        key={number}\\n                      >\\n                        <RadioGroupItem\\n                          className=\\\"sr-only after:absolute after:inset-0\\\"\\n                          id={`radio-17-r${number}`}\\n                          value={number.toString()}\\n                        />\\n                        {number}\\n                      </label>\\n                    ))}\\n                  </RadioGroup>\\n                </fieldset>\\n                <div className=\\\"mt-2 flex justify-between text-muted-foreground text-xs\\\">\\n                  <p>Very easy</p>\\n                  <p>Very dificult</p>\\n                </div>\\n              </div>\\n\\n              <div className=\\\"*:not-first:mt-2\\\">\\n                <Label>Why did you give this rating?</Label>\\n                <Textarea\\n                  aria-label=\\\"Send feedback\\\"\\n                  id=\\\"feedback\\\"\\n                  placeholder=\\\"How can we improve coss.com?\\\"\\n                />\\n              </div>\\n            </div>\\n            <Button className=\\\"w-full\\\" type=\\\"button\\\">\\n              Send feedback\\n            </Button>\\n          </form>\\n        </div>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"rating\",\n      \"feedback\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-324.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-324\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"input-otp\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-324.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { OTPInput, type SlotProps } from \\\"input-otp\\\";\\nimport { useEffect, useRef, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\n\\nconst CORRECT_CODE = \\\"6548\\\";\\n\\nexport default function Component() {\\n  const [value, setValue] = useState(\\\"\\\");\\n  const [hasGuessed, setHasGuessed] = useState<undefined | boolean>(undefined);\\n  const inputRef = useRef<HTMLInputElement>(null);\\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\\n\\n  useEffect(() => {\\n    if (hasGuessed) {\\n      closeButtonRef.current?.focus();\\n    }\\n  }, [hasGuessed]);\\n\\n  async function onSubmit(e?: React.FormEvent<HTMLFormElement>) {\\n    e?.preventDefault?.();\\n\\n    inputRef.current?.select();\\n    await new Promise((r) => setTimeout(r, 1_00));\\n\\n    setHasGuessed(value === CORRECT_CODE);\\n\\n    setValue(\\\"\\\");\\n    setTimeout(() => {\\n      inputRef.current?.blur();\\n    }, 20);\\n  }\\n\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">OTP code</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-11 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <svg\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"stroke-zinc-800 dark:stroke-zinc-100\\\"\\n              height=\\\"20\\\"\\n              viewBox=\\\"0 0 32 32\\\"\\n              width=\\\"20\\\"\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n            >\\n              <circle cx=\\\"16\\\" cy=\\\"16\\\" fill=\\\"none\\\" r=\\\"12\\\" strokeWidth=\\\"8\\\" />\\n            </svg>\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"sm:text-center\\\">\\n              {hasGuessed ? \\\"Code verified!\\\" : \\\"Enter confirmation code\\\"}\\n            </DialogTitle>\\n            <DialogDescription className=\\\"sm:text-center\\\">\\n              {hasGuessed\\n                ? \\\"Your code has been successfully verified.\\\"\\n                : `Check your email and enter the code - Try ${CORRECT_CODE}`}\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        {hasGuessed ? (\\n          <div className=\\\"text-center\\\">\\n            <DialogClose asChild>\\n              <Button ref={closeButtonRef} type=\\\"button\\\">\\n                Close\\n              </Button>\\n            </DialogClose>\\n          </div>\\n        ) : (\\n          <div className=\\\"space-y-4\\\">\\n            <div className=\\\"flex justify-center\\\">\\n              <OTPInput\\n                containerClassName=\\\"flex items-center gap-3 has-disabled:opacity-50\\\"\\n                id=\\\"cofirmation-code\\\"\\n                maxLength={4}\\n                onChange={setValue}\\n                onComplete={onSubmit}\\n                onFocus={() => setHasGuessed(undefined)}\\n                ref={inputRef}\\n                render={({ slots }) => (\\n                  <div className=\\\"flex gap-2\\\">\\n                    {slots.map((slot, idx) => (\\n                      <Slot key={String(idx)} {...slot} />\\n                    ))}\\n                  </div>\\n                )}\\n                value={value}\\n              />\\n            </div>\\n            {hasGuessed === false && (\\n              <p\\n                aria-live=\\\"polite\\\"\\n                className=\\\"text-center text-muted-foreground text-xs\\\"\\n                role=\\\"alert\\\"\\n              >\\n                Invalid code. Please try again.\\n              </p>\\n            )}\\n            <p className=\\\"text-center text-sm\\\">\\n              <a className=\\\"underline hover:no-underline\\\" href=\\\"#\\\">\\n                Resend code\\n              </a>\\n            </p>\\n          </div>\\n        )}\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\\nfunction Slot(props: SlotProps) {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex size-9 items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow]\\\",\\n        { \\\"z-10 border-ring ring-[3px] ring-ring/50\\\": props.isActive },\\n      )}\\n    >\\n      {props.char !== null && <div>{props.char}</div>}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"otp\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-325.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-325\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-325.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Sign up</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-11 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <svg\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"stroke-zinc-800 dark:stroke-zinc-100\\\"\\n              height=\\\"20\\\"\\n              viewBox=\\\"0 0 32 32\\\"\\n              width=\\\"20\\\"\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n            >\\n              <circle cx=\\\"16\\\" cy=\\\"16\\\" fill=\\\"none\\\" r=\\\"12\\\" strokeWidth=\\\"8\\\" />\\n            </svg>\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"sm:text-center\\\">\\n              Sign up coss.com\\n            </DialogTitle>\\n            <DialogDescription className=\\\"sm:text-center\\\">\\n              We just need a few details to get you started.\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        <form className=\\\"space-y-5\\\">\\n          <div className=\\\"space-y-4\\\">\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label htmlFor={`${id}-name`}>Full name</Label>\\n              <Input\\n                id={`${id}-name`}\\n                placeholder=\\\"Matt Welsh\\\"\\n                required\\n                type=\\\"text\\\"\\n              />\\n            </div>\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label htmlFor={`${id}-email`}>Email</Label>\\n              <Input\\n                id={`${id}-email`}\\n                placeholder=\\\"hi@yourcompany.com\\\"\\n                required\\n                type=\\\"email\\\"\\n              />\\n            </div>\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label htmlFor={`${id}-password`}>Password</Label>\\n              <Input\\n                id={`${id}-password`}\\n                placeholder=\\\"Enter your password\\\"\\n                required\\n                type=\\\"password\\\"\\n              />\\n            </div>\\n          </div>\\n          <Button className=\\\"w-full\\\" type=\\\"button\\\">\\n            Sign up\\n          </Button>\\n        </form>\\n\\n        <div className=\\\"flex items-center gap-3 before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border\\\">\\n          <span className=\\\"text-muted-foreground text-xs\\\">Or</span>\\n        </div>\\n\\n        <Button variant=\\\"outline\\\">Continue with Google</Button>\\n\\n        <p className=\\\"text-center text-muted-foreground text-xs\\\">\\n          By signing up you agree to our{\\\" \\\"}\\n          <a className=\\\"underline hover:no-underline\\\" href=\\\"#\\\">\\n            Terms\\n          </a>\\n          .\\n        </p>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"signup\",\n      \"authentication\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-326.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-326\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-326.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Sign in</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <div className=\\\"flex flex-col items-center gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-11 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <svg\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"stroke-zinc-800 dark:stroke-zinc-100\\\"\\n              height=\\\"20\\\"\\n              viewBox=\\\"0 0 32 32\\\"\\n              width=\\\"20\\\"\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n            >\\n              <circle cx=\\\"16\\\" cy=\\\"16\\\" fill=\\\"none\\\" r=\\\"12\\\" strokeWidth=\\\"8\\\" />\\n            </svg>\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"sm:text-center\\\">Welcome back</DialogTitle>\\n            <DialogDescription className=\\\"sm:text-center\\\">\\n              Enter your credentials to login to your account.\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        <form className=\\\"space-y-5\\\">\\n          <div className=\\\"space-y-4\\\">\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label htmlFor={`${id}-email`}>Email</Label>\\n              <Input\\n                id={`${id}-email`}\\n                placeholder=\\\"hi@yourcompany.com\\\"\\n                required\\n                type=\\\"email\\\"\\n              />\\n            </div>\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label htmlFor={`${id}-password`}>Password</Label>\\n              <Input\\n                id={`${id}-password`}\\n                placeholder=\\\"Enter your password\\\"\\n                required\\n                type=\\\"password\\\"\\n              />\\n            </div>\\n          </div>\\n          <div className=\\\"flex justify-between gap-2\\\">\\n            <div className=\\\"flex items-center gap-2\\\">\\n              <Checkbox id={`${id}-remember`} />\\n              <Label\\n                className=\\\"font-normal text-muted-foreground\\\"\\n                htmlFor={`${id}-remember`}\\n              >\\n                Remember me\\n              </Label>\\n            </div>\\n            <a className=\\\"text-sm underline hover:no-underline\\\" href=\\\"#\\\">\\n              Forgot password?\\n            </a>\\n          </div>\\n          <Button className=\\\"w-full\\\" type=\\\"button\\\">\\n            Sign in\\n          </Button>\\n        </form>\\n\\n        <div className=\\\"flex items-center gap-3 before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border\\\">\\n          <span className=\\\"text-muted-foreground text-xs\\\">Or</span>\\n        </div>\\n\\n        <Button variant=\\\"outline\\\">Login with Google</Button>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"login\",\n      \"authentication\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-327.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-327\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-327.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon, UserRoundPlusIcon } from \\\"lucide-react\\\";\\nimport { useId, useRef, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [emails, setEmails] = useState([\\n    \\\"mark@yourcompany.com\\\",\\n    \\\"jane@yourcompany.com\\\",\\n    \\\"\\\",\\n  ]);\\n  const [copied, setCopied] = useState<boolean>(false);\\n  const inputRef = useRef<HTMLInputElement>(null);\\n  const lastInputRef = useRef<HTMLInputElement>(null);\\n\\n  const addEmail = () => {\\n    setEmails([...emails, \\\"\\\"]);\\n  };\\n\\n  const handleEmailChange = (index: number, value: string) => {\\n    const newEmails = [...emails];\\n    newEmails[index] = value;\\n    setEmails(newEmails);\\n  };\\n\\n  const handleCopy = () => {\\n    if (inputRef.current) {\\n      navigator.clipboard.writeText(inputRef.current.value);\\n      setCopied(true);\\n      setTimeout(() => setCopied(false), 1500);\\n    }\\n  };\\n\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Invite members</Button>\\n      </DialogTrigger>\\n      <DialogContent\\n        onOpenAutoFocus={(e) => {\\n          e.preventDefault();\\n          lastInputRef.current?.focus();\\n        }}\\n      >\\n        <div className=\\\"flex flex-col gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-11 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <UserRoundPlusIcon className=\\\"opacity-80\\\" size={16} />\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"text-left\\\">Invite team members</DialogTitle>\\n            <DialogDescription className=\\\"text-left\\\">\\n              Invite teammates to earn free components.\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        <form className=\\\"space-y-5\\\">\\n          <div className=\\\"space-y-4\\\">\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label>Invite via email</Label>\\n              <div className=\\\"space-y-3\\\">\\n                {emails.map((email, index) => (\\n                  <Input\\n                    id={`team-email-${index + 1}`}\\n                    key={email}\\n                    onChange={(e) => handleEmailChange(index, e.target.value)}\\n                    placeholder=\\\"hi@yourcompany.com\\\"\\n                    ref={index === emails.length - 1 ? lastInputRef : undefined}\\n                    type=\\\"email\\\"\\n                    value={email}\\n                  />\\n                ))}\\n              </div>\\n            </div>\\n            <button\\n              className=\\\"text-sm underline hover:no-underline\\\"\\n              onClick={addEmail}\\n              type=\\\"button\\\"\\n            >\\n              + Add another\\n            </button>\\n          </div>\\n          <Button className=\\\"w-full\\\" type=\\\"button\\\">\\n            Send invites\\n          </Button>\\n        </form>\\n\\n        <hr className=\\\"my-1 border-t\\\" />\\n\\n        <div className=\\\"*:not-first:mt-2\\\">\\n          <Label htmlFor={id}>Invite via magic link</Label>\\n          <div className=\\\"relative\\\">\\n            <Input\\n              className=\\\"pe-9\\\"\\n              defaultValue=\\\"https://coss.com/ui/refer/87689\\\"\\n              id={id}\\n              readOnly\\n              ref={inputRef}\\n              type=\\\"text\\\"\\n            />\\n            <TooltipProvider delayDuration={0}>\\n              <Tooltip>\\n                <TooltipTrigger asChild>\\n                  <button\\n                    aria-label={copied ? \\\"Copied\\\" : \\\"Copy to clipboard\\\"}\\n                    className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\\\"\\n                    disabled={copied}\\n                    onClick={handleCopy}\\n                    type=\\\"button\\\"\\n                  >\\n                    <div\\n                      className={cn(\\n                        \\\"transition-all\\\",\\n                        copied ? \\\"scale-100 opacity-100\\\" : \\\"scale-0 opacity-0\\\",\\n                      )}\\n                    >\\n                      <CheckIcon\\n                        aria-hidden=\\\"true\\\"\\n                        className=\\\"stroke-emerald-500\\\"\\n                        size={16}\\n                      />\\n                    </div>\\n                    <div\\n                      className={cn(\\n                        \\\"absolute transition-all\\\",\\n                        copied ? \\\"scale-0 opacity-0\\\" : \\\"scale-100 opacity-100\\\",\\n                      )}\\n                    >\\n                      <CopyIcon aria-hidden=\\\"true\\\" size={16} />\\n                    </div>\\n                  </button>\\n                </TooltipTrigger>\\n                <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n                  Copy to clipboard\\n                </TooltipContent>\\n              </Tooltip>\\n            </TooltipProvider>\\n          </div>\\n        </div>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"form\",\n      \"user\",\n      \"team\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-328.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-328\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-payment-inputs\"\n  ],\n  \"devDependencies\": [\n    \"@types/react-payment-inputs\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-328.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CreditCardIcon, WalletIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\nimport { usePaymentInputs } from \\\"react-payment-inputs\\\";\\nimport images, { type CardImages } from \\\"react-payment-inputs/images\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const {\\n    meta,\\n    getCardNumberProps,\\n    getExpiryDateProps,\\n    getCVCProps,\\n    getCardImageProps,\\n  } = usePaymentInputs();\\n\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Card details</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <div className=\\\"flex flex-col gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-11 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <WalletIcon className=\\\"opacity-80\\\" size={16} />\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"text-left\\\">Update your card</DialogTitle>\\n            <DialogDescription className=\\\"text-left\\\">\\n              Your new card will replace your current card.\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        <form className=\\\"space-y-5\\\">\\n          <div className=\\\"space-y-4\\\">\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label htmlFor={`name-${id}`}>Name on card</Label>\\n              <Input id={`name-${id}`} required type=\\\"text\\\" />\\n            </div>\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label htmlFor={`number-${id}`}>Card Number</Label>\\n              <div className=\\\"relative\\\">\\n                <Input\\n                  {...getCardNumberProps()}\\n                  className=\\\"peer pe-9 [direction:inherit]\\\"\\n                  id={`number-${id}`}\\n                />\\n                <div className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n                  {meta.cardType ? (\\n                    <svg\\n                      className=\\\"overflow-hidden rounded-sm\\\"\\n                      {...getCardImageProps({\\n                        images: images as unknown as CardImages,\\n                      })}\\n                      width={20}\\n                    />\\n                  ) : (\\n                    <CreditCardIcon aria-hidden=\\\"true\\\" size={16} />\\n                  )}\\n                </div>\\n              </div>\\n            </div>\\n            <div className=\\\"flex gap-4\\\">\\n              <div className=\\\"flex-1 space-y-2\\\">\\n                <Label htmlFor={`expiry-${id}`}>Expiry date</Label>\\n                <Input\\n                  className=\\\"[direction:inherit]\\\"\\n                  {...getExpiryDateProps()}\\n                  id={`expiry-${id}`}\\n                />\\n              </div>\\n              <div className=\\\"flex-1 space-y-2\\\">\\n                <Label htmlFor={`cvc-${id}`}>CVC</Label>\\n                <Input\\n                  className=\\\"[direction:inherit]\\\"\\n                  {...getCVCProps()}\\n                  id={`cvc-${id}`}\\n                />\\n              </div>\\n            </div>\\n          </div>\\n          <div className=\\\"flex items-center gap-2\\\">\\n            <Checkbox id={`primary-${id}`} />\\n            <Label\\n              className=\\\"font-normal text-muted-foreground\\\"\\n              htmlFor={`primary-${id}`}\\n            >\\n              Set as default payment method\\n            </Label>\\n          </div>\\n          <Button className=\\\"w-full\\\" type=\\\"button\\\">\\n            Update card\\n          </Button>\\n        </form>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"checkout\",\n      \"payment\",\n      \"credit card\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-329.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-329\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-payment-inputs\"\n  ],\n  \"devDependencies\": [\n    \"@types/react-payment-inputs\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-329.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CreditCardIcon, StoreIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useId, useRef, useState } from \\\"react\\\";\\nimport { usePaymentInputs } from \\\"react-payment-inputs\\\";\\nimport images, { type CardImages } from \\\"react-payment-inputs/images\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const {\\n    meta,\\n    getCardNumberProps,\\n    getExpiryDateProps,\\n    getCVCProps,\\n    getCardImageProps,\\n  } = usePaymentInputs();\\n  const couponInputRef = useRef<HTMLInputElement>(null);\\n  const [showCouponInput, setShowCouponInput] = useState(false);\\n  const [couponCode, setCouponCode] = useState(\\\"\\\");\\n\\n  // Auto-focus the coupon input when it's shown\\n  useEffect(() => {\\n    if (showCouponInput && couponInputRef.current) {\\n      couponInputRef.current.focus();\\n    }\\n  }, [showCouponInput]);\\n\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Checkout</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <div className=\\\"mb-2 flex flex-col gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-11 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <StoreIcon className=\\\"opacity-80\\\" size={16} />\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"text-left\\\">Confirm and pay</DialogTitle>\\n            <DialogDescription className=\\\"text-left\\\">\\n              Pay securely and cancel any time.\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        <form className=\\\"space-y-5\\\">\\n          <div className=\\\"space-y-4\\\">\\n            <RadioGroup className=\\\"grid-cols-2\\\" defaultValue=\\\"yearly\\\">\\n              {/* Monthly */}\\n              <label className=\\\"relative flex cursor-pointer flex-col gap-1 rounded-md border border-input px-4 py-3 shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\">\\n                <RadioGroupItem\\n                  className=\\\"sr-only after:absolute after:inset-0\\\"\\n                  id=\\\"radio-monthly\\\"\\n                  value=\\\"monthly\\\"\\n                />\\n                <p className=\\\"font-medium text-foreground text-sm\\\">Monthly</p>\\n                <p className=\\\"text-muted-foreground text-sm\\\">$32/month</p>\\n              </label>\\n              {/* Yearly */}\\n              <label className=\\\"relative flex cursor-pointer flex-col gap-1 rounded-md border border-input px-4 py-3 shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\">\\n                <RadioGroupItem\\n                  className=\\\"sr-only after:absolute after:inset-0\\\"\\n                  id=\\\"radio-yearly\\\"\\n                  value=\\\"yearly\\\"\\n                />\\n                <div className=\\\"inline-flex items-start justify-between gap-2\\\">\\n                  <p className=\\\"font-medium text-foreground text-sm\\\">Yearly</p>\\n                  <Badge>Popular</Badge>\\n                </div>\\n                <p className=\\\"text-muted-foreground text-sm\\\">$320/month</p>\\n              </label>\\n            </RadioGroup>\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <Label htmlFor={`name-${id}`}>Name on card</Label>\\n              <Input id={`name-${id}`} required type=\\\"text\\\" />\\n            </div>\\n            <div className=\\\"*:not-first:mt-2\\\">\\n              <legend className=\\\"font-medium text-foreground text-sm\\\">\\n                Card Details\\n              </legend>\\n              <div className=\\\"rounded-md shadow-xs\\\">\\n                <div className=\\\"relative focus-within:z-10\\\">\\n                  <Input\\n                    className=\\\"peer rounded-b-none pe-9 shadow-none [direction:inherit]\\\"\\n                    {...getCardNumberProps()}\\n                  />\\n                  <div className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n                    {meta.cardType ? (\\n                      <svg\\n                        className=\\\"overflow-hidden rounded-sm\\\"\\n                        {...getCardImageProps({\\n                          images: images as unknown as CardImages,\\n                        })}\\n                        width={20}\\n                      />\\n                    ) : (\\n                      <CreditCardIcon aria-hidden=\\\"true\\\" size={16} />\\n                    )}\\n                  </div>\\n                </div>\\n                <div className=\\\"-mt-px flex\\\">\\n                  <div className=\\\"min-w-0 flex-1 focus-within:z-10\\\">\\n                    <Input\\n                      className=\\\"rounded-e-none rounded-t-none shadow-none [direction:inherit]\\\"\\n                      {...getExpiryDateProps()}\\n                    />\\n                  </div>\\n                  <div className=\\\"-ms-px min-w-0 flex-1 focus-within:z-10\\\">\\n                    <Input\\n                      className=\\\"rounded-s-none rounded-t-none shadow-none [direction:inherit]\\\"\\n                      {...getCVCProps()}\\n                    />\\n                  </div>\\n                </div>\\n              </div>\\n            </div>\\n            {!showCouponInput ? (\\n              <button\\n                className=\\\"text-sm underline hover:no-underline\\\"\\n                onClick={() => setShowCouponInput(true)}\\n                type=\\\"button\\\"\\n              >\\n                + Add coupon\\n              </button>\\n            ) : (\\n              <div className=\\\"*:not-first:mt-2\\\">\\n                <Label htmlFor={`coupon-${id}`}>Coupon code</Label>\\n                <Input\\n                  id={`coupon-${id}`}\\n                  onChange={(e) => setCouponCode(e.target.value)}\\n                  placeholder=\\\"Enter your code\\\"\\n                  ref={couponInputRef}\\n                  value={couponCode}\\n                />\\n              </div>\\n            )}\\n          </div>\\n          <Button className=\\\"w-full\\\" type=\\\"button\\\">\\n            Subscribe\\n          </Button>\\n        </form>\\n\\n        <p className=\\\"text-center text-muted-foreground text-xs\\\">\\n          Payments are non-refundable. Cancel anytime.\\n        </p>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"checkout\",\n      \"payment\",\n      \"credit card\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-33.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-33\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-33.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative rounded-md border border-input bg-background shadow-xs outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 has-[input:is(:disabled)]:*:pointer-events-none dark:has-aria-invalid:ring-destructive/40\\\">\\n      <label\\n        className=\\\"block px-3 pt-2 font-medium text-foreground text-xs\\\"\\n        htmlFor={id}\\n      >\\n        Input with inset label\\n      </label>\\n      <input\\n        className=\\\"flex h-10 w-full bg-transparent px-3 pb-2 text-foreground text-sm placeholder:text-muted-foreground/70 focus-visible:outline-none\\\"\\n        disabled\\n        id={id}\\n        placeholder=\\\"Email\\\"\\n        type=\\\"email\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-330.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-330\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-330.tsx\",\n      \"content\": \"import { CheckIcon, RefreshCcwIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Change plan</Button>\\n      </DialogTrigger>\\n      <DialogContent>\\n        <div className=\\\"mb-2 flex flex-col gap-2\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-11 shrink-0 items-center justify-center rounded-full border\\\"\\n          >\\n            <RefreshCcwIcon className=\\\"opacity-80\\\" size={16} />\\n          </div>\\n          <DialogHeader>\\n            <DialogTitle className=\\\"text-left\\\">Change your plan</DialogTitle>\\n            <DialogDescription className=\\\"text-left\\\">\\n              Pick one of the following plans.\\n            </DialogDescription>\\n          </DialogHeader>\\n        </div>\\n\\n        <form className=\\\"space-y-5\\\">\\n          <RadioGroup className=\\\"gap-2\\\" defaultValue=\\\"2\\\">\\n            {/* Radio card #1 */}\\n            <div className=\\\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\\\">\\n              <RadioGroupItem\\n                aria-describedby={`${id}-1-description`}\\n                className=\\\"order-1 after:absolute after:inset-0\\\"\\n                id={`${id}-1`}\\n                value=\\\"1\\\"\\n              />\\n              <div className=\\\"grid grow gap-1\\\">\\n                <Label htmlFor={`${id}-1`}>Essential</Label>\\n                <p\\n                  className=\\\"text-muted-foreground text-xs\\\"\\n                  id={`${id}-1-description`}\\n                >\\n                  $4 per member/month\\n                </p>\\n              </div>\\n            </div>\\n            {/* Radio card #2 */}\\n            <div className=\\\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\\\">\\n              <RadioGroupItem\\n                aria-describedby={`${id}-2-description`}\\n                className=\\\"order-1 after:absolute after:inset-0\\\"\\n                id={`${id}-2`}\\n                value=\\\"2\\\"\\n              />\\n              <div className=\\\"grid grow gap-1\\\">\\n                <Label htmlFor={`${id}-2`}>Standard</Label>\\n                <p\\n                  className=\\\"text-muted-foreground text-xs\\\"\\n                  id={`${id}-2-description`}\\n                >\\n                  $19 per member/month\\n                </p>\\n              </div>\\n            </div>\\n            {/* Radio card #3 */}\\n            <div className=\\\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\\\">\\n              <RadioGroupItem\\n                aria-describedby={`${id}-3-description`}\\n                className=\\\"order-1 after:absolute after:inset-0\\\"\\n                id={`${id}-3`}\\n                value=\\\"3\\\"\\n              />\\n              <div className=\\\"grid grow gap-1\\\">\\n                <Label htmlFor={`${id}-3`}>Enterprise</Label>\\n                <p\\n                  className=\\\"text-muted-foreground text-xs\\\"\\n                  id={`${id}-3-description`}\\n                >\\n                  $32 per member/month\\n                </p>\\n              </div>\\n            </div>\\n          </RadioGroup>\\n\\n          <div className=\\\"space-y-3\\\">\\n            <p>\\n              <strong className=\\\"font-medium text-sm\\\">Features include:</strong>\\n            </p>\\n            <ul className=\\\"space-y-2 text-muted-foreground text-sm\\\">\\n              <li className=\\\"flex gap-2\\\">\\n                <CheckIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"mt-0.5 shrink-0 text-primary\\\"\\n                  size={16}\\n                />\\n                Create unlimited projects.\\n              </li>\\n              <li className=\\\"flex gap-2\\\">\\n                <CheckIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"mt-0.5 shrink-0 text-primary\\\"\\n                  size={16}\\n                />\\n                Remove watermarks.\\n              </li>\\n              <li className=\\\"flex gap-2\\\">\\n                <CheckIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"mt-0.5 shrink-0 text-primary\\\"\\n                  size={16}\\n                />\\n                Add unlimited users and free viewers.\\n              </li>\\n              <li className=\\\"flex gap-2\\\">\\n                <CheckIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"mt-0.5 shrink-0 text-primary\\\"\\n                  size={16}\\n                />\\n                Upload unlimited files.\\n              </li>\\n              <li className=\\\"flex gap-2\\\">\\n                <CheckIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"mt-0.5 shrink-0 text-primary\\\"\\n                  size={16}\\n                />\\n                7-day money back guarantee.\\n              </li>\\n              <li className=\\\"flex gap-2\\\">\\n                <CheckIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"mt-0.5 shrink-0 text-primary\\\"\\n                  size={16}\\n                />\\n                Advanced permissions.\\n              </li>\\n            </ul>\\n          </div>\\n\\n          <div className=\\\"grid gap-2\\\">\\n            <Button className=\\\"w-full\\\" type=\\\"button\\\">\\n              Change plan\\n            </Button>\\n            <DialogClose asChild>\\n              <Button className=\\\"w-full\\\" type=\\\"button\\\" variant=\\\"ghost\\\">\\n                Cancel\\n              </Button>\\n            </DialogClose>\\n          </div>\\n        </form>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"user\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-331.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-331\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-331.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, ImagePlusIcon, XIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { useCharacterLimit } from \\\"@/registry/default/hooks/use-character-limit\\\";\\nimport { useFileUpload } from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\n// Pretend we have initial image files\\nconst initialBgImage = [\\n  {\\n    id: \\\"profile-bg-123456789\\\",\\n    name: \\\"profile-bg.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"/origin/profile-bg.jpg\\\",\\n  },\\n];\\n\\nconst initialAvatarImage = [\\n  {\\n    id: \\\"avatar-123456789\\\",\\n    name: \\\"avatar-72-01.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"/origin/avatar-72-01.jpg\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  const maxLength = 180;\\n  const {\\n    value,\\n    characterCount,\\n    handleChange,\\n    maxLength: limit,\\n  } = useCharacterLimit({\\n    initialValue:\\n      \\\"Hey, I am Margaret, a web developer who loves turning ideas into amazing websites!\\\",\\n    maxLength,\\n  });\\n\\n  return (\\n    <Dialog>\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Edit profile</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"flex flex-col gap-0 overflow-y-visible p-0 sm:max-w-lg [&>button:last-child]:top-3.5\\\">\\n        <DialogHeader className=\\\"contents space-y-0 text-left\\\">\\n          <DialogTitle className=\\\"border-b px-6 py-4 text-base\\\">\\n            Edit profile\\n          </DialogTitle>\\n        </DialogHeader>\\n        <DialogDescription className=\\\"sr-only\\\">\\n          Make changes to your profile here. You can change your photo and set a\\n          username.\\n        </DialogDescription>\\n        <div className=\\\"overflow-y-auto\\\">\\n          <ProfileBg />\\n          <Avatar />\\n          <div className=\\\"px-6 pt-4 pb-6\\\">\\n            <form className=\\\"space-y-4\\\">\\n              <div className=\\\"flex flex-col gap-4 sm:flex-row\\\">\\n                <div className=\\\"flex-1 space-y-2\\\">\\n                  <Label htmlFor={`${id}-first-name`}>First name</Label>\\n                  <Input\\n                    defaultValue=\\\"Margaret\\\"\\n                    id={`${id}-first-name`}\\n                    placeholder=\\\"Matt\\\"\\n                    required\\n                    type=\\\"text\\\"\\n                  />\\n                </div>\\n                <div className=\\\"flex-1 space-y-2\\\">\\n                  <Label htmlFor={`${id}-last-name`}>Last name</Label>\\n                  <Input\\n                    defaultValue=\\\"Villard\\\"\\n                    id={`${id}-last-name`}\\n                    placeholder=\\\"Welsh\\\"\\n                    required\\n                    type=\\\"text\\\"\\n                  />\\n                </div>\\n              </div>\\n              <div className=\\\"*:not-first:mt-2\\\">\\n                <Label htmlFor={`${id}-username`}>Username</Label>\\n                <div className=\\\"relative\\\">\\n                  <Input\\n                    className=\\\"peer pe-9\\\"\\n                    defaultValue=\\\"margaret-villard-69\\\"\\n                    id={`${id}-username`}\\n                    placeholder=\\\"Username\\\"\\n                    required\\n                    type=\\\"text\\\"\\n                  />\\n                  <div className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n                    <CheckIcon\\n                      aria-hidden=\\\"true\\\"\\n                      className=\\\"text-emerald-500\\\"\\n                      size={16}\\n                    />\\n                  </div>\\n                </div>\\n              </div>\\n              <div className=\\\"*:not-first:mt-2\\\">\\n                <Label htmlFor={`${id}-website`}>Website</Label>\\n                <div className=\\\"flex rounded-md shadow-xs\\\">\\n                  <span className=\\\"-z-10 inline-flex items-center rounded-s-md border border-input bg-background px-3 text-muted-foreground text-sm\\\">\\n                    https://\\n                  </span>\\n                  <Input\\n                    className=\\\"-ms-px rounded-s-none shadow-none\\\"\\n                    defaultValue=\\\"www.margaret.com\\\"\\n                    id={`${id}-website`}\\n                    placeholder=\\\"yourwebsite.com\\\"\\n                    type=\\\"text\\\"\\n                  />\\n                </div>\\n              </div>\\n              <div className=\\\"*:not-first:mt-2\\\">\\n                <Label htmlFor={`${id}-bio`}>Biography</Label>\\n                <Textarea\\n                  aria-describedby={`${id}-description`}\\n                  defaultValue={value}\\n                  id={`${id}-bio`}\\n                  maxLength={maxLength}\\n                  onChange={handleChange}\\n                  placeholder=\\\"Write a few sentences about yourself\\\"\\n                />\\n                <p\\n                  aria-live=\\\"polite\\\"\\n                  className=\\\"mt-2 text-right text-muted-foreground text-xs\\\"\\n                  id={`${id}-description`}\\n                  role=\\\"status\\\"\\n                >\\n                  <span className=\\\"tabular-nums\\\">{limit - characterCount}</span>{\\\" \\\"}\\n                  characters left\\n                </p>\\n              </div>\\n            </form>\\n          </div>\\n        </div>\\n        <DialogFooter className=\\\"border-t px-6 py-4\\\">\\n          <DialogClose asChild>\\n            <Button type=\\\"button\\\" variant=\\\"outline\\\">\\n              Cancel\\n            </Button>\\n          </DialogClose>\\n          <DialogClose asChild>\\n            <Button type=\\\"button\\\">Save changes</Button>\\n          </DialogClose>\\n        </DialogFooter>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\\nfunction ProfileBg() {\\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\\n    useFileUpload({\\n      accept: \\\"image/*\\\",\\n      initialFiles: initialBgImage,\\n    });\\n\\n  const currentImage = files[0]?.preview || null;\\n\\n  return (\\n    <div className=\\\"h-32\\\">\\n      <div className=\\\"relative flex size-full items-center justify-center overflow-hidden bg-muted\\\">\\n        {currentImage && (\\n          <img\\n            alt={\\n              files[0]?.preview\\n                ? \\\"Upload preview\\\"\\n                : \\\"Default profile background\\\"\\n            }\\n            className=\\\"size-full object-cover\\\"\\n            height={96}\\n            src={currentImage}\\n            width={512}\\n          />\\n        )}\\n        <div className=\\\"absolute inset-0 flex items-center justify-center gap-2\\\">\\n          <button\\n            aria-label={currentImage ? \\\"Change image\\\" : \\\"Upload image\\\"}\\n            className=\\\"z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n            onClick={openFileDialog}\\n            type=\\\"button\\\"\\n          >\\n            <ImagePlusIcon aria-hidden=\\\"true\\\" size={16} />\\n          </button>\\n          {currentImage && (\\n            <button\\n              aria-label=\\\"Remove image\\\"\\n              className=\\\"z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n              onClick={() => removeFile(files[0]?.id)}\\n              type=\\\"button\\\"\\n            >\\n              <XIcon aria-hidden=\\\"true\\\" size={16} />\\n            </button>\\n          )}\\n        </div>\\n      </div>\\n      <input\\n        {...getInputProps()}\\n        aria-label=\\\"Upload image file\\\"\\n        className=\\\"sr-only\\\"\\n      />\\n    </div>\\n  );\\n}\\n\\nfunction Avatar() {\\n  const [{ files }, { openFileDialog, getInputProps }] = useFileUpload({\\n    accept: \\\"image/*\\\",\\n    initialFiles: initialAvatarImage,\\n  });\\n\\n  const currentImage = files[0]?.preview || null;\\n\\n  return (\\n    <div className=\\\"-mt-10 px-6\\\">\\n      <div className=\\\"relative flex size-20 items-center justify-center overflow-hidden rounded-full border-4 border-background bg-muted shadow-black/10 shadow-xs\\\">\\n        {currentImage && (\\n          <img\\n            alt=\\\"Profile\\\"\\n            className=\\\"size-full object-cover\\\"\\n            height={80}\\n            src={currentImage}\\n            width={80}\\n          />\\n        )}\\n        <button\\n          aria-label=\\\"Change profile picture\\\"\\n          className=\\\"absolute flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n          onClick={openFileDialog}\\n          type=\\\"button\\\"\\n        >\\n          <ImagePlusIcon aria-hidden=\\\"true\\\" size={16} />\\n        </button>\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload profile picture\\\"\\n          className=\\\"sr-only\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-character-limit.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { type ChangeEvent, useState } from \\\"react\\\";\\n\\ntype UseCharacterLimitProps = {\\n  maxLength: number;\\n  initialValue?: string;\\n};\\n\\nexport function useCharacterLimit({\\n  maxLength,\\n  initialValue = \\\"\\\",\\n}: UseCharacterLimitProps) {\\n  const [value, setValue] = useState(initialValue);\\n  const [characterCount, setCharacterCount] = useState(initialValue.length);\\n\\n  const handleChange = (\\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\\n  ) => {\\n    const newValue = e.target.value;\\n    if (newValue.length <= maxLength) {\\n      setValue(newValue);\\n      setCharacterCount(newValue.length);\\n    }\\n  };\\n\\n  return {\\n    characterCount,\\n    handleChange,\\n    maxLength,\\n    value,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"user\",\n      \"profile\",\n      \"image\",\n      \"avatar\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-332.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-332\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dialog.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-332.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\n\\nexport default function Component() {\\n  const [step, setStep] = useState(1);\\n\\n  const stepContent = [\\n    {\\n      description:\\n        \\\"Discover a powerful collection of components designed to enhance your development workflow.\\\",\\n      title: \\\"Welcome to coss.com\\\",\\n    },\\n    {\\n      description:\\n        \\\"Each component is fully customizable and built with modern web standards in mind.\\\",\\n      title: \\\"Customizable Components\\\",\\n    },\\n    {\\n      description:\\n        \\\"Begin building amazing interfaces with our comprehensive component library.\\\",\\n      title: \\\"Ready to Start?\\\",\\n    },\\n    {\\n      description:\\n        \\\"Access our extensive documentation and community resources to make the most of coss.com.\\\",\\n      title: \\\"Get Support\\\",\\n    },\\n  ];\\n\\n  const totalSteps = stepContent.length;\\n\\n  const handleContinue = () => {\\n    if (step < totalSteps) {\\n      setStep(step + 1);\\n    }\\n  };\\n\\n  return (\\n    <Dialog\\n      onOpenChange={(open) => {\\n        if (open) setStep(1);\\n      }}\\n    >\\n      <DialogTrigger asChild>\\n        <Button variant=\\\"outline\\\">Onboarding</Button>\\n      </DialogTrigger>\\n      <DialogContent className=\\\"gap-0 p-0 [&>button:last-child]:text-white\\\">\\n        <div className=\\\"p-2\\\">\\n          <img\\n            alt=\\\"dialog\\\"\\n            className=\\\"w-full rounded-md\\\"\\n            height={216}\\n            src=\\\"/origin/dialog-content.png\\\"\\n            width={382}\\n          />\\n        </div>\\n        <div className=\\\"space-y-6 px-6 pt-3 pb-6\\\">\\n          <DialogHeader>\\n            <DialogTitle>{stepContent[step - 1].title}</DialogTitle>\\n            <DialogDescription>\\n              {stepContent[step - 1].description}\\n            </DialogDescription>\\n          </DialogHeader>\\n          <div className=\\\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\\\">\\n            <div className=\\\"flex justify-center space-x-1.5 max-sm:order-1\\\">\\n              {[...Array(totalSteps)].map((_, index) => (\\n                <div\\n                  className={cn(\\n                    \\\"size-1.5 rounded-full bg-primary\\\",\\n                    index + 1 === step ? \\\"bg-primary\\\" : \\\"opacity-20\\\",\\n                  )}\\n                  key={String(index)}\\n                />\\n              ))}\\n            </div>\\n            <DialogFooter>\\n              <DialogClose asChild>\\n                <Button type=\\\"button\\\" variant=\\\"ghost\\\">\\n                  Skip\\n                </Button>\\n              </DialogClose>\\n              {step < totalSteps ? (\\n                <Button\\n                  className=\\\"group\\\"\\n                  onClick={handleContinue}\\n                  type=\\\"button\\\"\\n                >\\n                  Next\\n                  <ArrowRightIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n                    size={16}\\n                  />\\n                </Button>\\n              ) : (\\n                <DialogClose asChild>\\n                  <Button type=\\\"button\\\">Okay</Button>\\n                </DialogClose>\\n              )}\\n            </DialogFooter>\\n          </div>\\n        </div>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"onboarding\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-333.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-333\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/command.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-333.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  ArrowUpRightIcon,\\n  CircleFadingPlusIcon,\\n  FileInputIcon,\\n  FolderPlusIcon,\\n  SearchIcon,\\n} from \\\"lucide-react\\\";\\nimport * as React from \\\"react\\\";\\n\\nimport {\\n  CommandDialog,\\n  CommandEmpty,\\n  CommandGroup,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n  CommandSeparator,\\n  CommandShortcut,\\n} from \\\"@/registry/default/ui/command\\\";\\n\\nexport default function Component() {\\n  const [open, setOpen] = React.useState(false);\\n\\n  React.useEffect(() => {\\n    const down = (e: KeyboardEvent) => {\\n      if (e.key === \\\"k\\\" && (e.metaKey || e.ctrlKey)) {\\n        e.preventDefault();\\n        setOpen((open) => !open);\\n      }\\n    };\\n\\n    document.addEventListener(\\\"keydown\\\", down);\\n    return () => document.removeEventListener(\\\"keydown\\\", down);\\n  }, []);\\n\\n  return (\\n    <>\\n      <button\\n        className=\\\"inline-flex h-9 w-fit rounded-md border border-input bg-background px-3 py-2 text-foreground text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n        onClick={() => setOpen(true)}\\n        type=\\\"button\\\"\\n      >\\n        <span className=\\\"flex grow items-center\\\">\\n          <SearchIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-ms-1 me-3 text-muted-foreground/80\\\"\\n            size={16}\\n          />\\n          <span className=\\\"font-normal text-muted-foreground/70\\\">Search</span>\\n        </span>\\n        <kbd className=\\\"-me-1 ms-12 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n          ⌘K\\n        </kbd>\\n      </button>\\n      <CommandDialog onOpenChange={setOpen} open={open}>\\n        <CommandInput placeholder=\\\"Type a command or search...\\\" />\\n        <CommandList>\\n          <CommandEmpty>No results found.</CommandEmpty>\\n          <CommandGroup heading=\\\"Quick start\\\">\\n            <CommandItem>\\n              <FolderPlusIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"opacity-60\\\"\\n                size={16}\\n              />\\n              <span>New folder</span>\\n              <CommandShortcut className=\\\"justify-center\\\">⌘N</CommandShortcut>\\n            </CommandItem>\\n            <CommandItem>\\n              <FileInputIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"opacity-60\\\"\\n                size={16}\\n              />\\n              <span>Import document</span>\\n              <CommandShortcut className=\\\"justify-center\\\">⌘I</CommandShortcut>\\n            </CommandItem>\\n            <CommandItem>\\n              <CircleFadingPlusIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"opacity-60\\\"\\n                size={16}\\n              />\\n              <span>Add block</span>\\n              <CommandShortcut className=\\\"justify-center\\\">⌘B</CommandShortcut>\\n            </CommandItem>\\n          </CommandGroup>\\n          <CommandSeparator />\\n          <CommandGroup heading=\\\"Navigation\\\">\\n            <CommandItem>\\n              <ArrowUpRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"opacity-60\\\"\\n                size={16}\\n              />\\n              <span>Go to dashboard</span>\\n            </CommandItem>\\n            <CommandItem>\\n              <ArrowUpRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"opacity-60\\\"\\n                size={16}\\n              />\\n              <span>Go to apps</span>\\n            </CommandItem>\\n            <CommandItem>\\n              <ArrowUpRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"opacity-60\\\"\\n                size={16}\\n              />\\n              <span>Go to connections</span>\\n            </CommandItem>\\n          </CommandGroup>\\n        </CommandList>\\n      </CommandDialog>\\n    </>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dialog\",\n      \"modal\",\n      \"command\",\n      \"combobox\",\n      \"popover\",\n      \"search\",\n      \"radix\",\n      \"autocomplete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-334.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-334\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-334.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ chevron</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionTrigger className=\\\"py-2 text-[15px] leading-6 hover:no-underline\\\">\\n              {item.title}\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-335.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-335\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-335.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ plus-minus</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                {item.title}\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-336.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-336\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-336.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ left chevron</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionTrigger className=\\\"[&>svg]:-order-1 justify-start gap-3 py-2 text-[15px] leading-6 hover:no-underline\\\">\\n              {item.title}\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"ps-7 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-337.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-337\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-337.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ left plus-minus</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"[&>svg]:-order-1 flex flex-1 items-center gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                {item.title}\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"ps-7 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-338.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-338\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-338.tsx\",\n      \"content\": \"import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    icon: CommandIcon,\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    icon: EclipseIcon,\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    icon: ZapIcon,\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    icon: AtSignIcon,\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ icon and chevron</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionTrigger className=\\\"py-2 text-[15px] leading-6 hover:no-underline\\\">\\n              <span className=\\\"flex items-center gap-3\\\">\\n                <item.icon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"shrink-0 opacity-60\\\"\\n                  size={16}\\n                />\\n                <span>{item.title}</span>\\n              </span>\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"ps-7 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-339.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-339\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-339.tsx\",\n      \"content\": \"import {\\n  AtSignIcon,\\n  CommandIcon,\\n  EclipseIcon,\\n  PlusIcon,\\n  ZapIcon,\\n} from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    icon: CommandIcon,\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    icon: EclipseIcon,\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    icon: ZapIcon,\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    icon: AtSignIcon,\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ icon and plus-minus</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                <span className=\\\"flex items-center gap-3\\\">\\n                  <item.icon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"shrink-0 opacity-60\\\"\\n                    size={16}\\n                  />\\n                  <span>{item.title}</span>\\n                </span>\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"ps-7 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-34.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-34\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-34.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\n\\nimport { useCharacterLimit } from \\\"@/registry/default/hooks/use-character-limit\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const maxLength = 50;\\n  const {\\n    value,\\n    characterCount,\\n    handleChange,\\n    maxLength: limit,\\n  } = useCharacterLimit({ maxLength });\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with character limit</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          aria-describedby={`${id}-description`}\\n          className=\\\"peer pe-14\\\"\\n          id={id}\\n          maxLength={maxLength}\\n          onChange={handleChange}\\n          type=\\\"text\\\"\\n          value={value}\\n        />\\n        <div\\n          aria-live=\\\"polite\\\"\\n          className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground text-xs tabular-nums peer-disabled:opacity-50\\\"\\n          id={`${id}-description`}\\n          role=\\\"status\\\"\\n        >\\n          {characterCount}/{limit}\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-character-limit.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { type ChangeEvent, useState } from \\\"react\\\";\\n\\ntype UseCharacterLimitProps = {\\n  maxLength: number;\\n  initialValue?: string;\\n};\\n\\nexport function useCharacterLimit({\\n  maxLength,\\n  initialValue = \\\"\\\",\\n}: UseCharacterLimitProps) {\\n  const [value, setValue] = useState(initialValue);\\n  const [characterCount, setCharacterCount] = useState(initialValue.length);\\n\\n  const handleChange = (\\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\\n  ) => {\\n    const newValue = e.target.value;\\n    if (newValue.length <= maxLength) {\\n      setValue(newValue);\\n      setCharacterCount(newValue.length);\\n    }\\n  };\\n\\n  return {\\n    characterCount,\\n    handleChange,\\n    maxLength,\\n    value,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-340.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-340\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-340.tsx\",\n      \"content\": \"import { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\\\",\\n    id: \\\"1\\\",\\n    sub: \\\"Manage your linked social and work accounts\\\",\\n    title: \\\"Connected accounts\\\",\\n  },\\n  {\\n    content:\\n      \\\"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\\\",\\n    id: \\\"2\\\",\\n    sub: \\\"Customize your notification preferences\\\",\\n    title: \\\"Notifications\\\",\\n  },\\n  {\\n    content:\\n      \\\"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\\\",\\n    id: \\\"3\\\",\\n    sub: \\\"Add an extra layer of security to your account\\\",\\n    title: \\\"2-step verification\\\",\\n  },\\n  {\\n    content:\\n      \\\"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\\\",\\n    id: \\\"4\\\",\\n    sub: \\\"We're here to help 24/7\\\",\\n    title: \\\"Contact support\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ sub-header and chevron</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&[data-state=open]>svg]:rotate-180\\\">\\n                <span className=\\\"flex flex-col space-y-1\\\">\\n                  <span>{item.title}</span>\\n                  {item.sub && (\\n                    <span className=\\\"font-normal text-sm\\\">{item.sub}</span>\\n                  )}\\n                </span>\\n                <ChevronDownIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-341.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-341\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-341.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\\\",\\n    id: \\\"1\\\",\\n    sub: \\\"Manage your linked social and work accounts\\\",\\n    title: \\\"Connected accounts\\\",\\n  },\\n  {\\n    content:\\n      \\\"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\\\",\\n    id: \\\"2\\\",\\n    sub: \\\"Customize your notification preferences\\\",\\n    title: \\\"Notifications\\\",\\n  },\\n  {\\n    content:\\n      \\\"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\\\",\\n    id: \\\"3\\\",\\n    sub: \\\"Add an extra layer of security to your account\\\",\\n    title: \\\"2-step verification\\\",\\n  },\\n  {\\n    content:\\n      \\\"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\\\",\\n    id: \\\"4\\\",\\n    sub: \\\"We're here to help 24/7\\\",\\n    title: \\\"Contact support\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ sub-header and plus-minus</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                <span className=\\\"flex flex-col space-y-1\\\">\\n                  <span>{item.title}</span>\\n                  {item.sub && (\\n                    <span className=\\\"font-normal text-sm\\\">{item.sub}</span>\\n                  )}\\n                </span>\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-342.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-342\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-342.tsx\",\n      \"content\": \"import {\\n  BellIcon,\\n  ChevronDownIcon,\\n  LifeBuoyIcon,\\n  Link2Icon,\\n  ShieldCheckIcon,\\n} from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\\\",\\n    icon: Link2Icon,\\n    id: \\\"1\\\",\\n    sub: \\\"Manage your linked social and work accounts\\\",\\n    title: \\\"Connected accounts\\\",\\n  },\\n  {\\n    content:\\n      \\\"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\\\",\\n    icon: BellIcon,\\n    id: \\\"2\\\",\\n    sub: \\\"Customize your notification preferences\\\",\\n    title: \\\"Notifications\\\",\\n  },\\n  {\\n    content:\\n      \\\"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\\\",\\n    icon: ShieldCheckIcon,\\n    id: \\\"3\\\",\\n    sub: \\\"Add an extra layer of security to your account\\\",\\n    title: \\\"2-step verification\\\",\\n  },\\n  {\\n    content:\\n      \\\"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\\\",\\n    icon: LifeBuoyIcon,\\n    id: \\\"4\\\",\\n    sub: \\\"We're here to help 24/7\\\",\\n    title: \\\"Contact support\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ icon, sub-header, and chevron</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&[data-state=open]>svg]:rotate-180\\\">\\n                <span className=\\\"flex items-center gap-3\\\">\\n                  <span\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"flex size-10 shrink-0 items-center justify-center rounded-full border\\\"\\n                  >\\n                    <item.icon className=\\\"opacity-60\\\" size={16} />\\n                  </span>\\n                  <span className=\\\"flex flex-col space-y-1\\\">\\n                    <span>{item.title}</span>\\n                    {item.sub && (\\n                      <span className=\\\"font-normal text-sm\\\">{item.sub}</span>\\n                    )}\\n                  </span>\\n                </span>\\n                <ChevronDownIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"ms-3 ps-10 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-343.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-343\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-343.tsx\",\n      \"content\": \"import {\\n  BellIcon,\\n  LifeBuoyIcon,\\n  Link2Icon,\\n  PlusIcon,\\n  ShieldCheckIcon,\\n} from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\\\",\\n    icon: Link2Icon,\\n    id: \\\"1\\\",\\n    sub: \\\"Manage your linked social and work accounts\\\",\\n    title: \\\"Connected accounts\\\",\\n  },\\n  {\\n    content:\\n      \\\"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\\\",\\n    icon: BellIcon,\\n    id: \\\"2\\\",\\n    sub: \\\"Customize your notification preferences\\\",\\n    title: \\\"Notifications\\\",\\n  },\\n  {\\n    content:\\n      \\\"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\\\",\\n    icon: ShieldCheckIcon,\\n    id: \\\"3\\\",\\n    sub: \\\"Add an extra layer of security to your account\\\",\\n    title: \\\"2-step verification\\\",\\n  },\\n  {\\n    content:\\n      \\\"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\\\",\\n    icon: LifeBuoyIcon,\\n    id: \\\"4\\\",\\n    sub: \\\"We're here to help 24/7\\\",\\n    title: \\\"Contact support\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">W/ icon, sub-header, and plus-minus</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem className=\\\"py-2\\\" key={item.id} value={item.id}>\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                <span className=\\\"flex items-center gap-3\\\">\\n                  <span\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"flex size-10 shrink-0 items-center justify-center rounded-full border\\\"\\n                  >\\n                    <item.icon className=\\\"opacity-60\\\" size={16} />\\n                  </span>\\n                  <span className=\\\"flex flex-col space-y-1\\\">\\n                    <span>{item.title}</span>\\n                    {item.sub && (\\n                      <span className=\\\"font-normal text-sm\\\">{item.sub}</span>\\n                    )}\\n                  </span>\\n                </span>\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"ms-3 ps-10 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-344.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-344\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-344.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Tabs w/ chevron</h2>\\n      <Accordion\\n        className=\\\"w-full space-y-2\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionTrigger className=\\\"py-2 text-[15px] leading-6 hover:no-underline focus-visible:ring-0\\\">\\n              {item.title}\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-345.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-345\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-345.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Tabs w/ plus-minus</h2>\\n      <Accordion\\n        className=\\\"w-full space-y-2\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none ocus-visible:ring-0 transition-all [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                {item.title}\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-346.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-346\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-346.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Tabs w/ left chevron</h2>\\n      <Accordion\\n        className=\\\"w-full space-y-2\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionTrigger className=\\\"[&>svg]:-order-1 justify-start gap-3 py-2 text-[15px] leading-6 hover:no-underline focus-visible:ring-0\\\">\\n              {item.title}\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"ps-7 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-347.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-347\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-347.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Tabs w/ left plus-minus</h2>\\n      <Accordion\\n        className=\\\"w-full space-y-2\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:ring-0 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                {item.title}\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-348.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-348\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-348.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Table w/ chevron</h2>\\n      <Accordion\\n        className=\\\"-space-y-px w-full\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"relative border bg-background px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionTrigger className=\\\"py-2 text-[15px] leading-6 hover:no-underline focus-visible:ring-0\\\">\\n              {item.title}\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-349.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-349\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-349.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Table w/ plus-minus</h2>\\n      <Accordion\\n        className=\\\"-space-y-px w-full\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"relative border bg-background px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:ring-0 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                {item.title}\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-35.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-35\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-35.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\n\\nimport { useCharacterLimit } from \\\"@/registry/default/hooks/use-character-limit\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const maxLength = 8;\\n  const {\\n    value,\\n    characterCount,\\n    handleChange,\\n    maxLength: limit,\\n  } = useCharacterLimit({ maxLength });\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with characters left</Label>\\n      <Input\\n        aria-describedby={`${id}-description`}\\n        id={id}\\n        maxLength={maxLength}\\n        onChange={handleChange}\\n        type=\\\"text\\\"\\n        value={value}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        id={`${id}-description`}\\n        role=\\\"status\\\"\\n      >\\n        <span className=\\\"tabular-nums\\\">{limit - characterCount}</span>{\\\" \\\"}\\n        characters left\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-character-limit.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { type ChangeEvent, useState } from \\\"react\\\";\\n\\ntype UseCharacterLimitProps = {\\n  maxLength: number;\\n  initialValue?: string;\\n};\\n\\nexport function useCharacterLimit({\\n  maxLength,\\n  initialValue = \\\"\\\",\\n}: UseCharacterLimitProps) {\\n  const [value, setValue] = useState(initialValue);\\n  const [characterCount, setCharacterCount] = useState(initialValue.length);\\n\\n  const handleChange = (\\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\\n  ) => {\\n    const newValue = e.target.value;\\n    if (newValue.length <= maxLength) {\\n      setValue(newValue);\\n      setCharacterCount(newValue.length);\\n    }\\n  };\\n\\n  return {\\n    characterCount,\\n    handleChange,\\n    maxLength,\\n    value,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-350.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-350\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-350.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Table w/ left chevron</h2>\\n      <Accordion\\n        className=\\\"-space-y-px w-full\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"relative border bg-background px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionTrigger className=\\\"[&>svg]:-order-1 justify-start gap-3 rounded-md py-2 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0\\\">\\n              {item.title}\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"ps-7 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-351.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-351\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-351.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Accordion as AccordionPrimitive } from \\\"radix-ui\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nconst items = [\\n  {\\n    content:\\n      \\\"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\\\",\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\\\",\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    content:\\n      \\\"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\\\",\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    content:\\n      \\\"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\\\",\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Table w/ left plus-minus</h2>\\n      <Accordion\\n        className=\\\"-space-y-px w-full\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"relative border bg-background px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionPrimitive.Header className=\\\"flex\\\">\\n              <AccordionPrimitive.Trigger className=\\\"[&>svg]:-order-1 flex flex-1 items-center gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:ring-0 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\\\">\\n                {item.title}\\n                <PlusIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\\\"\\n                  size={16}\\n                />\\n              </AccordionPrimitive.Trigger>\\n            </AccordionPrimitive.Header>\\n            <AccordionContent className=\\\"ps-7 pb-2 text-muted-foreground\\\">\\n              {item.content}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-352.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-352\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\",\n    \"https://coss.com/origin/r/collapsible.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-352.tsx\",\n      \"content\": \"import { ChevronDownIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\nimport {\\n  Collapsible,\\n  CollapsibleContent,\\n  CollapsibleTrigger,\\n} from \\\"@/registry/default/ui/collapsible\\\";\\n\\nconst items = [\\n  {\\n    collapsibles: [\\n      {\\n        content:\\n          \\\"We optimize every component for maximum performance and minimal bundle size.\\\",\\n        title: \\\"What about performance?\\\",\\n      },\\n      {\\n        content:\\n          \\\"Our documentation is comprehensive and includes live examples for every component.\\\",\\n        title: \\\"How is the documentation?\\\",\\n      },\\n    ],\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    collapsibles: [\\n      {\\n        content:\\n          \\\"Yes, our theming system is fully customizable and supports both light and dark modes.\\\",\\n        title: \\\"Can I use custom themes?\\\",\\n      },\\n      {\\n        content:\\n          \\\"We have first-class support for Tailwind CSS with custom utility classes.\\\",\\n        title: \\\"What about Tailwind support?\\\",\\n      },\\n    ],\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    collapsibles: [\\n      {\\n        content:\\n          \\\"Our components are tree-shakeable and typically add minimal overhead to your bundle.\\\",\\n        open: true,\\n        title: \\\"What's the bundle size impact?\\\",\\n      },\\n      {\\n        content:\\n          \\\"We support automatic code splitting for optimal loading performance.\\\",\\n        title: \\\"How is code splitting handled?\\\",\\n      },\\n    ],\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    collapsibles: [\\n      {\\n        content:\\n          \\\"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\\\",\\n        title: \\\"Which screen readers are supported?\\\",\\n      },\\n      {\\n        content:\\n          \\\"Full keyboard navigation support is implemented following WAI-ARIA best practices.\\\",\\n        title: \\\"What about keyboard navigation?\\\",\\n      },\\n    ],\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Multi-level</h2>\\n      <Accordion\\n        className=\\\"-space-y-px w-full\\\"\\n        collapsible\\n        defaultValue=\\\"3\\\"\\n        type=\\\"single\\\"\\n      >\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"relative border bg-background outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionTrigger className=\\\"rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0\\\">\\n              {item.title}\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"p-0\\\">\\n              {item.collapsibles.map((collapsible, _index) => (\\n                <CollapsibleDemo\\n                  content={collapsible.content}\\n                  key={collapsible.title}\\n                  open={collapsible.open}\\n                  title={collapsible.title}\\n                />\\n              ))}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\\nfunction CollapsibleDemo({\\n  title,\\n  content,\\n  open,\\n}: {\\n  title: string;\\n  content: string;\\n  open?: boolean;\\n}) {\\n  return (\\n    <Collapsible className=\\\"border-t bg-accent px-4 py-3\\\" defaultOpen={open}>\\n      <CollapsibleTrigger className=\\\"flex gap-2 font-semibold text-[15px] leading-6 [&[data-state=open]>svg]:rotate-180\\\">\\n        <ChevronDownIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mt-1 shrink-0 opacity-60 transition-transform duration-200\\\"\\n          size={16}\\n        />\\n        {title}\\n      </CollapsibleTrigger>\\n      <CollapsibleContent className=\\\"mt-1 overflow-hidden ps-6 text-muted-foreground text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\\\">\\n        {content}\\n      </CollapsibleContent>\\n    </Collapsible>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"collapsible\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-353.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-353\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/accordion.json\",\n    \"https://coss.com/origin/r/collapsible.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-353.tsx\",\n      \"content\": \"import {\\n  AtSignIcon,\\n  ChevronDownIcon,\\n  CircleDashedIcon,\\n  CommandIcon,\\n  EclipseIcon,\\n  GaugeIcon,\\n  type LucideIcon,\\n  ZapIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Accordion,\\n  AccordionContent,\\n  AccordionItem,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\nimport {\\n  Collapsible,\\n  CollapsibleContent,\\n  CollapsibleTrigger,\\n} from \\\"@/registry/default/ui/collapsible\\\";\\n\\nconst items = [\\n  {\\n    collapsibles: [\\n      {\\n        content:\\n          \\\"We optimize every component for maximum performance and minimal bundle size.\\\",\\n        icon: GaugeIcon,\\n        title: \\\"What about performance?\\\",\\n      },\\n      {\\n        content:\\n          \\\"Our documentation is comprehensive and includes live examples for every component.\\\",\\n        icon: CircleDashedIcon,\\n        title: \\\"How is the documentation?\\\",\\n      },\\n    ],\\n    icon: CommandIcon,\\n    id: \\\"1\\\",\\n    title: \\\"What makes coss ui different?\\\",\\n  },\\n  {\\n    collapsibles: [\\n      {\\n        content:\\n          \\\"Yes, our theming system is fully customizable and supports both light and dark modes.\\\",\\n        icon: GaugeIcon,\\n        title: \\\"Can I use custom themes?\\\",\\n      },\\n      {\\n        content:\\n          \\\"We have first-class support for Tailwind CSS with custom utility classes.\\\",\\n        icon: CircleDashedIcon,\\n        title: \\\"What about Tailwind support?\\\",\\n      },\\n    ],\\n    icon: EclipseIcon,\\n    id: \\\"2\\\",\\n    title: \\\"How can I customize the components?\\\",\\n  },\\n  {\\n    collapsibles: [\\n      {\\n        content:\\n          \\\"Our components are tree-shakeable and typically add minimal overhead to your bundle.\\\",\\n        icon: GaugeIcon,\\n        open: true,\\n        title: \\\"What's the bundle size impact?\\\",\\n      },\\n      {\\n        content:\\n          \\\"We support automatic code splitting for optimal loading performance.\\\",\\n        icon: CircleDashedIcon,\\n        title: \\\"How is code splitting handled?\\\",\\n      },\\n    ],\\n    icon: ZapIcon,\\n    id: \\\"3\\\",\\n    title: \\\"Is coss ui optimized for performance?\\\",\\n  },\\n  {\\n    collapsibles: [\\n      {\\n        content:\\n          \\\"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\\\",\\n        icon: GaugeIcon,\\n        title: \\\"Which screen readers are supported?\\\",\\n      },\\n      {\\n        content:\\n          \\\"Full keyboard navigation support is implemented following WAI-ARIA best practices.\\\",\\n        icon: CircleDashedIcon,\\n        title: \\\"What about keyboard navigation?\\\",\\n      },\\n    ],\\n    icon: AtSignIcon,\\n    id: \\\"4\\\",\\n    title: \\\"How accessible are the components?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <h2 className=\\\"font-bold text-xl\\\">Multi-level w/ icon</h2>\\n      <Accordion className=\\\"w-full\\\" collapsible defaultValue=\\\"3\\\" type=\\\"single\\\">\\n        {items.map((item) => (\\n          <AccordionItem\\n            className=\\\"outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\"\\n            key={item.id}\\n            value={item.id}\\n          >\\n            <AccordionTrigger className=\\\"[&>svg]:-order-1 justify-start gap-3 rounded-md text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0\\\">\\n              <span className=\\\"flex items-center gap-3\\\">\\n                <item.icon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"shrink-0 opacity-60\\\"\\n                  size={16}\\n                />\\n                <span>{item.title}</span>\\n              </span>\\n            </AccordionTrigger>\\n            <AccordionContent className=\\\"p-0\\\">\\n              {item.collapsibles.map((collapsible, _index) => (\\n                <CollapsibleDemo\\n                  content={collapsible.content}\\n                  icon={collapsible.icon}\\n                  key={collapsible.title}\\n                  open={collapsible.open}\\n                  title={collapsible.title}\\n                />\\n              ))}\\n            </AccordionContent>\\n          </AccordionItem>\\n        ))}\\n      </Accordion>\\n    </div>\\n  );\\n}\\n\\nfunction CollapsibleDemo({\\n  title,\\n  content,\\n  open,\\n  icon: Icon,\\n}: {\\n  title: string;\\n  content: string;\\n  open?: boolean;\\n  icon: LucideIcon;\\n}) {\\n  return (\\n    <Collapsible className=\\\"border-t py-3 ps-6 pe-4\\\" defaultOpen={open}>\\n      <CollapsibleTrigger className=\\\"flex gap-2 font-semibold text-[15px] leading-6 [&[data-state=open]>svg]:rotate-180\\\">\\n        <ChevronDownIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"mt-1 shrink-0 opacity-60 transition-transform duration-200\\\"\\n          size={16}\\n        />\\n        <span className=\\\"flex items-center gap-3\\\">\\n          <Icon aria-hidden=\\\"true\\\" className=\\\"shrink-0 opacity-60\\\" size={16} />\\n          <span>{title}</span>\\n        </span>\\n      </CollapsibleTrigger>\\n      <CollapsibleContent className=\\\"mt-1 overflow-hidden ps-6 text-muted-foreground text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\\\">\\n        {content}\\n      </CollapsibleContent>\\n    </Collapsible>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"accordion\",\n      \"collapsible\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-354.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-354\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-354.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            Tiny\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n          This is a simple tooltip\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-355.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-355\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-355.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            Dark\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"dark px-2 py-1 text-xs\\\">\\n          This tooltip will be always dark\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-356.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-356\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-356.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            W/ arrow\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"dark px-2 py-1 text-xs\\\" showArrow={true}>\\n          This tooltip has an arrow\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-357.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-357\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-357.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            W/ title\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"py-3\\\">\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"font-medium text-[13px]\\\">Tooltip with title</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              Tooltips are made to be highly customizable, with features like\\n              dynamic placement, rich content, and a robust API. You can even\\n              use them as a full-featured dropdown menu by setting the{\\\" \\\"}\\n              <code>trigger</code> prop to <code>click</code>.\\n            </p>\\n          </div>\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-358.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-358\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-358.tsx\",\n      \"content\": \"import { GlobeIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            W/ icon\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"dark py-3\\\">\\n          <div className=\\\"flex gap-3\\\">\\n            <GlobeIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"mt-0.5 shrink-0 opacity-60\\\"\\n              size={16}\\n            />\\n            <div className=\\\"space-y-1\\\">\\n              <p className=\\\"font-medium text-[13px]\\\">\\n                Tooltip with title and icon\\n              </p>\\n              <p className=\\\"text-muted-foreground text-xs\\\">\\n                Tooltips are made to be highly customizable, with features like\\n                dynamic placement, rich content, and a robust API.\\n              </p>\\n            </div>\\n          </div>\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-359.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-359\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-359.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            W/ image\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"py-3\\\">\\n          <div className=\\\"space-y-2\\\">\\n            <img\\n              alt=\\\"Content\\\"\\n              className=\\\"w-full rounded\\\"\\n              height={216}\\n              src=\\\"/origin/dialog-content.png\\\"\\n              width={382}\\n            />\\n            <div className=\\\"space-y-1\\\">\\n              <p className=\\\"font-medium text-[13px]\\\">\\n                Tooltip with title and icon\\n              </p>\\n              <p className=\\\"text-muted-foreground text-xs\\\">\\n                Tooltips are made to be highly customizable, with features like\\n                dynamic placement, rich content, and a robust API.\\n              </p>\\n            </div>\\n          </div>\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"image\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-36.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-36\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/datefield-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-36.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Label } from \\\"react-aria-components\\\";\\n\\nimport { DateField, DateInput } from \\\"@/registry/default/ui/datefield-rac\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DateField className=\\\"*:not-first:mt-2\\\">\\n      <Label className=\\\"font-medium text-foreground text-sm\\\">Date input</Label>\\n      <DateInput />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateField.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </DateField>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"date\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-360.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-360\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-360.tsx\",\n      \"content\": \"import {\\n  ChevronDownIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  ChevronUpIcon,\\n  CircleIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"inline-grid w-fit grid-cols-3 gap-1\\\">\\n      <TooltipProvider delayDuration={0}>\\n        <Tooltip>\\n          <TooltipTrigger asChild>\\n            <Button\\n              aria-label=\\\"Pan camera up\\\"\\n              className=\\\"col-start-2\\\"\\n              size=\\\"icon\\\"\\n              variant=\\\"outline\\\"\\n            >\\n              <ChevronUpIcon aria-hidden=\\\"true\\\" size={16} />\\n            </Button>\\n          </TooltipTrigger>\\n          <TooltipContent className=\\\"px-2 py-1 text-xs\\\" side=\\\"top\\\">\\n            Pan top\\n            <kbd className=\\\"-me-1 ms-2 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n              ⌘T\\n            </kbd>\\n          </TooltipContent>\\n        </Tooltip>\\n      </TooltipProvider>\\n      <TooltipProvider delayDuration={0}>\\n        <Tooltip>\\n          <TooltipTrigger asChild>\\n            <Button\\n              aria-label=\\\"Pan camera left\\\"\\n              className=\\\"col-start-1\\\"\\n              size=\\\"icon\\\"\\n              variant=\\\"outline\\\"\\n            >\\n              <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n            </Button>\\n          </TooltipTrigger>\\n          <TooltipContent className=\\\"px-2 py-1 text-xs\\\" side=\\\"left\\\">\\n            Pan left\\n            <kbd className=\\\"-me-1 ms-2 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n              ⌘L\\n            </kbd>\\n          </TooltipContent>\\n        </Tooltip>\\n      </TooltipProvider>\\n      <div aria-hidden=\\\"true\\\" className=\\\"flex items-center justify-center\\\">\\n        <CircleIcon className=\\\"opacity-60\\\" size={16} />\\n      </div>\\n      <TooltipProvider delayDuration={0}>\\n        <Tooltip>\\n          <TooltipTrigger asChild>\\n            <Button aria-label=\\\"Pan camera right\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n              <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n            </Button>\\n          </TooltipTrigger>\\n          <TooltipContent className=\\\"px-2 py-1 text-xs\\\" side=\\\"right\\\">\\n            Pan right\\n            <kbd className=\\\"-me-1 ms-2 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n              ⌘R\\n            </kbd>\\n          </TooltipContent>\\n        </Tooltip>\\n      </TooltipProvider>\\n      <TooltipProvider delayDuration={0}>\\n        <Tooltip>\\n          <TooltipTrigger asChild>\\n            <Button\\n              aria-label=\\\"Pan camera down\\\"\\n              className=\\\"col-start-2\\\"\\n              size=\\\"icon\\\"\\n              variant=\\\"outline\\\"\\n            >\\n              <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n            </Button>\\n          </TooltipTrigger>\\n          <TooltipContent className=\\\"px-2 py-1 text-xs\\\" side=\\\"bottom\\\">\\n            Pan bottom\\n            <kbd className=\\\"-me-1 ms-2 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n              ⌘B\\n            </kbd>\\n          </TooltipContent>\\n        </Tooltip>\\n      </TooltipProvider>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"button\",\n      \"kbd\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-361.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-361\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-361.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            Stats\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"py-3\\\">\\n          <ul className=\\\"grid gap-3 text-xs\\\">\\n            <li className=\\\"grid gap-0.5\\\">\\n              <span className=\\\"text-muted-foreground\\\">Status</span>\\n              <span className=\\\"font-medium\\\">Completed</span>\\n            </li>\\n            <li className=\\\"grid gap-0.5\\\">\\n              <span className=\\\"text-muted-foreground\\\">Code Coverage</span>\\n              <span className=\\\"font-medium\\\">94.3%</span>\\n            </li>\\n            <li className=\\\"grid gap-0.5\\\">\\n              <span className=\\\"text-muted-foreground\\\">Last Deploy</span>\\n              <span className=\\\"font-medium\\\">Today at 15:42</span>\\n            </li>\\n            <li className=\\\"grid gap-0.5\\\">\\n              <span className=\\\"text-muted-foreground\\\">Performance Score</span>\\n              <span className=\\\"font-medium\\\">98/100</span>\\n            </li>\\n          </ul>\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-362.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-362\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-362.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            Chart\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"py-2\\\">\\n          <div className=\\\"space-y-2\\\">\\n            <div className=\\\"font-medium text-[13px]\\\">Tuesday, Aug 13</div>\\n            <div className=\\\"flex items-center gap-2 text-xs\\\">\\n              <svg\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 text-indigo-500\\\"\\n                fill=\\\"currentColor\\\"\\n                height=\\\"8\\\"\\n                viewBox=\\\"0 0 8 8\\\"\\n                width=\\\"8\\\"\\n                xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n              >\\n                <circle cx=\\\"4\\\" cy=\\\"4\\\" r=\\\"4\\\" />\\n              </svg>\\n              <span className=\\\"flex grow gap-2\\\">\\n                Sales <span className=\\\"ml-auto\\\">$40</span>\\n              </span>\\n            </div>\\n            <div className=\\\"flex items-center gap-2 text-xs\\\">\\n              <svg\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 text-purple-500\\\"\\n                fill=\\\"currentColor\\\"\\n                height=\\\"8\\\"\\n                viewBox=\\\"0 0 8 8\\\"\\n                width=\\\"8\\\"\\n                xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n              >\\n                <circle cx=\\\"4\\\" cy=\\\"4\\\" r=\\\"4\\\" />\\n              </svg>\\n              <span className=\\\"flex grow gap-2\\\">\\n                Revenue <span className=\\\"ml-auto\\\">$74</span>\\n              </span>\\n            </div>\\n            <div className=\\\"flex items-center gap-2 text-xs\\\">\\n              <svg\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 text-rose-500\\\"\\n                fill=\\\"currentColor\\\"\\n                height=\\\"8\\\"\\n                viewBox=\\\"0 0 8 8\\\"\\n                width=\\\"8\\\"\\n                xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n              >\\n                <circle cx=\\\"4\\\" cy=\\\"4\\\" r=\\\"4\\\" />\\n              </svg>\\n              <span className=\\\"flex grow gap-2\\\">\\n                Costs <span className=\\\"ml-auto\\\">$410</span>\\n              </span>\\n            </div>\\n          </div>\\n        </TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"chart\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-363.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-363\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/hover-card.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-363.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  HoverCard,\\n  HoverCardContent,\\n  HoverCardTrigger,\\n} from \\\"@/registry/default/ui/hover-card\\\";\\n\\nexport default function HoverCardDemo() {\\n  return (\\n    <HoverCard>\\n      <HoverCardTrigger asChild>\\n        <Button\\n          aria-label=\\\"My profile\\\"\\n          asChild\\n          className=\\\"size-auto overflow-hidden rounded-full bg-transparent p-0 hover:bg-transparent\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <img\\n              alt=\\\"Avatar\\\"\\n              height={40}\\n              src=\\\"/origin/avatar-40-04.jpg\\\"\\n              width={40}\\n            />\\n          </a>\\n        </Button>\\n      </HoverCardTrigger>\\n      <HoverCardContent className=\\\"w-[340px]\\\">\\n        <div className=\\\"flex items-start gap-3\\\">\\n          <img\\n            alt=\\\"Avatar\\\"\\n            className=\\\"shrink-0 rounded-full\\\"\\n            height={40}\\n            src=\\\"/origin/avatar-40-04.jpg\\\"\\n            width={40}\\n          />\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"font-medium text-sm\\\">@Origin_UI</p>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Beautiful UI components built with Tailwind CSS and Next.js.\\n            </p>\\n          </div>\\n        </div>\\n      </HoverCardContent>\\n    </HoverCard>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"hover card\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-364.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-364\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/hover-card.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-364.tsx\",\n      \"content\": \"import {\\n  HoverCard,\\n  HoverCardContent,\\n  HoverCardTrigger,\\n} from \\\"@/registry/default/ui/hover-card\\\";\\n\\nexport default function HoverCardDemo() {\\n  return (\\n    <HoverCard>\\n      <div className=\\\"flex items-center gap-3\\\">\\n        <img\\n          alt=\\\"Avatar\\\"\\n          className=\\\"shrink-0 rounded-full\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-40-05.jpg\\\"\\n          width={40}\\n        />\\n        <div className=\\\"space-y-0.5\\\">\\n          <HoverCardTrigger asChild>\\n            <p>\\n              <a className=\\\"font-medium text-sm hover:underline\\\" href=\\\"#\\\">\\n                Keith Kennedy\\n              </a>\\n            </p>\\n          </HoverCardTrigger>\\n          <p className=\\\"text-muted-foreground text-xs\\\">@k.kennedy</p>\\n        </div>\\n      </div>\\n      <HoverCardContent>\\n        <div className=\\\"space-y-3\\\">\\n          <div className=\\\"flex items-center gap-3\\\">\\n            <img\\n              alt=\\\"Avatar\\\"\\n              className=\\\"shrink-0 rounded-full\\\"\\n              height={40}\\n              src=\\\"/origin/avatar-40-05.jpg\\\"\\n              width={40}\\n            />\\n            <div className=\\\"space-y-0.5\\\">\\n              <p className=\\\"font-medium text-sm\\\">Keith Kennedy</p>\\n              <p className=\\\"text-muted-foreground text-xs\\\">@k.kennedy</p>\\n            </div>\\n          </div>\\n          <p className=\\\"text-muted-foreground text-sm\\\">\\n            Designer at{\\\" \\\"}\\n            <strong className=\\\"font-medium text-foreground\\\">@coss.com</strong>.\\n            Crafting web experiences with Tailwind CSS.\\n          </p>\\n          <div className=\\\"flex items-center gap-2\\\">\\n            <div className=\\\"-space-x-1.5 flex\\\">\\n              <img\\n                alt=\\\"Friend 01\\\"\\n                className=\\\"rounded-full ring-1 ring-background\\\"\\n                height={20}\\n                src=\\\"/origin/avatar-20-04.jpg\\\"\\n                width={20}\\n              />\\n              <img\\n                alt=\\\"Friend 02\\\"\\n                className=\\\"rounded-full ring-1 ring-background\\\"\\n                height={20}\\n                src=\\\"/origin/avatar-20-05.jpg\\\"\\n                width={20}\\n              />\\n              <img\\n                alt=\\\"Friend 03\\\"\\n                className=\\\"rounded-full ring-1 ring-background\\\"\\n                height={20}\\n                src=\\\"/origin/avatar-20-06.jpg\\\"\\n                width={20}\\n              />\\n            </div>\\n            <div className=\\\"text-muted-foreground text-xs\\\">\\n              3 mutual friends\\n            </div>\\n          </div>\\n        </div>\\n      </HoverCardContent>\\n    </HoverCard>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"hover card\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-365.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-365\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/hover-card.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-365.tsx\",\n      \"content\": \"import {\\n  HoverCard,\\n  HoverCardContent,\\n  HoverCardTrigger,\\n} from \\\"@/registry/default/ui/hover-card\\\";\\n\\nexport default function HoverCardDemo() {\\n  return (\\n    <div className=\\\"max-w-md text-sm\\\">\\n      <HoverCard>\\n        <HoverCardTrigger asChild>\\n          <a className=\\\"flex size-16 overflow-hidden rounded-md\\\" href=\\\"#\\\">\\n            <img\\n              alt=\\\"Content\\\"\\n              className=\\\"size-full object-cover\\\"\\n              height={216}\\n              src=\\\"/origin/dialog-content.png\\\"\\n              width={382}\\n            />\\n          </a>\\n        </HoverCardTrigger>\\n        <HoverCardContent className=\\\"w-[320px]\\\" showArrow>\\n          <div className=\\\"space-y-3\\\">\\n            <div className=\\\"space-y-1\\\">\\n              <h2 className=\\\"font-semibold\\\">\\n                Building a Design System with Next.js and Tailwind CSS\\n              </h2>\\n              <p className=\\\"text-muted-foreground text-sm\\\">\\n                Learn how to build a comprehensive design system using Tailwind\\n                CSS, including component architecture, and theme customization.\\n              </p>\\n            </div>\\n            <div className=\\\"flex items-center gap-2 text-muted-foreground text-xs\\\">\\n              <span>8 min read</span>\\n              <span>·</span>\\n              <span>Updated 2 days ago</span>\\n            </div>\\n          </div>\\n        </HoverCardContent>\\n      </HoverCard>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"tooltip\",\n      \"hover card\",\n      \"image\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-366.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-366\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-366.tsx\",\n      \"content\": \"import { EllipsisIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open edit menu\\\"\\n          className=\\\"rounded-full shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <EllipsisIcon aria-hidden=\\\"true\\\" size={16} />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent>\\n        <DropdownMenuItem>Option 1</DropdownMenuItem>\\n        <DropdownMenuItem>Option 2</DropdownMenuItem>\\n        <DropdownMenuItem>Option 3</DropdownMenuItem>\\n        <DropdownMenuItem>Option 4</DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-367.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-367\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-367.tsx\",\n      \"content\": \"import { ChevronDownIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">\\n          Same width of trigger\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-me-1 opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"min-w-(--radix-dropdown-menu-trigger-width)\\\">\\n        <DropdownMenuItem>Option 1</DropdownMenuItem>\\n        <DropdownMenuItem>Option 2</DropdownMenuItem>\\n        <DropdownMenuItem>Option 3</DropdownMenuItem>\\n        <DropdownMenuItem>Option 4</DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-368.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-368\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-368.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  ChevronDownIcon,\\n  CopyPlusIcon,\\n  FilesIcon,\\n  Layers2Icon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">\\n          Menu with icons\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-me-1 opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent>\\n        <DropdownMenuItem>\\n          <CopyPlusIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          Copy\\n        </DropdownMenuItem>\\n        <DropdownMenuItem>\\n          <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          Edit\\n        </DropdownMenuItem>\\n        <DropdownMenuItem>\\n          <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          Group\\n        </DropdownMenuItem>\\n        <DropdownMenuItem>\\n          <FilesIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          Clone\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-369.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-369\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-369.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  ChevronDownIcon,\\n  CopyPlusIcon,\\n  FilesIcon,\\n  Layers2Icon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">\\n          Grouped items\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-me-1 opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent>\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <CopyPlusIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Copy\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Edit\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Group\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <FilesIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Clone\\n          </DropdownMenuItem>\\n          <DropdownMenuItem variant=\\\"destructive\\\">\\n            <TrashIcon aria-hidden=\\\"true\\\" size={16} />\\n            Delete\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-37.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-37\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/datefield-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-37.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Label } from \\\"react-aria-components\\\";\\n\\nimport { DateInput, TimeField } from \\\"@/registry/default/ui/datefield-rac\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TimeField className=\\\"*:not-first:mt-2\\\">\\n      <Label className=\\\"font-medium text-foreground text-sm\\\">Time input</Label>\\n      <DateInput />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateField.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </TimeField>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"date\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-370.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-370\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-370.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  ChevronDownIcon,\\n  CopyPlusIcon,\\n  FilesIcon,\\n  Layers2Icon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">\\n          Labeled grouped items\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-me-1 opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent>\\n        <DropdownMenuLabel>Label</DropdownMenuLabel>\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <CopyPlusIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Copy\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Edit\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuLabel>Label</DropdownMenuLabel>\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Group\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <FilesIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Clone\\n          </DropdownMenuItem>\\n          <DropdownMenuItem variant=\\\"destructive\\\">\\n            <TrashIcon aria-hidden=\\\"true\\\" size={16} />\\n            Delete\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-371.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-371\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-371.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuCheckboxItem,\\n  DropdownMenuContent,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\ntype Checked = boolean;\\n\\nexport default function Component() {\\n  const [nextjs, setNextjs] = useState<Checked>(false);\\n  const [sveltekit, setSveltekit] = useState<Checked>(true);\\n  const [astro, setAstro] = useState<Checked>(false);\\n  const [remix, setRemix] = useState<Checked>(false);\\n\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">\\n          Checkbox items\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-me-1 opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent>\\n        <DropdownMenuCheckboxItem checked={nextjs} onCheckedChange={setNextjs}>\\n          Next.js\\n        </DropdownMenuCheckboxItem>\\n        <DropdownMenuCheckboxItem\\n          checked={sveltekit}\\n          onCheckedChange={setSveltekit}\\n        >\\n          SvelteKit\\n        </DropdownMenuCheckboxItem>\\n        <DropdownMenuCheckboxItem\\n          checked={remix}\\n          disabled\\n          onCheckedChange={setRemix}\\n        >\\n          Remix\\n        </DropdownMenuCheckboxItem>\\n        <DropdownMenuCheckboxItem checked={astro} onCheckedChange={setAstro}>\\n          Astro\\n        </DropdownMenuCheckboxItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"checkbox\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-372.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-372\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-372.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuRadioGroup,\\n  DropdownMenuRadioItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  const [framework, setFramework] = useState(\\\"nextjs\\\");\\n\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">\\n          Radio items\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-me-1 opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent>\\n        <DropdownMenuRadioGroup onValueChange={setFramework} value={framework}>\\n          <DropdownMenuRadioItem value=\\\"nextjs\\\">Next.js</DropdownMenuRadioItem>\\n          <DropdownMenuRadioItem disabled value=\\\"sveltekit\\\">\\n            SvelteKit\\n          </DropdownMenuRadioItem>\\n          <DropdownMenuRadioItem value=\\\"remix\\\">Remix</DropdownMenuRadioItem>\\n          <DropdownMenuRadioItem value=\\\"astro\\\">Astro</DropdownMenuRadioItem>\\n        </DropdownMenuRadioGroup>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"radio\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-373.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-373\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-373.tsx\",\n      \"content\": \"import { ChevronDownIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuPortal,\\n  DropdownMenuSeparator,\\n  DropdownMenuShortcut,\\n  DropdownMenuSub,\\n  DropdownMenuSubContent,\\n  DropdownMenuSubTrigger,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">\\n          Rich menu\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-me-1 opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent>\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <span>Edit</span>\\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <span>Duplicate</span>\\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <span>Archive</span>\\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n          <DropdownMenuSub>\\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\\n            <DropdownMenuPortal>\\n              <DropdownMenuSubContent>\\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\\n                <DropdownMenuSeparator />\\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\\n              </DropdownMenuSubContent>\\n            </DropdownMenuPortal>\\n          </DropdownMenuSub>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>Share</DropdownMenuItem>\\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem variant=\\\"destructive\\\">\\n          <span>Delete</span>\\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"kbd\",\n      \"delete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-374.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-374\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-374.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  ArchiveRestoreIcon,\\n  ChevronDownIcon,\\n  PlusIcon,\\n  Share2Icon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuCheckboxItem,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuPortal,\\n  DropdownMenuRadioGroup,\\n  DropdownMenuRadioItem,\\n  DropdownMenuSeparator,\\n  DropdownMenuShortcut,\\n  DropdownMenuSub,\\n  DropdownMenuSubContent,\\n  DropdownMenuSubTrigger,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  const [framework, setFramework] = useState(\\\"nextjs\\\");\\n  const [emailNotifications, setEmailNotifications] = useState(false);\\n  const [pushNotifications, setPushNotifications] = useState(true);\\n\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button variant=\\\"outline\\\">\\n          Rich menu with icons\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-me-1 opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent>\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PlusIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>New</span>\\n            <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuSub>\\n            <DropdownMenuSubTrigger inset>Framework</DropdownMenuSubTrigger>\\n            <DropdownMenuPortal>\\n              <DropdownMenuSubContent>\\n                <DropdownMenuRadioGroup\\n                  onValueChange={setFramework}\\n                  value={framework}\\n                >\\n                  <DropdownMenuRadioItem value=\\\"nextjs\\\">\\n                    Next.js\\n                  </DropdownMenuRadioItem>\\n                  <DropdownMenuRadioItem disabled value=\\\"sveltekit\\\">\\n                    SvelteKit\\n                  </DropdownMenuRadioItem>\\n                  <DropdownMenuRadioItem value=\\\"remix\\\">\\n                    Remix\\n                  </DropdownMenuRadioItem>\\n                  <DropdownMenuRadioItem value=\\\"astro\\\">\\n                    Astro\\n                  </DropdownMenuRadioItem>\\n                </DropdownMenuRadioGroup>\\n              </DropdownMenuSubContent>\\n            </DropdownMenuPortal>\\n          </DropdownMenuSub>\\n          <DropdownMenuSub>\\n            <DropdownMenuSubTrigger inset>Notifications</DropdownMenuSubTrigger>\\n            <DropdownMenuPortal>\\n              <DropdownMenuSubContent>\\n                <DropdownMenuCheckboxItem\\n                  checked={emailNotifications}\\n                  onCheckedChange={setEmailNotifications}\\n                >\\n                  Email\\n                </DropdownMenuCheckboxItem>\\n                <DropdownMenuCheckboxItem\\n                  checked={pushNotifications}\\n                  onCheckedChange={setPushNotifications}\\n                >\\n                  Push\\n                </DropdownMenuCheckboxItem>\\n              </DropdownMenuSubContent>\\n            </DropdownMenuPortal>\\n          </DropdownMenuSub>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <Share2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Share</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <ArchiveRestoreIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60\\\"\\n              size={16}\\n            />\\n            <span>Archive</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem variant=\\\"destructive\\\">\\n          <TrashIcon aria-hidden=\\\"true\\\" size={16} />\\n          <span>Delete</span>\\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"checkbox\",\n      \"radio\",\n      \"delete\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-375.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-375\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-375.tsx\",\n      \"content\": \"import { CircleUserRoundIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button aria-label=\\\"Open account menu\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n          <CircleUserRoundIcon aria-hidden=\\\"true\\\" size={16} />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex flex-col\\\">\\n          <span>Signed in as</span>\\n          <span className=\\\"font-normal text-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>Option 1</DropdownMenuItem>\\n          <DropdownMenuItem>Option 2</DropdownMenuItem>\\n          <DropdownMenuItem>Option 3</DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>Logout</DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"user\",\n      \"profile\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-376.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-376\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-376.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  CircleUserRoundIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button aria-label=\\\"Open account menu\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n          <CircleUserRoundIcon aria-hidden=\\\"true\\\" size={16} />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex items-start gap-3\\\">\\n          <img\\n            alt=\\\"Avatar\\\"\\n            className=\\\"shrink-0 rounded-full\\\"\\n            height={32}\\n            src=\\\"/origin/avatar.jpg\\\"\\n            width={32}\\n          />\\n          <div className=\\\"flex min-w-0 flex-col\\\">\\n            <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n              Keith Kennedy\\n            </span>\\n            <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n              k.kennedy@coss.com\\n            </span>\\n          </div>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"user\",\n      \"profile\",\n      \"avatar\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-377.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-377\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-377.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  ChevronDownIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-378.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-378\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-378.tsx\",\n      \"content\": \"import {\\n  BookIcon,\\n  InfoIcon,\\n  LifeBuoyIcon,\\n  MessageCircleMoreIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open edit menu\\\"\\n          className=\\\"rounded-full shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <InfoIcon aria-hidden=\\\"true\\\" size={16} />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"pb-2\\\">\\n        <DropdownMenuLabel>Need help?</DropdownMenuLabel>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <BookIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Documentation\\n          </a>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <LifeBuoyIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Support\\n          </a>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <MessageCircleMoreIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60\\\"\\n              size={16}\\n            />\\n            Contact us\\n          </a>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"info\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-379.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-379\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-379.tsx\",\n      \"content\": \"import {\\n  Heading1Icon,\\n  Heading2Icon,\\n  MinusIcon,\\n  PlusIcon,\\n  TextQuoteIcon,\\n  TypeIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open edit menu\\\"\\n          className=\\\"rounded-full shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <PlusIcon aria-hidden=\\\"true\\\" size={16} />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"pb-2\\\">\\n        <DropdownMenuLabel>Add block</DropdownMenuLabel>\\n        <DropdownMenuItem>\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-8 items-center justify-center rounded-md border bg-background\\\"\\n          >\\n            <TypeIcon className=\\\"opacity-60\\\" size={16} />\\n          </div>\\n          <div>\\n            <div className=\\\"font-medium text-sm\\\">Text</div>\\n            <div className=\\\"text-muted-foreground text-xs\\\">\\n              Start writing with plain text\\n            </div>\\n          </div>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem>\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-8 items-center justify-center rounded-md border bg-background\\\"\\n          >\\n            <TextQuoteIcon className=\\\"opacity-60\\\" size={16} />\\n          </div>\\n          <div>\\n            <div className=\\\"font-medium text-sm\\\">Quote</div>\\n            <div className=\\\"text-muted-foreground text-xs\\\">Capture a quote</div>\\n          </div>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem>\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-8 items-center justify-center rounded-md border bg-background\\\"\\n          >\\n            <MinusIcon className=\\\"opacity-60\\\" size={16} />\\n          </div>\\n          <div>\\n            <div className=\\\"font-medium text-sm\\\">Divider</div>\\n            <div className=\\\"text-muted-foreground text-xs\\\">\\n              Visually divide blocks\\n            </div>\\n          </div>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem>\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-8 items-center justify-center rounded-md border bg-background\\\"\\n          >\\n            <Heading1Icon className=\\\"opacity-60\\\" size={16} />\\n          </div>\\n          <div>\\n            <div className=\\\"font-medium text-sm\\\">Heading 1</div>\\n            <div className=\\\"text-muted-foreground text-xs\\\">\\n              Big section heading\\n            </div>\\n          </div>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem>\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex size-8 items-center justify-center rounded-md border bg-background\\\"\\n          >\\n            <Heading2Icon className=\\\"opacity-60\\\" size={16} />\\n          </div>\\n          <div>\\n            <div className=\\\"font-medium text-sm\\\">Heading 2</div>\\n            <div className=\\\"text-muted-foreground text-xs\\\">\\n              Medium section subheading\\n            </div>\\n          </div>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"text editor\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-38.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-38\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/datefield-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-38.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ClockIcon } from \\\"lucide-react\\\";\\nimport { Label } from \\\"react-aria-components\\\";\\n\\nimport { DateInput, TimeField } from \\\"@/registry/default/ui/datefield-rac\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TimeField className=\\\"*:not-first:mt-2\\\">\\n      <Label className=\\\"font-medium text-foreground text-sm\\\">\\n        Time input with start icon\\n      </Label>\\n      <div className=\\\"relative\\\">\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 z-10 flex items-center justify-center ps-3 text-muted-foreground/80\\\">\\n          <ClockIcon aria-hidden=\\\"true\\\" size={16} />\\n        </div>\\n        <DateInput className=\\\"ps-9\\\" />\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateField.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </TimeField>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"date\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-380.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-380\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-380.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MonitorIcon, MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\ntype Theme = \\\"light\\\" | \\\"dark\\\" | \\\"system\\\";\\n\\nexport default function Component() {\\n  const [theme, setTheme] = useState<Theme>(\\\"system\\\");\\n\\n  // For demo purposes, we'll simulate system preference as \\\"light\\\"\\n  const systemPreference = \\\"light\\\";\\n  const displayTheme = theme === \\\"system\\\" ? systemPreference : theme;\\n\\n  return (\\n    <div>\\n      <DropdownMenu>\\n        <DropdownMenuTrigger asChild>\\n          <Button aria-label=\\\"Select theme\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n            {displayTheme === \\\"light\\\" && (\\n              <SunIcon aria-hidden=\\\"true\\\" size={16} />\\n            )}\\n            {displayTheme === \\\"dark\\\" && (\\n              <MoonIcon aria-hidden=\\\"true\\\" size={16} />\\n            )}\\n          </Button>\\n        </DropdownMenuTrigger>\\n        <DropdownMenuContent className=\\\"min-w-32\\\">\\n          <DropdownMenuItem onClick={() => setTheme(\\\"light\\\")}>\\n            <SunIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Light</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem onClick={() => setTheme(\\\"dark\\\")}>\\n            <MoonIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Dark</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem onClick={() => setTheme(\\\"system\\\")}>\\n            <MonitorIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>System</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuContent>\\n      </DropdownMenu>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"dropdown\",\n      \"darkmode\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-381.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-381\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-381.tsx\",\n      \"content\": \"import { ListFilterIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col gap-4\\\">\\n      <Popover>\\n        <PopoverTrigger asChild>\\n          <Button aria-label=\\\"Filters\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n            <ListFilterIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent className=\\\"w-36 p-3\\\">\\n          <div className=\\\"space-y-3\\\">\\n            <div className=\\\"font-medium text-muted-foreground text-xs\\\">\\n              Filters\\n            </div>\\n            <form>\\n              <div className=\\\"space-y-3\\\">\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <Checkbox id={`${id}-1`} />\\n                  <Label className=\\\"font-normal\\\" htmlFor={`${id}-1`}>\\n                    Real Time\\n                  </Label>\\n                </div>\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <Checkbox id={`${id}-2`} />\\n                  <Label className=\\\"font-normal\\\" htmlFor={`${id}-2`}>\\n                    Top Channels\\n                  </Label>\\n                </div>\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <Checkbox id={`${id}-3`} />\\n                  <Label className=\\\"font-normal\\\" htmlFor={`${id}-3`}>\\n                    Last Orders\\n                  </Label>\\n                </div>\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <Checkbox id={`${id}-4`} />\\n                  <Label className=\\\"font-normal\\\" htmlFor={`${id}-4`}>\\n                    Total Spent\\n                  </Label>\\n                </div>\\n              </div>\\n              <div\\n                aria-orientation=\\\"horizontal\\\"\\n                className=\\\"-mx-3 my-3 h-px bg-border\\\"\\n                role=\\\"separator\\\"\\n                tabIndex={-1}\\n              />\\n              <div className=\\\"flex justify-between gap-2\\\">\\n                <Button className=\\\"h-7 px-2\\\" size=\\\"sm\\\" variant=\\\"outline\\\">\\n                  Clear\\n                </Button>\\n                <Button className=\\\"h-7 px-2\\\" size=\\\"sm\\\">\\n                  Apply\\n                </Button>\\n              </div>\\n            </form>\\n          </div>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"filter\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-382.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-382\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-382.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst initialNotifications = [\\n  {\\n    action: \\\"requested review on\\\",\\n    id: 1,\\n    target: \\\"PR #42: Feature implementation\\\",\\n    timestamp: \\\"15 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"shared\\\",\\n    id: 2,\\n    target: \\\"New component library\\\",\\n    timestamp: \\\"45 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    id: 3,\\n    target: \\\"API integration task\\\",\\n    timestamp: \\\"4 hours ago\\\",\\n    unread: false,\\n    user: \\\"James Wilson\\\",\\n  },\\n  {\\n    action: \\\"replied to your comment in\\\",\\n    id: 4,\\n    target: \\\"Authentication flow\\\",\\n    timestamp: \\\"12 hours ago\\\",\\n    unread: false,\\n    user: \\\"Alex Morgan\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    id: 5,\\n    target: \\\"Dashboard redesign\\\",\\n    timestamp: \\\"2 days ago\\\",\\n    unread: false,\\n    user: \\\"Sarah Chen\\\",\\n  },\\n  {\\n    action: \\\"mentioned you in\\\",\\n    id: 6,\\n    target: \\\"coss.com open graph image\\\",\\n    timestamp: \\\"2 weeks ago\\\",\\n    unread: false,\\n    user: \\\"Miky Derya\\\",\\n  },\\n];\\n\\nfunction Dot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"6\\\"\\n      viewBox=\\\"0 0 6 6\\\"\\n      width=\\\"6\\\"\\n    >\\n      <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function Component() {\\n  const [notifications, setNotifications] = useState(initialNotifications);\\n  const unreadCount = notifications.filter((n) => n.unread).length;\\n\\n  const handleMarkAllAsRead = () => {\\n    setNotifications(\\n      notifications.map((notification) => ({\\n        ...notification,\\n        unread: false,\\n      })),\\n    );\\n  };\\n\\n  const handleNotificationClick = (id: number) => {\\n    setNotifications(\\n      notifications.map((notification) =>\\n        notification.id === id\\n          ? { ...notification, unread: false }\\n          : notification,\\n      ),\\n    );\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open notifications\\\"\\n          className=\\\"relative\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"outline\\\"\\n        >\\n          <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n          {unreadCount > 0 && (\\n            <Badge className=\\\"-top-2 -translate-x-1/2 absolute left-full min-w-5 px-1\\\">\\n              {unreadCount > 99 ? \\\"99+\\\" : unreadCount}\\n            </Badge>\\n          )}\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 p-1\\\">\\n        <div className=\\\"flex items-baseline justify-between gap-4 px-3 py-2\\\">\\n          <div className=\\\"font-semibold text-sm\\\">Notifications</div>\\n          {unreadCount > 0 && (\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleMarkAllAsRead}\\n              type=\\\"button\\\"\\n            >\\n              Mark all as read\\n            </button>\\n          )}\\n        </div>\\n        <div\\n          aria-orientation=\\\"horizontal\\\"\\n          className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n          role=\\\"separator\\\"\\n          tabIndex={-1}\\n        />\\n        {notifications.map((notification) => (\\n          <div\\n            className=\\\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\\\"\\n            key={notification.id}\\n          >\\n            <div className=\\\"relative flex items-start pe-3\\\">\\n              <div className=\\\"flex-1 space-y-1\\\">\\n                <button\\n                  className=\\\"text-left text-foreground/80 after:absolute after:inset-0\\\"\\n                  onClick={() => handleNotificationClick(notification.id)}\\n                  type=\\\"button\\\"\\n                >\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.user}\\n                  </span>{\\\" \\\"}\\n                  {notification.action}{\\\" \\\"}\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.target}\\n                  </span>\\n                  .\\n                </button>\\n                <div className=\\\"text-muted-foreground text-xs\\\">\\n                  {notification.timestamp}\\n                </div>\\n              </div>\\n              {notification.unread && (\\n                <div className=\\\"absolute end-0 self-center\\\">\\n                  <span className=\\\"sr-only\\\">Unread</span>\\n                  <Dot />\\n                </div>\\n              )}\\n            </div>\\n          </div>\\n        ))}\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"notification\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-383.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-383\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-383.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst initialNotifications = [\\n  {\\n    action: \\\"requested review on\\\",\\n    id: 1,\\n    image: \\\"/origin/avatar-80-01.jpg\\\",\\n    target: \\\"PR #42: Feature implementation\\\",\\n    timestamp: \\\"15 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"shared\\\",\\n    id: 2,\\n    image: \\\"/origin/avatar-80-02.jpg\\\",\\n    target: \\\"New component library\\\",\\n    timestamp: \\\"45 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    id: 3,\\n    image: \\\"/origin/avatar-80-03.jpg\\\",\\n    target: \\\"API integration task\\\",\\n    timestamp: \\\"4 hours ago\\\",\\n    unread: false,\\n    user: \\\"James Wilson\\\",\\n  },\\n  {\\n    action: \\\"replied to your comment in\\\",\\n    id: 4,\\n    image: \\\"/origin/avatar-80-04.jpg\\\",\\n    target: \\\"Authentication flow\\\",\\n    timestamp: \\\"12 hours ago\\\",\\n    unread: false,\\n    user: \\\"Alex Morgan\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    id: 5,\\n    image: \\\"/origin/avatar-80-05.jpg\\\",\\n    target: \\\"Dashboard redesign\\\",\\n    timestamp: \\\"2 days ago\\\",\\n    unread: false,\\n    user: \\\"Sarah Chen\\\",\\n  },\\n  {\\n    action: \\\"mentioned you in\\\",\\n    id: 6,\\n    image: \\\"/origin/avatar-80-06.jpg\\\",\\n    target: \\\"coss.com open graph image\\\",\\n    timestamp: \\\"2 weeks ago\\\",\\n    unread: false,\\n    user: \\\"Miky Derya\\\",\\n  },\\n];\\n\\nfunction Dot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"6\\\"\\n      viewBox=\\\"0 0 6 6\\\"\\n      width=\\\"6\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function Component() {\\n  const [notifications, setNotifications] = useState(initialNotifications);\\n  const unreadCount = notifications.filter((n) => n.unread).length;\\n\\n  const handleMarkAllAsRead = () => {\\n    setNotifications(\\n      notifications.map((notification) => ({\\n        ...notification,\\n        unread: false,\\n      })),\\n    );\\n  };\\n\\n  const handleNotificationClick = (id: number) => {\\n    setNotifications(\\n      notifications.map((notification) =>\\n        notification.id === id\\n          ? { ...notification, unread: false }\\n          : notification,\\n      ),\\n    );\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open notifications\\\"\\n          className=\\\"relative\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"outline\\\"\\n        >\\n          <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n          {unreadCount > 0 && (\\n            <Badge className=\\\"-top-2 -translate-x-1/2 absolute left-full min-w-5 px-1\\\">\\n              {unreadCount > 99 ? \\\"99+\\\" : unreadCount}\\n            </Badge>\\n          )}\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 p-1\\\">\\n        <div className=\\\"flex items-baseline justify-between gap-4 px-3 py-2\\\">\\n          <div className=\\\"font-semibold text-sm\\\">Notifications</div>\\n          {unreadCount > 0 && (\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleMarkAllAsRead}\\n              type=\\\"button\\\"\\n            >\\n              Mark all as read\\n            </button>\\n          )}\\n        </div>\\n        <div\\n          aria-orientation=\\\"horizontal\\\"\\n          className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n          role=\\\"separator\\\"\\n          tabIndex={-1}\\n        />\\n        {notifications.map((notification) => (\\n          <div\\n            className=\\\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\\\"\\n            key={notification.id}\\n          >\\n            <div className=\\\"relative flex items-start gap-3 pe-3\\\">\\n              <img\\n                alt={notification.user}\\n                className=\\\"size-9 rounded-md\\\"\\n                height={32}\\n                src={notification.image}\\n                width={32}\\n              />\\n              <div className=\\\"flex-1 space-y-1\\\">\\n                <button\\n                  className=\\\"text-left text-foreground/80 after:absolute after:inset-0\\\"\\n                  onClick={() => handleNotificationClick(notification.id)}\\n                  type=\\\"button\\\"\\n                >\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.user}\\n                  </span>{\\\" \\\"}\\n                  {notification.action}{\\\" \\\"}\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.target}\\n                  </span>\\n                  .\\n                </button>\\n                <div className=\\\"text-muted-foreground text-xs\\\">\\n                  {notification.timestamp}\\n                </div>\\n              </div>\\n              {notification.unread && (\\n                <div className=\\\"absolute end-0 self-center\\\">\\n                  <Dot />\\n                </div>\\n              )}\\n            </div>\\n          </div>\\n        ))}\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"notification\",\n      \"user\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-384.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-384\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-384.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button variant=\\\"outline\\\">Tooltip-like popover</Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"max-w-[280px] py-3 shadow-none\\\" side=\\\"top\\\">\\n        <div className=\\\"space-y-3\\\">\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"font-medium text-[13px]\\\">Popover with button</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              I am a popover that would like to look like a tooltip. I\\n              can&lsquo;t be a tooltip because of the interactive element inside\\n              me.\\n            </p>\\n          </div>\\n          <Button className=\\\"h-7 px-2\\\" size=\\\"sm\\\">\\n            Know more\\n          </Button>\\n        </div>\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-385.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-385\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-385.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst tips = [\\n  {\\n    description:\\n      \\\"This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.\\\",\\n    title: \\\"Welcome to Dashboard\\\",\\n  },\\n  {\\n    description:\\n      \\\"Use the toolbar above to create new projects, invite team members, or access settings.\\\",\\n    title: \\\"Quick Actions\\\",\\n  },\\n  {\\n    description:\\n      \\\"Click the support icon in the top right corner to access our help center and documentation.\\\",\\n    title: \\\"Need Help?\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const [currentTip, setCurrentTip] = useState(0);\\n\\n  const handleNavigation = () => {\\n    if (currentTip === tips.length - 1) {\\n      setCurrentTip(0);\\n    } else {\\n      setCurrentTip(currentTip + 1);\\n    }\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button variant=\\\"outline\\\">Tooltip-like with steps</Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"max-w-[280px] py-3 shadow-none\\\" side=\\\"top\\\">\\n        <div className=\\\"space-y-3\\\">\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"font-medium text-[13px]\\\">{tips[currentTip].title}</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              {tips[currentTip].description}\\n            </p>\\n          </div>\\n          <div className=\\\"flex items-center justify-between gap-2\\\">\\n            <span className=\\\"text-muted-foreground text-xs\\\">\\n              {currentTip + 1}/{tips.length}\\n            </span>\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleNavigation}\\n              type=\\\"button\\\"\\n            >\\n              {currentTip === tips.length - 1 ? \\\"Start over\\\" : \\\"Next\\\"}\\n            </button>\\n          </div>\\n        </div>\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-386.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-386\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-386.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ArrowLeftIcon, ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst tips = [\\n  {\\n    description:\\n      \\\"This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.\\\",\\n    title: \\\"Welcome to Dashboard\\\",\\n  },\\n  {\\n    description:\\n      \\\"Use the toolbar above to create new projects, invite team members, or access settings.\\\",\\n    title: \\\"Quick Actions\\\",\\n  },\\n  {\\n    description:\\n      \\\"Click the support icon in the top right corner to access our help center and documentation.\\\",\\n    title: \\\"Need Help?\\\",\\n  },\\n  {\\n    description:\\n      \\\"Press ⌘K to open the command palette. Use arrow keys to navigate and Enter to select an action.\\\",\\n    title: \\\"Keyboard Shortcuts\\\",\\n  },\\n  {\\n    description:\\n      \\\"Enable notifications to receive updates about your projects, team activity, and important deadlines.\\\",\\n    title: \\\"Stay Updated\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const [currentTip, setCurrentTip] = useState(0);\\n\\n  const handleNext = () => {\\n    if (currentTip < tips.length - 1) {\\n      setCurrentTip(currentTip + 1);\\n    }\\n  };\\n\\n  const handlePrev = () => {\\n    if (currentTip > 0) {\\n      setCurrentTip(currentTip - 1);\\n    }\\n  };\\n\\n  const isFirstTip = currentTip === 0;\\n  const isLastTip = currentTip === tips.length - 1;\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button variant=\\\"outline\\\">Tooltip-like with nav</Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"max-w-[280px] py-3 shadow-none\\\" side=\\\"top\\\">\\n        <div className=\\\"space-y-3\\\">\\n          <div className=\\\"space-y-1\\\">\\n            <p className=\\\"font-medium text-[13px]\\\">{tips[currentTip].title}</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              {tips[currentTip].description}\\n            </p>\\n          </div>\\n          <div className=\\\"flex items-center justify-between\\\">\\n            <span className=\\\"text-muted-foreground text-xs\\\">\\n              {currentTip + 1}/{tips.length}\\n            </span>\\n            <div className=\\\"flex gap-0.5\\\">\\n              <Button\\n                aria-label=\\\"Previous tip\\\"\\n                className=\\\"size-6\\\"\\n                disabled={isFirstTip}\\n                onClick={handlePrev}\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <ArrowLeftIcon aria-hidden=\\\"true\\\" size={14} />\\n              </Button>\\n              <Button\\n                aria-label=\\\"Next tip\\\"\\n                className=\\\"size-6\\\"\\n                disabled={isLastTip}\\n                onClick={handleNext}\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <ArrowRightIcon aria-hidden=\\\"true\\\" size={14} />\\n              </Button>\\n            </div>\\n          </div>\\n        </div>\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"tooltip\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-387.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-387\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-387.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  RiCodeFill,\\n  RiFacebookFill,\\n  RiMailLine,\\n  RiTwitterXFill,\\n} from \\\"@remixicon/react\\\";\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useId, useRef, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [copied, setCopied] = useState<boolean>(false);\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const handleCopy = () => {\\n    if (inputRef.current) {\\n      navigator.clipboard.writeText(inputRef.current.value);\\n      setCopied(true);\\n      setTimeout(() => setCopied(false), 1500);\\n    }\\n  };\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-4\\\">\\n      <Popover>\\n        <PopoverTrigger asChild>\\n          <Button variant=\\\"outline\\\">Share</Button>\\n        </PopoverTrigger>\\n        <PopoverContent className=\\\"w-72\\\">\\n          <div className=\\\"flex flex-col gap-3 text-center\\\">\\n            <div className=\\\"font-medium text-sm\\\">Share code</div>\\n            <div className=\\\"flex flex-wrap justify-center gap-2\\\">\\n              <Button aria-label=\\\"Embed\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n                <RiCodeFill aria-hidden=\\\"true\\\" size={16} />\\n              </Button>\\n              <Button\\n                aria-label=\\\"Share on Twitter\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"outline\\\"\\n              >\\n                <RiTwitterXFill aria-hidden=\\\"true\\\" size={16} />\\n              </Button>\\n              <Button\\n                aria-label=\\\"Share on Facebook\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"outline\\\"\\n              >\\n                <RiFacebookFill aria-hidden=\\\"true\\\" size={16} />\\n              </Button>\\n              <Button\\n                aria-label=\\\"Share via email\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"outline\\\"\\n              >\\n                <RiMailLine aria-hidden=\\\"true\\\" size={16} />\\n              </Button>\\n            </div>\\n            <div className=\\\"space-y-2\\\">\\n              <div className=\\\"relative\\\">\\n                <Input\\n                  aria-label=\\\"Share link\\\"\\n                  className=\\\"pe-9\\\"\\n                  defaultValue=\\\"https://coss.com/origin/Avx8HD\\\"\\n                  id={id}\\n                  readOnly\\n                  ref={inputRef}\\n                  type=\\\"text\\\"\\n                />\\n                <TooltipProvider delayDuration={0}>\\n                  <Tooltip>\\n                    <TooltipTrigger asChild>\\n                      <button\\n                        aria-label={copied ? \\\"Copied\\\" : \\\"Copy to clipboard\\\"}\\n                        className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\\\"\\n                        disabled={copied}\\n                        onClick={handleCopy}\\n                        type=\\\"button\\\"\\n                      >\\n                        <div\\n                          className={cn(\\n                            \\\"transition-all\\\",\\n                            copied\\n                              ? \\\"scale-100 opacity-100\\\"\\n                              : \\\"scale-0 opacity-0\\\",\\n                          )}\\n                        >\\n                          <CheckIcon\\n                            aria-hidden=\\\"true\\\"\\n                            className=\\\"stroke-emerald-500\\\"\\n                            size={16}\\n                          />\\n                        </div>\\n                        <div\\n                          className={cn(\\n                            \\\"absolute transition-all\\\",\\n                            copied\\n                              ? \\\"scale-0 opacity-0\\\"\\n                              : \\\"scale-100 opacity-100\\\",\\n                          )}\\n                        >\\n                          <CopyIcon aria-hidden=\\\"true\\\" size={16} />\\n                        </div>\\n                      </button>\\n                    </TooltipTrigger>\\n                    <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n                      Copy to clipboard\\n                    </TooltipContent>\\n                  </Tooltip>\\n                </TooltipProvider>\\n              </div>\\n            </div>\\n          </div>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"share\",\n      \"social\",\n      \"copy\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-388.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-388\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-388.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col gap-4\\\">\\n      <Popover>\\n        <PopoverTrigger asChild>\\n          <Button variant=\\\"outline\\\">Feedback</Button>\\n        </PopoverTrigger>\\n        <PopoverContent className=\\\"w-72\\\">\\n          <h2 className=\\\"mb-2 font-semibold text-sm\\\">Send us feedback</h2>\\n          <form className=\\\"space-y-3\\\">\\n            <Textarea\\n              aria-label=\\\"Send feedback\\\"\\n              id=\\\"feedback\\\"\\n              placeholder=\\\"How can we improve coss ui?\\\"\\n            />\\n            <div className=\\\"flex flex-col sm:flex-row sm:justify-end\\\">\\n              <Button size=\\\"sm\\\">Send feedback</Button>\\n            </div>\\n          </form>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"feedback\",\n      \"form\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-389.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-389\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-389.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  ClubIcon,\\n  DiamondIcon,\\n  HeartIcon,\\n  type LucideIcon,\\n  SpadeIcon,\\n} from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverAnchor,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\ninterface TourStep {\\n  icon: LucideIcon;\\n  title: string;\\n  description: string;\\n}\\n\\nconst tourSteps: TourStep[] = [\\n  {\\n    description:\\n      \\\"This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.\\\",\\n    icon: HeartIcon,\\n    title: \\\"Heart\\\",\\n  },\\n  {\\n    description:\\n      \\\"Use the toolbar above to create new projects, invite team members, or access settings.\\\",\\n    icon: DiamondIcon,\\n    title: \\\"Diamond\\\",\\n  },\\n  {\\n    description:\\n      \\\"Click the support icon in the top right corner to access our help center and documentation.\\\",\\n    icon: ClubIcon,\\n    title: \\\"Club\\\",\\n  },\\n  {\\n    description:\\n      \\\"Press ⌘K to open the command palette. Use arrow keys to navigate and Enter to select an action.\\\",\\n    icon: SpadeIcon,\\n    title: \\\"Spade\\\",\\n  },\\n];\\n\\ninterface CardProps {\\n  number: number;\\n  isActive: boolean;\\n}\\n\\nfunction Card({ number, isActive }: CardProps) {\\n  const content = (\\n    <div className=\\\"flex size-10 items-center justify-center rounded-md bg-secondary font-medium text-muted-foreground text-sm\\\">\\n      {number + 1}\\n    </div>\\n  );\\n\\n  return isActive ? <PopoverAnchor>{content}</PopoverAnchor> : content;\\n}\\n\\nexport default function Component() {\\n  const [currentTip, setCurrentTip] = useState(0);\\n\\n  const handleNavigation = () => {\\n    if (currentTip === tourSteps.length - 1) {\\n      setCurrentTip(0);\\n    } else {\\n      setCurrentTip(currentTip + 1);\\n    }\\n  };\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-4\\\">\\n      <Popover\\n        onOpenChange={(open) => {\\n          if (open) setCurrentTip(0);\\n        }}\\n      >\\n        <div className=\\\"grid grid-cols-2 place-items-center gap-4\\\">\\n          {tourSteps.map((step, index) => (\\n            <Card\\n              isActive={currentTip === index}\\n              key={step.title}\\n              number={index}\\n            />\\n          ))}\\n        </div>\\n\\n        <PopoverTrigger asChild>\\n          <Button variant=\\\"outline\\\">Start tour</Button>\\n        </PopoverTrigger>\\n\\n        <PopoverContent\\n          className=\\\"max-w-[280px] py-3 shadow-none\\\"\\n          showArrow={true}\\n          side={currentTip % 2 === 0 ? \\\"left\\\" : \\\"right\\\"}\\n        >\\n          <div className=\\\"space-y-3\\\">\\n            <div className=\\\"space-y-1\\\">\\n              <p className=\\\"font-medium text-[13px]\\\">\\n                {tourSteps[currentTip].title}\\n              </p>\\n              <p className=\\\"text-muted-foreground text-xs\\\">\\n                {tourSteps[currentTip].description}\\n              </p>\\n            </div>\\n            <div className=\\\"flex items-center justify-between gap-2\\\">\\n              <span className=\\\"text-muted-foreground text-xs\\\">\\n                {currentTip + 1}/{tourSteps.length}\\n              </span>\\n              <button\\n                className=\\\"font-medium text-xs hover:underline\\\"\\n                onClick={handleNavigation}\\n                type=\\\"button\\\"\\n              >\\n                {currentTip === tourSteps.length - 1 ? \\\"Start over\\\" : \\\"Next\\\"}\\n              </button>\\n            </div>\\n          </div>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"popover\",\n      \"tour\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-39.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-39\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/datefield-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-39.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ClockIcon } from \\\"lucide-react\\\";\\nimport { Label } from \\\"react-aria-components\\\";\\n\\nimport { DateInput, TimeField } from \\\"@/registry/default/ui/datefield-rac\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TimeField className=\\\"*:not-first:mt-2\\\">\\n      <Label className=\\\"font-medium text-foreground text-sm\\\">\\n        Time input with end icon\\n      </Label>\\n      <div className=\\\"relative\\\">\\n        <DateInput />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center justify-center pe-3 text-muted-foreground/80\\\">\\n          <ClockIcon aria-hidden=\\\"true\\\" size={16} />\\n        </div>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateField.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </TimeField>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"date\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-390.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-390\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-390.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Avatar>\\n      <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n      <AvatarFallback>KK</AvatarFallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-391.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-391\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-391.tsx\",\n      \"content\": \"import { Avatar, AvatarFallback } from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Avatar>\\n      <AvatarFallback>KK</AvatarFallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-392.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-392\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-392.tsx\",\n      \"content\": \"import { UserRoundIcon } from \\\"lucide-react\\\";\\n\\nimport { Avatar, AvatarFallback } from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Avatar>\\n      <AvatarFallback>\\n        <UserRoundIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n      </AvatarFallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-393.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-393\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-393.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Avatar className=\\\"rounded-md\\\">\\n      <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n      <AvatarFallback>KK</AvatarFallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-394.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-394\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-394.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar>\\n        <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n        <AvatarFallback>KK</AvatarFallback>\\n      </Avatar>\\n      <span className=\\\"-end-0.5 -bottom-0.5 absolute size-3 rounded-full border-2 border-background bg-emerald-500\\\">\\n        <span className=\\\"sr-only\\\">Online</span>\\n      </span>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\",\n      \"status\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-395.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-395\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-395.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar>\\n        <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n        <AvatarFallback>KK</AvatarFallback>\\n      </Avatar>\\n      <span className=\\\"-end-0.5 -bottom-0.5 absolute size-3 rounded-full border-2 border-background bg-muted-foreground\\\">\\n        <span className=\\\"sr-only\\\">Offline</span>\\n      </span>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\",\n      \"status\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-396.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-396\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-396.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar className=\\\"rounded-md\\\">\\n        <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n        <AvatarFallback>KK</AvatarFallback>\\n      </Avatar>\\n      <span className=\\\"-end-1 -top-1 absolute size-3 rounded-full border-2 border-background bg-emerald-500\\\">\\n        <span className=\\\"sr-only\\\">Online</span>\\n      </span>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\",\n      \"status\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-397.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-397\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-397.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar>\\n        <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n        <AvatarFallback>KK</AvatarFallback>\\n      </Avatar>\\n      <span className=\\\"-end-1.5 -top-1.5 absolute\\\">\\n        <span className=\\\"sr-only\\\">Verified</span>\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          height=\\\"20\\\"\\n          viewBox=\\\"0 0 24 24\\\"\\n          width=\\\"20\\\"\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <path\\n            className=\\\"fill-background\\\"\\n            d=\\\"M3.046 8.277A4.402 4.402 0 0 1 8.303 3.03a4.4 4.4 0 0 1 7.411 0 4.397 4.397 0 0 1 5.19 3.068c.207.713.23 1.466.067 2.19a4.4 4.4 0 0 1 0 7.415 4.403 4.403 0 0 1-3.06 5.187 4.398 4.398 0 0 1-2.186.072 4.398 4.398 0 0 1-7.422 0 4.398 4.398 0 0 1-5.257-5.248 4.4 4.4 0 0 1 0-7.437Z\\\"\\n          />\\n          <path\\n            className=\\\"fill-primary\\\"\\n            d=\\\"M4.674 8.954a3.602 3.602 0 0 1 4.301-4.293 3.6 3.6 0 0 1 6.064 0 3.598 3.598 0 0 1 4.3 4.302 3.6 3.6 0 0 1 0 6.067 3.6 3.6 0 0 1-4.29 4.302 3.6 3.6 0 0 1-6.074 0 3.598 3.598 0 0 1-4.3-4.293 3.6 3.6 0 0 1 0-6.085Z\\\"\\n          />\\n          <path\\n            className=\\\"fill-background\\\"\\n            d=\\\"M15.707 9.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z\\\"\\n          />\\n        </svg>\\n      </span>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\",\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-398.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-398\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-398.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar>\\n        <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n        <AvatarFallback>KK</AvatarFallback>\\n      </Avatar>\\n      <Badge className=\\\"-top-1.5 -translate-x-3.5 absolute left-full min-w-5 border-background px-1\\\">\\n        6\\n      </Badge>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\",\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-399.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-399\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-399.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar className=\\\"rounded-md\\\">\\n        <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n        <AvatarFallback>KK</AvatarFallback>\\n      </Avatar>\\n      <Badge className=\\\"-top-2 -translate-x-3 absolute left-full min-w-5 border-background px-1\\\">\\n        6\\n      </Badge>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\",\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-40.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-40\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/datefield-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-40.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Label } from \\\"react-aria-components\\\";\\n\\nimport { DateField, DateInput } from \\\"@/registry/default/ui/datefield-rac\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DateField className=\\\"*:not-first:mt-2\\\" granularity=\\\"minute\\\" hourCycle={24}>\\n      <Label className=\\\"font-medium text-foreground text-sm\\\">\\n        Date and time input\\n      </Label>\\n      <DateInput />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateField.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </DateField>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"date\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-400.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-400\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-400.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-1.5 flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-1 ring-background\\\"\\n        height={20}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={20}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-1 ring-background\\\"\\n        height={20}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={20}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-1 ring-background\\\"\\n        height={20}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={20}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-1 ring-background\\\"\\n        height={20}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={20}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"user\",\n      \"profile\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-401.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-401\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-401.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-[0.45rem] flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-1 ring-background\\\"\\n        height={24}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={24}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-1 ring-background\\\"\\n        height={24}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={24}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-1 ring-background\\\"\\n        height={24}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={24}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-1 ring-background\\\"\\n        height={24}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={24}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-402.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-402\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-402.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-[0.525rem] flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={28}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={28}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={28}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={28}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={28}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={28}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={28}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={28}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-403.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-403\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-403.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-[0.6rem] flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={32}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={32}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={32}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={32}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={32}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={32}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={32}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={32}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-404.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-404\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-404.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-[0.675rem] flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={36}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={36}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={36}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={36}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={36}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={36}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={36}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={36}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-405.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-405\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-405.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-3 flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={40}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={40}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={40}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={40}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={40}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={40}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={40}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={40}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-406.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-406\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-406.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-[0.9rem] flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={48}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={48}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={48}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={48}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={48}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={48}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={48}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={48}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-407.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-407\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-407.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-[1.2rem] flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={64}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={64}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={64}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={64}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={64}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={64}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={64}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={64}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-408.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-408\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-408.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"-space-x-6 flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={80}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={80}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={80}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={80}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={80}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={80}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={80}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={80}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-409.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-409\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-409.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"-space-x-3 flex\\\">\\n      <img\\n        alt=\\\"Avatar 01\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={40}\\n        src=\\\"/origin/avatar-80-03.jpg\\\"\\n        width={40}\\n      />\\n      <img\\n        alt=\\\"Avatar 02\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={40}\\n        src=\\\"/origin/avatar-80-04.jpg\\\"\\n        width={40}\\n      />\\n      <img\\n        alt=\\\"Avatar 03\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={40}\\n        src=\\\"/origin/avatar-80-05.jpg\\\"\\n        width={40}\\n      />\\n      <img\\n        alt=\\\"Avatar 04\\\"\\n        className=\\\"rounded-full ring-2 ring-background\\\"\\n        height={40}\\n        src=\\\"/origin/avatar-80-06.jpg\\\"\\n        width={40}\\n      />\\n      <Button\\n        className=\\\"flex size-10 items-center justify-center rounded-full bg-secondary text-muted-foreground text-xs ring-2 ring-background hover:bg-secondary hover:text-foreground\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"secondary\\\"\\n      >\\n        +3\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-41.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-41\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar-rac.json\",\n    \"https://coss.com/origin/r/datefield-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-41.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport {\\n  Button,\\n  DatePicker,\\n  Dialog,\\n  Group,\\n  Label,\\n  Popover,\\n} from \\\"react-aria-components\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar-rac\\\";\\nimport { DateInput } from \\\"@/registry/default/ui/datefield-rac\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DatePicker className=\\\"*:not-first:mt-2\\\">\\n      <Label className=\\\"font-medium text-foreground text-sm\\\">Date picker</Label>\\n      <div className=\\\"flex\\\">\\n        <Group className=\\\"w-full\\\">\\n          <DateInput className=\\\"pe-9\\\" />\\n        </Group>\\n        <Button className=\\\"-ms-9 -me-px z-10 flex w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\">\\n          <CalendarIcon size={16} />\\n        </Button>\\n      </div>\\n      <Popover\\n        className=\\\"data-[entering]:fade-in-0 data-[entering]:zoom-in-95 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-lg border bg-background text-popover-foreground shadow-lg outline-hidden data-entering:animate-in data-exiting:animate-out\\\"\\n        offset={4}\\n      >\\n        <Dialog className=\\\"max-h-[inherit] overflow-auto p-2\\\">\\n          <Calendar />\\n        </Dialog>\\n      </Popover>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DatePicker.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </DatePicker>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"date\",\n      \"calendar\",\n      \"picker\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-410.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-410\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-410.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex items-center rounded-full bg-muted p-0.5\\\">\\n      <div className=\\\"-space-x-3 flex\\\">\\n        <img\\n          alt=\\\"Avatar 01\\\"\\n          className=\\\"rounded-full ring-2 ring-muted\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-80-03.jpg\\\"\\n          width={40}\\n        />\\n        <img\\n          alt=\\\"Avatar 02\\\"\\n          className=\\\"rounded-full ring-2 ring-muted\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-80-04.jpg\\\"\\n          width={40}\\n        />\\n        <img\\n          alt=\\\"Avatar 03\\\"\\n          className=\\\"rounded-full ring-2 ring-muted\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-80-05.jpg\\\"\\n          width={40}\\n        />\\n        <img\\n          alt=\\\"Avatar 04\\\"\\n          className=\\\"rounded-full ring-2 ring-muted\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-80-06.jpg\\\"\\n          width={40}\\n        />\\n      </div>\\n      <Button\\n        className=\\\"flex items-center justify-center rounded-full bg-transparent px-3 text-muted-foreground text-xs shadow-none hover:bg-transparent hover:text-foreground\\\"\\n        variant=\\\"secondary\\\"\\n      >\\n        +3\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-411.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-411\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-411.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex items-center rounded-full border bg-background p-1 shadow-sm\\\">\\n      <div className=\\\"-space-x-3 flex\\\">\\n        <img\\n          alt=\\\"Avatar 01\\\"\\n          className=\\\"rounded-full ring-2 ring-background\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-80-03.jpg\\\"\\n          width={40}\\n        />\\n        <img\\n          alt=\\\"Avatar 02\\\"\\n          className=\\\"rounded-full ring-2 ring-background\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-80-04.jpg\\\"\\n          width={40}\\n        />\\n        <img\\n          alt=\\\"Avatar 03\\\"\\n          className=\\\"rounded-full ring-2 ring-background\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-80-05.jpg\\\"\\n          width={40}\\n        />\\n        <img\\n          alt=\\\"Avatar 04\\\"\\n          className=\\\"rounded-full ring-2 ring-background\\\"\\n          height={40}\\n          src=\\\"/origin/avatar-80-06.jpg\\\"\\n          width={40}\\n        />\\n      </div>\\n      <Button\\n        className=\\\"flex items-center justify-center rounded-full bg-transparent px-3 text-muted-foreground text-xs shadow-none hover:bg-transparent hover:text-foreground\\\"\\n        variant=\\\"secondary\\\"\\n      >\\n        +3\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-412.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-412\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-412.tsx\",\n      \"content\": \"export default function Component() {\\n  return (\\n    <div className=\\\"flex items-center rounded-full border bg-background p-1 shadow-sm\\\">\\n      <div className=\\\"-space-x-1.5 flex\\\">\\n        <img\\n          alt=\\\"Avatar 01\\\"\\n          className=\\\"rounded-full ring-1 ring-background\\\"\\n          height={20}\\n          src=\\\"/origin/avatar-80-03.jpg\\\"\\n          width={20}\\n        />\\n        <img\\n          alt=\\\"Avatar 02\\\"\\n          className=\\\"rounded-full ring-1 ring-background\\\"\\n          height={20}\\n          src=\\\"/origin/avatar-80-04.jpg\\\"\\n          width={20}\\n        />\\n        <img\\n          alt=\\\"Avatar 03\\\"\\n          className=\\\"rounded-full ring-1 ring-background\\\"\\n          height={20}\\n          src=\\\"/origin/avatar-80-05.jpg\\\"\\n          width={20}\\n        />\\n        <img\\n          alt=\\\"Avatar 04\\\"\\n          className=\\\"rounded-full ring-1 ring-background\\\"\\n          height={20}\\n          src=\\\"/origin/avatar-80-06.jpg\\\"\\n          width={20}\\n        />\\n      </div>\\n      <p className=\\\"px-2 text-muted-foreground text-xs\\\">\\n        Trusted by <strong className=\\\"font-medium text-foreground\\\">60K+</strong>{\\\" \\\"}\\n        developers.\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"avatar\",\n      \"avatar group\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-413.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-413\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-413.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return <Badge>Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-414.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-414\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-414.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return <Badge className=\\\"rounded\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-415.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-415\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-415.tsx\",\n      \"content\": \"import { ZapIcon } from \\\"lucide-react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Badge>\\n      <ZapIcon aria-hidden=\\\"true\\\" className=\\\"-ms-0.5 opacity-60\\\" size={12} />\\n      Badge\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-416.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-416\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-416.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return <Badge className=\\\"min-w-5 px-1\\\">6</Badge>;\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\",\n      \"counter\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-417.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-417\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-417.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Badge asChild>\\n      <a href=\\\"#\\\">Link</a>\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-418.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-418\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-418.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Badge className=\\\"items-baseline gap-1.5\\\">\\n      Badge\\n      <span className=\\\"font-medium text-[0.625rem] text-primary-foreground/60\\\">\\n        73\\n      </span>\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\",\n      \"counter\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-419.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-419\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-419.tsx\",\n      \"content\": \"import { CheckIcon } from \\\"lucide-react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Badge className=\\\"gap-1\\\" variant=\\\"outline\\\">\\n      <CheckIcon aria-hidden=\\\"true\\\" className=\\\"text-emerald-500\\\" size={12} />\\n      Badge\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\",\n      \"status\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-42.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-42\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar-rac.json\",\n    \"https://coss.com/origin/r/datefield-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-42.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport {\\n  Button,\\n  DateRangePicker,\\n  Dialog,\\n  Group,\\n  Label,\\n  Popover,\\n} from \\\"react-aria-components\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { RangeCalendar } from \\\"@/registry/default/ui/calendar-rac\\\";\\nimport { DateInput, dateInputStyle } from \\\"@/registry/default/ui/datefield-rac\\\";\\n\\nexport default function Component() {\\n  return (\\n    <DateRangePicker className=\\\"*:not-first:mt-2\\\">\\n      <Label className=\\\"font-medium text-foreground text-sm\\\">\\n        Date range picker\\n      </Label>\\n      <div className=\\\"flex\\\">\\n        <Group className={cn(dateInputStyle, \\\"pe-9\\\")}>\\n          <DateInput slot=\\\"start\\\" unstyled />\\n          <span aria-hidden=\\\"true\\\" className=\\\"px-2 text-muted-foreground/70\\\">\\n            -\\n          </span>\\n          <DateInput slot=\\\"end\\\" unstyled />\\n        </Group>\\n        <Button className=\\\"-ms-9 -me-px z-10 flex w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\">\\n          <CalendarIcon size={16} />\\n        </Button>\\n      </div>\\n      <Popover\\n        className=\\\"data-[entering]:fade-in-0 data-[entering]:zoom-in-95 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-md border bg-background text-popover-foreground shadow-lg outline-hidden data-entering:animate-in data-exiting:animate-out\\\"\\n        offset={4}\\n      >\\n        <Dialog className=\\\"max-h-[inherit] overflow-auto p-2\\\">\\n          <RangeCalendar />\\n        </Dialog>\\n      </Popover>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </DateRangePicker>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"date\",\n      \"calendar\",\n      \"range calendar\",\n      \"picker\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-420.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-420\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-420.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Badge className=\\\"gap-1.5\\\" variant=\\\"outline\\\">\\n      <span\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n      />\\n      Badge\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\",\n      \"status\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-421.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-421\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-421.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Badge className=\\\"gap-1.5\\\" variant=\\\"outline\\\">\\n      <span aria-hidden=\\\"true\\\" className=\\\"size-1.5 rounded-full bg-amber-500\\\" />\\n      Badge\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\",\n      \"status\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-422.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-422\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-422.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Badge className=\\\"gap-1.5\\\" variant=\\\"outline\\\">\\n      <span aria-hidden=\\\"true\\\" className=\\\"size-1.5 rounded-full bg-red-500\\\" />\\n      Badge\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\",\n      \"status\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-423.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-423\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/checkbox.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-423.tsx\",\n      \"content\": \"import { CheckIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <Badge className=\\\"relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\">\\n      <Checkbox\\n        className=\\\"peer sr-only after:absolute after:inset-0\\\"\\n        defaultChecked\\n        id={id}\\n      />\\n      <CheckIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"hidden peer-data-[state=checked]:block\\\"\\n        size={12}\\n      />\\n      <label\\n        className=\\\"cursor-pointer select-none after:absolute after:inset-0\\\"\\n        htmlFor={id}\\n      >\\n        Selectable\\n      </label>\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\",\n      \"checkbox\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-424.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-424\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-424.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  const [isActive, setIsActive] = useState(true);\\n\\n  if (!isActive) return null;\\n\\n  return (\\n    <Badge className=\\\"gap-0\\\">\\n      Removable\\n      <button\\n        className=\\\"-my-px -ms-px -me-1.5 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-primary-foreground/60 outline-none transition-[color,box-shadow] hover:text-primary-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n        onClick={() => setIsActive(false)}\\n        type=\\\"button\\\"\\n      >\\n        <XIcon aria-hidden=\\\"true\\\" size={12} />\\n      </button>\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-425.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-425\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-425.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Component() {\\n  const [isActive, setIsActive] = useState(true);\\n\\n  if (!isActive) return null;\\n\\n  return (\\n    <Badge className=\\\"gap-0 rounded-md px-2 py-1\\\" variant=\\\"outline\\\">\\n      Tag\\n      <button\\n        aria-label=\\\"Delete\\\"\\n        className=\\\"-my-[5px] -ms-0.5 -me-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-foreground/60 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n        onClick={() => setIsActive(false)}\\n        type=\\\"button\\\"\\n      >\\n        <XIcon aria-hidden=\\\"true\\\" size={14} />\\n      </button>\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"badge\",\n      \"chip\",\n      \"tag\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-426.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-426\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-426.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList>\\n        <TabsTrigger value=\\\"tab-1\\\">Tab 1</TabsTrigger>\\n        <TabsTrigger value=\\\"tab-2\\\">Tab 2</TabsTrigger>\\n        <TabsTrigger value=\\\"tab-3\\\">Tab 3</TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-427.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-427\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-427.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"bg-transparent\\\">\\n        <TabsTrigger\\n          className=\\\"data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          Tab 1\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          Tab 2\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          Tab 3\\n        </TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-428.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-428\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-428.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"gap-1 bg-transparent\\\">\\n        <TabsTrigger\\n          className=\\\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          Tab 1\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          Tab 2\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          Tab 3\\n        </TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-429.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-429\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-429.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"h-auto rounded-none border-b bg-transparent p-0\\\">\\n        <TabsTrigger\\n          className=\\\"relative rounded-none py-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          Tab 1\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"relative rounded-none py-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          Tab 2\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"relative rounded-none py-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          Tab 3\\n        </TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-43.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-43\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\",\n    \"react-aria\",\n    \"@internationalized/date\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar-rac.json\",\n    \"https://coss.com/origin/r/datefield-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-43.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { getLocalTimeZone, isWeekend, today } from \\\"@internationalized/date\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useLocale } from \\\"react-aria\\\";\\nimport type { DateValue } from \\\"react-aria-components\\\";\\nimport {\\n  Button,\\n  DateRangePicker,\\n  Dialog,\\n  Group,\\n  Label,\\n  Popover,\\n} from \\\"react-aria-components\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { RangeCalendar } from \\\"@/registry/default/ui/calendar-rac\\\";\\nimport { DateInput, dateInputStyle } from \\\"@/registry/default/ui/datefield-rac\\\";\\n\\nexport default function Component() {\\n  const now = today(getLocalTimeZone());\\n  const disabledRanges = [\\n    [now, now.add({ days: 5 })],\\n    [now.add({ days: 14 }), now.add({ days: 16 })],\\n    [now.add({ days: 23 }), now.add({ days: 24 })],\\n  ];\\n\\n  const { locale } = useLocale();\\n  const isDateUnavailable = (date: DateValue) =>\\n    isWeekend(date, locale) ||\\n    disabledRanges.some(\\n      (interval) =>\\n        date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,\\n    );\\n  const validate = (value: { start: DateValue; end: DateValue } | null) =>\\n    disabledRanges.some(\\n      (interval) =>\\n        value &&\\n        value.end.compare(interval[0]) >= 0 &&\\n        value.start.compare(interval[1]) <= 0,\\n    )\\n      ? \\\"Selected date range may not include unavailable dates.\\\"\\n      : null;\\n\\n  return (\\n    <DateRangePicker\\n      className=\\\"*:not-first:mt-2\\\"\\n      isDateUnavailable={isDateUnavailable}\\n      validate={validate}\\n    >\\n      <Label className=\\\"font-medium text-foreground text-sm\\\">\\n        Date range picker (unavailable dates)\\n      </Label>\\n      <div className=\\\"flex\\\">\\n        <Group className={cn(dateInputStyle, \\\"pe-9\\\")}>\\n          <DateInput slot=\\\"start\\\" unstyled />\\n          <span aria-hidden=\\\"true\\\" className=\\\"px-2 text-muted-foreground/70\\\">\\n            -\\n          </span>\\n          <DateInput slot=\\\"end\\\" unstyled />\\n        </Group>\\n        <Button className=\\\"-ms-9 -me-px z-10 flex w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\\\">\\n          <CalendarIcon size={16} />\\n        </Button>\\n      </div>\\n      <Popover\\n        className=\\\"data-[entering]:fade-in-0 data-[entering]:zoom-in-95 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-md border bg-background text-popover-foreground shadow-lg outline-hidden data-entering:animate-in data-exiting:animate-out\\\"\\n        offset={4}\\n      >\\n        <Dialog className=\\\"max-h-[inherit] overflow-auto p-2\\\">\\n          <RangeCalendar isDateUnavailable={isDateUnavailable} minValue={now} />\\n        </Dialog>\\n      </Popover>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </DateRangePicker>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"date\",\n      \"calendar\",\n      \"range calendar\",\n      \"picker\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-430.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-430\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-430.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"h-auto gap-2 rounded-none border-b bg-transparent px-0 py-1 text-foreground\\\">\\n        <TabsTrigger\\n          className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          Tab 1\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          Tab 2\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          Tab 3\\n        </TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-431.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-431\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-431.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"-space-x-px h-auto bg-background p-0 shadow-xs rtl:space-x-reverse\\\">\\n        <TabsTrigger\\n          className=\\\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          Tab 1\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          Tab 2\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          Tab 3\\n        </TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-432.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-432\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-432.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"relative h-auto w-full gap-0.5 bg-transparent p-0 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border\\\">\\n        <TabsTrigger\\n          className=\\\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          Tab 1\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          Tab 2\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          Tab 3\\n        </TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-433.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-433\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/scroll-area.json\",\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-433.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { ScrollArea, ScrollBar } from \\\"@/registry/default/ui/scroll-area\\\";\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <ScrollArea>\\n        <TabsList className=\\\"mb-3\\\">\\n          <TabsTrigger value=\\\"tab-1\\\">\\n            <HouseIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Overview\\n          </TabsTrigger>\\n          <TabsTrigger className=\\\"group\\\" value=\\\"tab-2\\\">\\n            <PanelsTopLeftIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Projects\\n            <Badge\\n              className=\\\"ms-1.5 min-w-5 bg-primary/15 px-1 transition-opacity group-data-[state=inactive]:opacity-50\\\"\\n              variant=\\\"secondary\\\"\\n            >\\n              3\\n            </Badge>\\n          </TabsTrigger>\\n          <TabsTrigger className=\\\"group\\\" value=\\\"tab-3\\\">\\n            <BoxIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Packages\\n            <Badge className=\\\"ms-1.5 transition-opacity group-data-[state=inactive]:opacity-50\\\">\\n              New\\n            </Badge>\\n          </TabsTrigger>\\n        </TabsList>\\n        <ScrollBar orientation=\\\"horizontal\\\" />\\n      </ScrollArea>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-434.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-434\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/scroll-area.json\",\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-434.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { ScrollArea, ScrollBar } from \\\"@/registry/default/ui/scroll-area\\\";\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <ScrollArea>\\n        <TabsList className=\\\"mb-3 gap-1 bg-transparent\\\">\\n          <TabsTrigger\\n            className=\\\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\\\"\\n            value=\\\"tab-1\\\"\\n          >\\n            <HouseIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Overview\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\\\"\\n            value=\\\"tab-2\\\"\\n          >\\n            <PanelsTopLeftIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Projects\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\\\"\\n            value=\\\"tab-3\\\"\\n          >\\n            <BoxIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Packages\\n          </TabsTrigger>\\n        </TabsList>\\n        <ScrollBar orientation=\\\"horizontal\\\" />\\n      </ScrollArea>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-435.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-435\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/scroll-area.json\",\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-435.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { ScrollArea, ScrollBar } from \\\"@/registry/default/ui/scroll-area\\\";\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <ScrollArea>\\n        <TabsList className=\\\"-space-x-px mb-3 h-auto bg-background p-0 shadow-xs rtl:space-x-reverse\\\">\\n          <TabsTrigger\\n            className=\\\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-1\\\"\\n          >\\n            <HouseIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Overview\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-2\\\"\\n          >\\n            <PanelsTopLeftIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Projects\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-3\\\"\\n          >\\n            <BoxIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Packages\\n          </TabsTrigger>\\n        </TabsList>\\n        <ScrollBar orientation=\\\"horizontal\\\" />\\n      </ScrollArea>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-436.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-436\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/scroll-area.json\",\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-436.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { ScrollArea, ScrollBar } from \\\"@/registry/default/ui/scroll-area\\\";\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <ScrollArea>\\n        <TabsList className=\\\"relative mb-3 h-auto w-full gap-0.5 bg-transparent p-0 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border\\\">\\n          <TabsTrigger\\n            className=\\\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\\\"\\n            value=\\\"tab-1\\\"\\n          >\\n            <HouseIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Overview\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\\\"\\n            value=\\\"tab-2\\\"\\n          >\\n            <PanelsTopLeftIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Projects\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\\\"\\n            value=\\\"tab-3\\\"\\n          >\\n            <BoxIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Packages\\n          </TabsTrigger>\\n        </TabsList>\\n        <ScrollBar orientation=\\\"horizontal\\\" />\\n      </ScrollArea>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-437.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-437\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/scroll-area.json\",\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-437.tsx\",\n      \"content\": \"import {\\n  BoxIcon,\\n  ChartLine,\\n  HouseIcon,\\n  PanelsTopLeftIcon,\\n  SettingsIcon,\\n  UsersRoundIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { ScrollArea, ScrollBar } from \\\"@/registry/default/ui/scroll-area\\\";\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <ScrollArea>\\n        <TabsList className=\\\"mb-3 h-auto gap-2 rounded-none border-b bg-transparent px-0 py-1 text-foreground\\\">\\n          <TabsTrigger\\n            className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-1\\\"\\n          >\\n            <HouseIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Overview\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-2\\\"\\n          >\\n            <PanelsTopLeftIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Projects\\n            <Badge\\n              className=\\\"ms-1.5 min-w-5 bg-primary/15 px-1\\\"\\n              variant=\\\"secondary\\\"\\n            >\\n              3\\n            </Badge>\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-3\\\"\\n          >\\n            <BoxIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Packages\\n            <Badge className=\\\"ms-1.5\\\">New</Badge>\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-4\\\"\\n          >\\n            <UsersRoundIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Team\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-5\\\"\\n          >\\n            <ChartLine\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Insights\\n          </TabsTrigger>\\n          <TabsTrigger\\n            className=\\\"after:-mb-1 relative after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n            value=\\\"tab-6\\\"\\n          >\\n            <SettingsIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n              size={16}\\n            />\\n            Settings\\n          </TabsTrigger>\\n        </TabsList>\\n        <ScrollBar orientation=\\\"horizontal\\\" />\\n      </ScrollArea>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-4\\\">\\n        <p className=\\\"pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 4\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-5\\\">\\n        <p className=\\\"pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 5\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-6\\\">\\n        <p className=\\\"pt-1 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 6\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-438.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-438\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-438.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"h-auto rounded-none border-b bg-transparent p-0\\\">\\n        <TabsTrigger\\n          className=\\\"relative flex-col rounded-none px-4 py-2 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          <HouseIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mb-1.5 opacity-60\\\"\\n            size={16}\\n          />\\n          Overview\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"relative flex-col rounded-none px-4 py-2 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          <PanelsTopLeftIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mb-1.5 opacity-60\\\"\\n            size={16}\\n          />\\n          Projects\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"relative flex-col rounded-none px-4 py-2 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          <BoxIcon aria-hidden=\\\"true\\\" className=\\\"mb-1.5 opacity-60\\\" size={16} />\\n          Packages\\n        </TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-439.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-439\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-439.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"mx-auto flex w-full max-w-xs bg-transparent\\\">\\n        <TabsTrigger\\n          className=\\\"group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          <Badge className=\\\"mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50\\\">\\n            3\\n          </Badge>\\n          Overview\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          <Badge className=\\\"mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50\\\">\\n            0\\n          </Badge>\\n          Projects\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          <Badge className=\\\"mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50\\\">\\n            7\\n          </Badge>\\n          Packages\\n        </TabsTrigger>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-44.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-44\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"input-otp\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-44.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { OTPInput, type SlotProps } from \\\"input-otp\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>OTP input single</Label>\\n      <OTPInput\\n        containerClassName=\\\"flex items-center gap-3 has-disabled:opacity-50\\\"\\n        id={id}\\n        maxLength={4}\\n        render={({ slots }) => (\\n          <div className=\\\"flex\\\">\\n            {slots.map((slot, idx) => (\\n              <Slot key={String(idx)} {...slot} />\\n            ))}\\n          </div>\\n        )}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/guilhermerodz/input-otp\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          Input OTP\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\\nfunction Slot(props: SlotProps) {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"-ms-px relative flex size-9 items-center justify-center border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow] first:ms-0 first:rounded-s-md last:rounded-e-md\\\",\\n        { \\\"z-10 border-ring ring-[3px] ring-ring/50\\\": props.isActive },\\n      )}\\n    >\\n      {props.char !== null && <div>{props.char}</div>}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"otp\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-440.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-440\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/tabs.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-440.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList>\\n        <TooltipProvider delayDuration={0}>\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <span>\\n                <TabsTrigger className=\\\"py-3\\\" value=\\\"tab-1\\\">\\n                  <HouseIcon aria-hidden=\\\"true\\\" size={16} />\\n                </TabsTrigger>\\n              </span>\\n            </TooltipTrigger>\\n            <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n              Overview\\n            </TooltipContent>\\n          </Tooltip>\\n        </TooltipProvider>\\n        <TooltipProvider delayDuration={0}>\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <span>\\n                <TabsTrigger className=\\\"group py-3\\\" value=\\\"tab-2\\\">\\n                  <span className=\\\"relative\\\">\\n                    <PanelsTopLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n                    <Badge className=\\\"-top-2.5 -translate-x-1.5 absolute left-full min-w-4 border-background px-0.5 text-[10px]/[.875rem] transition-opacity group-data-[state=inactive]:opacity-50\\\">\\n                      3\\n                    </Badge>\\n                  </span>\\n                </TabsTrigger>\\n              </span>\\n            </TooltipTrigger>\\n            <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n              Projects\\n            </TooltipContent>\\n          </Tooltip>\\n        </TooltipProvider>\\n        <TooltipProvider delayDuration={0}>\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <span>\\n                <TabsTrigger className=\\\"py-3\\\" value=\\\"tab-3\\\">\\n                  <BoxIcon aria-hidden=\\\"true\\\" size={16} />\\n                </TabsTrigger>\\n              </span>\\n            </TooltipTrigger>\\n            <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n              Packages\\n            </TooltipContent>\\n          </Tooltip>\\n        </TooltipProvider>\\n      </TabsList>\\n      <TabsContent value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 1\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 2\\n        </p>\\n      </TabsContent>\\n      <TabsContent value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Content for Tab 3\\n        </p>\\n      </TabsContent>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-441.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-441\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/tabs.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-441.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs\\n      className=\\\"w-full flex-row\\\"\\n      defaultValue=\\\"tab-1\\\"\\n      orientation=\\\"vertical\\\"\\n    >\\n      <TabsList className=\\\"flex-col\\\">\\n        <TooltipProvider delayDuration={0}>\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <span>\\n                <TabsTrigger className=\\\"py-3\\\" value=\\\"tab-1\\\">\\n                  <HouseIcon aria-hidden=\\\"true\\\" size={16} />\\n                </TabsTrigger>\\n              </span>\\n            </TooltipTrigger>\\n            <TooltipContent className=\\\"px-2 py-1 text-xs\\\" side=\\\"right\\\">\\n              Overview\\n            </TooltipContent>\\n          </Tooltip>\\n        </TooltipProvider>\\n        <TooltipProvider delayDuration={0}>\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <span>\\n                <TabsTrigger className=\\\"group py-3\\\" value=\\\"tab-2\\\">\\n                  <span className=\\\"relative\\\">\\n                    <PanelsTopLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n                    <Badge className=\\\"-top-2.5 -translate-x-1.5 absolute left-full min-w-4 border-background px-0.5 text-[10px]/[.875rem] transition-opacity group-data-[state=inactive]:opacity-50\\\">\\n                      3\\n                    </Badge>\\n                  </span>\\n                </TabsTrigger>\\n              </span>\\n            </TooltipTrigger>\\n            <TooltipContent className=\\\"px-2 py-1 text-xs\\\" side=\\\"right\\\">\\n              Projects\\n            </TooltipContent>\\n          </Tooltip>\\n        </TooltipProvider>\\n        <TooltipProvider delayDuration={0}>\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <span>\\n                <TabsTrigger className=\\\"py-3\\\" value=\\\"tab-3\\\">\\n                  <BoxIcon aria-hidden=\\\"true\\\" size={16} />\\n                </TabsTrigger>\\n              </span>\\n            </TooltipTrigger>\\n            <TooltipContent className=\\\"px-2 py-1 text-xs\\\" side=\\\"right\\\">\\n              Packages\\n            </TooltipContent>\\n          </Tooltip>\\n        </TooltipProvider>\\n      </TabsList>\\n      <div className=\\\"grow rounded-md border text-start\\\">\\n        <TabsContent value=\\\"tab-1\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 1\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-2\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 2\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-3\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 3\\n          </p>\\n        </TabsContent>\\n      </div>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-442.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-442\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-442.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs\\n      className=\\\"w-full flex-row\\\"\\n      defaultValue=\\\"tab-1\\\"\\n      orientation=\\\"vertical\\\"\\n    >\\n      <TabsList className=\\\"flex-col\\\">\\n        <TabsTrigger className=\\\"w-full\\\" value=\\\"tab-1\\\">\\n          Overview\\n        </TabsTrigger>\\n        <TabsTrigger className=\\\"w-full\\\" value=\\\"tab-2\\\">\\n          Projects\\n        </TabsTrigger>\\n        <TabsTrigger className=\\\"w-full\\\" value=\\\"tab-3\\\">\\n          Packages\\n        </TabsTrigger>\\n      </TabsList>\\n      <div className=\\\"grow rounded-md border text-start\\\">\\n        <TabsContent value=\\\"tab-1\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 1\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-2\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 2\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-3\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 3\\n          </p>\\n        </TabsContent>\\n      </div>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"vertical tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-443.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-443\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-443.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs\\n      className=\\\"w-full flex-row\\\"\\n      defaultValue=\\\"tab-1\\\"\\n      orientation=\\\"vertical\\\"\\n    >\\n      <TabsList className=\\\"flex-col rounded-none border-l bg-transparent p-0\\\">\\n        <TabsTrigger\\n          className=\\\"relative w-full justify-start rounded-none after:absolute after:inset-y-0 after:start-0 after:w-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          Overview\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"relative w-full justify-start rounded-none after:absolute after:inset-y-0 after:start-0 after:w-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          Projects\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"relative w-full justify-start rounded-none after:absolute after:inset-y-0 after:start-0 after:w-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          Packages\\n        </TabsTrigger>\\n      </TabsList>\\n      <div className=\\\"grow rounded-md border text-start\\\">\\n        <TabsContent value=\\\"tab-1\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 1\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-2\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 2\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-3\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 3\\n          </p>\\n        </TabsContent>\\n      </div>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"vertical tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-444.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-444\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-444.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs\\n      className=\\\"w-full flex-row\\\"\\n      defaultValue=\\\"tab-1\\\"\\n      orientation=\\\"vertical\\\"\\n    >\\n      <TabsList className=\\\"flex-col gap-1 rounded-none bg-transparent px-1 py-0 text-foreground\\\">\\n        <TabsTrigger\\n          className=\\\"after:-ms-1 relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          <HouseIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n            size={16}\\n          />\\n          Overview\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"after:-ms-1 relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          <PanelsTopLeftIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n            size={16}\\n          />\\n          Projects\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"after:-ms-1 relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          <BoxIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-ms-0.5 me-1.5 opacity-60\\\"\\n            size={16}\\n          />\\n          Packages\\n        </TabsTrigger>\\n      </TabsList>\\n      <div className=\\\"grow rounded-md border text-start\\\">\\n        <TabsContent value=\\\"tab-1\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 1\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-2\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 2\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-3\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 3\\n          </p>\\n        </TabsContent>\\n      </div>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"vertical tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-445.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-445\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tabs.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-445.tsx\",\n      \"content\": \"import {\\n  Tabs,\\n  TabsContent,\\n  TabsList,\\n  TabsTrigger,\\n} from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Tabs\\n      className=\\\"w-full flex-row\\\"\\n      defaultValue=\\\"tab-1\\\"\\n      orientation=\\\"vertical\\\"\\n    >\\n      <TabsList className=\\\"flex-col gap-1 bg-transparent py-0\\\">\\n        <TabsTrigger\\n          className=\\\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-1\\\"\\n        >\\n          Overview\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-2\\\"\\n        >\\n          Projects\\n        </TabsTrigger>\\n        <TabsTrigger\\n          className=\\\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\\\"\\n          value=\\\"tab-3\\\"\\n        >\\n          Packages\\n        </TabsTrigger>\\n      </TabsList>\\n      <div className=\\\"grow rounded-md border text-start\\\">\\n        <TabsContent value=\\\"tab-1\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 1\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-2\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 2\\n          </p>\\n        </TabsContent>\\n        <TabsContent value=\\\"tab-3\\\">\\n          <p className=\\\"px-4 py-3 text-muted-foreground text-xs\\\">\\n            Content for Tab 3\\n          </p>\\n        </TabsContent>\\n      </div>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 2,\n    \"tags\": [\n      \"tabs\",\n      \"vertical tabs\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-446.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-446\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-446.tsx\",\n      \"content\": \"import {\\n  Breadcrumb,\\n  BreadcrumbEllipsis,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">Home</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <DropdownMenu>\\n            <DropdownMenuTrigger className=\\\"hover:text-foreground\\\">\\n              <BreadcrumbEllipsis />\\n              <span className=\\\"sr-only\\\">Toggle menu</span>\\n            </DropdownMenuTrigger>\\n            <DropdownMenuContent align=\\\"start\\\">\\n              <DropdownMenuItem asChild>\\n                <a href=\\\"#\\\">Documentation</a>\\n              </DropdownMenuItem>\\n              <DropdownMenuItem asChild>\\n                <a href=\\\"#\\\">Themes</a>\\n              </DropdownMenuItem>\\n              <DropdownMenuItem asChild>\\n                <a href=\\\"#\\\">GitHub</a>\\n              </DropdownMenuItem>\\n            </DropdownMenuContent>\\n          </DropdownMenu>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">Components</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"breadcrumb\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-447.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-447\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-447.tsx\",\n      \"content\": \"import { FoldersIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">Home</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <DropdownMenu>\\n            <DropdownMenuTrigger className=\\\"hover:text-foreground\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"flex size-5 items-center justify-center\\\"\\n                role=\\\"presentation\\\"\\n              >\\n                <FoldersIcon size={16} />\\n              </span>\\n              <span className=\\\"sr-only\\\">Toggle menu</span>\\n            </DropdownMenuTrigger>\\n            <DropdownMenuContent align=\\\"start\\\">\\n              <DropdownMenuItem asChild>\\n                <a href=\\\"#\\\">Documentation</a>\\n              </DropdownMenuItem>\\n              <DropdownMenuItem asChild>\\n                <a href=\\\"#\\\">Themes</a>\\n              </DropdownMenuItem>\\n              <DropdownMenuItem asChild>\\n                <a href=\\\"#\\\">GitHub</a>\\n              </DropdownMenuItem>\\n            </DropdownMenuContent>\\n          </DropdownMenu>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"breadcrumb\",\n      \"dropdown\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-448.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-448\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-448.tsx\",\n      \"content\": \"import { HomeIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">\\n            <HomeIcon aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"sr-only\\\">Home</span>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">Components</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"breadcrumb\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-449.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-449\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-449.tsx\",\n      \"content\": \"import { ComponentIcon, HomeIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink className=\\\"inline-flex items-center gap-1.5\\\" href=\\\"#\\\">\\n            <HomeIcon aria-hidden=\\\"true\\\" size={16} />\\n            Home\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink className=\\\"inline-flex items-center gap-1.5\\\" href=\\\"#\\\">\\n            <ComponentIcon aria-hidden=\\\"true\\\" size={16} />\\n            Components\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"breadcrumb\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-45.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-45\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"input-otp\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-45.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { OTPInput, type SlotProps } from \\\"input-otp\\\";\\nimport { MinusIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>OTP input double</Label>\\n      <OTPInput\\n        containerClassName=\\\"flex items-center gap-3 has-disabled:opacity-50\\\"\\n        id={id}\\n        maxLength={6}\\n        render={({ slots }) => (\\n          <>\\n            <div className=\\\"flex\\\">\\n              {slots.slice(0, 3).map((slot, idx) => (\\n                <Slot key={String(idx)} {...slot} />\\n              ))}\\n            </div>\\n\\n            <div className=\\\"text-muted-foreground/80\\\">\\n              <MinusIcon aria-hidden=\\\"true\\\" size={16} />\\n            </div>\\n\\n            <div className=\\\"flex\\\">\\n              {slots.slice(3).map((slot, idx) => (\\n                <Slot key={String(idx)} {...slot} />\\n              ))}\\n            </div>\\n          </>\\n        )}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/guilhermerodz/input-otp\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          Input OTP\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\\nfunction Slot(props: SlotProps) {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"-ms-px relative flex size-9 items-center justify-center border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow] first:ms-0 first:rounded-s-md last:rounded-e-md\\\",\\n        { \\\"z-10 border-ring ring-[3px] ring-ring/50\\\": props.isActive },\\n      )}\\n    >\\n      {props.char !== null && <div>{props.char}</div>}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"otp\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-450.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-450\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-450.tsx\",\n      \"content\": \"import { HomeIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">\\n            <HomeIcon aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"sr-only\\\">Home</span>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">Components</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"breadcrumb\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-451.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-451\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-451.tsx\",\n      \"content\": \"import { HomeIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">\\n            <HomeIcon aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"sr-only\\\">Home</span>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">Components</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"breadcrumb\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-452.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-452\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-452.tsx\",\n      \"content\": \"import { HomeIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList className=\\\"rounded-md border bg-background px-3 py-2 shadow-xs\\\">\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">\\n            <HomeIcon aria-hidden=\\\"true\\\" size={16} />\\n            <span className=\\\"sr-only\\\">Home</span>\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">Components</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"breadcrumb\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-453.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-453\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-453.tsx\",\n      \"content\": \"import { DatabaseIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink href=\\\"#\\\">Databases</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <Select defaultValue=\\\"1\\\">\\n            <SelectTrigger\\n              aria-label=\\\"Select database\\\"\\n              className=\\\"relative gap-2 ps-9\\\"\\n              id=\\\"select-database\\\"\\n            >\\n              <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[select[disabled]]:opacity-50\\\">\\n                <DatabaseIcon aria-hidden=\\\"true\\\" size={16} />\\n              </div>\\n              <SelectValue placeholder=\\\"Select database\\\" />\\n            </SelectTrigger>\\n            <SelectContent>\\n              <SelectItem value=\\\"1\\\">Orion</SelectItem>\\n              <SelectItem value=\\\"2\\\">Sigma</SelectItem>\\n              <SelectItem value=\\\"3\\\">Dorado</SelectItem>\\n            </SelectContent>\\n          </Select>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"style\": 1,\n    \"tags\": [\n      \"breadcrumb\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-454.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-454\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-454.tsx\",\n      \"content\": \"import { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n}: PaginationProps) {\\n  return (\\n    <Pagination>\\n      <PaginationContent className=\\\"w-full justify-between gap-3\\\">\\n        <PaginationItem>\\n          <Button\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            asChild\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n            variant=\\\"outline\\\"\\n          >\\n            <a\\n              href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            >\\n              <ChevronLeftIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-ms-1 opacity-60\\\"\\n                size={16}\\n              />\\n              Previous\\n            </a>\\n          </Button>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <Button\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            asChild\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n            variant=\\\"outline\\\"\\n          >\\n            <a\\n              href={\\n                currentPage === totalPages\\n                  ? undefined\\n                  : `#/page/${currentPage + 1}`\\n              }\\n            >\\n              Next\\n              <ChevronRightIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-me-1 opacity-60\\\"\\n                size={16}\\n              />\\n            </a>\\n          </Button>\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-455.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-455\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-455.tsx\",\n      \"content\": \"import { ArrowLeftIcon, ArrowRightIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n}: PaginationProps) {\\n  return (\\n    <Pagination>\\n      <PaginationContent className=\\\"w-full justify-between gap-3\\\">\\n        <PaginationItem>\\n          <Button\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            className=\\\"group aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n            variant=\\\"ghost\\\"\\n          >\\n            <ArrowLeftIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-1 group-hover:-translate-x-0.5 opacity-60 transition-transform\\\"\\n              size={16}\\n            />\\n            Previous\\n          </Button>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <Button\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            className=\\\"group aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n            variant=\\\"ghost\\\"\\n          >\\n            Next\\n            <ArrowRightIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n              size={16}\\n            />\\n          </Button>\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-456.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-456\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-456.tsx\",\n      \"content\": \"import { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { buttonVariants } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n  PaginationLink,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n}: PaginationProps) {\\n  return (\\n    <Pagination>\\n      <PaginationContent className=\\\"w-full justify-between\\\">\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            aria-label=\\\"Go to previous page\\\"\\n            className={cn(\\n              \\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\",\\n              buttonVariants({\\n                variant: \\\"outline\\\",\\n              }),\\n            )}\\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <p aria-live=\\\"polite\\\" className=\\\"text-muted-foreground text-sm\\\">\\n            Page <span className=\\\"text-foreground\\\">{currentPage}</span> of{\\\" \\\"}\\n            <span className=\\\"text-foreground\\\">{totalPages}</span>\\n          </p>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            aria-label=\\\"Go to next page\\\"\\n            className={cn(\\n              \\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\",\\n              buttonVariants({\\n                variant: \\\"outline\\\",\\n              }),\\n            )}\\n            href={\\n              currentPage === totalPages\\n                ? undefined\\n                : `#/page/${currentPage + 1}`\\n            }\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-457.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-457\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-457.tsx\",\n      \"content\": \"import { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n  PaginationLink,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n}: PaginationProps) {\\n  return (\\n    <Pagination>\\n      <PaginationContent className=\\\"gap-3\\\">\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            aria-label=\\\"Go to previous page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <p aria-live=\\\"polite\\\" className=\\\"text-muted-foreground text-sm\\\">\\n            Page <span className=\\\"text-foreground\\\">{currentPage}</span> of{\\\" \\\"}\\n            <span className=\\\"text-foreground\\\">{totalPages}</span>\\n          </p>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            aria-label=\\\"Go to next page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={\\n              currentPage === totalPages\\n                ? undefined\\n                : `#/page/${currentPage + 1}`\\n            }\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-458.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-458\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-458.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n}: PaginationProps) {\\n  return (\\n    <div className=\\\"flex items-center justify-between gap-3\\\">\\n      <p aria-live=\\\"polite\\\" className=\\\"grow text-muted-foreground text-sm\\\">\\n        Page <span className=\\\"text-foreground\\\">{currentPage}</span> of{\\\" \\\"}\\n        <span className=\\\"text-foreground\\\">{totalPages}</span>\\n      </p>\\n      <Pagination className=\\\"w-auto\\\">\\n        <PaginationContent className=\\\"gap-3\\\">\\n          <PaginationItem>\\n            <Button\\n              aria-disabled={currentPage === 1 ? true : undefined}\\n              asChild\\n              className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n              role={currentPage === 1 ? \\\"link\\\" : undefined}\\n              variant=\\\"outline\\\"\\n            >\\n              <a\\n                href={\\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\\n                }\\n              >\\n                Previous\\n              </a>\\n            </Button>\\n          </PaginationItem>\\n          <PaginationItem>\\n            <Button\\n              aria-disabled={currentPage === totalPages ? true : undefined}\\n              asChild\\n              className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n              role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n              variant=\\\"outline\\\"\\n            >\\n              <a\\n                href={\\n                  currentPage === totalPages\\n                    ? undefined\\n                    : `#/page/${currentPage + 1}`\\n                }\\n              >\\n                Next\\n              </a>\\n            </Button>\\n          </PaginationItem>\\n        </PaginationContent>\\n      </Pagination>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-459.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-459\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-459.tsx\",\n      \"content\": \"import { usePagination } from \\\"@/registry/default/hooks/use-pagination\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n  PaginationLink,\\n  PaginationNext,\\n  PaginationPrevious,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay?: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay = 5,\\n}: PaginationProps) {\\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\\n    currentPage,\\n    paginationItemsToDisplay,\\n    totalPages,\\n  });\\n\\n  return (\\n    <Pagination>\\n      <PaginationContent>\\n        {/* Previous page button */}\\n        <PaginationItem>\\n          <PaginationPrevious\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n          />\\n        </PaginationItem>\\n\\n        {/* Left ellipsis (...) */}\\n        {showLeftEllipsis && (\\n          <PaginationItem>\\n            <PaginationEllipsis />\\n          </PaginationItem>\\n        )}\\n\\n        {/* Page number links */}\\n        {pages.map((page) => (\\n          <PaginationItem key={page}>\\n            <PaginationLink\\n              href={`#/page/${page}`}\\n              isActive={page === currentPage}\\n            >\\n              {page}\\n            </PaginationLink>\\n          </PaginationItem>\\n        ))}\\n\\n        {/* Right ellipsis (...) */}\\n        {showRightEllipsis && (\\n          <PaginationItem>\\n            <PaginationEllipsis />\\n          </PaginationItem>\\n        )}\\n\\n        {/* Next page button */}\\n        <PaginationItem>\\n          <PaginationNext\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={\\n              currentPage === totalPages\\n                ? undefined\\n                : `#/page/${currentPage + 1}`\\n            }\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n          />\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-46.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-46\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-phone-number-input\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-46.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronDownIcon, PhoneIcon } from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { useId, useState } from \\\"react\\\";\\nimport * as RPNInput from \\\"react-phone-number-input\\\";\\nimport flags from \\\"react-phone-number-input/flags\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [value, setValue] = useState(\\\"\\\");\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\" dir=\\\"ltr\\\">\\n      <Label htmlFor={id}>PhoneIcon number input</Label>\\n      <RPNInput.default\\n        className=\\\"flex rounded-md shadow-xs\\\"\\n        countrySelectComponent={CountrySelect}\\n        flagComponent={FlagComponent}\\n        id={id}\\n        inputComponent={PhoneInput}\\n        international\\n        onChange={(newValue) => setValue(newValue ?? \\\"\\\")}\\n        placeholder=\\\"Enter phone number\\\"\\n        value={value}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://gitlab.com/catamphetamine/react-phone-number-input\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          react-phone-number-input\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\\nconst PhoneInput = ({ className, ...props }: React.ComponentProps<\\\"input\\\">) => {\\n  return (\\n    <Input\\n      className={cn(\\n        \\\"-ms-px rounded-s-none shadow-none focus-visible:z-10\\\",\\n        className,\\n      )}\\n      data-slot=\\\"phone-input\\\"\\n      {...props}\\n    />\\n  );\\n};\\n\\nPhoneInput.displayName = \\\"PhoneInput\\\";\\n\\ntype CountrySelectProps = {\\n  disabled?: boolean;\\n  value: RPNInput.Country;\\n  onChange: (value: RPNInput.Country) => void;\\n  options: { label: string; value: RPNInput.Country | undefined }[];\\n};\\n\\nconst CountrySelect = ({\\n  disabled,\\n  value,\\n  onChange,\\n  options,\\n}: CountrySelectProps) => {\\n  const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {\\n    onChange(event.target.value as RPNInput.Country);\\n  };\\n\\n  return (\\n    <div className=\\\"relative inline-flex items-center self-stretch rounded-s-md border border-input bg-background py-2 ps-3 pe-2 text-muted-foreground outline-none transition-[color,box-shadow] focus-within:z-10 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 hover:bg-accent hover:text-foreground has-disabled:pointer-events-none has-aria-invalid:border-destructive/60 has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\\\">\\n      <div aria-hidden=\\\"true\\\" className=\\\"inline-flex items-center gap-1\\\">\\n        <FlagComponent aria-hidden=\\\"true\\\" country={value} countryName={value} />\\n        <span className=\\\"text-muted-foreground/80\\\">\\n          <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n        </span>\\n      </div>\\n      <select\\n        aria-label=\\\"Select country\\\"\\n        className=\\\"absolute inset-0 text-sm opacity-0\\\"\\n        disabled={disabled}\\n        onChange={handleSelect}\\n        value={value}\\n      >\\n        <option key=\\\"default\\\" value=\\\"\\\">\\n          Select a country\\n        </option>\\n        {options\\n          .filter((x) => x.value)\\n          .map((option, i) => (\\n            <option key={option.value ?? `empty-${i}`} value={option.value}>\\n              {option.label}{\\\" \\\"}\\n              {option.value &&\\n                `+${RPNInput.getCountryCallingCode(option.value)}`}\\n            </option>\\n          ))}\\n      </select>\\n    </div>\\n  );\\n};\\n\\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\\n  const Flag = flags[country];\\n\\n  return (\\n    <span className=\\\"w-5 overflow-hidden rounded-sm\\\">\\n      {Flag ? (\\n        <Flag title={countryName} />\\n      ) : (\\n        <PhoneIcon aria-hidden=\\\"true\\\" size={16} />\\n      )}\\n    </span>\\n  );\\n};\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"phone\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-460.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-460\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-460.tsx\",\n      \"content\": \"import {\\n  ChevronFirstIcon,\\n  ChevronLastIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { usePagination } from \\\"@/registry/default/hooks/use-pagination\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n  PaginationLink,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay?: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay = 5,\\n}: PaginationProps) {\\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\\n    currentPage,\\n    paginationItemsToDisplay,\\n    totalPages,\\n  });\\n\\n  return (\\n    <Pagination>\\n      <PaginationContent>\\n        {/* First page button */}\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            aria-label=\\\"Go to first page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronFirstIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n\\n        {/* Previous page button */}\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            aria-label=\\\"Go to previous page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n\\n        {/* Left ellipsis (...) */}\\n        {showLeftEllipsis && (\\n          <PaginationItem>\\n            <PaginationEllipsis />\\n          </PaginationItem>\\n        )}\\n\\n        {/* Page number links */}\\n        {pages.map((page) => (\\n          <PaginationItem key={page}>\\n            <PaginationLink\\n              href={`#/page/${page}`}\\n              isActive={page === currentPage}\\n            >\\n              {page}\\n            </PaginationLink>\\n          </PaginationItem>\\n        ))}\\n\\n        {/* Right ellipsis (...) */}\\n        {showRightEllipsis && (\\n          <PaginationItem>\\n            <PaginationEllipsis />\\n          </PaginationItem>\\n        )}\\n\\n        {/* Next page button */}\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            aria-label=\\\"Go to next page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={\\n              currentPage === totalPages\\n                ? undefined\\n                : `#/page/${currentPage + 1}`\\n            }\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n\\n        {/* Last page button */}\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            aria-label=\\\"Go to last page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={\\n              currentPage === totalPages ? undefined : `#/page/${totalPages}`\\n            }\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronLastIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-461.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-461\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-461.tsx\",\n      \"content\": \"import { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\n\\nimport { usePagination } from \\\"@/registry/default/hooks/use-pagination\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { buttonVariants } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n  PaginationLink,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay?: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay = 5,\\n}: PaginationProps) {\\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\\n    currentPage,\\n    paginationItemsToDisplay,\\n    totalPages,\\n  });\\n\\n  return (\\n    <Pagination>\\n      <PaginationContent className=\\\"-space-x-px inline-flex gap-0 rounded-md shadow-xs rtl:space-x-reverse\\\">\\n        {/* Previous page button */}\\n        <PaginationItem className=\\\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\\\">\\n          <PaginationLink\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            aria-label=\\\"Go to previous page\\\"\\n            className={cn(\\n              buttonVariants({\\n                variant: \\\"outline\\\",\\n              }),\\n              \\\"rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50\\\",\\n            )}\\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n\\n        {/* Left ellipsis (...) */}\\n        {showLeftEllipsis && (\\n          <PaginationItem className=\\\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\\\">\\n            <PaginationEllipsis />\\n          </PaginationItem>\\n        )}\\n\\n        {/* Page number links */}\\n        {pages.map((page) => (\\n          <PaginationItem key={page}>\\n            <PaginationLink\\n              className={cn(\\n                buttonVariants({\\n                  variant: \\\"outline\\\",\\n                }),\\n                \\\"rounded-none shadow-none focus-visible:z-10\\\",\\n                page === currentPage && \\\"bg-accent\\\",\\n              )}\\n              href={`#/page/${page}`}\\n              isActive={page === currentPage}\\n            >\\n              {page}\\n            </PaginationLink>\\n          </PaginationItem>\\n        ))}\\n\\n        {/* Right ellipsis (...) */}\\n        {showRightEllipsis && (\\n          <PaginationItem className=\\\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\\\">\\n            <PaginationEllipsis\\n              className={cn(\\n                buttonVariants({\\n                  variant: \\\"outline\\\",\\n                }),\\n                \\\"pointer-events-none rounded-none shadow-none\\\",\\n              )}\\n            />\\n          </PaginationItem>\\n        )}\\n\\n        {/* Next page button */}\\n        <PaginationItem className=\\\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\\\">\\n          <PaginationLink\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            aria-label=\\\"Go to next page\\\"\\n            className={cn(\\n              buttonVariants({\\n                variant: \\\"outline\\\",\\n              }),\\n              \\\"rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50\\\",\\n            )}\\n            href={\\n              currentPage === totalPages\\n                ? undefined\\n                : `#/page/${currentPage + 1}`\\n            }\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-462.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-462\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/pagination.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-462.tsx\",\n      \"content\": \"import { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\n\\nimport { usePagination } from \\\"@/registry/default/hooks/use-pagination\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n  PaginationLink,\\n} from \\\"@/registry/default/ui/pagination\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay?: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay = 5,\\n}: PaginationProps) {\\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\\n    currentPage,\\n    paginationItemsToDisplay,\\n    totalPages,\\n  });\\n\\n  return (\\n    <div className=\\\"flex items-center justify-between gap-3\\\">\\n      {/* Page number information */}\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"flex-1 whitespace-nowrap text-muted-foreground text-sm\\\"\\n      >\\n        Page <span className=\\\"text-foreground\\\">{currentPage}</span> of{\\\" \\\"}\\n        <span className=\\\"text-foreground\\\">{totalPages}</span>\\n      </p>\\n\\n      {/* Pagination */}\\n      <div className=\\\"grow\\\">\\n        <Pagination>\\n          <PaginationContent>\\n            {/* Previous page button */}\\n            <PaginationItem>\\n              <PaginationLink\\n                aria-disabled={currentPage === 1 ? true : undefined}\\n                aria-label=\\\"Go to previous page\\\"\\n                className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n                href={\\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\\n                }\\n                role={currentPage === 1 ? \\\"link\\\" : undefined}\\n              >\\n                <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n              </PaginationLink>\\n            </PaginationItem>\\n\\n            {/* Left ellipsis (...) */}\\n            {showLeftEllipsis && (\\n              <PaginationItem>\\n                <PaginationEllipsis />\\n              </PaginationItem>\\n            )}\\n\\n            {/* Page number links */}\\n            {pages.map((page) => (\\n              <PaginationItem key={page}>\\n                <PaginationLink\\n                  href={`#/page/${page}`}\\n                  isActive={page === currentPage}\\n                >\\n                  {page}\\n                </PaginationLink>\\n              </PaginationItem>\\n            ))}\\n\\n            {/* Right ellipsis (...) */}\\n            {showRightEllipsis && (\\n              <PaginationItem>\\n                <PaginationEllipsis />\\n              </PaginationItem>\\n            )}\\n\\n            {/* Next page button */}\\n            <PaginationItem>\\n              <PaginationLink\\n                aria-disabled={currentPage === totalPages ? true : undefined}\\n                aria-label=\\\"Go to next page\\\"\\n                className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n                href={\\n                  currentPage === totalPages\\n                    ? undefined\\n                    : `#/page/${currentPage + 1}`\\n                }\\n                role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n              >\\n                <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n              </PaginationLink>\\n            </PaginationItem>\\n          </PaginationContent>\\n        </Pagination>\\n      </div>\\n\\n      {/* Results per page */}\\n      <div className=\\\"flex flex-1 justify-end\\\">\\n        <Select aria-label=\\\"Results per page\\\" defaultValue=\\\"10\\\">\\n          <SelectTrigger\\n            className=\\\"w-fit whitespace-nowrap\\\"\\n            id=\\\"results-per-page\\\"\\n          >\\n            <SelectValue placeholder=\\\"Select number of results\\\" />\\n          </SelectTrigger>\\n          <SelectContent>\\n            <SelectItem value=\\\"10\\\">10 / page</SelectItem>\\n            <SelectItem value=\\\"20\\\">20 / page</SelectItem>\\n            <SelectItem value=\\\"50\\\">50 / page</SelectItem>\\n            <SelectItem value=\\\"100\\\">100 / page</SelectItem>\\n          </SelectContent>\\n        </Select>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-463.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-463\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/pagination.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-463.tsx\",\n      \"content\": \"import {\\n  ChevronFirstIcon,\\n  ChevronLastIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n} from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n  PaginationLink,\\n} from \\\"@/registry/default/ui/pagination\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n}: PaginationProps) {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex items-center justify-between gap-8\\\">\\n      {/* Results per page */}\\n      <div className=\\\"flex items-center gap-3\\\">\\n        <Label htmlFor={id}>Rows per page</Label>\\n        <Select defaultValue=\\\"25\\\">\\n          <SelectTrigger className=\\\"w-fit whitespace-nowrap\\\" id={id}>\\n            <SelectValue placeholder=\\\"Select number of results\\\" />\\n          </SelectTrigger>\\n          <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n            <SelectItem value=\\\"10\\\">10</SelectItem>\\n            <SelectItem value=\\\"25\\\">25</SelectItem>\\n            <SelectItem value=\\\"50\\\">50</SelectItem>\\n            <SelectItem value=\\\"100\\\">100</SelectItem>\\n          </SelectContent>\\n        </Select>\\n      </div>\\n\\n      {/* Page number information */}\\n      <div className=\\\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\\\">\\n        <p\\n          aria-live=\\\"polite\\\"\\n          className=\\\"whitespace-nowrap text-muted-foreground text-sm\\\"\\n        >\\n          <span className=\\\"text-foreground\\\">1-25</span> of{\\\" \\\"}\\n          <span className=\\\"text-foreground\\\">100</span>\\n        </p>\\n      </div>\\n\\n      {/* Pagination */}\\n      <div>\\n        <Pagination>\\n          <PaginationContent>\\n            {/* First page button */}\\n            <PaginationItem>\\n              <PaginationLink\\n                aria-disabled={currentPage === 1 ? true : undefined}\\n                aria-label=\\\"Go to first page\\\"\\n                className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n                href={\\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\\n                }\\n                role={currentPage === 1 ? \\\"link\\\" : undefined}\\n              >\\n                <ChevronFirstIcon aria-hidden=\\\"true\\\" size={16} />\\n              </PaginationLink>\\n            </PaginationItem>\\n\\n            {/* Previous page button */}\\n            <PaginationItem>\\n              <PaginationLink\\n                aria-disabled={currentPage === 1 ? true : undefined}\\n                aria-label=\\\"Go to previous page\\\"\\n                className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n                href={\\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\\n                }\\n                role={currentPage === 1 ? \\\"link\\\" : undefined}\\n              >\\n                <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n              </PaginationLink>\\n            </PaginationItem>\\n\\n            {/* Next page button */}\\n            <PaginationItem>\\n              <PaginationLink\\n                aria-disabled={currentPage === totalPages ? true : undefined}\\n                aria-label=\\\"Go to next page\\\"\\n                className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n                href={\\n                  currentPage === totalPages\\n                    ? undefined\\n                    : `#/page/${currentPage + 1}`\\n                }\\n                role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n              >\\n                <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n              </PaginationLink>\\n            </PaginationItem>\\n\\n            {/* Last page button */}\\n            <PaginationItem>\\n              <PaginationLink\\n                aria-disabled={currentPage === totalPages ? true : undefined}\\n                aria-label=\\\"Go to last page\\\"\\n                className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n                href={\\n                  currentPage === totalPages\\n                    ? undefined\\n                    : `#/page/${totalPages}`\\n                }\\n                role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n              >\\n                <ChevronLastIcon aria-hidden=\\\"true\\\" size={16} />\\n              </PaginationLink>\\n            </PaginationItem>\\n          </PaginationContent>\\n        </Pagination>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-464.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-464\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/pagination.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-464.tsx\",\n      \"content\": \"import {\\n  ChevronFirstIcon,\\n  ChevronLastIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n  PaginationLink,\\n} from \\\"@/registry/default/ui/pagination\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay?: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n}: PaginationProps) {\\n  return (\\n    <Pagination>\\n      <PaginationContent>\\n        {/* First page button */}\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            aria-label=\\\"Go to first page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronFirstIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n\\n        {/* Previous page button */}\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === 1 ? true : undefined}\\n            aria-label=\\\"Go to previous page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\\n            role={currentPage === 1 ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n\\n        {/* Page number select */}\\n        <PaginationItem>\\n          <Select aria-label=\\\"Select page\\\" defaultValue={String(currentPage)}>\\n            <SelectTrigger className=\\\"w-fit whitespace-nowrap\\\" id=\\\"select-page\\\">\\n              <SelectValue placeholder=\\\"Select page\\\" />\\n            </SelectTrigger>\\n            <SelectContent>\\n              {Array.from({ length: totalPages }, (_, i) => i + 1).map(\\n                (page) => (\\n                  <SelectItem key={page} value={String(page)}>\\n                    Page {page}\\n                  </SelectItem>\\n                ),\\n              )}\\n            </SelectContent>\\n          </Select>\\n        </PaginationItem>\\n\\n        {/* Next page button */}\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            aria-label=\\\"Go to next page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={\\n              currentPage === totalPages\\n                ? undefined\\n                : `#/page/${currentPage + 1}`\\n            }\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n\\n        {/* Last page button */}\\n        <PaginationItem>\\n          <PaginationLink\\n            aria-disabled={currentPage === totalPages ? true : undefined}\\n            aria-label=\\\"Go to last page\\\"\\n            className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n            href={\\n              currentPage === totalPages ? undefined : `#/page/${totalPages}`\\n            }\\n            role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n          >\\n            <ChevronLastIcon aria-hidden=\\\"true\\\" size={16} />\\n          </PaginationLink>\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\",\n      \"select\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-465.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-465\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/pagination.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-465.tsx\",\n      \"content\": \"import { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { usePagination } from \\\"@/registry/default/hooks/use-pagination\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n  PaginationLink,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay?: number;\\n};\\n\\nexport default function Component({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay = 5,\\n}: PaginationProps) {\\n  const id = useId();\\n\\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\\n    currentPage,\\n    paginationItemsToDisplay,\\n    totalPages,\\n  });\\n\\n  return (\\n    <div className=\\\"flex items-center justify-between gap-4\\\">\\n      {/* Pagination */}\\n      <div>\\n        <Pagination>\\n          <PaginationContent>\\n            {/* Previous page button */}\\n            <PaginationItem>\\n              <PaginationLink\\n                aria-disabled={currentPage === 1 ? true : undefined}\\n                aria-label=\\\"Go to previous page\\\"\\n                className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n                href={\\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\\n                }\\n                role={currentPage === 1 ? \\\"link\\\" : undefined}\\n              >\\n                <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n              </PaginationLink>\\n            </PaginationItem>\\n\\n            {/* Left ellipsis (...) */}\\n            {showLeftEllipsis && (\\n              <PaginationItem>\\n                <PaginationEllipsis />\\n              </PaginationItem>\\n            )}\\n\\n            {/* Page number links */}\\n            {pages.map((page) => (\\n              <PaginationItem key={page}>\\n                <PaginationLink\\n                  href={`#/page/${page}`}\\n                  isActive={page === currentPage}\\n                >\\n                  {page}\\n                </PaginationLink>\\n              </PaginationItem>\\n            ))}\\n\\n            {/* Right ellipsis (...) */}\\n            {showRightEllipsis && (\\n              <PaginationItem>\\n                <PaginationEllipsis />\\n              </PaginationItem>\\n            )}\\n\\n            {/* Next page button */}\\n            <PaginationItem>\\n              <PaginationLink\\n                aria-disabled={currentPage === totalPages ? true : undefined}\\n                aria-label=\\\"Go to next page\\\"\\n                className=\\\"aria-disabled:pointer-events-none aria-disabled:opacity-50\\\"\\n                href={\\n                  currentPage === totalPages\\n                    ? undefined\\n                    : `#/page/${currentPage + 1}`\\n                }\\n                role={currentPage === totalPages ? \\\"link\\\" : undefined}\\n              >\\n                <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n              </PaginationLink>\\n            </PaginationItem>\\n          </PaginationContent>\\n        </Pagination>\\n      </div>\\n\\n      {/* Go to page input */}\\n      <div className=\\\"flex items-center gap-3\\\">\\n        <Label className=\\\"whitespace-nowrap\\\" htmlFor={id}>\\n          Go to page\\n        </Label>\\n        <Input\\n          className=\\\"w-14\\\"\\n          defaultValue={String(currentPage)}\\n          id={id}\\n          type=\\\"text\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"pagination\",\n      \"input\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-466.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-466\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-466.tsx\",\n      \"content\": \"import {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    balance: \\\"$1,250.00\\\",\\n    email: \\\"alex.t@company.com\\\",\\n    id: \\\"1\\\",\\n    location: \\\"San Francisco, US\\\",\\n    name: \\\"Alex Thompson\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"sarah.c@company.com\\\",\\n    id: \\\"2\\\",\\n    location: \\\"Singapore\\\",\\n    name: \\\"Sarah Chen\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$650.00\\\",\\n    email: \\\"j.wilson@company.com\\\",\\n    id: \\\"3\\\",\\n    location: \\\"London, UK\\\",\\n    name: \\\"James Wilson\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$0.00\\\",\\n    email: \\\"m.garcia@company.com\\\",\\n    id: \\\"4\\\",\\n    location: \\\"Madrid, Spain\\\",\\n    name: \\\"Maria Garcia\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"-$1,000.00\\\",\\n    email: \\\"d.kim@company.com\\\",\\n    id: \\\"5\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"David Kim\\\",\\n    status: \\\"Active\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div>\\n      <Table>\\n        <TableHeader>\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableHead>Name</TableHead>\\n            <TableHead>Email</TableHead>\\n            <TableHead>Location</TableHead>\\n            <TableHead>Status</TableHead>\\n            <TableHead className=\\\"text-right\\\">Balance</TableHead>\\n          </TableRow>\\n        </TableHeader>\\n        <TableBody>\\n          {items.map((item) => (\\n            <TableRow key={item.id}>\\n              <TableCell className=\\\"font-medium\\\">{item.name}</TableCell>\\n              <TableCell>{item.email}</TableCell>\\n              <TableCell>{item.location}</TableCell>\\n              <TableCell>{item.status}</TableCell>\\n              <TableCell className=\\\"text-right\\\">{item.balance}</TableCell>\\n            </TableRow>\\n          ))}\\n        </TableBody>\\n        <TableFooter className=\\\"bg-transparent\\\">\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableCell colSpan={4}>Total</TableCell>\\n            <TableCell className=\\\"text-right\\\">$2,500.00</TableCell>\\n          </TableRow>\\n        </TableFooter>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Basic table\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-467.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-467\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-467.tsx\",\n      \"content\": \"import {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    balance: \\\"$1,250.00\\\",\\n    email: \\\"alex.t@company.com\\\",\\n    id: \\\"1\\\",\\n    image:\\n      \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/exp1/avatar-40-02_upqrxi.jpg\\\",\\n    location: \\\"San Francisco, US\\\",\\n    name: \\\"Alex Thompson\\\",\\n    status: \\\"Active\\\",\\n    username: \\\"@alexthompson\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"sarah.c@company.com\\\",\\n    id: \\\"2\\\",\\n    image:\\n      \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/exp1/avatar-40-01_ij9v7j.jpg\\\",\\n    location: \\\"Singapore\\\",\\n    name: \\\"Sarah Chen\\\",\\n    status: \\\"Active\\\",\\n    username: \\\"@sarahchen\\\",\\n  },\\n  {\\n    balance: \\\"$0.00\\\",\\n    email: \\\"m.garcia@company.com\\\",\\n    id: \\\"4\\\",\\n    image:\\n      \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/exp1/avatar-40-03_dkeufx.jpg\\\",\\n    location: \\\"Madrid, Spain\\\",\\n    name: \\\"Maria Garcia\\\",\\n    status: \\\"Active\\\",\\n    username: \\\"@mariagarcia\\\",\\n  },\\n  {\\n    balance: \\\"-$1,000.00\\\",\\n    email: \\\"d.kim@company.com\\\",\\n    id: \\\"5\\\",\\n    image:\\n      \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/exp1/avatar-40-05_cmz0mg.jpg\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"David Kim\\\",\\n    status: \\\"Active\\\",\\n    username: \\\"@davidkim\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div>\\n      <Table>\\n        <TableHeader>\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableHead>Name</TableHead>\\n            <TableHead>Email</TableHead>\\n            <TableHead>Location</TableHead>\\n            <TableHead>Status</TableHead>\\n            <TableHead className=\\\"text-right\\\">Balance</TableHead>\\n          </TableRow>\\n        </TableHeader>\\n        <TableBody>\\n          {items.map((item) => (\\n            <TableRow key={item.id}>\\n              <TableCell>\\n                <div className=\\\"flex items-center gap-3\\\">\\n                  <img\\n                    alt={item.name}\\n                    className=\\\"rounded-full\\\"\\n                    height={40}\\n                    src={item.image}\\n                    width={40}\\n                  />\\n                  <div>\\n                    <div className=\\\"font-medium\\\">{item.name}</div>\\n                    <span className=\\\"mt-0.5 text-muted-foreground text-xs\\\">\\n                      {item.username}\\n                    </span>\\n                  </div>\\n                </div>\\n              </TableCell>\\n              <TableCell>{item.email}</TableCell>\\n              <TableCell>{item.location}</TableCell>\\n              <TableCell>{item.status}</TableCell>\\n              <TableCell className=\\\"text-right\\\">{item.balance}</TableCell>\\n            </TableRow>\\n          ))}\\n        </TableBody>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Table with images\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"user\",\n      \"avatar\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-468.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-468\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-468.tsx\",\n      \"content\": \"import {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    balance: \\\"$1,250.00\\\",\\n    email: \\\"alex.t@company.com\\\",\\n    id: \\\"1\\\",\\n    location: \\\"San Francisco, US\\\",\\n    name: \\\"Alex Thompson\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"sarah.c@company.com\\\",\\n    id: \\\"2\\\",\\n    location: \\\"Singapore\\\",\\n    name: \\\"Sarah Chen\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$650.00\\\",\\n    email: \\\"j.wilson@company.com\\\",\\n    id: \\\"3\\\",\\n    location: \\\"London, UK\\\",\\n    name: \\\"James Wilson\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$0.00\\\",\\n    email: \\\"m.garcia@company.com\\\",\\n    id: \\\"4\\\",\\n    location: \\\"Madrid, Spain\\\",\\n    name: \\\"Maria Garcia\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"-$1,000.00\\\",\\n    email: \\\"d.kim@company.com\\\",\\n    id: \\\"5\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"David Kim\\\",\\n    status: \\\"Active\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div>\\n      <Table>\\n        <TableHeader>\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableHead>Name</TableHead>\\n            <TableHead>Email</TableHead>\\n            <TableHead>Location</TableHead>\\n            <TableHead>Status</TableHead>\\n            <TableHead className=\\\"text-right\\\">Balance</TableHead>\\n          </TableRow>\\n        </TableHeader>\\n        <tbody aria-hidden=\\\"true\\\" className=\\\"table-row h-2\\\" />\\n        <TableBody className=\\\"[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg\\\">\\n          {items.map((item) => (\\n            <TableRow className=\\\"border-none\\\" key={item.id}>\\n              <TableCell className=\\\"py-2.5 font-medium\\\">{item.name}</TableCell>\\n              <TableCell className=\\\"py-2.5\\\">{item.email}</TableCell>\\n              <TableCell className=\\\"py-2.5\\\">{item.location}</TableCell>\\n              <TableCell className=\\\"py-2.5\\\">{item.status}</TableCell>\\n              <TableCell className=\\\"py-2.5 text-right\\\">\\n                {item.balance}\\n              </TableCell>\\n            </TableRow>\\n          ))}\\n        </TableBody>\\n        <tbody aria-hidden=\\\"true\\\" className=\\\"table-row h-2\\\" />\\n        <TableFooter className=\\\"bg-transparent\\\">\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableCell colSpan={4}>Total</TableCell>\\n            <TableCell className=\\\"text-right\\\">$2,500.00</TableCell>\\n          </TableRow>\\n        </TableFooter>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Table without horizontal dividers\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-469.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-469\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-469.tsx\",\n      \"content\": \"import {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    balance: \\\"$1,250.00\\\",\\n    email: \\\"alex.t@company.com\\\",\\n    id: \\\"1\\\",\\n    location: \\\"San Francisco, US\\\",\\n    name: \\\"Alex Thompson\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"sarah.c@company.com\\\",\\n    id: \\\"2\\\",\\n    location: \\\"Singapore\\\",\\n    name: \\\"Sarah Chen\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$650.00\\\",\\n    email: \\\"j.wilson@company.com\\\",\\n    id: \\\"3\\\",\\n    location: \\\"London, UK\\\",\\n    name: \\\"James Wilson\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$0.00\\\",\\n    email: \\\"m.garcia@company.com\\\",\\n    id: \\\"4\\\",\\n    location: \\\"Madrid, Spain\\\",\\n    name: \\\"Maria Garcia\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"-$1,000.00\\\",\\n    email: \\\"d.kim@company.com\\\",\\n    id: \\\"5\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"David Kim\\\",\\n    status: \\\"Active\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div>\\n      <Table>\\n        <TableHeader className=\\\"bg-transparent\\\">\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableHead>Name</TableHead>\\n            <TableHead>Email</TableHead>\\n            <TableHead>Location</TableHead>\\n            <TableHead>Status</TableHead>\\n            <TableHead className=\\\"text-right\\\">Balance</TableHead>\\n          </TableRow>\\n        </TableHeader>\\n        <tbody aria-hidden=\\\"true\\\" className=\\\"table-row h-2\\\" />\\n        <TableBody className=\\\"[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg\\\">\\n          {items.map((item) => (\\n            <TableRow\\n              className=\\\"border-none odd:bg-muted/50 hover:bg-transparent odd:hover:bg-muted/50\\\"\\n              key={item.id}\\n            >\\n              <TableCell className=\\\"py-2.5 font-medium\\\">{item.name}</TableCell>\\n              <TableCell className=\\\"py-2.5\\\">{item.email}</TableCell>\\n              <TableCell className=\\\"py-2.5\\\">{item.location}</TableCell>\\n              <TableCell className=\\\"py-2.5\\\">{item.status}</TableCell>\\n              <TableCell className=\\\"py-2.5 text-right\\\">\\n                {item.balance}\\n              </TableCell>\\n            </TableRow>\\n          ))}\\n        </TableBody>\\n        <tbody aria-hidden=\\\"true\\\" className=\\\"table-row h-2\\\" />\\n        <TableFooter className=\\\"bg-transparent\\\">\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableCell colSpan={4}>Total</TableCell>\\n            <TableCell className=\\\"text-right\\\">$2,500.00</TableCell>\\n          </TableRow>\\n        </TableFooter>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Striped table\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-47.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-47\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-payment-inputs\"\n  ],\n  \"devDependencies\": [\n    \"@types/react-payment-inputs\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-47.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CreditCardIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\nimport { usePaymentInputs } from \\\"react-payment-inputs\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const { getCardNumberProps } = usePaymentInputs();\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={`number-${id}`}>Card Number</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          {...getCardNumberProps()}\\n          className=\\\"peer ps-9 [direction:inherit]\\\"\\n          id={`number-${id}`}\\n        />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n          <CreditCardIcon aria-hidden=\\\"true\\\" size={16} />\\n        </div>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/medipass/react-payment-inputs\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Payment Inputs\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"checkout\",\n      \"payment\",\n      \"credit card\",\n      \"form\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-470.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-470\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-470.tsx\",\n      \"content\": \"import {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    balance: \\\"$1,250.00\\\",\\n    email: \\\"alex.t@company.com\\\",\\n    id: \\\"1\\\",\\n    location: \\\"San Francisco, US\\\",\\n    name: \\\"Alex Thompson\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"sarah.c@company.com\\\",\\n    id: \\\"2\\\",\\n    location: \\\"Singapore\\\",\\n    name: \\\"Sarah Chen\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$650.00\\\",\\n    email: \\\"j.wilson@company.com\\\",\\n    id: \\\"3\\\",\\n    location: \\\"London, UK\\\",\\n    name: \\\"James Wilson\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$0.00\\\",\\n    email: \\\"m.garcia@company.com\\\",\\n    id: \\\"4\\\",\\n    location: \\\"Madrid, Spain\\\",\\n    name: \\\"Maria Garcia\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"-$1,000.00\\\",\\n    email: \\\"d.kim@company.com\\\",\\n    id: \\\"5\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"David Kim\\\",\\n    status: \\\"Active\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div>\\n      <Table>\\n        <TableHeader className=\\\"bg-transparent\\\">\\n          <TableRow className=\\\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\">\\n            <TableHead>Name</TableHead>\\n            <TableHead>Email</TableHead>\\n            <TableHead>Location</TableHead>\\n            <TableHead>Status</TableHead>\\n            <TableHead className=\\\"text-right\\\">Balance</TableHead>\\n          </TableRow>\\n        </TableHeader>\\n        <TableBody className=\\\"[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg\\\">\\n          {items.map((item) => (\\n            <TableRow\\n              className=\\\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\"\\n              key={item.id}\\n            >\\n              <TableCell className=\\\"font-medium\\\">{item.name}</TableCell>\\n              <TableCell>{item.email}</TableCell>\\n              <TableCell>{item.location}</TableCell>\\n              <TableCell>{item.status}</TableCell>\\n              <TableCell className=\\\"text-right\\\">{item.balance}</TableCell>\\n            </TableRow>\\n          ))}\\n        </TableBody>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Table with vertical lines\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-471.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-471\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-471.tsx\",\n      \"content\": \"import {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst programmingLanguages = [\\n  {\\n    developer: \\\"Brendan Eich\\\",\\n    extension: \\\".js\\\",\\n    id: \\\"1\\\",\\n    latestVersion: \\\"ES2021\\\",\\n    name: \\\"JavaScript\\\",\\n    paradigm: \\\"Multi-paradigm\\\",\\n    popularity: \\\"High\\\",\\n    releaseYear: \\\"1995\\\",\\n    typing: \\\"Dynamic\\\",\\n  },\\n  {\\n    developer: \\\"Guido van Rossum\\\",\\n    extension: \\\".py\\\",\\n    id: \\\"2\\\",\\n    latestVersion: \\\"3.10\\\",\\n    name: \\\"Python\\\",\\n    paradigm: \\\"Multi-paradigm\\\",\\n    popularity: \\\"High\\\",\\n    releaseYear: \\\"1991\\\",\\n    typing: \\\"Dynamic\\\",\\n  },\\n  {\\n    developer: \\\"James Gosling\\\",\\n    extension: \\\".java\\\",\\n    id: \\\"3\\\",\\n    latestVersion: \\\"17\\\",\\n    name: \\\"Java\\\",\\n    paradigm: \\\"Object-oriented\\\",\\n    popularity: \\\"High\\\",\\n    releaseYear: \\\"1995\\\",\\n    typing: \\\"Static\\\",\\n  },\\n  {\\n    developer: \\\"Bjarne Stroustrup\\\",\\n    extension: \\\".cpp\\\",\\n    id: \\\"4\\\",\\n    latestVersion: \\\"C++20\\\",\\n    name: \\\"C++\\\",\\n    paradigm: \\\"Multi-paradigm\\\",\\n    popularity: \\\"High\\\",\\n    releaseYear: \\\"1985\\\",\\n    typing: \\\"Static\\\",\\n  },\\n  {\\n    developer: \\\"Yukihiro Matsumoto\\\",\\n    extension: \\\".rb\\\",\\n    id: \\\"5\\\",\\n    latestVersion: \\\"3.0\\\",\\n    name: \\\"Ruby\\\",\\n    paradigm: \\\"Multi-paradigm\\\",\\n    popularity: \\\"Low\\\",\\n    releaseYear: \\\"1995\\\",\\n    typing: \\\"Dynamic\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div>\\n      <div className=\\\"overflow-hidden rounded-md border bg-background\\\">\\n        <Table>\\n          <TableHeader>\\n            <TableRow className=\\\"bg-muted/50\\\">\\n              <TableHead className=\\\"h-9 py-2\\\">Name</TableHead>\\n              <TableHead className=\\\"h-9 py-2\\\">Release Year</TableHead>\\n              <TableHead className=\\\"h-9 py-2\\\">Developer</TableHead>\\n              <TableHead className=\\\"h-9 py-2\\\">Typing</TableHead>\\n              <TableHead className=\\\"h-9 py-2\\\">Paradigm</TableHead>\\n              <TableHead className=\\\"h-9 py-2\\\">Extension</TableHead>\\n              <TableHead className=\\\"h-9 py-2\\\">Latest Version</TableHead>\\n              <TableHead className=\\\"h-9 py-2\\\">Popularity</TableHead>\\n            </TableRow>\\n          </TableHeader>\\n          <TableBody>\\n            {programmingLanguages.map((language) => (\\n              <TableRow key={language.id}>\\n                <TableCell className=\\\"py-2 font-medium\\\">\\n                  {language.name}\\n                </TableCell>\\n                <TableCell className=\\\"py-2\\\">{language.releaseYear}</TableCell>\\n                <TableCell className=\\\"py-2\\\">{language.developer}</TableCell>\\n                <TableCell className=\\\"py-2\\\">{language.typing}</TableCell>\\n                <TableCell className=\\\"py-2\\\">{language.paradigm}</TableCell>\\n                <TableCell className=\\\"py-2\\\">{language.extension}</TableCell>\\n                <TableCell className=\\\"py-2\\\">{language.latestVersion}</TableCell>\\n                <TableCell className=\\\"py-2\\\">{language.popularity}</TableCell>\\n              </TableRow>\\n            ))}\\n          </TableBody>\\n        </Table>\\n      </div>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Dense table\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-472.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-472\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-472.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    balance: \\\"$1,250.00\\\",\\n    email: \\\"alex.t@company.com\\\",\\n    id: \\\"1\\\",\\n    location: \\\"San Francisco, US\\\",\\n    name: \\\"Alex Thompson\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"sarah.c@company.com\\\",\\n    id: \\\"2\\\",\\n    location: \\\"Singapore\\\",\\n    name: \\\"Sarah Chen\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$650.00\\\",\\n    email: \\\"j.wilson@company.com\\\",\\n    id: \\\"3\\\",\\n    location: \\\"London, UK\\\",\\n    name: \\\"James Wilson\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$0.00\\\",\\n    email: \\\"m.garcia@company.com\\\",\\n    id: \\\"4\\\",\\n    location: \\\"Madrid, Spain\\\",\\n    name: \\\"Maria Garcia\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"-$1,000.00\\\",\\n    email: \\\"d.kim@company.com\\\",\\n    id: \\\"5\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"David Kim\\\",\\n    status: \\\"Active\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div>\\n      <Table>\\n        <TableHeader>\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableHead>\\n              <Checkbox id={id} />\\n            </TableHead>\\n            <TableHead>Name</TableHead>\\n            <TableHead>Email</TableHead>\\n            <TableHead>Location</TableHead>\\n            <TableHead>Status</TableHead>\\n            <TableHead className=\\\"text-right\\\">Balance</TableHead>\\n          </TableRow>\\n        </TableHeader>\\n        <TableBody>\\n          {items.map((item) => (\\n            <TableRow\\n              className=\\\"has-data-[state=checked]:bg-muted/50\\\"\\n              key={item.id}\\n            >\\n              <TableCell>\\n                <Checkbox id={`table-checkbox-${item.id}`} />\\n              </TableCell>\\n              <TableCell className=\\\"font-medium\\\">{item.name}</TableCell>\\n              <TableCell>{item.email}</TableCell>\\n              <TableCell>{item.location}</TableCell>\\n              <TableCell>{item.status}</TableCell>\\n              <TableCell className=\\\"text-right\\\">{item.balance}</TableCell>\\n            </TableRow>\\n          ))}\\n        </TableBody>\\n        <TableFooter className=\\\"bg-transparent\\\">\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableCell colSpan={5}>Total</TableCell>\\n            <TableCell className=\\\"text-right\\\">$2,500.00</TableCell>\\n          </TableRow>\\n        </TableFooter>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Table with row selection\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"checkbox\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-473.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-473\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-473.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    balance: \\\"$1,250.00\\\",\\n    email: \\\"alex.t@company.com\\\",\\n    id: \\\"1\\\",\\n    location: \\\"San Francisco, US\\\",\\n    name: \\\"Alex Thompson\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"sarah.c@company.com\\\",\\n    id: \\\"2\\\",\\n    location: \\\"Singapore\\\",\\n    name: \\\"Sarah Chen\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$650.00\\\",\\n    email: \\\"j.wilson@company.com\\\",\\n    id: \\\"3\\\",\\n    location: \\\"London, UK\\\",\\n    name: \\\"James Wilson\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$0.00\\\",\\n    email: \\\"m.garcia@company.com\\\",\\n    id: \\\"4\\\",\\n    location: \\\"Madrid, Spain\\\",\\n    name: \\\"Maria Garcia\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"-$1,000.00\\\",\\n    email: \\\"d.kim@company.com\\\",\\n    id: \\\"5\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"David Kim\\\",\\n    status: \\\"Active\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div>\\n      <div className=\\\"overflow-hidden rounded-md border bg-background\\\">\\n        <Table>\\n          <TableHeader>\\n            <TableRow className=\\\"hover:bg-transparent\\\">\\n              <TableHead className=\\\"h-11\\\">\\n                <Checkbox id={id} />\\n              </TableHead>\\n              <TableHead className=\\\"h-11\\\">Name</TableHead>\\n              <TableHead className=\\\"h-11\\\">Email</TableHead>\\n              <TableHead className=\\\"h-11\\\">Location</TableHead>\\n              <TableHead className=\\\"h-11\\\">Status</TableHead>\\n              <TableHead className=\\\"h-11 text-right\\\">Balance</TableHead>\\n            </TableRow>\\n          </TableHeader>\\n          <TableBody>\\n            {items.map((item) => (\\n              <TableRow key={item.id}>\\n                <TableCell>\\n                  <Checkbox id={`table-checkbox-${item.id}`} />\\n                </TableCell>\\n                <TableCell className=\\\"font-medium\\\">{item.name}</TableCell>\\n                <TableCell>{item.email}</TableCell>\\n                <TableCell>{item.location}</TableCell>\\n                <TableCell>{item.status}</TableCell>\\n                <TableCell className=\\\"text-right\\\">{item.balance}</TableCell>\\n              </TableRow>\\n            ))}\\n          </TableBody>\\n          <TableFooter className=\\\"bg-transparent\\\">\\n            <TableRow className=\\\"hover:bg-transparent\\\">\\n              <TableCell colSpan={5}>Total</TableCell>\\n              <TableCell className=\\\"text-right\\\">$2,500.00</TableCell>\\n            </TableRow>\\n          </TableFooter>\\n        </Table>\\n      </div>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Card Table\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"checkbox\",\n      \"card\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-474.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-474\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-474.tsx\",\n      \"content\": \"import {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"mx-auto max-w-lg\\\">\\n      <div className=\\\"overflow-hidden rounded-md border bg-background\\\">\\n        <Table>\\n          <TableBody>\\n            <TableRow className=\\\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\">\\n              <TableCell className=\\\"bg-muted/50 py-2 font-medium\\\">\\n                Name\\n              </TableCell>\\n              <TableCell className=\\\"py-2\\\">David Kim</TableCell>\\n            </TableRow>\\n            <TableRow className=\\\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\">\\n              <TableCell className=\\\"bg-muted/50 py-2 font-medium\\\">\\n                Email\\n              </TableCell>\\n              <TableCell className=\\\"py-2\\\">d.kim@company.com</TableCell>\\n            </TableRow>\\n            <TableRow className=\\\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\">\\n              <TableCell className=\\\"bg-muted/50 py-2 font-medium\\\">\\n                Location\\n              </TableCell>\\n              <TableCell className=\\\"py-2\\\">Seoul, KR</TableCell>\\n            </TableRow>\\n            <TableRow className=\\\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\">\\n              <TableCell className=\\\"bg-muted/50 py-2 font-medium\\\">\\n                Status\\n              </TableCell>\\n              <TableCell className=\\\"py-2\\\">Active</TableCell>\\n            </TableRow>\\n            <TableRow className=\\\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\">\\n              <TableCell className=\\\"bg-muted/50 py-2 font-medium\\\">\\n                Balance\\n              </TableCell>\\n              <TableCell className=\\\"py-2\\\">$1,000.00</TableCell>\\n            </TableRow>\\n          </TableBody>\\n        </Table>\\n      </div>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Vertical table\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"vertical table\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-475.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-475\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-475.tsx\",\n      \"content\": \"import {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    balance: \\\"$1,250.00\\\",\\n    email: \\\"alex.t@company.com\\\",\\n    id: \\\"1\\\",\\n    location: \\\"San Francisco, US\\\",\\n    name: \\\"Alex Thompson\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"sarah.c@company.com\\\",\\n    id: \\\"2\\\",\\n    location: \\\"Singapore\\\",\\n    name: \\\"Sarah Chen\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$650.00\\\",\\n    email: \\\"j.wilson@company.com\\\",\\n    id: \\\"3\\\",\\n    location: \\\"London, UK\\\",\\n    name: \\\"James Wilson\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$0.00\\\",\\n    email: \\\"m.garcia@company.com\\\",\\n    id: \\\"4\\\",\\n    location: \\\"Madrid, Spain\\\",\\n    name: \\\"Maria Garcia\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"-$1,000.00\\\",\\n    email: \\\"d.kim@company.com\\\",\\n    id: \\\"5\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"David Kim\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$1,500.00\\\",\\n    email: \\\"john.brown@company.com\\\",\\n    id: \\\"6\\\",\\n    location: \\\"New York, US\\\",\\n    name: \\\"John Brown\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$200.00\\\",\\n    email: \\\"jane.doe@company.com\\\",\\n    id: \\\"7\\\",\\n    location: \\\"Paris, FR\\\",\\n    name: \\\"Jane Doe\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$1,000.00\\\",\\n    email: \\\"peter.smith@company.com\\\",\\n    id: \\\"8\\\",\\n    location: \\\"Berlin, DE\\\",\\n    name: \\\"Peter Smith\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$500.00\\\",\\n    email: \\\"olivia.lee@company.com\\\",\\n    id: \\\"9\\\",\\n    location: \\\"Tokyo, JP\\\",\\n    name: \\\"Olivia Lee\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$300.00\\\",\\n    email: \\\"liam.chen@company.com\\\",\\n    id: \\\"10\\\",\\n    location: \\\"Shanghai, CN\\\",\\n    name: \\\"Liam Chen\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$800.00\\\",\\n    email: \\\"ethan.kim@company.com\\\",\\n    id: \\\"11\\\",\\n    location: \\\"Busan, KR\\\",\\n    name: \\\"Ethan Kim\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$1,200.00\\\",\\n    email: \\\"ava.brown@company.com\\\",\\n    id: \\\"12\\\",\\n    location: \\\"London, UK\\\",\\n    name: \\\"Ava Brown\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$400.00\\\",\\n    email: \\\"lily.lee@company.com\\\",\\n    id: \\\"13\\\",\\n    location: \\\"Seoul, KR\\\",\\n    name: \\\"Lily Lee\\\",\\n    status: \\\"Active\\\",\\n  },\\n  {\\n    balance: \\\"$600.00\\\",\\n    email: \\\"noah.smith@company.com\\\",\\n    id: \\\"14\\\",\\n    location: \\\"New York, US\\\",\\n    name: \\\"Noah Smith\\\",\\n    status: \\\"Inactive\\\",\\n  },\\n  {\\n    balance: \\\"$1,800.00\\\",\\n    email: \\\"eve.chen@company.com\\\",\\n    id: \\\"15\\\",\\n    location: \\\"Taipei, TW\\\",\\n    name: \\\"Eve Chen\\\",\\n    status: \\\"Active\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div>\\n      <div className=\\\"[&>div]:max-h-96\\\">\\n        <Table className=\\\"border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\\\">\\n          <TableHeader className=\\\"sticky top-0 z-10 bg-background/90 backdrop-blur-xs\\\">\\n            <TableRow className=\\\"hover:bg-transparent\\\">\\n              <TableHead>Name</TableHead>\\n              <TableHead>Email</TableHead>\\n              <TableHead>Location</TableHead>\\n              <TableHead>Status</TableHead>\\n              <TableHead className=\\\"text-right\\\">Balance</TableHead>\\n            </TableRow>\\n          </TableHeader>\\n          <TableBody>\\n            {items.map((item) => (\\n              <TableRow key={item.id}>\\n                <TableCell className=\\\"font-medium\\\">{item.name}</TableCell>\\n                <TableCell>{item.email}</TableCell>\\n                <TableCell>{item.location}</TableCell>\\n                <TableCell>{item.status}</TableCell>\\n                <TableCell className=\\\"text-right\\\">{item.balance}</TableCell>\\n              </TableRow>\\n            ))}\\n          </TableBody>\\n          <TableFooter className=\\\"bg-transparent\\\">\\n            <TableRow className=\\\"hover:bg-transparent\\\">\\n              <TableCell colSpan={4}>Total</TableCell>\\n              <TableCell className=\\\"text-right\\\">$2,500.00</TableCell>\\n            </TableRow>\\n          </TableFooter>\\n        </Table>\\n      </div>\\n      <p className=\\\"mt-8 text-center text-muted-foreground text-sm\\\">\\n        Table with sticky header\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"sticky\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-476.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-476\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-476.tsx\",\n      \"content\": \"import { CheckIcon, MonitorIcon, SmartphoneIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nconst items = [\\n  {\\n    desktop: [\\n      { name: \\\"Chrome\\\", supported: true, version: \\\"115\\\" },\\n      { name: \\\"Edge\\\", supported: true, version: \\\"115\\\" },\\n      { name: \\\"Firefox\\\", supported: false, version: \\\"111\\\" },\\n      { name: \\\"Opera\\\", supported: true, version: \\\"101\\\" },\\n      { name: \\\"Safari\\\", supported: false, version: \\\"No\\\" },\\n    ],\\n    feature: \\\"scroll-timeline\\\",\\n    mobile: [\\n      { name: \\\"Chrome Android\\\", supported: true, version: \\\"115\\\" },\\n      { name: \\\"Firefox Android\\\", supported: false, version: \\\"No\\\" },\\n      { name: \\\"Opera Android\\\", supported: true, version: \\\"77\\\" },\\n      { name: \\\"Safari iOS\\\", supported: false, version: \\\"No\\\" },\\n      { name: \\\"Samsung Internet\\\", supported: true, version: \\\"23\\\" },\\n    ],\\n  },\\n  {\\n    desktop: [\\n      { name: \\\"Chrome\\\", supported: true, version: \\\"115\\\" },\\n      { name: \\\"Edge\\\", supported: true, version: \\\"115\\\" },\\n      { name: \\\"Firefox\\\", supported: false, version: \\\"114\\\" },\\n      { name: \\\"Opera\\\", supported: true, version: \\\"101\\\" },\\n      { name: \\\"Safari\\\", supported: false, version: \\\"No\\\" },\\n    ],\\n    feature: \\\"view-timeline\\\",\\n    mobile: [\\n      { name: \\\"Chrome Android\\\", supported: true, version: \\\"115\\\" },\\n      { name: \\\"Firefox Android\\\", supported: false, version: \\\"No\\\" },\\n      { name: \\\"Opera Android\\\", supported: true, version: \\\"77\\\" },\\n      { name: \\\"Safari iOS\\\", supported: false, version: \\\"No\\\" },\\n      { name: \\\"Samsung Internet\\\", supported: true, version: \\\"23\\\" },\\n    ],\\n  },\\n  {\\n    desktop: [\\n      { name: \\\"Chrome\\\", supported: true, version: \\\"127\\\" },\\n      { name: \\\"Edge\\\", supported: true, version: \\\"127\\\" },\\n      { name: \\\"Firefox\\\", supported: false, version: \\\"3\\\" },\\n      { name: \\\"Opera\\\", supported: true, version: \\\"113\\\" },\\n      { name: \\\"Safari\\\", supported: true, version: \\\"16.4\\\" },\\n    ],\\n    feature: \\\"font-size-adjust\\\",\\n    mobile: [\\n      { name: \\\"Chrome Android\\\", supported: true, version: \\\"127\\\" },\\n      { name: \\\"Firefox Android\\\", supported: true, version: \\\"4\\\" },\\n      { name: \\\"Opera Android\\\", supported: true, version: \\\"84\\\" },\\n      { name: \\\"Safari iOS\\\", supported: true, version: \\\"16.4\\\" },\\n      { name: \\\"Samsung Internet\\\", supported: false, version: \\\"No\\\" },\\n    ],\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Table>\\n      <TableHeader>\\n        <TableRow className=\\\"border-y-0 *:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\">\\n          <TableCell />\\n          <TableHead className=\\\"border-b text-center\\\" colSpan={5}>\\n            <MonitorIcon aria-hidden=\\\"true\\\" className=\\\"inline-flex\\\" size={16} />\\n            <span className=\\\"sr-only\\\">Desktop browsers</span>\\n          </TableHead>\\n          <TableHead className=\\\"border-b text-center\\\" colSpan={5}>\\n            <SmartphoneIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"inline-flex\\\"\\n              size={16}\\n            />\\n            <span className=\\\"sr-only\\\">Mobile browsers</span>\\n          </TableHead>\\n        </TableRow>\\n      </TableHeader>\\n      <TableHeader>\\n        <TableRow className=\\\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\\\">\\n          <TableCell />\\n          {items[0].desktop.map((browser) => (\\n            <TableHead\\n              className=\\\"h-auto py-3 align-bottom text-foreground\\\"\\n              key={browser.name}\\n            >\\n              <span className=\\\"relative left-[calc(50%-.5rem)] block rotate-180 whitespace-nowrap leading-4 [text-orientation:sideways] [writing-mode:vertical-rl]\\\">\\n                {browser.name}\\n              </span>\\n            </TableHead>\\n          ))}\\n          {items[0].mobile.map((browser) => (\\n            <TableHead\\n              className=\\\"h-auto py-3 align-bottom text-foreground\\\"\\n              key={browser.name}\\n            >\\n              <span className=\\\"relative left-[calc(50%-.5rem)] block rotate-180 whitespace-nowrap leading-4 [text-orientation:sideways] [writing-mode:vertical-rl]\\\">\\n                {browser.name}\\n              </span>\\n            </TableHead>\\n          ))}\\n        </TableRow>\\n      </TableHeader>\\n      <TableBody>\\n        {items.map((item) => (\\n          <TableRow\\n            className=\\\"*:border-border [&>:not(:last-child)]:border-r\\\"\\n            key={item.feature}\\n          >\\n            <TableHead className=\\\"font-medium text-foreground\\\">\\n              {item.feature}\\n            </TableHead>\\n            {[...item.desktop, ...item.mobile].map((browser, index) => (\\n              <TableCell\\n                className=\\\"space-y-1 text-center\\\"\\n                key={`${browser.name}-${index}`}\\n              >\\n                {browser.supported ? (\\n                  <CheckIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"inline-flex stroke-emerald-600\\\"\\n                    size={16}\\n                  />\\n                ) : (\\n                  <XIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"inline-flex stroke-red-600\\\"\\n                    size={16}\\n                  />\\n                )}\\n                <span className=\\\"sr-only\\\">\\n                  {browser.supported ? \\\"Supported\\\" : \\\"Not supported\\\"}\\n                </span>\\n                <div className=\\\"font-medium text-muted-foreground text-xs\\\">\\n                  {browser.version}\\n                </div>\\n              </TableCell>\\n            ))}\\n          </TableRow>\\n        ))}\\n      </TableBody>\\n    </Table>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-477.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-477\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-477.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Item = {\\n  id: string;\\n  name: string;\\n  email: string;\\n  location: string;\\n  flag: string;\\n  status: \\\"Active\\\" | \\\"Inactive\\\" | \\\"Pending\\\";\\n  balance: number;\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    cell: ({ row }) => (\\n      <Checkbox\\n        aria-label=\\\"Select row\\\"\\n        checked={row.getIsSelected()}\\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\\n      />\\n    ),\\n    header: ({ table }) => (\\n      <Checkbox\\n        aria-label=\\\"Select all\\\"\\n        checked={\\n          table.getIsAllPageRowsSelected() ||\\n          (table.getIsSomePageRowsSelected() && \\\"indeterminate\\\")\\n        }\\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\\n      />\\n    ),\\n    id: \\\"select\\\",\\n  },\\n  {\\n    accessorKey: \\\"name\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium\\\">{row.getValue(\\\"name\\\")}</div>\\n    ),\\n    header: \\\"Name\\\",\\n  },\\n  {\\n    accessorKey: \\\"email\\\",\\n    header: \\\"Email\\\",\\n  },\\n  {\\n    accessorKey: \\\"location\\\",\\n    cell: ({ row }) => (\\n      <div>\\n        <span className=\\\"text-lg leading-none\\\">{row.original.flag}</span>{\\\" \\\"}\\n        {row.getValue(\\\"location\\\")}\\n      </div>\\n    ),\\n    header: \\\"Location\\\",\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    cell: ({ row }) => (\\n      <Badge\\n        className={cn(\\n          row.getValue(\\\"status\\\") === \\\"Inactive\\\" &&\\n            \\\"bg-muted-foreground/60 text-primary-foreground\\\",\\n        )}\\n      >\\n        {row.getValue(\\\"status\\\")}\\n      </Badge>\\n    ),\\n    header: \\\"Status\\\",\\n  },\\n  {\\n    accessorKey: \\\"balance\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"balance\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return <div className=\\\"text-right\\\">{formatted}</div>;\\n    },\\n    header: () => <div className=\\\"text-right\\\">Balance</div>,\\n  },\\n];\\n\\nexport default function Component() {\\n  const [data, setData] = useState<Item[]>([]);\\n\\n  useEffect(() => {\\n    async function fetchPosts() {\\n      const res = await fetch(\\n        \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\\\",\\n      );\\n      const data = await res.json();\\n      setData(data.slice(0, 5)); // Limit to 5 items\\n    }\\n    fetchPosts();\\n  }, []);\\n\\n  const table = useReactTable({\\n    columns,\\n    data,\\n    getCoreRowModel: getCoreRowModel(),\\n  });\\n\\n  return (\\n    <div>\\n      <Table>\\n        <TableHeader>\\n          {table.getHeaderGroups().map((headerGroup) => (\\n            <TableRow className=\\\"hover:bg-transparent\\\" key={headerGroup.id}>\\n              {headerGroup.headers.map((header) => {\\n                return (\\n                  <TableHead key={header.id}>\\n                    {header.isPlaceholder\\n                      ? null\\n                      : flexRender(\\n                          header.column.columnDef.header,\\n                          header.getContext(),\\n                        )}\\n                  </TableHead>\\n                );\\n              })}\\n            </TableRow>\\n          ))}\\n        </TableHeader>\\n        <TableBody>\\n          {table.getRowModel().rows?.length ? (\\n            table.getRowModel().rows.map((row) => (\\n              <TableRow\\n                data-state={row.getIsSelected() && \\\"selected\\\"}\\n                key={row.id}\\n              >\\n                {row.getVisibleCells().map((cell) => (\\n                  <TableCell key={cell.id}>\\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\\n                  </TableCell>\\n                ))}\\n              </TableRow>\\n            ))\\n          ) : (\\n            <TableRow>\\n              <TableCell className=\\\"h-24 text-center\\\" colSpan={columns.length}>\\n                No results.\\n              </TableCell>\\n            </TableRow>\\n          )}\\n        </TableBody>\\n        <TableFooter className=\\\"bg-transparent\\\">\\n          <TableRow className=\\\"hover:bg-transparent\\\">\\n            <TableCell colSpan={5}>Total</TableCell>\\n            <TableCell className=\\\"text-right\\\">\\n              {new Intl.NumberFormat(\\\"en-US\\\", {\\n                currency: \\\"USD\\\",\\n                style: \\\"currency\\\",\\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\\n            </TableCell>\\n          </TableRow>\\n        </TableFooter>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Basic data table made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"checkbox\",\n      \"badge\",\n      \"chip\",\n      \"flag\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-478.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-478\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-478.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type Column,\\n  type ColumnDef,\\n  type ColumnFiltersState,\\n  flexRender,\\n  getCoreRowModel,\\n  getFacetedMinMaxValues,\\n  getFacetedRowModel,\\n  getFacetedUniqueValues,\\n  getFilteredRowModel,\\n  getSortedRowModel,\\n  type RowData,\\n  type SortingState,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport {\\n  ChevronDownIcon,\\n  ChevronUpIcon,\\n  ExternalLinkIcon,\\n  SearchIcon,\\n} from \\\"lucide-react\\\";\\nimport { useId, useMemo, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ndeclare module \\\"@tanstack/react-table\\\" {\\n  //allows us to define custom properties for our columns\\n  // Type parameters TData and TValue must match TanStack Table's declaration exactly\\n  // biome-ignore lint: Type parameters required for module augmentation compatibility\\n  interface ColumnMeta<TData extends RowData, TValue> {\\n    filterVariant?: \\\"text\\\" | \\\"range\\\" | \\\"select\\\";\\n  }\\n}\\n\\ntype Item = {\\n  id: string;\\n  keyword: string;\\n  intents: Array<\\n    \\\"Informational\\\" | \\\"Navigational\\\" | \\\"Commercial\\\" | \\\"Transactional\\\"\\n  >;\\n  volume: number;\\n  cpc: number;\\n  traffic: number;\\n  link: string;\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    cell: ({ row }) => (\\n      <Checkbox\\n        aria-label=\\\"Select row\\\"\\n        checked={row.getIsSelected()}\\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\\n      />\\n    ),\\n    header: ({ table }) => (\\n      <Checkbox\\n        aria-label=\\\"Select all\\\"\\n        checked={\\n          table.getIsAllPageRowsSelected() ||\\n          (table.getIsSomePageRowsSelected() && \\\"indeterminate\\\")\\n        }\\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\\n      />\\n    ),\\n    id: \\\"select\\\",\\n  },\\n  {\\n    accessorKey: \\\"keyword\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium\\\">{row.getValue(\\\"keyword\\\")}</div>\\n    ),\\n    header: \\\"Keyword\\\",\\n  },\\n  {\\n    accessorKey: \\\"intents\\\",\\n    cell: ({ row }) => {\\n      const intents = row.getValue(\\\"intents\\\") as string[];\\n      return (\\n        <div className=\\\"flex gap-1\\\">\\n          {intents.map((intent) => {\\n            const styles = {\\n              Commercial: \\\"bg-amber-400/20 text-amber-500\\\",\\n              Informational: \\\"bg-indigo-400/20 text-indigo-500\\\",\\n              Navigational: \\\"bg-emerald-400/20 text-emerald-500\\\",\\n              Transactional: \\\"bg-rose-400/20 text-rose-500\\\",\\n            }[intent];\\n\\n            return (\\n              <div\\n                className={cn(\\n                  \\\"flex size-5 items-center justify-center rounded font-medium text-xs\\\",\\n                  styles,\\n                )}\\n                key={intent}\\n              >\\n                {intent.charAt(0)}\\n              </div>\\n            );\\n          })}\\n        </div>\\n      );\\n    },\\n    enableSorting: false,\\n    filterFn: (row, id, filterValue) => {\\n      const rowValue = row.getValue(id);\\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\\n    },\\n    header: \\\"Intents\\\",\\n    meta: {\\n      filterVariant: \\\"select\\\",\\n    },\\n  },\\n  {\\n    accessorKey: \\\"volume\\\",\\n    cell: ({ row }) => {\\n      const volume = Number.parseInt(row.getValue(\\\"volume\\\"), 10);\\n      return new Intl.NumberFormat(\\\"en-US\\\", {\\n        maximumFractionDigits: 1,\\n        notation: \\\"compact\\\",\\n      }).format(volume);\\n    },\\n    header: \\\"Volume\\\",\\n    meta: {\\n      filterVariant: \\\"range\\\",\\n    },\\n  },\\n  {\\n    accessorKey: \\\"cpc\\\",\\n    cell: ({ row }) => <div>${row.getValue(\\\"cpc\\\")}</div>,\\n    header: \\\"CPC\\\",\\n    meta: {\\n      filterVariant: \\\"range\\\",\\n    },\\n  },\\n  {\\n    accessorKey: \\\"traffic\\\",\\n    cell: ({ row }) => {\\n      const traffic = Number.parseInt(row.getValue(\\\"traffic\\\"), 10);\\n      return new Intl.NumberFormat(\\\"en-US\\\", {\\n        maximumFractionDigits: 1,\\n        notation: \\\"compact\\\",\\n      }).format(traffic);\\n    },\\n    header: \\\"Traffic\\\",\\n    meta: {\\n      filterVariant: \\\"range\\\",\\n    },\\n  },\\n  {\\n    accessorKey: \\\"link\\\",\\n    cell: ({ row }) => (\\n      <a className=\\\"inline-flex items-center gap-1 hover:underline\\\" href=\\\"#\\\">\\n        {row.getValue(\\\"link\\\")} <ExternalLinkIcon aria-hidden=\\\"true\\\" size={12} />\\n      </a>\\n    ),\\n    enableSorting: false,\\n    header: \\\"Link\\\",\\n  },\\n];\\n\\nconst items: Item[] = [\\n  {\\n    cpc: 2.5,\\n    id: \\\"1\\\",\\n    intents: [\\\"Informational\\\", \\\"Navigational\\\"],\\n    keyword: \\\"react components\\\",\\n    link: \\\"https://coss.com/origin\\\",\\n    traffic: 88,\\n    volume: 2507,\\n  },\\n  {\\n    cpc: 4.75,\\n    id: \\\"2\\\",\\n    intents: [\\\"Commercial\\\", \\\"Transactional\\\"],\\n    keyword: \\\"buy react templates\\\",\\n    link: \\\"https://coss.com/origin/input\\\",\\n    traffic: 65,\\n    volume: 1850,\\n  },\\n  {\\n    cpc: 3.25,\\n    id: \\\"3\\\",\\n    intents: [\\\"Informational\\\", \\\"Commercial\\\"],\\n    keyword: \\\"react ui library\\\",\\n    link: \\\"https://coss.com/origin/badge\\\",\\n    traffic: 112,\\n    volume: 3200,\\n  },\\n  {\\n    cpc: 1.95,\\n    id: \\\"4\\\",\\n    intents: [\\\"Transactional\\\"],\\n    keyword: \\\"tailwind components download\\\",\\n    link: \\\"https://coss.com/origin/alert\\\",\\n    traffic: 45,\\n    volume: 890,\\n  },\\n  {\\n    cpc: 5.5,\\n    id: \\\"5\\\",\\n    intents: [\\\"Commercial\\\", \\\"Transactional\\\"],\\n    keyword: \\\"react dashboard template free\\\",\\n    link: \\\"https://coss.com/origin/tabs\\\",\\n    traffic: 156,\\n    volume: 4100,\\n  },\\n  {\\n    cpc: 1.25,\\n    id: \\\"6\\\",\\n    intents: [\\\"Informational\\\"],\\n    keyword: \\\"how to use react components\\\",\\n    link: \\\"https://coss.com/origin/table\\\",\\n    traffic: 42,\\n    volume: 1200,\\n  },\\n  {\\n    cpc: 6.8,\\n    id: \\\"7\\\",\\n    intents: [\\\"Commercial\\\", \\\"Transactional\\\"],\\n    keyword: \\\"react ui kit premium\\\",\\n    link: \\\"https://coss.com/origin/avatar\\\",\\n    traffic: 28,\\n    volume: 760,\\n  },\\n  {\\n    cpc: 1.8,\\n    id: \\\"8\\\",\\n    intents: [\\\"Informational\\\", \\\"Navigational\\\"],\\n    keyword: \\\"react component documentation\\\",\\n    link: \\\"https://coss.com/origin\\\",\\n    traffic: 35,\\n    volume: 950,\\n  },\\n];\\n\\nexport default function Component() {\\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\\n  const [sorting, setSorting] = useState<SortingState>([\\n    {\\n      desc: false,\\n      id: \\\"traffic\\\",\\n    },\\n  ]);\\n\\n  const table = useReactTable({\\n    columns,\\n    data: items,\\n    enableSortingRemoval: false,\\n    getCoreRowModel: getCoreRowModel(),\\n    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter\\n    getFacetedRowModel: getFacetedRowModel(), // client-side faceting\\n    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete\\n    getFilteredRowModel: getFilteredRowModel(), //client-side filtering\\n    getSortedRowModel: getSortedRowModel(),\\n    onColumnFiltersChange: setColumnFilters,\\n    onSortingChange: setSorting,\\n    state: {\\n      columnFilters,\\n      sorting,\\n    },\\n  });\\n\\n  const keywordColumn = table.getColumn(\\\"keyword\\\");\\n  const intentsColumn = table.getColumn(\\\"intents\\\");\\n  const volumeColumn = table.getColumn(\\\"volume\\\");\\n  const cpcColumn = table.getColumn(\\\"cpc\\\");\\n  const trafficColumn = table.getColumn(\\\"traffic\\\");\\n\\n  return (\\n    <div className=\\\"space-y-6\\\">\\n      {/* Filters */}\\n      <div className=\\\"flex flex-wrap gap-3\\\">\\n        {/* Search input */}\\n        {keywordColumn && (\\n          <div className=\\\"w-44\\\">\\n            <Filter column={keywordColumn} />\\n          </div>\\n        )}\\n        {/* Intents select */}\\n        {intentsColumn && (\\n          <div className=\\\"w-36\\\">\\n            <Filter column={intentsColumn} />\\n          </div>\\n        )}\\n        {/* Volume inputs */}\\n        {volumeColumn && (\\n          <div className=\\\"w-36\\\">\\n            <Filter column={volumeColumn} />\\n          </div>\\n        )}\\n        {/* CPC inputs */}\\n        {cpcColumn && (\\n          <div className=\\\"w-36\\\">\\n            <Filter column={cpcColumn} />\\n          </div>\\n        )}\\n        {/* Traffic inputs */}\\n        {trafficColumn && (\\n          <div className=\\\"w-36\\\">\\n            <Filter column={trafficColumn} />\\n          </div>\\n        )}\\n      </div>\\n\\n      <Table>\\n        <TableHeader>\\n          {table.getHeaderGroups().map((headerGroup) => (\\n            <TableRow className=\\\"bg-muted/50\\\" key={headerGroup.id}>\\n              {headerGroup.headers.map((header) => {\\n                return (\\n                  <TableHead\\n                    aria-sort={\\n                      header.column.getIsSorted() === \\\"asc\\\"\\n                        ? \\\"ascending\\\"\\n                        : header.column.getIsSorted() === \\\"desc\\\"\\n                          ? \\\"descending\\\"\\n                          : \\\"none\\\"\\n                    }\\n                    className=\\\"relative h-10 select-none border-t\\\"\\n                    key={header.id}\\n                  >\\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\\n                      <div\\n                        className={cn(\\n                          header.column.getCanSort() &&\\n                            \\\"flex h-full cursor-pointer select-none items-center justify-between gap-2\\\",\\n                        )}\\n                        onClick={header.column.getToggleSortingHandler()}\\n                        onKeyDown={(e) => {\\n                          // Enhanced keyboard handling for sorting\\n                          if (\\n                            header.column.getCanSort() &&\\n                            (e.key === \\\"Enter\\\" || e.key === \\\" \\\")\\n                          ) {\\n                            e.preventDefault();\\n                            header.column.getToggleSortingHandler()?.(e);\\n                          }\\n                        }}\\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\\n                      >\\n                        {flexRender(\\n                          header.column.columnDef.header,\\n                          header.getContext(),\\n                        )}\\n                        {{\\n                          asc: (\\n                            <ChevronUpIcon\\n                              aria-hidden=\\\"true\\\"\\n                              className=\\\"shrink-0 opacity-60\\\"\\n                              size={16}\\n                            />\\n                          ),\\n                          desc: (\\n                            <ChevronDownIcon\\n                              aria-hidden=\\\"true\\\"\\n                              className=\\\"shrink-0 opacity-60\\\"\\n                              size={16}\\n                            />\\n                          ),\\n                        }[header.column.getIsSorted() as string] ?? (\\n                          <span aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n                        )}\\n                      </div>\\n                    ) : (\\n                      flexRender(\\n                        header.column.columnDef.header,\\n                        header.getContext(),\\n                      )\\n                    )}\\n                  </TableHead>\\n                );\\n              })}\\n            </TableRow>\\n          ))}\\n        </TableHeader>\\n        <TableBody>\\n          {table.getRowModel().rows?.length ? (\\n            table.getRowModel().rows.map((row) => (\\n              <TableRow\\n                data-state={row.getIsSelected() && \\\"selected\\\"}\\n                key={row.id}\\n              >\\n                {row.getVisibleCells().map((cell) => (\\n                  <TableCell key={cell.id}>\\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\\n                  </TableCell>\\n                ))}\\n              </TableRow>\\n            ))\\n          ) : (\\n            <TableRow>\\n              <TableCell className=\\\"h-24 text-center\\\" colSpan={columns.length}>\\n                No results.\\n              </TableCell>\\n            </TableRow>\\n          )}\\n        </TableBody>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Data table with filters made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\\nfunction Filter({ column }: { column: Column<Item, unknown> }) {\\n  const id = useId();\\n  const columnFilterValue = column.getFilterValue();\\n  const { filterVariant } = column.columnDef.meta ?? {};\\n  const columnHeader =\\n    typeof column.columnDef.header === \\\"string\\\" ? column.columnDef.header : \\\"\\\";\\n  const sortedUniqueValues = useMemo(() => {\\n    if (filterVariant === \\\"range\\\") return [];\\n\\n    // Get all unique values from the column\\n    const values = Array.from(column.getFacetedUniqueValues().keys());\\n\\n    // If the values are arrays, flatten them and get unique items\\n    const flattenedValues = values.reduce((acc: string[], curr) => {\\n      if (Array.isArray(curr)) {\\n        acc.push(...curr);\\n      } else {\\n        acc.push(curr);\\n      }\\n      return acc;\\n    }, []);\\n\\n    // Get unique values and sort them\\n    return Array.from(new Set(flattenedValues)).sort();\\n  }, [column, filterVariant]);\\n\\n  if (filterVariant === \\\"range\\\") {\\n    return (\\n      <div className=\\\"*:not-first:mt-2\\\">\\n        <Label>{columnHeader}</Label>\\n        <div className=\\\"flex\\\">\\n          <Input\\n            aria-label={`${columnHeader} min`}\\n            className=\\\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\\\"\\n            id={`${id}-range-1`}\\n            onChange={(e) =>\\n              column.setFilterValue((old: [number, number]) => [\\n                e.target.value ? Number(e.target.value) : undefined,\\n                old?.[1],\\n              ])\\n            }\\n            placeholder=\\\"Min\\\"\\n            type=\\\"number\\\"\\n            value={(columnFilterValue as [number, number])?.[0] ?? \\\"\\\"}\\n          />\\n          <Input\\n            aria-label={`${columnHeader} max`}\\n            className=\\\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\\\"\\n            id={`${id}-range-2`}\\n            onChange={(e) =>\\n              column.setFilterValue((old: [number, number]) => [\\n                old?.[0],\\n                e.target.value ? Number(e.target.value) : undefined,\\n              ])\\n            }\\n            placeholder=\\\"Max\\\"\\n            type=\\\"number\\\"\\n            value={(columnFilterValue as [number, number])?.[1] ?? \\\"\\\"}\\n          />\\n        </div>\\n      </div>\\n    );\\n  }\\n\\n  if (filterVariant === \\\"select\\\") {\\n    return (\\n      <div className=\\\"*:not-first:mt-2\\\">\\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\\n        <Select\\n          onValueChange={(value) => {\\n            column.setFilterValue(value === \\\"all\\\" ? undefined : value);\\n          }}\\n          value={columnFilterValue?.toString() ?? \\\"all\\\"}\\n        >\\n          <SelectTrigger id={`${id}-select`}>\\n            <SelectValue />\\n          </SelectTrigger>\\n          <SelectContent>\\n            <SelectItem value=\\\"all\\\">All</SelectItem>\\n            {sortedUniqueValues.map((value) => (\\n              <SelectItem key={String(value)} value={String(value)}>\\n                {String(value)}\\n              </SelectItem>\\n            ))}\\n          </SelectContent>\\n        </Select>\\n      </div>\\n    );\\n  }\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"peer ps-9\\\"\\n          id={`${id}-input`}\\n          onChange={(e) => column.setFilterValue(e.target.value)}\\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\\n          type=\\\"text\\\"\\n          value={(columnFilterValue ?? \\\"\\\") as string}\\n        />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n          <SearchIcon size={16} />\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"checkbox\",\n      \"search\",\n      \"select\",\n      \"range\",\n      \"input\",\n      \"filter\",\n      \"sort\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-479.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-479\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-479.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  getSortedRowModel,\\n  type SortingState,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport { ChevronDownIcon, ChevronUpIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Item = {\\n  id: string;\\n  name: string;\\n  email: string;\\n  location: string;\\n  flag: string;\\n  status: \\\"Active\\\" | \\\"Inactive\\\" | \\\"Pending\\\";\\n  balance: number;\\n  department: string;\\n  role: string;\\n  joinDate: string;\\n  lastActive: string;\\n  performance: \\\"Excellent\\\" | \\\"Good\\\" | \\\"Average\\\" | \\\"Poor\\\";\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    accessorKey: \\\"name\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"truncate font-medium\\\">{row.getValue(\\\"name\\\")}</div>\\n    ),\\n    header: \\\"Name\\\",\\n    sortDescFirst: false,\\n    sortUndefined: \\\"last\\\",\\n  },\\n  {\\n    accessorKey: \\\"email\\\",\\n    header: \\\"Email\\\",\\n  },\\n  {\\n    accessorKey: \\\"location\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"truncate\\\">\\n        <span className=\\\"text-lg leading-none\\\">{row.original.flag}</span>{\\\" \\\"}\\n        {row.getValue(\\\"location\\\")}\\n      </div>\\n    ),\\n    header: \\\"Location\\\",\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    header: \\\"Status\\\",\\n  },\\n  {\\n    accessorKey: \\\"balance\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"balance\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return formatted;\\n    },\\n    header: \\\"Balance\\\",\\n  },\\n  {\\n    accessorKey: \\\"department\\\",\\n    header: \\\"Department\\\",\\n  },\\n  {\\n    accessorKey: \\\"role\\\",\\n    header: \\\"Role\\\",\\n  },\\n  {\\n    accessorKey: \\\"joinDate\\\",\\n    header: \\\"Join Date\\\",\\n  },\\n  {\\n    accessorKey: \\\"lastActive\\\",\\n    header: \\\"Last Active\\\",\\n  },\\n  {\\n    accessorKey: \\\"performance\\\",\\n    header: \\\"Performance\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const [data, setData] = useState<Item[]>([]);\\n  const [sorting, setSorting] = useState<SortingState>([\\n    {\\n      desc: false,\\n      id: \\\"name\\\",\\n    },\\n  ]);\\n\\n  useEffect(() => {\\n    async function fetchPosts() {\\n      const res = await fetch(\\n        \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\\\",\\n      );\\n      const data = await res.json();\\n      setData(data.slice(0, 5)); // Limit to 5 items\\n    }\\n    fetchPosts();\\n  }, []);\\n\\n  const table = useReactTable({\\n    columnResizeMode: \\\"onChange\\\",\\n    columns,\\n    data,\\n    enableSortingRemoval: false,\\n    getCoreRowModel: getCoreRowModel(),\\n    getSortedRowModel: getSortedRowModel(),\\n    onSortingChange: setSorting,\\n    state: {\\n      sorting,\\n    },\\n  });\\n\\n  return (\\n    <div>\\n      <Table\\n        className=\\\"table-fixed\\\"\\n        style={{\\n          width: table.getCenterTotalSize(),\\n        }}\\n      >\\n        <TableHeader>\\n          {table.getHeaderGroups().map((headerGroup) => (\\n            <TableRow className=\\\"bg-muted/50\\\" key={headerGroup.id}>\\n              {headerGroup.headers.map((header) => {\\n                return (\\n                  <TableHead\\n                    aria-sort={\\n                      header.column.getIsSorted() === \\\"asc\\\"\\n                        ? \\\"ascending\\\"\\n                        : header.column.getIsSorted() === \\\"desc\\\"\\n                          ? \\\"descending\\\"\\n                          : \\\"none\\\"\\n                    }\\n                    className=\\\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\\\"\\n                    key={header.id}\\n                    {...{\\n                      colSpan: header.colSpan,\\n                      style: {\\n                        width: header.getSize(),\\n                      },\\n                    }}\\n                  >\\n                    {header.isPlaceholder ? null : (\\n                      <div\\n                        className={cn(\\n                          header.column.getCanSort() &&\\n                            \\\"flex h-full cursor-pointer select-none items-center justify-between gap-2\\\",\\n                        )}\\n                        onClick={header.column.getToggleSortingHandler()}\\n                        onKeyDown={(e) => {\\n                          // Enhanced keyboard handling for sorting\\n                          if (\\n                            header.column.getCanSort() &&\\n                            (e.key === \\\"Enter\\\" || e.key === \\\" \\\")\\n                          ) {\\n                            e.preventDefault();\\n                            header.column.getToggleSortingHandler()?.(e);\\n                          }\\n                        }}\\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\\n                      >\\n                        <span className=\\\"truncate\\\">\\n                          {flexRender(\\n                            header.column.columnDef.header,\\n                            header.getContext(),\\n                          )}\\n                        </span>\\n                        {{\\n                          asc: (\\n                            <ChevronUpIcon\\n                              aria-hidden=\\\"true\\\"\\n                              className=\\\"shrink-0 opacity-60\\\"\\n                              size={16}\\n                            />\\n                          ),\\n                          desc: (\\n                            <ChevronDownIcon\\n                              aria-hidden=\\\"true\\\"\\n                              className=\\\"shrink-0 opacity-60\\\"\\n                              size={16}\\n                            />\\n                          ),\\n                        }[header.column.getIsSorted() as string] ?? null}\\n                      </div>\\n                    )}\\n                    {header.column.getCanResize() && (\\n                      <div\\n                        {...{\\n                          className:\\n                            \\\"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\\\",\\n                          onDoubleClick: () => header.column.resetSize(),\\n                          onMouseDown: header.getResizeHandler(),\\n                          onTouchStart: header.getResizeHandler(),\\n                        }}\\n                      />\\n                    )}\\n                  </TableHead>\\n                );\\n              })}\\n            </TableRow>\\n          ))}\\n        </TableHeader>\\n        <TableBody>\\n          {table.getRowModel().rows?.length ? (\\n            table.getRowModel().rows.map((row) => (\\n              <TableRow\\n                data-state={row.getIsSelected() && \\\"selected\\\"}\\n                key={row.id}\\n              >\\n                {row.getVisibleCells().map((cell) => (\\n                  <TableCell className=\\\"truncate\\\" key={cell.id}>\\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\\n                  </TableCell>\\n                ))}\\n              </TableRow>\\n            ))\\n          ) : (\\n            <TableRow>\\n              <TableCell className=\\\"h-24 text-center\\\" colSpan={columns.length}>\\n                No results.\\n              </TableCell>\\n            </TableRow>\\n          )}\\n        </TableBody>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Resizable and sortable columns made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"flag\",\n      \"sort\",\n      \"resize\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-48.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-48\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-payment-inputs\"\n  ],\n  \"devDependencies\": [\n    \"@types/react-payment-inputs\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-48.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\nimport { usePaymentInputs } from \\\"react-payment-inputs\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const { getExpiryDateProps } = usePaymentInputs();\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={`expiry-${id}`}>Expiry date</Label>\\n      <Input\\n        {...getExpiryDateProps()}\\n        className=\\\"[direction:inherit]\\\"\\n        id={`expiry-${id}`}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/medipass/react-payment-inputs\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Payment Inputs\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"checkout\",\n      \"payment\",\n      \"credit card\",\n      \"form\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-480.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-480\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-480.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type Column,\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  getSortedRowModel,\\n  type SortingState,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport {\\n  ArrowLeftToLineIcon,\\n  ArrowRightToLineIcon,\\n  EllipsisIcon,\\n  PinOffIcon,\\n} from \\\"lucide-react\\\";\\nimport { type CSSProperties, useEffect, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Item = {\\n  id: string;\\n  name: string;\\n  email: string;\\n  location: string;\\n  flag: string;\\n  status: \\\"Active\\\" | \\\"Inactive\\\" | \\\"Pending\\\";\\n  balance: number;\\n  department: string;\\n  role: string;\\n  joinDate: string;\\n  lastActive: string;\\n  performance: \\\"Good\\\" | \\\"Very Good\\\" | \\\"Excellent\\\" | \\\"Outstanding\\\";\\n};\\n\\n// Helper function to compute pinning styles for columns\\nconst getPinningStyles = (column: Column<Item>): CSSProperties => {\\n  const isPinned = column.getIsPinned();\\n  return {\\n    left: isPinned === \\\"left\\\" ? `${column.getStart(\\\"left\\\")}px` : undefined,\\n    position: isPinned ? \\\"sticky\\\" : \\\"relative\\\",\\n    right: isPinned === \\\"right\\\" ? `${column.getAfter(\\\"right\\\")}px` : undefined,\\n    width: column.getSize(),\\n    zIndex: isPinned ? 1 : 0,\\n  };\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    accessorKey: \\\"name\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"truncate font-medium\\\">{row.getValue(\\\"name\\\")}</div>\\n    ),\\n    header: \\\"Name\\\",\\n  },\\n  {\\n    accessorKey: \\\"email\\\",\\n    header: \\\"Email\\\",\\n  },\\n  {\\n    accessorKey: \\\"location\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"truncate\\\">\\n        <span className=\\\"text-lg leading-none\\\">{row.original.flag}</span>{\\\" \\\"}\\n        {row.getValue(\\\"location\\\")}\\n      </div>\\n    ),\\n    header: \\\"Location\\\",\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    header: \\\"Status\\\",\\n  },\\n  {\\n    accessorKey: \\\"balance\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"balance\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return formatted;\\n    },\\n    header: \\\"Balance\\\",\\n  },\\n  {\\n    accessorKey: \\\"department\\\",\\n    header: \\\"Department\\\",\\n  },\\n  {\\n    accessorKey: \\\"role\\\",\\n    header: \\\"Role\\\",\\n  },\\n  {\\n    accessorKey: \\\"joinDate\\\",\\n    header: \\\"Join Date\\\",\\n  },\\n  {\\n    accessorKey: \\\"lastActive\\\",\\n    header: \\\"Last Active\\\",\\n  },\\n  {\\n    accessorKey: \\\"performance\\\",\\n    header: \\\"Performance\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const [data, setData] = useState<Item[]>([]);\\n  const [sorting, setSorting] = useState<SortingState>([]);\\n\\n  useEffect(() => {\\n    async function fetchPosts() {\\n      const res = await fetch(\\n        \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\\\",\\n      );\\n      const data = await res.json();\\n      setData(data.slice(0, 5)); // Limit to 5 items\\n    }\\n    fetchPosts();\\n  }, []);\\n\\n  const table = useReactTable({\\n    columnResizeMode: \\\"onChange\\\",\\n    columns,\\n    data,\\n    enableSortingRemoval: false,\\n    getCoreRowModel: getCoreRowModel(),\\n    getSortedRowModel: getSortedRowModel(),\\n    onSortingChange: setSorting,\\n    state: {\\n      sorting,\\n    },\\n  });\\n\\n  return (\\n    <div>\\n      <Table\\n        className=\\\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\\\"\\n        style={{\\n          width: table.getTotalSize(),\\n        }}\\n      >\\n        <TableHeader>\\n          {table.getHeaderGroups().map((headerGroup) => (\\n            <TableRow className=\\\"bg-muted/50\\\" key={headerGroup.id}>\\n              {headerGroup.headers.map((header) => {\\n                const { column } = header;\\n                const isPinned = column.getIsPinned();\\n                const isLastLeftPinned =\\n                  isPinned === \\\"left\\\" && column.getIsLastColumn(\\\"left\\\");\\n                const isFirstRightPinned =\\n                  isPinned === \\\"right\\\" && column.getIsFirstColumn(\\\"right\\\");\\n\\n                return (\\n                  <TableHead\\n                    className=\\\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\\\"\\n                    colSpan={header.colSpan}\\n                    data-last-col={\\n                      isLastLeftPinned\\n                        ? \\\"left\\\"\\n                        : isFirstRightPinned\\n                          ? \\\"right\\\"\\n                          : undefined\\n                    }\\n                    data-pinned={isPinned || undefined}\\n                    key={header.id}\\n                    style={{ ...getPinningStyles(column) }}\\n                  >\\n                    <div className=\\\"flex items-center justify-between gap-2\\\">\\n                      <span className=\\\"truncate\\\">\\n                        {header.isPlaceholder\\n                          ? null\\n                          : flexRender(\\n                              header.column.columnDef.header,\\n                              header.getContext(),\\n                            )}\\n                      </span>\\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\\n                      {!header.isPlaceholder &&\\n                        header.column.getCanPin() &&\\n                        (header.column.getIsPinned() ? (\\n                          <Button\\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\\n                            className=\\\"-mr-1 size-7 shadow-none\\\"\\n                            onClick={() => header.column.pin(false)}\\n                            size=\\\"icon\\\"\\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\\n                            variant=\\\"ghost\\\"\\n                          >\\n                            <PinOffIcon\\n                              aria-hidden=\\\"true\\\"\\n                              className=\\\"opacity-60\\\"\\n                              size={16}\\n                            />\\n                          </Button>\\n                        ) : (\\n                          <DropdownMenu>\\n                            <DropdownMenuTrigger asChild>\\n                              <Button\\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\\n                                className=\\\"-mr-1 size-7 shadow-none\\\"\\n                                size=\\\"icon\\\"\\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\\n                                variant=\\\"ghost\\\"\\n                              >\\n                                <EllipsisIcon\\n                                  aria-hidden=\\\"true\\\"\\n                                  className=\\\"opacity-60\\\"\\n                                  size={16}\\n                                />\\n                              </Button>\\n                            </DropdownMenuTrigger>\\n                            <DropdownMenuContent align=\\\"end\\\">\\n                              <DropdownMenuItem\\n                                onClick={() => header.column.pin(\\\"left\\\")}\\n                              >\\n                                <ArrowLeftToLineIcon\\n                                  aria-hidden=\\\"true\\\"\\n                                  className=\\\"opacity-60\\\"\\n                                  size={16}\\n                                />\\n                                Stick to left\\n                              </DropdownMenuItem>\\n                              <DropdownMenuItem\\n                                onClick={() => header.column.pin(\\\"right\\\")}\\n                              >\\n                                <ArrowRightToLineIcon\\n                                  aria-hidden=\\\"true\\\"\\n                                  className=\\\"opacity-60\\\"\\n                                  size={16}\\n                                />\\n                                Stick to right\\n                              </DropdownMenuItem>\\n                            </DropdownMenuContent>\\n                          </DropdownMenu>\\n                        ))}\\n                      {header.column.getCanResize() && (\\n                        <div\\n                          {...{\\n                            className:\\n                              \\\"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\\\",\\n                            onDoubleClick: () => header.column.resetSize(),\\n                            onMouseDown: header.getResizeHandler(),\\n                            onTouchStart: header.getResizeHandler(),\\n                          }}\\n                        />\\n                      )}\\n                    </div>\\n                  </TableHead>\\n                );\\n              })}\\n            </TableRow>\\n          ))}\\n        </TableHeader>\\n        <TableBody>\\n          {table.getRowModel().rows?.length ? (\\n            table.getRowModel().rows.map((row) => (\\n              <TableRow\\n                data-state={row.getIsSelected() && \\\"selected\\\"}\\n                key={row.id}\\n              >\\n                {row.getVisibleCells().map((cell) => {\\n                  const { column } = cell;\\n                  const isPinned = column.getIsPinned();\\n                  const isLastLeftPinned =\\n                    isPinned === \\\"left\\\" && column.getIsLastColumn(\\\"left\\\");\\n                  const isFirstRightPinned =\\n                    isPinned === \\\"right\\\" && column.getIsFirstColumn(\\\"right\\\");\\n\\n                  return (\\n                    <TableCell\\n                      className=\\\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\\\"\\n                      data-last-col={\\n                        isLastLeftPinned\\n                          ? \\\"left\\\"\\n                          : isFirstRightPinned\\n                            ? \\\"right\\\"\\n                            : undefined\\n                      }\\n                      data-pinned={isPinned || undefined}\\n                      key={cell.id}\\n                      style={{ ...getPinningStyles(column) }}\\n                    >\\n                      {flexRender(\\n                        cell.column.columnDef.cell,\\n                        cell.getContext(),\\n                      )}\\n                    </TableCell>\\n                  );\\n                })}\\n              </TableRow>\\n            ))\\n          ) : (\\n            <TableRow>\\n              <TableCell className=\\\"h-24 text-center\\\" colSpan={columns.length}>\\n                No results.\\n              </TableCell>\\n            </TableRow>\\n          )}\\n        </TableBody>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Pinnable columns made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"flag\",\n      \"sticky\",\n      \"resize\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-481.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-481\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@dnd-kit/core\",\n    \"@dnd-kit/modifiers\",\n    \"@dnd-kit/sortable\",\n    \"@dnd-kit/utilities\",\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-481.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  closestCenter,\\n  DndContext,\\n  type DragEndEvent,\\n  KeyboardSensor,\\n  MouseSensor,\\n  TouchSensor,\\n  useSensor,\\n  useSensors,\\n} from \\\"@dnd-kit/core\\\";\\nimport { restrictToHorizontalAxis } from \\\"@dnd-kit/modifiers\\\";\\nimport {\\n  arrayMove,\\n  horizontalListSortingStrategy,\\n  SortableContext,\\n  useSortable,\\n} from \\\"@dnd-kit/sortable\\\";\\nimport { CSS } from \\\"@dnd-kit/utilities\\\";\\nimport {\\n  type Cell,\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  getSortedRowModel,\\n  type Header,\\n  type SortingState,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \\\"lucide-react\\\";\\nimport { type CSSProperties, useEffect, useId, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Item = {\\n  id: string;\\n  name: string;\\n  email: string;\\n  location: string;\\n  flag: string;\\n  status: \\\"Active\\\" | \\\"Inactive\\\" | \\\"Pending\\\";\\n  balance: number;\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    accessorKey: \\\"name\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"truncate font-medium\\\">{row.getValue(\\\"name\\\")}</div>\\n    ),\\n    header: \\\"Name\\\",\\n    id: \\\"name\\\",\\n    sortDescFirst: false,\\n    sortUndefined: \\\"last\\\",\\n  },\\n  {\\n    accessorKey: \\\"email\\\",\\n    header: \\\"Email\\\",\\n    id: \\\"email\\\",\\n  },\\n  {\\n    accessorKey: \\\"location\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"truncate\\\">\\n        <span className=\\\"text-lg leading-none\\\">{row.original.flag}</span>{\\\" \\\"}\\n        {row.getValue(\\\"location\\\")}\\n      </div>\\n    ),\\n    header: \\\"Location\\\",\\n    id: \\\"location\\\",\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    header: \\\"Status\\\",\\n    id: \\\"status\\\",\\n  },\\n  {\\n    accessorKey: \\\"balance\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"balance\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return formatted;\\n    },\\n    header: \\\"Balance\\\",\\n    id: \\\"balance\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const [data, setData] = useState<Item[]>([]);\\n  const [sorting, setSorting] = useState<SortingState>([]);\\n  const [columnOrder, setColumnOrder] = useState<string[]>(\\n    columns.map((column) => column.id as string),\\n  );\\n\\n  useEffect(() => {\\n    async function fetchPosts() {\\n      const res = await fetch(\\n        \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\\\",\\n      );\\n      const data = await res.json();\\n      setData(data.slice(0, 5)); // Limit to 5 items\\n    }\\n    fetchPosts();\\n  }, []);\\n\\n  const table = useReactTable({\\n    columnResizeMode: \\\"onChange\\\",\\n    columns,\\n    data,\\n    enableSortingRemoval: false,\\n    getCoreRowModel: getCoreRowModel(),\\n    getSortedRowModel: getSortedRowModel(),\\n    onColumnOrderChange: setColumnOrder,\\n    onSortingChange: setSorting,\\n    state: {\\n      columnOrder,\\n      sorting,\\n    },\\n  });\\n\\n  // reorder columns after drag & drop\\n  function handleDragEnd(event: DragEndEvent) {\\n    const { active, over } = event;\\n    if (active && over && active.id !== over.id) {\\n      setColumnOrder((columnOrder) => {\\n        const oldIndex = columnOrder.indexOf(active.id as string);\\n        const newIndex = columnOrder.indexOf(over.id as string);\\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\\n      });\\n    }\\n  }\\n\\n  const sensors = useSensors(\\n    useSensor(MouseSensor, {}),\\n    useSensor(TouchSensor, {}),\\n    useSensor(KeyboardSensor, {}),\\n  );\\n\\n  return (\\n    <DndContext\\n      collisionDetection={closestCenter}\\n      id={useId()}\\n      modifiers={[restrictToHorizontalAxis]}\\n      onDragEnd={handleDragEnd}\\n      sensors={sensors}\\n    >\\n      <Table>\\n        <TableHeader>\\n          {table.getHeaderGroups().map((headerGroup) => (\\n            <TableRow className=\\\"bg-muted/50\\\" key={headerGroup.id}>\\n              <SortableContext\\n                items={columnOrder}\\n                strategy={horizontalListSortingStrategy}\\n              >\\n                {headerGroup.headers.map((header) => (\\n                  <DraggableTableHeader header={header} key={header.id} />\\n                ))}\\n              </SortableContext>\\n            </TableRow>\\n          ))}\\n        </TableHeader>\\n        <TableBody>\\n          {table.getRowModel().rows?.length ? (\\n            table.getRowModel().rows.map((row) => (\\n              <TableRow\\n                data-state={row.getIsSelected() && \\\"selected\\\"}\\n                key={row.id}\\n              >\\n                {row.getVisibleCells().map((cell) => (\\n                  <SortableContext\\n                    items={columnOrder}\\n                    key={cell.id}\\n                    strategy={horizontalListSortingStrategy}\\n                  >\\n                    <DragAlongCell cell={cell} key={cell.id} />\\n                  </SortableContext>\\n                ))}\\n              </TableRow>\\n            ))\\n          ) : (\\n            <TableRow>\\n              <TableCell className=\\\"h-24 text-center\\\" colSpan={columns.length}>\\n                No results.\\n              </TableCell>\\n            </TableRow>\\n          )}\\n        </TableBody>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Draggable columns made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>{\\\" \\\"}\\n        and{\\\" \\\"}\\n        <a href=\\\"https://dndkit.com/\\\" rel=\\\"noopener noreferrer\\\" target=\\\"_blank\\\">\\n          dnd kit\\n        </a>\\n      </p>\\n    </DndContext>\\n  );\\n}\\n\\nconst DraggableTableHeader = ({\\n  header,\\n}: {\\n  header: Header<Item, unknown>;\\n}) => {\\n  const {\\n    attributes,\\n    isDragging,\\n    listeners,\\n    setNodeRef,\\n    transform,\\n    transition,\\n  } = useSortable({\\n    id: header.column.id,\\n  });\\n\\n  const style: CSSProperties = {\\n    opacity: isDragging ? 0.8 : 1,\\n    position: \\\"relative\\\",\\n    transform: CSS.Translate.toString(transform),\\n    transition,\\n    whiteSpace: \\\"nowrap\\\",\\n    width: header.column.getSize(),\\n    zIndex: isDragging ? 1 : 0,\\n  };\\n\\n  return (\\n    <TableHead\\n      aria-sort={\\n        header.column.getIsSorted() === \\\"asc\\\"\\n          ? \\\"ascending\\\"\\n          : header.column.getIsSorted() === \\\"desc\\\"\\n            ? \\\"descending\\\"\\n            : \\\"none\\\"\\n      }\\n      className=\\\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\\\"\\n      ref={setNodeRef}\\n      style={style}\\n    >\\n      <div className=\\\"flex items-center justify-start gap-0.5\\\">\\n        <Button\\n          className=\\\"-ml-2 size-7 shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n          {...attributes}\\n          {...listeners}\\n          aria-label=\\\"Drag to reorder\\\"\\n        >\\n          <GripVerticalIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"opacity-60\\\"\\n            size={16}\\n          />\\n        </Button>\\n        <span className=\\\"grow truncate\\\">\\n          {header.isPlaceholder\\n            ? null\\n            : flexRender(header.column.columnDef.header, header.getContext())}\\n        </span>\\n        <Button\\n          className=\\\"group -mr-1 size-7 shadow-none\\\"\\n          onClick={header.column.getToggleSortingHandler()}\\n          onKeyDown={(e) => {\\n            // Enhanced keyboard handling for sorting\\n            if (\\n              header.column.getCanSort() &&\\n              (e.key === \\\"Enter\\\" || e.key === \\\" \\\")\\n            ) {\\n              e.preventDefault();\\n              header.column.getToggleSortingHandler()?.(e);\\n            }\\n          }}\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          {{\\n            asc: (\\n              <ChevronUpIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 opacity-60\\\"\\n                size={16}\\n              />\\n            ),\\n            desc: (\\n              <ChevronDownIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 opacity-60\\\"\\n                size={16}\\n              />\\n            ),\\n          }[header.column.getIsSorted() as string] ?? (\\n            <ChevronUpIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"shrink-0 opacity-0 group-hover:opacity-60\\\"\\n              size={16}\\n            />\\n          )}\\n        </Button>\\n      </div>\\n    </TableHead>\\n  );\\n};\\n\\nconst DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {\\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\\n    id: cell.column.id,\\n  });\\n\\n  const style: CSSProperties = {\\n    opacity: isDragging ? 0.8 : 1,\\n    position: \\\"relative\\\",\\n    transform: CSS.Translate.toString(transform),\\n    transition,\\n    width: cell.column.getSize(),\\n    zIndex: isDragging ? 1 : 0,\\n  };\\n\\n  return (\\n    <TableCell className=\\\"truncate\\\" ref={setNodeRef} style={style}>\\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\\n    </TableCell>\\n  );\\n};\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"flag\",\n      \"sort\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-482.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-482\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-482.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  getExpandedRowModel,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \\\"lucide-react\\\";\\nimport { Fragment, useEffect, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Item = {\\n  id: string;\\n  name: string;\\n  email: string;\\n  location: string;\\n  flag: string;\\n  status: \\\"Active\\\" | \\\"Inactive\\\" | \\\"Pending\\\";\\n  balance: number;\\n  note?: string;\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    cell: ({ row }) => {\\n      return row.getCanExpand() ? (\\n        <Button\\n          {...{\\n            \\\"aria-expanded\\\": row.getIsExpanded(),\\n            \\\"aria-label\\\": row.getIsExpanded()\\n              ? `Collapse details for ${row.original.name}`\\n              : `Expand details for ${row.original.name}`,\\n            className: \\\"size-7 shadow-none text-muted-foreground\\\",\\n            onClick: row.getToggleExpandedHandler(),\\n            size: \\\"icon\\\",\\n            variant: \\\"ghost\\\",\\n          }}\\n        >\\n          {row.getIsExpanded() ? (\\n            <ChevronUpIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60\\\"\\n              size={16}\\n            />\\n          ) : (\\n            <ChevronDownIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60\\\"\\n              size={16}\\n            />\\n          )}\\n        </Button>\\n      ) : undefined;\\n    },\\n    header: () => null,\\n    id: \\\"expander\\\",\\n  },\\n  {\\n    cell: ({ row }) => (\\n      <Checkbox\\n        aria-label=\\\"Select row\\\"\\n        checked={row.getIsSelected()}\\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\\n      />\\n    ),\\n    header: ({ table }) => (\\n      <Checkbox\\n        aria-label=\\\"Select all\\\"\\n        checked={\\n          table.getIsAllPageRowsSelected() ||\\n          (table.getIsSomePageRowsSelected() && \\\"indeterminate\\\")\\n        }\\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\\n      />\\n    ),\\n    id: \\\"select\\\",\\n  },\\n  {\\n    accessorKey: \\\"name\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium\\\">{row.getValue(\\\"name\\\")}</div>\\n    ),\\n    header: \\\"Name\\\",\\n  },\\n  {\\n    accessorKey: \\\"email\\\",\\n    header: \\\"Email\\\",\\n  },\\n  {\\n    accessorKey: \\\"location\\\",\\n    cell: ({ row }) => (\\n      <div>\\n        <span className=\\\"text-lg leading-none\\\">{row.original.flag}</span>{\\\" \\\"}\\n        {row.getValue(\\\"location\\\")}\\n      </div>\\n    ),\\n    header: \\\"Location\\\",\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    cell: ({ row }) => (\\n      <Badge\\n        className={cn(\\n          row.getValue(\\\"status\\\") === \\\"Inactive\\\" &&\\n            \\\"bg-muted-foreground/60 text-primary-foreground\\\",\\n        )}\\n      >\\n        {row.getValue(\\\"status\\\")}\\n      </Badge>\\n    ),\\n    header: \\\"Status\\\",\\n  },\\n  {\\n    accessorKey: \\\"balance\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"balance\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return <div className=\\\"text-right\\\">{formatted}</div>;\\n    },\\n    header: () => <div className=\\\"text-right\\\">Balance</div>,\\n  },\\n];\\n\\nexport default function Component() {\\n  const [data, setData] = useState<Item[]>([]);\\n\\n  useEffect(() => {\\n    async function fetchPosts() {\\n      const res = await fetch(\\n        \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\\\",\\n      );\\n      const data = await res.json();\\n      setData(data.slice(0, 5)); // Limit to 5 items\\n    }\\n    fetchPosts();\\n  }, []);\\n\\n  const table = useReactTable({\\n    columns,\\n    data,\\n    getCoreRowModel: getCoreRowModel(),\\n    getExpandedRowModel: getExpandedRowModel(),\\n    getRowCanExpand: (row) => Boolean(row.original.note),\\n  });\\n\\n  return (\\n    <div>\\n      <Table>\\n        <TableHeader>\\n          {table.getHeaderGroups().map((headerGroup) => (\\n            <TableRow className=\\\"hover:bg-transparent\\\" key={headerGroup.id}>\\n              {headerGroup.headers.map((header) => {\\n                return (\\n                  <TableHead key={header.id}>\\n                    {header.isPlaceholder\\n                      ? null\\n                      : flexRender(\\n                          header.column.columnDef.header,\\n                          header.getContext(),\\n                        )}\\n                  </TableHead>\\n                );\\n              })}\\n            </TableRow>\\n          ))}\\n        </TableHeader>\\n        <TableBody>\\n          {table.getRowModel().rows?.length ? (\\n            table.getRowModel().rows.map((row) => (\\n              <Fragment key={row.id}>\\n                <TableRow\\n                  data-state={row.getIsSelected() && \\\"selected\\\"}\\n                  key={row.id}\\n                >\\n                  {row.getVisibleCells().map((cell) => (\\n                    <TableCell\\n                      className=\\\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\\\"\\n                      key={cell.id}\\n                    >\\n                      {flexRender(\\n                        cell.column.columnDef.cell,\\n                        cell.getContext(),\\n                      )}\\n                    </TableCell>\\n                  ))}\\n                </TableRow>\\n                {row.getIsExpanded() && (\\n                  <TableRow>\\n                    <TableCell colSpan={row.getVisibleCells().length}>\\n                      <div className=\\\"flex items-start py-2 text-primary/80\\\">\\n                        <span\\n                          aria-hidden=\\\"true\\\"\\n                          className=\\\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\\\"\\n                        >\\n                          <InfoIcon className=\\\"opacity-60\\\" size={16} />\\n                        </span>\\n                        <p className=\\\"text-sm\\\">{row.original.note}</p>\\n                      </div>\\n                    </TableCell>\\n                  </TableRow>\\n                )}\\n              </Fragment>\\n            ))\\n          ) : (\\n            <TableRow>\\n              <TableCell className=\\\"h-24 text-center\\\" colSpan={columns.length}>\\n                No results.\\n              </TableCell>\\n            </TableRow>\\n          )}\\n        </TableBody>\\n      </Table>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Expanding sub-row made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"checkbox\",\n      \"collapsible\",\n      \"flag\",\n      \"badge\",\n      \"chip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-483.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-483\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/pagination.json\",\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-483.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  getPaginationRowModel,\\n  getSortedRowModel,\\n  type PaginationState,\\n  type SortingState,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport {\\n  ChevronDownIcon,\\n  ChevronFirstIcon,\\n  ChevronLastIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  ChevronUpIcon,\\n} from \\\"lucide-react\\\";\\nimport { useEffect, useId, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n} from \\\"@/registry/default/ui/pagination\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Item = {\\n  id: string;\\n  name: string;\\n  email: string;\\n  location: string;\\n  flag: string;\\n  status: \\\"Active\\\" | \\\"Inactive\\\" | \\\"Pending\\\";\\n  balance: number;\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    cell: ({ row }) => (\\n      <Checkbox\\n        aria-label=\\\"Select row\\\"\\n        checked={row.getIsSelected()}\\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\\n      />\\n    ),\\n    enableSorting: false,\\n    header: ({ table }) => (\\n      <Checkbox\\n        aria-label=\\\"Select all\\\"\\n        checked={\\n          table.getIsAllPageRowsSelected() ||\\n          (table.getIsSomePageRowsSelected() && \\\"indeterminate\\\")\\n        }\\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\\n      />\\n    ),\\n    id: \\\"select\\\",\\n    size: 28,\\n  },\\n  {\\n    accessorKey: \\\"name\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium\\\">{row.getValue(\\\"name\\\")}</div>\\n    ),\\n    header: \\\"Name\\\",\\n    size: 180,\\n  },\\n  {\\n    accessorKey: \\\"email\\\",\\n    header: \\\"Email\\\",\\n    size: 200,\\n  },\\n  {\\n    accessorKey: \\\"location\\\",\\n    cell: ({ row }) => (\\n      <div>\\n        <span className=\\\"text-lg leading-none\\\">{row.original.flag}</span>{\\\" \\\"}\\n        {row.getValue(\\\"location\\\")}\\n      </div>\\n    ),\\n    header: \\\"Location\\\",\\n    size: 180,\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    cell: ({ row }) => (\\n      <Badge\\n        className={cn(\\n          row.getValue(\\\"status\\\") === \\\"Inactive\\\" &&\\n            \\\"bg-muted-foreground/60 text-primary-foreground\\\",\\n        )}\\n      >\\n        {row.getValue(\\\"status\\\")}\\n      </Badge>\\n    ),\\n    header: \\\"Status\\\",\\n    size: 120,\\n  },\\n  {\\n    accessorKey: \\\"balance\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"balance\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return formatted;\\n    },\\n    header: \\\"Balance\\\",\\n    size: 120,\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [pagination, setPagination] = useState<PaginationState>({\\n    pageIndex: 0,\\n    pageSize: 5,\\n  });\\n\\n  const [sorting, setSorting] = useState<SortingState>([\\n    {\\n      desc: false,\\n      id: \\\"name\\\",\\n    },\\n  ]);\\n\\n  const [data, setData] = useState<Item[]>([]);\\n  useEffect(() => {\\n    async function fetchPosts() {\\n      const res = await fetch(\\n        \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\\\",\\n      );\\n      const data = await res.json();\\n      setData([...data, ...data]);\\n    }\\n    fetchPosts();\\n  }, []);\\n\\n  const table = useReactTable({\\n    columns,\\n    data,\\n    enableSortingRemoval: false,\\n    getCoreRowModel: getCoreRowModel(),\\n    getPaginationRowModel: getPaginationRowModel(),\\n    getSortedRowModel: getSortedRowModel(),\\n    onPaginationChange: setPagination,\\n    onSortingChange: setSorting,\\n    state: {\\n      pagination,\\n      sorting,\\n    },\\n  });\\n\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <div className=\\\"overflow-hidden rounded-md border bg-background\\\">\\n        <Table className=\\\"table-fixed\\\">\\n          <TableHeader>\\n            {table.getHeaderGroups().map((headerGroup) => (\\n              <TableRow className=\\\"hover:bg-transparent\\\" key={headerGroup.id}>\\n                {headerGroup.headers.map((header) => {\\n                  return (\\n                    <TableHead\\n                      className=\\\"h-11\\\"\\n                      key={header.id}\\n                      style={{ width: `${header.getSize()}px` }}\\n                    >\\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\\n                        <div\\n                          className={cn(\\n                            header.column.getCanSort() &&\\n                              \\\"flex h-full cursor-pointer select-none items-center justify-between gap-2\\\",\\n                          )}\\n                          onClick={header.column.getToggleSortingHandler()}\\n                          onKeyDown={(e) => {\\n                            // Enhanced keyboard handling for sorting\\n                            if (\\n                              header.column.getCanSort() &&\\n                              (e.key === \\\"Enter\\\" || e.key === \\\" \\\")\\n                            ) {\\n                              e.preventDefault();\\n                              header.column.getToggleSortingHandler()?.(e);\\n                            }\\n                          }}\\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\\n                        >\\n                          {flexRender(\\n                            header.column.columnDef.header,\\n                            header.getContext(),\\n                          )}\\n                          {{\\n                            asc: (\\n                              <ChevronUpIcon\\n                                aria-hidden=\\\"true\\\"\\n                                className=\\\"shrink-0 opacity-60\\\"\\n                                size={16}\\n                              />\\n                            ),\\n                            desc: (\\n                              <ChevronDownIcon\\n                                aria-hidden=\\\"true\\\"\\n                                className=\\\"shrink-0 opacity-60\\\"\\n                                size={16}\\n                              />\\n                            ),\\n                          }[header.column.getIsSorted() as string] ?? null}\\n                        </div>\\n                      ) : (\\n                        flexRender(\\n                          header.column.columnDef.header,\\n                          header.getContext(),\\n                        )\\n                      )}\\n                    </TableHead>\\n                  );\\n                })}\\n              </TableRow>\\n            ))}\\n          </TableHeader>\\n          <TableBody>\\n            {table.getRowModel().rows?.length ? (\\n              table.getRowModel().rows.map((row) => (\\n                <TableRow\\n                  data-state={row.getIsSelected() && \\\"selected\\\"}\\n                  key={row.id}\\n                >\\n                  {row.getVisibleCells().map((cell) => (\\n                    <TableCell key={cell.id}>\\n                      {flexRender(\\n                        cell.column.columnDef.cell,\\n                        cell.getContext(),\\n                      )}\\n                    </TableCell>\\n                  ))}\\n                </TableRow>\\n              ))\\n            ) : (\\n              <TableRow>\\n                <TableCell\\n                  className=\\\"h-24 text-center\\\"\\n                  colSpan={columns.length}\\n                >\\n                  No results.\\n                </TableCell>\\n              </TableRow>\\n            )}\\n          </TableBody>\\n        </Table>\\n      </div>\\n\\n      {/* Pagination */}\\n      <div className=\\\"flex items-center justify-between gap-8\\\">\\n        {/* Results per page */}\\n        <div className=\\\"flex items-center gap-3\\\">\\n          <Label className=\\\"max-sm:sr-only\\\" htmlFor={id}>\\n            Rows per page\\n          </Label>\\n          <Select\\n            onValueChange={(value) => {\\n              table.setPageSize(Number(value));\\n            }}\\n            value={table.getState().pagination.pageSize.toString()}\\n          >\\n            <SelectTrigger className=\\\"w-fit whitespace-nowrap\\\" id={id}>\\n              <SelectValue placeholder=\\\"Select number of results\\\" />\\n            </SelectTrigger>\\n            <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n              {[5, 10, 25, 50].map((pageSize) => (\\n                <SelectItem key={pageSize} value={pageSize.toString()}>\\n                  {pageSize}\\n                </SelectItem>\\n              ))}\\n            </SelectContent>\\n          </Select>\\n        </div>\\n        {/* Page number information */}\\n        <div className=\\\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\\\">\\n          <p\\n            aria-live=\\\"polite\\\"\\n            className=\\\"whitespace-nowrap text-muted-foreground text-sm\\\"\\n          >\\n            <span className=\\\"text-foreground\\\">\\n              {table.getState().pagination.pageIndex *\\n                table.getState().pagination.pageSize +\\n                1}\\n              -\\n              {Math.min(\\n                Math.max(\\n                  table.getState().pagination.pageIndex *\\n                    table.getState().pagination.pageSize +\\n                    table.getState().pagination.pageSize,\\n                  0,\\n                ),\\n                table.getRowCount(),\\n              )}\\n            </span>{\\\" \\\"}\\n            of{\\\" \\\"}\\n            <span className=\\\"text-foreground\\\">\\n              {table.getRowCount().toString()}\\n            </span>\\n          </p>\\n        </div>\\n        {/* Pagination buttons */}\\n        <div>\\n          <Pagination>\\n            <PaginationContent>\\n              {/* First page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to first page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanPreviousPage()}\\n                  onClick={() => table.firstPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronFirstIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n              {/* Previous page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to previous page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanPreviousPage()}\\n                  onClick={() => table.previousPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n              {/* Next page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to next page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanNextPage()}\\n                  onClick={() => table.nextPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n              {/* Last page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to last page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanNextPage()}\\n                  onClick={() => table.lastPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronLastIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n            </PaginationContent>\\n          </Pagination>\\n        </div>\\n      </div>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Paginated table made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"checkbox\",\n      \"sort\",\n      \"flag\",\n      \"badge\",\n      \"chip\",\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-484.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-484\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/pagination.json\",\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-484.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  getPaginationRowModel,\\n  getSortedRowModel,\\n  type PaginationState,\\n  type SortingState,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport {\\n  ChevronDownIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  ChevronUpIcon,\\n} from \\\"lucide-react\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\n\\nimport { usePagination } from \\\"@/registry/default/hooks/use-pagination\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n} from \\\"@/registry/default/ui/pagination\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Item = {\\n  id: string;\\n  name: string;\\n  email: string;\\n  location: string;\\n  flag: string;\\n  status: \\\"Active\\\" | \\\"Inactive\\\" | \\\"Pending\\\";\\n  balance: number;\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    cell: ({ row }) => (\\n      <Checkbox\\n        aria-label=\\\"Select row\\\"\\n        checked={row.getIsSelected()}\\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\\n      />\\n    ),\\n    enableSorting: false,\\n    header: ({ table }) => (\\n      <Checkbox\\n        aria-label=\\\"Select all rows\\\"\\n        checked={\\n          table.getIsAllPageRowsSelected() ||\\n          (table.getIsSomePageRowsSelected() && \\\"indeterminate\\\")\\n        }\\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\\n      />\\n    ),\\n    id: \\\"select\\\",\\n    size: 28,\\n  },\\n  {\\n    accessorKey: \\\"name\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium\\\">{row.getValue(\\\"name\\\")}</div>\\n    ),\\n    header: \\\"Name\\\",\\n    size: 180,\\n  },\\n  {\\n    accessorKey: \\\"email\\\",\\n    header: \\\"Email\\\",\\n    size: 200,\\n  },\\n  {\\n    accessorKey: \\\"location\\\",\\n    cell: ({ row }) => (\\n      <div>\\n        <span className=\\\"text-lg leading-none\\\">{row.original.flag}</span>{\\\" \\\"}\\n        {row.getValue(\\\"location\\\")}\\n      </div>\\n    ),\\n    header: \\\"Location\\\",\\n    size: 180,\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    cell: ({ row }) => (\\n      <Badge\\n        className={cn(\\n          row.getValue(\\\"status\\\") === \\\"Inactive\\\" &&\\n            \\\"bg-muted-foreground/60 text-primary-foreground\\\",\\n        )}\\n      >\\n        {row.getValue(\\\"status\\\")}\\n      </Badge>\\n    ),\\n    header: \\\"Status\\\",\\n    size: 120,\\n  },\\n  {\\n    accessorKey: \\\"balance\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"balance\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return formatted;\\n    },\\n    header: \\\"Balance\\\",\\n    size: 120,\\n  },\\n];\\n\\nexport default function Component() {\\n  const pageSize = 5;\\n\\n  const [pagination, setPagination] = useState<PaginationState>({\\n    pageIndex: 0,\\n    pageSize: pageSize,\\n  });\\n\\n  const [sorting, setSorting] = useState<SortingState>([\\n    {\\n      desc: false,\\n      id: \\\"name\\\",\\n    },\\n  ]);\\n\\n  const [data, setData] = useState<Item[]>([]);\\n  useEffect(() => {\\n    async function fetchPosts() {\\n      const res = await fetch(\\n        \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\\\",\\n      );\\n      const data = await res.json();\\n      setData(data);\\n    }\\n    fetchPosts();\\n  }, []);\\n\\n  const table = useReactTable({\\n    columns,\\n    data,\\n    enableSortingRemoval: false,\\n    getCoreRowModel: getCoreRowModel(),\\n    getPaginationRowModel: getPaginationRowModel(),\\n    getSortedRowModel: getSortedRowModel(),\\n    onPaginationChange: setPagination,\\n    onSortingChange: setSorting,\\n    state: {\\n      pagination,\\n      sorting,\\n    },\\n  });\\n\\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\\n    currentPage: table.getState().pagination.pageIndex + 1,\\n    paginationItemsToDisplay: 5,\\n    totalPages: table.getPageCount(),\\n  });\\n\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      <div className=\\\"overflow-hidden rounded-md border bg-background\\\">\\n        <Table className=\\\"table-fixed\\\">\\n          <TableHeader>\\n            {table.getHeaderGroups().map((headerGroup) => (\\n              <TableRow className=\\\"hover:bg-transparent\\\" key={headerGroup.id}>\\n                {headerGroup.headers.map((header) => {\\n                  return (\\n                    <TableHead\\n                      className=\\\"h-11\\\"\\n                      key={header.id}\\n                      style={{ width: `${header.getSize()}px` }}\\n                    >\\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\\n                        <div\\n                          className={cn(\\n                            header.column.getCanSort() &&\\n                              \\\"flex h-full cursor-pointer select-none items-center justify-between gap-2\\\",\\n                          )}\\n                          onClick={header.column.getToggleSortingHandler()}\\n                          onKeyDown={(e) => {\\n                            // Enhanced keyboard handling for sorting\\n                            if (\\n                              header.column.getCanSort() &&\\n                              (e.key === \\\"Enter\\\" || e.key === \\\" \\\")\\n                            ) {\\n                              e.preventDefault();\\n                              header.column.getToggleSortingHandler()?.(e);\\n                            }\\n                          }}\\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\\n                        >\\n                          {flexRender(\\n                            header.column.columnDef.header,\\n                            header.getContext(),\\n                          )}\\n                          {{\\n                            asc: (\\n                              <ChevronUpIcon\\n                                aria-hidden=\\\"true\\\"\\n                                className=\\\"shrink-0 opacity-60\\\"\\n                                size={16}\\n                              />\\n                            ),\\n                            desc: (\\n                              <ChevronDownIcon\\n                                aria-hidden=\\\"true\\\"\\n                                className=\\\"shrink-0 opacity-60\\\"\\n                                size={16}\\n                              />\\n                            ),\\n                          }[header.column.getIsSorted() as string] ?? null}\\n                        </div>\\n                      ) : (\\n                        flexRender(\\n                          header.column.columnDef.header,\\n                          header.getContext(),\\n                        )\\n                      )}\\n                    </TableHead>\\n                  );\\n                })}\\n              </TableRow>\\n            ))}\\n          </TableHeader>\\n          <TableBody>\\n            {table.getRowModel().rows?.length ? (\\n              table.getRowModel().rows.map((row) => (\\n                <TableRow\\n                  data-state={row.getIsSelected() && \\\"selected\\\"}\\n                  key={row.id}\\n                >\\n                  {row.getVisibleCells().map((cell) => (\\n                    <TableCell key={cell.id}>\\n                      {flexRender(\\n                        cell.column.columnDef.cell,\\n                        cell.getContext(),\\n                      )}\\n                    </TableCell>\\n                  ))}\\n                </TableRow>\\n              ))\\n            ) : (\\n              <TableRow>\\n                <TableCell\\n                  className=\\\"h-24 text-center\\\"\\n                  colSpan={columns.length}\\n                >\\n                  No results.\\n                </TableCell>\\n              </TableRow>\\n            )}\\n          </TableBody>\\n        </Table>\\n      </div>\\n\\n      {/* Pagination */}\\n      <div className=\\\"flex items-center justify-between gap-3 max-sm:flex-col\\\">\\n        {/* Page number information */}\\n        <p\\n          aria-live=\\\"polite\\\"\\n          className=\\\"flex-1 whitespace-nowrap text-muted-foreground text-sm\\\"\\n        >\\n          Page{\\\" \\\"}\\n          <span className=\\\"text-foreground\\\">\\n            {table.getState().pagination.pageIndex + 1}\\n          </span>{\\\" \\\"}\\n          of <span className=\\\"text-foreground\\\">{table.getPageCount()}</span>\\n        </p>\\n\\n        {/* Pagination buttons */}\\n        <div className=\\\"grow\\\">\\n          <Pagination>\\n            <PaginationContent>\\n              {/* Previous page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to previous page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanPreviousPage()}\\n                  onClick={() => table.previousPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n\\n              {/* Left ellipsis (...) */}\\n              {showLeftEllipsis && (\\n                <PaginationItem>\\n                  <PaginationEllipsis />\\n                </PaginationItem>\\n              )}\\n\\n              {/* Page number buttons */}\\n              {pages.map((page) => {\\n                const isActive =\\n                  page === table.getState().pagination.pageIndex + 1;\\n                return (\\n                  <PaginationItem key={page}>\\n                    <Button\\n                      aria-current={isActive ? \\\"page\\\" : undefined}\\n                      onClick={() => table.setPageIndex(page - 1)}\\n                      size=\\\"icon\\\"\\n                      variant={`${isActive ? \\\"outline\\\" : \\\"ghost\\\"}`}\\n                    >\\n                      {page}\\n                    </Button>\\n                  </PaginationItem>\\n                );\\n              })}\\n\\n              {/* Right ellipsis (...) */}\\n              {showRightEllipsis && (\\n                <PaginationItem>\\n                  <PaginationEllipsis />\\n                </PaginationItem>\\n              )}\\n\\n              {/* Next page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to next page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanNextPage()}\\n                  onClick={() => table.nextPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n            </PaginationContent>\\n          </Pagination>\\n        </div>\\n\\n        {/* Results per page */}\\n        <div className=\\\"flex flex-1 justify-end\\\">\\n          <Select\\n            aria-label=\\\"Results per page\\\"\\n            onValueChange={(value) => {\\n              table.setPageSize(Number(value));\\n            }}\\n            value={table.getState().pagination.pageSize.toString()}\\n          >\\n            <SelectTrigger\\n              className=\\\"w-fit whitespace-nowrap\\\"\\n              id=\\\"results-per-page\\\"\\n            >\\n              <SelectValue placeholder=\\\"Select number of results\\\" />\\n            </SelectTrigger>\\n            <SelectContent>\\n              {[5, 10, 25, 50].map((pageSize) => (\\n                <SelectItem key={pageSize} value={pageSize.toString()}>\\n                  {pageSize} / page\\n                </SelectItem>\\n              ))}\\n            </SelectContent>\\n          </Select>\\n        </div>\\n      </div>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Numeric pagination made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"checkbox\",\n      \"sort\",\n      \"flag\",\n      \"badge\",\n      \"chip\",\n      \"pagination\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-485.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-485\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/alert-dialog.json\",\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/pagination.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-485.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ColumnDef,\\n  type ColumnFiltersState,\\n  type FilterFn,\\n  flexRender,\\n  getCoreRowModel,\\n  getFacetedUniqueValues,\\n  getFilteredRowModel,\\n  getPaginationRowModel,\\n  getSortedRowModel,\\n  type PaginationState,\\n  type Row,\\n  type SortingState,\\n  useReactTable,\\n  type VisibilityState,\\n} from \\\"@tanstack/react-table\\\";\\nimport {\\n  ChevronDownIcon,\\n  ChevronFirstIcon,\\n  ChevronLastIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  ChevronUpIcon,\\n  CircleAlertIcon,\\n  CircleXIcon,\\n  Columns3Icon,\\n  EllipsisIcon,\\n  FilterIcon,\\n  ListFilterIcon,\\n  PlusIcon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { useEffect, useId, useMemo, useRef, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport {\\n  AlertDialog,\\n  AlertDialogAction,\\n  AlertDialogCancel,\\n  AlertDialogContent,\\n  AlertDialogDescription,\\n  AlertDialogFooter,\\n  AlertDialogHeader,\\n  AlertDialogTitle,\\n  AlertDialogTrigger,\\n} from \\\"@/registry/default/ui/alert-dialog\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuCheckboxItem,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuPortal,\\n  DropdownMenuSeparator,\\n  DropdownMenuShortcut,\\n  DropdownMenuSub,\\n  DropdownMenuSubContent,\\n  DropdownMenuSubTrigger,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n} from \\\"@/registry/default/ui/pagination\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Item = {\\n  id: string;\\n  name: string;\\n  email: string;\\n  location: string;\\n  flag: string;\\n  status: \\\"Active\\\" | \\\"Inactive\\\" | \\\"Pending\\\";\\n  balance: number;\\n};\\n\\n// Custom filter function for multi-column searching\\nconst multiColumnFilterFn: FilterFn<Item> = (row, _columnId, filterValue) => {\\n  const searchableRowContent =\\n    `${row.original.name} ${row.original.email}`.toLowerCase();\\n  const searchTerm = (filterValue ?? \\\"\\\").toLowerCase();\\n  return searchableRowContent.includes(searchTerm);\\n};\\n\\nconst statusFilterFn: FilterFn<Item> = (\\n  row,\\n  columnId,\\n  filterValue: string[],\\n) => {\\n  if (!filterValue?.length) return true;\\n  const status = row.getValue(columnId) as string;\\n  return filterValue.includes(status);\\n};\\n\\nconst columns: ColumnDef<Item>[] = [\\n  {\\n    cell: ({ row }) => (\\n      <Checkbox\\n        aria-label=\\\"Select row\\\"\\n        checked={row.getIsSelected()}\\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\\n      />\\n    ),\\n    enableHiding: false,\\n    enableSorting: false,\\n    header: ({ table }) => (\\n      <Checkbox\\n        aria-label=\\\"Select all\\\"\\n        checked={\\n          table.getIsAllPageRowsSelected() ||\\n          (table.getIsSomePageRowsSelected() && \\\"indeterminate\\\")\\n        }\\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\\n      />\\n    ),\\n    id: \\\"select\\\",\\n    size: 28,\\n  },\\n  {\\n    accessorKey: \\\"name\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium\\\">{row.getValue(\\\"name\\\")}</div>\\n    ),\\n    enableHiding: false,\\n    filterFn: multiColumnFilterFn,\\n    header: \\\"Name\\\",\\n    size: 180,\\n  },\\n  {\\n    accessorKey: \\\"email\\\",\\n    header: \\\"Email\\\",\\n    size: 220,\\n  },\\n  {\\n    accessorKey: \\\"location\\\",\\n    cell: ({ row }) => (\\n      <div>\\n        <span className=\\\"text-lg leading-none\\\">{row.original.flag}</span>{\\\" \\\"}\\n        {row.getValue(\\\"location\\\")}\\n      </div>\\n    ),\\n    header: \\\"Location\\\",\\n    size: 180,\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    cell: ({ row }) => (\\n      <Badge\\n        className={cn(\\n          row.getValue(\\\"status\\\") === \\\"Inactive\\\" &&\\n            \\\"bg-muted-foreground/60 text-primary-foreground\\\",\\n        )}\\n      >\\n        {row.getValue(\\\"status\\\")}\\n      </Badge>\\n    ),\\n    filterFn: statusFilterFn,\\n    header: \\\"Status\\\",\\n    size: 100,\\n  },\\n  {\\n    accessorKey: \\\"performance\\\",\\n    header: \\\"Performance\\\",\\n  },\\n  {\\n    accessorKey: \\\"balance\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"balance\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return formatted;\\n    },\\n    header: \\\"Balance\\\",\\n    size: 120,\\n  },\\n  {\\n    cell: ({ row }) => <RowActions row={row} />,\\n    enableHiding: false,\\n    header: () => <span className=\\\"sr-only\\\">Actions</span>,\\n    id: \\\"actions\\\",\\n    size: 60,\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\\n  const [pagination, setPagination] = useState<PaginationState>({\\n    pageIndex: 0,\\n    pageSize: 10,\\n  });\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const [sorting, setSorting] = useState<SortingState>([\\n    {\\n      desc: false,\\n      id: \\\"name\\\",\\n    },\\n  ]);\\n\\n  const [data, setData] = useState<Item[]>([]);\\n  useEffect(() => {\\n    async function fetchPosts() {\\n      const res = await fetch(\\n        \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\\\",\\n      );\\n      const data = await res.json();\\n      setData(data);\\n    }\\n    fetchPosts();\\n  }, []);\\n\\n  const handleDeleteRows = () => {\\n    const selectedRows = table.getSelectedRowModel().rows;\\n    const updatedData = data.filter(\\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\\n    );\\n    setData(updatedData);\\n    table.resetRowSelection();\\n  };\\n\\n  const table = useReactTable({\\n    columns,\\n    data,\\n    enableSortingRemoval: false,\\n    getCoreRowModel: getCoreRowModel(),\\n    getFacetedUniqueValues: getFacetedUniqueValues(),\\n    getFilteredRowModel: getFilteredRowModel(),\\n    getPaginationRowModel: getPaginationRowModel(),\\n    getSortedRowModel: getSortedRowModel(),\\n    onColumnFiltersChange: setColumnFilters,\\n    onColumnVisibilityChange: setColumnVisibility,\\n    onPaginationChange: setPagination,\\n    onSortingChange: setSorting,\\n    state: {\\n      columnFilters,\\n      columnVisibility,\\n      pagination,\\n      sorting,\\n    },\\n  });\\n\\n  // Get unique status values\\n  const uniqueStatusValues = useMemo(() => {\\n    const statusColumn = table.getColumn(\\\"status\\\");\\n\\n    if (!statusColumn) return [];\\n\\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\\n\\n    return values.sort();\\n  }, [table.getColumn]);\\n\\n  // Get counts for each status\\n  const statusCounts = useMemo(() => {\\n    const statusColumn = table.getColumn(\\\"status\\\");\\n    if (!statusColumn) return new Map();\\n    return statusColumn.getFacetedUniqueValues();\\n  }, [table]);\\n\\n  const selectedStatuses = useMemo(() => {\\n    const filterValue = table.getColumn(\\\"status\\\")?.getFilterValue() as string[];\\n    return filterValue ?? [];\\n  }, [table]);\\n\\n  const handleStatusChange = (checked: boolean, value: string) => {\\n    const filterValue = table.getColumn(\\\"status\\\")?.getFilterValue() as string[];\\n    const newFilterValue = filterValue ? [...filterValue] : [];\\n\\n    if (checked) {\\n      newFilterValue.push(value);\\n    } else {\\n      const index = newFilterValue.indexOf(value);\\n      if (index > -1) {\\n        newFilterValue.splice(index, 1);\\n      }\\n    }\\n\\n    table\\n      .getColumn(\\\"status\\\")\\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\\n  };\\n\\n  return (\\n    <div className=\\\"space-y-4\\\">\\n      {/* Filters */}\\n      <div className=\\\"flex flex-wrap items-center justify-between gap-3\\\">\\n        <div className=\\\"flex items-center gap-3\\\">\\n          {/* Filter by name or email */}\\n          <div className=\\\"relative\\\">\\n            <Input\\n              aria-label=\\\"Filter by name or email\\\"\\n              className={cn(\\n                \\\"peer min-w-60 ps-9\\\",\\n                Boolean(table.getColumn(\\\"name\\\")?.getFilterValue()) && \\\"pe-9\\\",\\n              )}\\n              id={`${id}-input`}\\n              onChange={(e) =>\\n                table.getColumn(\\\"name\\\")?.setFilterValue(e.target.value)\\n              }\\n              placeholder=\\\"Filter by name or email...\\\"\\n              ref={inputRef}\\n              type=\\\"text\\\"\\n              value={\\n                (table.getColumn(\\\"name\\\")?.getFilterValue() ?? \\\"\\\") as string\\n              }\\n            />\\n            <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n              <ListFilterIcon aria-hidden=\\\"true\\\" size={16} />\\n            </div>\\n            {Boolean(table.getColumn(\\\"name\\\")?.getFilterValue()) && (\\n              <button\\n                aria-label=\\\"Clear filter\\\"\\n                className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n                onClick={() => {\\n                  table.getColumn(\\\"name\\\")?.setFilterValue(\\\"\\\");\\n                  if (inputRef.current) {\\n                    inputRef.current.focus();\\n                  }\\n                }}\\n                type=\\\"button\\\"\\n              >\\n                <CircleXIcon aria-hidden=\\\"true\\\" size={16} />\\n              </button>\\n            )}\\n          </div>\\n          {/* Filter by status */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button variant=\\\"outline\\\">\\n                <FilterIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"-ms-1 opacity-60\\\"\\n                  size={16}\\n                />\\n                Status\\n                {selectedStatuses.length > 0 && (\\n                  <span className=\\\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n                    {selectedStatuses.length}\\n                  </span>\\n                )}\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-auto min-w-36 p-3\\\">\\n              <div className=\\\"space-y-3\\\">\\n                <div className=\\\"font-medium text-muted-foreground text-xs\\\">\\n                  Filters\\n                </div>\\n                <div className=\\\"space-y-3\\\">\\n                  {uniqueStatusValues.map((value, i) => (\\n                    <div className=\\\"flex items-center gap-2\\\" key={value}>\\n                      <Checkbox\\n                        checked={selectedStatuses.includes(value)}\\n                        id={`${id}-${i}`}\\n                        onCheckedChange={(checked: boolean) =>\\n                          handleStatusChange(checked, value)\\n                        }\\n                      />\\n                      <Label\\n                        className=\\\"flex grow justify-between gap-2 font-normal\\\"\\n                        htmlFor={`${id}-${i}`}\\n                      >\\n                        {value}{\\\" \\\"}\\n                        <span className=\\\"ms-2 text-muted-foreground text-xs\\\">\\n                          {statusCounts.get(value)}\\n                        </span>\\n                      </Label>\\n                    </div>\\n                  ))}\\n                </div>\\n              </div>\\n            </PopoverContent>\\n          </Popover>\\n          {/* Toggle columns visibility */}\\n          <DropdownMenu>\\n            <DropdownMenuTrigger asChild>\\n              <Button variant=\\\"outline\\\">\\n                <Columns3Icon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"-ms-1 opacity-60\\\"\\n                  size={16}\\n                />\\n                View\\n              </Button>\\n            </DropdownMenuTrigger>\\n            <DropdownMenuContent align=\\\"end\\\">\\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\\n              {table\\n                .getAllColumns()\\n                .filter((column) => column.getCanHide())\\n                .map((column) => {\\n                  return (\\n                    <DropdownMenuCheckboxItem\\n                      checked={column.getIsVisible()}\\n                      className=\\\"capitalize\\\"\\n                      key={column.id}\\n                      onCheckedChange={(value) =>\\n                        column.toggleVisibility(!!value)\\n                      }\\n                      onSelect={(event) => event.preventDefault()}\\n                    >\\n                      {column.id}\\n                    </DropdownMenuCheckboxItem>\\n                  );\\n                })}\\n            </DropdownMenuContent>\\n          </DropdownMenu>\\n        </div>\\n        <div className=\\\"flex items-center gap-3\\\">\\n          {/* Delete button */}\\n          {table.getSelectedRowModel().rows.length > 0 && (\\n            <AlertDialog>\\n              <AlertDialogTrigger asChild>\\n                <Button className=\\\"ml-auto\\\" variant=\\\"outline\\\">\\n                  <TrashIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"-ms-1 opacity-60\\\"\\n                    size={16}\\n                  />\\n                  Delete\\n                  <span className=\\\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n                    {table.getSelectedRowModel().rows.length}\\n                  </span>\\n                </Button>\\n              </AlertDialogTrigger>\\n              <AlertDialogContent>\\n                <div className=\\\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\\\">\\n                  <div\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"flex size-9 shrink-0 items-center justify-center rounded-full border\\\"\\n                  >\\n                    <CircleAlertIcon className=\\\"opacity-80\\\" size={16} />\\n                  </div>\\n                  <AlertDialogHeader>\\n                    <AlertDialogTitle>\\n                      Are you absolutely sure?\\n                    </AlertDialogTitle>\\n                    <AlertDialogDescription>\\n                      This action cannot be undone. This will permanently delete{\\\" \\\"}\\n                      {table.getSelectedRowModel().rows.length} selected{\\\" \\\"}\\n                      {table.getSelectedRowModel().rows.length === 1\\n                        ? \\\"row\\\"\\n                        : \\\"rows\\\"}\\n                      .\\n                    </AlertDialogDescription>\\n                  </AlertDialogHeader>\\n                </div>\\n                <AlertDialogFooter>\\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\\n                  <AlertDialogAction onClick={handleDeleteRows}>\\n                    Delete\\n                  </AlertDialogAction>\\n                </AlertDialogFooter>\\n              </AlertDialogContent>\\n            </AlertDialog>\\n          )}\\n          {/* Add user button */}\\n          <Button className=\\\"ml-auto\\\" variant=\\\"outline\\\">\\n            <PlusIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-1 opacity-60\\\"\\n              size={16}\\n            />\\n            Add user\\n          </Button>\\n        </div>\\n      </div>\\n\\n      {/* Table */}\\n      <div className=\\\"overflow-hidden rounded-md border bg-background\\\">\\n        <Table className=\\\"table-fixed\\\">\\n          <TableHeader>\\n            {table.getHeaderGroups().map((headerGroup) => (\\n              <TableRow className=\\\"hover:bg-transparent\\\" key={headerGroup.id}>\\n                {headerGroup.headers.map((header) => {\\n                  return (\\n                    <TableHead\\n                      className=\\\"h-11\\\"\\n                      key={header.id}\\n                      style={{ width: `${header.getSize()}px` }}\\n                    >\\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\\n                        <div\\n                          className={cn(\\n                            header.column.getCanSort() &&\\n                              \\\"flex h-full cursor-pointer select-none items-center justify-between gap-2\\\",\\n                          )}\\n                          onClick={header.column.getToggleSortingHandler()}\\n                          onKeyDown={(e) => {\\n                            // Enhanced keyboard handling for sorting\\n                            if (\\n                              header.column.getCanSort() &&\\n                              (e.key === \\\"Enter\\\" || e.key === \\\" \\\")\\n                            ) {\\n                              e.preventDefault();\\n                              header.column.getToggleSortingHandler()?.(e);\\n                            }\\n                          }}\\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\\n                        >\\n                          {flexRender(\\n                            header.column.columnDef.header,\\n                            header.getContext(),\\n                          )}\\n                          {{\\n                            asc: (\\n                              <ChevronUpIcon\\n                                aria-hidden=\\\"true\\\"\\n                                className=\\\"shrink-0 opacity-60\\\"\\n                                size={16}\\n                              />\\n                            ),\\n                            desc: (\\n                              <ChevronDownIcon\\n                                aria-hidden=\\\"true\\\"\\n                                className=\\\"shrink-0 opacity-60\\\"\\n                                size={16}\\n                              />\\n                            ),\\n                          }[header.column.getIsSorted() as string] ?? null}\\n                        </div>\\n                      ) : (\\n                        flexRender(\\n                          header.column.columnDef.header,\\n                          header.getContext(),\\n                        )\\n                      )}\\n                    </TableHead>\\n                  );\\n                })}\\n              </TableRow>\\n            ))}\\n          </TableHeader>\\n          <TableBody>\\n            {table.getRowModel().rows?.length ? (\\n              table.getRowModel().rows.map((row) => (\\n                <TableRow\\n                  data-state={row.getIsSelected() && \\\"selected\\\"}\\n                  key={row.id}\\n                >\\n                  {row.getVisibleCells().map((cell) => (\\n                    <TableCell className=\\\"last:py-0\\\" key={cell.id}>\\n                      {flexRender(\\n                        cell.column.columnDef.cell,\\n                        cell.getContext(),\\n                      )}\\n                    </TableCell>\\n                  ))}\\n                </TableRow>\\n              ))\\n            ) : (\\n              <TableRow>\\n                <TableCell\\n                  className=\\\"h-24 text-center\\\"\\n                  colSpan={columns.length}\\n                >\\n                  No results.\\n                </TableCell>\\n              </TableRow>\\n            )}\\n          </TableBody>\\n        </Table>\\n      </div>\\n\\n      {/* Pagination */}\\n      <div className=\\\"flex items-center justify-between gap-8\\\">\\n        {/* Results per page */}\\n        <div className=\\\"flex items-center gap-3\\\">\\n          <Label className=\\\"max-sm:sr-only\\\" htmlFor={id}>\\n            Rows per page\\n          </Label>\\n          <Select\\n            onValueChange={(value) => {\\n              table.setPageSize(Number(value));\\n            }}\\n            value={table.getState().pagination.pageSize.toString()}\\n          >\\n            <SelectTrigger className=\\\"w-fit whitespace-nowrap\\\" id={id}>\\n              <SelectValue placeholder=\\\"Select number of results\\\" />\\n            </SelectTrigger>\\n            <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n              {[5, 10, 25, 50].map((pageSize) => (\\n                <SelectItem key={pageSize} value={pageSize.toString()}>\\n                  {pageSize}\\n                </SelectItem>\\n              ))}\\n            </SelectContent>\\n          </Select>\\n        </div>\\n        {/* Page number information */}\\n        <div className=\\\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\\\">\\n          <p\\n            aria-live=\\\"polite\\\"\\n            className=\\\"whitespace-nowrap text-muted-foreground text-sm\\\"\\n          >\\n            <span className=\\\"text-foreground\\\">\\n              {table.getState().pagination.pageIndex *\\n                table.getState().pagination.pageSize +\\n                1}\\n              -\\n              {Math.min(\\n                Math.max(\\n                  table.getState().pagination.pageIndex *\\n                    table.getState().pagination.pageSize +\\n                    table.getState().pagination.pageSize,\\n                  0,\\n                ),\\n                table.getRowCount(),\\n              )}\\n            </span>{\\\" \\\"}\\n            of{\\\" \\\"}\\n            <span className=\\\"text-foreground\\\">\\n              {table.getRowCount().toString()}\\n            </span>\\n          </p>\\n        </div>\\n\\n        {/* Pagination buttons */}\\n        <div>\\n          <Pagination>\\n            <PaginationContent>\\n              {/* First page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to first page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanPreviousPage()}\\n                  onClick={() => table.firstPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronFirstIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n              {/* Previous page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to previous page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanPreviousPage()}\\n                  onClick={() => table.previousPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n              {/* Next page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to next page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanNextPage()}\\n                  onClick={() => table.nextPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n              {/* Last page button */}\\n              <PaginationItem>\\n                <Button\\n                  aria-label=\\\"Go to last page\\\"\\n                  className=\\\"disabled:pointer-events-none disabled:opacity-50\\\"\\n                  disabled={!table.getCanNextPage()}\\n                  onClick={() => table.lastPage()}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <ChevronLastIcon aria-hidden=\\\"true\\\" size={16} />\\n                </Button>\\n              </PaginationItem>\\n            </PaginationContent>\\n          </Pagination>\\n        </div>\\n      </div>\\n      <p className=\\\"mt-4 text-center text-muted-foreground text-sm\\\">\\n        Example of a more complex table made with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://tanstack.com/table\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          TanStack Table\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\\nfunction RowActions({ row: _row }: { row: Row<Item> }) {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <div className=\\\"flex justify-end\\\">\\n          <Button\\n            aria-label=\\\"Edit item\\\"\\n            className=\\\"shadow-none\\\"\\n            size=\\\"icon\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <EllipsisIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n        </div>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\">\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <span>Edit</span>\\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <span>Duplicate</span>\\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <span>Archive</span>\\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\\n          </DropdownMenuItem>\\n          <DropdownMenuSub>\\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\\n            <DropdownMenuPortal>\\n              <DropdownMenuSubContent>\\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\\n                <DropdownMenuSeparator />\\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\\n              </DropdownMenuSubContent>\\n            </DropdownMenuPortal>\\n          </DropdownMenuSub>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>Share</DropdownMenuItem>\\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem className=\\\"text-destructive focus:text-destructive\\\">\\n          <span>Delete</span>\\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"table\",\n      \"tanstack\",\n      \"checkbox\",\n      \"sort\",\n      \"flag\",\n      \"badge\",\n      \"chip\",\n      \"pagination\",\n      \"filter\",\n      \"select\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-486.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-486\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-486.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label className=\\\"flex-1\\\">Range</Label>\\n      <div className=\\\"flex\\\">\\n        <Input\\n          aria-label=\\\"Min Value\\\"\\n          className=\\\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\\\"\\n          id={`${id}-1`}\\n          placeholder=\\\"From\\\"\\n          type=\\\"number\\\"\\n        />\\n        <Input\\n          aria-label=\\\"Max Value\\\"\\n          className=\\\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\\\"\\n          id={`${id}-2`}\\n          placeholder=\\\"To\\\"\\n          type=\\\"number\\\"\\n        />\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"range\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-487.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-487\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-487.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { getLocalTimeZone, today } from \\\"@internationalized/date\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateValue } from \\\"react-aria-components\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar-rac\\\";\\n\\nexport default function Component() {\\n  const [date, setDate] = useState<DateValue | null>(today(getLocalTimeZone()));\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        onChange={setDate}\\n        value={date}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Calendar -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-488.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-488\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-488.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { getLocalTimeZone, today } from \\\"@internationalized/date\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-aria-components\\\";\\n\\nimport { RangeCalendar } from \\\"@/registry/default/ui/calendar-rac\\\";\\n\\nexport default function Component() {\\n  const now = today(getLocalTimeZone());\\n  const [date, setDate] = useState<DateRange | null>({\\n    end: now.add({ days: 3 }),\\n    start: now,\\n  });\\n\\n  return (\\n    <div>\\n      <RangeCalendar\\n        className=\\\"rounded-md border p-2\\\"\\n        onChange={setDate}\\n        value={date}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Range calendar -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"range calendar\",\n      \"date\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-489.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-489\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar-rac.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-489.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { getLocalTimeZone, isWeekend, today } from \\\"@internationalized/date\\\";\\nimport { useLocale } from \\\"react-aria\\\";\\nimport type { DateValue } from \\\"react-aria-components\\\";\\n\\nimport { RangeCalendar } from \\\"@/registry/default/ui/calendar-rac\\\";\\n\\nexport default function Component() {\\n  const now = today(getLocalTimeZone());\\n  const disabledRanges = [\\n    [now, now], // Disables today\\n    [now.add({ days: 14 }), now.add({ days: 14 })], // Disables only the 14th day from now\\n    [now.add({ days: 23 }), now.add({ days: 23 })], // Disables only the 23rd day from now\\n  ];\\n\\n  const { locale } = useLocale();\\n  const isDateUnavailable = (date: DateValue) =>\\n    isWeekend(date, locale) ||\\n    disabledRanges.some(\\n      (interval) =>\\n        date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,\\n    );\\n\\n  return (\\n    <div>\\n      <RangeCalendar\\n        className=\\\"rounded-md border p-2\\\"\\n        isDateUnavailable={isDateUnavailable}\\n        minValue={today(getLocalTimeZone())}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Disabled dates -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Aria\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"range calendar\",\n      \"date\",\n      \"disabled\",\n      \"react aria\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-49.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-49\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-payment-inputs\"\n  ],\n  \"devDependencies\": [\n    \"@types/react-payment-inputs\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-49.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\nimport { usePaymentInputs } from \\\"react-payment-inputs\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const { getCVCProps } = usePaymentInputs();\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={`cvc-${id}`}>Code</Label>\\n      <Input\\n        {...getCVCProps()}\\n        className=\\\"[direction:inherit]\\\"\\n        id={`cvc-${id}`}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/medipass/react-payment-inputs\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Payment Inputs\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"checkout\",\n      \"payment\",\n      \"credit card\",\n      \"form\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-490.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-490\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-490.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        mode=\\\"single\\\"\\n        onSelect={setDate}\\n        selected={date}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Calendar -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-491.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-491\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-491.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const [date, setDate] = useState<DateRange | undefined>({\\n    from: today,\\n    to: addDays(today, 3),\\n  });\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        mode=\\\"range\\\"\\n        onSelect={setDate}\\n        selected={date}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Range calendar -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"range calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-492.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-492\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-492.tsx\",\n      \"content\": \"import { addDays } from \\\"date-fns\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        disabled={[\\n          { before: new Date() }, // Dates before today\\n          new Date(), // Today\\n          { dayOfWeek: [0, 6] }, // Weekends\\n          {\\n            from: addDays(today, 14), // 14th day from now\\n            to: addDays(today, 16), // 16th day from now\\n          },\\n          {\\n            from: addDays(today, 23), // 23th day from now\\n            to: addDays(today, 24), // 24th day from now\\n          },\\n        ]}\\n        excludeDisabled\\n        mode=\\\"range\\\"\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Disabled dates -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"range calendar\",\n      \"date\",\n      \"disabled\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-493.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-493\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-493.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays, subDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const [date, setDate] = useState<Date[] | undefined>([\\n    subDays(today, 17),\\n    addDays(today, 2),\\n    addDays(today, 6),\\n    addDays(today, 8),\\n  ]);\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        mode=\\\"multiple\\\"\\n        onSelect={setDate}\\n        selected={date}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Multiple day selection -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-494.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-494\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-494.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        classNames={{\\n          day_button: \\\"rounded-full\\\",\\n        }}\\n        mode=\\\"single\\\"\\n        onSelect={setDate}\\n        selected={date}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Custom select day style -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-495.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-495\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-495.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const [date, setDate] = useState<DateRange | undefined>({\\n    from: today,\\n    to: addDays(today, 3),\\n  });\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        classNames={{\\n          day: \\\"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-r before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-l\\\",\\n          day_button:\\n            \\\"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\\\",\\n        }}\\n        mode=\\\"range\\\"\\n        onSelect={setDate}\\n        selected={date}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Custom select range style -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"range calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-496.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-496\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-496.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        classNames={{\\n          month_caption: \\\"ms-2.5 me-20 justify-start\\\",\\n          nav: \\\"justify-end\\\",\\n        }}\\n        mode=\\\"single\\\"\\n        onSelect={setDate}\\n        selected={date}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Right navigation -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-497.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-497\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-497.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport type { DropdownNavProps, DropdownProps } from \\\"react-day-picker\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  const handleCalendarChange = (\\n    _value: string | number,\\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\\n  ) => {\\n    const _event = {\\n      target: {\\n        value: String(_value),\\n      },\\n    } as React.ChangeEvent<HTMLSelectElement>;\\n    _e(_event);\\n  };\\n\\n  return (\\n    <div>\\n      <Calendar\\n        captionLayout=\\\"dropdown\\\"\\n        className=\\\"rounded-md border p-2\\\"\\n        classNames={{\\n          month_caption: \\\"mx-0\\\",\\n        }}\\n        components={{\\n          Dropdown: (props: DropdownProps) => {\\n            return (\\n              <Select\\n                onValueChange={(value) => {\\n                  if (props.onChange) {\\n                    handleCalendarChange(value, props.onChange);\\n                  }\\n                }}\\n                value={String(props.value)}\\n              >\\n                <SelectTrigger className=\\\"h-8 w-fit font-medium first:grow\\\">\\n                  <SelectValue />\\n                </SelectTrigger>\\n                <SelectContent className=\\\"max-h-[min(26rem,var(--radix-select-content-available-height))]\\\">\\n                  {props.options?.map((option) => (\\n                    <SelectItem\\n                      disabled={option.disabled}\\n                      key={option.value}\\n                      value={String(option.value)}\\n                    >\\n                      {option.label}\\n                    </SelectItem>\\n                  ))}\\n                </SelectContent>\\n              </Select>\\n            );\\n          },\\n          DropdownNav: (props: DropdownNavProps) => {\\n            return (\\n              <div className=\\\"flex w-full items-center gap-2\\\">\\n                {props.children}\\n              </div>\\n            );\\n          },\\n        }}\\n        defaultMonth={new Date()}\\n        hideNavigation\\n        mode=\\\"single\\\"\\n        onSelect={setDate}\\n        selected={date}\\n        startMonth={new Date(1980, 6)}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Monthly / yearly selects -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-498.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-498\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-498.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport type { DropdownNavProps, DropdownProps } from \\\"react-day-picker\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  const handleCalendarChange = (\\n    _value: string | number,\\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\\n  ) => {\\n    const _event = {\\n      target: {\\n        value: String(_value),\\n      },\\n    } as React.ChangeEvent<HTMLSelectElement>;\\n    _e(_event);\\n  };\\n\\n  return (\\n    <div>\\n      <Calendar\\n        captionLayout=\\\"dropdown-years\\\"\\n        className=\\\"rounded-md border p-2\\\"\\n        components={{\\n          DropdownNav: (props: DropdownNavProps) => {\\n            return (\\n              <div className=\\\"flex w-full items-center justify-center gap-3 [&>span]:font-medium [&>span]:text-sm\\\">\\n                {props.children}\\n              </div>\\n            );\\n          },\\n          YearsDropdown: (props: DropdownProps) => {\\n            return (\\n              <Select\\n                onValueChange={(value) => {\\n                  if (props.onChange) {\\n                    handleCalendarChange(value, props.onChange);\\n                  }\\n                }}\\n                value={String(props.value)}\\n              >\\n                <SelectTrigger className=\\\"h-8 w-fit font-medium\\\">\\n                  <SelectValue />\\n                </SelectTrigger>\\n                <SelectContent className=\\\"max-h-[min(26rem,var(--radix-select-content-available-height))]\\\">\\n                  {props.options?.map((option) => (\\n                    <SelectItem\\n                      disabled={option.disabled}\\n                      key={option.value}\\n                      value={String(option.value)}\\n                    >\\n                      {option.label}\\n                    </SelectItem>\\n                  ))}\\n                </SelectContent>\\n              </Select>\\n            );\\n          },\\n        }}\\n        defaultMonth={new Date()}\\n        mode=\\\"single\\\"\\n        onSelect={setDate}\\n        selected={date}\\n        startMonth={new Date(1980, 6)}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Yearly select + nav -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-499.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-499\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-499.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport type { WeekNumberProps } from \\\"react-day-picker\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        components={{\\n          WeekNumber: ({ week, ...props }: WeekNumberProps) => {\\n            return (\\n              <th {...props}>\\n                <span className=\\\"inline-flex size-9 items-center justify-center\\\">\\n                  {week.weekNumber}\\n                </span>\\n              </th>\\n            );\\n          },\\n        }}\\n        fixedWeeks\\n        mode=\\\"single\\\"\\n        onSelect={setDate}\\n        selected={date}\\n        showWeekNumber\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Weekly numbers -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"week\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-50.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-50\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"react-payment-inputs\"\n  ],\n  \"devDependencies\": [\n    \"@types/react-payment-inputs\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-50.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CreditCardIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\nimport { usePaymentInputs } from \\\"react-payment-inputs\\\";\\nimport images, { type CardImages } from \\\"react-payment-inputs/images\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const {\\n    meta,\\n    getCardNumberProps,\\n    getExpiryDateProps,\\n    getCVCProps,\\n    getCardImageProps,\\n  } = usePaymentInputs();\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <legend className=\\\"font-medium text-foreground text-sm\\\">\\n        Card Details\\n      </legend>\\n      <div className=\\\"rounded-md shadow-xs\\\">\\n        <div className=\\\"relative focus-within:z-10\\\">\\n          <Input\\n            className=\\\"peer rounded-b-none pe-9 shadow-none [direction:inherit]\\\"\\n            {...getCardNumberProps()}\\n            id={`number-${id}`}\\n          />\\n          <div className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n            {meta.cardType ? (\\n              <svg\\n                className=\\\"overflow-hidden rounded-sm\\\"\\n                {...getCardImageProps({\\n                  images: images as unknown as CardImages,\\n                })}\\n                width={20}\\n              />\\n            ) : (\\n              <CreditCardIcon aria-hidden=\\\"true\\\" size={16} />\\n            )}\\n          </div>\\n        </div>\\n        <div className=\\\"-mt-px flex\\\">\\n          <div className=\\\"min-w-0 flex-1 focus-within:z-10\\\">\\n            <Input\\n              className=\\\"rounded-e-none rounded-t-none shadow-none [direction:inherit]\\\"\\n              {...getExpiryDateProps()}\\n              id={`expiry-${id}`}\\n            />\\n          </div>\\n          <div className=\\\"-ms-px min-w-0 flex-1 focus-within:z-10\\\">\\n            <Input\\n              className=\\\"rounded-s-none rounded-t-none shadow-none [direction:inherit]\\\"\\n              {...getCVCProps()}\\n              id={`cvc-${id}`}\\n            />\\n          </div>\\n        </div>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/medipass/react-payment-inputs\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React Payment Inputs\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"checkout\",\n      \"payment\",\n      \"credit card\",\n      \"form\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-500.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-500\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-500.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const selectedDay = addDays(today, -28);\\n  const [month, setMonth] = useState(selectedDay);\\n  const [date, setDate] = useState<Date | undefined>(selectedDay);\\n\\n  return (\\n    <div>\\n      <div className=\\\"rounded-md border p-2\\\">\\n        <Calendar\\n          mode=\\\"single\\\"\\n          month={month}\\n          onMonthChange={setMonth}\\n          onSelect={setDate}\\n          selected={date}\\n        />\\n        <Button\\n          className=\\\"mt-2 mb-1\\\"\\n          onClick={() => setMonth(today)}\\n          size=\\\"sm\\\"\\n          variant=\\\"outline\\\"\\n        >\\n          Current month\\n        </Button>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        With button -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"button\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-501.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-501\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-501.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const selectedDay = addDays(today, -28);\\n  const [month, setMonth] = useState(selectedDay);\\n  const [date, setDate] = useState<Date | undefined>(selectedDay);\\n\\n  return (\\n    <div>\\n      <div className=\\\"rounded-md border p-2\\\">\\n        <Calendar\\n          mode=\\\"single\\\"\\n          month={month}\\n          onMonthChange={setMonth}\\n          onSelect={setDate}\\n          selected={date}\\n        />\\n        <Button\\n          className=\\\"mt-2 mb-1\\\"\\n          onClick={() => {\\n            setDate(today);\\n            setMonth(today);\\n          }}\\n          size=\\\"sm\\\"\\n          variant=\\\"outline\\\"\\n        >\\n          Today\\n        </Button>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        With button -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"button\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-502.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-502\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-502.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useId, useState } from \\\"react\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const today = new Date();\\n  const [month, setMonth] = useState(today);\\n  const [date, setDate] = useState<Date | undefined>(today);\\n  const [inputValue, setInputValue] = useState(\\\"\\\");\\n\\n  const handleDayPickerSelect = (date: Date | undefined) => {\\n    if (!date) {\\n      setInputValue(\\\"\\\");\\n      setDate(undefined);\\n    } else {\\n      setDate(date);\\n      setMonth(date);\\n      setInputValue(format(date, \\\"yyyy-MM-dd\\\"));\\n    }\\n  };\\n\\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\\n    const value = e.target.value;\\n    setInputValue(value);\\n\\n    if (value) {\\n      const parsedDate = new Date(value);\\n      setDate(parsedDate);\\n      setMonth(parsedDate);\\n    } else {\\n      setDate(undefined);\\n    }\\n  };\\n\\n  useEffect(() => {\\n    setInputValue(format(today, \\\"yyyy-MM-dd\\\"));\\n  }, [today]);\\n\\n  return (\\n    <div>\\n      <div className=\\\"rounded-md border\\\">\\n        <Calendar\\n          className=\\\"p-2\\\"\\n          mode=\\\"single\\\"\\n          month={month}\\n          onMonthChange={setMonth}\\n          onSelect={handleDayPickerSelect}\\n          selected={date}\\n        />\\n        <div className=\\\"border-t p-3\\\">\\n          <div className=\\\"flex items-center gap-3\\\">\\n            <Label className=\\\"text-xs\\\" htmlFor={id}>\\n              Enter date\\n            </Label>\\n            <div className=\\\"relative grow\\\">\\n              <Input\\n                aria-label=\\\"Select date\\\"\\n                className=\\\"peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\\\"\\n                id={id}\\n                onChange={handleInputChange}\\n                type=\\\"date\\\"\\n                value={inputValue}\\n              />\\n              <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n                <CalendarIcon aria-hidden=\\\"true\\\" size={16} />\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Date input -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"input\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-503.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-503\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-503.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ClockIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  return (\\n    <div>\\n      <div className=\\\"rounded-md border\\\">\\n        <Calendar\\n          className=\\\"p-2\\\"\\n          mode=\\\"single\\\"\\n          onSelect={setDate}\\n          selected={date}\\n        />\\n        <div className=\\\"border-t p-3\\\">\\n          <div className=\\\"flex items-center gap-3\\\">\\n            <Label className=\\\"text-xs\\\" htmlFor={id}>\\n              Enter time\\n            </Label>\\n            <div className=\\\"relative grow\\\">\\n              <Input\\n                className=\\\"peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\\\"\\n                defaultValue=\\\"12:00:00\\\"\\n                id={id}\\n                step=\\\"1\\\"\\n                type=\\\"time\\\"\\n              />\\n              <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n                <ClockIcon aria-hidden=\\\"true\\\" size={16} />\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Time input -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"input\",\n      \"time\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-504.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-504\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/collapsible.json\",\n    \"https://coss.com/origin/r/scroll-area.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-504.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  eachMonthOfInterval,\\n  eachYearOfInterval,\\n  endOfYear,\\n  format,\\n  isAfter,\\n  isBefore,\\n  startOfYear,\\n} from \\\"date-fns\\\";\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useRef, useState } from \\\"react\\\";\\nimport type { CaptionLabelProps, MonthGridProps } from \\\"react-day-picker\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Collapsible,\\n  CollapsibleContent,\\n  CollapsibleTrigger,\\n} from \\\"@/registry/default/ui/collapsible\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const [month, setMonth] = useState(today);\\n  const [date, setDate] = useState<Date | undefined>(today);\\n  const [isYearView, setIsYearView] = useState(false);\\n  const startDate = new Date(1980, 6);\\n  const endDate = new Date(2030, 6);\\n\\n  const years = eachYearOfInterval({\\n    end: endOfYear(endDate),\\n    start: startOfYear(startDate),\\n  });\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"overflow-hidden rounded-md border p-2\\\"\\n        classNames={{\\n          month_caption: \\\"ms-2.5 me-20 justify-start\\\",\\n          nav: \\\"justify-end\\\",\\n        }}\\n        components={{\\n          CaptionLabel: (props: CaptionLabelProps) => (\\n            <CaptionLabel\\n              isYearView={isYearView}\\n              setIsYearView={setIsYearView}\\n              {...props}\\n            />\\n          ),\\n          MonthGrid: (props: MonthGridProps) => {\\n            return (\\n              <MonthGrid\\n                className={props.className}\\n                currentMonth={month.getMonth()}\\n                currentYear={month.getFullYear()}\\n                endDate={endDate}\\n                isYearView={isYearView}\\n                onMonthSelect={(selectedMonth: Date) => {\\n                  setMonth(selectedMonth);\\n                  setIsYearView(false);\\n                }}\\n                setIsYearView={setIsYearView}\\n                startDate={startDate}\\n                years={years}\\n              >\\n                {props.children}\\n              </MonthGrid>\\n            );\\n          },\\n        }}\\n        defaultMonth={new Date()}\\n        endMonth={endDate}\\n        mode=\\\"single\\\"\\n        month={month}\\n        onMonthChange={setMonth}\\n        onSelect={setDate}\\n        selected={date}\\n        startMonth={startDate}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Advanced selection -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\\nfunction MonthGrid({\\n  className,\\n  children,\\n  isYearView,\\n  startDate,\\n  endDate,\\n  years,\\n  currentYear,\\n  currentMonth,\\n  onMonthSelect,\\n}: {\\n  className?: string;\\n  children: React.ReactNode;\\n  isYearView: boolean;\\n  setIsYearView: React.Dispatch<React.SetStateAction<boolean>>;\\n  startDate: Date;\\n  endDate: Date;\\n  years: Date[];\\n  currentYear: number;\\n  currentMonth: number;\\n  onMonthSelect: (date: Date) => void;\\n}) {\\n  const currentYearRef = useRef<HTMLDivElement>(null);\\n  const currentMonthButtonRef = useRef<HTMLButtonElement>(null);\\n  const scrollAreaRef = useRef<HTMLDivElement>(null);\\n\\n  useEffect(() => {\\n    if (isYearView && currentYearRef.current && scrollAreaRef.current) {\\n      const viewport = scrollAreaRef.current.querySelector(\\n        \\\"[data-radix-scroll-area-viewport]\\\",\\n      ) as HTMLElement;\\n      if (viewport) {\\n        const yearTop = currentYearRef.current.offsetTop;\\n        viewport.scrollTop = yearTop;\\n      }\\n      setTimeout(() => {\\n        currentMonthButtonRef.current?.focus();\\n      }, 100);\\n    }\\n  }, [isYearView]);\\n\\n  return (\\n    <div className=\\\"relative\\\">\\n      <table className={className}>{children}</table>\\n      {isYearView && (\\n        <div className=\\\"-mx-2 -mb-2 absolute inset-0 z-20 bg-background\\\">\\n          <ScrollArea className=\\\"h-full\\\" ref={scrollAreaRef}>\\n            {years.map((year) => {\\n              const months = eachMonthOfInterval({\\n                end: endOfYear(year),\\n                start: startOfYear(year),\\n              });\\n              const isCurrentYear = year.getFullYear() === currentYear;\\n\\n              return (\\n                <div\\n                  key={year.getFullYear()}\\n                  ref={isCurrentYear ? currentYearRef : undefined}\\n                >\\n                  <CollapsibleYear\\n                    open={isCurrentYear}\\n                    title={year.getFullYear().toString()}\\n                  >\\n                    <div className=\\\"grid grid-cols-3 gap-2\\\">\\n                      {months.map((month) => {\\n                        const isDisabled =\\n                          isBefore(month, startDate) || isAfter(month, endDate);\\n                        const isCurrentMonth =\\n                          month.getMonth() === currentMonth &&\\n                          year.getFullYear() === currentYear;\\n\\n                        return (\\n                          <Button\\n                            className=\\\"h-7\\\"\\n                            disabled={isDisabled}\\n                            key={month.getTime()}\\n                            onClick={() => onMonthSelect(month)}\\n                            ref={\\n                              isCurrentMonth ? currentMonthButtonRef : undefined\\n                            }\\n                            size=\\\"sm\\\"\\n                            variant={isCurrentMonth ? \\\"default\\\" : \\\"outline\\\"}\\n                          >\\n                            {format(month, \\\"MMM\\\")}\\n                          </Button>\\n                        );\\n                      })}\\n                    </div>\\n                  </CollapsibleYear>\\n                </div>\\n              );\\n            })}\\n          </ScrollArea>\\n        </div>\\n      )}\\n    </div>\\n  );\\n}\\n\\nfunction CaptionLabel({\\n  children,\\n  isYearView,\\n  setIsYearView,\\n}: {\\n  isYearView: boolean;\\n  setIsYearView: React.Dispatch<React.SetStateAction<boolean>>;\\n} & React.HTMLAttributes<HTMLSpanElement>) {\\n  return (\\n    <Button\\n      className=\\\"-ms-2 flex items-center gap-2 font-medium text-sm hover:bg-transparent data-[state=open]:text-muted-foreground/80 [&[data-state=open]>svg]:rotate-180\\\"\\n      data-state={isYearView ? \\\"open\\\" : \\\"closed\\\"}\\n      onClick={() => setIsYearView((prev) => !prev)}\\n      size=\\\"sm\\\"\\n      variant=\\\"ghost\\\"\\n    >\\n      {children}\\n      <ChevronDownIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"shrink-0 text-muted-foreground/80 transition-transform duration-200\\\"\\n        size={16}\\n      />\\n    </Button>\\n  );\\n}\\n\\nfunction CollapsibleYear({\\n  title,\\n  children,\\n  open,\\n}: {\\n  title: string;\\n  children: React.ReactNode;\\n  open?: boolean;\\n}) {\\n  return (\\n    <Collapsible className=\\\"border-t px-2 py-1.5\\\" defaultOpen={open}>\\n      <CollapsibleTrigger asChild>\\n        <Button\\n          className=\\\"flex w-full justify-start gap-2 font-medium text-sm hover:bg-transparent [&[data-state=open]>svg]:rotate-180\\\"\\n          size=\\\"sm\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <ChevronDownIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"shrink-0 text-muted-foreground/80 transition-transform duration-200\\\"\\n            size={16}\\n          />\\n          {title}\\n        </Button>\\n      </CollapsibleTrigger>\\n      <CollapsibleContent className=\\\"overflow-hidden px-3 py-1 text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\\\">\\n        {children}\\n      </CollapsibleContent>\\n    </Collapsible>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"collapsible\",\n      \"react daypicker\",\n      \"radix\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-505.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-505\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/scroll-area.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-505.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const [date, setDate] = useState<Date>(today);\\n  const [time, setTime] = useState<string | null>(null);\\n\\n  // Mock time slots data\\n  const timeSlots = [\\n    { available: false, time: \\\"09:00\\\" },\\n    { available: false, time: \\\"09:30\\\" },\\n    { available: true, time: \\\"10:00\\\" },\\n    { available: true, time: \\\"10:30\\\" },\\n    { available: true, time: \\\"11:00\\\" },\\n    { available: true, time: \\\"11:30\\\" },\\n    { available: false, time: \\\"12:00\\\" },\\n    { available: true, time: \\\"12:30\\\" },\\n    { available: true, time: \\\"13:00\\\" },\\n    { available: true, time: \\\"13:30\\\" },\\n    { available: true, time: \\\"14:00\\\" },\\n    { available: false, time: \\\"14:30\\\" },\\n    { available: false, time: \\\"15:00\\\" },\\n    { available: true, time: \\\"15:30\\\" },\\n    { available: true, time: \\\"16:00\\\" },\\n    { available: true, time: \\\"16:30\\\" },\\n    { available: true, time: \\\"17:00\\\" },\\n    { available: true, time: \\\"17:30\\\" },\\n  ];\\n\\n  return (\\n    <div>\\n      <div className=\\\"rounded-md border\\\">\\n        <div className=\\\"flex max-sm:flex-col\\\">\\n          <Calendar\\n            className=\\\"p-2 sm:pe-5\\\"\\n            disabled={[\\n              { before: today }, // Dates before today\\n            ]}\\n            mode=\\\"single\\\"\\n            onSelect={(newDate) => {\\n              if (newDate) {\\n                setDate(newDate);\\n                setTime(null);\\n              }\\n            }}\\n            selected={date}\\n          />\\n          <div className=\\\"relative w-full max-sm:h-48 sm:w-40\\\">\\n            <div className=\\\"absolute inset-0 py-4 max-sm:border-t\\\">\\n              <ScrollArea className=\\\"h-full sm:border-s\\\">\\n                <div className=\\\"space-y-3\\\">\\n                  <div className=\\\"flex h-5 shrink-0 items-center px-5\\\">\\n                    <p className=\\\"font-medium text-sm\\\">\\n                      {format(date, \\\"EEEE, d\\\")}\\n                    </p>\\n                  </div>\\n                  <div className=\\\"grid gap-1.5 px-5 max-sm:grid-cols-2\\\">\\n                    {timeSlots.map(({ time: timeSlot, available }) => (\\n                      <Button\\n                        className=\\\"w-full\\\"\\n                        disabled={!available}\\n                        key={timeSlot}\\n                        onClick={() => setTime(timeSlot)}\\n                        size=\\\"sm\\\"\\n                        variant={time === timeSlot ? \\\"default\\\" : \\\"outline\\\"}\\n                      >\\n                        {timeSlot}\\n                      </Button>\\n                    ))}\\n                  </div>\\n                </div>\\n              </ScrollArea>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Appointment picker -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"time\",\n      \"button\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-506.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-506\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-506.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { subDays, subMonths, subYears } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const yesterday = subDays(today, 1);\\n  const lastWeek = subDays(today, 7);\\n  const lastMonth = subMonths(today, 1);\\n  const lastYear = subYears(today, 1);\\n  const [month, setMonth] = useState(today);\\n  const [date, setDate] = useState<Date>(today);\\n\\n  return (\\n    <div>\\n      <div className=\\\"rounded-md border\\\">\\n        <div className=\\\"flex max-sm:flex-col\\\">\\n          <div className=\\\"relative py-4 max-sm:order-1 max-sm:border-t sm:w-32\\\">\\n            <div className=\\\"h-full sm:border-e\\\">\\n              <div className=\\\"flex flex-col px-2\\\">\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(today);\\n                    setMonth(today);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Today\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(yesterday);\\n                    setMonth(yesterday);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Yesterday\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(lastWeek);\\n                    setMonth(lastWeek);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Last week\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(lastMonth);\\n                    setMonth(lastMonth);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Last month\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(lastYear);\\n                    setMonth(lastYear);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Last year\\n                </Button>\\n              </div>\\n            </div>\\n          </div>\\n          <Calendar\\n            className=\\\"p-2\\\"\\n            disabled={[\\n              { after: today }, // Dates before today\\n            ]}\\n            mode=\\\"single\\\"\\n            month={month}\\n            onMonthChange={setMonth}\\n            onSelect={(newDate) => {\\n              if (newDate) {\\n                setDate(newDate);\\n              }\\n            }}\\n            selected={date}\\n          />\\n        </div>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Calendar with presets -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"button\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-507.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-507\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-507.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  endOfMonth,\\n  endOfYear,\\n  startOfMonth,\\n  startOfYear,\\n  subDays,\\n  subMonths,\\n  subYears,\\n} from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const yesterday = {\\n    from: subDays(today, 1),\\n    to: subDays(today, 1),\\n  };\\n  const last7Days = {\\n    from: subDays(today, 6),\\n    to: today,\\n  };\\n  const last30Days = {\\n    from: subDays(today, 29),\\n    to: today,\\n  };\\n  const monthToDate = {\\n    from: startOfMonth(today),\\n    to: today,\\n  };\\n  const lastMonth = {\\n    from: startOfMonth(subMonths(today, 1)),\\n    to: endOfMonth(subMonths(today, 1)),\\n  };\\n  const yearToDate = {\\n    from: startOfYear(today),\\n    to: today,\\n  };\\n  const lastYear = {\\n    from: startOfYear(subYears(today, 1)),\\n    to: endOfYear(subYears(today, 1)),\\n  };\\n  const [month, setMonth] = useState(today);\\n  const [date, setDate] = useState<DateRange | undefined>(last7Days);\\n\\n  return (\\n    <div>\\n      <div className=\\\"rounded-md border\\\">\\n        <div className=\\\"flex max-sm:flex-col\\\">\\n          <div className=\\\"relative py-4 max-sm:order-1 max-sm:border-t sm:w-32\\\">\\n            <div className=\\\"h-full sm:border-e\\\">\\n              <div className=\\\"flex flex-col px-2\\\">\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate({\\n                      from: today,\\n                      to: today,\\n                    });\\n                    setMonth(today);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Today\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(yesterday);\\n                    setMonth(yesterday.to);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Yesterday\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(last7Days);\\n                    setMonth(last7Days.to);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Last 7 days\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(last30Days);\\n                    setMonth(last30Days.to);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Last 30 days\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(monthToDate);\\n                    setMonth(monthToDate.to);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Month to date\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(lastMonth);\\n                    setMonth(lastMonth.to);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Last month\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(yearToDate);\\n                    setMonth(yearToDate.to);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Year to date\\n                </Button>\\n                <Button\\n                  className=\\\"w-full justify-start\\\"\\n                  onClick={() => {\\n                    setDate(lastYear);\\n                    setMonth(lastYear.to);\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  Last year\\n                </Button>\\n              </div>\\n            </div>\\n          </div>\\n          <Calendar\\n            className=\\\"p-2\\\"\\n            disabled={[\\n              { after: today }, // Dates before today\\n            ]}\\n            mode=\\\"range\\\"\\n            month={month}\\n            onMonthChange={setMonth}\\n            onSelect={(newDate) => {\\n              if (newDate) {\\n                setDate(newDate);\\n              }\\n            }}\\n            selected={date}\\n          />\\n        </div>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Range calendar with presets -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"range calendar\",\n      \"date\",\n      \"button\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-508.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-508\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-508.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const [date, setDate] = useState<DateRange | undefined>({\\n    from: today,\\n    to: addDays(today, 25),\\n  });\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        classNames={{\\n          month:\\n            \\\"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\\\",\\n          months: \\\"gap-8\\\",\\n        }}\\n        mode=\\\"range\\\"\\n        numberOfMonths={2}\\n        onSelect={setDate}\\n        pagedNavigation\\n        selected={date}\\n        showOutsideDays={false}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Two months calendar -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"range calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-509.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-509\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-509.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\n\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const [date, setDate] = useState<DateRange | undefined>({\\n    from: today,\\n    to: addDays(today, 48),\\n  });\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        classNames={{\\n          month:\\n            \\\"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\\\",\\n          months: \\\"sm:flex-col md:flex-row gap-8\\\",\\n        }}\\n        mode=\\\"range\\\"\\n        numberOfMonths={3}\\n        onSelect={setDate}\\n        pagedNavigation\\n        selected={date}\\n        showOutsideDays={false}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Three months calendar -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"range calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-51.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-51\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-51.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from \\\"lucide-react\\\";\\nimport { useId, useMemo, useState } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [password, setPassword] = useState(\\\"\\\");\\n  const [isVisible, setIsVisible] = useState<boolean>(false);\\n\\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState);\\n\\n  const checkStrength = (pass: string) => {\\n    const requirements = [\\n      { regex: /.{8,}/, text: \\\"At least 8 characters\\\" },\\n      { regex: /[0-9]/, text: \\\"At least 1 number\\\" },\\n      { regex: /[a-z]/, text: \\\"At least 1 lowercase letter\\\" },\\n      { regex: /[A-Z]/, text: \\\"At least 1 uppercase letter\\\" },\\n    ];\\n\\n    return requirements.map((req) => ({\\n      met: req.regex.test(pass),\\n      text: req.text,\\n    }));\\n  };\\n\\n  const strength = checkStrength(password);\\n\\n  const strengthScore = useMemo(() => {\\n    return strength.filter((req) => req.met).length;\\n  }, [strength]);\\n\\n  const getStrengthColor = (score: number) => {\\n    if (score === 0) return \\\"bg-border\\\";\\n    if (score <= 1) return \\\"bg-red-500\\\";\\n    if (score <= 2) return \\\"bg-orange-500\\\";\\n    if (score === 3) return \\\"bg-amber-500\\\";\\n    return \\\"bg-emerald-500\\\";\\n  };\\n\\n  const getStrengthText = (score: number) => {\\n    if (score === 0) return \\\"Enter a password\\\";\\n    if (score <= 2) return \\\"Weak password\\\";\\n    if (score === 3) return \\\"Medium password\\\";\\n    return \\\"Strong password\\\";\\n  };\\n\\n  return (\\n    <div>\\n      {/* Password input field with toggle visibility button */}\\n      <div className=\\\"*:not-first:mt-2\\\">\\n        <Label htmlFor={id}>Input with password strength indicator</Label>\\n        <div className=\\\"relative\\\">\\n          <Input\\n            aria-describedby={`${id}-description`}\\n            className=\\\"pe-9\\\"\\n            id={id}\\n            onChange={(e) => setPassword(e.target.value)}\\n            placeholder=\\\"Password\\\"\\n            type={isVisible ? \\\"text\\\" : \\\"password\\\"}\\n            value={password}\\n          />\\n          <button\\n            aria-controls=\\\"password\\\"\\n            aria-label={isVisible ? \\\"Hide password\\\" : \\\"Show password\\\"}\\n            aria-pressed={isVisible}\\n            className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n            onClick={toggleVisibility}\\n            type=\\\"button\\\"\\n          >\\n            {isVisible ? (\\n              <EyeOffIcon aria-hidden=\\\"true\\\" size={16} />\\n            ) : (\\n              <EyeIcon aria-hidden=\\\"true\\\" size={16} />\\n            )}\\n          </button>\\n        </div>\\n      </div>\\n\\n      {/* Password strength indicator */}\\n      <div\\n        aria-label=\\\"Password strength\\\"\\n        aria-valuemax={4}\\n        aria-valuemin={0}\\n        aria-valuenow={strengthScore}\\n        className=\\\"mt-3 mb-4 h-1 w-full overflow-hidden rounded-full bg-border\\\"\\n        role=\\\"progressbar\\\"\\n        tabIndex={-1}\\n      >\\n        <div\\n          className={`h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`}\\n          style={{ width: `${(strengthScore / 4) * 100}%` }}\\n        />\\n      </div>\\n\\n      {/* Password strength description */}\\n      <p\\n        className=\\\"mb-2 font-medium text-foreground text-sm\\\"\\n        id={`${id}-description`}\\n      >\\n        {getStrengthText(strengthScore)}. Must contain:\\n      </p>\\n\\n      {/* Password requirements list */}\\n      <ul aria-label=\\\"Password requirements\\\" className=\\\"space-y-1.5\\\">\\n        {strength.map((req, _index) => (\\n          <li className=\\\"flex items-center gap-2\\\" key={req.text}>\\n            {req.met ? (\\n              <CheckIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"text-emerald-500\\\"\\n                size={16}\\n              />\\n            ) : (\\n              <XIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"text-muted-foreground/80\\\"\\n                size={16}\\n              />\\n            )}\\n            <span\\n              className={`text-xs ${req.met ? \\\"text-emerald-600\\\" : \\\"text-muted-foreground\\\"}`}\\n            >\\n              {req.text}\\n              <span className=\\\"sr-only\\\">\\n                {req.met ? \\\" - Requirement met\\\" : \\\" - Requirement not met\\\"}\\n              </span>\\n            </span>\\n          </li>\\n        ))}\\n      </ul>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"password\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-510.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-510\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/calendar.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-510.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\nimport type { DayButtonProps } from \\\"react-day-picker\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nconst GOOD_PRICE_THRESHOLD = 100;\\n\\nexport default function Component() {\\n  const today = new Date();\\n  const [date, setDate] = useState<Date | undefined>(today);\\n\\n  // Mock price data\\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\\n    {},\\n  );\\n  useEffect(() => {\\n    const generateMockPriceData = () => {\\n      const data: Record<string, number> = {};\\n      const todayDate = new Date();\\n\\n      for (let i = 0; i < 180; i++) {\\n        const date = new Date(todayDate);\\n        date.setDate(todayDate.getDate() + i);\\n        const dateKey = format(date, \\\"yyyy-MM-dd\\\");\\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\\n        data[dateKey] = randomPrice;\\n      }\\n      return data;\\n    };\\n    setMockPriceData(generateMockPriceData());\\n  }, []);\\n\\n  const isDateDisabled = (date: Date) => {\\n    return !mockPriceData[format(date, \\\"yyyy-MM-dd\\\")];\\n  };\\n\\n  return (\\n    <div>\\n      <Calendar\\n        className=\\\"rounded-md border p-2\\\"\\n        classNames={{\\n          day_button: \\\"size-12\\\",\\n          month:\\n            \\\"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\\\",\\n          months: \\\"sm:flex-col md:flex-row gap-8\\\",\\n          today: \\\"*:after:hidden\\\",\\n          weekday: \\\"w-12\\\",\\n        }}\\n        components={{\\n          DayButton: (props: DayButtonProps) => (\\n            <DayButton {...props} prices={mockPriceData} />\\n          ),\\n        }}\\n        disabled={isDateDisabled}\\n        mode=\\\"single\\\"\\n        numberOfMonths={2}\\n        onSelect={setDate}\\n        pagedNavigation\\n        selected={date}\\n        showOutsideDays={false}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-4 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Pricing calendar -{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\\n  const { day, prices, ...buttonProps } = props;\\n  const price = prices[format(day.date, \\\"yyyy-MM-dd\\\")];\\n  const isGoodPrice = price < GOOD_PRICE_THRESHOLD;\\n\\n  return (\\n    <button {...buttonProps}>\\n      <span className=\\\"flex flex-col\\\">\\n        {props.children}\\n        {price && (\\n          <span\\n            className={cn(\\n              \\\"font-medium text-[10px]\\\",\\n              isGoodPrice\\n                ? \\\"text-emerald-500\\\"\\n                : \\\"text-muted-foreground group-data-selected:text-primary-foreground/70\\\",\\n            )}\\n          >\\n            ${price}\\n          </span>\\n        )}\\n      </span>\\n    </button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"style\": 1,\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-511.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-511\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-511.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [date, setDate] = useState<Date | undefined>();\\n\\n  return (\\n    <div>\\n      <div className=\\\"*:not-first:mt-2\\\">\\n        <Label htmlFor={id}>Date picker</Label>\\n        <Popover>\\n          <PopoverTrigger asChild>\\n            <Button\\n              className=\\\"group w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\"\\n              id={id}\\n              variant={\\\"outline\\\"}\\n            >\\n              <span\\n                className={cn(\\\"truncate\\\", !date && \\\"text-muted-foreground\\\")}\\n              >\\n                {date ? format(date, \\\"PPP\\\") : \\\"Pick a date\\\"}\\n              </span>\\n              <CalendarIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 text-muted-foreground/80 transition-colors group-hover:text-foreground\\\"\\n                size={16}\\n              />\\n            </Button>\\n          </PopoverTrigger>\\n          <PopoverContent align=\\\"start\\\" className=\\\"w-auto p-2\\\">\\n            <Calendar mode=\\\"single\\\" onSelect={setDate} selected={date} />\\n          </PopoverContent>\\n        </Popover>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"button\",\n      \"picker\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-512.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-512\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-512.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [date, setDate] = useState<DateRange | undefined>();\\n\\n  return (\\n    <div>\\n      <div className=\\\"*:not-first:mt-2\\\">\\n        <Label htmlFor={id}>Date range picker</Label>\\n        <Popover>\\n          <PopoverTrigger asChild>\\n            <Button\\n              className=\\\"group w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\"\\n              id={id}\\n              variant=\\\"outline\\\"\\n            >\\n              <span\\n                className={cn(\\\"truncate\\\", !date && \\\"text-muted-foreground\\\")}\\n              >\\n                {date?.from ? (\\n                  date.to ? (\\n                    <>\\n                      {format(date.from, \\\"LLL dd, y\\\")} -{\\\" \\\"}\\n                      {format(date.to, \\\"LLL dd, y\\\")}\\n                    </>\\n                  ) : (\\n                    format(date.from, \\\"LLL dd, y\\\")\\n                  )\\n                ) : (\\n                  \\\"Pick a date range\\\"\\n                )}\\n              </span>\\n              <CalendarIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 text-muted-foreground/80 transition-colors group-hover:text-foreground\\\"\\n                size={16}\\n              />\\n            </Button>\\n          </PopoverTrigger>\\n          <PopoverContent align=\\\"start\\\" className=\\\"w-auto p-2\\\">\\n            <Calendar mode=\\\"range\\\" onSelect={setDate} selected={date} />\\n          </PopoverContent>\\n        </Popover>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://daypicker.dev/\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          React DayPicker\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"calendar\",\n      \"date\",\n      \"button\",\n      \"picker\",\n      \"react daypicker\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-513.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-513\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-513.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <Stepper defaultValue={2}>\\n        {steps.map((step) => (\\n          <StepperItem className=\\\"not-last:flex-1\\\" key={step} step={step}>\\n            <StepperTrigger>\\n              <StepperIndicator asChild>{step}</StepperIndicator>\\n            </StepperTrigger>\\n            {step < steps.length && <StepperSeparator />}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with numbers only\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-514.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-514\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-514.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <Stepper defaultValue={2}>\\n        {steps.map((step) => (\\n          <StepperItem className=\\\"not-last:flex-1\\\" key={step} step={step}>\\n            <StepperTrigger>\\n              <StepperIndicator />\\n            </StepperTrigger>\\n            {step < steps.length && <StepperSeparator />}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with numbers and checkmarks\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-515.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-515\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-515.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <Stepper defaultValue={2}>\\n        {steps.map((step) => (\\n          <StepperItem className=\\\"not-last:flex-1\\\" key={step} step={step}>\\n            <StepperTrigger>\\n              <StepperIndicator className=\\\"size-4 data-[state=active]:border-2 data-[state=active]:border-primary data-[state=active]:bg-transparent [&_span]:sr-only [&_svg]:size-3\\\" />\\n            </StepperTrigger>\\n            {step < steps.length && <StepperSeparator />}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with tiny buttons and checkmarks\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-516.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-516\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-516.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  const [currentStep, setCurrentStep] = useState(2);\\n\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <Stepper onValueChange={setCurrentStep} value={currentStep}>\\n        {steps.map((step) => (\\n          <StepperItem className=\\\"not-last:flex-1\\\" key={step} step={step}>\\n            <StepperTrigger asChild>\\n              <StepperIndicator />\\n            </StepperTrigger>\\n            {step < steps.length && <StepperSeparator />}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <div className=\\\"flex justify-center space-x-4\\\">\\n        <Button\\n          className=\\\"w-32\\\"\\n          disabled={currentStep === 1}\\n          onClick={() => setCurrentStep((prev) => prev - 1)}\\n          variant=\\\"outline\\\"\\n        >\\n          Prev step\\n        </Button>\\n        <Button\\n          className=\\\"w-32\\\"\\n          disabled={currentStep > steps.length}\\n          onClick={() => setCurrentStep((prev) => prev + 1)}\\n          variant=\\\"outline\\\"\\n        >\\n          Next step\\n        </Button>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Controlled stepper with checkmarks\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-517.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-517\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-517.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  const [currentStep, setCurrentStep] = useState(2);\\n  const [isLoading, setIsLoading] = useState(false);\\n\\n  const handleNextStep = () => {\\n    setIsLoading(true);\\n    setTimeout(() => {\\n      setCurrentStep((prev) => prev + 1);\\n      setIsLoading(false);\\n    }, 1000);\\n  };\\n\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <Stepper onValueChange={setCurrentStep} value={currentStep}>\\n        {steps.map((step) => (\\n          <StepperItem\\n            className=\\\"not-last:flex-1\\\"\\n            key={step}\\n            loading={isLoading}\\n            step={step}\\n          >\\n            <StepperTrigger asChild>\\n              <StepperIndicator />\\n            </StepperTrigger>\\n            {step < steps.length && <StepperSeparator />}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <div className=\\\"flex justify-center space-x-4\\\">\\n        <Button\\n          className=\\\"w-32\\\"\\n          disabled={currentStep === 1}\\n          onClick={() => setCurrentStep((prev) => prev - 1)}\\n          variant=\\\"outline\\\"\\n        >\\n          Prev step\\n        </Button>\\n        <Button\\n          className=\\\"w-32\\\"\\n          disabled={currentStep > steps.length}\\n          onClick={handleNextStep}\\n          variant=\\\"outline\\\"\\n        >\\n          Next step\\n        </Button>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Controlled stepper with checkmarks and loading state\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-518.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-518\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-518.tsx\",\n      \"content\": \"import { Shuffle } from \\\"lucide-react\\\";\\n\\nimport {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <Stepper defaultValue={2}>\\n        <StepperItem className=\\\"not-last:flex-1\\\" step={1}>\\n          <StepperTrigger>\\n            <StepperIndicator asChild>\\n              <img\\n                alt=\\\"Mike Palmer\\\"\\n                className=\\\"rounded-full\\\"\\n                height={32}\\n                src=\\\"/origin/avatar-40-05.jpg\\\"\\n                width={32}\\n              />\\n            </StepperIndicator>\\n          </StepperTrigger>\\n          <StepperSeparator />\\n        </StepperItem>\\n        <StepperItem className=\\\"not-last:flex-1\\\" loading step={2}>\\n          <StepperTrigger>\\n            <StepperIndicator />\\n          </StepperTrigger>\\n          <StepperSeparator />\\n        </StepperItem>\\n        <StepperItem className=\\\"not-last:flex-1\\\" step={3}>\\n          <StepperTrigger>\\n            <StepperIndicator asChild>\\n              <Shuffle aria-hidden=\\\"true\\\" size={14} />\\n              <span className=\\\"sr-only\\\">Shuffle</span>\\n            </StepperIndicator>\\n          </StepperTrigger>\\n        </StepperItem>\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with mixed elements\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-519.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-519\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-519.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperTitle,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [\\n  {\\n    step: 1,\\n    title: \\\"Step One\\\",\\n  },\\n  {\\n    step: 2,\\n    title: \\\"Step Two\\\",\\n  },\\n  {\\n    step: 3,\\n    title: \\\"Step Three\\\",\\n  },\\n  {\\n    step: 4,\\n    title: \\\"Step Four\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <Stepper className=\\\"items-start gap-4\\\" defaultValue={2}>\\n        {steps.map(({ step, title }) => (\\n          <StepperItem className=\\\"flex-1\\\" key={step} step={step}>\\n            <StepperTrigger className=\\\"w-full flex-col items-start gap-2 rounded\\\">\\n              <StepperIndicator asChild className=\\\"h-1 w-full bg-border\\\">\\n                <span className=\\\"sr-only\\\">{step}</span>\\n              </StepperIndicator>\\n              <div className=\\\"space-y-0.5\\\">\\n                <StepperTitle>{title}</StepperTitle>\\n              </div>\\n            </StepperTrigger>\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with labels\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-52.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-52\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-52.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Read-only input</Label>\\n      <Input\\n        className=\\\"read-only:bg-muted\\\"\\n        defaultValue=\\\"This is a read-only input\\\"\\n        id={id}\\n        placeholder=\\\"Email\\\"\\n        readOnly\\n        type=\\\"email\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"read-only\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-520.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-520\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-520.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronLeftIcon, ChevronRightIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  const [currentStep, setCurrentStep] = useState(2);\\n\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Button\\n          aria-label=\\\"Prev step\\\"\\n          className=\\\"shrink-0\\\"\\n          disabled={currentStep === 1}\\n          onClick={() => setCurrentStep((prev) => prev - 1)}\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n        </Button>\\n        <Stepper\\n          className=\\\"gap-1\\\"\\n          onValueChange={setCurrentStep}\\n          value={currentStep}\\n        >\\n          {steps.map((step) => (\\n            <StepperItem className=\\\"flex-1\\\" key={step} step={step}>\\n              <StepperTrigger\\n                asChild\\n                className=\\\"w-full flex-col items-start gap-2\\\"\\n              >\\n                <StepperIndicator asChild className=\\\"h-1 w-full bg-border\\\">\\n                  <span className=\\\"sr-only\\\">{step}</span>\\n                </StepperIndicator>\\n              </StepperTrigger>\\n            </StepperItem>\\n          ))}\\n        </Stepper>\\n        <Button\\n          aria-label=\\\"Next step\\\"\\n          className=\\\"shrink-0\\\"\\n          disabled={currentStep === steps.length}\\n          onClick={() => setCurrentStep((prev) => prev + 1)}\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n        </Button>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Paginated stepper\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-521.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-521\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-521.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  const [currentStep, setCurrentStep] = useState(1);\\n\\n  return (\\n    <div className=\\\"mx-auto max-w-xl space-y-8 text-center\\\">\\n      <div className=\\\"space-y-3\\\">\\n        <Stepper onValueChange={setCurrentStep} value={currentStep}>\\n          {steps.map((step) => (\\n            <StepperItem className=\\\"flex-1\\\" key={step} step={step}>\\n              <StepperTrigger\\n                asChild\\n                className=\\\"w-full flex-col items-start gap-2\\\"\\n              >\\n                <StepperIndicator\\n                  asChild\\n                  className=\\\"h-2 w-full rounded-none bg-border\\\"\\n                >\\n                  <span className=\\\"sr-only\\\">{step}</span>\\n                </StepperIndicator>\\n              </StepperTrigger>\\n            </StepperItem>\\n          ))}\\n        </Stepper>\\n        <div className=\\\"font-medium text-muted-foreground text-sm tabular-nums\\\">\\n          Step {currentStep} of {steps.length}\\n        </div>\\n      </div>\\n      <div className=\\\"flex justify-center space-x-4\\\">\\n        <Button\\n          className=\\\"w-32\\\"\\n          disabled={currentStep === 1}\\n          onClick={() => setCurrentStep((prev) => prev - 1)}\\n          variant=\\\"outline\\\"\\n        >\\n          Prev step\\n        </Button>\\n        <Button\\n          className=\\\"w-32\\\"\\n          disabled={currentStep >= steps.length}\\n          onClick={() => setCurrentStep((prev) => prev + 1)}\\n          variant=\\\"outline\\\"\\n        >\\n          Next step\\n        </Button>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Progress stepper\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-522.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-522\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-522.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperDescription,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTitle,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [\\n  {\\n    description: \\\"Desc for step one\\\",\\n    step: 1,\\n    title: \\\"Step One\\\",\\n  },\\n  {\\n    description: \\\"Desc for step two\\\",\\n    step: 2,\\n    title: \\\"Step Two\\\",\\n  },\\n  {\\n    description: \\\"Desc for step three\\\",\\n    step: 3,\\n    title: \\\"Step Three\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-8 text-center\\\">\\n      <Stepper defaultValue={2}>\\n        {steps.map(({ step, title, description }) => (\\n          <StepperItem\\n            className=\\\"relative flex-1 flex-col!\\\"\\n            key={step}\\n            step={step}\\n          >\\n            <StepperTrigger className=\\\"flex-col gap-3 rounded\\\">\\n              <StepperIndicator />\\n              <div className=\\\"space-y-0.5 px-2\\\">\\n                <StepperTitle>{title}</StepperTitle>\\n                <StepperDescription className=\\\"max-sm:hidden\\\">\\n                  {description}\\n                </StepperDescription>\\n              </div>\\n            </StepperTrigger>\\n            {step < steps.length && (\\n              <StepperSeparator className=\\\"-order-1 -translate-y-1/2 absolute inset-x-0 top-3 left-[calc(50%+0.75rem+0.125rem)] m-0 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none\\\" />\\n            )}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with titles and descriptions\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-523.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-523\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-523.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTitle,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [\\n  {\\n    step: 1,\\n    title: \\\"Step One\\\",\\n  },\\n  {\\n    step: 2,\\n    title: \\\"Step Two\\\",\\n  },\\n  {\\n    step: 3,\\n    title: \\\"Step Three\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-8 text-center\\\">\\n      <Stepper defaultValue={2}>\\n        {steps.map(({ step, title }) => (\\n          <StepperItem\\n            className=\\\"not-last:flex-1 max-md:items-start\\\"\\n            key={step}\\n            step={step}\\n          >\\n            <StepperTrigger className=\\\"rounded max-md:flex-col\\\">\\n              <StepperIndicator />\\n              <div className=\\\"text-center md:text-left\\\">\\n                <StepperTitle>{title}</StepperTitle>\\n              </div>\\n            </StepperTrigger>\\n            {step < steps.length && (\\n              <StepperSeparator className=\\\"max-md:mt-3.5 md:mx-4\\\" />\\n            )}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with inline titles\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-524.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-524\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-524.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperDescription,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTitle,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [\\n  {\\n    description: \\\"Desc for step one\\\",\\n    step: 1,\\n    title: \\\"Step One\\\",\\n  },\\n  {\\n    description: \\\"Desc for step two\\\",\\n    step: 2,\\n    title: \\\"Step Two\\\",\\n  },\\n  {\\n    description: \\\"Desc for step three\\\",\\n    step: 3,\\n    title: \\\"Step Three\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-8 text-center\\\">\\n      <Stepper defaultValue={2}>\\n        {steps.map(({ step, title, description }) => (\\n          <StepperItem\\n            className=\\\"not-last:flex-1 max-md:items-start\\\"\\n            key={step}\\n            step={step}\\n          >\\n            <StepperTrigger className=\\\"rounded max-md:flex-col\\\">\\n              <StepperIndicator />\\n              <div className=\\\"text-center md:text-left\\\">\\n                <StepperTitle>{title}</StepperTitle>\\n                <StepperDescription className=\\\"max-sm:hidden\\\">\\n                  {description}\\n                </StepperDescription>\\n              </div>\\n            </StepperTrigger>\\n            {step < steps.length && (\\n              <StepperSeparator className=\\\"max-md:mt-3.5 md:mx-4\\\" />\\n            )}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with inline titles and descriptions\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-525.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-525\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-525.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperDescription,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTitle,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [\\n  {\\n    description: \\\"Desc for step one\\\",\\n    step: 1,\\n    title: \\\"Step One\\\",\\n  },\\n  {\\n    description: \\\"Desc for step two\\\",\\n    step: 2,\\n    title: \\\"Step Two\\\",\\n  },\\n  {\\n    description: \\\"Desc for step three\\\",\\n    step: 3,\\n    title: \\\"Step Three\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-8 text-center\\\">\\n      <Stepper defaultValue={2}>\\n        {steps.map(({ step, title, description }) => (\\n          <StepperItem\\n            className=\\\"not-last:flex-1 max-md:items-start\\\"\\n            key={step}\\n            step={step}\\n          >\\n            <StepperTrigger className=\\\"gap-4 rounded max-md:flex-col\\\">\\n              <StepperIndicator />\\n              <div className=\\\"md:-order-1 text-center md:text-left\\\">\\n                <StepperTitle>{title}</StepperTitle>\\n                <StepperDescription className=\\\"max-sm:hidden\\\">\\n                  {description}\\n                </StepperDescription>\\n              </div>\\n            </StepperTrigger>\\n            {step < steps.length && (\\n              <StepperSeparator className=\\\"max-md:mt-3.5 md:mx-4\\\" />\\n            )}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Stepper with inline titles and descriptions\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-526.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-526\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-526.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-8 text-center\\\">\\n      <Stepper defaultValue={2} orientation=\\\"vertical\\\">\\n        {steps.map((step) => (\\n          <StepperItem className=\\\"not-last:flex-1\\\" key={step} step={step}>\\n            <StepperTrigger>\\n              <StepperIndicator />\\n            </StepperTrigger>\\n            {step < steps.length && <StepperSeparator />}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Vertical stepper with numbers and checkmarks\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"stepper\",\n      \"vertical stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-527.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-527\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-527.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [1, 2, 3, 4];\\n\\nexport default function Component() {\\n  const [currentStep, setCurrentStep] = useState(1);\\n  return (\\n    <div className=\\\"space-y-8 text-center\\\">\\n      <Stepper\\n        onValueChange={setCurrentStep}\\n        orientation=\\\"vertical\\\"\\n        value={currentStep}\\n      >\\n        {steps.map((step) => (\\n          <StepperItem className=\\\"not-last:flex-1\\\" key={step} step={step}>\\n            <StepperTrigger asChild>\\n              <StepperIndicator />\\n            </StepperTrigger>\\n            {step < steps.length && <StepperSeparator />}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <div className=\\\"flex justify-center space-x-4\\\">\\n        <Button\\n          className=\\\"w-32\\\"\\n          disabled={currentStep === 1}\\n          onClick={() => setCurrentStep((prev) => prev - 1)}\\n          variant=\\\"outline\\\"\\n        >\\n          Prev step\\n        </Button>\\n        <Button\\n          className=\\\"w-32\\\"\\n          disabled={currentStep > steps.length}\\n          onClick={() => setCurrentStep((prev) => prev + 1)}\\n          variant=\\\"outline\\\"\\n        >\\n          Next step\\n        </Button>\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Controlled vertical stepper with checkmarks\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"stepper\",\n      \"vertical stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-528.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-528\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-528.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTitle,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [\\n  {\\n    step: 1,\\n    title: \\\"Step One\\\",\\n  },\\n  {\\n    step: 2,\\n    title: \\\"Step Two\\\",\\n  },\\n  {\\n    step: 3,\\n    title: \\\"Step Three\\\",\\n  },\\n  {\\n    step: 4,\\n    title: \\\"Step Four\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-8 text-center\\\">\\n      <Stepper defaultValue={2} orientation=\\\"vertical\\\">\\n        {steps.map(({ step, title }) => (\\n          <StepperItem\\n            className=\\\"relative not-last:flex-1 items-start\\\"\\n            key={step}\\n            step={step}\\n          >\\n            <StepperTrigger className=\\\"items-start rounded pb-12 last:pb-0\\\">\\n              <StepperIndicator />\\n              <div className=\\\"mt-0.5 px-2 text-left\\\">\\n                <StepperTitle>{title}</StepperTitle>\\n              </div>\\n            </StepperTrigger>\\n            {step < steps.length && (\\n              <StepperSeparator className=\\\"-order-1 -translate-x-1/2 absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 m-0 group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none\\\" />\\n            )}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Vertical stepper with inline titles\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"stepper\",\n      \"vertical stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-529.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-529\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/stepper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-529.tsx\",\n      \"content\": \"import {\\n  Stepper,\\n  StepperDescription,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTitle,\\n  StepperTrigger,\\n} from \\\"@/registry/default/ui/stepper\\\";\\n\\nconst steps = [\\n  {\\n    description: \\\"Desc for step one\\\",\\n    step: 1,\\n    title: \\\"Step One\\\",\\n  },\\n  {\\n    description: \\\"Desc for step two\\\",\\n    step: 2,\\n    title: \\\"Step Two\\\",\\n  },\\n  {\\n    description: \\\"Desc for step three\\\",\\n    step: 3,\\n    title: \\\"Step Three\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-8 text-center\\\">\\n      <Stepper defaultValue={2} orientation=\\\"vertical\\\">\\n        {steps.map(({ step, title, description }) => (\\n          <StepperItem\\n            className=\\\"relative not-last:flex-1 items-start\\\"\\n            key={step}\\n            step={step}\\n          >\\n            <StepperTrigger className=\\\"items-start rounded pb-12 last:pb-0\\\">\\n              <StepperIndicator />\\n              <div className=\\\"mt-0.5 space-y-0.5 px-2 text-left\\\">\\n                <StepperTitle>{title}</StepperTitle>\\n                <StepperDescription>{description}</StepperDescription>\\n              </div>\\n            </StepperTrigger>\\n            {step < steps.length && (\\n              <StepperSeparator className=\\\"-order-1 -translate-x-1/2 absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 m-0 group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none\\\" />\\n            )}\\n          </StepperItem>\\n        ))}\\n      </Stepper>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Vertical stepper with inline titles and descriptions\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"stepper\",\n      \"vertical stepper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-53.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-53\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-53.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useId, useRef, useState } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [copied, setCopied] = useState<boolean>(false);\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const handleCopy = () => {\\n    if (inputRef.current) {\\n      navigator.clipboard.writeText(inputRef.current.value);\\n      setCopied(true);\\n      setTimeout(() => setCopied(false), 1500);\\n    }\\n  };\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Copy to clipboard</Label>\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"pe-9\\\"\\n          defaultValue=\\\"pnpm install origin-ui\\\"\\n          id={id}\\n          readOnly\\n          ref={inputRef}\\n          type=\\\"text\\\"\\n        />\\n        <TooltipProvider delayDuration={0}>\\n          <Tooltip>\\n            <TooltipTrigger asChild>\\n              <button\\n                aria-label={copied ? \\\"Copied\\\" : \\\"Copy to clipboard\\\"}\\n                className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\\\"\\n                disabled={copied}\\n                onClick={handleCopy}\\n                type=\\\"button\\\"\\n              >\\n                <div\\n                  className={cn(\\n                    \\\"transition-all\\\",\\n                    copied ? \\\"scale-100 opacity-100\\\" : \\\"scale-0 opacity-0\\\",\\n                  )}\\n                >\\n                  <CheckIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"stroke-emerald-500\\\"\\n                    size={16}\\n                  />\\n                </div>\\n                <div\\n                  className={cn(\\n                    \\\"absolute transition-all\\\",\\n                    copied ? \\\"scale-0 opacity-0\\\" : \\\"scale-100 opacity-100\\\",\\n                  )}\\n                >\\n                  <CopyIcon aria-hidden=\\\"true\\\" size={16} />\\n                </div>\\n              </button>\\n            </TooltipTrigger>\\n            <TooltipContent className=\\\"px-2 py-1 text-xs\\\">\\n              Copy to clipboard\\n            </TooltipContent>\\n          </Tooltip>\\n        </TooltipProvider>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"copy\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-530.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-530\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-530.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"Mar 15, 2024\\\",\\n    description:\\n      \\\"Initial team meeting and project scope definition. Established key milestones and resource allocation.\\\",\\n    id: 1,\\n    title: \\\"Project Kickoff\\\",\\n  },\\n  {\\n    date: \\\"Mar 22, 2024\\\",\\n    description:\\n      \\\"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\\\",\\n    id: 2,\\n    title: \\\"Design Phase\\\",\\n  },\\n  {\\n    date: \\\"Apr 5, 2024\\\",\\n    description:\\n      \\\"Backend API implementation and frontend component development in progress.\\\",\\n    id: 3,\\n    title: \\\"Development Sprint\\\",\\n  },\\n  {\\n    date: \\\"Apr 19, 2024\\\",\\n    description:\\n      \\\"Quality assurance testing, performance optimization, and production deployment preparation.\\\",\\n    id: 4,\\n    title: \\\"Testing & Deployment\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3}>\\n      {items.map((item) => (\\n        <TimelineItem key={item.id} step={item.id}>\\n          <TimelineHeader>\\n            <TimelineSeparator />\\n            <TimelineTitle className=\\\"-mt-0.5\\\">{item.title}</TimelineTitle>\\n            <TimelineIndicator />\\n          </TimelineHeader>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-531.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-531\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-531.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"Mar 15, 2024\\\",\\n    description:\\n      \\\"Initial team meeting and project scope definition. Established key milestones and resource allocation.\\\",\\n    id: 1,\\n    title: \\\"Project Kickoff\\\",\\n  },\\n  {\\n    date: \\\"Mar 22, 2024\\\",\\n    description:\\n      \\\"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\\\",\\n    id: 2,\\n    title: \\\"Design Phase\\\",\\n  },\\n  {\\n    date: \\\"Apr 5, 2024\\\",\\n    description:\\n      \\\"Backend API implementation and frontend component development in progress.\\\",\\n    id: 3,\\n    title: \\\"Development Sprint\\\",\\n  },\\n  {\\n    date: \\\"Apr 19, 2024\\\",\\n    description:\\n      \\\"Quality assurance testing, performance optimization, and production deployment preparation.\\\",\\n    id: 4,\\n    title: \\\"Testing & Deployment\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3}>\\n      {items.map((item) => (\\n        <TimelineItem\\n          className=\\\"sm:group-data-[orientation=vertical]/timeline:ms-32\\\"\\n          key={item.id}\\n          step={item.id}\\n        >\\n          <TimelineHeader>\\n            <TimelineSeparator />\\n            <TimelineDate className=\\\"sm:group-data-[orientation=vertical]/timeline:-left-32 sm:group-data-[orientation=vertical]/timeline:absolute sm:group-data-[orientation=vertical]/timeline:w-20 sm:group-data-[orientation=vertical]/timeline:text-right\\\">\\n              {item.date}\\n            </TimelineDate>\\n            <TimelineTitle className=\\\"sm:-mt-0.5\\\">{item.title}</TimelineTitle>\\n            <TimelineIndicator />\\n          </TimelineHeader>\\n          <TimelineContent>{item.description}</TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-532.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-532\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-532.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"Mar 15, 2024\\\",\\n    description:\\n      \\\"Initial team meeting and project scope definition. Established key milestones and resource allocation.\\\",\\n    id: 1,\\n    title: \\\"Project Kickoff\\\",\\n  },\\n  {\\n    date: \\\"Mar 22, 2024\\\",\\n    description:\\n      \\\"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\\\",\\n    id: 2,\\n    title: \\\"Design Phase\\\",\\n  },\\n  {\\n    date: \\\"Apr 5, 2024\\\",\\n    description:\\n      \\\"Backend API implementation and frontend component development in progress.\\\",\\n    id: 3,\\n    title: \\\"Development Sprint\\\",\\n  },\\n  {\\n    date: \\\"Apr 19, 2024\\\",\\n    description:\\n      \\\"Quality assurance testing, performance optimization, and production deployment preparation.\\\",\\n    id: 4,\\n    title: \\\"Testing & Deployment\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3}>\\n      {items.map((item) => (\\n        <TimelineItem key={item.id} step={item.id}>\\n          <TimelineHeader>\\n            <TimelineSeparator />\\n            <TimelineDate>{item.date}</TimelineDate>\\n            <TimelineTitle>{item.title}</TimelineTitle>\\n            <TimelineIndicator />\\n          </TimelineHeader>\\n          <TimelineContent>{item.description}</TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-533.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-533\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-533.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"15 minutes ago\\\",\\n    description:\\n      \\\"Submitted PR #342 with new feature implementation. Waiting for code review from team leads.\\\",\\n    id: 1,\\n    title: \\\"Pull Request Submitted\\\",\\n  },\\n  {\\n    date: \\\"10 minutes ago\\\",\\n    description:\\n      \\\"Automated tests and build process initiated. Running unit tests and code quality checks.\\\",\\n    id: 2,\\n    title: \\\"CI Pipeline Started\\\",\\n  },\\n  {\\n    date: \\\"5 minutes ago\\\",\\n    description:\\n      \\\"Received comments on PR. Minor adjustments needed in error handling and documentation.\\\",\\n    id: 3,\\n    title: \\\"Code Review Feedback\\\",\\n  },\\n  {\\n    description:\\n      \\\"Implemented requested changes and pushed updates to feature branch. Awaiting final approval.\\\",\\n    id: 4,\\n    title: \\\"Changes Pushed\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3}>\\n      {items.map((item) => (\\n        <TimelineItem key={item.id} step={item.id}>\\n          <TimelineHeader>\\n            <TimelineSeparator />\\n            <TimelineTitle className=\\\"-mt-0.5\\\">{item.title}</TimelineTitle>\\n            <TimelineIndicator />\\n          </TimelineHeader>\\n          <TimelineContent>\\n            {item.description}\\n            <TimelineDate className=\\\"mt-2 mb-0\\\">{item.date}</TimelineDate>\\n          </TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-534.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-534\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-534.tsx\",\n      \"content\": \"import { CheckIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"Mar 15, 2024\\\",\\n    description:\\n      \\\"Initial team meeting and project scope definition. Established key milestones and resource allocation.\\\",\\n    id: 1,\\n    title: \\\"Project Kickoff\\\",\\n  },\\n  {\\n    date: \\\"Mar 22, 2024\\\",\\n    description:\\n      \\\"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\\\",\\n    id: 2,\\n    title: \\\"Design Phase\\\",\\n  },\\n  {\\n    date: \\\"Apr 5, 2024\\\",\\n    description:\\n      \\\"Backend API implementation and frontend component development in progress.\\\",\\n    id: 3,\\n    title: \\\"Development Sprint\\\",\\n  },\\n  {\\n    date: \\\"Apr 19, 2024\\\",\\n    description:\\n      \\\"Quality assurance testing, performance optimization, and production deployment preparation.\\\",\\n    id: 4,\\n    title: \\\"Testing & Deployment\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3}>\\n      {items.map((item) => (\\n        <TimelineItem\\n          className=\\\"group-data-[orientation=vertical]/timeline:ms-10\\\"\\n          key={item.id}\\n          step={item.id}\\n        >\\n          <TimelineHeader>\\n            <TimelineSeparator className=\\\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\\\" />\\n            <TimelineDate>{item.date}</TimelineDate>\\n            <TimelineTitle>{item.title}</TimelineTitle>\\n            <TimelineIndicator className=\\\"group-data-[orientation=vertical]/timeline:-left-7 flex size-6 items-center justify-center group-data-completed/timeline-item:border-none group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground\\\">\\n              <CheckIcon\\n                className=\\\"group-not-data-completed/timeline-item:hidden\\\"\\n                size={16}\\n              />\\n            </TimelineIndicator>\\n          </TimelineHeader>\\n          <TimelineContent>{item.description}</TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-535.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-535\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-535.tsx\",\n      \"content\": \"import { GitCompare, GitFork, GitMerge, GitPullRequest } from \\\"lucide-react\\\";\\n\\nimport {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"15 minutes ago\\\",\\n    description:\\n      \\\"Forked the repository to create a new branch for development.\\\",\\n    icon: GitFork,\\n    id: 1,\\n    title: \\\"Forked Repository\\\",\\n  },\\n  {\\n    date: \\\"10 minutes ago\\\",\\n    description:\\n      \\\"Submitted PR #342 with new feature implementation. Waiting for code review from team leads.\\\",\\n    icon: GitPullRequest,\\n    id: 2,\\n    title: \\\"Pull Request Submitted\\\",\\n  },\\n  {\\n    date: \\\"5 minutes ago\\\",\\n    description:\\n      \\\"Received comments on PR. Minor adjustments needed in error handling and documentation.\\\",\\n    icon: GitCompare,\\n    id: 3,\\n    title: \\\"Comparing Branches\\\",\\n  },\\n  {\\n    description:\\n      \\\"Merged the feature branch into the main branch. Ready for deployment.\\\",\\n    icon: GitMerge,\\n    id: 4,\\n    title: \\\"Merged Branch\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3}>\\n      {items.map((item) => (\\n        <TimelineItem\\n          className=\\\"group-data-[orientation=vertical]/timeline:ms-10\\\"\\n          key={item.id}\\n          step={item.id}\\n        >\\n          <TimelineHeader>\\n            <TimelineSeparator className=\\\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\\\" />\\n            <TimelineTitle className=\\\"mt-0.5\\\">{item.title}</TimelineTitle>\\n            <TimelineIndicator className=\\\"group-data-[orientation=vertical]/timeline:-left-7 flex size-6 items-center justify-center border-none bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground\\\">\\n              <item.icon size={14} />\\n            </TimelineIndicator>\\n          </TimelineHeader>\\n          <TimelineContent>\\n            {item.description}\\n            <TimelineDate className=\\\"mt-2 mb-0\\\">{item.date}</TimelineDate>\\n          </TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-536.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-536\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-536.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    action: \\\"opened a new issue\\\",\\n    date: \\\"15 minutes ago\\\",\\n    description:\\n      \\\"I'm having trouble with the new component library. It's not rendering properly.\\\",\\n    id: 1,\\n    image: \\\"/origin/avatar-40-01.jpg\\\",\\n    title: \\\"Hannah Kandell\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    date: \\\"10 minutes ago\\\",\\n    description:\\n      \\\"Hey Hannah, I'm having trouble with the new component library. It's not rendering properly.\\\",\\n    id: 2,\\n    image: \\\"/origin/avatar-40-02.jpg\\\",\\n    title: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    date: \\\"5 minutes ago\\\",\\n    description:\\n      \\\"The new component library is not rendering properly. Can you take a look?\\\",\\n    id: 3,\\n    image: \\\"/origin/avatar-40-03.jpg\\\",\\n    title: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"closed the issue\\\",\\n    date: \\\"2 minutes ago\\\",\\n    description: \\\"The issue has been fixed. Please review the changes.\\\",\\n    id: 4,\\n    image: \\\"/origin/avatar-40-05.jpg\\\",\\n    title: \\\"Alex Morgan\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline>\\n      {items.map((item) => (\\n        <TimelineItem\\n          className=\\\"group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8\\\"\\n          key={item.id}\\n          step={item.id}\\n        >\\n          <TimelineHeader>\\n            <TimelineSeparator className=\\\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\\\" />\\n            <TimelineTitle className=\\\"mt-0.5\\\">\\n              {item.title}{\\\" \\\"}\\n              <span className=\\\"font-normal text-muted-foreground text-sm\\\">\\n                {item.action}\\n              </span>\\n            </TimelineTitle>\\n            <TimelineIndicator className=\\\"group-data-[orientation=vertical]/timeline:-left-7 flex size-6 items-center justify-center border-none bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground\\\">\\n              <img\\n                alt={item.title}\\n                className=\\\"size-6 rounded-full\\\"\\n                src={item.image}\\n              />\\n            </TimelineIndicator>\\n          </TimelineHeader>\\n          <TimelineContent className=\\\"mt-2 rounded-lg border px-4 py-3 text-foreground\\\">\\n            {item.description}\\n            <TimelineDate className=\\\"mt-1 mb-0\\\">{item.date}</TimelineDate>\\n          </TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-537.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-537\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-537.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"Mar 15, 2024\\\",\\n    id: 1,\\n    title: \\\"Project Kickoff\\\",\\n  },\\n  {\\n    date: \\\"Mar 22, 2024\\\",\\n    id: 2,\\n    title: \\\"Design Phase\\\",\\n  },\\n  {\\n    date: \\\"Apr 5, 2024\\\",\\n    id: 3,\\n    title: \\\"Development Sprint\\\",\\n  },\\n  {\\n    date: \\\"Apr 19, 2024\\\",\\n    id: 4,\\n    title: \\\"Testing & Deployment\\\",\\n  },\\n  {\\n    date: \\\"May 3, 2024\\\",\\n    id: 5,\\n    title: \\\"User Training\\\",\\n  },\\n  {\\n    date: \\\"May 17, 2024\\\",\\n    id: 6,\\n    title: \\\"Project Handover\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3}>\\n      {items.map((item) => (\\n        <TimelineItem\\n          className=\\\"even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:-right-6 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:-right-6 w-[calc(50%-1.5rem)] odd:ms-auto even:text-right even:group-data-[orientation=vertical]/timeline:ms-0 even:group-data-[orientation=vertical]/timeline:me-8 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:left-auto even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:translate-x-1/2 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:left-auto even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:translate-x-1/2\\\"\\n          key={item.id}\\n          step={item.id}\\n        >\\n          <TimelineHeader>\\n            <TimelineSeparator />\\n            <TimelineDate>{item.date}</TimelineDate>\\n            <TimelineTitle>{item.title}</TimelineTitle>\\n            <TimelineIndicator />\\n          </TimelineHeader>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-538.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-538\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-538.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineItem,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: new Date(\\\"2024-01-09T10:55:00\\\"),\\n    description: \\\"System backup completed successfully.\\\",\\n    id: 1,\\n  },\\n  {\\n    date: new Date(\\\"2024-01-09T10:50:00\\\"),\\n    description:\\n      \\\"User authentication service restarted due to configuration update.\\\",\\n    id: 2,\\n  },\\n  {\\n    date: new Date(\\\"2024-01-09T10:45:00\\\"),\\n    description: \\\"Warning: High CPU usage detected on worker node-03.\\\",\\n    id: 3,\\n  },\\n  {\\n    date: new Date(\\\"2024-01-09T10:40:00\\\"),\\n    description: \\\"New deployment initiated for api-service v2.1.0.\\\",\\n    id: 4,\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline className=\\\"divide-y rounded-lg border\\\">\\n      {items.map((item) => (\\n        <TimelineItem className=\\\"m-0! px-4! py-3!\\\" key={item.id} step={item.id}>\\n          <TimelineContent className=\\\"text-foreground\\\">\\n            {item.description}\\n            <TimelineDate className=\\\"mt-1\\\">\\n              {item.date.toLocaleDateString(\\\"en-US\\\", {\\n                day: \\\"numeric\\\",\\n                month: \\\"long\\\",\\n                year: \\\"numeric\\\",\\n              })}{\\\" \\\"}\\n              at{\\\" \\\"}\\n              {item.date.toLocaleTimeString(\\\"en-US\\\", {\\n                hour: \\\"numeric\\\",\\n                hour12: true,\\n                minute: \\\"2-digit\\\",\\n              })}\\n            </TimelineDate>\\n          </TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-539.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-539\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-539.tsx\",\n      \"content\": \"import {\\n  BookOpenIcon,\\n  type LucideIcon,\\n  MessageCircleIcon,\\n  PencilIcon,\\n  PlusIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Timeline,\\n  TimelineContent,\\n  TimelineItem,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items: {\\n  id: number;\\n  user: string;\\n  image: string;\\n  action: ActionType;\\n  date: Date;\\n}[] = [\\n  {\\n    action: \\\"post\\\",\\n    date: new Date(Date.now() - 59000), // 59 seconds ago\\n    id: 1,\\n    image: \\\"/origin/avatar-40-02.jpg\\\",\\n    user: \\\"Matt\\\",\\n  },\\n  {\\n    action: \\\"reply\\\",\\n    date: new Date(Date.now() - 180000), // 3 minutes ago\\n    id: 2,\\n    image: \\\"/origin/avatar-40-02.jpg\\\",\\n    user: \\\"Matt\\\",\\n  },\\n  {\\n    action: \\\"edit\\\",\\n    date: new Date(Date.now() - 300000), // 5 minutes ago\\n    id: 3,\\n    image: \\\"/origin/avatar-40-02.jpg\\\",\\n    user: \\\"Matt\\\",\\n  },\\n  {\\n    action: \\\"create\\\",\\n    date: new Date(Date.now() - 600000), // 10 minutes ago\\n    id: 4,\\n    image: \\\"/origin/avatar-40-02.jpg\\\",\\n    user: \\\"Matt\\\",\\n  },\\n];\\n\\ntype ActionType = \\\"post\\\" | \\\"reply\\\" | \\\"edit\\\" | \\\"create\\\";\\n\\nfunction getActionIcon(action: ActionType): LucideIcon {\\n  const icons: Record<ActionType, LucideIcon> = {\\n    create: PlusIcon,\\n    edit: PencilIcon,\\n    post: BookOpenIcon,\\n    reply: MessageCircleIcon,\\n  };\\n  return icons[action];\\n}\\n\\nfunction getActionText(action: ActionType): string {\\n  const texts: Record<ActionType, string> = {\\n    create: \\\"created a new project\\\",\\n    edit: \\\"edited a post\\\",\\n    post: \\\"wrote a new post\\\",\\n    reply: \\\"replied to a comment\\\",\\n  };\\n  return texts[action];\\n}\\n\\nfunction getRelativeTimeString(date: Date): string {\\n  const now = new Date();\\n  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);\\n\\n  if (diffInSeconds < 60) {\\n    return `${diffInSeconds} seconds ago`;\\n  }\\n  if (diffInSeconds < 3600) {\\n    const minutes = Math.floor(diffInSeconds / 60);\\n    return `${minutes} ${minutes === 1 ? \\\"minute\\\" : \\\"minutes\\\"} ago`;\\n  }\\n  if (diffInSeconds < 86400) {\\n    const hours = Math.floor(diffInSeconds / 3600);\\n    return `${hours} ${hours === 1 ? \\\"hour\\\" : \\\"hours\\\"} ago`;\\n  }\\n  const days = Math.floor(diffInSeconds / 86400);\\n  return `${days} ${days === 1 ? \\\"day\\\" : \\\"days\\\"} ago`;\\n}\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"space-y-3\\\">\\n      <div className=\\\"font-medium text-muted-foreground text-xs\\\">Activity</div>\\n      <Timeline>\\n        {items.map((item) => {\\n          const ActionIcon = getActionIcon(item.action);\\n          return (\\n            <TimelineItem\\n              className=\\\"m-0! flex-row items-center gap-3 py-2.5!\\\"\\n              key={item.id}\\n              step={item.id}\\n            >\\n              <ActionIcon className=\\\"text-muted-foreground/80\\\" size={16} />\\n              <img\\n                alt={item.user}\\n                className=\\\"size-6 rounded-full\\\"\\n                src={item.image}\\n              />\\n              <TimelineContent className=\\\"text-foreground\\\">\\n                <a className=\\\"font-medium hover:underline\\\" href=\\\"#\\\">\\n                  {item.user}\\n                </a>\\n                <span className=\\\"font-normal\\\">\\n                  {\\\" \\\"}\\n                  {getActionText(item.action)}{\\\" \\\"}\\n                  <a className=\\\"hover:underline\\\" href=\\\"#\\\">\\n                    {getRelativeTimeString(item.date)}\\n                  </a>\\n                </span>\\n              </TimelineContent>\\n            </TimelineItem>\\n          );\\n        })}\\n      </Timeline>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"timeline\",\n      \"vertical timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-54.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-54\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"use-mask-input\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-54.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\nimport { withMask } from \\\"use-mask-input\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with mask</Label>\\n      <Input\\n        id={id}\\n        placeholder=\\\"AB12 CDE\\\"\\n        ref={(input) => {\\n          if (input) {\\n            withMask(\\\"AA99 AAA\\\", {\\n              placeholder: \\\"\\\",\\n              showMaskOnHover: false,\\n            })(input);\\n          }\\n        }}\\n        type=\\\"text\\\"\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/eduardoborges/use-mask-input\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          use-mask-input\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"mask\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-540.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-540\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-540.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"Mar 15, 2024\\\",\\n    description: \\\"Initial team meeting.\\\",\\n    id: 1,\\n    title: \\\"Project Kickoff\\\",\\n  },\\n  {\\n    date: \\\"Mar 22, 2024\\\",\\n    description: \\\"Completed wireframes.\\\",\\n    id: 2,\\n    title: \\\"Design Phase\\\",\\n  },\\n  {\\n    date: \\\"Apr 5, 2024\\\",\\n    description: \\\"Backend development.\\\",\\n    id: 3,\\n    title: \\\"Development Sprint\\\",\\n  },\\n  {\\n    date: \\\"Apr 19, 2024\\\",\\n    description: \\\"Performance optimization.\\\",\\n    id: 4,\\n    title: \\\"Testing & Deployment\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3} orientation=\\\"horizontal\\\">\\n      {items.map((item) => (\\n        <TimelineItem key={item.id} step={item.id}>\\n          <TimelineHeader>\\n            <TimelineSeparator />\\n            <TimelineDate>{item.date}</TimelineDate>\\n            <TimelineTitle>{item.title}</TimelineTitle>\\n            <TimelineIndicator />\\n          </TimelineHeader>\\n          <TimelineContent>{item.description}</TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-541.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-541\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/timeline.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-541.tsx\",\n      \"content\": \"import {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n} from \\\"@/registry/default/ui/timeline\\\";\\n\\nconst items = [\\n  {\\n    date: \\\"Mar 15, 2024\\\",\\n    description: \\\"Initial team meeting.\\\",\\n    id: 1,\\n    title: \\\"Project Kickoff\\\",\\n  },\\n  {\\n    date: \\\"Mar 22, 2024\\\",\\n    description: \\\"Completed wireframes.\\\",\\n    id: 2,\\n    title: \\\"Design Phase\\\",\\n  },\\n  {\\n    date: \\\"Apr 5, 2024\\\",\\n    description: \\\"Backend development.\\\",\\n    id: 3,\\n    title: \\\"Development Sprint\\\",\\n  },\\n  {\\n    date: \\\"Apr 19, 2024\\\",\\n    description: \\\"Performance optimization.\\\",\\n    id: 4,\\n    title: \\\"Testing & Deployment\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <Timeline defaultValue={3} orientation=\\\"horizontal\\\">\\n      {items.map((item) => (\\n        <TimelineItem\\n          className=\\\"group-data-[orientation=horizontal]/timeline:mt-0\\\"\\n          key={item.id}\\n          step={item.id}\\n        >\\n          <TimelineHeader>\\n            <TimelineSeparator className=\\\"group-data-[orientation=horizontal]/timeline:top-8\\\" />\\n            <TimelineDate className=\\\"mb-10\\\">{item.date}</TimelineDate>\\n            <TimelineTitle>{item.title}</TimelineTitle>\\n            <TimelineIndicator className=\\\"group-data-[orientation=horizontal]/timeline:top-8\\\" />\\n          </TimelineHeader>\\n          <TimelineContent>{item.description}</TimelineContent>\\n        </TimelineItem>\\n      ))}\\n    </Timeline>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"timeline\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-542.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-542\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"@dnd-kit/core\",\n    \"@dnd-kit/modifiers\",\n    \"@dnd-kit/utilities\",\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/textarea.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/radio-group.json\",\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/sonner.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-542.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays, setHours, setMinutes, subDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport {\\n  type CalendarEvent,\\n  EventCalendar,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\n\\n// Sample events data with hardcoded times\\nconst sampleEvents: CalendarEvent[] = [\\n  {\\n    allDay: true,\\n    color: \\\"sky\\\",\\n    description: \\\"Strategic planning for next year\\\",\\n    end: subDays(new Date(), 23), // 23 days before today\\n    id: \\\"1\\\",\\n    location: \\\"Main Conference Hall\\\",\\n    start: subDays(new Date(), 24), // 24 days before today\\n    title: \\\"Annual Planning\\\",\\n  },\\n  {\\n    color: \\\"amber\\\",\\n    description: \\\"Submit final deliverables\\\",\\n    end: setMinutes(setHours(subDays(new Date(), 9), 15), 30), // 3:30 PM, 9 days before\\n    id: \\\"2\\\",\\n    location: \\\"Office\\\",\\n    start: setMinutes(setHours(subDays(new Date(), 9), 13), 0), // 1:00 PM, 9 days before\\n    title: \\\"Project Deadline\\\",\\n  },\\n  {\\n    allDay: true,\\n    color: \\\"orange\\\",\\n    description: \\\"Strategic planning for next year\\\",\\n    end: subDays(new Date(), 13), // 13 days before today\\n    id: \\\"3\\\",\\n    location: \\\"Main Conference Hall\\\",\\n    start: subDays(new Date(), 13), // 13 days before today\\n    title: \\\"Quarterly Budget Review\\\",\\n  },\\n  {\\n    color: \\\"sky\\\",\\n    description: \\\"Weekly team sync\\\",\\n    end: setMinutes(setHours(new Date(), 11), 0), // 11:00 AM today\\n    id: \\\"4\\\",\\n    location: \\\"Conference Room A\\\",\\n    start: setMinutes(setHours(new Date(), 10), 0), // 10:00 AM today\\n    title: \\\"Team Meeting\\\",\\n  },\\n  {\\n    color: \\\"emerald\\\",\\n    description: \\\"Discuss new project requirements\\\",\\n    end: setMinutes(setHours(addDays(new Date(), 1), 13), 15), // 1:15 PM, 1 day from now\\n    id: \\\"5\\\",\\n    location: \\\"Downtown Cafe\\\",\\n    start: setMinutes(setHours(addDays(new Date(), 1), 12), 0), // 12:00 PM, 1 day from now\\n    title: \\\"Lunch with Client\\\",\\n  },\\n  {\\n    allDay: true,\\n    color: \\\"violet\\\",\\n    description: \\\"New product release\\\",\\n    end: addDays(new Date(), 6), // 6 days from now\\n    id: \\\"6\\\",\\n    start: addDays(new Date(), 3), // 3 days from now\\n    title: \\\"Product Launch\\\",\\n  },\\n  {\\n    color: \\\"rose\\\",\\n    description: \\\"Discuss about new clients\\\",\\n    end: setMinutes(setHours(addDays(new Date(), 5), 14), 45), // 2:45 PM, 5 days from now\\n    id: \\\"7\\\",\\n    location: \\\"Downtown Cafe\\\",\\n    start: setMinutes(setHours(addDays(new Date(), 4), 14), 30), // 2:30 PM, 4 days from now\\n    title: \\\"Sales Conference\\\",\\n  },\\n  {\\n    color: \\\"orange\\\",\\n    description: \\\"Weekly team sync\\\",\\n    end: setMinutes(setHours(addDays(new Date(), 5), 10), 30), // 10:30 AM, 5 days from now\\n    id: \\\"8\\\",\\n    location: \\\"Conference Room A\\\",\\n    start: setMinutes(setHours(addDays(new Date(), 5), 9), 0), // 9:00 AM, 5 days from now\\n    title: \\\"Team Meeting\\\",\\n  },\\n  {\\n    color: \\\"sky\\\",\\n    description: \\\"Weekly team sync\\\",\\n    end: setMinutes(setHours(addDays(new Date(), 5), 15), 30), // 3:30 PM, 5 days from now\\n    id: \\\"9\\\",\\n    location: \\\"Conference Room A\\\",\\n    start: setMinutes(setHours(addDays(new Date(), 5), 14), 0), // 2:00 PM, 5 days from now\\n    title: \\\"Review contracts\\\",\\n  },\\n  {\\n    color: \\\"amber\\\",\\n    description: \\\"Weekly team sync\\\",\\n    end: setMinutes(setHours(addDays(new Date(), 5), 11), 0), // 11:00 AM, 5 days from now\\n    id: \\\"10\\\",\\n    location: \\\"Conference Room A\\\",\\n    start: setMinutes(setHours(addDays(new Date(), 5), 9), 45), // 9:45 AM, 5 days from now\\n    title: \\\"Team Meeting\\\",\\n  },\\n  {\\n    color: \\\"emerald\\\",\\n    description: \\\"Quarterly marketing planning\\\",\\n    end: setMinutes(setHours(addDays(new Date(), 9), 15), 30), // 3:30 PM, 9 days from now\\n    id: \\\"11\\\",\\n    location: \\\"Marketing Department\\\",\\n    start: setMinutes(setHours(addDays(new Date(), 9), 10), 0), // 10:00 AM, 9 days from now\\n    title: \\\"Marketing Strategy Session\\\",\\n  },\\n  {\\n    allDay: true,\\n    color: \\\"sky\\\",\\n    description: \\\"Presentation of yearly results\\\",\\n    end: addDays(new Date(), 17), // 17 days from now\\n    id: \\\"12\\\",\\n    location: \\\"Grand Conference Center\\\",\\n    start: addDays(new Date(), 17), // 17 days from now\\n    title: \\\"Annual Shareholders Meeting\\\",\\n  },\\n  {\\n    color: \\\"rose\\\",\\n    description: \\\"Brainstorming for new features\\\",\\n    end: setMinutes(setHours(addDays(new Date(), 27), 17), 0), // 5:00 PM, 27 days from now\\n    id: \\\"13\\\",\\n    location: \\\"Innovation Lab\\\",\\n    start: setMinutes(setHours(addDays(new Date(), 26), 9), 0), // 9:00 AM, 26 days from now\\n    title: \\\"Product Development Workshop\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const [events, setEvents] = useState<CalendarEvent[]>(sampleEvents);\\n\\n  const handleEventAdd = (event: CalendarEvent) => {\\n    setEvents([...events, event]);\\n  };\\n\\n  const handleEventUpdate = (updatedEvent: CalendarEvent) => {\\n    setEvents(\\n      events.map((event) =>\\n        event.id === updatedEvent.id ? updatedEvent : event,\\n      ),\\n    );\\n  };\\n\\n  const handleEventDelete = (eventId: string) => {\\n    setEvents(events.filter((event) => event.id !== eventId));\\n  };\\n\\n  return (\\n    <EventCalendar\\n      events={events}\\n      onEventAdd={handleEventAdd}\\n      onEventDelete={handleEventDelete}\\n      onEventUpdate={handleEventUpdate}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/agenda-view.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RiCalendarEventLine } from \\\"@remixicon/react\\\";\\nimport { addDays, format, isToday } from \\\"date-fns\\\";\\nimport { useMemo } from \\\"react\\\";\\n\\nimport {\\n  AgendaDaysToShow,\\n  type CalendarEvent,\\n  EventItem,\\n  getAgendaEventsForDay,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\n\\ninterface AgendaViewProps {\\n  currentDate: Date;\\n  events: CalendarEvent[];\\n  onEventSelect: (event: CalendarEvent) => void;\\n}\\n\\nexport function AgendaView({\\n  currentDate,\\n  events,\\n  onEventSelect,\\n}: AgendaViewProps) {\\n  // Show events for the next days based on constant\\n  const days = useMemo(() => {\\n    console.log(\\\"Agenda view updating with date:\\\", currentDate.toISOString());\\n    return Array.from({ length: AgendaDaysToShow }, (_, i) =>\\n      addDays(new Date(currentDate), i),\\n    );\\n  }, [currentDate]);\\n\\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\\n    e.stopPropagation();\\n    console.log(\\\"Agenda view event clicked:\\\", event);\\n    onEventSelect(event);\\n  };\\n\\n  // Check if there are any days with events\\n  const hasEvents = days.some(\\n    (day) => getAgendaEventsForDay(events, day).length > 0,\\n  );\\n\\n  return (\\n    <div className=\\\"border-border/70 border-t px-4\\\">\\n      {!hasEvents ? (\\n        <div className=\\\"flex min-h-[70svh] flex-col items-center justify-center py-16 text-center\\\">\\n          <RiCalendarEventLine\\n            className=\\\"mb-2 text-muted-foreground/50\\\"\\n            size={32}\\n          />\\n          <h3 className=\\\"font-medium text-lg\\\">No events found</h3>\\n          <p className=\\\"text-muted-foreground\\\">\\n            There are no events scheduled for this time period.\\n          </p>\\n        </div>\\n      ) : (\\n        days.map((day) => {\\n          const dayEvents = getAgendaEventsForDay(events, day);\\n\\n          if (dayEvents.length === 0) return null;\\n\\n          return (\\n            <div\\n              className=\\\"relative my-12 border-border/70 border-t\\\"\\n              key={day.toString()}\\n            >\\n              <span\\n                className=\\\"-top-3 absolute left-0 flex h-6 items-center bg-background pe-4 text-[10px] uppercase data-today:font-medium sm:pe-4 sm:text-xs\\\"\\n                data-today={isToday(day) || undefined}\\n              >\\n                {format(day, \\\"d MMM, EEEE\\\")}\\n              </span>\\n              <div className=\\\"mt-6 space-y-2\\\">\\n                {dayEvents.map((event) => (\\n                  <EventItem\\n                    event={event}\\n                    key={event.id}\\n                    onClick={(e) => handleEventClick(event, e)}\\n                    view=\\\"agenda\\\"\\n                  />\\n                ))}\\n              </div>\\n            </div>\\n          );\\n        })\\n      )}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/calendar-dnd-context.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  DndContext,\\n  type DragEndEvent,\\n  type DragOverEvent,\\n  DragOverlay,\\n  type DragStartEvent,\\n  MouseSensor,\\n  PointerSensor,\\n  TouchSensor,\\n  type UniqueIdentifier,\\n  useSensor,\\n  useSensors,\\n} from \\\"@dnd-kit/core\\\";\\nimport { addMinutes, differenceInMinutes } from \\\"date-fns\\\";\\nimport {\\n  createContext,\\n  type ReactNode,\\n  useContext,\\n  useId,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nimport {\\n  type CalendarEvent,\\n  EventItem,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\n\\n// Define the context type\\ntype CalendarDndContextType = {\\n  activeEvent: CalendarEvent | null;\\n  activeId: UniqueIdentifier | null;\\n  activeView: \\\"month\\\" | \\\"week\\\" | \\\"day\\\" | null;\\n  currentTime: Date | null;\\n  eventHeight: number | null;\\n  isMultiDay: boolean;\\n  multiDayWidth: number | null;\\n  dragHandlePosition: {\\n    x?: number;\\n    y?: number;\\n    data?: {\\n      isFirstDay?: boolean;\\n      isLastDay?: boolean;\\n    };\\n  } | null;\\n};\\n\\n// Create the context\\nconst CalendarDndContext = createContext<CalendarDndContextType>({\\n  activeEvent: null,\\n  activeId: null,\\n  activeView: null,\\n  currentTime: null,\\n  dragHandlePosition: null,\\n  eventHeight: null,\\n  isMultiDay: false,\\n  multiDayWidth: null,\\n});\\n\\n// Hook to use the context\\nexport const useCalendarDnd = () => useContext(CalendarDndContext);\\n\\n// Props for the provider\\ninterface CalendarDndProviderProps {\\n  children: ReactNode;\\n  onEventUpdate: (event: CalendarEvent) => void;\\n}\\n\\nexport function CalendarDndProvider({\\n  children,\\n  onEventUpdate,\\n}: CalendarDndProviderProps) {\\n  const [activeEvent, setActiveEvent] = useState<CalendarEvent | null>(null);\\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);\\n  const [activeView, setActiveView] = useState<\\\"month\\\" | \\\"week\\\" | \\\"day\\\" | null>(\\n    null,\\n  );\\n  const [currentTime, setCurrentTime] = useState<Date | null>(null);\\n  const [eventHeight, setEventHeight] = useState<number | null>(null);\\n  const [isMultiDay, setIsMultiDay] = useState(false);\\n  const [multiDayWidth, setMultiDayWidth] = useState<number | null>(null);\\n  const [dragHandlePosition, setDragHandlePosition] = useState<{\\n    x?: number;\\n    y?: number;\\n    data?: {\\n      isFirstDay?: boolean;\\n      isLastDay?: boolean;\\n    };\\n  } | null>(null);\\n\\n  // Store original event dimensions\\n  const eventDimensions = useRef<{ height: number }>({ height: 0 });\\n\\n  // Configure sensors for better drag detection\\n  const sensors = useSensors(\\n    useSensor(MouseSensor, {\\n      // Require the mouse to move by 5px before activating\\n      activationConstraint: {\\n        distance: 5,\\n      },\\n    }),\\n    useSensor(TouchSensor, {\\n      // Press delay of 250ms, with tolerance of 5px of movement\\n      activationConstraint: {\\n        delay: 250,\\n        tolerance: 5,\\n      },\\n    }),\\n    useSensor(PointerSensor, {\\n      // Require the pointer to move by 5px before activating\\n      activationConstraint: {\\n        distance: 5,\\n      },\\n    }),\\n  );\\n\\n  // Generate a stable ID for the DndContext\\n  const dndContextId = useId();\\n\\n  const handleDragStart = (event: DragStartEvent) => {\\n    const { active } = event;\\n\\n    // Add safety check for data.current\\n    if (!active.data.current) {\\n      console.error(\\\"Missing data in drag start event\\\", event);\\n      return;\\n    }\\n\\n    const {\\n      event: calendarEvent,\\n      view,\\n      height,\\n      isMultiDay: eventIsMultiDay,\\n      multiDayWidth: eventMultiDayWidth,\\n      dragHandlePosition: eventDragHandlePosition,\\n    } = active.data.current as {\\n      event: CalendarEvent;\\n      view: \\\"month\\\" | \\\"week\\\" | \\\"day\\\";\\n      height?: number;\\n      isMultiDay?: boolean;\\n      multiDayWidth?: number;\\n      dragHandlePosition?: {\\n        x?: number;\\n        y?: number;\\n        data?: {\\n          isFirstDay?: boolean;\\n          isLastDay?: boolean;\\n        };\\n      };\\n    };\\n\\n    setActiveEvent(calendarEvent);\\n    setActiveId(active.id);\\n    setActiveView(view);\\n    setCurrentTime(new Date(calendarEvent.start));\\n    setIsMultiDay(eventIsMultiDay || false);\\n    setMultiDayWidth(eventMultiDayWidth || null);\\n    setDragHandlePosition(eventDragHandlePosition || null);\\n\\n    // Store event height if provided\\n    if (height) {\\n      eventDimensions.current.height = height;\\n      setEventHeight(height);\\n    }\\n  };\\n\\n  const handleDragOver = (event: DragOverEvent) => {\\n    const { over } = event;\\n\\n    if (over && activeEvent && over.data.current) {\\n      const { date, time } = over.data.current as { date: Date; time?: number };\\n\\n      // Update time for week/day views\\n      if (time !== undefined && activeView !== \\\"month\\\") {\\n        const newTime = new Date(date);\\n\\n        // Calculate hours and minutes with 15-minute precision\\n        const hours = Math.floor(time);\\n        const fractionalHour = time - hours;\\n\\n        // Map to nearest 15 minute interval (0, 0.25, 0.5, 0.75)\\n        let minutes = 0;\\n        if (fractionalHour < 0.125) minutes = 0;\\n        else if (fractionalHour < 0.375) minutes = 15;\\n        else if (fractionalHour < 0.625) minutes = 30;\\n        else minutes = 45;\\n\\n        newTime.setHours(hours, minutes, 0, 0);\\n\\n        // Only update if time has changed\\n        if (\\n          !currentTime ||\\n          newTime.getHours() !== currentTime.getHours() ||\\n          newTime.getMinutes() !== currentTime.getMinutes() ||\\n          newTime.getDate() !== currentTime.getDate() ||\\n          newTime.getMonth() !== currentTime.getMonth() ||\\n          newTime.getFullYear() !== currentTime.getFullYear()\\n        ) {\\n          setCurrentTime(newTime);\\n        }\\n      } else if (activeView === \\\"month\\\") {\\n        // For month view, just update the date but preserve time\\n        const newTime = new Date(date);\\n        if (currentTime) {\\n          newTime.setHours(\\n            currentTime.getHours(),\\n            currentTime.getMinutes(),\\n            currentTime.getSeconds(),\\n            currentTime.getMilliseconds(),\\n          );\\n        }\\n\\n        // Only update if date has changed\\n        if (\\n          !currentTime ||\\n          newTime.getDate() !== currentTime.getDate() ||\\n          newTime.getMonth() !== currentTime.getMonth() ||\\n          newTime.getFullYear() !== currentTime.getFullYear()\\n        ) {\\n          setCurrentTime(newTime);\\n        }\\n      }\\n    }\\n  };\\n\\n  const handleDragEnd = (event: DragEndEvent) => {\\n    const { active, over } = event;\\n\\n    // Add robust error checking\\n    if (!over || !activeEvent || !currentTime) {\\n      // Reset state and exit early\\n      setActiveEvent(null);\\n      setActiveId(null);\\n      setActiveView(null);\\n      setCurrentTime(null);\\n      setEventHeight(null);\\n      setIsMultiDay(false);\\n      setMultiDayWidth(null);\\n      setDragHandlePosition(null);\\n      return;\\n    }\\n\\n    try {\\n      // Safely access data with checks\\n      if (!active.data.current || !over.data.current) {\\n        throw new Error(\\\"Missing data in drag event\\\");\\n      }\\n\\n      const activeData = active.data.current as {\\n        event?: CalendarEvent;\\n        view?: string;\\n      };\\n      const overData = over.data.current as { date?: Date; time?: number };\\n\\n      // Verify we have all required data\\n      if (!activeData.event || !overData.date) {\\n        throw new Error(\\\"Missing required event data\\\");\\n      }\\n\\n      const calendarEvent = activeData.event;\\n      const date = overData.date;\\n      const time = overData.time;\\n\\n      // Calculate new start time\\n      const newStart = new Date(date);\\n\\n      // If time is provided (for week/day views), set the hours and minutes\\n      if (time !== undefined) {\\n        const hours = Math.floor(time);\\n        const fractionalHour = time - hours;\\n\\n        // Map to nearest 15 minute interval (0, 0.25, 0.5, 0.75)\\n        let minutes = 0;\\n        if (fractionalHour < 0.125) minutes = 0;\\n        else if (fractionalHour < 0.375) minutes = 15;\\n        else if (fractionalHour < 0.625) minutes = 30;\\n        else minutes = 45;\\n\\n        newStart.setHours(hours, minutes, 0, 0);\\n      } else {\\n        // For month view, preserve the original time from currentTime\\n        newStart.setHours(\\n          currentTime.getHours(),\\n          currentTime.getMinutes(),\\n          currentTime.getSeconds(),\\n          currentTime.getMilliseconds(),\\n        );\\n      }\\n\\n      // Calculate new end time based on the original duration\\n      const originalStart = new Date(calendarEvent.start);\\n      const originalEnd = new Date(calendarEvent.end);\\n      const durationMinutes = differenceInMinutes(originalEnd, originalStart);\\n      const newEnd = addMinutes(newStart, durationMinutes);\\n\\n      // Only update if the start time has actually changed\\n      const hasStartTimeChanged =\\n        originalStart.getFullYear() !== newStart.getFullYear() ||\\n        originalStart.getMonth() !== newStart.getMonth() ||\\n        originalStart.getDate() !== newStart.getDate() ||\\n        originalStart.getHours() !== newStart.getHours() ||\\n        originalStart.getMinutes() !== newStart.getMinutes();\\n\\n      if (hasStartTimeChanged) {\\n        // Update the event only if the time has changed\\n        onEventUpdate({\\n          ...calendarEvent,\\n          end: newEnd,\\n          start: newStart,\\n        });\\n      }\\n    } catch (error) {\\n      console.error(\\\"Error in drag end handler:\\\", error);\\n    } finally {\\n      // Always reset state\\n      setActiveEvent(null);\\n      setActiveId(null);\\n      setActiveView(null);\\n      setCurrentTime(null);\\n      setEventHeight(null);\\n      setIsMultiDay(false);\\n      setMultiDayWidth(null);\\n      setDragHandlePosition(null);\\n    }\\n  };\\n\\n  return (\\n    <DndContext\\n      id={dndContextId}\\n      onDragEnd={handleDragEnd}\\n      onDragOver={handleDragOver}\\n      onDragStart={handleDragStart}\\n      sensors={sensors}\\n    >\\n      <CalendarDndContext.Provider\\n        value={{\\n          activeEvent,\\n          activeId,\\n          activeView,\\n          currentTime,\\n          dragHandlePosition,\\n          eventHeight,\\n          isMultiDay,\\n          multiDayWidth,\\n        }}\\n      >\\n        {children}\\n\\n        <DragOverlay adjustScale={false} dropAnimation={null}>\\n          {activeEvent && activeView && (\\n            <div\\n              style={{\\n                height: eventHeight ? `${eventHeight}px` : \\\"auto\\\",\\n                width:\\n                  isMultiDay && multiDayWidth ? `${multiDayWidth}%` : \\\"100%\\\",\\n                // Remove the transform that was causing the shift\\n              }}\\n            >\\n              <EventItem\\n                currentTime={currentTime || undefined}\\n                event={activeEvent}\\n                isDragging={true}\\n                isFirstDay={dragHandlePosition?.data?.isFirstDay !== false}\\n                isLastDay={dragHandlePosition?.data?.isLastDay !== false}\\n                showTime={activeView !== \\\"month\\\"}\\n                view={activeView}\\n              />\\n            </div>\\n          )}\\n        </DragOverlay>\\n      </CalendarDndContext.Provider>\\n    </DndContext>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/constants.ts\",\n      \"content\": \"// Height of calendar events in pixels - used in month, week and day views\\nexport const EventHeight = 24;\\n\\n// Vertical gap between events in pixels - controls spacing in month view\\nexport const EventGap = 4;\\n\\n// Height of hour cells in week and day views - controls the scale of time display\\nexport const WeekCellsHeight = 64;\\n\\n// Number of days to show in the agenda view\\nexport const AgendaDaysToShow = 30;\\n\\n// Start and end hours for the week and day views\\nexport const StartHour = 0;\\nexport const EndHour = 24;\\n\\n// Default start and end times\\nexport const DefaultStartHour = 9; // 9 AM\\nexport const DefaultEndHour = 10; // 10 AM\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/day-view.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  addHours,\\n  areIntervalsOverlapping,\\n  differenceInMinutes,\\n  eachHourOfInterval,\\n  format,\\n  getHours,\\n  getMinutes,\\n  isSameDay,\\n  startOfDay,\\n} from \\\"date-fns\\\";\\nimport type React from \\\"react\\\";\\nimport { useMemo } from \\\"react\\\";\\n\\nimport {\\n  type CalendarEvent,\\n  DraggableEvent,\\n  DroppableCell,\\n  EventItem,\\n  isMultiDayEvent,\\n  useCurrentTimeIndicator,\\n  WeekCellsHeight,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\nimport {\\n  EndHour,\\n  StartHour,\\n} from \\\"@/registry/default/components/event-calendar/constants\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\ninterface DayViewProps {\\n  currentDate: Date;\\n  events: CalendarEvent[];\\n  onEventSelect: (event: CalendarEvent) => void;\\n  onEventCreate: (startTime: Date) => void;\\n}\\n\\ninterface PositionedEvent {\\n  event: CalendarEvent;\\n  top: number;\\n  height: number;\\n  left: number;\\n  width: number;\\n  zIndex: number;\\n}\\n\\nexport function DayView({\\n  currentDate,\\n  events,\\n  onEventSelect,\\n  onEventCreate,\\n}: DayViewProps) {\\n  const hours = useMemo(() => {\\n    const dayStart = startOfDay(currentDate);\\n    return eachHourOfInterval({\\n      end: addHours(dayStart, EndHour - 1),\\n      start: addHours(dayStart, StartHour),\\n    });\\n  }, [currentDate]);\\n\\n  const dayEvents = useMemo(() => {\\n    return events\\n      .filter((event) => {\\n        const eventStart = new Date(event.start);\\n        const eventEnd = new Date(event.end);\\n        return (\\n          isSameDay(currentDate, eventStart) ||\\n          isSameDay(currentDate, eventEnd) ||\\n          (currentDate > eventStart && currentDate < eventEnd)\\n        );\\n      })\\n      .sort(\\n        (a, b) => new Date(a.start).getTime() - new Date(b.start).getTime(),\\n      );\\n  }, [currentDate, events]);\\n\\n  // Filter all-day events\\n  const allDayEvents = useMemo(() => {\\n    return dayEvents.filter((event) => {\\n      // Include explicitly marked all-day events or multi-day events\\n      return event.allDay || isMultiDayEvent(event);\\n    });\\n  }, [dayEvents]);\\n\\n  // Get only single-day time-based events\\n  const timeEvents = useMemo(() => {\\n    return dayEvents.filter((event) => {\\n      // Exclude all-day events and multi-day events\\n      return !event.allDay && !isMultiDayEvent(event);\\n    });\\n  }, [dayEvents]);\\n\\n  // Process events to calculate positions\\n  const positionedEvents = useMemo(() => {\\n    const result: PositionedEvent[] = [];\\n    const dayStart = startOfDay(currentDate);\\n\\n    // Sort events by start time and duration\\n    const sortedEvents = [...timeEvents].sort((a, b) => {\\n      const aStart = new Date(a.start);\\n      const bStart = new Date(b.start);\\n      const aEnd = new Date(a.end);\\n      const bEnd = new Date(b.end);\\n\\n      // First sort by start time\\n      if (aStart < bStart) return -1;\\n      if (aStart > bStart) return 1;\\n\\n      // If start times are equal, sort by duration (longer events first)\\n      const aDuration = differenceInMinutes(aEnd, aStart);\\n      const bDuration = differenceInMinutes(bEnd, bStart);\\n      return bDuration - aDuration;\\n    });\\n\\n    // Track columns for overlapping events\\n    const columns: { event: CalendarEvent; end: Date }[][] = [];\\n\\n    for (const event of sortedEvents) {\\n      const eventStart = new Date(event.start);\\n      const eventEnd = new Date(event.end);\\n\\n      // Adjust start and end times if they're outside this day\\n      const adjustedStart = isSameDay(currentDate, eventStart)\\n        ? eventStart\\n        : dayStart;\\n      const adjustedEnd = isSameDay(currentDate, eventEnd)\\n        ? eventEnd\\n        : addHours(dayStart, 24);\\n\\n      // Calculate top position and height\\n      const startHour =\\n        getHours(adjustedStart) + getMinutes(adjustedStart) / 60;\\n      const endHour = getHours(adjustedEnd) + getMinutes(adjustedEnd) / 60;\\n\\n      const top = (startHour - StartHour) * WeekCellsHeight;\\n      const height = (endHour - startHour) * WeekCellsHeight;\\n\\n      // Find a column for this event\\n      let columnIndex = 0;\\n      let placed = false;\\n\\n      while (!placed) {\\n        const col = columns[columnIndex] || [];\\n        if (col.length === 0) {\\n          columns[columnIndex] = col;\\n          placed = true;\\n        } else {\\n          const overlaps = col.some((c) =>\\n            areIntervalsOverlapping(\\n              { end: adjustedEnd, start: adjustedStart },\\n              { end: new Date(c.event.end), start: new Date(c.event.start) },\\n            ),\\n          );\\n\\n          if (!overlaps) {\\n            placed = true;\\n          } else {\\n            columnIndex++;\\n          }\\n        }\\n      }\\n\\n      // Ensure column is initialized before pushing\\n      const currentColumn = columns[columnIndex] || [];\\n      columns[columnIndex] = currentColumn;\\n      currentColumn.push({ end: adjustedEnd, event });\\n\\n      // First column takes full width, others are indented by 10% and take 90% width\\n      const width = columnIndex === 0 ? 1 : 0.9;\\n      const left = columnIndex === 0 ? 0 : columnIndex * 0.1;\\n\\n      result.push({\\n        event,\\n        height,\\n        left,\\n        top,\\n        width,\\n        zIndex: 10 + columnIndex,\\n      });\\n    }\\n\\n    return result;\\n  }, [currentDate, timeEvents]);\\n\\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\\n    e.stopPropagation();\\n    onEventSelect(event);\\n  };\\n\\n  const showAllDaySection = allDayEvents.length > 0;\\n  const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicator(\\n    currentDate,\\n    \\\"day\\\",\\n  );\\n\\n  return (\\n    <div className=\\\"contents\\\" data-slot=\\\"day-view\\\">\\n      {showAllDaySection && (\\n        <div className=\\\"border-border/70 border-t bg-muted/50\\\">\\n          <div className=\\\"grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]\\\">\\n            <div className=\\\"relative\\\">\\n              <span className=\\\"absolute bottom-0 left-0 h-6 w-16 max-w-full pe-2 text-right text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\\\">\\n                All day\\n              </span>\\n            </div>\\n            <div className=\\\"relative border-border/70 border-r p-1 last:border-r-0\\\">\\n              {allDayEvents.map((event) => {\\n                const eventStart = new Date(event.start);\\n                const eventEnd = new Date(event.end);\\n                const isFirstDay = isSameDay(currentDate, eventStart);\\n                const isLastDay = isSameDay(currentDate, eventEnd);\\n\\n                return (\\n                  <EventItem\\n                    event={event}\\n                    isFirstDay={isFirstDay}\\n                    isLastDay={isLastDay}\\n                    key={`spanning-${event.id}`}\\n                    onClick={(e) => handleEventClick(event, e)}\\n                    view=\\\"month\\\"\\n                  >\\n                    {/* Always show the title in day view for better usability */}\\n                    <div>{event.title}</div>\\n                  </EventItem>\\n                );\\n              })}\\n            </div>\\n          </div>\\n        </div>\\n      )}\\n\\n      <div className=\\\"grid flex-1 grid-cols-[3rem_1fr] overflow-hidden border-border/70 border-t sm:grid-cols-[4rem_1fr]\\\">\\n        <div>\\n          {hours.map((hour, index) => (\\n            <div\\n              className=\\\"relative h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0\\\"\\n              key={hour.toString()}\\n            >\\n              {index > 0 && (\\n                <span className=\\\"-top-3 absolute left-0 flex h-6 w-16 max-w-full items-center justify-end bg-background pe-2 text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\\\">\\n                  {format(hour, \\\"h a\\\")}\\n                </span>\\n              )}\\n            </div>\\n          ))}\\n        </div>\\n\\n        <div className=\\\"relative\\\">\\n          {/* Positioned events */}\\n          {positionedEvents.map((positionedEvent) => (\\n            <div\\n              className=\\\"absolute z-10 px-0.5\\\"\\n              key={positionedEvent.event.id}\\n              style={{\\n                height: `${positionedEvent.height}px`,\\n                left: `${positionedEvent.left * 100}%`,\\n                top: `${positionedEvent.top}px`,\\n                width: `${positionedEvent.width * 100}%`,\\n                zIndex: positionedEvent.zIndex,\\n              }}\\n            >\\n              <div className=\\\"size-full\\\">\\n                <DraggableEvent\\n                  event={positionedEvent.event}\\n                  height={positionedEvent.height}\\n                  onClick={(e) => handleEventClick(positionedEvent.event, e)}\\n                  showTime\\n                  view=\\\"day\\\"\\n                />\\n              </div>\\n            </div>\\n          ))}\\n\\n          {/* Current time indicator */}\\n          {currentTimeVisible && (\\n            <div\\n              className=\\\"pointer-events-none absolute right-0 left-0 z-20\\\"\\n              style={{ top: `${currentTimePosition}%` }}\\n            >\\n              <div className=\\\"relative flex items-center\\\">\\n                <div className=\\\"-left-1 absolute h-2 w-2 rounded-full bg-primary\\\" />\\n                <div className=\\\"h-[2px] w-full bg-primary\\\" />\\n              </div>\\n            </div>\\n          )}\\n\\n          {/* Time grid */}\\n          {hours.map((hour) => {\\n            const hourValue = getHours(hour);\\n            return (\\n              <div\\n                className=\\\"relative h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0\\\"\\n                key={hour.toString()}\\n              >\\n                {/* Quarter-hour intervals */}\\n                {[0, 1, 2, 3].map((quarter) => {\\n                  const quarterHourTime = hourValue + quarter * 0.25;\\n                  return (\\n                    <DroppableCell\\n                      className={cn(\\n                        \\\"absolute h-[calc(var(--week-cells-height)/4)] w-full\\\",\\n                        quarter === 0 && \\\"top-0\\\",\\n                        quarter === 1 &&\\n                          \\\"top-[calc(var(--week-cells-height)/4)]\\\",\\n                        quarter === 2 &&\\n                          \\\"top-[calc(var(--week-cells-height)/4*2)]\\\",\\n                        quarter === 3 &&\\n                          \\\"top-[calc(var(--week-cells-height)/4*3)]\\\",\\n                      )}\\n                      date={currentDate}\\n                      id={`day-cell-${currentDate.toISOString()}-${quarterHourTime}`}\\n                      key={`${hour.toString()}-${quarter}`}\\n                      onClick={() => {\\n                        const startTime = new Date(currentDate);\\n                        startTime.setHours(hourValue);\\n                        startTime.setMinutes(quarter * 15);\\n                        onEventCreate(startTime);\\n                      }}\\n                      time={quarterHourTime}\\n                    />\\n                  );\\n                })}\\n              </div>\\n            );\\n          })}\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/draggable-event.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useDraggable } from \\\"@dnd-kit/core\\\";\\nimport { CSS } from \\\"@dnd-kit/utilities\\\";\\nimport { differenceInDays } from \\\"date-fns\\\";\\nimport { useRef, useState } from \\\"react\\\";\\n\\nimport {\\n  type CalendarEvent,\\n  EventItem,\\n  useCalendarDnd,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\n\\ninterface DraggableEventProps {\\n  event: CalendarEvent;\\n  view: \\\"month\\\" | \\\"week\\\" | \\\"day\\\";\\n  showTime?: boolean;\\n  onClick?: (e: React.MouseEvent) => void;\\n  height?: number;\\n  isMultiDay?: boolean;\\n  multiDayWidth?: number;\\n  isFirstDay?: boolean;\\n  isLastDay?: boolean;\\n  \\\"aria-hidden\\\"?: boolean | \\\"true\\\" | \\\"false\\\";\\n}\\n\\nexport function DraggableEvent({\\n  event,\\n  view,\\n  showTime,\\n  onClick,\\n  height,\\n  isMultiDay,\\n  multiDayWidth,\\n  isFirstDay = true,\\n  isLastDay = true,\\n  \\\"aria-hidden\\\": ariaHidden,\\n}: DraggableEventProps) {\\n  const { activeId } = useCalendarDnd();\\n  const elementRef = useRef<HTMLDivElement>(null);\\n  const [dragHandlePosition, setDragHandlePosition] = useState<{\\n    x: number;\\n    y: number;\\n  } | null>(null);\\n\\n  // Check if this is a multi-day event\\n  const eventStart = new Date(event.start);\\n  const eventEnd = new Date(event.end);\\n  const isMultiDayEvent =\\n    isMultiDay || event.allDay || differenceInDays(eventEnd, eventStart) >= 1;\\n\\n  const { attributes, listeners, setNodeRef, transform, isDragging } =\\n    useDraggable({\\n      data: {\\n        dragHandlePosition,\\n        event,\\n        height: height || elementRef.current?.offsetHeight || null,\\n        isFirstDay,\\n        isLastDay,\\n        isMultiDay: isMultiDayEvent,\\n        multiDayWidth: multiDayWidth,\\n        view,\\n      },\\n      id: `${event.id}-${view}`,\\n    });\\n\\n  // Handle mouse down to track where on the event the user clicked\\n  const handleMouseDown = (e: React.MouseEvent) => {\\n    if (elementRef.current) {\\n      const rect = elementRef.current.getBoundingClientRect();\\n      setDragHandlePosition({\\n        x: e.clientX - rect.left,\\n        y: e.clientY - rect.top,\\n      });\\n    }\\n  };\\n\\n  // Don't render if this event is being dragged\\n  if (isDragging || activeId === `${event.id}-${view}`) {\\n    return (\\n      <div\\n        className=\\\"opacity-0\\\"\\n        ref={setNodeRef}\\n        style={{ height: height || \\\"auto\\\" }}\\n      />\\n    );\\n  }\\n\\n  const style = transform\\n    ? {\\n        height: height || \\\"auto\\\",\\n        transform: CSS.Translate.toString(transform),\\n        width:\\n          isMultiDayEvent && multiDayWidth ? `${multiDayWidth}%` : undefined,\\n      }\\n    : {\\n        height: height || \\\"auto\\\",\\n        width:\\n          isMultiDayEvent && multiDayWidth ? `${multiDayWidth}%` : undefined,\\n      };\\n\\n  // Handle touch start to track where on the event the user touched\\n  const handleTouchStart = (e: React.TouchEvent) => {\\n    if (elementRef.current) {\\n      const rect = elementRef.current.getBoundingClientRect();\\n      const touch = e.touches[0];\\n      if (touch) {\\n        setDragHandlePosition({\\n          x: touch.clientX - rect.left,\\n          y: touch.clientY - rect.top,\\n        });\\n      }\\n    }\\n  };\\n\\n  return (\\n    <div\\n      className=\\\"touch-none\\\"\\n      ref={(node) => {\\n        setNodeRef(node);\\n        if (elementRef) elementRef.current = node;\\n      }}\\n      style={style}\\n    >\\n      <EventItem\\n        aria-hidden={ariaHidden}\\n        dndAttributes={attributes}\\n        dndListeners={listeners}\\n        event={event}\\n        isDragging={isDragging}\\n        isFirstDay={isFirstDay}\\n        isLastDay={isLastDay}\\n        onClick={onClick}\\n        onMouseDown={handleMouseDown}\\n        onTouchStart={handleTouchStart}\\n        showTime={showTime}\\n        view={view}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/droppable-cell.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useDroppable } from \\\"@dnd-kit/core\\\";\\n\\nimport { useCalendarDnd } from \\\"@/registry/default/components/event-calendar\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\ninterface DroppableCellProps {\\n  id: string;\\n  date: Date;\\n  time?: number; // For week/day views, represents hours (e.g., 9.25 for 9:15)\\n  children?: React.ReactNode;\\n  className?: string;\\n  onClick?: () => void;\\n}\\n\\nexport function DroppableCell({\\n  id,\\n  date,\\n  time,\\n  children,\\n  className,\\n  onClick,\\n}: DroppableCellProps) {\\n  const { activeEvent } = useCalendarDnd();\\n\\n  const { setNodeRef, isOver } = useDroppable({\\n    data: {\\n      date,\\n      time,\\n    },\\n    id,\\n  });\\n\\n  // Format time for display in tooltip (only for debugging)\\n  const formattedTime =\\n    time !== undefined\\n      ? `${Math.floor(time)}:${Math.round((time - Math.floor(time)) * 60)\\n          .toString()\\n          .padStart(2, \\\"0\\\")}`\\n      : null;\\n\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex h-full flex-col overflow-hidden px-0.5 py-1 data-dragging:bg-accent sm:px-1\\\",\\n        className,\\n      )}\\n      data-dragging={isOver && activeEvent ? true : undefined}\\n      onClick={onClick}\\n      ref={setNodeRef}\\n      title={formattedTime ? `${formattedTime}` : undefined}\\n    >\\n      {children}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/event-dialog.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RiCalendarLine, RiDeleteBinLine } from \\\"@remixicon/react\\\";\\nimport { format, isBefore } from \\\"date-fns\\\";\\nimport { useCallback, useEffect, useMemo, useState } from \\\"react\\\";\\n\\nimport type {\\n  CalendarEvent,\\n  EventColor,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\nimport {\\n  DefaultEndHour,\\n  DefaultStartHour,\\n  EndHour,\\n  StartHour,\\n} from \\\"@/registry/default/components/event-calendar/constants\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\ninterface EventDialogProps {\\n  event: CalendarEvent | null;\\n  isOpen: boolean;\\n  onClose: () => void;\\n  onSave: (event: CalendarEvent) => void;\\n  onDelete: (eventId: string) => void;\\n}\\n\\nexport function EventDialog({\\n  event,\\n  isOpen,\\n  onClose,\\n  onSave,\\n  onDelete,\\n}: EventDialogProps) {\\n  const [title, setTitle] = useState(\\\"\\\");\\n  const [description, setDescription] = useState(\\\"\\\");\\n  const [startDate, setStartDate] = useState<Date>(new Date());\\n  const [endDate, setEndDate] = useState<Date>(new Date());\\n  const [startTime, setStartTime] = useState(`${DefaultStartHour}:00`);\\n  const [endTime, setEndTime] = useState(`${DefaultEndHour}:00`);\\n  const [allDay, setAllDay] = useState(false);\\n  const [location, setLocation] = useState(\\\"\\\");\\n  const [color, setColor] = useState<EventColor>(\\\"sky\\\");\\n  const [error, setError] = useState<string | null>(null);\\n  const [startDateOpen, setStartDateOpen] = useState(false);\\n  const [endDateOpen, setEndDateOpen] = useState(false);\\n\\n  // Debug log to check what event is being passed\\n  useEffect(() => {\\n    console.log(\\\"EventDialog received event:\\\", event);\\n  }, [event]);\\n\\n  const resetForm = useCallback(() => {\\n    setTitle(\\\"\\\");\\n    setDescription(\\\"\\\");\\n    setStartDate(new Date());\\n    setEndDate(new Date());\\n    setStartTime(`${DefaultStartHour}:00`);\\n    setEndTime(`${DefaultEndHour}:00`);\\n    setAllDay(false);\\n    setLocation(\\\"\\\");\\n    setColor(\\\"sky\\\");\\n    setError(null);\\n  }, []);\\n\\n  const formatTimeForInput = useCallback((date: Date) => {\\n    const hours = date.getHours().toString().padStart(2, \\\"0\\\");\\n    const minutes = Math.floor(date.getMinutes() / 15) * 15;\\n    return `${hours}:${minutes.toString().padStart(2, \\\"0\\\")}`;\\n  }, []);\\n\\n  useEffect(() => {\\n    if (event) {\\n      setTitle(event.title || \\\"\\\");\\n      setDescription(event.description || \\\"\\\");\\n\\n      const start = new Date(event.start);\\n      const end = new Date(event.end);\\n\\n      setStartDate(start);\\n      setEndDate(end);\\n      setStartTime(formatTimeForInput(start));\\n      setEndTime(formatTimeForInput(end));\\n      setAllDay(event.allDay || false);\\n      setLocation(event.location || \\\"\\\");\\n      setColor((event.color as EventColor) || \\\"sky\\\");\\n      setError(null); // Reset error when opening dialog\\n    } else {\\n      resetForm();\\n    }\\n  }, [event, formatTimeForInput, resetForm]);\\n\\n  // Memoize time options so they're only calculated once\\n  const timeOptions = useMemo(() => {\\n    const options = [];\\n    for (let hour = StartHour; hour <= EndHour; hour++) {\\n      for (let minute = 0; minute < 60; minute += 15) {\\n        const formattedHour = hour.toString().padStart(2, \\\"0\\\");\\n        const formattedMinute = minute.toString().padStart(2, \\\"0\\\");\\n        const value = `${formattedHour}:${formattedMinute}`;\\n        // Use a fixed date to avoid unnecessary date object creations\\n        const date = new Date(2000, 0, 1, hour, minute);\\n        const label = format(date, \\\"h:mm a\\\");\\n        options.push({ label, value });\\n      }\\n    }\\n    return options;\\n  }, []); // Empty dependency array ensures this only runs once\\n\\n  const handleSave = () => {\\n    const start = new Date(startDate);\\n    const end = new Date(endDate);\\n\\n    if (!allDay) {\\n      const [startHours = 0, startMinutes = 0] = startTime\\n        .split(\\\":\\\")\\n        .map(Number);\\n      const [endHours = 0, endMinutes = 0] = endTime.split(\\\":\\\").map(Number);\\n\\n      if (\\n        startHours < StartHour ||\\n        startHours > EndHour ||\\n        endHours < StartHour ||\\n        endHours > EndHour\\n      ) {\\n        setError(\\n          `Selected time must be between ${StartHour}:00 and ${EndHour}:00`,\\n        );\\n        return;\\n      }\\n\\n      start.setHours(startHours, startMinutes, 0);\\n      end.setHours(endHours, endMinutes, 0);\\n    } else {\\n      start.setHours(0, 0, 0, 0);\\n      end.setHours(23, 59, 59, 999);\\n    }\\n\\n    // Validate that end date is not before start date\\n    if (isBefore(end, start)) {\\n      setError(\\\"End date cannot be before start date\\\");\\n      return;\\n    }\\n\\n    // Use generic title if empty\\n    const eventTitle = title.trim() ? title : \\\"(no title)\\\";\\n\\n    onSave({\\n      allDay,\\n      color,\\n      description,\\n      end,\\n      id: event?.id || \\\"\\\",\\n      location,\\n      start,\\n      title: eventTitle,\\n    });\\n  };\\n\\n  const handleDelete = () => {\\n    if (event?.id) {\\n      onDelete(event.id);\\n    }\\n  };\\n\\n  // Updated color options to match types.ts\\n  const colorOptions: Array<{\\n    value: EventColor;\\n    label: string;\\n    bgClass: string;\\n    borderClass: string;\\n  }> = [\\n    {\\n      bgClass: \\\"bg-sky-400 data-[state=checked]:bg-sky-400\\\",\\n      borderClass: \\\"border-sky-400 data-[state=checked]:border-sky-400\\\",\\n      label: \\\"Sky\\\",\\n      value: \\\"sky\\\",\\n    },\\n    {\\n      bgClass: \\\"bg-amber-400 data-[state=checked]:bg-amber-400\\\",\\n      borderClass: \\\"border-amber-400 data-[state=checked]:border-amber-400\\\",\\n      label: \\\"Amber\\\",\\n      value: \\\"amber\\\",\\n    },\\n    {\\n      bgClass: \\\"bg-violet-400 data-[state=checked]:bg-violet-400\\\",\\n      borderClass: \\\"border-violet-400 data-[state=checked]:border-violet-400\\\",\\n      label: \\\"Violet\\\",\\n      value: \\\"violet\\\",\\n    },\\n    {\\n      bgClass: \\\"bg-rose-400 data-[state=checked]:bg-rose-400\\\",\\n      borderClass: \\\"border-rose-400 data-[state=checked]:border-rose-400\\\",\\n      label: \\\"Rose\\\",\\n      value: \\\"rose\\\",\\n    },\\n    {\\n      bgClass: \\\"bg-emerald-400 data-[state=checked]:bg-emerald-400\\\",\\n      borderClass: \\\"border-emerald-400 data-[state=checked]:border-emerald-400\\\",\\n      label: \\\"Emerald\\\",\\n      value: \\\"emerald\\\",\\n    },\\n    {\\n      bgClass: \\\"bg-orange-400 data-[state=checked]:bg-orange-400\\\",\\n      borderClass: \\\"border-orange-400 data-[state=checked]:border-orange-400\\\",\\n      label: \\\"Orange\\\",\\n      value: \\\"orange\\\",\\n    },\\n  ];\\n\\n  return (\\n    <Dialog onOpenChange={(open) => !open && onClose()} open={isOpen}>\\n      <DialogContent className=\\\"sm:max-w-[425px]\\\">\\n        <DialogHeader>\\n          <DialogTitle>{event?.id ? \\\"Edit Event\\\" : \\\"Create Event\\\"}</DialogTitle>\\n          <DialogDescription className=\\\"sr-only\\\">\\n            {event?.id\\n              ? \\\"Edit the details of this event\\\"\\n              : \\\"Add a new event to your calendar\\\"}\\n          </DialogDescription>\\n        </DialogHeader>\\n        {error && (\\n          <div className=\\\"rounded-md bg-destructive/15 px-3 py-2 text-destructive text-sm\\\">\\n            {error}\\n          </div>\\n        )}\\n        <div className=\\\"grid gap-4 py-4\\\">\\n          <div className=\\\"*:not-first:mt-1.5\\\">\\n            <Label htmlFor=\\\"title\\\">Title</Label>\\n            <Input\\n              id=\\\"title\\\"\\n              onChange={(e) => setTitle(e.target.value)}\\n              value={title}\\n            />\\n          </div>\\n\\n          <div className=\\\"*:not-first:mt-1.5\\\">\\n            <Label htmlFor=\\\"description\\\">Description</Label>\\n            <Textarea\\n              id=\\\"description\\\"\\n              onChange={(e) => setDescription(e.target.value)}\\n              rows={3}\\n              value={description}\\n            />\\n          </div>\\n\\n          <div className=\\\"flex gap-4\\\">\\n            <div className=\\\"flex-1 *:not-first:mt-1.5\\\">\\n              <Label htmlFor=\\\"start-date\\\">Start Date</Label>\\n              <Popover onOpenChange={setStartDateOpen} open={startDateOpen}>\\n                <PopoverTrigger asChild>\\n                  <Button\\n                    className={cn(\\n                      \\\"group w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\",\\n                      !startDate && \\\"text-muted-foreground\\\",\\n                    )}\\n                    id=\\\"start-date\\\"\\n                    variant={\\\"outline\\\"}\\n                  >\\n                    <span\\n                      className={cn(\\n                        \\\"truncate\\\",\\n                        !startDate && \\\"text-muted-foreground\\\",\\n                      )}\\n                    >\\n                      {startDate ? format(startDate, \\\"PPP\\\") : \\\"Pick a date\\\"}\\n                    </span>\\n                    <RiCalendarLine\\n                      aria-hidden=\\\"true\\\"\\n                      className=\\\"shrink-0 text-muted-foreground/80\\\"\\n                      size={16}\\n                    />\\n                  </Button>\\n                </PopoverTrigger>\\n                <PopoverContent align=\\\"start\\\" className=\\\"w-auto p-2\\\">\\n                  <Calendar\\n                    defaultMonth={startDate}\\n                    mode=\\\"single\\\"\\n                    onSelect={(date) => {\\n                      if (date) {\\n                        setStartDate(date);\\n                        // If end date is before the new start date, update it to match the start date\\n                        if (isBefore(endDate, date)) {\\n                          setEndDate(date);\\n                        }\\n                        setError(null);\\n                        setStartDateOpen(false);\\n                      }\\n                    }}\\n                    selected={startDate}\\n                  />\\n                </PopoverContent>\\n              </Popover>\\n            </div>\\n\\n            {!allDay && (\\n              <div className=\\\"min-w-28 *:not-first:mt-1.5\\\">\\n                <Label htmlFor=\\\"start-time\\\">Start Time</Label>\\n                <Select onValueChange={setStartTime} value={startTime}>\\n                  <SelectTrigger id=\\\"start-time\\\">\\n                    <SelectValue placeholder=\\\"Select time\\\" />\\n                  </SelectTrigger>\\n                  <SelectContent>\\n                    {timeOptions.map((option) => (\\n                      <SelectItem key={option.value} value={option.value}>\\n                        {option.label}\\n                      </SelectItem>\\n                    ))}\\n                  </SelectContent>\\n                </Select>\\n              </div>\\n            )}\\n          </div>\\n\\n          <div className=\\\"flex gap-4\\\">\\n            <div className=\\\"flex-1 *:not-first:mt-1.5\\\">\\n              <Label htmlFor=\\\"end-date\\\">End Date</Label>\\n              <Popover onOpenChange={setEndDateOpen} open={endDateOpen}>\\n                <PopoverTrigger asChild>\\n                  <Button\\n                    className={cn(\\n                      \\\"group w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\\\",\\n                      !endDate && \\\"text-muted-foreground\\\",\\n                    )}\\n                    id=\\\"end-date\\\"\\n                    variant={\\\"outline\\\"}\\n                  >\\n                    <span\\n                      className={cn(\\n                        \\\"truncate\\\",\\n                        !endDate && \\\"text-muted-foreground\\\",\\n                      )}\\n                    >\\n                      {endDate ? format(endDate, \\\"PPP\\\") : \\\"Pick a date\\\"}\\n                    </span>\\n                    <RiCalendarLine\\n                      aria-hidden=\\\"true\\\"\\n                      className=\\\"shrink-0 text-muted-foreground/80\\\"\\n                      size={16}\\n                    />\\n                  </Button>\\n                </PopoverTrigger>\\n                <PopoverContent align=\\\"start\\\" className=\\\"w-auto p-2\\\">\\n                  <Calendar\\n                    defaultMonth={endDate}\\n                    disabled={{ before: startDate }}\\n                    mode=\\\"single\\\"\\n                    onSelect={(date) => {\\n                      if (date) {\\n                        setEndDate(date);\\n                        setError(null);\\n                        setEndDateOpen(false);\\n                      }\\n                    }}\\n                    selected={endDate}\\n                  />\\n                </PopoverContent>\\n              </Popover>\\n            </div>\\n\\n            {!allDay && (\\n              <div className=\\\"min-w-28 *:not-first:mt-1.5\\\">\\n                <Label htmlFor=\\\"end-time\\\">End Time</Label>\\n                <Select onValueChange={setEndTime} value={endTime}>\\n                  <SelectTrigger id=\\\"end-time\\\">\\n                    <SelectValue placeholder=\\\"Select time\\\" />\\n                  </SelectTrigger>\\n                  <SelectContent>\\n                    {timeOptions.map((option) => (\\n                      <SelectItem key={option.value} value={option.value}>\\n                        {option.label}\\n                      </SelectItem>\\n                    ))}\\n                  </SelectContent>\\n                </Select>\\n              </div>\\n            )}\\n          </div>\\n\\n          <div className=\\\"flex items-center gap-2\\\">\\n            <Checkbox\\n              checked={allDay}\\n              id=\\\"all-day\\\"\\n              onCheckedChange={(checked) => setAllDay(checked === true)}\\n            />\\n            <Label htmlFor=\\\"all-day\\\">All day</Label>\\n          </div>\\n\\n          <div className=\\\"*:not-first:mt-1.5\\\">\\n            <Label htmlFor=\\\"location\\\">Location</Label>\\n            <Input\\n              id=\\\"location\\\"\\n              onChange={(e) => setLocation(e.target.value)}\\n              value={location}\\n            />\\n          </div>\\n          <fieldset className=\\\"space-y-4\\\">\\n            <legend className=\\\"font-medium text-foreground text-sm leading-none\\\">\\n              Etiquette\\n            </legend>\\n            <RadioGroup\\n              className=\\\"flex gap-1.5\\\"\\n              defaultValue={colorOptions[0]?.value}\\n              onValueChange={(value: EventColor) => setColor(value)}\\n              value={color}\\n            >\\n              {colorOptions.map((colorOption) => (\\n                <RadioGroupItem\\n                  aria-label={colorOption.label}\\n                  className={cn(\\n                    \\\"size-6 shadow-none\\\",\\n                    colorOption.bgClass,\\n                    colorOption.borderClass,\\n                  )}\\n                  id={`color-${colorOption.value}`}\\n                  key={colorOption.value}\\n                  value={colorOption.value}\\n                />\\n              ))}\\n            </RadioGroup>\\n          </fieldset>\\n        </div>\\n        <DialogFooter className=\\\"flex-row sm:justify-between\\\">\\n          {event?.id && (\\n            <Button\\n              aria-label=\\\"Delete event\\\"\\n              onClick={handleDelete}\\n              size=\\\"icon\\\"\\n              variant=\\\"outline\\\"\\n            >\\n              <RiDeleteBinLine aria-hidden=\\\"true\\\" size={16} />\\n            </Button>\\n          )}\\n          <div className=\\\"flex flex-1 justify-end gap-2\\\">\\n            <Button onClick={onClose} variant=\\\"outline\\\">\\n              Cancel\\n            </Button>\\n            <Button onClick={handleSave}>Save</Button>\\n          </div>\\n        </DialogFooter>\\n      </DialogContent>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/event-item.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { DraggableAttributes } from \\\"@dnd-kit/core\\\";\\nimport type { SyntheticListenerMap } from \\\"@dnd-kit/core/dist/hooks/utilities\\\";\\nimport { differenceInMinutes, format, getMinutes, isPast } from \\\"date-fns\\\";\\nimport { useMemo } from \\\"react\\\";\\n\\nimport {\\n  type CalendarEvent,\\n  getBorderRadiusClasses,\\n  getEventColorClasses,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\n// Using date-fns format with custom formatting:\\n// 'h' - hours (1-12)\\n// 'a' - am/pm\\n// ':mm' - minutes with leading zero (only if the token 'mm' is present)\\nconst formatTimeWithOptionalMinutes = (date: Date) => {\\n  return format(date, getMinutes(date) === 0 ? \\\"ha\\\" : \\\"h:mma\\\").toLowerCase();\\n};\\n\\ninterface EventWrapperProps {\\n  event: CalendarEvent;\\n  isFirstDay?: boolean;\\n  isLastDay?: boolean;\\n  isDragging?: boolean;\\n  onClick?: (e: React.MouseEvent) => void;\\n  className?: string;\\n  children: React.ReactNode;\\n  currentTime?: Date;\\n  dndListeners?: SyntheticListenerMap;\\n  dndAttributes?: DraggableAttributes;\\n  onMouseDown?: (e: React.MouseEvent) => void;\\n  onTouchStart?: (e: React.TouchEvent) => void;\\n}\\n\\n// Shared wrapper component for event styling\\nfunction EventWrapper({\\n  event,\\n  isFirstDay = true,\\n  isLastDay = true,\\n  isDragging,\\n  onClick,\\n  className,\\n  children,\\n  currentTime,\\n  dndListeners,\\n  dndAttributes,\\n  onMouseDown,\\n  onTouchStart,\\n}: EventWrapperProps) {\\n  // Always use the currentTime (if provided) to determine if the event is in the past\\n  const displayEnd = currentTime\\n    ? new Date(\\n        new Date(currentTime).getTime() +\\n          (new Date(event.end).getTime() - new Date(event.start).getTime()),\\n      )\\n    : new Date(event.end);\\n\\n  const isEventInPast = isPast(displayEnd);\\n\\n  return (\\n    <button\\n      className={cn(\\n        \\\"flex size-full select-none overflow-hidden px-1 text-left font-medium outline-none backdrop-blur-md transition focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-dragging:cursor-grabbing data-past-event:line-through data-dragging:shadow-lg sm:px-2\\\",\\n        getEventColorClasses(event.color),\\n        getBorderRadiusClasses(isFirstDay, isLastDay),\\n        className,\\n      )}\\n      data-dragging={isDragging || undefined}\\n      data-past-event={isEventInPast || undefined}\\n      onClick={onClick}\\n      onMouseDown={onMouseDown}\\n      onTouchStart={onTouchStart}\\n      type=\\\"button\\\"\\n      {...dndListeners}\\n      {...dndAttributes}\\n    >\\n      {children}\\n    </button>\\n  );\\n}\\n\\ninterface EventItemProps {\\n  event: CalendarEvent;\\n  view: \\\"month\\\" | \\\"week\\\" | \\\"day\\\" | \\\"agenda\\\";\\n  isDragging?: boolean;\\n  onClick?: (e: React.MouseEvent) => void;\\n  showTime?: boolean;\\n  currentTime?: Date; // For updating time during drag\\n  isFirstDay?: boolean;\\n  isLastDay?: boolean;\\n  children?: React.ReactNode;\\n  className?: string;\\n  dndListeners?: SyntheticListenerMap;\\n  dndAttributes?: DraggableAttributes;\\n  onMouseDown?: (e: React.MouseEvent) => void;\\n  onTouchStart?: (e: React.TouchEvent) => void;\\n}\\n\\nexport function EventItem({\\n  event,\\n  view,\\n  isDragging,\\n  onClick,\\n  showTime,\\n  currentTime,\\n  isFirstDay = true,\\n  isLastDay = true,\\n  children,\\n  className,\\n  dndListeners,\\n  dndAttributes,\\n  onMouseDown,\\n  onTouchStart,\\n}: EventItemProps) {\\n  const eventColor = event.color;\\n\\n  // Use the provided currentTime (for dragging) or the event's actual time\\n  const displayStart = useMemo(() => {\\n    return currentTime || new Date(event.start);\\n  }, [currentTime, event.start]);\\n\\n  const displayEnd = useMemo(() => {\\n    return currentTime\\n      ? new Date(\\n          new Date(currentTime).getTime() +\\n            (new Date(event.end).getTime() - new Date(event.start).getTime()),\\n        )\\n      : new Date(event.end);\\n  }, [currentTime, event.start, event.end]);\\n\\n  // Calculate event duration in minutes\\n  const durationMinutes = useMemo(() => {\\n    return differenceInMinutes(displayEnd, displayStart);\\n  }, [displayStart, displayEnd]);\\n\\n  const getEventTime = () => {\\n    if (event.allDay) return \\\"All day\\\";\\n\\n    // For short events (less than 45 minutes), only show start time\\n    if (durationMinutes < 45) {\\n      return formatTimeWithOptionalMinutes(displayStart);\\n    }\\n\\n    // For longer events, show both start and end time\\n    return `${formatTimeWithOptionalMinutes(displayStart)} - ${formatTimeWithOptionalMinutes(displayEnd)}`;\\n  };\\n\\n  if (view === \\\"month\\\") {\\n    return (\\n      <EventWrapper\\n        className={cn(\\n          \\\"mt-[var(--event-gap)] h-[var(--event-height)] items-center text-[10px] sm:text-xs\\\",\\n          className,\\n        )}\\n        currentTime={currentTime}\\n        dndAttributes={dndAttributes}\\n        dndListeners={dndListeners}\\n        event={event}\\n        isDragging={isDragging}\\n        isFirstDay={isFirstDay}\\n        isLastDay={isLastDay}\\n        onClick={onClick}\\n        onMouseDown={onMouseDown}\\n        onTouchStart={onTouchStart}\\n      >\\n        {children || (\\n          <span className=\\\"truncate\\\">\\n            {!event.allDay && (\\n              <span className=\\\"truncate font-normal opacity-70 sm:text-[11px]\\\">\\n                {formatTimeWithOptionalMinutes(displayStart)}{\\\" \\\"}\\n              </span>\\n            )}\\n            {event.title}\\n          </span>\\n        )}\\n      </EventWrapper>\\n    );\\n  }\\n\\n  if (view === \\\"week\\\" || view === \\\"day\\\") {\\n    return (\\n      <EventWrapper\\n        className={cn(\\n          \\\"py-1\\\",\\n          durationMinutes < 45 ? \\\"items-center\\\" : \\\"flex-col\\\",\\n          view === \\\"week\\\" ? \\\"text-[10px] sm:text-xs\\\" : \\\"text-xs\\\",\\n          className,\\n        )}\\n        currentTime={currentTime}\\n        dndAttributes={dndAttributes}\\n        dndListeners={dndListeners}\\n        event={event}\\n        isDragging={isDragging}\\n        isFirstDay={isFirstDay}\\n        isLastDay={isLastDay}\\n        onClick={onClick}\\n        onMouseDown={onMouseDown}\\n        onTouchStart={onTouchStart}\\n      >\\n        {durationMinutes < 45 ? (\\n          <div className=\\\"truncate\\\">\\n            {event.title}{\\\" \\\"}\\n            {showTime && (\\n              <span className=\\\"opacity-70\\\">\\n                {formatTimeWithOptionalMinutes(displayStart)}\\n              </span>\\n            )}\\n          </div>\\n        ) : (\\n          <>\\n            <div className=\\\"truncate font-medium\\\">{event.title}</div>\\n            {showTime && (\\n              <div className=\\\"truncate font-normal opacity-70 sm:text-[11px]\\\">\\n                {getEventTime()}\\n              </div>\\n            )}\\n          </>\\n        )}\\n      </EventWrapper>\\n    );\\n  }\\n\\n  // Agenda view - kept separate since it's significantly different\\n  return (\\n    <button\\n      className={cn(\\n        \\\"flex w-full flex-col gap-1 rounded p-2 text-left outline-none transition focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-past-event:line-through data-past-event:opacity-90\\\",\\n        getEventColorClasses(eventColor),\\n        className,\\n      )}\\n      data-past-event={isPast(new Date(event.end)) || undefined}\\n      onClick={onClick}\\n      onMouseDown={onMouseDown}\\n      onTouchStart={onTouchStart}\\n      type=\\\"button\\\"\\n      {...dndListeners}\\n      {...dndAttributes}\\n    >\\n      <div className=\\\"font-medium text-sm\\\">{event.title}</div>\\n      <div className=\\\"text-xs opacity-70\\\">\\n        {event.allDay ? (\\n          <span>All day</span>\\n        ) : (\\n          <span className=\\\"uppercase\\\">\\n            {formatTimeWithOptionalMinutes(displayStart)} -{\\\" \\\"}\\n            {formatTimeWithOptionalMinutes(displayEnd)}\\n          </span>\\n        )}\\n        {event.location && (\\n          <>\\n            <span className=\\\"px-1 opacity-35\\\"> · </span>\\n            <span>{event.location}</span>\\n          </>\\n        )}\\n      </div>\\n      {event.description && (\\n        <div className=\\\"my-1 text-xs opacity-90\\\">{event.description}</div>\\n      )}\\n    </button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/events-popup.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format, isSameDay } from \\\"date-fns\\\";\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useMemo, useRef } from \\\"react\\\";\\n\\nimport {\\n  type CalendarEvent,\\n  EventItem,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\n\\ninterface EventsPopupProps {\\n  date: Date;\\n  events: CalendarEvent[];\\n  position: { top: number; left: number };\\n  onClose: () => void;\\n  onEventSelect: (event: CalendarEvent) => void;\\n}\\n\\nexport function EventsPopup({\\n  date,\\n  events,\\n  position,\\n  onClose,\\n  onEventSelect,\\n}: EventsPopupProps) {\\n  const popupRef = useRef<HTMLDivElement>(null);\\n\\n  // Handle click outside to close popup\\n  useEffect(() => {\\n    const handleClickOutside = (event: MouseEvent) => {\\n      if (\\n        popupRef.current &&\\n        !popupRef.current.contains(event.target as Node)\\n      ) {\\n        onClose();\\n      }\\n    };\\n\\n    document.addEventListener(\\\"mousedown\\\", handleClickOutside);\\n    return () => {\\n      document.removeEventListener(\\\"mousedown\\\", handleClickOutside);\\n    };\\n  }, [onClose]);\\n\\n  // Handle escape key to close popup\\n  useEffect(() => {\\n    const handleEscKey = (event: KeyboardEvent) => {\\n      if (event.key === \\\"Escape\\\") {\\n        onClose();\\n      }\\n    };\\n\\n    document.addEventListener(\\\"keydown\\\", handleEscKey);\\n    return () => {\\n      document.removeEventListener(\\\"keydown\\\", handleEscKey);\\n    };\\n  }, [onClose]);\\n\\n  const handleEventClick = (event: CalendarEvent) => {\\n    onEventSelect(event);\\n    onClose();\\n  };\\n\\n  // Adjust position to ensure popup stays within viewport\\n  const adjustedPosition = useMemo(() => {\\n    const positionCopy = { ...position };\\n\\n    // Check if we need to adjust the position to fit in the viewport\\n    if (popupRef.current) {\\n      const rect = popupRef.current.getBoundingClientRect();\\n      const viewportWidth = window.innerWidth;\\n      const viewportHeight = window.innerHeight;\\n\\n      // Adjust horizontally if needed\\n      if (positionCopy.left + rect.width > viewportWidth) {\\n        positionCopy.left = Math.max(0, viewportWidth - rect.width);\\n      }\\n\\n      // Adjust vertically if needed\\n      if (positionCopy.top + rect.height > viewportHeight) {\\n        positionCopy.top = Math.max(0, viewportHeight - rect.height);\\n      }\\n    }\\n\\n    return positionCopy;\\n  }, [position]);\\n\\n  return (\\n    <div\\n      className=\\\"absolute z-50 max-h-96 w-80 overflow-auto rounded-md border bg-background shadow-lg\\\"\\n      ref={popupRef}\\n      style={{\\n        left: `${adjustedPosition.left}px`,\\n        top: `${adjustedPosition.top}px`,\\n      }}\\n    >\\n      <div className=\\\"sticky top-0 flex items-center justify-between border-b bg-background p-3\\\">\\n        <h3 className=\\\"font-medium\\\">{format(date, \\\"d MMMM yyyy\\\")}</h3>\\n        <button\\n          aria-label=\\\"Close\\\"\\n          className=\\\"rounded-full p-1 hover:bg-muted\\\"\\n          onClick={onClose}\\n          type=\\\"button\\\"\\n        >\\n          <XIcon className=\\\"h-4 w-4\\\" />\\n        </button>\\n      </div>\\n\\n      <div className=\\\"space-y-2 p-3\\\">\\n        {events.length === 0 ? (\\n          <div className=\\\"py-2 text-muted-foreground text-sm\\\">No events</div>\\n        ) : (\\n          events.map((event) => {\\n            const eventStart = new Date(event.start);\\n            const eventEnd = new Date(event.end);\\n            const isFirstDay = isSameDay(date, eventStart);\\n            const isLastDay = isSameDay(date, eventEnd);\\n\\n            return (\\n              <div\\n                className=\\\"cursor-pointer\\\"\\n                key={event.id}\\n                onClick={() => handleEventClick(event)}\\n              >\\n                <EventItem\\n                  event={event}\\n                  isFirstDay={isFirstDay}\\n                  isLastDay={isLastDay}\\n                  view=\\\"agenda\\\"\\n                />\\n              </div>\\n            );\\n          })\\n        )}\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/event-calendar.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RiCalendarCheckLine } from \\\"@remixicon/react\\\";\\nimport {\\n  addDays,\\n  addMonths,\\n  addWeeks,\\n  endOfWeek,\\n  format,\\n  isSameMonth,\\n  startOfWeek,\\n  subMonths,\\n  subWeeks,\\n} from \\\"date-fns\\\";\\nimport {\\n  ChevronDownIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  PlusIcon,\\n} from \\\"lucide-react\\\";\\nimport { useEffect, useMemo, useState } from \\\"react\\\";\\nimport { toast } from \\\"sonner\\\";\\n\\nimport {\\n  AgendaDaysToShow,\\n  AgendaView,\\n  addHoursToDate,\\n  CalendarDndProvider,\\n  type CalendarEvent,\\n  type CalendarView,\\n  DayView,\\n  EventDialog,\\n  EventGap,\\n  EventHeight,\\n  MonthView,\\n  WeekCellsHeight,\\n  WeekView,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuShortcut,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport interface EventCalendarProps {\\n  events?: CalendarEvent[];\\n  onEventAdd?: (event: CalendarEvent) => void;\\n  onEventUpdate?: (event: CalendarEvent) => void;\\n  onEventDelete?: (eventId: string) => void;\\n  className?: string;\\n  initialView?: CalendarView;\\n}\\n\\nexport function EventCalendar({\\n  events = [],\\n  onEventAdd,\\n  onEventUpdate,\\n  onEventDelete,\\n  className,\\n  initialView = \\\"month\\\",\\n}: EventCalendarProps) {\\n  const [currentDate, setCurrentDate] = useState(new Date());\\n  const [view, setView] = useState<CalendarView>(initialView);\\n  const [isEventDialogOpen, setIsEventDialogOpen] = useState(false);\\n  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(\\n    null,\\n  );\\n\\n  // Add keyboard shortcuts for view switching\\n  useEffect(() => {\\n    const handleKeyDown = (e: KeyboardEvent) => {\\n      // Skip if user is typing in an input, textarea or contentEditable element\\n      // or if the event dialog is open\\n      if (\\n        isEventDialogOpen ||\\n        e.target instanceof HTMLInputElement ||\\n        e.target instanceof HTMLTextAreaElement ||\\n        (e.target instanceof HTMLElement && e.target.isContentEditable)\\n      ) {\\n        return;\\n      }\\n\\n      switch (e.key.toLowerCase()) {\\n        case \\\"m\\\":\\n          setView(\\\"month\\\");\\n          break;\\n        case \\\"w\\\":\\n          setView(\\\"week\\\");\\n          break;\\n        case \\\"d\\\":\\n          setView(\\\"day\\\");\\n          break;\\n        case \\\"a\\\":\\n          setView(\\\"agenda\\\");\\n          break;\\n      }\\n    };\\n\\n    window.addEventListener(\\\"keydown\\\", handleKeyDown);\\n\\n    return () => {\\n      window.removeEventListener(\\\"keydown\\\", handleKeyDown);\\n    };\\n  }, [isEventDialogOpen]);\\n\\n  const handlePrevious = () => {\\n    if (view === \\\"month\\\") {\\n      setCurrentDate(subMonths(currentDate, 1));\\n    } else if (view === \\\"week\\\") {\\n      setCurrentDate(subWeeks(currentDate, 1));\\n    } else if (view === \\\"day\\\") {\\n      setCurrentDate(addDays(currentDate, -1));\\n    } else if (view === \\\"agenda\\\") {\\n      // For agenda view, go back 30 days (a full month)\\n      setCurrentDate(addDays(currentDate, -AgendaDaysToShow));\\n    }\\n  };\\n\\n  const handleNext = () => {\\n    if (view === \\\"month\\\") {\\n      setCurrentDate(addMonths(currentDate, 1));\\n    } else if (view === \\\"week\\\") {\\n      setCurrentDate(addWeeks(currentDate, 1));\\n    } else if (view === \\\"day\\\") {\\n      setCurrentDate(addDays(currentDate, 1));\\n    } else if (view === \\\"agenda\\\") {\\n      // For agenda view, go forward 30 days (a full month)\\n      setCurrentDate(addDays(currentDate, AgendaDaysToShow));\\n    }\\n  };\\n\\n  const handleToday = () => {\\n    setCurrentDate(new Date());\\n  };\\n\\n  const handleEventSelect = (event: CalendarEvent) => {\\n    console.log(\\\"Event selected:\\\", event); // Debug log\\n    setSelectedEvent(event);\\n    setIsEventDialogOpen(true);\\n  };\\n\\n  const handleEventCreate = (startTime: Date) => {\\n    console.log(\\\"Creating new event at:\\\", startTime); // Debug log\\n\\n    // Snap to 15-minute intervals\\n    const minutes = startTime.getMinutes();\\n    const remainder = minutes % 15;\\n    if (remainder !== 0) {\\n      if (remainder < 7.5) {\\n        // Round down to nearest 15 min\\n        startTime.setMinutes(minutes - remainder);\\n      } else {\\n        // Round up to nearest 15 min\\n        startTime.setMinutes(minutes + (15 - remainder));\\n      }\\n      startTime.setSeconds(0);\\n      startTime.setMilliseconds(0);\\n    }\\n\\n    const newEvent: CalendarEvent = {\\n      allDay: false,\\n      end: addHoursToDate(startTime, 1),\\n      id: \\\"\\\",\\n      start: startTime,\\n      title: \\\"\\\",\\n    };\\n    setSelectedEvent(newEvent);\\n    setIsEventDialogOpen(true);\\n  };\\n\\n  const handleEventSave = (event: CalendarEvent) => {\\n    if (event.id) {\\n      onEventUpdate?.(event);\\n      // Show toast notification when an event is updated\\n      toast(`Event \\\"${event.title}\\\" updated`, {\\n        description: format(new Date(event.start), \\\"MMM d, yyyy\\\"),\\n        position: \\\"bottom-left\\\",\\n      });\\n    } else {\\n      onEventAdd?.({\\n        ...event,\\n        id: Math.random().toString(36).substring(2, 11),\\n      });\\n      // Show toast notification when an event is added\\n      toast(`Event \\\"${event.title}\\\" added`, {\\n        description: format(new Date(event.start), \\\"MMM d, yyyy\\\"),\\n        position: \\\"bottom-left\\\",\\n      });\\n    }\\n    setIsEventDialogOpen(false);\\n    setSelectedEvent(null);\\n  };\\n\\n  const handleEventDelete = (eventId: string) => {\\n    const deletedEvent = events.find((e) => e.id === eventId);\\n    onEventDelete?.(eventId);\\n    setIsEventDialogOpen(false);\\n    setSelectedEvent(null);\\n\\n    // Show toast notification when an event is deleted\\n    if (deletedEvent) {\\n      toast(`Event \\\"${deletedEvent.title}\\\" deleted`, {\\n        description: format(new Date(deletedEvent.start), \\\"MMM d, yyyy\\\"),\\n        position: \\\"bottom-left\\\",\\n      });\\n    }\\n  };\\n\\n  const handleEventUpdate = (updatedEvent: CalendarEvent) => {\\n    onEventUpdate?.(updatedEvent);\\n\\n    // Show toast notification when an event is updated via drag and drop\\n    toast(`Event \\\"${updatedEvent.title}\\\" moved`, {\\n      description: format(new Date(updatedEvent.start), \\\"MMM d, yyyy\\\"),\\n      position: \\\"bottom-left\\\",\\n    });\\n  };\\n\\n  const viewTitle = useMemo(() => {\\n    if (view === \\\"month\\\") {\\n      return format(currentDate, \\\"MMMM yyyy\\\");\\n    }\\n    if (view === \\\"week\\\") {\\n      const start = startOfWeek(currentDate, { weekStartsOn: 0 });\\n      const end = endOfWeek(currentDate, { weekStartsOn: 0 });\\n      if (isSameMonth(start, end)) {\\n        return format(start, \\\"MMMM yyyy\\\");\\n      }\\n      return `${format(start, \\\"MMM\\\")} - ${format(end, \\\"MMM yyyy\\\")}`;\\n    }\\n    if (view === \\\"day\\\") {\\n      return (\\n        <>\\n          <span aria-hidden=\\\"true\\\" className=\\\"min-[480px]:hidden\\\">\\n            {format(currentDate, \\\"MMM d, yyyy\\\")}\\n          </span>\\n          <span aria-hidden=\\\"true\\\" className=\\\"max-[479px]:hidden min-md:hidden\\\">\\n            {format(currentDate, \\\"MMMM d, yyyy\\\")}\\n          </span>\\n          <span className=\\\"max-md:hidden\\\">\\n            {format(currentDate, \\\"EEE MMMM d, yyyy\\\")}\\n          </span>\\n        </>\\n      );\\n    }\\n    if (view === \\\"agenda\\\") {\\n      // Show the month range for agenda view\\n      const start = currentDate;\\n      const end = addDays(currentDate, AgendaDaysToShow - 1);\\n\\n      if (isSameMonth(start, end)) {\\n        return format(start, \\\"MMMM yyyy\\\");\\n      }\\n      return `${format(start, \\\"MMM\\\")} - ${format(end, \\\"MMM yyyy\\\")}`;\\n    }\\n    return format(currentDate, \\\"MMMM yyyy\\\");\\n  }, [currentDate, view]);\\n\\n  return (\\n    <div\\n      className=\\\"flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1\\\"\\n      style={\\n        {\\n          \\\"--event-gap\\\": `${EventGap}px`,\\n          \\\"--event-height\\\": `${EventHeight}px`,\\n          \\\"--week-cells-height\\\": `${WeekCellsHeight}px`,\\n        } as React.CSSProperties\\n      }\\n    >\\n      <CalendarDndProvider onEventUpdate={handleEventUpdate}>\\n        <div\\n          className={cn(\\n            \\\"flex items-center justify-between p-2 sm:p-4\\\",\\n            className,\\n          )}\\n        >\\n          <div className=\\\"flex items-center gap-1 sm:gap-4\\\">\\n            <Button\\n              className=\\\"max-[479px]:aspect-square max-[479px]:p-0!\\\"\\n              onClick={handleToday}\\n              variant=\\\"outline\\\"\\n            >\\n              <RiCalendarCheckLine\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"min-[480px]:hidden\\\"\\n                size={16}\\n              />\\n              <span className=\\\"max-[479px]:sr-only\\\">Today</span>\\n            </Button>\\n            <div className=\\\"flex items-center sm:gap-2\\\">\\n              <Button\\n                aria-label=\\\"Previous\\\"\\n                onClick={handlePrevious}\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <ChevronLeftIcon aria-hidden=\\\"true\\\" size={16} />\\n              </Button>\\n              <Button\\n                aria-label=\\\"Next\\\"\\n                onClick={handleNext}\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <ChevronRightIcon aria-hidden=\\\"true\\\" size={16} />\\n              </Button>\\n            </div>\\n            <h2 className=\\\"font-semibold text-sm sm:text-lg md:text-xl\\\">\\n              {viewTitle}\\n            </h2>\\n          </div>\\n          <div className=\\\"flex items-center gap-2\\\">\\n            <DropdownMenu>\\n              <DropdownMenuTrigger asChild>\\n                <Button className=\\\"gap-1.5 max-[479px]:h-8\\\" variant=\\\"outline\\\">\\n                  <span>\\n                    <span aria-hidden=\\\"true\\\" className=\\\"min-[480px]:hidden\\\">\\n                      {view.charAt(0).toUpperCase()}\\n                    </span>\\n                    <span className=\\\"max-[479px]:sr-only\\\">\\n                      {view.charAt(0).toUpperCase() + view.slice(1)}\\n                    </span>\\n                  </span>\\n                  <ChevronDownIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"-me-1 opacity-60\\\"\\n                    size={16}\\n                  />\\n                </Button>\\n              </DropdownMenuTrigger>\\n              <DropdownMenuContent align=\\\"end\\\" className=\\\"min-w-32\\\">\\n                <DropdownMenuItem onClick={() => setView(\\\"month\\\")}>\\n                  Month <DropdownMenuShortcut>M</DropdownMenuShortcut>\\n                </DropdownMenuItem>\\n                <DropdownMenuItem onClick={() => setView(\\\"week\\\")}>\\n                  Week <DropdownMenuShortcut>W</DropdownMenuShortcut>\\n                </DropdownMenuItem>\\n                <DropdownMenuItem onClick={() => setView(\\\"day\\\")}>\\n                  Day <DropdownMenuShortcut>D</DropdownMenuShortcut>\\n                </DropdownMenuItem>\\n                <DropdownMenuItem onClick={() => setView(\\\"agenda\\\")}>\\n                  Agenda <DropdownMenuShortcut>A</DropdownMenuShortcut>\\n                </DropdownMenuItem>\\n              </DropdownMenuContent>\\n            </DropdownMenu>\\n            <Button\\n              className=\\\"max-[479px]:aspect-square max-[479px]:p-0!\\\"\\n              onClick={() => {\\n                setSelectedEvent(null); // Ensure we're creating a new event\\n                setIsEventDialogOpen(true);\\n              }}\\n              size=\\\"sm\\\"\\n            >\\n              <PlusIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"sm:-ms-1 opacity-60\\\"\\n                size={16}\\n              />\\n              <span className=\\\"max-sm:sr-only\\\">New event</span>\\n            </Button>\\n          </div>\\n        </div>\\n\\n        <div className=\\\"flex flex-1 flex-col\\\">\\n          {view === \\\"month\\\" && (\\n            <MonthView\\n              currentDate={currentDate}\\n              events={events}\\n              onEventCreate={handleEventCreate}\\n              onEventSelect={handleEventSelect}\\n            />\\n          )}\\n          {view === \\\"week\\\" && (\\n            <WeekView\\n              currentDate={currentDate}\\n              events={events}\\n              onEventCreate={handleEventCreate}\\n              onEventSelect={handleEventSelect}\\n            />\\n          )}\\n          {view === \\\"day\\\" && (\\n            <DayView\\n              currentDate={currentDate}\\n              events={events}\\n              onEventCreate={handleEventCreate}\\n              onEventSelect={handleEventSelect}\\n            />\\n          )}\\n          {view === \\\"agenda\\\" && (\\n            <AgendaView\\n              currentDate={currentDate}\\n              events={events}\\n              onEventSelect={handleEventSelect}\\n            />\\n          )}\\n        </div>\\n\\n        <EventDialog\\n          event={selectedEvent}\\n          isOpen={isEventDialogOpen}\\n          onClose={() => {\\n            setIsEventDialogOpen(false);\\n            setSelectedEvent(null);\\n          }}\\n          onDelete={handleEventDelete}\\n          onSave={handleEventSave}\\n        />\\n      </CalendarDndProvider>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/index.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\n// Component exports\\n\\nexport { AgendaView } from \\\"./agenda-view\\\";\\nexport { CalendarDndProvider, useCalendarDnd } from \\\"./calendar-dnd-context\\\";\\n// Constants and utility exports\\nexport * from \\\"./constants\\\";\\nexport { DayView } from \\\"./day-view\\\";\\nexport { DraggableEvent } from \\\"./draggable-event\\\";\\nexport { DroppableCell } from \\\"./droppable-cell\\\";\\nexport { EventCalendar } from \\\"./event-calendar\\\";\\nexport { EventDialog } from \\\"./event-dialog\\\";\\nexport { EventItem } from \\\"./event-item\\\";\\nexport { EventsPopup } from \\\"./events-popup\\\";\\n// Hook exports\\nexport * from \\\"./hooks/use-current-time-indicator\\\";\\nexport * from \\\"./hooks/use-event-visibility\\\";\\nexport { MonthView } from \\\"./month-view\\\";\\n// Type exports\\nexport type { CalendarEvent, CalendarView, EventColor } from \\\"./types\\\";\\nexport * from \\\"./utils\\\";\\nexport { WeekView } from \\\"./week-view\\\";\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/month-view.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  addDays,\\n  eachDayOfInterval,\\n  endOfMonth,\\n  endOfWeek,\\n  format,\\n  isSameDay,\\n  isSameMonth,\\n  isToday,\\n  startOfMonth,\\n  startOfWeek,\\n} from \\\"date-fns\\\";\\nimport type React from \\\"react\\\";\\nimport { useEffect, useMemo, useState } from \\\"react\\\";\\n\\nimport {\\n  type CalendarEvent,\\n  DraggableEvent,\\n  DroppableCell,\\n  EventGap,\\n  EventHeight,\\n  EventItem,\\n  getAllEventsForDay,\\n  getEventsForDay,\\n  getSpanningEventsForDay,\\n  sortEvents,\\n  useEventVisibility,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\nimport { DefaultStartHour } from \\\"@/registry/default/components/event-calendar/constants\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\ninterface MonthViewProps {\\n  currentDate: Date;\\n  events: CalendarEvent[];\\n  onEventSelect: (event: CalendarEvent) => void;\\n  onEventCreate: (startTime: Date) => void;\\n}\\n\\nexport function MonthView({\\n  currentDate,\\n  events,\\n  onEventSelect,\\n  onEventCreate,\\n}: MonthViewProps) {\\n  const days = useMemo(() => {\\n    const monthStart = startOfMonth(currentDate);\\n    const monthEnd = endOfMonth(monthStart);\\n    const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });\\n    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });\\n\\n    return eachDayOfInterval({ end: calendarEnd, start: calendarStart });\\n  }, [currentDate]);\\n\\n  const weekdays = useMemo(() => {\\n    return Array.from({ length: 7 }).map((_, i) => {\\n      const date = addDays(startOfWeek(new Date()), i);\\n      return format(date, \\\"EEE\\\");\\n    });\\n  }, []);\\n\\n  const weeks = useMemo(() => {\\n    const result = [];\\n    let week = [];\\n\\n    for (let i = 0; i < days.length; i++) {\\n      week.push(days[i]);\\n      if (week.length === 7 || i === days.length - 1) {\\n        result.push(week);\\n        week = [];\\n      }\\n    }\\n\\n    return result;\\n  }, [days]);\\n\\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\\n    e.stopPropagation();\\n    onEventSelect(event);\\n  };\\n\\n  const [isMounted, setIsMounted] = useState(false);\\n  const { contentRef, getVisibleEventCount } = useEventVisibility({\\n    eventGap: EventGap,\\n    eventHeight: EventHeight,\\n  });\\n\\n  useEffect(() => {\\n    setIsMounted(true);\\n  }, []);\\n\\n  return (\\n    <div className=\\\"contents\\\" data-slot=\\\"month-view\\\">\\n      <div className=\\\"grid grid-cols-7 border-border/70 border-b\\\">\\n        {weekdays.map((day) => (\\n          <div\\n            className=\\\"py-2 text-center text-muted-foreground/70 text-sm\\\"\\n            key={day}\\n          >\\n            {day}\\n          </div>\\n        ))}\\n      </div>\\n      <div className=\\\"grid flex-1 auto-rows-fr\\\">\\n        {weeks.map((week, weekIndex) => (\\n          <div\\n            className=\\\"grid grid-cols-7 [&:last-child>*]:border-b-0\\\"\\n            key={`week-${week}`}\\n          >\\n            {week.map((day, dayIndex) => {\\n              if (!day) return null; // Skip if day is undefined\\n\\n              const dayEvents = getEventsForDay(events, day);\\n              const spanningEvents = getSpanningEventsForDay(events, day);\\n              const isCurrentMonth = isSameMonth(day, currentDate);\\n              const cellId = `month-cell-${day.toISOString()}`;\\n              const allDayEvents = [...spanningEvents, ...dayEvents];\\n              const allEvents = getAllEventsForDay(events, day);\\n\\n              const isReferenceCell = weekIndex === 0 && dayIndex === 0;\\n              const visibleCount = isMounted\\n                ? getVisibleEventCount(allDayEvents.length)\\n                : undefined;\\n              const hasMore =\\n                visibleCount !== undefined &&\\n                allDayEvents.length > visibleCount;\\n              const remainingCount = hasMore\\n                ? allDayEvents.length - visibleCount\\n                : 0;\\n\\n              return (\\n                <div\\n                  className=\\\"group border-border/70 border-r border-b last:border-r-0 data-outside-cell:bg-muted/25 data-outside-cell:text-muted-foreground/70\\\"\\n                  data-outside-cell={!isCurrentMonth || undefined}\\n                  data-today={isToday(day) || undefined}\\n                  key={day.toString()}\\n                >\\n                  <DroppableCell\\n                    date={day}\\n                    id={cellId}\\n                    onClick={() => {\\n                      const startTime = new Date(day);\\n                      startTime.setHours(DefaultStartHour, 0, 0);\\n                      onEventCreate(startTime);\\n                    }}\\n                  >\\n                    <div className=\\\"mt-1 inline-flex size-6 items-center justify-center rounded-full text-sm group-data-today:bg-primary group-data-today:text-primary-foreground\\\">\\n                      {format(day, \\\"d\\\")}\\n                    </div>\\n                    <div\\n                      className=\\\"min-h-[calc((var(--event-height)+var(--event-gap))*2)] sm:min-h-[calc((var(--event-height)+var(--event-gap))*3)] lg:min-h-[calc((var(--event-height)+var(--event-gap))*4)]\\\"\\n                      ref={isReferenceCell ? contentRef : null}\\n                    >\\n                      {sortEvents(allDayEvents).map((event, index) => {\\n                        const eventStart = new Date(event.start);\\n                        const eventEnd = new Date(event.end);\\n                        const isFirstDay = isSameDay(day, eventStart);\\n                        const isLastDay = isSameDay(day, eventEnd);\\n\\n                        const isHidden =\\n                          isMounted && visibleCount && index >= visibleCount;\\n\\n                        if (!visibleCount) return null;\\n\\n                        if (!isFirstDay) {\\n                          return (\\n                            <div\\n                              aria-hidden={isHidden ? \\\"true\\\" : undefined}\\n                              className=\\\"aria-hidden:hidden\\\"\\n                              key={`spanning-${event.id}-${day.toISOString().slice(0, 10)}`}\\n                            >\\n                              <EventItem\\n                                event={event}\\n                                isFirstDay={isFirstDay}\\n                                isLastDay={isLastDay}\\n                                onClick={(e) => handleEventClick(event, e)}\\n                                view=\\\"month\\\"\\n                              >\\n                                <div aria-hidden={true} className=\\\"invisible\\\">\\n                                  {!event.allDay && (\\n                                    <span>\\n                                      {format(\\n                                        new Date(event.start),\\n                                        \\\"h:mm\\\",\\n                                      )}{\\\" \\\"}\\n                                    </span>\\n                                  )}\\n                                  {event.title}\\n                                </div>\\n                              </EventItem>\\n                            </div>\\n                          );\\n                        }\\n\\n                        return (\\n                          <div\\n                            aria-hidden={isHidden ? \\\"true\\\" : undefined}\\n                            className=\\\"aria-hidden:hidden\\\"\\n                            key={event.id}\\n                          >\\n                            <DraggableEvent\\n                              event={event}\\n                              isFirstDay={isFirstDay}\\n                              isLastDay={isLastDay}\\n                              onClick={(e) => handleEventClick(event, e)}\\n                              view=\\\"month\\\"\\n                            />\\n                          </div>\\n                        );\\n                      })}\\n\\n                      {hasMore && (\\n                        <Popover modal>\\n                          <PopoverTrigger asChild>\\n                            <button\\n                              className=\\\"mt-(--event-gap) flex h-(--event-height) w-full select-none items-center overflow-hidden px-1 text-left text-[10px] text-muted-foreground outline-none backdrop-blur-md transition hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:px-2 sm:text-xs\\\"\\n                              onClick={(e) => e.stopPropagation()}\\n                              type=\\\"button\\\"\\n                            >\\n                              <span>\\n                                + {remainingCount}{\\\" \\\"}\\n                                <span className=\\\"max-sm:sr-only\\\">more</span>\\n                              </span>\\n                            </button>\\n                          </PopoverTrigger>\\n                          <PopoverContent\\n                            align=\\\"center\\\"\\n                            className=\\\"max-w-52 p-3\\\"\\n                            style={\\n                              {\\n                                \\\"--event-height\\\": `${EventHeight}px`,\\n                              } as Record<string, string>\\n                            }\\n                          >\\n                            <div className=\\\"space-y-2\\\">\\n                              <div className=\\\"font-medium text-sm\\\">\\n                                {format(day, \\\"EEE d\\\")}\\n                              </div>\\n                              <div className=\\\"space-y-1\\\">\\n                                {sortEvents(allEvents).map((event) => {\\n                                  const eventStart = new Date(event.start);\\n                                  const eventEnd = new Date(event.end);\\n                                  const isFirstDay = isSameDay(day, eventStart);\\n                                  const isLastDay = isSameDay(day, eventEnd);\\n\\n                                  return (\\n                                    <EventItem\\n                                      event={event}\\n                                      isFirstDay={isFirstDay}\\n                                      isLastDay={isLastDay}\\n                                      key={event.id}\\n                                      onClick={(e) =>\\n                                        handleEventClick(event, e)\\n                                      }\\n                                      view=\\\"month\\\"\\n                                    />\\n                                  );\\n                                })}\\n                              </div>\\n                            </div>\\n                          </PopoverContent>\\n                        </Popover>\\n                      )}\\n                    </div>\\n                  </DroppableCell>\\n                </div>\\n              );\\n            })}\\n          </div>\\n        ))}\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/types.ts\",\n      \"content\": \"export type CalendarView = \\\"month\\\" | \\\"week\\\" | \\\"day\\\" | \\\"agenda\\\";\\n\\nexport interface CalendarEvent {\\n  id: string;\\n  title: string;\\n  description?: string;\\n  start: Date;\\n  end: Date;\\n  allDay?: boolean;\\n  color?: EventColor;\\n  location?: string;\\n}\\n\\nexport type EventColor =\\n  | \\\"sky\\\"\\n  | \\\"amber\\\"\\n  | \\\"violet\\\"\\n  | \\\"rose\\\"\\n  | \\\"emerald\\\"\\n  | \\\"orange\\\";\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/utils.ts\",\n      \"content\": \"import { isSameDay } from \\\"date-fns\\\";\\n\\nimport type {\\n  CalendarEvent,\\n  EventColor,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\n\\n/**\\n * Get CSS classes for event colors\\n */\\nexport function getEventColorClasses(color?: EventColor | string): string {\\n  const eventColor = color || \\\"sky\\\";\\n\\n  switch (eventColor) {\\n    case \\\"sky\\\":\\n      return \\\"bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8\\\";\\n    case \\\"amber\\\":\\n      return \\\"bg-amber-200/50 hover:bg-amber-200/40 text-amber-950/80 dark:bg-amber-400/25 dark:hover:bg-amber-400/20 dark:text-amber-200 shadow-amber-700/8\\\";\\n    case \\\"violet\\\":\\n      return \\\"bg-violet-200/50 hover:bg-violet-200/40 text-violet-950/80 dark:bg-violet-400/25 dark:hover:bg-violet-400/20 dark:text-violet-200 shadow-violet-700/8\\\";\\n    case \\\"rose\\\":\\n      return \\\"bg-rose-200/50 hover:bg-rose-200/40 text-rose-950/80 dark:bg-rose-400/25 dark:hover:bg-rose-400/20 dark:text-rose-200 shadow-rose-700/8\\\";\\n    case \\\"emerald\\\":\\n      return \\\"bg-emerald-200/50 hover:bg-emerald-200/40 text-emerald-950/80 dark:bg-emerald-400/25 dark:hover:bg-emerald-400/20 dark:text-emerald-200 shadow-emerald-700/8\\\";\\n    case \\\"orange\\\":\\n      return \\\"bg-orange-200/50 hover:bg-orange-200/40 text-orange-950/80 dark:bg-orange-400/25 dark:hover:bg-orange-400/20 dark:text-orange-200 shadow-orange-700/8\\\";\\n    default:\\n      return \\\"bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8\\\";\\n  }\\n}\\n\\n/**\\n * Get CSS classes for border radius based on event position in multi-day events\\n */\\nexport function getBorderRadiusClasses(\\n  isFirstDay: boolean,\\n  isLastDay: boolean,\\n): string {\\n  if (isFirstDay && isLastDay) {\\n    return \\\"rounded\\\"; // Both ends rounded\\n  }\\n  if (isFirstDay) {\\n    return \\\"rounded-l rounded-r-none\\\"; // Only left end rounded\\n  }\\n  if (isLastDay) {\\n    return \\\"rounded-r rounded-l-none\\\"; // Only right end rounded\\n  }\\n  return \\\"rounded-none\\\"; // No rounded corners\\n}\\n\\n/**\\n * Check if an event is a multi-day event\\n */\\nexport function isMultiDayEvent(event: CalendarEvent): boolean {\\n  const eventStart = new Date(event.start);\\n  const eventEnd = new Date(event.end);\\n  return event.allDay || eventStart.getDate() !== eventEnd.getDate();\\n}\\n\\n/**\\n * Filter events for a specific day\\n */\\nexport function getEventsForDay(\\n  events: CalendarEvent[],\\n  day: Date,\\n): CalendarEvent[] {\\n  return events\\n    .filter((event) => {\\n      const eventStart = new Date(event.start);\\n      return isSameDay(day, eventStart);\\n    })\\n    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());\\n}\\n\\n/**\\n * Sort events with multi-day events first, then by start time\\n */\\nexport function sortEvents(events: CalendarEvent[]): CalendarEvent[] {\\n  return [...events].sort((a, b) => {\\n    const aIsMultiDay = isMultiDayEvent(a);\\n    const bIsMultiDay = isMultiDayEvent(b);\\n\\n    if (aIsMultiDay && !bIsMultiDay) return -1;\\n    if (!aIsMultiDay && bIsMultiDay) return 1;\\n\\n    return new Date(a.start).getTime() - new Date(b.start).getTime();\\n  });\\n}\\n\\n/**\\n * Get multi-day events that span across a specific day (but don't start on that day)\\n */\\nexport function getSpanningEventsForDay(\\n  events: CalendarEvent[],\\n  day: Date,\\n): CalendarEvent[] {\\n  return events.filter((event) => {\\n    if (!isMultiDayEvent(event)) return false;\\n\\n    const eventStart = new Date(event.start);\\n    const eventEnd = new Date(event.end);\\n\\n    // Only include if it's not the start day but is either the end day or a middle day\\n    return (\\n      !isSameDay(day, eventStart) &&\\n      (isSameDay(day, eventEnd) || (day > eventStart && day < eventEnd))\\n    );\\n  });\\n}\\n\\n/**\\n * Get all events visible on a specific day (starting, ending, or spanning)\\n */\\nexport function getAllEventsForDay(\\n  events: CalendarEvent[],\\n  day: Date,\\n): CalendarEvent[] {\\n  return events.filter((event) => {\\n    const eventStart = new Date(event.start);\\n    const eventEnd = new Date(event.end);\\n    return (\\n      isSameDay(day, eventStart) ||\\n      isSameDay(day, eventEnd) ||\\n      (day > eventStart && day < eventEnd)\\n    );\\n  });\\n}\\n\\n/**\\n * Get all events for a day (for agenda view)\\n */\\nexport function getAgendaEventsForDay(\\n  events: CalendarEvent[],\\n  day: Date,\\n): CalendarEvent[] {\\n  return events\\n    .filter((event) => {\\n      const eventStart = new Date(event.start);\\n      const eventEnd = new Date(event.end);\\n      return (\\n        isSameDay(day, eventStart) ||\\n        isSameDay(day, eventEnd) ||\\n        (day > eventStart && day < eventEnd)\\n      );\\n    })\\n    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());\\n}\\n\\n/**\\n * Add hours to a date\\n */\\nexport function addHoursToDate(date: Date, hours: number): Date {\\n  const result = new Date(date);\\n  result.setHours(result.getHours() + hours);\\n  return result;\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/week-view.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  addHours,\\n  areIntervalsOverlapping,\\n  differenceInMinutes,\\n  eachDayOfInterval,\\n  eachHourOfInterval,\\n  endOfWeek,\\n  format,\\n  getHours,\\n  getMinutes,\\n  isBefore,\\n  isSameDay,\\n  isToday,\\n  startOfDay,\\n  startOfWeek,\\n} from \\\"date-fns\\\";\\nimport type React from \\\"react\\\";\\nimport { useMemo } from \\\"react\\\";\\n\\nimport {\\n  type CalendarEvent,\\n  DraggableEvent,\\n  DroppableCell,\\n  EventItem,\\n  isMultiDayEvent,\\n  useCurrentTimeIndicator,\\n  WeekCellsHeight,\\n} from \\\"@/registry/default/components/event-calendar\\\";\\nimport {\\n  EndHour,\\n  StartHour,\\n} from \\\"@/registry/default/components/event-calendar/constants\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\ninterface WeekViewProps {\\n  currentDate: Date;\\n  events: CalendarEvent[];\\n  onEventSelect: (event: CalendarEvent) => void;\\n  onEventCreate: (startTime: Date) => void;\\n}\\n\\ninterface PositionedEvent {\\n  event: CalendarEvent;\\n  top: number;\\n  height: number;\\n  left: number;\\n  width: number;\\n  zIndex: number;\\n}\\n\\nexport function WeekView({\\n  currentDate,\\n  events,\\n  onEventSelect,\\n  onEventCreate,\\n}: WeekViewProps) {\\n  const days = useMemo(() => {\\n    const weekStart = startOfWeek(currentDate, { weekStartsOn: 0 });\\n    const weekEnd = endOfWeek(currentDate, { weekStartsOn: 0 });\\n    return eachDayOfInterval({ end: weekEnd, start: weekStart });\\n  }, [currentDate]);\\n\\n  const weekStart = useMemo(\\n    () => startOfWeek(currentDate, { weekStartsOn: 0 }),\\n    [currentDate],\\n  );\\n\\n  const hours = useMemo(() => {\\n    const dayStart = startOfDay(currentDate);\\n    return eachHourOfInterval({\\n      end: addHours(dayStart, EndHour - 1),\\n      start: addHours(dayStart, StartHour),\\n    });\\n  }, [currentDate]);\\n\\n  // Get all-day events and multi-day events for the week\\n  const allDayEvents = useMemo(() => {\\n    return events\\n      .filter((event) => {\\n        // Include explicitly marked all-day events or multi-day events\\n        return event.allDay || isMultiDayEvent(event);\\n      })\\n      .filter((event) => {\\n        const eventStart = new Date(event.start);\\n        const eventEnd = new Date(event.end);\\n        return days.some(\\n          (day) =>\\n            isSameDay(day, eventStart) ||\\n            isSameDay(day, eventEnd) ||\\n            (day > eventStart && day < eventEnd),\\n        );\\n      });\\n  }, [events, days]);\\n\\n  // Process events for each day to calculate positions\\n  const processedDayEvents = useMemo(() => {\\n    const result = days.map((day) => {\\n      // Get events for this day that are not all-day events or multi-day events\\n      const dayEvents = events.filter((event) => {\\n        // Skip all-day events and multi-day events\\n        if (event.allDay || isMultiDayEvent(event)) return false;\\n\\n        const eventStart = new Date(event.start);\\n        const eventEnd = new Date(event.end);\\n\\n        // Check if event is on this day\\n        return (\\n          isSameDay(day, eventStart) ||\\n          isSameDay(day, eventEnd) ||\\n          (eventStart < day && eventEnd > day)\\n        );\\n      });\\n\\n      // Sort events by start time and duration\\n      const sortedEvents = [...dayEvents].sort((a, b) => {\\n        const aStart = new Date(a.start);\\n        const bStart = new Date(b.start);\\n        const aEnd = new Date(a.end);\\n        const bEnd = new Date(b.end);\\n\\n        // First sort by start time\\n        if (aStart < bStart) return -1;\\n        if (aStart > bStart) return 1;\\n\\n        // If start times are equal, sort by duration (longer events first)\\n        const aDuration = differenceInMinutes(aEnd, aStart);\\n        const bDuration = differenceInMinutes(bEnd, bStart);\\n        return bDuration - aDuration;\\n      });\\n\\n      // Calculate positions for each event\\n      const positionedEvents: PositionedEvent[] = [];\\n      const dayStart = startOfDay(day);\\n\\n      // Track columns for overlapping events\\n      const columns: { event: CalendarEvent; end: Date }[][] = [];\\n\\n      for (const event of sortedEvents) {\\n        const eventStart = new Date(event.start);\\n        const eventEnd = new Date(event.end);\\n\\n        // Adjust start and end times if they're outside this day\\n        const adjustedStart = isSameDay(day, eventStart)\\n          ? eventStart\\n          : dayStart;\\n        const adjustedEnd = isSameDay(day, eventEnd)\\n          ? eventEnd\\n          : addHours(dayStart, 24);\\n\\n        // Calculate top position and height\\n        const startHour =\\n          getHours(adjustedStart) + getMinutes(adjustedStart) / 60;\\n        const endHour = getHours(adjustedEnd) + getMinutes(adjustedEnd) / 60;\\n\\n        // Adjust the top calculation to account for the new start time\\n        const top = (startHour - StartHour) * WeekCellsHeight;\\n        const height = (endHour - startHour) * WeekCellsHeight;\\n\\n        // Find a column for this event\\n        let columnIndex = 0;\\n        let placed = false;\\n\\n        while (!placed) {\\n          const col = columns[columnIndex] || [];\\n          if (col.length === 0) {\\n            columns[columnIndex] = col;\\n            placed = true;\\n          } else {\\n            const overlaps = col.some((c) =>\\n              areIntervalsOverlapping(\\n                { end: adjustedEnd, start: adjustedStart },\\n                {\\n                  end: new Date(c.event.end),\\n                  start: new Date(c.event.start),\\n                },\\n              ),\\n            );\\n\\n            if (!overlaps) {\\n              placed = true;\\n            } else {\\n              columnIndex++;\\n            }\\n          }\\n        }\\n\\n        // Ensure column is initialized before pushing\\n        const currentColumn = columns[columnIndex] || [];\\n        columns[columnIndex] = currentColumn;\\n        currentColumn.push({ end: adjustedEnd, event });\\n\\n        // Calculate width and left position based on number of columns\\n        const width = columnIndex === 0 ? 1 : 0.9;\\n        const left = columnIndex === 0 ? 0 : columnIndex * 0.1;\\n\\n        positionedEvents.push({\\n          event,\\n          height,\\n          left,\\n          top,\\n          width,\\n          zIndex: 10 + columnIndex, // Higher columns get higher z-index\\n        });\\n      }\\n\\n      return positionedEvents;\\n    });\\n\\n    return result;\\n  }, [days, events]);\\n\\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\\n    e.stopPropagation();\\n    onEventSelect(event);\\n  };\\n\\n  const showAllDaySection = allDayEvents.length > 0;\\n  const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicator(\\n    currentDate,\\n    \\\"week\\\",\\n  );\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col\\\" data-slot=\\\"week-view\\\">\\n      <div className=\\\"sticky top-0 z-30 grid grid-cols-8 border-border/70 border-b bg-background/80 backdrop-blur-md\\\">\\n        <div className=\\\"py-2 text-center text-muted-foreground/70 text-sm\\\">\\n          <span className=\\\"max-[479px]:sr-only\\\">{format(new Date(), \\\"O\\\")}</span>\\n        </div>\\n        {days.map((day) => (\\n          <div\\n            className=\\\"py-2 text-center text-muted-foreground/70 text-sm data-today:font-medium data-today:text-foreground\\\"\\n            data-today={isToday(day) || undefined}\\n            key={day.toString()}\\n          >\\n            <span aria-hidden=\\\"true\\\" className=\\\"sm:hidden\\\">\\n              {format(day, \\\"E\\\")[0]} {format(day, \\\"d\\\")}\\n            </span>\\n            <span className=\\\"max-sm:hidden\\\">{format(day, \\\"EEE dd\\\")}</span>\\n          </div>\\n        ))}\\n      </div>\\n\\n      {showAllDaySection && (\\n        <div className=\\\"border-border/70 border-b bg-muted/50\\\">\\n          <div className=\\\"grid grid-cols-8\\\">\\n            <div className=\\\"relative border-border/70 border-r\\\">\\n              <span className=\\\"absolute bottom-0 left-0 h-6 w-16 max-w-full pe-2 text-right text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\\\">\\n                All day\\n              </span>\\n            </div>\\n            {days.map((day, dayIndex) => {\\n              const dayAllDayEvents = allDayEvents.filter((event) => {\\n                const eventStart = new Date(event.start);\\n                const eventEnd = new Date(event.end);\\n                return (\\n                  isSameDay(day, eventStart) ||\\n                  (day > eventStart && day < eventEnd) ||\\n                  isSameDay(day, eventEnd)\\n                );\\n              });\\n\\n              return (\\n                <div\\n                  className=\\\"relative border-border/70 border-r p-1 last:border-r-0\\\"\\n                  data-today={isToday(day) || undefined}\\n                  key={day.toString()}\\n                >\\n                  {dayAllDayEvents.map((event) => {\\n                    const eventStart = new Date(event.start);\\n                    const eventEnd = new Date(event.end);\\n                    const isFirstDay = isSameDay(day, eventStart);\\n                    const isLastDay = isSameDay(day, eventEnd);\\n\\n                    // Check if this is the first day in the current week view\\n                    const isFirstVisibleDay =\\n                      dayIndex === 0 && isBefore(eventStart, weekStart);\\n                    const shouldShowTitle = isFirstDay || isFirstVisibleDay;\\n\\n                    return (\\n                      <EventItem\\n                        event={event}\\n                        isFirstDay={isFirstDay}\\n                        isLastDay={isLastDay}\\n                        key={`spanning-${event.id}`}\\n                        onClick={(e) => handleEventClick(event, e)}\\n                        view=\\\"month\\\"\\n                      >\\n                        {/* Show title if it's the first day of the event or the first visible day in the week */}\\n                        <div\\n                          aria-hidden={!shouldShowTitle}\\n                          className={cn(\\n                            \\\"truncate\\\",\\n                            !shouldShowTitle && \\\"invisible\\\",\\n                          )}\\n                        >\\n                          {event.title}\\n                        </div>\\n                      </EventItem>\\n                    );\\n                  })}\\n                </div>\\n              );\\n            })}\\n          </div>\\n        </div>\\n      )}\\n\\n      <div className=\\\"grid flex-1 grid-cols-8 overflow-hidden\\\">\\n        <div className=\\\"grid auto-cols-fr border-border/70 border-r\\\">\\n          {hours.map((hour, index) => (\\n            <div\\n              className=\\\"relative min-h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0\\\"\\n              key={hour.toString()}\\n            >\\n              {index > 0 && (\\n                <span className=\\\"-top-3 absolute left-0 flex h-6 w-16 max-w-full items-center justify-end bg-background pe-2 text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\\\">\\n                  {format(hour, \\\"h a\\\")}\\n                </span>\\n              )}\\n            </div>\\n          ))}\\n        </div>\\n\\n        {days.map((day, dayIndex) => (\\n          <div\\n            className=\\\"relative grid auto-cols-fr border-border/70 border-r last:border-r-0\\\"\\n            data-today={isToday(day) || undefined}\\n            key={day.toString()}\\n          >\\n            {/* Positioned events */}\\n            {(processedDayEvents[dayIndex] ?? []).map((positionedEvent) => (\\n              <div\\n                className=\\\"absolute z-10 px-0.5\\\"\\n                key={positionedEvent.event.id}\\n                onClick={(e) => e.stopPropagation()}\\n                style={{\\n                  height: `${positionedEvent.height}px`,\\n                  left: `${positionedEvent.left * 100}%`,\\n                  top: `${positionedEvent.top}px`,\\n                  width: `${positionedEvent.width * 100}%`,\\n                  zIndex: positionedEvent.zIndex,\\n                }}\\n              >\\n                <div className=\\\"size-full\\\">\\n                  <DraggableEvent\\n                    event={positionedEvent.event}\\n                    height={positionedEvent.height}\\n                    onClick={(e) => handleEventClick(positionedEvent.event, e)}\\n                    showTime\\n                    view=\\\"week\\\"\\n                  />\\n                </div>\\n              </div>\\n            ))}\\n\\n            {/* Current time indicator - only show for today's column */}\\n            {currentTimeVisible && isToday(day) && (\\n              <div\\n                className=\\\"pointer-events-none absolute right-0 left-0 z-20\\\"\\n                style={{ top: `${currentTimePosition}%` }}\\n              >\\n                <div className=\\\"relative flex items-center\\\">\\n                  <div className=\\\"-left-1 absolute h-2 w-2 rounded-full bg-primary\\\" />\\n                  <div className=\\\"h-[2px] w-full bg-primary\\\" />\\n                </div>\\n              </div>\\n            )}\\n            {hours.map((hour) => {\\n              const hourValue = getHours(hour);\\n              return (\\n                <div\\n                  className=\\\"relative min-h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0\\\"\\n                  key={hour.toString()}\\n                >\\n                  {/* Quarter-hour intervals */}\\n                  {[0, 1, 2, 3].map((quarter) => {\\n                    const quarterHourTime = hourValue + quarter * 0.25;\\n                    return (\\n                      <DroppableCell\\n                        className={cn(\\n                          \\\"absolute h-[calc(var(--week-cells-height)/4)] w-full\\\",\\n                          quarter === 0 && \\\"top-0\\\",\\n                          quarter === 1 &&\\n                            \\\"top-[calc(var(--week-cells-height)/4)]\\\",\\n                          quarter === 2 &&\\n                            \\\"top-[calc(var(--week-cells-height)/4*2)]\\\",\\n                          quarter === 3 &&\\n                            \\\"top-[calc(var(--week-cells-height)/4*3)]\\\",\\n                        )}\\n                        date={day}\\n                        id={`week-cell-${day.toISOString()}-${quarterHourTime}`}\\n                        key={`${hour.toString()}-${quarter}`}\\n                        onClick={() => {\\n                          const startTime = new Date(day);\\n                          startTime.setHours(hourValue);\\n                          startTime.setMinutes(quarter * 15);\\n                          onEventCreate(startTime);\\n                        }}\\n                        time={quarterHourTime}\\n                      />\\n                    );\\n                  })}\\n                </div>\\n              );\\n            })}\\n          </div>\\n        ))}\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/hooks/use-current-time-indicator.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { endOfWeek, isSameDay, isWithinInterval, startOfWeek } from \\\"date-fns\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\n\\nimport {\\n  EndHour,\\n  StartHour,\\n} from \\\"@/registry/default/components/event-calendar/constants\\\";\\n\\nexport function useCurrentTimeIndicator(\\n  currentDate: Date,\\n  view: \\\"day\\\" | \\\"week\\\",\\n) {\\n  const [currentTimePosition, setCurrentTimePosition] = useState<number>(0);\\n  const [currentTimeVisible, setCurrentTimeVisible] = useState<boolean>(false);\\n\\n  useEffect(() => {\\n    const calculateTimePosition = () => {\\n      const now = new Date();\\n      const hours = now.getHours();\\n      const minutes = now.getMinutes();\\n      const totalMinutes = (hours - StartHour) * 60 + minutes;\\n      const dayStartMinutes = 0; // 12am\\n      const dayEndMinutes = (EndHour - StartHour) * 60; // 12am next day\\n\\n      // Calculate position as percentage of day\\n      const position =\\n        ((totalMinutes - dayStartMinutes) / (dayEndMinutes - dayStartMinutes)) *\\n        100;\\n\\n      // Check if current day is in view based on the calendar view\\n      let isCurrentTimeVisible = false;\\n\\n      if (view === \\\"day\\\") {\\n        isCurrentTimeVisible = isSameDay(now, currentDate);\\n      } else if (view === \\\"week\\\") {\\n        const startOfWeekDate = startOfWeek(currentDate, { weekStartsOn: 0 });\\n        const endOfWeekDate = endOfWeek(currentDate, { weekStartsOn: 0 });\\n        isCurrentTimeVisible = isWithinInterval(now, {\\n          end: endOfWeekDate,\\n          start: startOfWeekDate,\\n        });\\n      }\\n\\n      setCurrentTimePosition(position);\\n      setCurrentTimeVisible(isCurrentTimeVisible);\\n    };\\n\\n    // Calculate immediately\\n    calculateTimePosition();\\n\\n    // Update every minute\\n    const interval = setInterval(calculateTimePosition, 60000);\\n\\n    return () => clearInterval(interval);\\n  }, [currentDate, view]);\\n\\n  return { currentTimePosition, currentTimeVisible };\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/event-calendar/hooks/use-event-visibility.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useLayoutEffect, useMemo, useRef, useState } from \\\"react\\\";\\n\\ninterface EventVisibilityOptions {\\n  eventHeight: number;\\n  eventGap: number;\\n}\\n\\ninterface EventVisibilityResult {\\n  contentRef: React.RefObject<HTMLDivElement>;\\n  contentHeight: number | null;\\n  getVisibleEventCount: (totalEvents: number) => number;\\n}\\n\\n/**\\n * Hook for calculating event visibility based on container height\\n * Uses ResizeObserver for efficient updates\\n */\\nexport function useEventVisibility({\\n  eventHeight,\\n  eventGap,\\n}: EventVisibilityOptions): EventVisibilityResult {\\n  // Use the standard pattern for React refs\\n  const contentRef = useRef<HTMLDivElement>(null);\\n  const observerRef = useRef<ResizeObserver | null>(null);\\n  const [contentHeight, setContentHeight] = useState<number | null>(null);\\n\\n  // Use layout effect for synchronous measurement before paint\\n  useLayoutEffect(() => {\\n    if (!contentRef.current) return;\\n\\n    // Function to update the content height\\n    const updateHeight = () => {\\n      if (contentRef.current) {\\n        setContentHeight(contentRef.current.clientHeight);\\n      }\\n    };\\n\\n    // Initial measurement (synchronous)\\n    updateHeight();\\n\\n    // Create observer only once and reuse it\\n    if (!observerRef.current) {\\n      observerRef.current = new ResizeObserver(() => {\\n        // Just call updateHeight when resize is detected\\n        updateHeight();\\n      });\\n    }\\n\\n    // Start observing the content container\\n    observerRef.current.observe(contentRef.current);\\n\\n    // Clean up function\\n    return () => {\\n      if (observerRef.current) {\\n        observerRef.current.disconnect();\\n      }\\n    };\\n  }, []);\\n\\n  // Function to calculate visible events for a cell\\n  const getVisibleEventCount = useMemo(() => {\\n    return (totalEvents: number): number => {\\n      if (!contentHeight) return totalEvents;\\n\\n      // Calculate how many events can fit in the container\\n      const maxEvents = Math.floor(contentHeight / (eventHeight + eventGap));\\n\\n      // If all events fit, show them all\\n      if (totalEvents <= maxEvents) {\\n        return totalEvents;\\n      }\\n      // Otherwise, reserve space for \\\"more\\\" button by showing one less\\n      return maxEvents > 0 ? maxEvents - 1 : 0;\\n    };\\n  }, [contentHeight, eventHeight, eventGap]);\\n\\n  // Use type assertion to satisfy TypeScript\\n  return {\\n    contentHeight,\\n    contentRef,\\n    getVisibleEventCount,\\n  } as EventVisibilityResult;\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"calendar\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-543.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-543\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-543.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CircleUserRoundIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { useFileUpload } from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [\\n    { files, isDragging },\\n    {\\n      removeFile,\\n      openFileDialog,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n    },\\n  ] = useFileUpload({\\n    accept: \\\"image/*\\\",\\n  });\\n\\n  const previewUrl = files[0]?.preview || null;\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <div className=\\\"relative inline-flex\\\">\\n        {/* Drop area */}\\n        <button\\n          aria-label={previewUrl ? \\\"Change image\\\" : \\\"Upload image\\\"}\\n          className=\\\"relative flex size-16 items-center justify-center overflow-hidden rounded-full border border-input border-dashed outline-none transition-colors hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-disabled:pointer-events-none has-[img]:border-none has-disabled:opacity-50 data-[dragging=true]:bg-accent/50\\\"\\n          data-dragging={isDragging || undefined}\\n          onClick={openFileDialog}\\n          onDragEnter={handleDragEnter}\\n          onDragLeave={handleDragLeave}\\n          onDragOver={handleDragOver}\\n          onDrop={handleDrop}\\n          type=\\\"button\\\"\\n        >\\n          {previewUrl ? (\\n            <img\\n              alt={files[0]?.file?.name || \\\"Uploaded image\\\"}\\n              className=\\\"size-full object-cover\\\"\\n              height={64}\\n              src={previewUrl}\\n              style={{ objectFit: \\\"cover\\\" }}\\n              width={64}\\n            />\\n          ) : (\\n            <div aria-hidden=\\\"true\\\">\\n              <CircleUserRoundIcon className=\\\"size-4 opacity-60\\\" />\\n            </div>\\n          )}\\n        </button>\\n        {previewUrl && (\\n          <Button\\n            aria-label=\\\"Remove image\\\"\\n            className=\\\"-top-1 -right-1 absolute size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\\\"\\n            onClick={() => removeFile(files[0]?.id)}\\n            size=\\\"icon\\\"\\n          >\\n            <XIcon className=\\\"size-3.5\\\" />\\n          </Button>\\n        )}\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload image file\\\"\\n          className=\\\"sr-only\\\"\\n          tabIndex={-1}\\n        />\\n      </div>\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Avatar uploader with droppable area ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\",\n      \"avatar\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-544.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-544\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-544.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { AlertCircleIcon, ImageUpIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { useFileUpload } from \\\"@/registry/default/hooks/use-file-upload\\\";\\n\\nexport default function Component() {\\n  const maxSizeMB = 5;\\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    accept: \\\"image/*\\\",\\n    maxSize,\\n  });\\n\\n  const previewUrl = files[0]?.preview || null;\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <div className=\\\"relative\\\">\\n        {/* Drop area */}\\n        <div\\n          className=\\\"relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-[input:focus]:border-ring has-[img]:border-none has-disabled:opacity-50 has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n          data-dragging={isDragging || undefined}\\n          onClick={openFileDialog}\\n          onDragEnter={handleDragEnter}\\n          onDragLeave={handleDragLeave}\\n          onDragOver={handleDragOver}\\n          onDrop={handleDrop}\\n          role=\\\"button\\\"\\n          tabIndex={-1}\\n        >\\n          <input\\n            {...getInputProps()}\\n            aria-label=\\\"Upload file\\\"\\n            className=\\\"sr-only\\\"\\n          />\\n          {previewUrl ? (\\n            <div className=\\\"absolute inset-0\\\">\\n              <img\\n                alt={files[0]?.file?.name || \\\"Uploaded image\\\"}\\n                className=\\\"size-full object-cover\\\"\\n                src={previewUrl}\\n              />\\n            </div>\\n          ) : (\\n            <div className=\\\"flex flex-col items-center justify-center px-4 py-3 text-center\\\">\\n              <div\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n              >\\n                <ImageUpIcon className=\\\"size-4 opacity-60\\\" />\\n              </div>\\n              <p className=\\\"mb-1.5 font-medium text-sm\\\">\\n                Drop your image here or click to browse\\n              </p>\\n              <p className=\\\"text-muted-foreground text-xs\\\">\\n                Max size: {maxSizeMB}MB\\n              </p>\\n            </div>\\n          )}\\n        </div>\\n        {previewUrl && (\\n          <div className=\\\"absolute top-4 right-4\\\">\\n            <button\\n              aria-label=\\\"Remove image\\\"\\n              className=\\\"z-50 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n              onClick={() => removeFile(files[0]?.id)}\\n              type=\\\"button\\\"\\n            >\\n              <XIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n            </button>\\n          </div>\\n        )}\\n      </div>\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Single image uploader w/ max size ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-545.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-545\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-545.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { AlertCircleIcon, ImageIcon, UploadIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { useFileUpload } from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const maxSizeMB = 2;\\n  const maxSize = maxSizeMB * 1024 * 1024; // 2MB default\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    accept: \\\"image/svg+xml,image/png,image/jpeg,image/jpg,image/gif\\\",\\n    maxSize,\\n  });\\n  const previewUrl = files[0]?.preview || null;\\n  const _fileName = files[0]?.file.name || null;\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <div className=\\\"relative\\\">\\n        {/* Drop area */}\\n        <div\\n          className=\\\"relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n          data-dragging={isDragging || undefined}\\n          onDragEnter={handleDragEnter}\\n          onDragLeave={handleDragLeave}\\n          onDragOver={handleDragOver}\\n          onDrop={handleDrop}\\n        >\\n          <input\\n            {...getInputProps()}\\n            aria-label=\\\"Upload image file\\\"\\n            className=\\\"sr-only\\\"\\n          />\\n          {previewUrl ? (\\n            <div className=\\\"absolute inset-0 flex items-center justify-center p-4\\\">\\n              <img\\n                alt={files[0]?.file?.name || \\\"Uploaded image\\\"}\\n                className=\\\"mx-auto max-h-full rounded object-contain\\\"\\n                src={previewUrl}\\n              />\\n            </div>\\n          ) : (\\n            <div className=\\\"flex flex-col items-center justify-center px-4 py-3 text-center\\\">\\n              <div\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n              >\\n                <ImageIcon className=\\\"size-4 opacity-60\\\" />\\n              </div>\\n              <p className=\\\"mb-1.5 font-medium text-sm\\\">Drop your image here</p>\\n              <p className=\\\"text-muted-foreground text-xs\\\">\\n                SVG, PNG, JPG or GIF (max. {maxSizeMB}MB)\\n              </p>\\n              <Button\\n                className=\\\"mt-4\\\"\\n                onClick={openFileDialog}\\n                variant=\\\"outline\\\"\\n              >\\n                <UploadIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"-ms-1 size-4 opacity-60\\\"\\n                />\\n                Select image\\n              </Button>\\n            </div>\\n          )}\\n        </div>\\n\\n        {previewUrl && (\\n          <div className=\\\"absolute top-4 right-4\\\">\\n            <button\\n              aria-label=\\\"Remove image\\\"\\n              className=\\\"z-50 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n              onClick={() => removeFile(files[0]?.id)}\\n              type=\\\"button\\\"\\n            >\\n              <XIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n            </button>\\n          </div>\\n        )}\\n      </div>\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Single image uploader w/ max size (drop area + button) ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-546.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-546\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-546.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { AlertCircleIcon, ImageIcon, UploadIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport { useFileUpload } from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\n// Create some dummy initial files\\nconst initialFiles = [\\n  {\\n    id: \\\"image-01-123456789\\\",\\n    name: \\\"image-01.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=1\\\",\\n  },\\n  {\\n    id: \\\"image-02-123456789\\\",\\n    name: \\\"image-02.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=2\\\",\\n  },\\n  {\\n    id: \\\"image-03-123456789\\\",\\n    name: \\\"image-03.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=3\\\",\\n  },\\n  {\\n    id: \\\"image-04-123456789\\\",\\n    name: \\\"image-04.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=4\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const maxSizeMB = 5;\\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\\n  const maxFiles = 6;\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    accept: \\\"image/svg+xml,image/png,image/jpeg,image/jpg,image/gif\\\",\\n    initialFiles,\\n    maxFiles,\\n    maxSize,\\n    multiple: true,\\n  });\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      {/* Drop area */}\\n      <div\\n        className=\\\"relative flex min-h-52 flex-col items-center not-data-[files]:justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n        data-dragging={isDragging || undefined}\\n        data-files={files.length > 0 || undefined}\\n        onDragEnter={handleDragEnter}\\n        onDragLeave={handleDragLeave}\\n        onDragOver={handleDragOver}\\n        onDrop={handleDrop}\\n      >\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload image file\\\"\\n          className=\\\"sr-only\\\"\\n        />\\n        {files.length > 0 ? (\\n          <div className=\\\"flex w-full flex-col gap-3\\\">\\n            <div className=\\\"flex items-center justify-between gap-2\\\">\\n              <h3 className=\\\"truncate font-medium text-sm\\\">\\n                Uploaded Files ({files.length})\\n              </h3>\\n              <Button\\n                disabled={files.length >= maxFiles}\\n                onClick={openFileDialog}\\n                size=\\\"sm\\\"\\n                variant=\\\"outline\\\"\\n              >\\n                <UploadIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"-ms-0.5 size-3.5 opacity-60\\\"\\n                />\\n                Add more\\n              </Button>\\n            </div>\\n\\n            <div className=\\\"grid grid-cols-2 gap-4 md:grid-cols-3\\\">\\n              {files.map((file) => (\\n                <div\\n                  className=\\\"relative aspect-square rounded-md bg-accent\\\"\\n                  key={file.id}\\n                >\\n                  <img\\n                    alt={file.file.name}\\n                    className=\\\"size-full rounded-[inherit] object-cover\\\"\\n                    src={file.preview}\\n                  />\\n                  <Button\\n                    aria-label=\\\"Remove image\\\"\\n                    className=\\\"-top-2 -right-2 absolute size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\\\"\\n                    onClick={() => removeFile(file.id)}\\n                    size=\\\"icon\\\"\\n                  >\\n                    <XIcon className=\\\"size-3.5\\\" />\\n                  </Button>\\n                </div>\\n              ))}\\n            </div>\\n          </div>\\n        ) : (\\n          <div className=\\\"flex flex-col items-center justify-center px-4 py-3 text-center\\\">\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n            >\\n              <ImageIcon className=\\\"size-4 opacity-60\\\" />\\n            </div>\\n            <p className=\\\"mb-1.5 font-medium text-sm\\\">Drop your images here</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              SVG, PNG, JPG or GIF (max. {maxSizeMB}MB)\\n            </p>\\n            <Button className=\\\"mt-4\\\" onClick={openFileDialog} variant=\\\"outline\\\">\\n              <UploadIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" />\\n              Select images\\n            </Button>\\n          </div>\\n        )}\\n      </div>\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Multiple image uploader w/ image grid ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-547.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-547\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-547.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { AlertCircleIcon, ImageIcon, UploadIcon, XIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  formatBytes,\\n  useFileUpload,\\n} from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\n// Create some dummy initial files\\nconst initialFiles = [\\n  {\\n    id: \\\"image-01-123456789\\\",\\n    name: \\\"image-01.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=1\\\",\\n  },\\n  {\\n    id: \\\"image-02-123456789\\\",\\n    name: \\\"image-02.jpg\\\",\\n    size: 2345678,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=2\\\",\\n  },\\n  {\\n    id: \\\"image-03-123456789\\\",\\n    name: \\\"image-03.jpg\\\",\\n    size: 3456789,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=3\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const maxSizeMB = 5;\\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\\n  const maxFiles = 6;\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      clearFiles,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    accept: \\\"image/svg+xml,image/png,image/jpeg,image/jpg,image/gif\\\",\\n    initialFiles,\\n    maxFiles,\\n    maxSize,\\n    multiple: true,\\n  });\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      {/* Drop area */}\\n      <div\\n        className=\\\"relative flex min-h-52 flex-col items-center not-data-[files]:justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n        data-dragging={isDragging || undefined}\\n        data-files={files.length > 0 || undefined}\\n        onDragEnter={handleDragEnter}\\n        onDragLeave={handleDragLeave}\\n        onDragOver={handleDragOver}\\n        onDrop={handleDrop}\\n      >\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload image file\\\"\\n          className=\\\"sr-only\\\"\\n        />\\n        <div className=\\\"flex flex-col items-center justify-center px-4 py-3 text-center\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n          >\\n            <ImageIcon className=\\\"size-4 opacity-60\\\" />\\n          </div>\\n          <p className=\\\"mb-1.5 font-medium text-sm\\\">Drop your images here</p>\\n          <p className=\\\"text-muted-foreground text-xs\\\">\\n            SVG, PNG, JPG or GIF (max. {maxSizeMB}MB)\\n          </p>\\n          <Button className=\\\"mt-4\\\" onClick={openFileDialog} variant=\\\"outline\\\">\\n            <UploadIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" />\\n            Select images\\n          </Button>\\n        </div>\\n      </div>\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      {/* File list */}\\n      {files.length > 0 && (\\n        <div className=\\\"space-y-2\\\">\\n          {files.map((file) => (\\n            <div\\n              className=\\\"flex items-center justify-between gap-2 rounded-lg border bg-background p-2 pe-3\\\"\\n              key={file.id}\\n            >\\n              <div className=\\\"flex items-center gap-3 overflow-hidden\\\">\\n                <div className=\\\"aspect-square shrink-0 rounded bg-accent\\\">\\n                  <img\\n                    alt={file.file.name}\\n                    className=\\\"size-10 rounded-[inherit] object-cover\\\"\\n                    src={file.preview}\\n                  />\\n                </div>\\n                <div className=\\\"flex min-w-0 flex-col gap-0.5\\\">\\n                  <p className=\\\"truncate font-medium text-[13px]\\\">\\n                    {file.file.name}\\n                  </p>\\n                  <p className=\\\"text-muted-foreground text-xs\\\">\\n                    {formatBytes(file.file.size)}\\n                  </p>\\n                </div>\\n              </div>\\n\\n              <Button\\n                aria-label=\\\"Remove file\\\"\\n                className=\\\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\\\"\\n                onClick={() => removeFile(file.id)}\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <XIcon aria-hidden=\\\"true\\\" />\\n              </Button>\\n            </div>\\n          ))}\\n\\n          {/* Remove all files button */}\\n          {files.length > 1 && (\\n            <div>\\n              <Button onClick={clearFiles} size=\\\"sm\\\" variant=\\\"outline\\\">\\n                Remove all files\\n              </Button>\\n            </div>\\n          )}\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Multiple image uploader w/ image list ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-548.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-548\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-548.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  AlertCircleIcon,\\n  PaperclipIcon,\\n  UploadIcon,\\n  XIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  formatBytes,\\n  useFileUpload,\\n} from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\n// Create some dummy initial files\\nconst initialFiles = [\\n  {\\n    id: \\\"document.pdf-1744638436563-8u5xuls\\\",\\n    name: \\\"document.pdf\\\",\\n    size: 1528737,\\n    type: \\\"application/pdf\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=1\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const maxSize = 10 * 1024 * 1024; // 10MB default\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    initialFiles,\\n    maxSize,\\n  });\\n\\n  const file = files[0];\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      {/* Drop area */}\\n      <div\\n        className=\\\"flex min-h-40 flex-col items-center justify-center rounded-xl border border-input border-dashed p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-[input:focus]:border-ring has-disabled:opacity-50 has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n        data-dragging={isDragging || undefined}\\n        onClick={openFileDialog}\\n        onDragEnter={handleDragEnter}\\n        onDragLeave={handleDragLeave}\\n        onDragOver={handleDragOver}\\n        onDrop={handleDrop}\\n        role=\\\"button\\\"\\n        tabIndex={-1}\\n      >\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload file\\\"\\n          className=\\\"sr-only\\\"\\n          disabled={Boolean(file)}\\n        />\\n\\n        <div className=\\\"flex flex-col items-center justify-center text-center\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n          >\\n            <UploadIcon className=\\\"size-4 opacity-60\\\" />\\n          </div>\\n          <p className=\\\"mb-1.5 font-medium text-sm\\\">Upload file</p>\\n          <p className=\\\"text-muted-foreground text-xs\\\">\\n            Drag & drop or click to browse (max. {formatBytes(maxSize)})\\n          </p>\\n        </div>\\n      </div>\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      {/* File list */}\\n      {file && (\\n        <div className=\\\"space-y-2\\\">\\n          <div\\n            className=\\\"flex items-center justify-between gap-2 rounded-xl border px-4 py-2\\\"\\n            key={file.id}\\n          >\\n            <div className=\\\"flex items-center gap-3 overflow-hidden\\\">\\n              <PaperclipIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-4 shrink-0 opacity-60\\\"\\n              />\\n              <div className=\\\"min-w-0\\\">\\n                <p className=\\\"truncate font-medium text-[13px]\\\">\\n                  {file.file.name}\\n                </p>\\n              </div>\\n            </div>\\n\\n            <Button\\n              aria-label=\\\"Remove file\\\"\\n              className=\\\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\\\"\\n              onClick={() => removeFile(files[0]?.id)}\\n              size=\\\"icon\\\"\\n              variant=\\\"ghost\\\"\\n            >\\n              <XIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n            </Button>\\n          </div>\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Single file uploader w/ max size ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-549.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-549\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-549.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  AlertCircleIcon,\\n  FileArchiveIcon,\\n  FileIcon,\\n  FileSpreadsheetIcon,\\n  FileTextIcon,\\n  FileUpIcon,\\n  HeadphonesIcon,\\n  ImageIcon,\\n  VideoIcon,\\n  XIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  formatBytes,\\n  useFileUpload,\\n} from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\n// Create some dummy initial files\\nconst initialFiles = [\\n  {\\n    id: \\\"document.pdf-1744638436563-8u5xuls\\\",\\n    name: \\\"document.pdf\\\",\\n    size: 528737,\\n    type: \\\"application/pdf\\\",\\n    url: \\\"https://example.com/document.pdf\\\",\\n  },\\n  {\\n    id: \\\"intro.zip-1744638436563-8u5xuls\\\",\\n    name: \\\"intro.zip\\\",\\n    size: 252873,\\n    type: \\\"application/zip\\\",\\n    url: \\\"https://example.com/intro.zip\\\",\\n  },\\n  {\\n    id: \\\"conclusion.xlsx-1744638436563-8u5xuls\\\",\\n    name: \\\"conclusion.xlsx\\\",\\n    size: 352873,\\n    type: \\\"application/xlsx\\\",\\n    url: \\\"https://example.com/conclusion.xlsx\\\",\\n  },\\n];\\n\\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\\n\\n  if (\\n    fileType.includes(\\\"pdf\\\") ||\\n    fileName.endsWith(\\\".pdf\\\") ||\\n    fileType.includes(\\\"word\\\") ||\\n    fileName.endsWith(\\\".doc\\\") ||\\n    fileName.endsWith(\\\".docx\\\")\\n  ) {\\n    return <FileTextIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (\\n    fileType.includes(\\\"zip\\\") ||\\n    fileType.includes(\\\"archive\\\") ||\\n    fileName.endsWith(\\\".zip\\\") ||\\n    fileName.endsWith(\\\".rar\\\")\\n  ) {\\n    return <FileArchiveIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (\\n    fileType.includes(\\\"excel\\\") ||\\n    fileName.endsWith(\\\".xls\\\") ||\\n    fileName.endsWith(\\\".xlsx\\\")\\n  ) {\\n    return <FileSpreadsheetIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.includes(\\\"video/\\\")) {\\n    return <VideoIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.includes(\\\"audio/\\\")) {\\n    return <HeadphonesIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.startsWith(\\\"image/\\\")) {\\n    return <ImageIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  return <FileIcon className=\\\"size-4 opacity-60\\\" />;\\n};\\n\\nexport default function Component() {\\n  const maxSize = 100 * 1024 * 1024; // 10MB default\\n  const maxFiles = 10;\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      clearFiles,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    initialFiles,\\n    maxFiles,\\n    maxSize,\\n    multiple: true,\\n  });\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      {/* Drop area */}\\n      <div\\n        className=\\\"flex min-h-40 flex-col items-center justify-center rounded-xl border border-input border-dashed p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-[input:focus]:border-ring has-disabled:opacity-50 has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n        data-dragging={isDragging || undefined}\\n        onClick={openFileDialog}\\n        onDragEnter={handleDragEnter}\\n        onDragLeave={handleDragLeave}\\n        onDragOver={handleDragOver}\\n        onDrop={handleDrop}\\n        role=\\\"button\\\"\\n        tabIndex={-1}\\n      >\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload files\\\"\\n          className=\\\"sr-only\\\"\\n        />\\n\\n        <div className=\\\"flex flex-col items-center justify-center text-center\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n          >\\n            <FileUpIcon className=\\\"size-4 opacity-60\\\" />\\n          </div>\\n          <p className=\\\"mb-1.5 font-medium text-sm\\\">Upload files</p>\\n          <p className=\\\"mb-2 text-muted-foreground text-xs\\\">\\n            Drag & drop or click to browse\\n          </p>\\n          <div className=\\\"flex flex-wrap justify-center gap-1 text-muted-foreground/70 text-xs\\\">\\n            <span>All files</span>\\n            <span>∙</span>\\n            <span>Max {maxFiles} files</span>\\n            <span>∙</span>\\n            <span>Up to {formatBytes(maxSize)}</span>\\n          </div>\\n        </div>\\n      </div>\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      {/* File list */}\\n      {files.length > 0 && (\\n        <div className=\\\"space-y-2\\\">\\n          {files.map((file) => (\\n            <div\\n              className=\\\"flex items-center justify-between gap-2 rounded-lg border bg-background p-2 pe-3\\\"\\n              key={file.id}\\n            >\\n              <div className=\\\"flex items-center gap-3 overflow-hidden\\\">\\n                <div className=\\\"flex aspect-square size-10 shrink-0 items-center justify-center rounded border\\\">\\n                  {getFileIcon(file)}\\n                </div>\\n                <div className=\\\"flex min-w-0 flex-col gap-0.5\\\">\\n                  <p className=\\\"truncate font-medium text-[13px]\\\">\\n                    {file.file instanceof File\\n                      ? file.file.name\\n                      : file.file.name}\\n                  </p>\\n                  <p className=\\\"text-muted-foreground text-xs\\\">\\n                    {formatBytes(\\n                      file.file instanceof File\\n                        ? file.file.size\\n                        : file.file.size,\\n                    )}\\n                  </p>\\n                </div>\\n              </div>\\n\\n              <Button\\n                aria-label=\\\"Remove file\\\"\\n                className=\\\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\\\"\\n                onClick={() => removeFile(file.id)}\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <XIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n              </Button>\\n            </div>\\n          ))}\\n\\n          {/* Remove all files button */}\\n          {files.length > 1 && (\\n            <div>\\n              <Button onClick={clearFiles} size=\\\"sm\\\" variant=\\\"outline\\\">\\n                Remove all files\\n              </Button>\\n            </div>\\n          )}\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Multiple files uploader w/ list ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-55.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-55\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"use-mask-input\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-55.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\nimport { withMask } from \\\"use-mask-input\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Timestamp</Label>\\n      <Input\\n        id={id}\\n        placeholder=\\\"00:00:00\\\"\\n        ref={(input) => {\\n          if (input) {\\n            withMask(\\\"99:99:99\\\", {\\n              placeholder: \\\"-\\\",\\n              showMaskOnHover: false,\\n            })(input);\\n          }\\n        }}\\n        type=\\\"text\\\"\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/eduardoborges/use-mask-input\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          use-mask-input\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"mask\",\n      \"time\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-550.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-550\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-550.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  AlertCircleIcon,\\n  FileArchiveIcon,\\n  FileIcon,\\n  FileSpreadsheetIcon,\\n  FileTextIcon,\\n  HeadphonesIcon,\\n  ImageIcon,\\n  Trash2Icon,\\n  UploadIcon,\\n  VideoIcon,\\n  XIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  formatBytes,\\n  useFileUpload,\\n} from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\\n\\n  if (\\n    fileType.includes(\\\"pdf\\\") ||\\n    fileName.endsWith(\\\".pdf\\\") ||\\n    fileType.includes(\\\"word\\\") ||\\n    fileName.endsWith(\\\".doc\\\") ||\\n    fileName.endsWith(\\\".docx\\\")\\n  ) {\\n    return <FileTextIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (\\n    fileType.includes(\\\"zip\\\") ||\\n    fileType.includes(\\\"archive\\\") ||\\n    fileName.endsWith(\\\".zip\\\") ||\\n    fileName.endsWith(\\\".rar\\\")\\n  ) {\\n    return <FileArchiveIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (\\n    fileType.includes(\\\"excel\\\") ||\\n    fileName.endsWith(\\\".xls\\\") ||\\n    fileName.endsWith(\\\".xlsx\\\")\\n  ) {\\n    return <FileSpreadsheetIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.includes(\\\"video/\\\")) {\\n    return <VideoIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.includes(\\\"audio/\\\")) {\\n    return <HeadphonesIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.startsWith(\\\"image/\\\")) {\\n    return <ImageIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  return <FileIcon className=\\\"size-4 opacity-60\\\" />;\\n};\\n\\n// Create some dummy initial files\\nconst initialFiles = [\\n  {\\n    id: \\\"document.pdf-1744638436563-8u5xuls\\\",\\n    name: \\\"document.pdf\\\",\\n    size: 528737,\\n    type: \\\"application/pdf\\\",\\n    url: \\\"https://example.com/document.pdf\\\",\\n  },\\n  {\\n    id: \\\"intro.zip-1744638436563-8u5xuls\\\",\\n    name: \\\"intro.zip\\\",\\n    size: 252873,\\n    type: \\\"application/zip\\\",\\n    url: \\\"https://example.com/intro.zip\\\",\\n  },\\n  {\\n    id: \\\"conclusion.xlsx-1744638436563-8u5xuls\\\",\\n    name: \\\"conclusion.xlsx\\\",\\n    size: 352873,\\n    type: \\\"application/xlsx\\\",\\n    url: \\\"https://example.com/conclusion.xlsx\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const maxSize = 10 * 1024 * 1024; // 10MB default\\n  const maxFiles = 10;\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      clearFiles,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    initialFiles,\\n    maxFiles,\\n    maxSize,\\n    multiple: true,\\n  });\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      {/* Drop area */}\\n      <div\\n        className=\\\"flex min-h-56 flex-col items-center not-data-[files]:justify-center rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n        data-dragging={isDragging || undefined}\\n        data-files={files.length > 0 || undefined}\\n        onDragEnter={handleDragEnter}\\n        onDragLeave={handleDragLeave}\\n        onDragOver={handleDragOver}\\n        onDrop={handleDrop}\\n      >\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload files\\\"\\n          className=\\\"sr-only\\\"\\n        />\\n\\n        {files.length > 0 ? (\\n          <div className=\\\"flex w-full flex-col gap-3\\\">\\n            <div className=\\\"flex items-center justify-between gap-2\\\">\\n              <h3 className=\\\"truncate font-medium text-sm\\\">\\n                Uploaded Files ({files.length})\\n              </h3>\\n              <Button onClick={clearFiles} size=\\\"sm\\\" variant=\\\"outline\\\">\\n                <Trash2Icon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"-ms-0.5 size-3.5 opacity-60\\\"\\n                />\\n                Remove all\\n              </Button>\\n            </div>\\n            <div className=\\\"w-full space-y-2\\\">\\n              {files.map((file) => (\\n                <div\\n                  className=\\\"flex items-center justify-between gap-2 rounded-lg border bg-background p-2 pe-3\\\"\\n                  key={file.id}\\n                >\\n                  <div className=\\\"flex items-center gap-3 overflow-hidden\\\">\\n                    <div className=\\\"flex aspect-square size-10 shrink-0 items-center justify-center rounded border\\\">\\n                      {getFileIcon(file)}\\n                    </div>\\n                    <div className=\\\"flex min-w-0 flex-col gap-0.5\\\">\\n                      <p className=\\\"truncate font-medium text-[13px]\\\">\\n                        {file.file instanceof File\\n                          ? file.file.name\\n                          : file.file.name}\\n                      </p>\\n                      <p className=\\\"text-muted-foreground text-xs\\\">\\n                        {formatBytes(\\n                          file.file instanceof File\\n                            ? file.file.size\\n                            : file.file.size,\\n                        )}\\n                      </p>\\n                    </div>\\n                  </div>\\n\\n                  <Button\\n                    aria-label=\\\"Remove file\\\"\\n                    className=\\\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\\\"\\n                    onClick={() => removeFile(file.id)}\\n                    size=\\\"icon\\\"\\n                    variant=\\\"ghost\\\"\\n                  >\\n                    <XIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n                  </Button>\\n                </div>\\n              ))}\\n\\n              {files.length < maxFiles && (\\n                <Button\\n                  className=\\\"mt-2 w-full\\\"\\n                  onClick={openFileDialog}\\n                  variant=\\\"outline\\\"\\n                >\\n                  <UploadIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" />\\n                  Add more\\n                </Button>\\n              )}\\n            </div>\\n          </div>\\n        ) : (\\n          <div className=\\\"flex flex-col items-center justify-center text-center\\\">\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n            >\\n              <FileIcon className=\\\"size-4 opacity-60\\\" />\\n            </div>\\n            <p className=\\\"mb-1.5 font-medium text-sm\\\">Upload files</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              Max {maxFiles} files ∙ Up to {maxSize}MB\\n            </p>\\n            <Button className=\\\"mt-4\\\" onClick={openFileDialog} variant=\\\"outline\\\">\\n              <UploadIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" />\\n              Select files\\n            </Button>\\n          </div>\\n        )}\\n      </div>\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Multiple files uploader w/ list inside ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-551.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-551\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/table.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-551.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  AlertCircleIcon,\\n  DownloadIcon,\\n  FileArchiveIcon,\\n  FileIcon,\\n  FileSpreadsheetIcon,\\n  FileTextIcon,\\n  HeadphonesIcon,\\n  ImageIcon,\\n  Trash2Icon,\\n  UploadCloudIcon,\\n  UploadIcon,\\n  VideoIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  formatBytes,\\n  useFileUpload,\\n} from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\n// Create some dummy initial files\\nconst initialFiles = [\\n  {\\n    id: \\\"document.pdf-1744638436563-8u5xuls\\\",\\n    name: \\\"document.pdf\\\",\\n    size: 528737,\\n    type: \\\"application/pdf\\\",\\n    url: \\\"https://coss.com/origin\\\",\\n  },\\n  {\\n    id: \\\"intro.zip-1744638436563-8u5xuls\\\",\\n    name: \\\"intro.zip\\\",\\n    size: 252873,\\n    type: \\\"application/zip\\\",\\n    url: \\\"https://coss.com/origin\\\",\\n  },\\n  {\\n    id: \\\"conclusion.xlsx-1744638436563-8u5xuls\\\",\\n    name: \\\"conclusion.xlsx\\\",\\n    size: 352873,\\n    type: \\\"application/xlsx\\\",\\n    url: \\\"https://coss.com/origin\\\",\\n  },\\n];\\n\\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\\n\\n  if (\\n    fileType.includes(\\\"pdf\\\") ||\\n    fileName.endsWith(\\\".pdf\\\") ||\\n    fileType.includes(\\\"word\\\") ||\\n    fileName.endsWith(\\\".doc\\\") ||\\n    fileName.endsWith(\\\".docx\\\")\\n  ) {\\n    return <FileTextIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (\\n    fileType.includes(\\\"zip\\\") ||\\n    fileType.includes(\\\"archive\\\") ||\\n    fileName.endsWith(\\\".zip\\\") ||\\n    fileName.endsWith(\\\".rar\\\")\\n  ) {\\n    return <FileArchiveIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (\\n    fileType.includes(\\\"excel\\\") ||\\n    fileName.endsWith(\\\".xls\\\") ||\\n    fileName.endsWith(\\\".xlsx\\\")\\n  ) {\\n    return <FileSpreadsheetIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.includes(\\\"video/\\\")) {\\n    return <VideoIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.includes(\\\"audio/\\\")) {\\n    return <HeadphonesIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  if (fileType.startsWith(\\\"image/\\\")) {\\n    return <ImageIcon className=\\\"size-4 opacity-60\\\" />;\\n  }\\n  return <FileIcon className=\\\"size-4 opacity-60\\\" />;\\n};\\n\\nexport default function Component() {\\n  const maxSize = 10 * 1024 * 1024; // 10MB default\\n  const maxFiles = 10;\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      clearFiles,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    initialFiles,\\n    maxFiles,\\n    maxSize,\\n    multiple: true,\\n  });\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      {/* Drop area */}\\n      <div\\n        className=\\\"flex min-h-56 flex-col items-center not-data-[files]:justify-center rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[files]:hidden data-[dragging=true]:bg-accent/50\\\"\\n        data-dragging={isDragging || undefined}\\n        data-files={files.length > 0 || undefined}\\n        onDragEnter={handleDragEnter}\\n        onDragLeave={handleDragLeave}\\n        onDragOver={handleDragOver}\\n        onDrop={handleDrop}\\n      >\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload files\\\"\\n          className=\\\"sr-only\\\"\\n        />\\n        <div className=\\\"flex flex-col items-center justify-center text-center\\\">\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n          >\\n            <FileIcon className=\\\"size-4 opacity-60\\\" />\\n          </div>\\n          <p className=\\\"mb-1.5 font-medium text-sm\\\">Upload files</p>\\n          <p className=\\\"text-muted-foreground text-xs\\\">\\n            Max {maxFiles} files ∙ Up to {formatBytes(maxSize)}\\n          </p>\\n          <Button className=\\\"mt-4\\\" onClick={openFileDialog} variant=\\\"outline\\\">\\n            <UploadIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" />\\n            Select files\\n          </Button>\\n        </div>\\n      </div>\\n      {files.length > 0 && (\\n        <>\\n          {/* Table with files */}\\n          <div className=\\\"flex items-center justify-between gap-2\\\">\\n            <h3 className=\\\"font-medium text-sm\\\">Files ({files.length})</h3>\\n            <div className=\\\"flex gap-2\\\">\\n              <Button onClick={openFileDialog} size=\\\"sm\\\" variant=\\\"outline\\\">\\n                <UploadCloudIcon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"-ms-0.5 size-3.5 opacity-60\\\"\\n                />\\n                Add files\\n              </Button>\\n              <Button onClick={clearFiles} size=\\\"sm\\\" variant=\\\"outline\\\">\\n                <Trash2Icon\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"-ms-0.5 size-3.5 opacity-60\\\"\\n                />\\n                Remove all\\n              </Button>\\n            </div>\\n          </div>\\n          <div className=\\\"overflow-hidden rounded-md border bg-background\\\">\\n            <Table>\\n              <TableHeader className=\\\"text-xs\\\">\\n                <TableRow className=\\\"bg-muted/50\\\">\\n                  <TableHead className=\\\"h-9 py-2\\\">Name</TableHead>\\n                  <TableHead className=\\\"h-9 py-2\\\">Type</TableHead>\\n                  <TableHead className=\\\"h-9 py-2\\\">Size</TableHead>\\n                  <TableHead className=\\\"h-9 w-0 py-2 text-right\\\">\\n                    Actions\\n                  </TableHead>\\n                </TableRow>\\n              </TableHeader>\\n              <TableBody className=\\\"text-[13px]\\\">\\n                {files.map((file) => (\\n                  <TableRow key={file.id}>\\n                    <TableCell className=\\\"max-w-48 py-2 font-medium\\\">\\n                      <span className=\\\"flex items-center gap-2\\\">\\n                        <span className=\\\"shrink-0\\\">{getFileIcon(file)}</span>{\\\" \\\"}\\n                        <span className=\\\"truncate\\\">{file.file.name}</span>\\n                      </span>\\n                    </TableCell>\\n                    <TableCell className=\\\"py-2 text-muted-foreground\\\">\\n                      {file.file.type.split(\\\"/\\\")[1]?.toUpperCase() || \\\"UNKNOWN\\\"}\\n                    </TableCell>\\n                    <TableCell className=\\\"py-2 text-muted-foreground\\\">\\n                      {formatBytes(file.file.size)}\\n                    </TableCell>\\n                    <TableCell className=\\\"whitespace-nowrap py-2 text-right\\\">\\n                      <Button\\n                        aria-label={`Download ${file.file.name}`}\\n                        className=\\\"size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\\\"\\n                        onClick={() => window.open(file.preview, \\\"_blank\\\")}\\n                        size=\\\"icon\\\"\\n                        variant=\\\"ghost\\\"\\n                      >\\n                        <DownloadIcon className=\\\"size-4\\\" />\\n                      </Button>\\n                      <Button\\n                        aria-label={`Remove ${file.file.name}`}\\n                        className=\\\"size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\\\"\\n                        onClick={() => removeFile(file.id)}\\n                        size=\\\"icon\\\"\\n                        variant=\\\"ghost\\\"\\n                      >\\n                        <Trash2Icon className=\\\"size-4\\\" />\\n                      </Button>\\n                    </TableCell>\\n                  </TableRow>\\n                ))}\\n              </TableBody>\\n            </Table>\\n          </div>\\n        </>\\n      )}\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Multiple files uploader w/ table ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-552.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-552\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-552.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  AlertCircleIcon,\\n  FileArchiveIcon,\\n  FileIcon,\\n  FileSpreadsheetIcon,\\n  FileTextIcon,\\n  HeadphonesIcon,\\n  ImageIcon,\\n  Trash2Icon,\\n  UploadIcon,\\n  VideoIcon,\\n  XIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  formatBytes,\\n  useFileUpload,\\n} from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\n// Create some dummy initial files\\nconst initialFiles = [\\n  {\\n    id: \\\"intro.zip-1744638436563-8u5xuls\\\",\\n    name: \\\"intro.zip\\\",\\n    size: 252873,\\n    type: \\\"application/zip\\\",\\n    url: \\\"https://example.com/intro.zip\\\",\\n  },\\n  {\\n    id: \\\"image-01-123456789\\\",\\n    name: \\\"image-01.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=1\\\",\\n  },\\n  {\\n    id: \\\"audio-123456789\\\",\\n    name: \\\"audio.mp3\\\",\\n    size: 1528737,\\n    type: \\\"audio/mpeg\\\",\\n    url: \\\"https://example.com/audio.mp3\\\",\\n  },\\n];\\n\\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\\n\\n  const iconMap = {\\n    archive: {\\n      conditions: (type: string, name: string) =>\\n        type.includes(\\\"zip\\\") ||\\n        type.includes(\\\"archive\\\") ||\\n        name.endsWith(\\\".zip\\\") ||\\n        name.endsWith(\\\".rar\\\"),\\n      icon: FileArchiveIcon,\\n    },\\n    audio: {\\n      conditions: (type: string) => type.includes(\\\"audio/\\\"),\\n      icon: HeadphonesIcon,\\n    },\\n    excel: {\\n      conditions: (type: string, name: string) =>\\n        type.includes(\\\"excel\\\") ||\\n        name.endsWith(\\\".xls\\\") ||\\n        name.endsWith(\\\".xlsx\\\"),\\n      icon: FileSpreadsheetIcon,\\n    },\\n    image: {\\n      conditions: (type: string) => type.startsWith(\\\"image/\\\"),\\n      icon: ImageIcon,\\n    },\\n    pdf: {\\n      conditions: (type: string, name: string) =>\\n        type.includes(\\\"pdf\\\") ||\\n        name.endsWith(\\\".pdf\\\") ||\\n        type.includes(\\\"word\\\") ||\\n        name.endsWith(\\\".doc\\\") ||\\n        name.endsWith(\\\".docx\\\"),\\n      icon: FileTextIcon,\\n    },\\n    video: {\\n      conditions: (type: string) => type.includes(\\\"video/\\\"),\\n      icon: VideoIcon,\\n    },\\n  };\\n\\n  for (const { icon: Icon, conditions } of Object.values(iconMap)) {\\n    if (conditions(fileType, fileName)) {\\n      return <Icon className=\\\"size-5 opacity-60\\\" />;\\n    }\\n  }\\n\\n  return <FileIcon className=\\\"size-5 opacity-60\\\" />;\\n};\\n\\nconst getFilePreview = (file: {\\n  file: File | { type: string; name: string; url?: string };\\n}) => {\\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\\n\\n  const renderImage = (src: string) => (\\n    <img\\n      alt={fileName}\\n      className=\\\"size-full rounded-t-[inherit] object-cover\\\"\\n      src={src}\\n    />\\n  );\\n\\n  return (\\n    <div className=\\\"flex aspect-square items-center justify-center overflow-hidden rounded-t-[inherit] bg-accent\\\">\\n      {fileType.startsWith(\\\"image/\\\") ? (\\n        file.file instanceof File ? (\\n          (() => {\\n            const previewUrl = URL.createObjectURL(file.file);\\n            return renderImage(previewUrl);\\n          })()\\n        ) : file.file.url ? (\\n          renderImage(file.file.url)\\n        ) : (\\n          <ImageIcon className=\\\"size-5 opacity-60\\\" />\\n        )\\n      ) : (\\n        getFileIcon(file)\\n      )}\\n    </div>\\n  );\\n};\\n\\nexport default function Component() {\\n  const maxSizeMB = 5;\\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\\n  const maxFiles = 6;\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      clearFiles,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    initialFiles,\\n    maxFiles,\\n    maxSize,\\n    multiple: true,\\n  });\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      {/* Drop area */}\\n      <div\\n        className=\\\"relative flex min-h-52 flex-col items-center not-data-[files]:justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n        data-dragging={isDragging || undefined}\\n        data-files={files.length > 0 || undefined}\\n        onDragEnter={handleDragEnter}\\n        onDragLeave={handleDragLeave}\\n        onDragOver={handleDragOver}\\n        onDrop={handleDrop}\\n      >\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload image file\\\"\\n          className=\\\"sr-only\\\"\\n        />\\n        {files.length > 0 ? (\\n          <div className=\\\"flex w-full flex-col gap-3\\\">\\n            <div className=\\\"flex items-center justify-between gap-2\\\">\\n              <h3 className=\\\"truncate font-medium text-sm\\\">\\n                Files ({files.length})\\n              </h3>\\n              <div className=\\\"flex gap-2\\\">\\n                <Button onClick={openFileDialog} size=\\\"sm\\\" variant=\\\"outline\\\">\\n                  <UploadIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"-ms-0.5 size-3.5 opacity-60\\\"\\n                  />\\n                  Add files\\n                </Button>\\n                <Button onClick={clearFiles} size=\\\"sm\\\" variant=\\\"outline\\\">\\n                  <Trash2Icon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"-ms-0.5 size-3.5 opacity-60\\\"\\n                  />\\n                  Remove all\\n                </Button>\\n              </div>\\n            </div>\\n\\n            <div className=\\\"grid grid-cols-2 gap-4 md:grid-cols-3\\\">\\n              {files.map((file) => (\\n                <div\\n                  className=\\\"relative flex flex-col rounded-md border bg-background\\\"\\n                  key={file.id}\\n                >\\n                  {getFilePreview(file)}\\n                  <Button\\n                    aria-label=\\\"Remove image\\\"\\n                    className=\\\"-top-2 -right-2 absolute size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\\\"\\n                    onClick={() => removeFile(file.id)}\\n                    size=\\\"icon\\\"\\n                  >\\n                    <XIcon className=\\\"size-3.5\\\" />\\n                  </Button>\\n                  <div className=\\\"flex min-w-0 flex-col gap-0.5 border-t p-3\\\">\\n                    <p className=\\\"truncate font-medium text-[13px]\\\">\\n                      {file.file.name}\\n                    </p>\\n                    <p className=\\\"truncate text-muted-foreground text-xs\\\">\\n                      {formatBytes(file.file.size)}\\n                    </p>\\n                  </div>\\n                </div>\\n              ))}\\n            </div>\\n          </div>\\n        ) : (\\n          <div className=\\\"flex flex-col items-center justify-center px-4 py-3 text-center\\\">\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n            >\\n              <ImageIcon className=\\\"size-4 opacity-60\\\" />\\n            </div>\\n            <p className=\\\"mb-1.5 font-medium text-sm\\\">Drop your files here</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              Max {maxFiles} files ∙ Up to {maxSizeMB}MB\\n            </p>\\n            <Button className=\\\"mt-4\\\" onClick={openFileDialog} variant=\\\"outline\\\">\\n              <UploadIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" />\\n              Select images\\n            </Button>\\n          </div>\\n        )}\\n      </div>\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Mixed content w/ card ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-553.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-553\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-553.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  AlertCircleIcon,\\n  FileArchiveIcon,\\n  FileIcon,\\n  FileSpreadsheetIcon,\\n  FileTextIcon,\\n  HeadphonesIcon,\\n  ImageIcon,\\n  Trash2Icon,\\n  UploadIcon,\\n  VideoIcon,\\n  XIcon,\\n} from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport {\\n  type FileWithPreview,\\n  formatBytes,\\n  useFileUpload,\\n} from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\n// Create some dummy initial files\\nconst initialFiles = [\\n  {\\n    id: \\\"intro.zip-1744638436563-8u5xuls\\\",\\n    name: \\\"intro.zip\\\",\\n    size: 252873,\\n    type: \\\"application/zip\\\",\\n    url: \\\"https://example.com/intro.zip\\\",\\n  },\\n  {\\n    id: \\\"image-01-123456789\\\",\\n    name: \\\"image-01.jpg\\\",\\n    size: 1528737,\\n    type: \\\"image/jpeg\\\",\\n    url: \\\"https://picsum.photos/1000/800?grayscale&random=1\\\",\\n  },\\n  {\\n    id: \\\"audio-123456789\\\",\\n    name: \\\"audio.mp3\\\",\\n    size: 1528737,\\n    type: \\\"audio/mpeg\\\",\\n    url: \\\"https://example.com/audio.mp3\\\",\\n  },\\n];\\n\\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\\n\\n  const iconMap = {\\n    archive: {\\n      conditions: (type: string, name: string) =>\\n        type.includes(\\\"zip\\\") ||\\n        type.includes(\\\"archive\\\") ||\\n        name.endsWith(\\\".zip\\\") ||\\n        name.endsWith(\\\".rar\\\"),\\n      icon: FileArchiveIcon,\\n    },\\n    audio: {\\n      conditions: (type: string) => type.includes(\\\"audio/\\\"),\\n      icon: HeadphonesIcon,\\n    },\\n    excel: {\\n      conditions: (type: string, name: string) =>\\n        type.includes(\\\"excel\\\") ||\\n        name.endsWith(\\\".xls\\\") ||\\n        name.endsWith(\\\".xlsx\\\"),\\n      icon: FileSpreadsheetIcon,\\n    },\\n    image: {\\n      conditions: (type: string) => type.startsWith(\\\"image/\\\"),\\n      icon: ImageIcon,\\n    },\\n    pdf: {\\n      conditions: (type: string, name: string) =>\\n        type.includes(\\\"pdf\\\") ||\\n        name.endsWith(\\\".pdf\\\") ||\\n        type.includes(\\\"word\\\") ||\\n        name.endsWith(\\\".doc\\\") ||\\n        name.endsWith(\\\".docx\\\"),\\n      icon: FileTextIcon,\\n    },\\n    video: {\\n      conditions: (type: string) => type.includes(\\\"video/\\\"),\\n      icon: VideoIcon,\\n    },\\n  };\\n\\n  for (const { icon: Icon, conditions } of Object.values(iconMap)) {\\n    if (conditions(fileType, fileName)) {\\n      return <Icon className=\\\"size-5 opacity-60\\\" />;\\n    }\\n  }\\n\\n  return <FileIcon className=\\\"size-5 opacity-60\\\" />;\\n};\\n\\nconst _getFilePreview = (file: {\\n  file: File | { type: string; name: string; url?: string };\\n}) => {\\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\\n\\n  const renderImage = (src: string) => (\\n    <img\\n      alt={fileName}\\n      className=\\\"size-full rounded-t-[inherit] object-cover\\\"\\n      src={src}\\n    />\\n  );\\n\\n  return (\\n    <div className=\\\"flex aspect-square items-center justify-center overflow-hidden rounded-t-[inherit] bg-accent\\\">\\n      {fileType.startsWith(\\\"image/\\\") ? (\\n        file.file instanceof File ? (\\n          (() => {\\n            const previewUrl = URL.createObjectURL(file.file);\\n            return renderImage(previewUrl);\\n          })()\\n        ) : file.file.url ? (\\n          renderImage(file.file.url)\\n        ) : (\\n          <ImageIcon className=\\\"size-5 opacity-60\\\" />\\n        )\\n      ) : (\\n        getFileIcon(file)\\n      )}\\n    </div>\\n  );\\n};\\n\\n// Type for tracking upload progress\\ntype UploadProgress = {\\n  fileId: string;\\n  progress: number;\\n  completed: boolean;\\n};\\n\\n// Function to simulate file upload with more realistic timing and progress\\nconst simulateUpload = (\\n  totalBytes: number,\\n  onProgress: (progress: number) => void,\\n  onComplete: () => void,\\n) => {\\n  let timeoutId: NodeJS.Timeout;\\n  let uploadedBytes = 0;\\n  let lastProgressReport = 0;\\n\\n  const simulateChunk = () => {\\n    // Simulate variable network conditions with random chunk sizes\\n    const chunkSize = Math.floor(Math.random() * 300000) + 2000;\\n    uploadedBytes = Math.min(totalBytes, uploadedBytes + chunkSize);\\n\\n    // Calculate progress percentage (0-100)\\n    const progressPercent = Math.floor((uploadedBytes / totalBytes) * 100);\\n\\n    // Only report progress if it's changed by at least 1%\\n    if (progressPercent > lastProgressReport) {\\n      lastProgressReport = progressPercent;\\n      onProgress(progressPercent);\\n    }\\n\\n    // Continue simulation if not complete\\n    if (uploadedBytes < totalBytes) {\\n      // Variable delay between 50ms and 500ms to simulate network fluctuations (reduced for faster uploads)\\n      const delay = Math.floor(Math.random() * 450) + 50;\\n\\n      // Occasionally add a longer pause to simulate network congestion (5% chance, shorter duration)\\n      const extraDelay = Math.random() < 0.05 ? 500 : 0;\\n\\n      timeoutId = setTimeout(simulateChunk, delay + extraDelay);\\n    } else {\\n      // Upload complete\\n      onComplete();\\n    }\\n  };\\n\\n  // Start the simulation\\n  timeoutId = setTimeout(simulateChunk, 100);\\n\\n  // Return a cleanup function to cancel the simulation\\n  return () => {\\n    if (timeoutId) {\\n      clearTimeout(timeoutId);\\n    }\\n  };\\n};\\n\\nexport default function Component() {\\n  const maxSizeMB = 5;\\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\\n  const maxFiles = 6;\\n\\n  // State to track upload progress for each file\\n  const [uploadProgress, setUploadProgress] = useState<UploadProgress[]>([]);\\n\\n  // Function to handle newly added files\\n  const handleFilesAdded = (addedFiles: FileWithPreview[]) => {\\n    const newProgressItems = addedFiles.map((file) => ({\\n      completed: false,\\n      fileId: file.id,\\n      progress: 0,\\n    }));\\n\\n    setUploadProgress((prev) => [...prev, ...newProgressItems]);\\n\\n    const cleanupFunctions: Array<() => void> = [];\\n\\n    for (const file of addedFiles) {\\n      const fileSize =\\n        file.file instanceof File ? file.file.size : file.file.size;\\n\\n      const cleanup = simulateUpload(\\n        fileSize,\\n        (progress) => {\\n          setUploadProgress((prev) =>\\n            prev.map((item) =>\\n              item.fileId === file.id ? { ...item, progress } : item,\\n            ),\\n          );\\n        },\\n        () => {\\n          setUploadProgress((prev) =>\\n            prev.map((item) =>\\n              item.fileId === file.id ? { ...item, completed: true } : item,\\n            ),\\n          );\\n        },\\n      );\\n\\n      cleanupFunctions.push(cleanup);\\n    }\\n\\n    return () => {\\n      for (const cleanup of cleanupFunctions) {\\n        cleanup();\\n      }\\n    };\\n  };\\n\\n  // Remove the progress tracking for the file\\n  const handleFileRemoved = (fileId: string) => {\\n    setUploadProgress((prev) => prev.filter((item) => item.fileId !== fileId));\\n  };\\n\\n  const [\\n    { files, isDragging, errors },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      clearFiles,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    initialFiles,\\n    maxFiles,\\n    maxSize,\\n    multiple: true,\\n    onFilesAdded: handleFilesAdded,\\n  });\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      {/* Drop area */}\\n      <div\\n        className=\\\"relative flex min-h-52 flex-col items-center not-data-[files]:justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\\\"\\n        data-dragging={isDragging || undefined}\\n        data-files={files.length > 0 || undefined}\\n        onDragEnter={handleDragEnter}\\n        onDragLeave={handleDragLeave}\\n        onDragOver={handleDragOver}\\n        onDrop={handleDrop}\\n      >\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload image file\\\"\\n          className=\\\"sr-only\\\"\\n        />\\n        {files.length > 0 ? (\\n          <div className=\\\"flex w-full flex-col gap-3\\\">\\n            <div className=\\\"flex items-center justify-between gap-2\\\">\\n              <h3 className=\\\"truncate font-medium text-sm\\\">\\n                Files ({files.length})\\n              </h3>\\n              <div className=\\\"flex gap-2\\\">\\n                <Button onClick={openFileDialog} size=\\\"sm\\\" variant=\\\"outline\\\">\\n                  <UploadIcon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"-ms-0.5 size-3.5 opacity-60\\\"\\n                  />\\n                  Add files\\n                </Button>\\n                <Button\\n                  onClick={() => {\\n                    // Clear all progress tracking\\n                    setUploadProgress([]);\\n                    clearFiles();\\n                  }}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"outline\\\"\\n                >\\n                  <Trash2Icon\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"-ms-0.5 size-3.5 opacity-60\\\"\\n                  />\\n                  Remove all\\n                </Button>\\n              </div>\\n            </div>\\n\\n            <div className=\\\"w-full space-y-2\\\">\\n              {files.map((file) => {\\n                // Find the upload progress for this file once to avoid repeated lookups\\n                const fileProgress = uploadProgress.find(\\n                  (p) => p.fileId === file.id,\\n                );\\n                const isUploading = fileProgress && !fileProgress.completed;\\n\\n                return (\\n                  <div\\n                    className=\\\"flex flex-col gap-1 rounded-lg border bg-background p-2 pe-3 transition-opacity duration-300\\\"\\n                    data-uploading={isUploading || undefined}\\n                    key={file.id}\\n                  >\\n                    <div className=\\\"flex items-center justify-between gap-2\\\">\\n                      <div className=\\\"flex items-center gap-3 overflow-hidden in-data-[uploading=true]:opacity-50\\\">\\n                        <div className=\\\"flex aspect-square size-10 shrink-0 items-center justify-center rounded border\\\">\\n                          {getFileIcon(file)}\\n                        </div>\\n                        <div className=\\\"flex min-w-0 flex-col gap-0.5\\\">\\n                          <p className=\\\"truncate font-medium text-[13px]\\\">\\n                            {file.file instanceof File\\n                              ? file.file.name\\n                              : file.file.name}\\n                          </p>\\n                          <p className=\\\"text-muted-foreground text-xs\\\">\\n                            {formatBytes(\\n                              file.file instanceof File\\n                                ? file.file.size\\n                                : file.file.size,\\n                            )}\\n                          </p>\\n                        </div>\\n                      </div>\\n                      <Button\\n                        aria-label=\\\"Remove file\\\"\\n                        className=\\\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\\\"\\n                        onClick={() => {\\n                          handleFileRemoved(file.id);\\n                          removeFile(file.id);\\n                        }}\\n                        size=\\\"icon\\\"\\n                        variant=\\\"ghost\\\"\\n                      >\\n                        <XIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n                      </Button>\\n                    </div>\\n\\n                    {/* Upload progress bar */}\\n                    {fileProgress &&\\n                      (() => {\\n                        const progress = fileProgress.progress || 0;\\n                        const completed = fileProgress.completed || false;\\n\\n                        if (completed) return null;\\n\\n                        return (\\n                          <div className=\\\"mt-1 flex items-center gap-2\\\">\\n                            <div className=\\\"h-1.5 w-full overflow-hidden rounded-full bg-gray-100\\\">\\n                              <div\\n                                className=\\\"h-full bg-primary transition-all duration-300 ease-out\\\"\\n                                style={{ width: `${progress}%` }}\\n                              />\\n                            </div>\\n                            <span className=\\\"w-10 text-muted-foreground text-xs tabular-nums\\\">\\n                              {progress}%\\n                            </span>\\n                          </div>\\n                        );\\n                      })()}\\n                  </div>\\n                );\\n              })}\\n            </div>\\n          </div>\\n        ) : (\\n          <div className=\\\"flex flex-col items-center justify-center px-4 py-3 text-center\\\">\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\\\"\\n            >\\n              <ImageIcon className=\\\"size-4 opacity-60\\\" />\\n            </div>\\n            <p className=\\\"mb-1.5 font-medium text-sm\\\">Drop your files here</p>\\n            <p className=\\\"text-muted-foreground text-xs\\\">\\n              Max {maxFiles} files ∙ Up to {maxSizeMB}MB\\n            </p>\\n            <Button className=\\\"mt-4\\\" onClick={openFileDialog} variant=\\\"outline\\\">\\n              <UploadIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" />\\n              Select images\\n            </Button>\\n          </div>\\n        )}\\n      </div>\\n\\n      {errors.length > 0 && (\\n        <div\\n          className=\\\"flex items-center gap-1 text-destructive text-xs\\\"\\n          role=\\\"alert\\\"\\n        >\\n          <AlertCircleIcon className=\\\"size-3 shrink-0\\\" />\\n          <span>{errors[0]}</span>\\n        </div>\\n      )}\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-center text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        With simulated progress track ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-554.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-554\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/cropper.json\",\n    \"https://coss.com/origin/r/dialog.json\",\n    \"https://coss.com/origin/r/slider.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-554.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  ArrowLeftIcon,\\n  CircleUserRoundIcon,\\n  XIcon,\\n  ZoomInIcon,\\n  ZoomOutIcon,\\n} from \\\"lucide-react\\\";\\nimport { useCallback, useEffect, useRef, useState } from \\\"react\\\";\\n\\nimport { useFileUpload } from \\\"@/registry/default/hooks/use-file-upload\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\nimport {\\n  Dialog,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogTitle,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\n// Define type for pixel crop area\\ntype Area = { x: number; y: number; width: number; height: number };\\n\\n// Helper function to create a cropped image blob\\nconst createImage = (url: string): Promise<HTMLImageElement> =>\\n  new Promise((resolve, reject) => {\\n    const image = new Image();\\n    image.addEventListener(\\\"load\\\", () => resolve(image));\\n    image.addEventListener(\\\"error\\\", (error) => reject(error));\\n    image.setAttribute(\\\"crossOrigin\\\", \\\"anonymous\\\"); // Needed for canvas Tainted check\\n    image.src = url;\\n  });\\n\\nasync function getCroppedImg(\\n  imageSrc: string,\\n  pixelCrop: Area,\\n  outputWidth: number = pixelCrop.width, // Optional: specify output size\\n  outputHeight: number = pixelCrop.height,\\n): Promise<Blob | null> {\\n  try {\\n    const image = await createImage(imageSrc);\\n    const canvas = document.createElement(\\\"canvas\\\");\\n    const ctx = canvas.getContext(\\\"2d\\\");\\n\\n    if (!ctx) {\\n      return null;\\n    }\\n\\n    // Set canvas size to desired output size\\n    canvas.width = outputWidth;\\n    canvas.height = outputHeight;\\n\\n    // Draw the cropped image onto the canvas\\n    ctx.drawImage(\\n      image,\\n      pixelCrop.x,\\n      pixelCrop.y,\\n      pixelCrop.width,\\n      pixelCrop.height,\\n      0,\\n      0,\\n      outputWidth, // Draw onto the output size\\n      outputHeight,\\n    );\\n\\n    // Convert canvas to blob\\n    return new Promise((resolve) => {\\n      canvas.toBlob((blob) => {\\n        resolve(blob);\\n      }, \\\"image/jpeg\\\"); // Specify format and quality if needed\\n    });\\n  } catch (error) {\\n    console.error(\\\"Error in getCroppedImg:\\\", error);\\n    return null;\\n  }\\n}\\n\\nexport default function Component() {\\n  const [\\n    { files, isDragging },\\n    {\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      openFileDialog,\\n      removeFile,\\n      getInputProps,\\n    },\\n  ] = useFileUpload({\\n    accept: \\\"image/*\\\",\\n  });\\n\\n  const previewUrl = files[0]?.preview || null;\\n  const fileId = files[0]?.id;\\n\\n  const [finalImageUrl, setFinalImageUrl] = useState<string | null>(null);\\n  const [isDialogOpen, setIsDialogOpen] = useState(false);\\n\\n  // Ref to track the previous file ID to detect new uploads\\n  const previousFileIdRef = useRef<string | undefined | null>(null);\\n\\n  // State to store the desired crop area in pixels\\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\\n\\n  // State for zoom level\\n  const [zoom, setZoom] = useState(1);\\n\\n  // Callback for Cropper to provide crop data - Wrap with useCallback\\n  const handleCropChange = useCallback((pixels: Area | null) => {\\n    setCroppedAreaPixels(pixels);\\n  }, []);\\n\\n  const handleApply = async () => {\\n    // Check if we have the necessary data\\n    if (!previewUrl || !fileId || !croppedAreaPixels) {\\n      console.error(\\\"Missing data for apply:\\\", {\\n        croppedAreaPixels,\\n        fileId,\\n        previewUrl,\\n      });\\n      // Remove file if apply is clicked without crop data?\\n      if (fileId) {\\n        removeFile(fileId);\\n        setCroppedAreaPixels(null);\\n      }\\n      return;\\n    }\\n\\n    try {\\n      // 1. Get the cropped image blob using the helper\\n      const croppedBlob = await getCroppedImg(previewUrl, croppedAreaPixels);\\n\\n      if (!croppedBlob) {\\n        throw new Error(\\\"Failed to generate cropped image blob.\\\");\\n      }\\n\\n      // 2. Create a NEW object URL from the cropped blob\\n      const newFinalUrl = URL.createObjectURL(croppedBlob);\\n\\n      // 3. Revoke the OLD finalImageUrl if it exists\\n      if (finalImageUrl) {\\n        URL.revokeObjectURL(finalImageUrl);\\n      }\\n\\n      // 4. Set the final avatar state to the NEW URL\\n      setFinalImageUrl(newFinalUrl);\\n\\n      // 5. Close the dialog (don't remove the file yet)\\n      setIsDialogOpen(false);\\n    } catch (error) {\\n      console.error(\\\"Error during apply:\\\", error);\\n      // Close the dialog even if cropping fails\\n      setIsDialogOpen(false);\\n    }\\n  };\\n\\n  const handleRemoveFinalImage = () => {\\n    if (finalImageUrl) {\\n      URL.revokeObjectURL(finalImageUrl);\\n    }\\n    setFinalImageUrl(null);\\n  };\\n\\n  useEffect(() => {\\n    const currentFinalUrl = finalImageUrl;\\n    // Cleanup function\\n    return () => {\\n      if (currentFinalUrl?.startsWith(\\\"blob:\\\")) {\\n        URL.revokeObjectURL(currentFinalUrl);\\n      }\\n    };\\n  }, [finalImageUrl]);\\n\\n  // Effect to open dialog when a *new* file is ready\\n  useEffect(() => {\\n    // Check if fileId exists and is different from the previous one\\n    if (fileId && fileId !== previousFileIdRef.current) {\\n      setIsDialogOpen(true); // Open dialog for the new file\\n      setCroppedAreaPixels(null); // Reset crop area for the new file\\n      setZoom(1); // Reset zoom for the new file\\n    }\\n    // Update the ref to the current fileId for the next render\\n    previousFileIdRef.current = fileId;\\n  }, [fileId]); // Depend only on fileId\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <div className=\\\"relative inline-flex\\\">\\n        {/* Drop area - uses finalImageUrl */}\\n        <button\\n          aria-label={finalImageUrl ? \\\"Change image\\\" : \\\"Upload image\\\"}\\n          className=\\\"relative flex size-16 items-center justify-center overflow-hidden rounded-full border border-input border-dashed outline-none transition-colors hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-disabled:pointer-events-none has-[img]:border-none has-disabled:opacity-50 data-[dragging=true]:bg-accent/50\\\"\\n          data-dragging={isDragging || undefined}\\n          onClick={openFileDialog}\\n          onDragEnter={handleDragEnter}\\n          onDragLeave={handleDragLeave}\\n          onDragOver={handleDragOver}\\n          onDrop={handleDrop}\\n          type=\\\"button\\\"\\n        >\\n          {finalImageUrl ? (\\n            <img\\n              alt=\\\"User avatar\\\"\\n              className=\\\"size-full object-cover\\\"\\n              height={64}\\n              src={finalImageUrl}\\n              style={{ objectFit: \\\"cover\\\" }}\\n              width={64}\\n            />\\n          ) : (\\n            <div aria-hidden=\\\"true\\\">\\n              <CircleUserRoundIcon className=\\\"size-4 opacity-60\\\" />\\n            </div>\\n          )}\\n        </button>\\n        {/* Remove button - depends on finalImageUrl */}\\n        {finalImageUrl && (\\n          <Button\\n            aria-label=\\\"Remove image\\\"\\n            className=\\\"-top-1 -right-1 absolute size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\\\"\\n            onClick={handleRemoveFinalImage}\\n            size=\\\"icon\\\"\\n          >\\n            <XIcon className=\\\"size-3.5\\\" />\\n          </Button>\\n        )}\\n        <input\\n          {...getInputProps()}\\n          aria-label=\\\"Upload image file\\\"\\n          className=\\\"sr-only\\\"\\n          tabIndex={-1}\\n        />\\n      </div>\\n\\n      {/* Cropper Dialog - Use isDialogOpen for open prop */}\\n      <Dialog onOpenChange={setIsDialogOpen} open={isDialogOpen}>\\n        <DialogContent className=\\\"gap-0 p-0 sm:max-w-140 *:[button]:hidden\\\">\\n          <DialogDescription className=\\\"sr-only\\\">\\n            Crop image dialog\\n          </DialogDescription>\\n          <DialogHeader className=\\\"contents space-y-0 text-left\\\">\\n            <DialogTitle className=\\\"flex items-center justify-between border-b p-4 text-base\\\">\\n              <div className=\\\"flex items-center gap-2\\\">\\n                <Button\\n                  aria-label=\\\"Cancel\\\"\\n                  className=\\\"-my-1 opacity-60\\\"\\n                  onClick={() => setIsDialogOpen(false)}\\n                  size=\\\"icon\\\"\\n                  type=\\\"button\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  <ArrowLeftIcon aria-hidden=\\\"true\\\" />\\n                </Button>\\n                <span>Crop image</span>\\n              </div>\\n              <Button\\n                autoFocus\\n                className=\\\"-my-1\\\"\\n                disabled={!previewUrl}\\n                onClick={handleApply}\\n              >\\n                Apply\\n              </Button>\\n            </DialogTitle>\\n          </DialogHeader>\\n          {previewUrl && (\\n            <Cropper\\n              className=\\\"h-96 sm:h-120\\\"\\n              image={previewUrl}\\n              onCropChange={handleCropChange}\\n              onZoomChange={setZoom}\\n              zoom={zoom}\\n            >\\n              <CropperDescription />\\n              <CropperImage />\\n              <CropperCropArea />\\n            </Cropper>\\n          )}\\n          <DialogFooter className=\\\"border-t px-4 py-6\\\">\\n            <div className=\\\"mx-auto flex w-full max-w-80 items-center gap-4\\\">\\n              <ZoomOutIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 opacity-60\\\"\\n                size={16}\\n              />\\n              <Slider\\n                aria-label=\\\"Zoom slider\\\"\\n                defaultValue={[1]}\\n                max={3}\\n                min={1}\\n                onValueChange={(value) => setZoom(value[0])}\\n                step={0.1}\\n                value={[zoom]}\\n              />\\n              <ZoomInIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"shrink-0 opacity-60\\\"\\n                size={16}\\n              />\\n            </div>\\n          </DialogFooter>\\n        </DialogContent>\\n      </Dialog>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Avatar{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          uploader\\n        </a>{\\\" \\\"}\\n        with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          cropper\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"upload\",\n      \"file\",\n      \"image\",\n      \"drag and drop\",\n      \"crop\",\n      \"dialog\",\n      \"slider\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-555.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-555\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-555.tsx\",\n      \"content\": \"import {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Cropper\\n        className=\\\"h-80\\\"\\n        image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-01_bcxaic.jpg\\\"\\n      >\\n        <CropperDescription />\\n        <CropperImage />\\n        <CropperCropArea />\\n      </Cropper>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Basic cropper ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-556.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-556\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-556.tsx\",\n      \"content\": \"import {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Cropper\\n        aspectRatio={16 / 9}\\n        className=\\\"h-80\\\"\\n        image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-02_a2xwtd.jpg\\\"\\n      >\\n        <CropperDescription />\\n        <CropperImage />\\n        <CropperCropArea />\\n      </Cropper>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with aspect ratio 16:9 ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-557.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-557\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-557.tsx\",\n      \"content\": \"import {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Cropper\\n        className=\\\"h-80\\\"\\n        image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-03_uym8r0.jpg\\\"\\n      >\\n        <CropperDescription />\\n        <CropperImage />\\n        <CropperCropArea className=\\\"border-blue-500\\\" />\\n      </Cropper>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with custom crop area color ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-558.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-558\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-558.tsx\",\n      \"content\": \"import {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Cropper\\n        className=\\\"h-80 bg-black\\\"\\n        image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-04_jflxhw.jpg\\\"\\n      >\\n        <CropperDescription />\\n        <CropperImage />\\n        <CropperCropArea className=\\\"shadow-[0_0_0_9999px_rgba(255,255,255,0.5)]\\\" />\\n      </Cropper>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with custom mask overlay ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-559.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-559\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-559.tsx\",\n      \"content\": \"import {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Cropper\\n        className=\\\"aspect-square size-80\\\"\\n        cropPadding={0}\\n        image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-05_evczb3.jpg\\\"\\n      >\\n        <CropperDescription />\\n        <CropperImage />\\n        <CropperCropArea className=\\\"border-4 border-blue-500\\\" />\\n      </Cropper>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with full size crop area ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-56.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-56\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"emblor\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-56.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { type Tag, TagInput } from \\\"emblor\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nconst tags = [\\n  {\\n    id: \\\"1\\\",\\n    text: \\\"Sport\\\",\\n  },\\n  {\\n    id: \\\"2\\\",\\n    text: \\\"Coding\\\",\\n  },\\n  {\\n    id: \\\"3\\\",\\n    text: \\\"Travel\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [exampleTags, setExampleTags] = useState<Tag[]>(tags);\\n  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with tags</Label>\\n      <TagInput\\n        activeTagIndex={activeTagIndex}\\n        id={id}\\n        inlineTags={false}\\n        inputFieldPosition=\\\"top\\\"\\n        placeholder=\\\"Add a tag\\\"\\n        setActiveTagIndex={setActiveTagIndex}\\n        setTags={(newTags) => {\\n          setExampleTags(newTags);\\n        }}\\n        styleClasses={{\\n          input:\\n            \\\"rounded-md transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\\\",\\n          tag: {\\n            body: \\\"relative h-7 bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7\\\",\\n            closeButton:\\n              \\\"absolute -inset-y-px -end-px p-0 rounded-s-none rounded-e-md flex size-7 transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground/80 hover:text-foreground\\\",\\n          },\\n          tagList: {\\n            container: \\\"gap-1\\\",\\n          },\\n        }}\\n        tags={exampleTags}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/JaleelB/emblor\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          emblor\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"tag\",\n      \"emblor\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-560.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-560\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-560.tsx\",\n      \"content\": \"import {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Cropper\\n        className=\\\"h-80\\\"\\n        image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-06_dduwky.jpg\\\"\\n      >\\n        <CropperDescription />\\n        <CropperImage />\\n        <CropperCropArea className=\\\"rounded-full\\\" />\\n      </Cropper>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with full-rounded mask ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-561.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-561\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-561.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Component() {\\n  const [zoom, setZoom] = useState(1);\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <div className=\\\"flex w-full flex-col gap-4\\\">\\n        <Cropper\\n          className=\\\"h-80\\\"\\n          image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-07_scsejv.jpg\\\"\\n          onZoomChange={setZoom}\\n          zoom={zoom}\\n        >\\n          <CropperDescription />\\n          <CropperImage />\\n          <CropperCropArea />\\n        </Cropper>\\n        <div className=\\\"mx-auto flex w-full max-w-80 items-center gap-1\\\">\\n          <Slider\\n            aria-label=\\\"Zoom slider\\\"\\n            defaultValue={[1]}\\n            max={3}\\n            min={1}\\n            onValueChange={(value) => setZoom(value[0])}\\n            step={0.1}\\n            value={[zoom]}\\n          />\\n          <output className=\\\"block w-10 shrink-0 text-right font-medium text-sm tabular-nums\\\">\\n            {Number.parseFloat(zoom.toFixed(1))}x\\n          </output>\\n        </div>\\n      </div>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with zoom slider ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\",\n      \"slider\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-562.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-562\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-562.tsx\",\n      \"content\": \"import {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Cropper\\n        className=\\\"h-80\\\"\\n        image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-08_wneftq.jpg\\\"\\n        maxZoom={10}\\n        minZoom={2}\\n      >\\n        <CropperDescription />\\n        <CropperImage />\\n        <CropperCropArea />\\n      </Cropper>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with custom zoom limits ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-563.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-563\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-563.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport React from \\\"react\\\";\\n\\nimport {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\ntype Area = { x: number; y: number; width: number; height: number };\\n\\nexport default function Component() {\\n  const [cropData, setCropData] = React.useState<Area | null>(null);\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <div className=\\\"flex w-full flex-col gap-4\\\">\\n        <Cropper\\n          className=\\\"h-80\\\"\\n          cropPadding={20}\\n          image=\\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-09_qskkln.jpg\\\"\\n          onCropChange={setCropData}\\n        >\\n          <CropperDescription />\\n          <CropperImage />\\n          <CropperCropArea />\\n        </Cropper>\\n\\n        {cropData && (\\n          <pre className=\\\"overflow-auto rounded-md border bg-muted px-4 py-3 font-mono text-foreground/80 text-xs\\\">\\n            <code>{JSON.stringify(cropData, null, 2)}</code>\\n          </pre>\\n        )}\\n      </div>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with crop data output ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-564.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-564\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/cropper.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-564.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useEffect, useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Cropper,\\n  CropperCropArea,\\n  CropperDescription,\\n  CropperImage,\\n} from \\\"@/registry/default/ui/cropper\\\";\\n\\n// Define type for pixel crop area\\ntype Area = { x: number; y: number; width: number; height: number };\\n\\n// --- Start: Copied Helper Functions ---\\nconst createImage = (url: string): Promise<HTMLImageElement> =>\\n  new Promise((resolve, reject) => {\\n    const image = new Image();\\n    image.addEventListener(\\\"load\\\", () => resolve(image));\\n    image.addEventListener(\\\"error\\\", (error) => reject(error));\\n    image.setAttribute(\\\"crossOrigin\\\", \\\"anonymous\\\"); // Needed for canvas Tainted check\\n    image.src = url;\\n  });\\n\\nasync function getCroppedImg(\\n  imageSrc: string,\\n  pixelCrop: Area,\\n  outputWidth: number = pixelCrop.width, // Optional: specify output size\\n  outputHeight: number = pixelCrop.height,\\n): Promise<Blob | null> {\\n  try {\\n    const image = await createImage(imageSrc);\\n    const canvas = document.createElement(\\\"canvas\\\");\\n    const ctx = canvas.getContext(\\\"2d\\\");\\n\\n    if (!ctx) {\\n      return null;\\n    }\\n\\n    // Set canvas size to desired output size\\n    canvas.width = outputWidth;\\n    canvas.height = outputHeight;\\n\\n    // Draw the cropped image onto the canvas\\n    ctx.drawImage(\\n      image,\\n      pixelCrop.x,\\n      pixelCrop.y,\\n      pixelCrop.width,\\n      pixelCrop.height,\\n      0,\\n      0,\\n      outputWidth, // Draw onto the output size\\n      outputHeight,\\n    );\\n\\n    // Convert canvas to blob\\n    return new Promise((resolve) => {\\n      canvas.toBlob((blob) => {\\n        resolve(blob);\\n      }, \\\"image/jpeg\\\"); // Specify format and quality if needed\\n    });\\n  } catch (error) {\\n    console.error(\\\"Error in getCroppedImg:\\\", error);\\n    return null;\\n  }\\n}\\n// --- End: Copied Helper Functions ---\\n\\nconst ORIGINAL_IMAGE_URL =\\n  \\\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-10_k24zxk.jpg\\\";\\n\\nexport default function Component() {\\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\\n  const [croppedImageUrl, setCroppedImageUrl] = useState<string | null>(null);\\n\\n  // Callback to update crop area state\\n  const handleCropChange = useCallback((pixels: Area | null) => {\\n    setCroppedAreaPixels(pixels);\\n  }, []);\\n\\n  // Function to handle the crop button click\\n  const handleCrop = async () => {\\n    if (!croppedAreaPixels) {\\n      console.error(\\\"No crop area selected.\\\");\\n      return;\\n    }\\n\\n    try {\\n      const croppedBlob = await getCroppedImg(\\n        ORIGINAL_IMAGE_URL,\\n        croppedAreaPixels,\\n      );\\n      if (!croppedBlob) {\\n        throw new Error(\\\"Failed to generate cropped image blob.\\\");\\n      }\\n\\n      // Create a new object URL\\n      const newCroppedUrl = URL.createObjectURL(croppedBlob);\\n\\n      // Revoke the old URL if it exists\\n      if (croppedImageUrl) {\\n        URL.revokeObjectURL(croppedImageUrl);\\n      }\\n\\n      // Set the new URL\\n      setCroppedImageUrl(newCroppedUrl);\\n    } catch (error) {\\n      console.error(\\\"Error during cropping:\\\", error);\\n      // Optionally: Clear the old image URL on error\\n      if (croppedImageUrl) {\\n        URL.revokeObjectURL(croppedImageUrl);\\n      }\\n      setCroppedImageUrl(null);\\n    }\\n  };\\n\\n  // Effect for cleaning up the object URL\\n  useEffect(() => {\\n    // This is the cleanup function that runs when the component unmounts\\n    // or when croppedImageUrl changes before the next effect runs.\\n    const currentUrl = croppedImageUrl;\\n    return () => {\\n      if (currentUrl?.startsWith(\\\"blob:\\\")) {\\n        URL.revokeObjectURL(currentUrl);\\n        console.log(\\\"Revoked URL:\\\", currentUrl); // Optional: for debugging\\n      }\\n    };\\n  }, [croppedImageUrl]); // Dependency array ensures cleanup runs when URL changes\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <div className=\\\"flex w-full flex-col gap-4 md:flex-row\\\">\\n        <Cropper\\n          className=\\\"h-64 md:flex-1\\\"\\n          image={ORIGINAL_IMAGE_URL}\\n          onCropChange={handleCropChange}\\n        >\\n          <CropperDescription />\\n          <CropperImage />\\n          <CropperCropArea />\\n        </Cropper>\\n        <div className=\\\"flex w-26 flex-col gap-4\\\">\\n          <Button disabled={!croppedAreaPixels} onClick={handleCrop}>\\n            Crop preview\\n          </Button>\\n          {/* Display Area */}\\n          <div className=\\\"aspect-square w-full shrink-0 overflow-hidden rounded-lg border\\\">\\n            {croppedImageUrl ? (\\n              <img\\n                alt=\\\"Cropped result\\\"\\n                className=\\\"h-full w-full object-cover\\\"\\n                src={croppedImageUrl}\\n              />\\n            ) : (\\n              <div className=\\\"flex h-full w-full items-center justify-center bg-muted p-2 text-center text-muted-foreground/80 text-xs\\\">\\n                Image preview\\n              </div>\\n            )}\\n          </div>\\n        </div>\\n      </div>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Cropper with image preview ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/origin-space/image-cropper\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2,\n    \"tags\": [\n      \"image\",\n      \"crop\",\n      \"zoom\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-565.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-565\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-565.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\n\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <Tree indent={indent} tree={tree}>\\n        {tree.getItems().map((item) => {\\n          return (\\n            <TreeItem item={item} key={item.getId()}>\\n              <TreeItemLabel />\\n            </TreeItem>\\n          );\\n        })}\\n      </Tree>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Basic tree with no extra features ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-566.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-566\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-566.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\n\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <div>\\n        <Tree\\n          className=\\\"before:-ms-1 relative before:absolute before:inset-0 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\\\"\\n          indent={indent}\\n          tree={tree}\\n        >\\n          {tree.getItems().map((item) => {\\n            return (\\n              <TreeItem item={item} key={item.getId()}>\\n                <TreeItemLabel className=\\\"before:-inset-y-0.5 before:-z-10 relative before:absolute before:inset-x-0 before:bg-background\\\" />\\n              </TreeItem>\\n            );\\n          })}\\n        </Tree>\\n      </div>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Basic tree with vertical lines ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-567.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-567\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-567.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \\\"lucide-react\\\";\\n\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <div>\\n        <Tree\\n          className=\\\"before:-ms-1 relative before:absolute before:inset-0 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\\\"\\n          indent={indent}\\n          tree={tree}\\n        >\\n          {tree.getItems().map((item) => {\\n            return (\\n              <TreeItem item={item} key={item.getId()}>\\n                <TreeItemLabel className=\\\"before:-inset-y-0.5 before:-z-10 relative before:absolute before:inset-x-0 before:bg-background\\\">\\n                  <span className=\\\"flex items-center gap-2\\\">\\n                    {item.isFolder() ? (\\n                      item.isExpanded() ? (\\n                        <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                      ) : (\\n                        <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                      )\\n                    ) : (\\n                      <FileIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    )}\\n                    {item.getItemName()}\\n                  </span>\\n                </TreeItemLabel>\\n              </TreeItem>\\n            );\\n          })}\\n        </Tree>\\n      </div>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Basic tree with icons ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-568.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-568\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-568.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \\\"lucide-react\\\";\\n\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <div>\\n        <Tree\\n          className=\\\"before:-ms-1 relative before:absolute before:inset-0 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\\\"\\n          indent={indent}\\n          tree={tree}\\n        >\\n          {tree.getItems().map((item) => {\\n            return (\\n              <TreeItem item={item} key={item.getId()}>\\n                <TreeItemLabel className=\\\"before:-inset-y-0.5 before:-z-10 relative before:absolute before:inset-x-0 before:bg-background\\\">\\n                  <span className=\\\"-order-1 flex flex-1 items-center gap-2\\\">\\n                    {item.isFolder() ? (\\n                      item.isExpanded() ? (\\n                        <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                      ) : (\\n                        <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                      )\\n                    ) : (\\n                      <FileIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    )}\\n                    {item.getItemName()}\\n                  </span>\\n                </TreeItemLabel>\\n              </TreeItem>\\n            );\\n          })}\\n        </Tree>\\n      </div>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Basic tree with caret icon on the right ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-569.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-569\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-569.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  createOnDropHandler,\\n  dragAndDropFeature,\\n  hotkeysCoreFeature,\\n  keyboardDragAndDropFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n} from \\\"@headless-tree/core\\\";\\nimport { AssistiveTreeDescription, useTree } from \\\"@headless-tree/react\\\";\\nimport { FolderIcon, FolderOpenIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport {\\n  Tree,\\n  TreeDragLine,\\n  TreeItem,\\n  TreeItemLabel,\\n} from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst initialItems: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const [items, setItems] = useState(initialItems);\\n\\n  const tree = useTree<Item>({\\n    canReorder: true,\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      selectionFeature,\\n      hotkeysCoreFeature,\\n      dragAndDropFeature,\\n      keyboardDragAndDropFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n      selectedItems: [\\\"components\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    onDrop: createOnDropHandler((parentItem, newChildrenIds) => {\\n      setItems((prevItems) => ({\\n        ...prevItems,\\n        [parentItem.getId()]: {\\n          ...prevItems[parentItem.getId()],\\n          children: newChildrenIds,\\n        },\\n      }));\\n    }),\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <Tree indent={indent} tree={tree}>\\n        <AssistiveTreeDescription tree={tree} />\\n        {tree.getItems().map((item) => {\\n          return (\\n            <TreeItem item={item} key={item.getId()}>\\n              <TreeItemLabel>\\n                <span className=\\\"flex items-center gap-2\\\">\\n                  {item.isFolder() &&\\n                    (item.isExpanded() ? (\\n                      <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ) : (\\n                      <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ))}\\n                  {item.getItemName()}\\n                </span>\\n              </TreeItemLabel>\\n            </TreeItem>\\n          );\\n        })}\\n        <TreeDragLine />\\n      </Tree>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Tree with multi-select and drag and drop ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-57.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-57\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"emblor\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-57.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { type Tag, TagInput } from \\\"emblor\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nconst tags = [\\n  {\\n    id: \\\"1\\\",\\n    text: \\\"Red\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [exampleTags, setExampleTags] = useState<Tag[]>(tags);\\n  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Input with inner tags</Label>\\n      <TagInput\\n        activeTagIndex={activeTagIndex}\\n        id={id}\\n        placeholder=\\\"Add a tag\\\"\\n        setActiveTagIndex={setActiveTagIndex}\\n        setTags={(newTags) => {\\n          setExampleTags(newTags);\\n        }}\\n        styleClasses={{\\n          inlineTagsContainer:\\n            \\\"border-input rounded-md bg-background shadow-xs transition-[color,box-shadow] focus-within:border-ring outline-none focus-within:ring-[3px] focus-within:ring-ring/50 p-1 gap-1\\\",\\n          input: \\\"w-full min-w-[80px] shadow-none px-2 h-7\\\",\\n          tag: {\\n            body: \\\"h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7\\\",\\n            closeButton:\\n              \\\"absolute -inset-y-px -end-px p-0 rounded-e-md flex size-7 transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground/80 hover:text-foreground\\\",\\n          },\\n        }}\\n        tags={exampleTags}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/JaleelB/emblor\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          emblor\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"tag\",\n      \"emblor\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-570.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-570\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-570.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  hotkeysCoreFeature,\\n  renamingFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n} from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\n// Initial data\\nconst initialItems: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const [items, setItems] = useState(initialItems);\\n\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      hotkeysCoreFeature,\\n      renamingFeature,\\n      selectionFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    onRename: (item, newName) => {\\n      // Update the item name in our state\\n      const itemId = item.getId();\\n      setItems((prevItems) => ({\\n        ...prevItems,\\n        [itemId]: {\\n          ...prevItems[itemId],\\n          name: newName,\\n        },\\n      }));\\n    },\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <Tree indent={indent} tree={tree}>\\n        {tree.getItems().map((item) => {\\n          return (\\n            <TreeItem item={item} key={item.getId()}>\\n              <TreeItemLabel>\\n                <span className=\\\"flex items-center gap-2\\\">\\n                  {item.isFolder() ? (\\n                    item.isExpanded() ? (\\n                      <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ) : (\\n                      <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    )\\n                  ) : (\\n                    <FileIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                  )}\\n                  {item.isRenaming() ? (\\n                    <Input\\n                      {...item.getRenameInputProps()}\\n                      autoFocus\\n                      className=\\\"-my-0.5 h-6 px-1\\\"\\n                    />\\n                  ) : (\\n                    item.getItemName()\\n                  )}\\n                </span>\\n              </TreeItemLabel>\\n            </TreeItem>\\n          );\\n        })}\\n      </Tree>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Tree with renaming (press F2 to rename) ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-571.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-571\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\",\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-571.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  expandAllFeature,\\n  hotkeysCoreFeature,\\n  searchFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n  type TreeState,\\n} from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\nimport { FolderIcon, FolderOpenIcon, SearchIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  // Store the initial expanded items to reset when search is cleared\\n  const initialExpandedItems = [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"];\\n  const [state, setState] = useState<Partial<TreeState<Item>>>({});\\n\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      hotkeysCoreFeature,\\n      selectionFeature,\\n      searchFeature,\\n      expandAllFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: initialExpandedItems,\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n    setState,\\n    state,\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:nth-2:grow\\\">\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"peer ps-9\\\"\\n          {...{\\n            ...tree.getSearchInputElementProps(),\\n            onChange: (e) => {\\n              // First call the original onChange handler from getSearchInputElementProps\\n              const originalProps = tree.getSearchInputElementProps();\\n              if (originalProps.onChange) {\\n                originalProps.onChange(e);\\n              }\\n\\n              // Then handle our custom logic\\n              const value = e.target.value;\\n\\n              if (value.length > 0) {\\n                // If input has at least one character, expand all items\\n                tree.expandAll();\\n              } else {\\n                // If input is cleared, reset to initial expanded state\\n                setState((prevState) => {\\n                  return {\\n                    ...prevState,\\n                    expandedItems: initialExpandedItems,\\n                  };\\n                });\\n              }\\n            },\\n          }}\\n          placeholder=\\\"Quick search...\\\"\\n          type=\\\"search\\\"\\n        />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n          <SearchIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n        </div>\\n      </div>\\n\\n      <Tree indent={indent} tree={tree}>\\n        {tree.getItems().map((item) => {\\n          return (\\n            <TreeItem item={item} key={item.getId()}>\\n              <TreeItemLabel>\\n                <span className=\\\"flex items-center gap-2\\\">\\n                  {item.isFolder() &&\\n                    (item.isExpanded() ? (\\n                      <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ) : (\\n                      <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ))}\\n                  {item.getItemName()}\\n                </span>\\n              </TreeItemLabel>\\n            </TreeItem>\\n          );\\n        })}\\n      </Tree>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Tree with search highlight ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\",\n      \"filter\",\n      \"search\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-572.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-572\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\",\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-572.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  expandAllFeature,\\n  hotkeysCoreFeature,\\n  searchFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n  type TreeState,\\n} from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\nimport {\\n  CircleXIcon,\\n  FilterIcon,\\n  FolderIcon,\\n  FolderOpenIcon,\\n} from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { useEffect, useRef, useState } from \\\"react\\\";\\n\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  // Store the initial expanded items to reset when search is cleared\\n  const initialExpandedItems = [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"];\\n  const [state, setState] = useState<Partial<TreeState<Item>>>({});\\n  const [searchValue, setSearchValue] = useState(\\\"\\\");\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      hotkeysCoreFeature,\\n      selectionFeature,\\n      searchFeature,\\n      expandAllFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: initialExpandedItems,\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n    setState,\\n    state,\\n  });\\n\\n  // Handle clearing the search\\n  const handleClearSearch = () => {\\n    setSearchValue(\\\"\\\");\\n\\n    // Manually trigger the tree's search onChange with an empty value\\n    // to ensure item.isMatchingSearch() is correctly updated.\\n    const searchProps = tree.getSearchInputElementProps();\\n    if (searchProps.onChange) {\\n      const syntheticEvent = {\\n        target: { value: \\\"\\\" },\\n      } as React.ChangeEvent<HTMLInputElement>; // Cast to the expected event type\\n      searchProps.onChange(syntheticEvent);\\n    }\\n\\n    // Reset tree state to initial expanded items\\n    setState((prevState) => ({\\n      ...prevState,\\n      expandedItems: initialExpandedItems,\\n    }));\\n\\n    // Clear custom filtered items\\n    setFilteredItems([]);\\n\\n    if (inputRef.current) {\\n      inputRef.current.focus();\\n      // Also clear the internal search input\\n      inputRef.current.value = \\\"\\\";\\n    }\\n  };\\n\\n  // Keep track of filtered items separately from the tree's internal search state\\n  const [filteredItems, setFilteredItems] = useState<string[]>([]);\\n\\n  // This function determines if an item should be visible based on our custom filtering\\n  const shouldShowItem = (itemId: string) => {\\n    if (!searchValue || searchValue.length === 0) return true;\\n    return filteredItems.includes(itemId);\\n  };\\n\\n  // Update filtered items when search value changes\\n  useEffect(() => {\\n    if (!searchValue || searchValue.length === 0) {\\n      setFilteredItems([]);\\n      return;\\n    }\\n\\n    // Get all items\\n    const allItems = tree.getItems();\\n\\n    // First, find direct matches\\n    const directMatches = allItems\\n      .filter((item) => {\\n        const name = item.getItemName().toLowerCase();\\n        return name.includes(searchValue.toLowerCase());\\n      })\\n      .map((item) => item.getId());\\n\\n    // Then, find all parent IDs of matching items\\n    const parentIds = new Set<string>();\\n    for (const matchId of directMatches) {\\n      let item = tree.getItems().find((i) => i.getId() === matchId);\\n\\n      while (item?.getParent?.()) {\\n        const parent = item.getParent();\\n        if (parent) {\\n          parentIds.add(parent.getId());\\n          item = parent;\\n        } else {\\n          break;\\n        }\\n      }\\n    }\\n\\n    // Find all children of matching items\\n    const childrenIds = new Set<string>();\\n    for (const matchId of directMatches) {\\n      const item = tree.getItems().find((i) => i.getId() === matchId);\\n\\n      if (item?.isFolder()) {\\n        const getDescendants = (itemId: string) => {\\n          const children = items[itemId]?.children || [];\\n\\n          for (const childId of children) {\\n            childrenIds.add(childId);\\n\\n            if (items[childId]?.children?.length) {\\n              getDescendants(childId);\\n            }\\n          }\\n        };\\n\\n        getDescendants(item.getId());\\n      }\\n    }\\n\\n    // Combine direct matches, parents, and children\\n    setFilteredItems([\\n      ...directMatches,\\n      ...Array.from(parentIds),\\n      ...Array.from(childrenIds),\\n    ]);\\n\\n    // Keep all folders expanded during search to ensure all matches are visible\\n    // Store current expanded state first\\n    const currentExpandedItems = tree.getState().expandedItems || [];\\n\\n    // Get all folder IDs that need to be expanded to show matches\\n    const folderIdsToExpand = allItems\\n      .filter((item) => item.isFolder())\\n      .map((item) => item.getId());\\n\\n    // Update expanded items in the tree state\\n    setState((prevState) => ({\\n      ...prevState,\\n      expandedItems: [\\n        ...new Set([...currentExpandedItems, ...folderIdsToExpand]),\\n      ],\\n    }));\\n  }, [searchValue, tree]);\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:nth-2:grow\\\">\\n      <div className=\\\"relative\\\">\\n        <Input\\n          className=\\\"peer ps-9\\\"\\n          onBlur={(e) => {\\n            // Prevent default blur behavior\\n            e.preventDefault();\\n\\n            // Re-apply the search to ensure it stays active\\n            if (searchValue && searchValue.length > 0) {\\n              const searchProps = tree.getSearchInputElementProps();\\n              if (searchProps.onChange) {\\n                const syntheticEvent = {\\n                  target: { value: searchValue },\\n                } as React.ChangeEvent<HTMLInputElement>;\\n                searchProps.onChange(syntheticEvent);\\n              }\\n            }\\n          }}\\n          onChange={(e) => {\\n            const value = e.target.value;\\n            setSearchValue(value);\\n\\n            // Apply the search to the tree's internal state as well\\n            const searchProps = tree.getSearchInputElementProps();\\n            if (searchProps.onChange) {\\n              searchProps.onChange(e);\\n            }\\n\\n            if (value.length > 0) {\\n              // If input has at least one character, expand all items\\n              tree.expandAll();\\n            } else {\\n              // If input is cleared, reset to initial expanded state\\n              setState((prevState) => ({\\n                ...prevState,\\n                expandedItems: initialExpandedItems,\\n              }));\\n              setFilteredItems([]);\\n            }\\n          }}\\n          placeholder=\\\"Filter items...\\\"\\n          // Prevent the internal search from being cleared on blur\\n          ref={inputRef}\\n          type=\\\"search\\\"\\n          value={searchValue}\\n        />\\n        <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n          <FilterIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n        </div>\\n        {searchValue && (\\n          <button\\n            aria-label=\\\"Clear search\\\"\\n            className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n            onClick={handleClearSearch}\\n            type=\\\"button\\\"\\n          >\\n            <CircleXIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n          </button>\\n        )}\\n      </div>\\n\\n      <Tree indent={indent} tree={tree}>\\n        {searchValue && filteredItems.length === 0 ? (\\n          <p className=\\\"px-3 py-4 text-center text-sm\\\">\\n            No items found for \\\"{searchValue}\\\"\\n          </p>\\n        ) : (\\n          tree.getItems().map((item) => {\\n            const isVisible = shouldShowItem(item.getId());\\n\\n            return (\\n              <TreeItem\\n                className=\\\"data-[visible=false]:hidden\\\"\\n                data-visible={isVisible || !searchValue}\\n                item={item}\\n                key={item.getId()}\\n              >\\n                <TreeItemLabel>\\n                  <span className=\\\"flex items-center gap-2\\\">\\n                    {item.isFolder() &&\\n                      (item.isExpanded() ? (\\n                        <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                      ) : (\\n                        <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                      ))}\\n                    {item.getItemName()}\\n                  </span>\\n                </TreeItemLabel>\\n              </TreeItem>\\n            );\\n          })\\n        )}\\n      </Tree>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Tree with filtering ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\",\n      \"filter\",\n      \"search\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-573.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-573\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-573.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type FeatureImplementation,\\n  hotkeysCoreFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n} from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\nimport { FolderIcon, FolderOpenIcon } from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\n\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nconst doubleClickExpandFeature: FeatureImplementation = {\\n  itemInstance: {\\n    getProps: ({ tree, item, prev }) => ({\\n      ...prev?.(),\\n      onClick: (e: React.MouseEvent) => {\\n        if (e.shiftKey) {\\n          item.selectUpTo(e.ctrlKey || e.metaKey);\\n        } else if (e.ctrlKey || e.metaKey) {\\n          item.toggleSelect();\\n        } else {\\n          tree.setSelectedItems([item.getItemMeta().itemId]);\\n        }\\n\\n        item.setFocused();\\n      },\\n      onDoubleClick: (_e: React.MouseEvent) => {\\n        item.primaryAction();\\n\\n        if (!item.isFolder()) {\\n          return;\\n        }\\n\\n        if (item.isExpanded()) {\\n          item.collapse();\\n        } else {\\n          item.expand();\\n        }\\n      },\\n    }),\\n  },\\n};\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      selectionFeature,\\n      hotkeysCoreFeature,\\n      doubleClickExpandFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n      selectedItems: [\\\"components\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <Tree indent={indent} tree={tree}>\\n        {tree.getItems().map((item) => {\\n          return (\\n            <TreeItem item={item} key={item.getId()}>\\n              <TreeItemLabel>\\n                <span className=\\\"flex items-center gap-2\\\">\\n                  {item.isFolder() &&\\n                    (item.isExpanded() ? (\\n                      <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ) : (\\n                      <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ))}\\n                  {item.getItemName()}\\n                </span>\\n              </TreeItemLabel>\\n            </TreeItem>\\n          );\\n        })}\\n      </Tree>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Tree with items expandable on double click ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-574.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-574\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\",\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-574.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  expandAllFeature,\\n  hotkeysCoreFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n} from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\nimport {\\n  FolderIcon,\\n  FolderOpenIcon,\\n  ListCollapseIcon,\\n  ListTreeIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      selectionFeature,\\n      hotkeysCoreFeature,\\n      expandAllFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n      selectedItems: [\\\"components\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:nth-2:grow\\\">\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Button onClick={() => tree.expandAll()} size=\\\"sm\\\" variant=\\\"outline\\\">\\n          <ListTreeIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-ms-1 opacity-60\\\"\\n            size={16}\\n          />\\n          Expand all\\n        </Button>\\n        <Button onClick={tree.collapseAll} size=\\\"sm\\\" variant=\\\"outline\\\">\\n          <ListCollapseIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-ms-1 opacity-60\\\"\\n            size={16}\\n          />\\n          Collapse all\\n        </Button>\\n      </div>\\n\\n      <Tree indent={indent} tree={tree}>\\n        {tree.getItems().map((item) => {\\n          return (\\n            <TreeItem item={item} key={item.getId()}>\\n              <TreeItemLabel>\\n                <span className=\\\"flex items-center gap-2\\\">\\n                  {item.isFolder() &&\\n                    (item.isExpanded() ? (\\n                      <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ) : (\\n                      <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                    ))}\\n                  {item.getItemName()}\\n                  {item.isFolder() && (\\n                    <span className=\\\"-ms-1 text-muted-foreground\\\">\\n                      {`(${item.getChildren().length})`}\\n                    </span>\\n                  )}\\n                </span>\\n              </TreeItemLabel>\\n            </TreeItem>\\n          );\\n        })}\\n      </Tree>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Tree with expand/collapse all buttons ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com/\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-575.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-575\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-575.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  createOnDropHandler,\\n  dragAndDropFeature,\\n  hotkeysCoreFeature,\\n  keyboardDragAndDropFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n} from \\\"@headless-tree/core\\\";\\nimport { AssistiveTreeDescription, useTree } from \\\"@headless-tree/react\\\";\\nimport {\\n  RiBracesLine,\\n  RiCodeSSlashLine,\\n  RiFileLine,\\n  RiFileTextLine,\\n  RiImageLine,\\n  RiReactjsLine,\\n} from \\\"@remixicon/react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n  fileExtension?: string;\\n}\\n\\nconst initialItems: Record<string, Item> = {\\n  app: {\\n    children: [\\\"app/layout.tsx\\\", \\\"app/page.tsx\\\", \\\"app/(dashboard)\\\", \\\"app/api\\\"],\\n    name: \\\"app\\\",\\n  },\\n  \\\"app/(dashboard)\\\": {\\n    children: [\\\"app/(dashboard)/dashboard\\\"],\\n    name: \\\"(dashboard)\\\",\\n  },\\n  \\\"app/(dashboard)/dashboard\\\": {\\n    children: [\\\"app/(dashboard)/dashboard/page.tsx\\\"],\\n    name: \\\"dashboard\\\",\\n  },\\n  \\\"app/(dashboard)/dashboard/page.tsx\\\": {\\n    fileExtension: \\\"tsx\\\",\\n    name: \\\"page.tsx\\\",\\n  },\\n  \\\"app/api\\\": { children: [\\\"app/api/hello\\\"], name: \\\"api\\\" },\\n  \\\"app/api/hello\\\": { children: [\\\"app/api/hello/route.ts\\\"], name: \\\"hello\\\" },\\n  \\\"app/api/hello/route.ts\\\": { fileExtension: \\\"ts\\\", name: \\\"route.ts\\\" },\\n  \\\"app/layout.tsx\\\": { fileExtension: \\\"tsx\\\", name: \\\"layout.tsx\\\" },\\n  \\\"app/page.tsx\\\": { fileExtension: \\\"tsx\\\", name: \\\"page.tsx\\\" },\\n  components: {\\n    children: [\\\"components/button.tsx\\\", \\\"components/card.tsx\\\"],\\n    name: \\\"components\\\",\\n  },\\n  \\\"components/button.tsx\\\": { fileExtension: \\\"tsx\\\", name: \\\"button.tsx\\\" },\\n  \\\"components/card.tsx\\\": { fileExtension: \\\"tsx\\\", name: \\\"card.tsx\\\" },\\n  lib: { children: [\\\"lib/utils.ts\\\"], name: \\\"lib\\\" },\\n  \\\"lib/utils.ts\\\": { fileExtension: \\\"ts\\\", name: \\\"utils.ts\\\" },\\n  \\\"next.config.mjs\\\": { fileExtension: \\\"mjs\\\", name: \\\"next.config.mjs\\\" },\\n  \\\"package.json\\\": { fileExtension: \\\"json\\\", name: \\\"package.json\\\" },\\n  public: {\\n    children: [\\\"public/favicon.ico\\\", \\\"public/vercel.svg\\\"],\\n    name: \\\"public\\\",\\n  },\\n  \\\"public/favicon.ico\\\": { fileExtension: \\\"ico\\\", name: \\\"favicon.ico\\\" },\\n  \\\"public/vercel.svg\\\": { fileExtension: \\\"svg\\\", name: \\\"vercel.svg\\\" },\\n  \\\"README.md\\\": { fileExtension: \\\"md\\\", name: \\\"README.md\\\" },\\n  root: {\\n    children: [\\n      \\\"app\\\",\\n      \\\"components\\\",\\n      \\\"lib\\\",\\n      \\\"public\\\",\\n      \\\"package.json\\\",\\n      \\\"tailwind.config.ts\\\",\\n      \\\"tsconfig.json\\\",\\n      \\\"next.config.mjs\\\",\\n      \\\"README.md\\\",\\n    ],\\n    name: \\\"Project Root\\\",\\n  },\\n  \\\"tailwind.config.ts\\\": { fileExtension: \\\"ts\\\", name: \\\"tailwind.config.ts\\\" },\\n  \\\"tsconfig.json\\\": { fileExtension: \\\"json\\\", name: \\\"tsconfig.json\\\" },\\n};\\n\\n// Helper function to get icon based on file extension\\nfunction getFileIcon(extension: string | undefined, className: string) {\\n  switch (extension) {\\n    case \\\"tsx\\\":\\n    case \\\"jsx\\\":\\n      return <RiReactjsLine className={className} />;\\n    case \\\"ts\\\":\\n    case \\\"js\\\":\\n    case \\\"mjs\\\":\\n      return <RiCodeSSlashLine className={className} />;\\n    case \\\"json\\\":\\n      return <RiBracesLine className={className} />;\\n    case \\\"svg\\\":\\n    case \\\"ico\\\":\\n    case \\\"png\\\":\\n    case \\\"jpg\\\":\\n      return <RiImageLine className={className} />;\\n    case \\\"md\\\":\\n      return <RiFileTextLine className={className} />;\\n    default:\\n      return <RiFileLine className={className} />;\\n  }\\n}\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const [items, setItems] = useState(initialItems);\\n\\n  const tree = useTree<Item>({\\n    canReorder: false,\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId]?.children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      selectionFeature,\\n      hotkeysCoreFeature,\\n      dragAndDropFeature,\\n      keyboardDragAndDropFeature,\\n    ],\\n    getItemName: (item) => item.getItemData()?.name ?? \\\"Unknown\\\",\\n    indent,\\n    initialState: {\\n      expandedItems: [\\\"app\\\", \\\"app/(dashboard)\\\", \\\"app/(dashboard)/dashboard\\\"],\\n      selectedItems: [\\\"components\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    onDrop: createOnDropHandler((parentItem, newChildrenIds) => {\\n      setItems((prevItems) => {\\n        // Sort the children alphabetically\\n        const sortedChildren = [...newChildrenIds].sort((a, b) => {\\n          const itemA = prevItems[a];\\n          const itemB = prevItems[b];\\n\\n          // First sort folders before files\\n          const isAFolder = (itemA?.children?.length ?? 0) > 0;\\n          const isBFolder = (itemB?.children?.length ?? 0) > 0;\\n\\n          if (isAFolder && !isBFolder) return -1;\\n          if (!isAFolder && isBFolder) return 1;\\n\\n          // Then sort alphabetically by name\\n          return (itemA?.name ?? \\\"\\\").localeCompare(itemB?.name ?? \\\"\\\");\\n        });\\n\\n        return {\\n          ...prevItems,\\n          [parentItem.getId()]: {\\n            ...prevItems[parentItem.getId()],\\n            children: sortedChildren,\\n          },\\n        };\\n      });\\n    }),\\n    rootItemId: \\\"root\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <div>\\n        <Tree\\n          className=\\\"before:-ms-1 relative before:absolute before:inset-0 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\\\"\\n          indent={indent}\\n          tree={tree}\\n        >\\n          <AssistiveTreeDescription tree={tree} />\\n          {tree.getItems().map((item) => {\\n            return (\\n              <TreeItem className=\\\"pb-0!\\\" item={item} key={item.getId()}>\\n                <TreeItemLabel className=\\\"rounded-none py-1\\\">\\n                  <span className=\\\"flex items-center gap-2\\\">\\n                    {!item.isFolder() &&\\n                      getFileIcon(\\n                        item.getItemData()?.fileExtension,\\n                        \\\"text-muted-foreground pointer-events-none size-4\\\",\\n                      )}\\n                    {item.getItemName()}\\n                  </span>\\n                </TreeItemLabel>\\n              </TreeItem>\\n            );\\n          })}\\n        </Tree>\\n      </div>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        File editor with drag and drop ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-576.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-576\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-576.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\n\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  href?: string;\\n  children?: string[];\\n  current?: boolean;\\n}\\n\\nconst items: Record<string, Item> = {\\n  advanced: { href: \\\"#\\\", name: \\\"Advanced Usage\\\" },\\n  api: { children: [\\\"endpoints\\\", \\\"models\\\"], name: \\\"API Reference\\\" },\\n  endpoints: { href: \\\"#\\\", name: \\\"Endpoints\\\" },\\n  examples: { href: \\\"#\\\", name: \\\"Code Examples\\\" },\\n  faq: { href: \\\"#\\\", name: \\\"FAQ\\\" },\\n  \\\"getting-started\\\": {\\n    children: [\\\"installation\\\", \\\"setup\\\"],\\n    name: \\\"Getting Started\\\",\\n  },\\n  guides: { children: [\\\"getting-started\\\", \\\"advanced\\\"], name: \\\"User Guides\\\" },\\n  installation: { current: true, href: \\\"#\\\", name: \\\"Installation\\\" },\\n  main: { children: [\\\"guides\\\", \\\"api\\\", \\\"resources\\\"], name: \\\"Documentation\\\" },\\n  models: { href: \\\"#\\\", name: \\\"Data Models\\\" },\\n  resources: { children: [\\\"examples\\\", \\\"faq\\\"], name: \\\"Resources\\\" },\\n  setup: { href: \\\"#\\\", name: \\\"Configuration\\\" },\\n};\\n\\nconst indent = 20;\\n\\n// Find the path from root to the current item\\nfunction findPathToCurrent(\\n  items: Record<string, Item>,\\n  rootId: string,\\n): string[] {\\n  const path: string[] = [];\\n\\n  function findPath(itemId: string): boolean {\\n    const item = items[itemId];\\n    if (!item) return false;\\n\\n    // If this is the current item, we found the path\\n    if (item.current) {\\n      path.unshift(itemId);\\n      return true;\\n    }\\n\\n    // If this item has children, search them\\n    if (item.children?.length) {\\n      for (const childId of item.children) {\\n        if (findPath(childId)) {\\n          // If we found the path in this branch, add this item to the path\\n          path.unshift(itemId);\\n          return true;\\n        }\\n      }\\n    }\\n\\n    return false;\\n  }\\n\\n  findPath(rootId);\\n  return path;\\n}\\n\\n// Get all parent IDs that need to be expanded\\nconst pathToCurrent = findPathToCurrent(items, \\\"main\\\");\\n// Remove the current item from the path if it's a leaf node\\nconst expandedItems = pathToCurrent.filter((id) => items[id].children?.length);\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      expandedItems,\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"main\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <Tree indent={indent} tree={tree}>\\n        {tree.getItems().map((item) => {\\n          return (\\n            <TreeItem\\n              asChild={!!item.getItemData()?.href}\\n              item={item}\\n              key={item.getId()}\\n            >\\n              {item.getItemData()?.href ? (\\n                <a\\n                  data-current={item.getItemData().current}\\n                  href={item.getItemData().href}\\n                >\\n                  <TreeItemLabel className=\\\"in-data-[current=true]:bg-accent in-data-[current=true]:text-accent-foreground\\\" />\\n                </a>\\n              ) : (\\n                <TreeItemLabel />\\n              )}\\n            </TreeItem>\\n          );\\n        })}\\n      </Tree>\\n\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Menu navigation tree ∙{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://headless-tree.lukasbach.com\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          API\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\",\n      \"menu\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-577.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-577\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-577.tsx\",\n      \"content\": \"import Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { active: true, href: \\\"#\\\", label: \\\"Home\\\" },\\n  { href: \\\"#\\\", label: \\\"Features\\\" },\\n  { href: \\\"#\\\", label: \\\"Pricing\\\" },\\n  { href: \\\"#\\\", label: \\\"About\\\" },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link, _index) => (\\n                    <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                      <NavigationMenuLink\\n                        active={link.active}\\n                        className=\\\"py-1.5\\\"\\n                        href={link.href}\\n                      >\\n                        {link.label}\\n                      </NavigationMenuLink>\\n                    </NavigationMenuItem>\\n                  ))}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          {/* Main nav */}\\n          <div className=\\\"flex items-center gap-6\\\">\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n            {/* Navigation menu */}\\n            <NavigationMenu className=\\\"max-md:hidden\\\">\\n              <NavigationMenuList className=\\\"gap-2\\\">\\n                {navigationLinks.map((link, _index) => (\\n                  <NavigationMenuItem key={link.label}>\\n                    <NavigationMenuLink\\n                      active={link.active}\\n                      className=\\\"py-1.5 font-medium text-muted-foreground hover:text-primary\\\"\\n                      href={link.href}\\n                    >\\n                      {link.label}\\n                    </NavigationMenuLink>\\n                  </NavigationMenuItem>\\n                ))}\\n              </NavigationMenuList>\\n            </NavigationMenu>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\" variant=\\\"ghost\\\">\\n            <a href=\\\"#\\\">Sign In</a>\\n          </Button>\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\">\\n            <a href=\\\"#\\\">Get Started</a>\\n          </Button>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-578.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-578\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-578.tsx\",\n      \"content\": \"import { BookOpenIcon, InfoIcon, LifeBuoyIcon } from \\\"lucide-react\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuContent,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n  NavigationMenuTrigger,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { href: \\\"#\\\", label: \\\"Home\\\" },\\n  {\\n    items: [\\n      {\\n        description: \\\"Browse all components in the library.\\\",\\n        href: \\\"#\\\",\\n        label: \\\"Components\\\",\\n      },\\n      {\\n        description: \\\"Learn how to use the library.\\\",\\n        href: \\\"#\\\",\\n        label: \\\"Documentation\\\",\\n      },\\n      {\\n        description: \\\"Pre-built layouts for common use cases.\\\",\\n        href: \\\"#\\\",\\n        label: \\\"Templates\\\",\\n      },\\n    ],\\n    label: \\\"Features\\\",\\n    submenu: true,\\n    type: \\\"description\\\",\\n  },\\n  {\\n    items: [\\n      { href: \\\"#\\\", label: \\\"Product A\\\" },\\n      { href: \\\"#\\\", label: \\\"Product B\\\" },\\n      { href: \\\"#\\\", label: \\\"Product C\\\" },\\n      { href: \\\"#\\\", label: \\\"Product D\\\" },\\n    ],\\n    label: \\\"Pricing\\\",\\n    submenu: true,\\n    type: \\\"simple\\\",\\n  },\\n  {\\n    items: [\\n      { href: \\\"#\\\", icon: \\\"BookOpenIcon\\\", label: \\\"Getting Started\\\" },\\n      { href: \\\"#\\\", icon: \\\"LifeBuoyIcon\\\", label: \\\"Tutorials\\\" },\\n      { href: \\\"#\\\", icon: \\\"InfoIcon\\\", label: \\\"About Us\\\" },\\n    ],\\n    label: \\\"About\\\",\\n    submenu: true,\\n    type: \\\"icon\\\",\\n  },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-64 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link, index) => (\\n                    <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                      {link.submenu ? (\\n                        <>\\n                          <div className=\\\"px-2 py-1.5 font-medium text-muted-foreground text-xs\\\">\\n                            {link.label}\\n                          </div>\\n                          <ul>\\n                            {link.items.map((item, _itemIndex) => (\\n                              <li key={item.label}>\\n                                <NavigationMenuLink\\n                                  className=\\\"py-1.5\\\"\\n                                  href={item.href}\\n                                >\\n                                  {item.label}\\n                                </NavigationMenuLink>\\n                              </li>\\n                            ))}\\n                          </ul>\\n                        </>\\n                      ) : (\\n                        <NavigationMenuLink className=\\\"py-1.5\\\" href={link.href}>\\n                          {link.label}\\n                        </NavigationMenuLink>\\n                      )}\\n                      {/* Add separator between different types of items */}\\n                      {index < navigationLinks.length - 1 &&\\n                        // Show separator if:\\n                        // 1. One is submenu and one is simple link OR\\n                        // 2. Both are submenus but with different types\\n                        ((!link.submenu &&\\n                          navigationLinks[index + 1].submenu) ||\\n                          (link.submenu &&\\n                            !navigationLinks[index + 1].submenu) ||\\n                          (link.submenu &&\\n                            navigationLinks[index + 1].submenu &&\\n                            link.type !== navigationLinks[index + 1].type)) && (\\n                          <div\\n                            aria-orientation=\\\"horizontal\\\"\\n                            className=\\\"-mx-1 my-1 h-px w-full bg-border\\\"\\n                            role=\\\"separator\\\"\\n                            tabIndex={-1}\\n                          />\\n                        )}\\n                    </NavigationMenuItem>\\n                  ))}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          {/* Main nav */}\\n          <div className=\\\"flex items-center gap-6\\\">\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n            {/* Navigation menu */}\\n            <NavigationMenu className=\\\"max-md:hidden\\\" viewport={false}>\\n              <NavigationMenuList className=\\\"gap-2\\\">\\n                {navigationLinks.map((link) => (\\n                  <NavigationMenuItem key={link.label}>\\n                    {link.submenu ? (\\n                      <>\\n                        <NavigationMenuTrigger className=\\\"*:[svg]:-me-0.5 bg-transparent px-2 py-1.5 font-medium text-muted-foreground hover:text-primary *:[svg]:size-3.5\\\">\\n                          {link.label}\\n                        </NavigationMenuTrigger>\\n                        <NavigationMenuContent className=\\\"data-[motion=from-end]:slide-in-from-right-16! data-[motion=from-start]:slide-in-from-left-16! data-[motion=to-end]:slide-out-to-right-16! data-[motion=to-start]:slide-out-to-left-16! z-50 p-1\\\">\\n                          <ul\\n                            className={cn(\\n                              link.type === \\\"description\\\"\\n                                ? \\\"min-w-64\\\"\\n                                : \\\"min-w-48\\\",\\n                            )}\\n                          >\\n                            {link.items.map((item) => (\\n                              <li key={item.label}>\\n                                <NavigationMenuLink\\n                                  className=\\\"py-1.5\\\"\\n                                  href={item.href}\\n                                >\\n                                  {/* Display icon if present */}\\n                                  {link.type === \\\"icon\\\" && \\\"icon\\\" in item && (\\n                                    <div className=\\\"flex items-center gap-2\\\">\\n                                      {item.icon === \\\"BookOpenIcon\\\" && (\\n                                        <BookOpenIcon\\n                                          aria-hidden=\\\"true\\\"\\n                                          className=\\\"text-foreground opacity-60\\\"\\n                                          size={16}\\n                                        />\\n                                      )}\\n                                      {item.icon === \\\"LifeBuoyIcon\\\" && (\\n                                        <LifeBuoyIcon\\n                                          aria-hidden=\\\"true\\\"\\n                                          className=\\\"text-foreground opacity-60\\\"\\n                                          size={16}\\n                                        />\\n                                      )}\\n                                      {item.icon === \\\"InfoIcon\\\" && (\\n                                        <InfoIcon\\n                                          aria-hidden=\\\"true\\\"\\n                                          className=\\\"text-foreground opacity-60\\\"\\n                                          size={16}\\n                                        />\\n                                      )}\\n                                      <span>{item.label}</span>\\n                                    </div>\\n                                  )}\\n\\n                                  {/* Display label with description if present */}\\n                                  {link.type === \\\"description\\\" &&\\n                                  \\\"description\\\" in item ? (\\n                                    <div className=\\\"space-y-1\\\">\\n                                      <div className=\\\"font-medium\\\">\\n                                        {item.label}\\n                                      </div>\\n                                      <p className=\\\"line-clamp-2 text-muted-foreground text-xs\\\">\\n                                        {item.description}\\n                                      </p>\\n                                    </div>\\n                                  ) : (\\n                                    // Display simple label if not icon or description type\\n                                    !link.type ||\\n                                    (link.type !== \\\"icon\\\" &&\\n                                      link.type !== \\\"description\\\" && (\\n                                        <span>{item.label}</span>\\n                                      ))\\n                                  )}\\n                                </NavigationMenuLink>\\n                              </li>\\n                            ))}\\n                          </ul>\\n                        </NavigationMenuContent>\\n                      </>\\n                    ) : (\\n                      <NavigationMenuLink\\n                        className=\\\"py-1.5 font-medium text-muted-foreground hover:text-primary\\\"\\n                        href={link.href}\\n                      >\\n                        {link.label}\\n                      </NavigationMenuLink>\\n                    )}\\n                  </NavigationMenuItem>\\n                ))}\\n              </NavigationMenuList>\\n            </NavigationMenu>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\" variant=\\\"ghost\\\">\\n            <a href=\\\"#\\\">Sign In</a>\\n          </Button>\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\">\\n            <a href=\\\"#\\\">Get Started</a>\\n          </Button>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-579.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-579\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-579.tsx\",\n      \"content\": \"import Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { active: true, href: \\\"#\\\", label: \\\"Home\\\" },\\n  { href: \\\"#\\\", label: \\\"Features\\\" },\\n  { href: \\\"#\\\", label: \\\"Pricing\\\" },\\n  { href: \\\"#\\\", label: \\\"About\\\" },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex gap-2\\\">\\n          <div className=\\\"flex items-center md:hidden\\\">\\n            {/* Mobile menu trigger */}\\n            <Popover>\\n              <PopoverTrigger asChild>\\n                <Button className=\\\"group size-8\\\" size=\\\"icon\\\" variant=\\\"ghost\\\">\\n                  <svg\\n                    className=\\\"pointer-events-none\\\"\\n                    fill=\\\"none\\\"\\n                    height={16}\\n                    stroke=\\\"currentColor\\\"\\n                    strokeLinecap=\\\"round\\\"\\n                    strokeLinejoin=\\\"round\\\"\\n                    strokeWidth=\\\"2\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    width={16}\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                  >\\n                    <path\\n                      className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                      d=\\\"M4 12L20 12\\\"\\n                    />\\n                    <path\\n                      className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                      d=\\\"M4 12H20\\\"\\n                    />\\n                    <path\\n                      className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                      d=\\\"M4 12H20\\\"\\n                    />\\n                  </svg>\\n                </Button>\\n              </PopoverTrigger>\\n              <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n                <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                  <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                    {navigationLinks.map((link, index) => (\\n                      <NavigationMenuItem\\n                        className=\\\"w-full\\\"\\n                        key={String(index)}\\n                      >\\n                        <NavigationMenuLink\\n                          data-active={link.active ? \\\"\\\" : undefined}\\n                          className=\\\"py-1.5\\\"\\n                          href={link.href}\\n                        >\\n                          {link.label}\\n                        </NavigationMenuLink>\\n                      </NavigationMenuItem>\\n                    ))}\\n                  </NavigationMenuList>\\n                </NavigationMenu>\\n              </PopoverContent>\\n            </Popover>\\n          </div>\\n          {/* Main nav */}\\n          <div className=\\\"flex items-center gap-6\\\">\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n            {/* Navigation menu */}\\n            <NavigationMenu className=\\\"h-full *:h-full max-md:hidden\\\">\\n              <NavigationMenuList className=\\\"h-full gap-2\\\">\\n                {navigationLinks.map((link, index) => (\\n                  <NavigationMenuItem className=\\\"h-full\\\" key={String(index)}>\\n                    <NavigationMenuLink\\n                      data-active={link.active ? \\\"\\\" : undefined}\\n                      className=\\\"h-full justify-center rounded-none border-transparent border-y-2 py-1.5 font-medium text-muted-foreground hover:border-b-primary hover:bg-transparent hover:text-primary data-[active]:border-b-primary data-[active]:bg-transparent!\\\"\\n                      href={link.href}\\n                    >\\n                      {link.label}\\n                    </NavigationMenuLink>\\n                  </NavigationMenuItem>\\n                ))}\\n              </NavigationMenuList>\\n            </NavigationMenu>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\" variant=\\\"ghost\\\">\\n            <a href=\\\"#\\\">Sign In</a>\\n          </Button>\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\">\\n            <a href=\\\"#\\\">Get Started</a>\\n          </Button>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-58.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-58\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"input-otp\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-58.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { OTPInput, type SlotProps } from \\\"input-otp\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>OTP input (spaced)</Label>\\n      <OTPInput\\n        containerClassName=\\\"flex items-center gap-3 has-disabled:opacity-50\\\"\\n        id={id}\\n        maxLength={4}\\n        render={({ slots }) => (\\n          <div className=\\\"flex gap-2\\\">\\n            {slots.map((slot, idx) => (\\n              <Slot key={String(idx)} {...slot} />\\n            ))}\\n          </div>\\n        )}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Built with{\\\" \\\"}\\n        <a\\n          className=\\\"underline hover:text-foreground\\\"\\n          href=\\\"https://github.com/guilhermerodz/input-otp\\\"\\n          rel=\\\"noreferrer noopener nofollow\\\"\\n          target=\\\"_blank\\\"\\n        >\\n          Input OTP\\n        </a>\\n      </p>\\n    </div>\\n  );\\n}\\n\\nfunction Slot(props: SlotProps) {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex size-9 items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow]\\\",\\n        { \\\"z-10 border-ring ring-[3px] ring-ring/50\\\": props.isActive },\\n      )}\\n    >\\n      {props.char !== null && <div>{props.char}</div>}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"input\",\n      \"label\",\n      \"otp\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-580.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-580\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-580.tsx\",\n      \"content\": \"import { SearchIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { href: \\\"#\\\", label: \\\"Products\\\" },\\n  { href: \\\"#\\\", label: \\\"Categories\\\" },\\n  { href: \\\"#\\\", label: \\\"Deals\\\" },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex flex-1 items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link) => (\\n                    <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                      <NavigationMenuLink className=\\\"py-1.5\\\" href={link.href}>\\n                        {link.label}\\n                      </NavigationMenuLink>\\n                    </NavigationMenuItem>\\n                  ))}\\n                  <NavigationMenuItem\\n                    aria-hidden=\\\"true\\\"\\n                    className=\\\"w-full\\\"\\n                    role=\\\"presentation\\\"\\n                  >\\n                    <div\\n                      aria-orientation=\\\"horizontal\\\"\\n                      className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n                      role=\\\"separator\\\"\\n                      tabIndex={-1}\\n                    />\\n                  </NavigationMenuItem>\\n                  <NavigationMenuItem className=\\\"w-full\\\">\\n                    <NavigationMenuLink className=\\\"py-1.5\\\" href=\\\"#\\\">\\n                      Sign In\\n                    </NavigationMenuLink>\\n                  </NavigationMenuItem>\\n                  <NavigationMenuItem className=\\\"w-full\\\">\\n                    <Button\\n                      asChild\\n                      className=\\\"mt-0.5 w-full text-left text-sm\\\"\\n                      size=\\\"sm\\\"\\n                    >\\n                      <span className=\\\"flex items-baseline gap-2\\\">\\n                        Cart\\n                        <span className=\\\"text-primary-foreground/60 text-xs\\\">\\n                          2\\n                        </span>\\n                      </span>\\n                    </Button>\\n                  </NavigationMenuItem>\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          {/* Main nav */}\\n          <div className=\\\"flex flex-1 items-center gap-6 max-md:justify-between\\\">\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n            {/* Navigation menu */}\\n            <NavigationMenu className=\\\"max-md:hidden\\\">\\n              <NavigationMenuList className=\\\"gap-2\\\">\\n                {navigationLinks.map((link) => (\\n                  <NavigationMenuItem key={link.label}>\\n                    <NavigationMenuLink\\n                      className=\\\"py-1.5 font-medium text-muted-foreground hover:text-primary\\\"\\n                      href={link.href}\\n                    >\\n                      {link.label}\\n                    </NavigationMenuLink>\\n                  </NavigationMenuItem>\\n                ))}\\n              </NavigationMenuList>\\n            </NavigationMenu>\\n            {/* Search form */}\\n            <div className=\\\"relative\\\">\\n              <Input\\n                className=\\\"peer h-8 ps-8 pe-2\\\"\\n                id={id}\\n                placeholder=\\\"Search...\\\"\\n                type=\\\"search\\\"\\n              />\\n              <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n                <SearchIcon size={16} />\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-2 max-md:hidden\\\">\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\" variant=\\\"ghost\\\">\\n            <a href=\\\"#\\\">Sign In</a>\\n          </Button>\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\">\\n            <a href=\\\"#\\\">\\n              <span className=\\\"flex items-baseline gap-2\\\">\\n                Cart\\n                <span className=\\\"text-primary-foreground/60 text-xs\\\">2</span>\\n              </span>\\n            </a>\\n          </Button>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-581.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-581\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-581.tsx\",\n      \"content\": \"import InfoMenu from \\\"@/registry/default/components/navbar-components/info-menu\\\";\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport NotificationMenu from \\\"@/registry/default/components/navbar-components/notification-menu\\\";\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { href: \\\"#\\\", label: \\\"Home\\\" },\\n  { href: \\\"#\\\", label: \\\"Features\\\" },\\n  { href: \\\"#\\\", label: \\\"Pricing\\\" },\\n  { href: \\\"#\\\", label: \\\"About\\\" },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link, index) => (\\n                    <NavigationMenuItem className=\\\"w-full\\\" key={String(index)}>\\n                      <NavigationMenuLink className=\\\"py-1.5\\\" href={link.href}>\\n                        {link.label}\\n                      </NavigationMenuLink>\\n                    </NavigationMenuItem>\\n                  ))}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          {/* Main nav */}\\n          <div className=\\\"flex items-center gap-6\\\">\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n            {/* Navigation menu */}\\n            <NavigationMenu className=\\\"max-md:hidden\\\">\\n              <NavigationMenuList className=\\\"gap-2\\\">\\n                {navigationLinks.map((link, index) => (\\n                  <NavigationMenuItem key={String(index)}>\\n                    <NavigationMenuLink\\n                      className=\\\"py-1.5 font-medium text-muted-foreground hover:text-primary\\\"\\n                      href={link.href}\\n                    >\\n                      {link.label}\\n                    </NavigationMenuLink>\\n                  </NavigationMenuItem>\\n                ))}\\n              </NavigationMenuList>\\n            </NavigationMenu>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-4\\\">\\n          <div className=\\\"flex items-center gap-2\\\">\\n            {/* Info menu */}\\n            <InfoMenu />\\n            {/* Notification */}\\n            <NotificationMenu />\\n          </div>\\n          {/* User menu */}\\n          <UserMenu />\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/info-menu.tsx\",\n      \"content\": \"import {\\n  BookIcon,\\n  InfoIcon,\\n  LifeBuoyIcon,\\n  MessageCircleMoreIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function InfoMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open edit menu\\\"\\n          className=\\\"size-8 rounded-full shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <InfoIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"text-muted-foreground\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"pb-2\\\">\\n        <DropdownMenuLabel>Need help?</DropdownMenuLabel>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <BookIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Documentation\\n          </a>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <LifeBuoyIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Support\\n          </a>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <MessageCircleMoreIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60\\\"\\n              size={16}\\n            />\\n            Contact us\\n          </a>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst initialNotifications = [\\n  {\\n    action: \\\"requested review on\\\",\\n    id: 1,\\n    target: \\\"PR #42: Feature implementation\\\",\\n    timestamp: \\\"15 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"shared\\\",\\n    id: 2,\\n    target: \\\"New component library\\\",\\n    timestamp: \\\"45 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    id: 3,\\n    target: \\\"API integration task\\\",\\n    timestamp: \\\"4 hours ago\\\",\\n    unread: false,\\n    user: \\\"James Wilson\\\",\\n  },\\n  {\\n    action: \\\"replied to your comment in\\\",\\n    id: 4,\\n    target: \\\"Authentication flow\\\",\\n    timestamp: \\\"12 hours ago\\\",\\n    unread: false,\\n    user: \\\"Alex Morgan\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    id: 5,\\n    target: \\\"Dashboard redesign\\\",\\n    timestamp: \\\"2 days ago\\\",\\n    unread: false,\\n    user: \\\"Sarah Chen\\\",\\n  },\\n  {\\n    action: \\\"mentioned you in\\\",\\n    id: 6,\\n    target: \\\"coss.com open graph image\\\",\\n    timestamp: \\\"2 weeks ago\\\",\\n    unread: false,\\n    user: \\\"Miky Derya\\\",\\n  },\\n];\\n\\nfunction Dot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"6\\\"\\n      viewBox=\\\"0 0 6 6\\\"\\n      width=\\\"6\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function NotificationMenu() {\\n  const [notifications, setNotifications] = useState(initialNotifications);\\n  const unreadCount = notifications.filter((n) => n.unread).length;\\n\\n  const handleMarkAllAsRead = () => {\\n    setNotifications(\\n      notifications.map((notification) => ({\\n        ...notification,\\n        unread: false,\\n      })),\\n    );\\n  };\\n\\n  const handleNotificationClick = (id: number) => {\\n    setNotifications(\\n      notifications.map((notification) =>\\n        notification.id === id\\n          ? { ...notification, unread: false }\\n          : notification,\\n      ),\\n    );\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open notifications\\\"\\n          className=\\\"relative size-8 rounded-full text-muted-foreground shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n          {unreadCount > 0 && (\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\\\"\\n            />\\n          )}\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 p-1\\\">\\n        <div className=\\\"flex items-baseline justify-between gap-4 px-3 py-2\\\">\\n          <div className=\\\"font-semibold text-sm\\\">Notifications</div>\\n          {unreadCount > 0 && (\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleMarkAllAsRead}\\n              type=\\\"button\\\"\\n            >\\n              Mark all as read\\n            </button>\\n          )}\\n        </div>\\n        <div\\n          aria-orientation=\\\"horizontal\\\"\\n          className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n          role=\\\"separator\\\"\\n          tabIndex={-1}\\n        />\\n        {notifications.map((notification) => (\\n          <div\\n            className=\\\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\\\"\\n            key={notification.id}\\n          >\\n            <div className=\\\"relative flex items-start pe-3\\\">\\n              <div className=\\\"flex-1 space-y-1\\\">\\n                <button\\n                  className=\\\"text-left text-foreground/80 after:absolute after:inset-0\\\"\\n                  onClick={() => handleNotificationClick(notification.id)}\\n                  type=\\\"button\\\"\\n                >\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.user}\\n                  </span>{\\\" \\\"}\\n                  {notification.action}{\\\" \\\"}\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.target}\\n                  </span>\\n                  .\\n                </button>\\n                <div className=\\\"text-muted-foreground text-xs\\\">\\n                  {notification.timestamp}\\n                </div>\\n              </div>\\n              {notification.unread && (\\n                <div className=\\\"absolute end-0 self-center\\\">\\n                  <span className=\\\"sr-only\\\">Unread</span>\\n                  <Dot />\\n                </div>\\n              )}\\n            </div>\\n          </div>\\n        ))}\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-582.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-582\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/select.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-582.tsx\",\n      \"content\": \"import {\\n  FileTextIcon,\\n  GlobeIcon,\\n  HomeIcon,\\n  LayersIcon,\\n  UsersIcon,\\n} from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport ThemeToggle from \\\"@/registry/default/components/navbar-components/theme-toggle\\\";\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\n// Navigation links with icons for desktop icon-only navigation\\nconst navigationLinks = [\\n  { active: true, href: \\\"#\\\", icon: HomeIcon, label: \\\"Dashboard\\\" },\\n  { href: \\\"#\\\", icon: LayersIcon, label: \\\"Projects\\\" },\\n  { href: \\\"#\\\", icon: FileTextIcon, label: \\\"Documentation\\\" },\\n  { href: \\\"#\\\", icon: UsersIcon, label: \\\"Team\\\" },\\n];\\n\\n// Language options\\nconst languages = [\\n  { label: \\\"En\\\", value: \\\"en\\\" },\\n  { label: \\\"Es\\\", value: \\\"es\\\" },\\n  { label: \\\"Fr\\\", value: \\\"fr\\\" },\\n  { label: \\\"De\\\", value: \\\"de\\\" },\\n  { label: \\\"Ja\\\", value: \\\"ja\\\" },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex flex-1 items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link, _index) => {\\n                    const Icon = link.icon;\\n                    return (\\n                      <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                        <NavigationMenuLink\\n                          active={link.active}\\n                          className=\\\"flex-row items-center gap-2 py-1.5\\\"\\n                          href={link.href}\\n                        >\\n                          <Icon\\n                            aria-hidden=\\\"true\\\"\\n                            className=\\\"text-muted-foreground\\\"\\n                            size={16}\\n                          />\\n                          <span>{link.label}</span>\\n                        </NavigationMenuLink>\\n                      </NavigationMenuItem>\\n                    );\\n                  })}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          <div className=\\\"flex items-center gap-6\\\">\\n            {/* Logo */}\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n            {/* Desktop navigation - icon only */}\\n            <NavigationMenu className=\\\"hidden md:flex\\\">\\n              <NavigationMenuList className=\\\"gap-2\\\">\\n                <TooltipProvider>\\n                  {navigationLinks.map((link) => (\\n                    <NavigationMenuItem key={link.label}>\\n                      <Tooltip>\\n                        <TooltipTrigger asChild>\\n                          <NavigationMenuLink\\n                            className=\\\"flex size-8 items-center justify-center p-1.5\\\"\\n                            href={link.href}\\n                          >\\n                            <link.icon aria-hidden=\\\"true\\\" size={20} />\\n                            <span className=\\\"sr-only\\\">{link.label}</span>\\n                          </NavigationMenuLink>\\n                        </TooltipTrigger>\\n                        <TooltipContent\\n                          className=\\\"px-2 py-1 text-xs\\\"\\n                          side=\\\"bottom\\\"\\n                        >\\n                          <p>{link.label}</p>\\n                        </TooltipContent>\\n                      </Tooltip>\\n                    </NavigationMenuItem>\\n                  ))}\\n                </TooltipProvider>\\n              </NavigationMenuList>\\n            </NavigationMenu>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          {/* Theme toggle */}\\n          <ThemeToggle />\\n          {/* Language selector */}\\n          <Select defaultValue=\\\"en\\\">\\n            <SelectTrigger\\n              aria-label=\\\"Select language\\\"\\n              className=\\\"h-8 border-none px-2 shadow-none hover:bg-accent hover:text-accent-foreground [&>svg]:shrink-0 [&>svg]:text-muted-foreground/80\\\"\\n              id={`language-${id}`}\\n            >\\n              <GlobeIcon aria-hidden=\\\"true\\\" size={16} />\\n              <SelectValue className=\\\"hidden sm:inline-flex\\\" />\\n            </SelectTrigger>\\n            <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n              {languages.map((lang) => (\\n                <SelectItem key={lang.value} value={lang.value}>\\n                  <span className=\\\"flex items-center gap-2\\\">\\n                    <span className=\\\"truncate\\\">{lang.label}</span>\\n                  </span>\\n                </SelectItem>\\n              ))}\\n            </SelectContent>\\n          </Select>\\n          {/* User menu */}\\n          <UserMenu />\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/theme-toggle.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function ThemeToggle() {\\n  const [theme, setTheme] = useState<string>(\\\"light\\\");\\n\\n  return (\\n    <div>\\n      <Toggle\\n        aria-label={`Switch to ${theme === \\\"dark\\\" ? \\\"light\\\" : \\\"dark\\\"} mode`}\\n        className=\\\"group size-8 rounded-full border-none text-muted-foreground shadow-none data-[state=on]:bg-transparent data-[state=on]:text-muted-foreground data-[state=on]:hover:bg-muted data-[state=on]:hover:text-foreground\\\"\\n        onPressedChange={() =>\\n          setTheme((prev) => (prev === \\\"dark\\\" ? \\\"light\\\" : \\\"dark\\\"))\\n        }\\n        pressed={theme === \\\"dark\\\"}\\n        variant=\\\"outline\\\"\\n      >\\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\\n        <MoonIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\\\"\\n          size={16}\\n        />\\n        <SunIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\\\"\\n          size={16}\\n        />\\n      </Toggle>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-583.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-583\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/breadcrumb.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-583.tsx\",\n      \"content\": \"import { ChevronsUpDown } from \\\"lucide-react\\\";\\nimport { Select as SelectPrimitive } from \\\"radix-ui\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport NotificationMenu from \\\"@/registry/default/components/navbar-components/notification-menu\\\";\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbEllipsis,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          <Breadcrumb>\\n            <BreadcrumbList>\\n              <BreadcrumbItem>\\n                <BreadcrumbLink className=\\\"text-foreground\\\" href=\\\"#\\\">\\n                  <Logo />\\n                </BreadcrumbLink>\\n              </BreadcrumbItem>\\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\\n              <BreadcrumbItem className=\\\"md:hidden\\\">\\n                <DropdownMenu>\\n                  <DropdownMenuTrigger className=\\\"hover:text-foreground\\\">\\n                    <BreadcrumbEllipsis />\\n                    <span className=\\\"sr-only\\\">Toggle menu</span>\\n                  </DropdownMenuTrigger>\\n                  <DropdownMenuContent align=\\\"start\\\">\\n                    <DropdownMenuItem asChild>\\n                      <a href=\\\"#\\\">Personal Account</a>\\n                    </DropdownMenuItem>\\n                    <DropdownMenuItem asChild>\\n                      <a href=\\\"#\\\">Projects</a>\\n                    </DropdownMenuItem>\\n                  </DropdownMenuContent>\\n                </DropdownMenu>\\n              </BreadcrumbItem>\\n              <BreadcrumbItem className=\\\"max-md:hidden\\\">\\n                <BreadcrumbLink href=\\\"#\\\">Personal Account</BreadcrumbLink>\\n              </BreadcrumbItem>\\n              <BreadcrumbSeparator className=\\\"max-md:hidden\\\">\\n                {\\\" \\\"}\\n                /{\\\" \\\"}\\n              </BreadcrumbSeparator>\\n              <BreadcrumbItem className=\\\"max-md:hidden\\\">\\n                <BreadcrumbLink href=\\\"#\\\">Projects</BreadcrumbLink>\\n              </BreadcrumbItem>\\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\\n              <BreadcrumbItem>\\n                <Select defaultValue=\\\"1\\\">\\n                  <SelectPrimitive.SelectTrigger\\n                    aria-label=\\\"Select project\\\"\\n                    asChild\\n                  >\\n                    <Button\\n                      className=\\\"h-8 px-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\\\"\\n                      variant=\\\"ghost\\\"\\n                    >\\n                      <SelectValue placeholder=\\\"Select project\\\" />\\n                      <ChevronsUpDown\\n                        className=\\\"text-muted-foreground/80\\\"\\n                        size={14}\\n                      />\\n                    </Button>\\n                  </SelectPrimitive.SelectTrigger>\\n                  <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n                    <SelectItem value=\\\"1\\\">Main project</SelectItem>\\n                    <SelectItem value=\\\"2\\\">Origin project</SelectItem>\\n                  </SelectContent>\\n                </Select>\\n              </BreadcrumbItem>\\n            </BreadcrumbList>\\n          </Breadcrumb>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-4\\\">\\n          {/* Notification */}\\n          <NotificationMenu />\\n          {/* User menu */}\\n          <UserMenu />\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst initialNotifications = [\\n  {\\n    action: \\\"requested review on\\\",\\n    id: 1,\\n    target: \\\"PR #42: Feature implementation\\\",\\n    timestamp: \\\"15 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"shared\\\",\\n    id: 2,\\n    target: \\\"New component library\\\",\\n    timestamp: \\\"45 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    id: 3,\\n    target: \\\"API integration task\\\",\\n    timestamp: \\\"4 hours ago\\\",\\n    unread: false,\\n    user: \\\"James Wilson\\\",\\n  },\\n  {\\n    action: \\\"replied to your comment in\\\",\\n    id: 4,\\n    target: \\\"Authentication flow\\\",\\n    timestamp: \\\"12 hours ago\\\",\\n    unread: false,\\n    user: \\\"Alex Morgan\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    id: 5,\\n    target: \\\"Dashboard redesign\\\",\\n    timestamp: \\\"2 days ago\\\",\\n    unread: false,\\n    user: \\\"Sarah Chen\\\",\\n  },\\n  {\\n    action: \\\"mentioned you in\\\",\\n    id: 6,\\n    target: \\\"coss.com open graph image\\\",\\n    timestamp: \\\"2 weeks ago\\\",\\n    unread: false,\\n    user: \\\"Miky Derya\\\",\\n  },\\n];\\n\\nfunction Dot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"6\\\"\\n      viewBox=\\\"0 0 6 6\\\"\\n      width=\\\"6\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function NotificationMenu() {\\n  const [notifications, setNotifications] = useState(initialNotifications);\\n  const unreadCount = notifications.filter((n) => n.unread).length;\\n\\n  const handleMarkAllAsRead = () => {\\n    setNotifications(\\n      notifications.map((notification) => ({\\n        ...notification,\\n        unread: false,\\n      })),\\n    );\\n  };\\n\\n  const handleNotificationClick = (id: number) => {\\n    setNotifications(\\n      notifications.map((notification) =>\\n        notification.id === id\\n          ? { ...notification, unread: false }\\n          : notification,\\n      ),\\n    );\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open notifications\\\"\\n          className=\\\"relative size-8 rounded-full text-muted-foreground shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n          {unreadCount > 0 && (\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\\\"\\n            />\\n          )}\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 p-1\\\">\\n        <div className=\\\"flex items-baseline justify-between gap-4 px-3 py-2\\\">\\n          <div className=\\\"font-semibold text-sm\\\">Notifications</div>\\n          {unreadCount > 0 && (\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleMarkAllAsRead}\\n              type=\\\"button\\\"\\n            >\\n              Mark all as read\\n            </button>\\n          )}\\n        </div>\\n        <div\\n          aria-orientation=\\\"horizontal\\\"\\n          className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n          role=\\\"separator\\\"\\n          tabIndex={-1}\\n        />\\n        {notifications.map((notification) => (\\n          <div\\n            className=\\\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\\\"\\n            key={notification.id}\\n          >\\n            <div className=\\\"relative flex items-start pe-3\\\">\\n              <div className=\\\"flex-1 space-y-1\\\">\\n                <button\\n                  className=\\\"text-left text-foreground/80 after:absolute after:inset-0\\\"\\n                  onClick={() => handleNotificationClick(notification.id)}\\n                  type=\\\"button\\\"\\n                >\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.user}\\n                  </span>{\\\" \\\"}\\n                  {notification.action}{\\\" \\\"}\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.target}\\n                  </span>\\n                  .\\n                </button>\\n                <div className=\\\"text-muted-foreground text-xs\\\">\\n                  {notification.timestamp}\\n                </div>\\n              </div>\\n              {notification.unread && (\\n                <div className=\\\"absolute end-0 self-center\\\">\\n                  <span className=\\\"sr-only\\\">Unread</span>\\n                  <Dot />\\n                </div>\\n              )}\\n            </div>\\n          </div>\\n        ))}\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-584.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-584\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-584.tsx\",\n      \"content\": \"import { SearchIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport NotificationMenu from \\\"@/registry/default/components/navbar-components/notification-menu\\\";\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { active: true, href: \\\"#\\\", label: \\\"Home\\\" },\\n  { href: \\\"#\\\", label: \\\"Features\\\" },\\n  { href: \\\"#\\\", label: \\\"Pricing\\\" },\\n  { href: \\\"#\\\", label: \\\"About\\\" },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex flex-1 items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link, _index) => (\\n                    <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                      <NavigationMenuLink\\n                        active={link.active}\\n                        className=\\\"py-1.5\\\"\\n                        href={link.href}\\n                      >\\n                        {link.label}\\n                      </NavigationMenuLink>\\n                    </NavigationMenuItem>\\n                  ))}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          {/* Logo */}\\n          <div className=\\\"flex items-center\\\">\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n          </div>\\n        </div>\\n        {/* Middle area */}\\n        <div className=\\\"grow\\\">\\n          {/* Search form */}\\n          <div className=\\\"relative mx-auto w-full max-w-xs\\\">\\n            <Input\\n              className=\\\"peer h-8 ps-8 pe-10\\\"\\n              id={id}\\n              placeholder=\\\"Search...\\\"\\n              type=\\\"search\\\"\\n            />\\n            <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n              <SearchIcon size={16} />\\n            </div>\\n            <div className=\\\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-2 text-muted-foreground\\\">\\n              <kbd className=\\\"inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n                ⌘K\\n              </kbd>\\n            </div>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex flex-1 items-center justify-end gap-2\\\">\\n          {/* Notification */}\\n          <NotificationMenu />\\n          {/* User menu */}\\n          <UserMenu />\\n        </div>\\n      </div>\\n      {/* Bottom navigation */}\\n      <div className=\\\"border-t py-2 max-md:hidden\\\">\\n        {/* Navigation menu */}\\n        <NavigationMenu>\\n          <NavigationMenuList className=\\\"gap-2\\\">\\n            {navigationLinks.map((link, _index) => (\\n              <NavigationMenuItem key={link.label}>\\n                <NavigationMenuLink\\n                  active={link.active}\\n                  className=\\\"py-1.5 font-medium text-muted-foreground hover:text-primary\\\"\\n                  href={link.href}\\n                >\\n                  {link.label}\\n                </NavigationMenuLink>\\n              </NavigationMenuItem>\\n            ))}\\n          </NavigationMenuList>\\n        </NavigationMenu>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst initialNotifications = [\\n  {\\n    action: \\\"requested review on\\\",\\n    id: 1,\\n    target: \\\"PR #42: Feature implementation\\\",\\n    timestamp: \\\"15 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"shared\\\",\\n    id: 2,\\n    target: \\\"New component library\\\",\\n    timestamp: \\\"45 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    id: 3,\\n    target: \\\"API integration task\\\",\\n    timestamp: \\\"4 hours ago\\\",\\n    unread: false,\\n    user: \\\"James Wilson\\\",\\n  },\\n  {\\n    action: \\\"replied to your comment in\\\",\\n    id: 4,\\n    target: \\\"Authentication flow\\\",\\n    timestamp: \\\"12 hours ago\\\",\\n    unread: false,\\n    user: \\\"Alex Morgan\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    id: 5,\\n    target: \\\"Dashboard redesign\\\",\\n    timestamp: \\\"2 days ago\\\",\\n    unread: false,\\n    user: \\\"Sarah Chen\\\",\\n  },\\n  {\\n    action: \\\"mentioned you in\\\",\\n    id: 6,\\n    target: \\\"coss.com open graph image\\\",\\n    timestamp: \\\"2 weeks ago\\\",\\n    unread: false,\\n    user: \\\"Miky Derya\\\",\\n  },\\n];\\n\\nfunction Dot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"6\\\"\\n      viewBox=\\\"0 0 6 6\\\"\\n      width=\\\"6\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function NotificationMenu() {\\n  const [notifications, setNotifications] = useState(initialNotifications);\\n  const unreadCount = notifications.filter((n) => n.unread).length;\\n\\n  const handleMarkAllAsRead = () => {\\n    setNotifications(\\n      notifications.map((notification) => ({\\n        ...notification,\\n        unread: false,\\n      })),\\n    );\\n  };\\n\\n  const handleNotificationClick = (id: number) => {\\n    setNotifications(\\n      notifications.map((notification) =>\\n        notification.id === id\\n          ? { ...notification, unread: false }\\n          : notification,\\n      ),\\n    );\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open notifications\\\"\\n          className=\\\"relative size-8 rounded-full text-muted-foreground shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n          {unreadCount > 0 && (\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\\\"\\n            />\\n          )}\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 p-1\\\">\\n        <div className=\\\"flex items-baseline justify-between gap-4 px-3 py-2\\\">\\n          <div className=\\\"font-semibold text-sm\\\">Notifications</div>\\n          {unreadCount > 0 && (\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleMarkAllAsRead}\\n              type=\\\"button\\\"\\n            >\\n              Mark all as read\\n            </button>\\n          )}\\n        </div>\\n        <div\\n          aria-orientation=\\\"horizontal\\\"\\n          className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n          role=\\\"separator\\\"\\n          tabIndex={-1}\\n        />\\n        {notifications.map((notification) => (\\n          <div\\n            className=\\\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\\\"\\n            key={notification.id}\\n          >\\n            <div className=\\\"relative flex items-start pe-3\\\">\\n              <div className=\\\"flex-1 space-y-1\\\">\\n                <button\\n                  className=\\\"text-left text-foreground/80 after:absolute after:inset-0\\\"\\n                  onClick={() => handleNotificationClick(notification.id)}\\n                  type=\\\"button\\\"\\n                >\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.user}\\n                  </span>{\\\" \\\"}\\n                  {notification.action}{\\\" \\\"}\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.target}\\n                  </span>\\n                  .\\n                </button>\\n                <div className=\\\"text-muted-foreground text-xs\\\">\\n                  {notification.timestamp}\\n                </div>\\n              </div>\\n              {notification.unread && (\\n                <div className=\\\"absolute end-0 self-center\\\">\\n                  <span className=\\\"sr-only\\\">Unread</span>\\n                  <Dot />\\n                </div>\\n              )}\\n            </div>\\n          </div>\\n        ))}\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-585.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-585\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-585.tsx\",\n      \"content\": \"import {\\n  HashIcon,\\n  HouseIcon,\\n  MailIcon,\\n  SearchIcon,\\n  UsersRound,\\n} from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport NotificationMenu from \\\"@/registry/default/components/navbar-components/notification-menu\\\";\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst _teams = [\\\"Acme Inc.\\\", \\\"coss.com\\\", \\\"Junon\\\"];\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { href: \\\"#\\\", icon: HouseIcon, label: \\\"Home\\\" },\\n  { href: \\\"#\\\", icon: HashIcon, label: \\\"Hash\\\" },\\n  { href: \\\"#\\\", icon: UsersRound, label: \\\"Groups\\\" },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex flex-1 items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-48 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link, _index) => {\\n                    const Icon = link.icon;\\n                    return (\\n                      <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                        <NavigationMenuLink\\n                          className=\\\"flex-row items-center gap-2 py-1.5\\\"\\n                          href={link.href}\\n                        >\\n                          <Icon\\n                            aria-hidden=\\\"true\\\"\\n                            className=\\\"text-muted-foreground\\\"\\n                            size={16}\\n                          />\\n                          <span>{link.label}</span>\\n                        </NavigationMenuLink>\\n                      </NavigationMenuItem>\\n                    );\\n                  })}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          <div className=\\\"flex items-center gap-6\\\">\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n            {/* Search form */}\\n            <div className=\\\"relative\\\">\\n              <Input\\n                className=\\\"peer h-8 ps-8 pe-2\\\"\\n                id={id}\\n                placeholder=\\\"Search...\\\"\\n                type=\\\"search\\\"\\n              />\\n              <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n                <SearchIcon size={16} />\\n              </div>\\n            </div>\\n          </div>\\n        </div>\\n        {/* Middle area */}\\n        <NavigationMenu className=\\\"max-md:hidden\\\">\\n          <NavigationMenuList className=\\\"gap-2\\\">\\n            {navigationLinks.map((link, _index) => {\\n              const Icon = link.icon;\\n              return (\\n                <NavigationMenuItem key={link.label}>\\n                  <NavigationMenuLink\\n                    className=\\\"flex size-8 items-center justify-center p-1.5\\\"\\n                    href={link.href}\\n                    title={link.label}\\n                  >\\n                    <Icon aria-hidden=\\\"true\\\" />\\n                    <span className=\\\"sr-only\\\">{link.label}</span>\\n                  </NavigationMenuLink>\\n                </NavigationMenuItem>\\n              );\\n            })}\\n          </NavigationMenuList>\\n        </NavigationMenu>\\n        {/* Right side */}\\n        <div className=\\\"flex flex-1 items-center justify-end gap-4\\\">\\n          <div className=\\\"flex items-center gap-2\\\">\\n            {/* Messages */}\\n            <Button\\n              aria-label=\\\"Open notifications\\\"\\n              className=\\\"relative size-8 rounded-full text-muted-foreground shadow-none\\\"\\n              size=\\\"icon\\\"\\n              variant=\\\"ghost\\\"\\n            >\\n              <MailIcon aria-hidden=\\\"true\\\" size={16} />\\n              <div\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\\\"\\n              />\\n            </Button>\\n            {/* Notification menu */}\\n            <NotificationMenu />\\n          </div>\\n          {/* User menu */}\\n          <UserMenu />\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst initialNotifications = [\\n  {\\n    action: \\\"requested review on\\\",\\n    id: 1,\\n    target: \\\"PR #42: Feature implementation\\\",\\n    timestamp: \\\"15 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"shared\\\",\\n    id: 2,\\n    target: \\\"New component library\\\",\\n    timestamp: \\\"45 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    id: 3,\\n    target: \\\"API integration task\\\",\\n    timestamp: \\\"4 hours ago\\\",\\n    unread: false,\\n    user: \\\"James Wilson\\\",\\n  },\\n  {\\n    action: \\\"replied to your comment in\\\",\\n    id: 4,\\n    target: \\\"Authentication flow\\\",\\n    timestamp: \\\"12 hours ago\\\",\\n    unread: false,\\n    user: \\\"Alex Morgan\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    id: 5,\\n    target: \\\"Dashboard redesign\\\",\\n    timestamp: \\\"2 days ago\\\",\\n    unread: false,\\n    user: \\\"Sarah Chen\\\",\\n  },\\n  {\\n    action: \\\"mentioned you in\\\",\\n    id: 6,\\n    target: \\\"coss.com open graph image\\\",\\n    timestamp: \\\"2 weeks ago\\\",\\n    unread: false,\\n    user: \\\"Miky Derya\\\",\\n  },\\n];\\n\\nfunction Dot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"6\\\"\\n      viewBox=\\\"0 0 6 6\\\"\\n      width=\\\"6\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function NotificationMenu() {\\n  const [notifications, setNotifications] = useState(initialNotifications);\\n  const unreadCount = notifications.filter((n) => n.unread).length;\\n\\n  const handleMarkAllAsRead = () => {\\n    setNotifications(\\n      notifications.map((notification) => ({\\n        ...notification,\\n        unread: false,\\n      })),\\n    );\\n  };\\n\\n  const handleNotificationClick = (id: number) => {\\n    setNotifications(\\n      notifications.map((notification) =>\\n        notification.id === id\\n          ? { ...notification, unread: false }\\n          : notification,\\n      ),\\n    );\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open notifications\\\"\\n          className=\\\"relative size-8 rounded-full text-muted-foreground shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n          {unreadCount > 0 && (\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\\\"\\n            />\\n          )}\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 p-1\\\">\\n        <div className=\\\"flex items-baseline justify-between gap-4 px-3 py-2\\\">\\n          <div className=\\\"font-semibold text-sm\\\">Notifications</div>\\n          {unreadCount > 0 && (\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleMarkAllAsRead}\\n              type=\\\"button\\\"\\n            >\\n              Mark all as read\\n            </button>\\n          )}\\n        </div>\\n        <div\\n          aria-orientation=\\\"horizontal\\\"\\n          className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n          role=\\\"separator\\\"\\n          tabIndex={-1}\\n        />\\n        {notifications.map((notification) => (\\n          <div\\n            className=\\\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\\\"\\n            key={notification.id}\\n          >\\n            <div className=\\\"relative flex items-start pe-3\\\">\\n              <div className=\\\"flex-1 space-y-1\\\">\\n                <button\\n                  className=\\\"text-left text-foreground/80 after:absolute after:inset-0\\\"\\n                  onClick={() => handleNotificationClick(notification.id)}\\n                  type=\\\"button\\\"\\n                >\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.user}\\n                  </span>{\\\" \\\"}\\n                  {notification.action}{\\\" \\\"}\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.target}\\n                  </span>\\n                  .\\n                </button>\\n                <div className=\\\"text-muted-foreground text-xs\\\">\\n                  {notification.timestamp}\\n                </div>\\n              </div>\\n              {notification.unread && (\\n                <div className=\\\"absolute end-0 self-center\\\">\\n                  <span className=\\\"sr-only\\\">Unread</span>\\n                  <Dot />\\n                </div>\\n              )}\\n            </div>\\n          </div>\\n        ))}\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-586.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-586\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/input.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-586.tsx\",\n      \"content\": \"import { MicIcon, SearchIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport ThemeToggle from \\\"@/registry/default/components/navbar-components/theme-toggle\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Logo */}\\n        <div className=\\\"flex-1\\\">\\n          <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n            <Logo />\\n          </a>\\n        </div>\\n        {/* Middle area */}\\n        <div className=\\\"grow max-sm:hidden\\\">\\n          {/* Search form */}\\n          <div className=\\\"relative mx-auto w-full max-w-xs\\\">\\n            <Input\\n              className=\\\"peer h-8 px-8\\\"\\n              id={id}\\n              placeholder=\\\"Search...\\\"\\n              type=\\\"search\\\"\\n            />\\n            <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n              <SearchIcon size={16} />\\n            </div>\\n            <button\\n              aria-label=\\\"Press to speak\\\"\\n              className=\\\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\"\\n              type=\\\"submit\\\"\\n            >\\n              <MicIcon aria-hidden=\\\"true\\\" size={16} />\\n            </button>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex flex-1 items-center justify-end gap-2\\\">\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\" variant=\\\"ghost\\\">\\n            <a href=\\\"#\\\">Community</a>\\n          </Button>\\n          <Button asChild className=\\\"text-sm\\\" size=\\\"sm\\\">\\n            <a href=\\\"#\\\">Get Started</a>\\n          </Button>\\n          <ThemeToggle />\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/theme-toggle.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MoonIcon, SunIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function ThemeToggle() {\\n  const [theme, setTheme] = useState<string>(\\\"light\\\");\\n\\n  return (\\n    <div>\\n      <Toggle\\n        aria-label={`Switch to ${theme === \\\"dark\\\" ? \\\"light\\\" : \\\"dark\\\"} mode`}\\n        className=\\\"group size-8 rounded-full border-none text-muted-foreground shadow-none data-[state=on]:bg-transparent data-[state=on]:text-muted-foreground data-[state=on]:hover:bg-muted data-[state=on]:hover:text-foreground\\\"\\n        onPressedChange={() =>\\n          setTheme((prev) => (prev === \\\"dark\\\" ? \\\"light\\\" : \\\"dark\\\"))\\n        }\\n        pressed={theme === \\\"dark\\\"}\\n        variant=\\\"outline\\\"\\n      >\\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\\n        <MoonIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\\\"\\n          size={16}\\n        />\\n        <SunIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\\\"\\n          size={16}\\n        />\\n      </Toggle>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-587.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-587\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-587.tsx\",\n      \"content\": \"import { HouseIcon, InboxIcon, SearchIcon, ZapIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { active: true, href: \\\"#\\\", icon: HouseIcon, label: \\\"Home\\\" },\\n  { href: \\\"#\\\", icon: InboxIcon, label: \\\"Inbox\\\" },\\n  { href: \\\"#\\\", icon: ZapIcon, label: \\\"Insights\\\" },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex flex-1 items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link, _index) => {\\n                    const Icon = link.icon;\\n                    return (\\n                      <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                        <NavigationMenuLink\\n                          active={link.active}\\n                          className=\\\"flex-row items-center gap-2 py-1.5\\\"\\n                          href={link.href}\\n                        >\\n                          <Icon\\n                            aria-hidden=\\\"true\\\"\\n                            className=\\\"text-muted-foreground/80\\\"\\n                            size={16}\\n                          />\\n                          <span>{link.label}</span>\\n                        </NavigationMenuLink>\\n                      </NavigationMenuItem>\\n                    );\\n                  })}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          {/* Logo */}\\n          <div className=\\\"flex items-center\\\">\\n            <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n              <Logo />\\n            </a>\\n          </div>\\n        </div>\\n        {/* Middle area */}\\n        <NavigationMenu className=\\\"max-md:hidden\\\">\\n          <NavigationMenuList className=\\\"gap-2\\\">\\n            {navigationLinks.map((link, _index) => {\\n              const Icon = link.icon;\\n              return (\\n                <NavigationMenuItem key={link.label}>\\n                  <NavigationMenuLink\\n                    active={link.active}\\n                    className=\\\"flex-row items-center gap-2 py-1.5 font-medium text-foreground hover:text-primary\\\"\\n                    href={link.href}\\n                  >\\n                    <Icon\\n                      aria-hidden=\\\"true\\\"\\n                      className=\\\"text-muted-foreground/80\\\"\\n                      size={16}\\n                    />\\n                    <span>{link.label}</span>\\n                  </NavigationMenuLink>\\n                </NavigationMenuItem>\\n              );\\n            })}\\n          </NavigationMenuList>\\n        </NavigationMenu>\\n        {/* Right side */}\\n        <div className=\\\"flex flex-1 items-center justify-end gap-2\\\">\\n          <div className=\\\"relative\\\">\\n            <Input\\n              className=\\\"peer h-8 ps-8 pe-2\\\"\\n              id={id}\\n              placeholder=\\\"Search...\\\"\\n              type=\\\"search\\\"\\n            />\\n            <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n              <SearchIcon size={16} />\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-588.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-588\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-588.tsx\",\n      \"content\": \"import { HouseIcon, InboxIcon, SparklesIcon, ZapIcon } from \\\"lucide-react\\\";\\n\\nimport Logo from \\\"@/registry/default/components/navbar-components/logo\\\";\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\n// Navigation links array\\nconst navigationLinks = [\\n  { active: true, href: \\\"#\\\", icon: HouseIcon, label: \\\"Home\\\" },\\n  { href: \\\"#\\\", icon: InboxIcon, label: \\\"Inbox\\\" },\\n  { href: \\\"#\\\", icon: ZapIcon, label: \\\"Insights\\\" },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex flex-1 items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link) => {\\n                    const Icon = link.icon;\\n                    return (\\n                      <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                        <NavigationMenuLink\\n                          active={link.active}\\n                          className=\\\"flex-row items-center gap-2 py-1.5\\\"\\n                          href={link.href}\\n                        >\\n                          <Icon\\n                            aria-hidden=\\\"true\\\"\\n                            className=\\\"text-muted-foreground/80\\\"\\n                            size={16}\\n                          />\\n                          <span>{link.label}</span>\\n                        </NavigationMenuLink>\\n                      </NavigationMenuItem>\\n                    );\\n                  })}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n\\n          <NavigationMenu className=\\\"max-md:hidden\\\">\\n            <NavigationMenuList className=\\\"gap-2\\\">\\n              {navigationLinks.map((link) => {\\n                const Icon = link.icon;\\n                return (\\n                  <NavigationMenuItem key={link.label}>\\n                    <NavigationMenuLink\\n                      active={link.active}\\n                      className=\\\"flex-row items-center gap-2 py-1.5 font-medium text-foreground hover:text-primary\\\"\\n                      href={link.href}\\n                    >\\n                      <Icon\\n                        aria-hidden=\\\"true\\\"\\n                        className=\\\"text-muted-foreground/80\\\"\\n                        size={16}\\n                      />\\n                      <span>{link.label}</span>\\n                    </NavigationMenuLink>\\n                  </NavigationMenuItem>\\n                );\\n              })}\\n            </NavigationMenuList>\\n          </NavigationMenu>\\n        </div>\\n\\n        {/* Middle side: Logo */}\\n        <div className=\\\"flex items-center\\\">\\n          <a className=\\\"text-primary hover:text-primary/90\\\" href=\\\"#\\\">\\n            <Logo />\\n          </a>\\n        </div>\\n\\n        {/* Right side: Actions */}\\n        <div className=\\\"flex flex-1 items-center justify-end gap-4\\\">\\n          {/* User menu */}\\n          <UserMenu />\\n          {/* Upgrade button */}\\n          <Button className=\\\"text-sm sm:aspect-square\\\" size=\\\"sm\\\">\\n            <SparklesIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"sm:-ms-1 opacity-60\\\"\\n              size={16}\\n            />\\n            <span className=\\\"sm:sr-only\\\">Upgrade</span>\\n          </Button>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n      \"content\": \"export default function Logo() {\\n  return (\\n    <svg\\n      fill=\\\"currentColor\\\"\\n      height=\\\"33\\\"\\n      width=\\\"33\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <path d=\\\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\\\" />\\n      <path d=\\\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\\\" />\\n    </svg>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-589.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-589\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/breadcrumb.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-589.tsx\",\n      \"content\": \"import { ChevronsUpDown } from \\\"lucide-react\\\";\\nimport { Select as SelectPrimitive } from \\\"radix-ui\\\";\\n\\nimport SettingsMenu from \\\"@/registry/default/components/navbar-components/settings-menu\\\";\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbList,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectItem,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { href: \\\"#\\\", label: \\\"Dashboard\\\" },\\n  { href: \\\"#\\\", label: \\\"Docs\\\" },\\n  { href: \\\"#\\\", label: \\\"API reference\\\" },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link) => (\\n                    <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                      <NavigationMenuLink className=\\\"py-1.5\\\" href={link.href}>\\n                        {link.label}\\n                      </NavigationMenuLink>\\n                    </NavigationMenuItem>\\n                  ))}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          {/* Breadcrumb */}\\n          <Breadcrumb>\\n            <BreadcrumbList>\\n              <BreadcrumbItem>\\n                <Select defaultValue=\\\"personal\\\">\\n                  <SelectPrimitive.SelectTrigger\\n                    aria-label=\\\"Select account type\\\"\\n                    asChild\\n                  >\\n                    <Button\\n                      className=\\\"h-8 p-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\\\"\\n                      variant=\\\"ghost\\\"\\n                    >\\n                      <SelectValue placeholder=\\\"Select account type\\\" />\\n                      <ChevronsUpDown\\n                        className=\\\"text-muted-foreground/80\\\"\\n                        size={14}\\n                      />\\n                    </Button>\\n                  </SelectPrimitive.SelectTrigger>\\n                  <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n                    <SelectItem value=\\\"personal\\\">Personal</SelectItem>\\n                    <SelectItem value=\\\"team\\\">Team</SelectItem>\\n                    <SelectItem value=\\\"business\\\">Business</SelectItem>\\n                  </SelectContent>\\n                </Select>\\n              </BreadcrumbItem>\\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\\n              <BreadcrumbItem>\\n                <Select defaultValue=\\\"1\\\">\\n                  <SelectPrimitive.SelectTrigger\\n                    aria-label=\\\"Select project\\\"\\n                    asChild\\n                  >\\n                    <Button\\n                      className=\\\"h-8 p-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\\\"\\n                      variant=\\\"ghost\\\"\\n                    >\\n                      <SelectValue placeholder=\\\"Select project\\\" />\\n                      <ChevronsUpDown\\n                        className=\\\"text-muted-foreground/80\\\"\\n                        size={14}\\n                      />\\n                    </Button>\\n                  </SelectPrimitive.SelectTrigger>\\n                  <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n                    <SelectItem value=\\\"1\\\">Main project</SelectItem>\\n                    <SelectItem value=\\\"2\\\">Origin project</SelectItem>\\n                  </SelectContent>\\n                </Select>\\n              </BreadcrumbItem>\\n            </BreadcrumbList>\\n          </Breadcrumb>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-4\\\">\\n          <div className=\\\"flex items-center gap-2\\\">\\n            {/* Nav menu */}\\n            <NavigationMenu className=\\\"max-md:hidden\\\">\\n              <NavigationMenuList className=\\\"gap-2\\\">\\n                {navigationLinks.map((link) => (\\n                  <NavigationMenuItem key={link.label}>\\n                    <NavigationMenuLink\\n                      className=\\\"py-1.5 font-medium text-muted-foreground hover:text-primary\\\"\\n                      href={link.href}\\n                    >\\n                      {link.label}\\n                    </NavigationMenuLink>\\n                  </NavigationMenuItem>\\n                ))}\\n              </NavigationMenuList>\\n            </NavigationMenu>\\n            {/* Settings */}\\n            <SettingsMenu />\\n          </div>\\n          {/* User menu */}\\n          <UserMenu />\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/settings-menu.tsx\",\n      \"content\": \"import { SettingsIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function SettingsMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open edit menu\\\"\\n          className=\\\"rounded-full shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <SettingsIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"text-muted-foreground\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"max-w-64\\\">\\n        <DropdownMenuItem>Appearance</DropdownMenuItem>\\n        <DropdownMenuItem>Preferences</DropdownMenuItem>\\n        <DropdownMenuItem>API Settings</DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-59.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-59\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-59.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Simple textarea</Label>\\n      <Textarea id={id} placeholder=\\\"Leave a comment\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-590.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-590\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-590.tsx\",\n      \"content\": \"import {\\n  CompassIcon,\\n  FeatherIcon,\\n  HouseIcon,\\n  PlusIcon,\\n  SearchIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport NotificationMenu from \\\"@/registry/default/components/navbar-components/notification-menu\\\";\\nimport TeamSwitcher from \\\"@/registry/default/components/navbar-components/team-switcher\\\";\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst teams = [\\\"Acme Inc.\\\", \\\"coss.com\\\", \\\"Junon\\\"];\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { href: \\\"#\\\", icon: HouseIcon, label: \\\"Dashboard\\\" },\\n  { href: \\\"#\\\", icon: CompassIcon, label: \\\"Explore\\\" },\\n  { href: \\\"#\\\", icon: FeatherIcon, label: \\\"Write\\\" },\\n  { href: \\\"#\\\", icon: SearchIcon, label: \\\"Search\\\" },\\n];\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex flex-1 items-center gap-2\\\">\\n          {/* Mobile menu trigger */}\\n          <Popover>\\n            <PopoverTrigger asChild>\\n              <Button\\n                className=\\\"group size-8 md:hidden\\\"\\n                size=\\\"icon\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                <svg\\n                  className=\\\"pointer-events-none\\\"\\n                  fill=\\\"none\\\"\\n                  height={16}\\n                  stroke=\\\"currentColor\\\"\\n                  strokeLinecap=\\\"round\\\"\\n                  strokeLinejoin=\\\"round\\\"\\n                  strokeWidth=\\\"2\\\"\\n                  viewBox=\\\"0 0 24 24\\\"\\n                  width={16}\\n                  xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                >\\n                  <path\\n                    className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                    d=\\\"M4 12L20 12\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                  <path\\n                    className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                    d=\\\"M4 12H20\\\"\\n                  />\\n                </svg>\\n              </Button>\\n            </PopoverTrigger>\\n            <PopoverContent align=\\\"start\\\" className=\\\"w-48 p-1 md:hidden\\\">\\n              <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                  {navigationLinks.map((link, _index) => {\\n                    const Icon = link.icon;\\n                    return (\\n                      <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                        <NavigationMenuLink\\n                          className=\\\"flex-row items-center gap-2 py-1.5\\\"\\n                          href={link.href}\\n                        >\\n                          <Icon\\n                            aria-hidden=\\\"true\\\"\\n                            className=\\\"text-muted-foreground\\\"\\n                            size={16}\\n                          />\\n                          <span>{link.label}</span>\\n                        </NavigationMenuLink>\\n                      </NavigationMenuItem>\\n                    );\\n                  })}\\n                </NavigationMenuList>\\n              </NavigationMenu>\\n            </PopoverContent>\\n          </Popover>\\n          <TeamSwitcher defaultTeam={teams[0]} teams={teams} />\\n        </div>\\n        {/* Middle area */}\\n        <NavigationMenu className=\\\"max-md:hidden\\\">\\n          <NavigationMenuList className=\\\"gap-2\\\">\\n            {navigationLinks.map((link, _index) => {\\n              const Icon = link.icon;\\n              return (\\n                <NavigationMenuItem key={link.label}>\\n                  <NavigationMenuLink\\n                    className=\\\"flex size-8 items-center justify-center p-1.5\\\"\\n                    href={link.href}\\n                    title={link.label}\\n                  >\\n                    <Icon aria-hidden=\\\"true\\\" />\\n                    <span className=\\\"sr-only\\\">{link.label}</span>\\n                  </NavigationMenuLink>\\n                </NavigationMenuItem>\\n              );\\n            })}\\n          </NavigationMenuList>\\n        </NavigationMenu>\\n        {/* Right side */}\\n        <div className=\\\"flex flex-1 items-center justify-end gap-4\\\">\\n          <Button className=\\\"text-sm max-sm:aspect-square max-sm:p-0\\\" size=\\\"sm\\\">\\n            <PlusIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"sm:-ms-1 opacity-60\\\"\\n              size={16}\\n            />\\n            <span className=\\\"max-sm:sr-only\\\">Post</span>\\n          </Button>\\n          <NotificationMenu />\\n          <UserMenu />\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst initialNotifications = [\\n  {\\n    action: \\\"requested review on\\\",\\n    id: 1,\\n    target: \\\"PR #42: Feature implementation\\\",\\n    timestamp: \\\"15 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"shared\\\",\\n    id: 2,\\n    target: \\\"New component library\\\",\\n    timestamp: \\\"45 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    id: 3,\\n    target: \\\"API integration task\\\",\\n    timestamp: \\\"4 hours ago\\\",\\n    unread: false,\\n    user: \\\"James Wilson\\\",\\n  },\\n  {\\n    action: \\\"replied to your comment in\\\",\\n    id: 4,\\n    target: \\\"Authentication flow\\\",\\n    timestamp: \\\"12 hours ago\\\",\\n    unread: false,\\n    user: \\\"Alex Morgan\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    id: 5,\\n    target: \\\"Dashboard redesign\\\",\\n    timestamp: \\\"2 days ago\\\",\\n    unread: false,\\n    user: \\\"Sarah Chen\\\",\\n  },\\n  {\\n    action: \\\"mentioned you in\\\",\\n    id: 6,\\n    target: \\\"coss.com open graph image\\\",\\n    timestamp: \\\"2 weeks ago\\\",\\n    unread: false,\\n    user: \\\"Miky Derya\\\",\\n  },\\n];\\n\\nfunction Dot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"6\\\"\\n      viewBox=\\\"0 0 6 6\\\"\\n      width=\\\"6\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function NotificationMenu() {\\n  const [notifications, setNotifications] = useState(initialNotifications);\\n  const unreadCount = notifications.filter((n) => n.unread).length;\\n\\n  const handleMarkAllAsRead = () => {\\n    setNotifications(\\n      notifications.map((notification) => ({\\n        ...notification,\\n        unread: false,\\n      })),\\n    );\\n  };\\n\\n  const handleNotificationClick = (id: number) => {\\n    setNotifications(\\n      notifications.map((notification) =>\\n        notification.id === id\\n          ? { ...notification, unread: false }\\n          : notification,\\n      ),\\n    );\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open notifications\\\"\\n          className=\\\"relative size-8 rounded-full text-muted-foreground shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n          {unreadCount > 0 && (\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\\\"\\n            />\\n          )}\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 p-1\\\">\\n        <div className=\\\"flex items-baseline justify-between gap-4 px-3 py-2\\\">\\n          <div className=\\\"font-semibold text-sm\\\">Notifications</div>\\n          {unreadCount > 0 && (\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleMarkAllAsRead}\\n              type=\\\"button\\\"\\n            >\\n              Mark all as read\\n            </button>\\n          )}\\n        </div>\\n        <div\\n          aria-orientation=\\\"horizontal\\\"\\n          className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n          role=\\\"separator\\\"\\n          tabIndex={-1}\\n        />\\n        {notifications.map((notification) => (\\n          <div\\n            className=\\\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\\\"\\n            key={notification.id}\\n          >\\n            <div className=\\\"relative flex items-start pe-3\\\">\\n              <div className=\\\"flex-1 space-y-1\\\">\\n                <button\\n                  className=\\\"text-left text-foreground/80 after:absolute after:inset-0\\\"\\n                  onClick={() => handleNotificationClick(notification.id)}\\n                  type=\\\"button\\\"\\n                >\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.user}\\n                  </span>{\\\" \\\"}\\n                  {notification.action}{\\\" \\\"}\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.target}\\n                  </span>\\n                  .\\n                </button>\\n                <div className=\\\"text-muted-foreground text-xs\\\">\\n                  {notification.timestamp}\\n                </div>\\n              </div>\\n              {notification.unread && (\\n                <div className=\\\"absolute end-0 self-center\\\">\\n                  <span className=\\\"sr-only\\\">Unread</span>\\n                  <Dot />\\n                </div>\\n              )}\\n            </div>\\n          </div>\\n        ))}\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/team-switcher.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronsUpDown } from \\\"lucide-react\\\";\\nimport * as React from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function TeamSwitcher({\\n  teams,\\n  defaultTeam,\\n}: {\\n  teams: string[];\\n  defaultTeam: string;\\n}) {\\n  const [selectedProject, setSelectedProject] = React.useState(defaultTeam);\\n\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <span className=\\\"flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground\\\">\\n            {selectedProject.charAt(0).toUpperCase()}\\n          </span>\\n          <div className=\\\"flex flex-col gap-0.5 leading-none\\\">\\n            <span className=\\\"\\\">{selectedProject}</span>\\n          </div>\\n          <ChevronsUpDown className=\\\"text-muted-foreground/80\\\" size={14} />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"start\\\">\\n        {teams.map((project) => (\\n          <DropdownMenuItem\\n            key={project}\\n            onSelect={() => setSelectedProject(project)}\\n          >\\n            {project}\\n          </DropdownMenuItem>\\n        ))}\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-591.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-591\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/select.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-591.tsx\",\n      \"content\": \"import { BotMessageSquareIcon, MessageCircleDashedIcon } from \\\"lucide-react\\\";\\n\\nimport UserMenu from \\\"@/registry/default/components/navbar-components/user-menu\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div>\\n          <Select aria-label=\\\"Select AI model\\\" defaultValue=\\\"orion-alpha-45\\\">\\n            <SelectTrigger className=\\\"**:data-desc:hidden [&>svg]:shrink-0 [&>svg]:text-muted-foreground/80\\\">\\n              <BotMessageSquareIcon aria-hidden=\\\"true\\\" size={16} />\\n              <SelectValue placeholder=\\\"Choose an AI model\\\" />\\n            </SelectTrigger>\\n            <SelectContent className=\\\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\\\">\\n              <SelectGroup>\\n                <SelectLabel className=\\\"ps-2\\\">Models</SelectLabel>\\n                <SelectItem value=\\\"orion-alpha-45\\\">\\n                  Orion-Alpha 4.5\\n                  <span\\n                    className=\\\"mt-1 block text-muted-foreground text-xs\\\"\\n                    data-desc\\n                  >\\n                    Balanced performance and creativity\\n                  </span>\\n                </SelectItem>\\n                <SelectItem value=\\\"orion-code-4\\\">\\n                  Orion-Code 4\\n                  <span\\n                    className=\\\"mt-1 block text-muted-foreground text-xs\\\"\\n                    data-desc\\n                  >\\n                    Optimized for code generation and understanding\\n                  </span>\\n                </SelectItem>\\n                <SelectItem value=\\\"nova-chat-4\\\">\\n                  Nova-Chat 4\\n                  <span\\n                    className=\\\"mt-1 block text-muted-foreground text-xs\\\"\\n                    data-desc\\n                  >\\n                    Excels at natural, engaging conversations\\n                  </span>\\n                </SelectItem>\\n                <SelectItem value=\\\"galaxy-max-4\\\">\\n                  Galaxy-Max 4\\n                  <span\\n                    className=\\\"mt-1 block text-muted-foreground text-xs\\\"\\n                    data-desc\\n                  >\\n                    Most powerful model for complex tasks\\n                  </span>\\n                </SelectItem>\\n              </SelectGroup>\\n            </SelectContent>\\n          </Select>\\n        </div>\\n\\n        {/* Right side: Actions */}\\n        <div className=\\\"flex items-center justify-end gap-2\\\">\\n          {/* Layout button */}\\n          <Button\\n            aria-label=\\\"Temporary chat\\\"\\n            className=\\\"size-8 rounded-full text-muted-foreground shadow-none\\\"\\n            size=\\\"icon\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <MessageCircleDashedIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n          {/* User menu */}\\n          <UserMenu />\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n      \"content\": \"import {\\n  BoltIcon,\\n  BookOpenIcon,\\n  Layers2Icon,\\n  LogOutIcon,\\n  PinIcon,\\n  UserPenIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuSeparator,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function UserMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <Avatar>\\n            <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n            <AvatarFallback>KK</AvatarFallback>\\n          </Avatar>\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"end\\\" className=\\\"max-w-64\\\">\\n        <DropdownMenuLabel className=\\\"flex min-w-0 flex-col\\\">\\n          <span className=\\\"truncate font-medium text-foreground text-sm\\\">\\n            Keith Kennedy\\n          </span>\\n          <span className=\\\"truncate font-normal text-muted-foreground text-xs\\\">\\n            k.kennedy@coss.com\\n          </span>\\n        </DropdownMenuLabel>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <BoltIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 1</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <Layers2Icon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 2</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <BookOpenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 3</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuGroup>\\n          <DropdownMenuItem>\\n            <PinIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 4</span>\\n          </DropdownMenuItem>\\n          <DropdownMenuItem>\\n            <UserPenIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            <span>Option 5</span>\\n          </DropdownMenuItem>\\n        </DropdownMenuGroup>\\n        <DropdownMenuSeparator />\\n        <DropdownMenuItem>\\n          <LogOutIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n          <span>Logout</span>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-592.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-592\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/input.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/switch.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-592.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { LayoutGridIcon, PlusIcon, SearchIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport InfoMenu from \\\"@/registry/default/components/navbar-components/info-menu\\\";\\nimport NotificationMenu from \\\"@/registry/default/components/navbar-components/notification-menu\\\";\\nimport SettingsMenu from \\\"@/registry/default/components/navbar-components/settings-menu\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState<boolean>(true);\\n\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"relative flex-1\\\">\\n          <Input\\n            className=\\\"peer h-8 w-full max-w-xs ps-8 pe-2\\\"\\n            id={`input-${id}`}\\n            placeholder=\\\"Search...\\\"\\n            type=\\\"search\\\"\\n          />\\n          <div className=\\\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\\\">\\n            <SearchIcon size={16} />\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-4\\\">\\n          {/* Test mode */}\\n          <div className=\\\"inline-flex items-center gap-2 max-md:hidden\\\">\\n            <Label className=\\\"font-medium text-sm\\\" htmlFor={`switch-${id}`}>\\n              Test mode\\n            </Label>\\n            <Switch\\n              aria-label=\\\"Toggle switch\\\"\\n              checked={checked}\\n              className=\\\"data-[state=checked]:[&_span]:rtl:-translate-x-3 h-5 w-8 [&_span]:size-4 data-[state=checked]:[&_span]:translate-x-3\\\"\\n              id={`switch-${id}`}\\n              onCheckedChange={setChecked}\\n            />\\n          </div>\\n          <div className=\\\"flex items-center gap-2\\\">\\n            {/* Layout button */}\\n            <Button\\n              aria-label=\\\"Open layout menu\\\"\\n              className=\\\"size-8 rounded-full text-muted-foreground shadow-none\\\"\\n              size=\\\"icon\\\"\\n              variant=\\\"ghost\\\"\\n            >\\n              <LayoutGridIcon aria-hidden=\\\"true\\\" size={16} />\\n            </Button>\\n            {/* Info menu */}\\n            <InfoMenu />\\n            {/* Notification */}\\n            <NotificationMenu />\\n            {/* Settings */}\\n            <SettingsMenu />\\n          </div>\\n          {/* Add button */}\\n          <Button\\n            aria-label=\\\"Add new item\\\"\\n            className=\\\"size-8 rounded-full\\\"\\n            size=\\\"icon\\\"\\n          >\\n            <PlusIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/info-menu.tsx\",\n      \"content\": \"import {\\n  BookIcon,\\n  InfoIcon,\\n  LifeBuoyIcon,\\n  MessageCircleMoreIcon,\\n} from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function InfoMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open edit menu\\\"\\n          className=\\\"size-8 rounded-full shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <InfoIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"text-muted-foreground\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"pb-2\\\">\\n        <DropdownMenuLabel>Need help?</DropdownMenuLabel>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <BookIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Documentation\\n          </a>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <LifeBuoyIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Support\\n          </a>\\n        </DropdownMenuItem>\\n        <DropdownMenuItem\\n          asChild\\n          className=\\\"cursor-pointer py-1 focus:bg-transparent focus:underline\\\"\\n        >\\n          <a href=\\\"#\\\">\\n            <MessageCircleMoreIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60\\\"\\n              size={16}\\n            />\\n            Contact us\\n          </a>\\n        </DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst initialNotifications = [\\n  {\\n    action: \\\"requested review on\\\",\\n    id: 1,\\n    target: \\\"PR #42: Feature implementation\\\",\\n    timestamp: \\\"15 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Chris Tompson\\\",\\n  },\\n  {\\n    action: \\\"shared\\\",\\n    id: 2,\\n    target: \\\"New component library\\\",\\n    timestamp: \\\"45 minutes ago\\\",\\n    unread: true,\\n    user: \\\"Emma Davis\\\",\\n  },\\n  {\\n    action: \\\"assigned you to\\\",\\n    id: 3,\\n    target: \\\"API integration task\\\",\\n    timestamp: \\\"4 hours ago\\\",\\n    unread: false,\\n    user: \\\"James Wilson\\\",\\n  },\\n  {\\n    action: \\\"replied to your comment in\\\",\\n    id: 4,\\n    target: \\\"Authentication flow\\\",\\n    timestamp: \\\"12 hours ago\\\",\\n    unread: false,\\n    user: \\\"Alex Morgan\\\",\\n  },\\n  {\\n    action: \\\"commented on\\\",\\n    id: 5,\\n    target: \\\"Dashboard redesign\\\",\\n    timestamp: \\\"2 days ago\\\",\\n    unread: false,\\n    user: \\\"Sarah Chen\\\",\\n  },\\n  {\\n    action: \\\"mentioned you in\\\",\\n    id: 6,\\n    target: \\\"coss.com open graph image\\\",\\n    timestamp: \\\"2 weeks ago\\\",\\n    unread: false,\\n    user: \\\"Miky Derya\\\",\\n  },\\n];\\n\\nfunction Dot({ className }: { className?: string }) {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      fill=\\\"currentColor\\\"\\n      height=\\\"6\\\"\\n      viewBox=\\\"0 0 6 6\\\"\\n      width=\\\"6\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n    >\\n      <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport default function NotificationMenu() {\\n  const [notifications, setNotifications] = useState(initialNotifications);\\n  const unreadCount = notifications.filter((n) => n.unread).length;\\n\\n  const handleMarkAllAsRead = () => {\\n    setNotifications(\\n      notifications.map((notification) => ({\\n        ...notification,\\n        unread: false,\\n      })),\\n    );\\n  };\\n\\n  const handleNotificationClick = (id: number) => {\\n    setNotifications(\\n      notifications.map((notification) =>\\n        notification.id === id\\n          ? { ...notification, unread: false }\\n          : notification,\\n      ),\\n    );\\n  };\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open notifications\\\"\\n          className=\\\"relative size-8 rounded-full text-muted-foreground shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <BellIcon aria-hidden=\\\"true\\\" size={16} />\\n          {unreadCount > 0 && (\\n            <div\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\\\"\\n            />\\n          )}\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent className=\\\"w-80 p-1\\\">\\n        <div className=\\\"flex items-baseline justify-between gap-4 px-3 py-2\\\">\\n          <div className=\\\"font-semibold text-sm\\\">Notifications</div>\\n          {unreadCount > 0 && (\\n            <button\\n              className=\\\"font-medium text-xs hover:underline\\\"\\n              onClick={handleMarkAllAsRead}\\n              type=\\\"button\\\"\\n            >\\n              Mark all as read\\n            </button>\\n          )}\\n        </div>\\n        <div\\n          aria-orientation=\\\"horizontal\\\"\\n          className=\\\"-mx-1 my-1 h-px bg-border\\\"\\n          role=\\\"separator\\\"\\n          tabIndex={-1}\\n        />\\n        {notifications.map((notification) => (\\n          <div\\n            className=\\\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\\\"\\n            key={notification.id}\\n          >\\n            <div className=\\\"relative flex items-start pe-3\\\">\\n              <div className=\\\"flex-1 space-y-1\\\">\\n                <button\\n                  className=\\\"text-left text-foreground/80 after:absolute after:inset-0\\\"\\n                  onClick={() => handleNotificationClick(notification.id)}\\n                  type=\\\"button\\\"\\n                >\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.user}\\n                  </span>{\\\" \\\"}\\n                  {notification.action}{\\\" \\\"}\\n                  <span className=\\\"font-medium text-foreground hover:underline\\\">\\n                    {notification.target}\\n                  </span>\\n                  .\\n                </button>\\n                <div className=\\\"text-muted-foreground text-xs\\\">\\n                  {notification.timestamp}\\n                </div>\\n              </div>\\n              {notification.unread && (\\n                <div className=\\\"absolute end-0 self-center\\\">\\n                  <span className=\\\"sr-only\\\">Unread</span>\\n                  <Dot />\\n                </div>\\n              )}\\n            </div>\\n          </div>\\n        ))}\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/settings-menu.tsx\",\n      \"content\": \"import { SettingsIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function SettingsMenu() {\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button\\n          aria-label=\\\"Open edit menu\\\"\\n          className=\\\"rounded-full shadow-none\\\"\\n          size=\\\"icon\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <SettingsIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"text-muted-foreground\\\"\\n            size={16}\\n          />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent className=\\\"max-w-64\\\">\\n        <DropdownMenuItem>Appearance</DropdownMenuItem>\\n        <DropdownMenuItem>Preferences</DropdownMenuItem>\\n        <DropdownMenuItem>API Settings</DropdownMenuItem>\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-593.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-593\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/breadcrumb.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/calendar.json\",\n    \"https://coss.com/origin/r/checkbox.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/popover.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-593.tsx\",\n      \"content\": \"import { BookmarkIcon, HomeIcon } from \\\"lucide-react\\\";\\n\\nimport DatePicker from \\\"@/registry/default/components/navbar-components/date-picker\\\";\\nimport Filters from \\\"@/registry/default/components/navbar-components/filters\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <Breadcrumb>\\n          <BreadcrumbList>\\n            <BreadcrumbItem>\\n              <BreadcrumbLink href=\\\"#\\\">\\n                <HomeIcon aria-hidden=\\\"true\\\" size={16} />\\n                <span className=\\\"sr-only\\\">Home</span>\\n              </BreadcrumbLink>\\n            </BreadcrumbItem>\\n            <BreadcrumbSeparator />\\n            <BreadcrumbItem>\\n              <BreadcrumbPage>Reports</BreadcrumbPage>\\n            </BreadcrumbItem>\\n          </BreadcrumbList>\\n        </Breadcrumb>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          {/* Date picker */}\\n          <DatePicker />\\n          {/* Filters */}\\n          <Filters />\\n          {/* Saved button */}\\n          <Button\\n            className=\\\"text-sm max-sm:aspect-square max-sm:p-0\\\"\\n            size=\\\"sm\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            <BookmarkIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"sm:-ms-1 text-muted-foreground/80\\\"\\n              size={16}\\n            />\\n            <span className=\\\"max-sm:sr-only\\\">Saved</span>\\n          </Button>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/date-picker.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function DatePicker() {\\n  const [date, setDate] = useState<DateRange | undefined>();\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger asChild>\\n        <Button\\n          className=\\\"group w-full justify-between border-input bg-background px-3 font-normal text-sm outline-none outline-offset-0 focus-visible:outline-[3px]\\\"\\n          size=\\\"sm\\\"\\n          variant=\\\"outline\\\"\\n        >\\n          <CalendarIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"-ms-1 shrink-0 text-muted-foreground/80 transition-colors\\\"\\n            size={16}\\n          />\\n          <span className={cn(\\\"truncate\\\", !date && \\\"font-medium\\\")}>\\n            {date?.from ? (\\n              date.to ? (\\n                <>\\n                  {format(date.from, \\\"LLL dd, y\\\")} -{\\\" \\\"}\\n                  {format(date.to, \\\"LLL dd, y\\\")}\\n                </>\\n              ) : (\\n                format(date.from, \\\"LLL dd, y\\\")\\n              )\\n            ) : (\\n              \\\"Date\\\"\\n            )}\\n          </span>\\n        </Button>\\n      </PopoverTrigger>\\n      <PopoverContent align=\\\"start\\\" className=\\\"w-auto p-2\\\">\\n        <Calendar mode=\\\"range\\\" onSelect={setDate} selected={date} />\\n      </PopoverContent>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/filters.tsx\",\n      \"content\": \"import { ListFilterIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col gap-4\\\">\\n      <Popover>\\n        <PopoverTrigger asChild>\\n          <Button className=\\\"text-sm\\\" size=\\\"sm\\\" variant=\\\"outline\\\">\\n            <ListFilterIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"-ms-1 text-muted-foreground/80\\\"\\n              size={16}\\n            />\\n            Filters\\n          </Button>\\n        </PopoverTrigger>\\n        <PopoverContent className=\\\"w-36 p-3\\\">\\n          <div className=\\\"space-y-3\\\">\\n            <div className=\\\"font-medium text-xs\\\">Filters</div>\\n            <form>\\n              <div className=\\\"space-y-3\\\">\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <Checkbox id={`${id}-1`} />\\n                  <Label className=\\\"font-normal\\\" htmlFor={`${id}-1`}>\\n                    Real Time\\n                  </Label>\\n                </div>\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <Checkbox id={`${id}-2`} />\\n                  <Label className=\\\"font-normal\\\" htmlFor={`${id}-2`}>\\n                    Top Channels\\n                  </Label>\\n                </div>\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <Checkbox id={`${id}-3`} />\\n                  <Label className=\\\"font-normal\\\" htmlFor={`${id}-3`}>\\n                    Last Orders\\n                  </Label>\\n                </div>\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <Checkbox id={`${id}-4`} />\\n                  <Label className=\\\"font-normal\\\" htmlFor={`${id}-4`}>\\n                    Total Spent\\n                  </Label>\\n                </div>\\n              </div>\\n              <div\\n                aria-orientation=\\\"horizontal\\\"\\n                className=\\\"-mx-3 my-3 h-px bg-border\\\"\\n                role=\\\"separator\\\"\\n                tabIndex={-1}\\n              />\\n              <div className=\\\"flex justify-between gap-2\\\">\\n                <Button className=\\\"h-7 px-2\\\" size=\\\"sm\\\" variant=\\\"outline\\\">\\n                  Clear\\n                </Button>\\n                <Button className=\\\"h-7 px-2\\\" size=\\\"sm\\\">\\n                  Apply\\n                </Button>\\n              </div>\\n            </form>\\n          </div>\\n        </PopoverContent>\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-594.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-594\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/dropdown-menu.json\",\n    \"https://coss.com/origin/r/radio-group.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-594.tsx\",\n      \"content\": \"import { SparklesIcon, UploadIcon } from \\\"lucide-react\\\";\\n\\nimport AppToggle from \\\"@/registry/default/components/navbar-components/app-toggle\\\";\\nimport TeamSwitcher from \\\"@/registry/default/components/navbar-components/team-switcher\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nconst teams = [\\\"Acme Inc.\\\", \\\"coss.com\\\", \\\"Junon\\\"];\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex flex-1 items-center gap-2\\\">\\n          <TeamSwitcher defaultTeam={teams[0]} teams={teams} />\\n        </div>\\n        {/* Middle area */}\\n        <AppToggle />\\n        {/* Right side */}\\n        <div className=\\\"flex flex-1 items-center justify-end gap-2\\\">\\n          <Button\\n            className=\\\"text-sm max-sm:aspect-square max-sm:p-0\\\"\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <UploadIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"sm:-ms-1 opacity-60\\\"\\n              size={16}\\n            />\\n            <span className=\\\"max-sm:sr-only\\\">Export</span>\\n          </Button>\\n          <Button className=\\\"text-sm max-sm:aspect-square max-sm:p-0\\\" size=\\\"sm\\\">\\n            <SparklesIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"sm:-ms-1 opacity-60\\\"\\n              size={16}\\n            />\\n            <span className=\\\"max-sm:sr-only\\\">Upgrade</span>\\n          </Button>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/app-toggle.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { RadioGroup, RadioGroupItem } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function AppToggle() {\\n  const id = useId();\\n  const [selectedValue, setSelectedValue] = useState(\\\"on\\\");\\n\\n  return (\\n    <div className=\\\"inline-flex h-8 rounded-md bg-input/50 p-0.5\\\">\\n      <RadioGroup\\n        className=\\\"group relative inline-grid grid-cols-[1fr_1fr] items-center gap-0 font-medium text-sm after:absolute after:inset-y-0 after:w-1/2 after:rounded-sm after:bg-background after:shadow-xs after:transition-[translate,box-shadow] after:duration-300 after:ease-[cubic-bezier(0.16,1,0.3,1)] has-focus-visible:after:border-ring has-focus-visible:after:ring-[3px] has-focus-visible:after:ring-ring/50 data-[state=off]:after:translate-x-0 data-[state=on]:after:translate-x-full\\\"\\n        data-state={selectedValue}\\n        onValueChange={setSelectedValue}\\n        value={selectedValue}\\n      >\\n        <label className=\\\"relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-3 transition-colors group-data-[state=on]:text-muted-foreground/70\\\">\\n          Sitemap\\n          <RadioGroupItem className=\\\"sr-only\\\" id={`${id}-1`} value=\\\"off\\\" />\\n        </label>\\n        <label className=\\\"relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-3 transition-colors group-data-[state=off]:text-muted-foreground/70\\\">\\n          Wireframe\\n          <RadioGroupItem className=\\\"sr-only\\\" id={`${id}-2`} value=\\\"on\\\" />\\n        </label>\\n      </RadioGroup>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/components/navbar-components/team-switcher.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronsUpDown } from \\\"lucide-react\\\";\\nimport * as React from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  DropdownMenu,\\n  DropdownMenuContent,\\n  DropdownMenuItem,\\n  DropdownMenuTrigger,\\n} from \\\"@/registry/default/ui/dropdown-menu\\\";\\n\\nexport default function TeamSwitcher({\\n  teams,\\n  defaultTeam,\\n}: {\\n  teams: string[];\\n  defaultTeam: string;\\n}) {\\n  const [selectedProject, setSelectedProject] = React.useState(defaultTeam);\\n\\n  return (\\n    <DropdownMenu>\\n      <DropdownMenuTrigger asChild>\\n        <Button className=\\\"p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n          <span className=\\\"flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground\\\">\\n            {selectedProject.charAt(0).toUpperCase()}\\n          </span>\\n          <div className=\\\"flex flex-col gap-0.5 leading-none\\\">\\n            <span className=\\\"\\\">{selectedProject}</span>\\n          </div>\\n          <ChevronsUpDown className=\\\"text-muted-foreground/80\\\" size={14} />\\n        </Button>\\n      </DropdownMenuTrigger>\\n      <DropdownMenuContent align=\\\"start\\\">\\n        {teams.map((project) => (\\n          <DropdownMenuItem\\n            key={project}\\n            onSelect={() => setSelectedProject(project)}\\n          >\\n            {project}\\n          </DropdownMenuItem>\\n        ))}\\n      </DropdownMenuContent>\\n    </DropdownMenu>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-595.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-595\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-595.tsx\",\n      \"content\": \"import {\\n  ChevronLeftIcon,\\n  HistoryIcon,\\n  MessageSquareText,\\n  UserRoundPlus,\\n} from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 items-center justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          <Button\\n            aria-label=\\\"Go back\\\"\\n            asChild\\n            className=\\\"size-8\\\"\\n            size=\\\"icon\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <a href=\\\"#\\\">\\n              <ChevronLeftIcon />\\n            </a>\\n          </Button>\\n          <h1 className=\\\"font-medium text-sm\\\">Basic UI</h1>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-2\\\">\\n          {/* History button */}\\n          <Button\\n            aria-label=\\\"History\\\"\\n            className=\\\"size-8 rounded-full text-muted-foreground shadow-none\\\"\\n            size=\\\"icon\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <HistoryIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n          {/* Comments button */}\\n          <Button\\n            aria-label=\\\"Save\\\"\\n            className=\\\"size-8 rounded-full text-muted-foreground shadow-none\\\"\\n            size=\\\"icon\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <MessageSquareText aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n          {/* Add user */}\\n          <Button\\n            aria-label=\\\"Add user\\\"\\n            className=\\\"size-8 rounded-full text-muted-foreground shadow-none\\\"\\n            size=\\\"icon\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <UserRoundPlus aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n          {/* Online users */}\\n          <div className=\\\"ml-2 flex items-center gap-2\\\">\\n            <div className=\\\"relative\\\">\\n              <Avatar>\\n                <AvatarImage alt=\\\"Kelly King\\\" src=\\\"/origin/avatar-80-07.jpg\\\" />\\n                <AvatarFallback>KK</AvatarFallback>\\n              </Avatar>\\n              <span className=\\\"-end-0.5 -bottom-0.5 absolute size-3 rounded-full border-2 border-background bg-emerald-500\\\">\\n                <span className=\\\"sr-only\\\">Online</span>\\n              </span>\\n            </div>\\n            <div className=\\\"relative\\\">\\n              <Avatar>\\n                <AvatarImage\\n                  alt=\\\"Martha Johnson\\\"\\n                  src=\\\"/origin/avatar-80-06.jpg\\\"\\n                />\\n                <AvatarFallback>KK</AvatarFallback>\\n              </Avatar>\\n              <span className=\\\"-end-0.5 -bottom-0.5 absolute size-3 rounded-full border-2 border-background bg-muted-foreground\\\">\\n                <span className=\\\"sr-only\\\">Online</span>\\n              </span>\\n            </div>\\n            <div className=\\\"relative\\\">\\n              <Avatar>\\n                <AvatarImage alt=\\\"Linda Green\\\" src=\\\"/origin/avatar-80-05.jpg\\\" />\\n                <AvatarFallback>KK</AvatarFallback>\\n              </Avatar>\\n              <span className=\\\"-end-0.5 -bottom-0.5 absolute size-3 rounded-full border-2 border-background bg-muted-foreground\\\">\\n                <span className=\\\"sr-only\\\">Online</span>\\n              </span>\\n            </div>\\n            <Button\\n              className=\\\"flex size-8 items-center justify-center rounded-full bg-secondary text-muted-foreground text-xs ring-background hover:bg-secondary hover:text-foreground\\\"\\n              size=\\\"icon\\\"\\n              variant=\\\"secondary\\\"\\n            >\\n              +3\\n            </Button>\\n          </div>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-596.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-596\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/badge.json\",\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/navigation-menu.json\",\n    \"https://coss.com/origin/r/popover.json\",\n    \"https://coss.com/origin/r/switch.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-596.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ClockIcon, PowerIcon, PowerOffIcon, ZapIcon } from \\\"lucide-react\\\";\\nimport { useId, useState } from \\\"react\\\";\\n\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  NavigationMenu,\\n  NavigationMenuItem,\\n  NavigationMenuLink,\\n  NavigationMenuList,\\n} from \\\"@/registry/default/ui/navigation-menu\\\";\\nimport {\\n  Popover,\\n  PopoverContent,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\n// Navigation links array to be used in both desktop and mobile menus\\nconst navigationLinks = [\\n  { active: true, href: \\\"#\\\", label: \\\"Overview\\\" },\\n  { href: \\\"#\\\", label: \\\"Graphs\\\" },\\n  { href: \\\"#\\\", label: \\\"Backups\\\" },\\n];\\n\\nexport default function Component() {\\n  const id = useId();\\n  const [checked, setChecked] = useState<boolean>(true);\\n\\n  return (\\n    <header className=\\\"border-b px-4 md:px-6\\\">\\n      <div className=\\\"flex h-16 justify-between gap-4\\\">\\n        {/* Left side */}\\n        <div className=\\\"flex gap-2\\\">\\n          <div className=\\\"flex items-center md:hidden\\\">\\n            {/* Mobile menu trigger */}\\n            <Popover>\\n              <PopoverTrigger asChild>\\n                <Button className=\\\"group size-8\\\" size=\\\"icon\\\" variant=\\\"ghost\\\">\\n                  <svg\\n                    className=\\\"pointer-events-none\\\"\\n                    fill=\\\"none\\\"\\n                    height={16}\\n                    stroke=\\\"currentColor\\\"\\n                    strokeLinecap=\\\"round\\\"\\n                    strokeLinejoin=\\\"round\\\"\\n                    strokeWidth=\\\"2\\\"\\n                    viewBox=\\\"0 0 24 24\\\"\\n                    width={16}\\n                    xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n                  >\\n                    <path\\n                      className=\\\"-translate-y-[7px] origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\\\"\\n                      d=\\\"M4 12L20 12\\\"\\n                    />\\n                    <path\\n                      className=\\\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\\\"\\n                      d=\\\"M4 12H20\\\"\\n                    />\\n                    <path\\n                      className=\\\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\\\"\\n                      d=\\\"M4 12H20\\\"\\n                    />\\n                  </svg>\\n                </Button>\\n              </PopoverTrigger>\\n              <PopoverContent align=\\\"start\\\" className=\\\"w-36 p-1 md:hidden\\\">\\n                <NavigationMenu className=\\\"max-w-none *:w-full\\\">\\n                  <NavigationMenuList className=\\\"flex-col items-start gap-0 md:gap-2\\\">\\n                    {navigationLinks.map((link, _index) => (\\n                      <NavigationMenuItem className=\\\"w-full\\\" key={link.label}>\\n                        <NavigationMenuLink className=\\\"py-1.5\\\" href={link.href}>\\n                          {link.label}\\n                        </NavigationMenuLink>\\n                      </NavigationMenuItem>\\n                    ))}\\n                  </NavigationMenuList>\\n                </NavigationMenu>\\n              </PopoverContent>\\n            </Popover>\\n          </div>\\n          {/* Main nav */}\\n          <div className=\\\"flex items-center gap-6\\\">\\n            {/* Navigation menu */}\\n            <NavigationMenu className=\\\"h-full *:h-full max-md:hidden\\\">\\n              <NavigationMenuList className=\\\"h-full gap-2\\\">\\n                {navigationLinks.map((link, _index) => (\\n                  <NavigationMenuItem className=\\\"h-full\\\" key={link.label}>\\n                    <NavigationMenuLink\\n                      data-active={link.active ? \\\"\\\" : undefined}\\n                      className=\\\"h-full justify-center rounded-none border-transparent border-y-2 py-1.5 font-medium text-muted-foreground hover:border-b-primary hover:bg-transparent hover:text-primary data-[active]:border-b-primary data-[active]:bg-transparent!\\\"\\n                      href={link.href}\\n                    >\\n                      {link.label}\\n                    </NavigationMenuLink>\\n                  </NavigationMenuItem>\\n                ))}\\n              </NavigationMenuList>\\n            </NavigationMenu>\\n          </div>\\n        </div>\\n        {/* Right side */}\\n        <div className=\\\"flex items-center gap-4\\\">\\n          <div className=\\\"flex items-center gap-2\\\">\\n            <Badge className=\\\"gap-1.5 text-emerald-600\\\" variant=\\\"outline\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n              />\\n              Online\\n            </Badge>\\n            <Badge className=\\\"gap-1.5\\\" variant=\\\"outline\\\">\\n              <ZapIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-ms-0.5 opacity-60\\\"\\n                size={12}\\n              />\\n              99.9%\\n            </Badge>\\n            <Badge className=\\\"gap-1.5\\\" variant=\\\"outline\\\">\\n              <ClockIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"-ms-0.5 opacity-60\\\"\\n                size={12}\\n              />\\n              45ms\\n            </Badge>\\n          </div>\\n          {/* Switch */}\\n          <div>\\n            <div className=\\\"relative inline-grid h-7 grid-cols-[1fr_1fr] items-center font-medium text-sm\\\">\\n              <Switch\\n                checked={checked}\\n                className=\\\"peer [&_span]:data-[state=checked]:rtl:-translate-x-full absolute inset-0 h-[inherit] w-auto data-[state=unchecked]:bg-input/50 [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full\\\"\\n                id={id}\\n                onCheckedChange={setChecked}\\n              />\\n              <span className=\\\"peer-data-[state=unchecked]:rtl:-translate-x-full pointer-events-none relative ms-0.5 flex w-6 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full\\\">\\n                <PowerOffIcon aria-hidden=\\\"true\\\" size={12} />\\n              </span>\\n              <span className=\\\"peer-data-[state=checked]:-translate-x-full pointer-events-none relative me-0.5 flex w-6 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=unchecked]:invisible peer-data-[state=checked]:text-background peer-data-[state=checked]:rtl:translate-x-full\\\">\\n                <PowerIcon aria-hidden=\\\"true\\\" size={12} />\\n              </span>\\n            </div>\\n            <Label className=\\\"sr-only\\\" htmlFor={id}>\\n              Power\\n            </Label>\\n          </div>\\n        </div>\\n      </div>\\n    </header>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 3,\n    \"tags\": [\n      \"navbar, navigation\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-597.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-597\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\",\n    \"https://coss.com/origin/r/checkbox.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-597.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  checkboxesFeature,\\n  hotkeysCoreFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n} from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      selectionFeature,\\n      checkboxesFeature,\\n      hotkeysCoreFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      checkedItems: [\\\"components\\\", \\\"tokens\\\"],\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-1.5 *:first:grow\\\">\\n      <Tree indent={indent} tree={tree}>\\n        {tree.getItems().map((item) => {\\n          return (\\n            <div\\n              className=\\\"flex items-center gap-2 not-last:pb-0.5\\\"\\n              key={item.getId()}\\n            >\\n              <TreeItem className=\\\"flex-1 not-last:pb-0\\\" item={item}>\\n                <TreeItemLabel />\\n              </TreeItem>\\n              <Checkbox\\n                checked={\\n                  {\\n                    checked: true,\\n                    indeterminate: \\\"indeterminate\\\" as const,\\n                    unchecked: false,\\n                  }[item.getCheckedState()]\\n                }\\n                onCheckedChange={(checked) => {\\n                  const checkboxProps = item.getCheckboxProps();\\n                  checkboxProps.onChange?.({ target: { checked } });\\n                }}\\n              />\\n            </div>\\n          );\\n        })}\\n      </Tree>\\n\\n      <div className=\\\"space-y-2\\\">\\n        <p\\n          aria-live=\\\"polite\\\"\\n          className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n          role=\\\"region\\\"\\n        >\\n          Tree with checkboxes on the right ∙{\\\" \\\"}\\n          <a\\n            className=\\\"underline hover:text-foreground\\\"\\n            href=\\\"https://headless-tree.lukasbach.com\\\"\\n            rel=\\\"noopener noreferrer\\\"\\n            target=\\\"_blank\\\"\\n          >\\n            API\\n          </a>\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\",\n      \"checkbox\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-598.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-598\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\",\n    \"https://coss.com/origin/r/checkbox.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-598.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  checkboxesFeature,\\n  hotkeysCoreFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n} from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      selectionFeature,\\n      checkboxesFeature,\\n      hotkeysCoreFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      checkedItems: [\\\"components\\\", \\\"tokens\\\"],\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <Tree indent={indent} tree={tree}>\\n        {tree.getItems().map((item) => {\\n          return (\\n            <div\\n              className=\\\"flex items-center gap-1.5 not-last:pb-0.5\\\"\\n              key={item.getId()}\\n            >\\n              <Checkbox\\n                checked={\\n                  {\\n                    checked: true,\\n                    indeterminate: \\\"indeterminate\\\" as const,\\n                    unchecked: false,\\n                  }[item.getCheckedState()]\\n                }\\n                onCheckedChange={(checked) => {\\n                  const checkboxProps = item.getCheckboxProps();\\n                  checkboxProps.onChange?.({ target: { checked } });\\n                }}\\n              />\\n              <TreeItem className=\\\"flex-1 not-last:pb-0\\\" item={item}>\\n                <TreeItemLabel />\\n              </TreeItem>\\n            </div>\\n          );\\n        })}\\n      </Tree>\\n\\n      <div className=\\\"space-y-2\\\">\\n        <p\\n          aria-live=\\\"polite\\\"\\n          className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n          role=\\\"region\\\"\\n        >\\n          Tree with checkboxes on the left ∙{\\\" \\\"}\\n          <a\\n            className=\\\"underline hover:text-foreground\\\"\\n            href=\\\"https://headless-tree.lukasbach.com\\\"\\n            rel=\\\"noopener noreferrer\\\"\\n            target=\\\"_blank\\\"\\n          >\\n            API\\n          </a>\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\",\n      \"checkbox\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-599.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-599\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tree.json\",\n    \"https://coss.com/origin/r/checkbox.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-599.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  checkboxesFeature,\\n  hotkeysCoreFeature,\\n  selectionFeature,\\n  syncDataLoaderFeature,\\n} from \\\"@headless-tree/core\\\";\\nimport { useTree } from \\\"@headless-tree/react\\\";\\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \\\"lucide-react\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Tree, TreeItem, TreeItemLabel } from \\\"@/registry/default/ui/tree\\\";\\n\\ninterface Item {\\n  name: string;\\n  children?: string[];\\n}\\n\\nconst items: Record<string, Item> = {\\n  apis: { name: \\\"APIs\\\" },\\n  backend: { children: [\\\"apis\\\", \\\"infrastructure\\\"], name: \\\"Backend\\\" },\\n  company: {\\n    children: [\\\"engineering\\\", \\\"marketing\\\", \\\"operations\\\"],\\n    name: \\\"Company\\\",\\n  },\\n  components: { name: \\\"Components\\\" },\\n  content: { name: \\\"Content\\\" },\\n  \\\"design-system\\\": {\\n    children: [\\\"components\\\", \\\"tokens\\\", \\\"guidelines\\\"],\\n    name: \\\"Design System\\\",\\n  },\\n  engineering: {\\n    children: [\\\"frontend\\\", \\\"backend\\\", \\\"platform-team\\\"],\\n    name: \\\"Engineering\\\",\\n  },\\n  finance: { name: \\\"Finance\\\" },\\n  frontend: { children: [\\\"design-system\\\", \\\"web-platform\\\"], name: \\\"Frontend\\\" },\\n  guidelines: { name: \\\"Guidelines\\\" },\\n  hr: { name: \\\"HR\\\" },\\n  infrastructure: { name: \\\"Infrastructure\\\" },\\n  marketing: { children: [\\\"content\\\", \\\"seo\\\"], name: \\\"Marketing\\\" },\\n  operations: { children: [\\\"hr\\\", \\\"finance\\\"], name: \\\"Operations\\\" },\\n  \\\"platform-team\\\": { name: \\\"Platform Team\\\" },\\n  seo: { name: \\\"SEO\\\" },\\n  tokens: { name: \\\"Tokens\\\" },\\n  \\\"web-platform\\\": { name: \\\"Web Platform\\\" },\\n};\\n\\nconst indent = 20;\\n\\nexport default function Component() {\\n  const tree = useTree<Item>({\\n    canCheckFolders: true,\\n    dataLoader: {\\n      getChildren: (itemId) => items[itemId].children ?? [],\\n      getItem: (itemId) => items[itemId],\\n    },\\n    features: [\\n      syncDataLoaderFeature,\\n      selectionFeature,\\n      checkboxesFeature,\\n      hotkeysCoreFeature,\\n    ],\\n    getItemName: (item) => item.getItemData().name,\\n    indent,\\n    initialState: {\\n      checkedItems: [\\\"components\\\", \\\"tokens\\\"],\\n      expandedItems: [\\\"engineering\\\", \\\"frontend\\\", \\\"design-system\\\"],\\n    },\\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\\n    rootItemId: \\\"company\\\",\\n  });\\n\\n  return (\\n    <div className=\\\"flex h-full flex-col gap-2 *:first:grow\\\">\\n      <div>\\n        <Tree\\n          className=\\\"relative before:absolute before:inset-0 before:ms-4.5 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\\\"\\n          indent={indent}\\n          tree={tree}\\n        >\\n          {tree.getItems().map((item) => {\\n            return (\\n              <div\\n                className=\\\"flex items-center gap-1.5 not-last:pb-0.5\\\"\\n                key={item.getId()}\\n              >\\n                <Checkbox\\n                  checked={\\n                    {\\n                      checked: true,\\n                      indeterminate: \\\"indeterminate\\\" as const,\\n                      unchecked: false,\\n                    }[item.getCheckedState()]\\n                  }\\n                  onCheckedChange={(checked) => {\\n                    const checkboxProps = item.getCheckboxProps();\\n                    checkboxProps.onChange?.({ target: { checked } });\\n                  }}\\n                />\\n                <TreeItem className=\\\"flex-1 not-last:pb-0\\\" item={item}>\\n                  <TreeItemLabel className=\\\"before:-inset-y-0.5 before:-z-10 relative before:absolute before:inset-x-0 before:bg-background\\\">\\n                    <span className=\\\"flex items-center gap-2\\\">\\n                      {item.isFolder() ? (\\n                        item.isExpanded() ? (\\n                          <FolderOpenIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                        ) : (\\n                          <FolderIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                        )\\n                      ) : (\\n                        <FileIcon className=\\\"pointer-events-none size-4 text-muted-foreground\\\" />\\n                      )}\\n                      {item.getItemName()}\\n                    </span>\\n                  </TreeItemLabel>\\n                </TreeItem>\\n              </div>\\n            );\\n          })}\\n        </Tree>\\n      </div>\\n\\n      <div className=\\\"space-y-2\\\">\\n        <p\\n          aria-live=\\\"polite\\\"\\n          className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n          role=\\\"region\\\"\\n        >\\n          Tree with canCheckFolders option ∙{\\\" \\\"}\\n          <a\\n            className=\\\"underline hover:text-foreground\\\"\\n            href=\\\"https://headless-tree.lukasbach.com\\\"\\n            rel=\\\"noopener noreferrer\\\"\\n            target=\\\"_blank\\\"\\n          >\\n            API\\n          </a>\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"tree\",\n      \"checkbox\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-60.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-60\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-60.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>\\n        Required textarea <span className=\\\"text-destructive\\\">*</span>\\n      </Label>\\n      <Textarea id={id} placeholder=\\\"Leave a message\\\" required />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"required\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-61.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-61\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-61.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with helper text</Label>\\n      <Textarea id={id} placeholder=\\\"Leave a comment\\\" />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-muted-foreground text-xs\\\"\\n        role=\\\"region\\\"\\n      >\\n        Please add as many details as you can\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"helper\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-62.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-62\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-62.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <Label className=\\\"leading-6\\\" htmlFor={id}>\\n          Textarea with hint\\n        </Label>\\n        <span className=\\\"text-muted-foreground text-sm\\\">Optional</span>\\n      </div>\\n      <Textarea id={id} placeholder=\\\"Leave a comment\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"hint\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-63.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-63\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-63.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"[--ring:var(--color-indigo-300)] in-[.dark]:[--ring:var(--color-indigo-900)] *:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with colored border and ring</Label>\\n      <Textarea id={id} placeholder=\\\"Leave a comment\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-64.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-64\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-64.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with error</Label>\\n      <Textarea\\n        aria-invalid\\n        defaultValue=\\\"Hello!\\\"\\n        id={id}\\n        placeholder=\\\"Leave a comment\\\"\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-destructive text-xs\\\"\\n        role=\\\"alert\\\"\\n      >\\n        Message should be at least 10 characters\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"error\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-65.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-65\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-65.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with gray background</Label>\\n      <Textarea\\n        className=\\\"border-transparent bg-muted shadow-none\\\"\\n        id={id}\\n        placeholder=\\\"Leave a comment\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-66.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-66\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-66.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Shorter textarea</Label>\\n      <Textarea\\n        className=\\\"min-h-0\\\"\\n        id={id}\\n        placeholder=\\\"Leave a comment\\\"\\n        rows={2}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-67.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-67\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-67.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Disabled textarea</Label>\\n      <Textarea disabled id={id} placeholder=\\\"Leave a comment\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"disabled\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-68.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-68\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-68.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with left button</Label>\\n      <Textarea id={id} placeholder=\\\"Leave a comment\\\" />\\n      <Button variant=\\\"outline\\\">Send</Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-69.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-69\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-69.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with right button</Label>\\n      <Textarea id={id} placeholder=\\\"Leave a comment\\\" />\\n      <div className=\\\"flex justify-end\\\">\\n        <Button variant=\\\"outline\\\">Send</Button>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-70.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-70\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-70.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with button</Label>\\n      <Textarea id={id} placeholder=\\\"Leave a comment\\\" />\\n      <Button className=\\\"w-full\\\" variant=\\\"outline\\\">\\n        Send\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-71.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-71\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-71.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"group relative\\\">\\n      <Label\\n        className=\\\"-translate-y-1/2 absolute start-1 top-0 z-10 block bg-background px-2 font-medium text-foreground text-xs group-has-disabled:opacity-50\\\"\\n        htmlFor={id}\\n      >\\n        Textarea with overlapping label\\n      </Label>\\n      <Textarea id={id} />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-72.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-72\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-72.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"group relative\\\">\\n      <label\\n        className=\\\"group-focus-within:-translate-y-1/2 has-[+textarea:not(:placeholder-shown)]:-translate-y-1/2 absolute top-0 block origin-start translate-y-2 cursor-text px-1 text-muted-foreground/70 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:cursor-default group-focus-within:font-medium group-focus-within:text-foreground group-focus-within:text-xs has-[+textarea:not(:placeholder-shown)]:pointer-events-none has-[+textarea:not(:placeholder-shown)]:cursor-default has-aria-invalid:border-destructive has-[+textarea:not(:placeholder-shown)]:font-medium has-[+textarea:not(:placeholder-shown)]:text-foreground has-[+textarea:not(:placeholder-shown)]:text-xs has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\\\"\\n        htmlFor={id}\\n      >\\n        <span className=\\\"inline-flex bg-background px-2\\\">\\n          Textarea with label animation\\n        </span>\\n      </label>\\n      <Textarea id={id} placeholder=\\\" \\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-73.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-73\",\n  \"type\": \"registry:component\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-73.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"relative rounded-md border border-input bg-background shadow-xs outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 has-[input:is(:disabled)]:*:pointer-events-none dark:has-aria-invalid:ring-destructive/40\\\">\\n      <label\\n        className=\\\"block px-3 pt-2 font-medium text-foreground text-xs\\\"\\n        htmlFor={id}\\n      >\\n        Textarea with inset label\\n      </label>\\n      <textarea\\n        className=\\\"flex min-h-[70px] w-full bg-transparent px-3 pb-2 text-foreground text-sm placeholder:text-muted-foreground/70 focus-visible:outline-none\\\"\\n        id={id}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-74.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-74\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-74.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\n\\nimport { useCharacterLimit } from \\\"@/registry/default/hooks/use-character-limit\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  const maxLength = 180;\\n  const {\\n    value,\\n    characterCount,\\n    handleChange,\\n    maxLength: limit,\\n  } = useCharacterLimit({ maxLength });\\n\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with characters left</Label>\\n      <Textarea\\n        aria-describedby={`${id}-description`}\\n        id={id}\\n        maxLength={maxLength}\\n        onChange={handleChange}\\n        value={value}\\n      />\\n      <p\\n        aria-live=\\\"polite\\\"\\n        className=\\\"mt-2 text-right text-muted-foreground text-xs\\\"\\n        id={`${id}-description`}\\n        role=\\\"status\\\"\\n      >\\n        <span className=\\\"tabular-nums\\\">{limit - characterCount}</span>{\\\" \\\"}\\n        characters left\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-character-limit.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { type ChangeEvent, useState } from \\\"react\\\";\\n\\ntype UseCharacterLimitProps = {\\n  maxLength: number;\\n  initialValue?: string;\\n};\\n\\nexport function useCharacterLimit({\\n  maxLength,\\n  initialValue = \\\"\\\",\\n}: UseCharacterLimitProps) {\\n  const [value, setValue] = useState(initialValue);\\n  const [characterCount, setCharacterCount] = useState(initialValue.length);\\n\\n  const handleChange = (\\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\\n  ) => {\\n    const newValue = e.target.value;\\n    if (newValue.length <= maxLength) {\\n      setValue(newValue);\\n      setCharacterCount(newValue.length);\\n    }\\n  };\\n\\n  return {\\n    characterCount,\\n    handleChange,\\n    maxLength,\\n    value,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-75.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-75\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-75.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Textarea with no resize</Label>\\n      <Textarea\\n        className=\\\"[resize:none]\\\"\\n        id={id}\\n        placeholder=\\\"Leave a comment\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-76.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-76\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-76.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Read-only textarea</Label>\\n      <Textarea\\n        className=\\\"read-only:bg-muted\\\"\\n        defaultValue=\\\"This is a read-only textarea\\\"\\n        id={id}\\n        placeholder=\\\"Leave a comment\\\"\\n        readOnly\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\",\n      \"read-only\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-77.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-77\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/label.json\",\n    \"https://coss.com/origin/r/textarea.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-77.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\n\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Component() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"*:not-first:mt-2\\\">\\n      <Label htmlFor={id}>Autogrowing textarea</Label>\\n      <Textarea\\n        className=\\\"field-sizing-content max-h-29.5 min-h-0 resize-none py-1.75\\\"\\n        id={id}\\n        placeholder=\\\"Leave a comment\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"tags\": [\n      \"label\",\n      \"textarea\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-78.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-78\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-78.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return <Button>Button</Button>;\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-79.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-79\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-79.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return <Button disabled>Button</Button>;\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"disabled\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-80.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-80\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-80.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return <Button className=\\\"rounded-full\\\">Button</Button>;\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-81.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-81\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-81.tsx\",\n      \"content\": \"import { ArchiveIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button>\\n      <ArchiveIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n      Button\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-82.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-82\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-82.tsx\",\n      \"content\": \"import { TrashIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button variant=\\\"destructive\\\">\\n      <TrashIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n      Button\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"delete\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-83.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-83\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-83.tsx\",\n      \"content\": \"import { XIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button variant=\\\"secondary\\\">\\n      <XIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n      Button\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-84.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-84\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-84.tsx\",\n      \"content\": \"import { SparklesIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button variant=\\\"outline\\\">\\n      Button\\n      <SparklesIcon aria-hidden=\\\"true\\\" className=\\\"-me-1 opacity-60\\\" size={16} />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-85.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-85\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-85.tsx\",\n      \"content\": \"import { ArrowLeftIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"group\\\" variant=\\\"ghost\\\">\\n      <ArrowLeftIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"-ms-1 group-hover:-translate-x-0.5 opacity-60 transition-transform\\\"\\n        size={16}\\n      />\\n      Button\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"back\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-86.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-86\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-86.tsx\",\n      \"content\": \"import { ArrowRightIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"group\\\">\\n      Button\\n      <ArrowRightIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n        size={16}\\n      />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"next\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-87.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-87\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-87.tsx\",\n      \"content\": \"import { ArrowRightIcon, MailIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"group\\\" variant=\\\"secondary\\\">\\n      <MailIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n      Email\\n      <ArrowRightIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\\\"\\n        size={16}\\n      />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-88.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-88\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-88.tsx\",\n      \"content\": \"import { ChevronDownIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button>\\n      Button\\n      <ChevronDownIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"-me-1 opacity-60\\\"\\n        size={16}\\n      />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"dropdown\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-89.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-89\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-89.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Button variant=\\\"ghost\\\">Cancel</Button>\\n      <Button>Save</Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-90.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-90\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-90.tsx\",\n      \"content\": \"import { LoaderCircleIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button disabled>\\n      <LoaderCircleIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"-ms-1 animate-spin\\\"\\n        size={16}\\n      />\\n      Button\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"loading\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-91.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-91\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-91.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { LoaderCircleIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [isLoading, setIsLoading] = useState<boolean>(false);\\n\\n  const handleClick = () => {\\n    setIsLoading(true);\\n    // Simulate an async operation\\n    setTimeout(() => {\\n      setIsLoading(false);\\n    }, 1000); // Reset after 1 second\\n  };\\n\\n  return (\\n    <Button\\n      className=\\\"group relative disabled:opacity-100\\\"\\n      data-loading={isLoading || undefined}\\n      disabled={isLoading}\\n      onClick={handleClick}\\n    >\\n      <span className=\\\"group-data-loading:text-transparent\\\">Click me</span>\\n      {isLoading && (\\n        <div className=\\\"absolute inset-0 flex items-center justify-center\\\">\\n          <LoaderCircleIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"animate-spin\\\"\\n            size={16}\\n          />\\n        </div>\\n      )}\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"loading\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-92.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-92\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-92.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"gap-3\\\" variant=\\\"outline\\\">\\n      Messages\\n      <span className=\\\"-me-1 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground\\\">\\n        18\\n      </span>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"counter\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-93.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-93\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-93.tsx\",\n      \"content\": \"import { PrinterIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button variant=\\\"outline\\\">\\n      <PrinterIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" size={16} />\\n      Print\\n      <kbd className=\\\"-me-1 ms-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\">\\n        ⌘P\\n      </kbd>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"kbd\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-94.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-94\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-94.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"gap-0 rounded-full py-0 ps-0\\\">\\n      <div className=\\\"me-0.5 flex aspect-square h-full p-1.5\\\">\\n        <img\\n          alt=\\\"Profile image\\\"\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"h-auto w-full rounded-full\\\"\\n          height={24}\\n          src=\\\"/origin/avatar.jpg\\\"\\n          width={24}\\n        />\\n      </div>\\n      @georgelucas\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"user\",\n      \"avatar\",\n      \"profile\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-95.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-95\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/avatar.json\",\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-95.tsx\",\n      \"content\": \"import { ChevronDownIcon } from \\\"lucide-react\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"h-auto p-0 hover:bg-transparent\\\" variant=\\\"ghost\\\">\\n      <Avatar>\\n        <AvatarImage alt=\\\"Profile image\\\" src=\\\"/origin/avatar.jpg\\\" />\\n        <AvatarFallback>KK</AvatarFallback>\\n      </Avatar>\\n      <ChevronDownIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"user\",\n      \"avatar\",\n      \"profile\",\n      \"dropdown\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-96.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-96\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-96.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button className=\\\"aspect-square max-sm:p-0\\\" variant=\\\"outline\\\">\\n      <PlusIcon aria-hidden=\\\"true\\\" className=\\\"sm:-ms-1 opacity-60\\\" size={16} />\\n      <span className=\\\"max-sm:sr-only\\\">Add new</span>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-97.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-97\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-97.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  return (\\n    <Button\\n      aria-label=\\\"Add new item\\\"\\n      className=\\\"rounded-full\\\"\\n      size=\\\"icon\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      <PlusIcon aria-hidden=\\\"true\\\" size={16} />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-98.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-98\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-98.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { PlusIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Component() {\\n  const [open, setOpen] = useState<boolean>(false);\\n\\n  return (\\n    <Button\\n      aria-expanded={open}\\n      aria-label={open ? \\\"Close menu\\\" : \\\"Open menu\\\"}\\n      className=\\\"group rounded-full\\\"\\n      onClick={() => setOpen((prevState) => !prevState)}\\n      size=\\\"icon\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      <PlusIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"transition-transform duration-500 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)] group-aria-expanded:rotate-135\\\"\\n        size={16}\\n      />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"menu\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/comp-99.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"comp-99\",\n  \"type\": \"registry:component\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\",\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/components/comp-99.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { PlusIcon } from \\\"lucide-react\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Component() {\\n  return (\\n    <TooltipProvider delayDuration={0}>\\n      <Tooltip>\\n        <TooltipTrigger asChild>\\n          <Button aria-label=\\\"Add new item\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n            <PlusIcon aria-hidden=\\\"true\\\" size={16} />\\n          </Button>\\n        </TooltipTrigger>\\n        <TooltipContent className=\\\"px-2 py-1 text-xs\\\">Tooltip</TooltipContent>\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"meta\": {\n    \"style\": 2,\n    \"tags\": [\n      \"button\",\n      \"tooltip\"\n    ]\n  }\n}"
  },
  {
    "path": "apps/origin/public/r/cropper.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"cropper\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@origin-space/image-cropper\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/cropper.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Cropper as CropperPrimitive } from \\\"@origin-space/image-cropper\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Cropper({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CropperPrimitive.Root>) {\\n  return (\\n    <CropperPrimitive.Root\\n      className={cn(\\n        \\\"relative flex w-full cursor-move touch-none items-center justify-center overflow-hidden focus:outline-none\\\",\\n        className,\\n      )}\\n      data-slot=\\\"cropper\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CropperDescription({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CropperPrimitive.Description>) {\\n  return (\\n    <CropperPrimitive.Description\\n      className={cn(\\\"sr-only\\\", className)}\\n      data-slot=\\\"cropper-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CropperImage({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CropperPrimitive.Image>) {\\n  return (\\n    <CropperPrimitive.Image\\n      className={cn(\\n        \\\"pointer-events-none h-full w-full object-cover\\\",\\n        className,\\n      )}\\n      data-slot=\\\"cropper-image\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction CropperCropArea({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof CropperPrimitive.CropArea>) {\\n  return (\\n    <CropperPrimitive.CropArea\\n      className={cn(\\n        \\\"pointer-events-none absolute border-3 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.3)] in-[[data-slot=cropper]:focus-visible]:ring-[3px] in-[[data-slot=cropper]:focus-visible]:ring-white/50\\\",\\n        className,\\n      )}\\n      data-slot=\\\"cropper-crop-area\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Cropper, CropperDescription, CropperImage, CropperCropArea };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/datefield-rac.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"datefield-rac\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"react-aria-components\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/datefield-rac.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  composeRenderProps,\\n  type DateFieldProps,\\n  DateField as DateFieldRac,\\n  type DateInputProps as DateInputPropsRac,\\n  DateInput as DateInputRac,\\n  type DateSegmentProps,\\n  DateSegment as DateSegmentRac,\\n  type DateValue as DateValueRac,\\n  type TimeFieldProps,\\n  TimeField as TimeFieldRac,\\n  type TimeValue as TimeValueRac,\\n} from \\\"react-aria-components\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction DateField<T extends DateValueRac>({\\n  className,\\n  children,\\n  ...props\\n}: DateFieldProps<T>) {\\n  return (\\n    <DateFieldRac\\n      className={composeRenderProps(className, (className) => cn(className))}\\n      {...props}\\n    >\\n      {children}\\n    </DateFieldRac>\\n  );\\n}\\n\\nfunction TimeField<T extends TimeValueRac>({\\n  className,\\n  children,\\n  ...props\\n}: TimeFieldProps<T>) {\\n  return (\\n    <TimeFieldRac\\n      className={composeRenderProps(className, (className) => cn(className))}\\n      {...props}\\n    >\\n      {children}\\n    </TimeFieldRac>\\n  );\\n}\\n\\nfunction DateSegment({ className, ...props }: DateSegmentProps) {\\n  return (\\n    <DateSegmentRac\\n      className={composeRenderProps(className, (className) =>\\n        cn(\\n          \\\"inline rounded p-0.5 text-foreground caret-transparent outline-hidden data-invalid:data-focused:bg-destructive data-focused:data-placeholder:text-foreground data-invalid:data-focused:text-white data-invalid:data-placeholder:text-destructive data-disabled:cursor-not-allowed data-focused:bg-accent data-[type=literal]:px-0 data-[type=literal]:text-muted-foreground/70 data-focused:text-foreground data-invalid:data-focused:data-placeholder:text-white data-invalid:text-destructive data-placeholder:text-muted-foreground/70 data-disabled:opacity-50\\\",\\n          className,\\n        ),\\n      )}\\n      {...props}\\n      data-invalid\\n    />\\n  );\\n}\\n\\nconst dateInputStyle =\\n  \\\"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none data-focus-within:border-ring data-focus-within:ring-ring/50 data-focus-within:ring-[3px] data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40 data-focus-within:has-aria-invalid:border-destructive\\\";\\n\\ninterface DateInputProps extends DateInputPropsRac {\\n  className?: string;\\n  unstyled?: boolean;\\n}\\n\\nfunction DateInput({\\n  className,\\n  unstyled = false,\\n  ...props\\n}: Omit<DateInputProps, \\\"children\\\">) {\\n  return (\\n    <DateInputRac\\n      className={composeRenderProps(className, (className) =>\\n        cn(!unstyled && dateInputStyle, className),\\n      )}\\n      {...props}\\n    >\\n      {(segment) => <DateSegment segment={segment} />}\\n    </DateInputRac>\\n  );\\n}\\n\\nexport { DateField, DateInput, DateSegment, TimeField, dateInputStyle };\\nexport type { DateInputProps };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/dialog.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"dialog\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/dialog.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport { Dialog as DialogPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Dialog({\\n  ...props\\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\\n  return <DialogPrimitive.Root data-slot=\\\"dialog\\\" {...props} />;\\n}\\n\\nfunction DialogTrigger({\\n  ...props\\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\\n  return <DialogPrimitive.Trigger data-slot=\\\"dialog-trigger\\\" {...props} />;\\n}\\n\\nfunction DialogPortal({\\n  ...props\\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\\n  return <DialogPrimitive.Portal data-slot=\\\"dialog-portal\\\" {...props} />;\\n}\\n\\nfunction DialogClose({\\n  ...props\\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\\n  return <DialogPrimitive.Close data-slot=\\\"dialog-close\\\" {...props} />;\\n}\\n\\nfunction DialogOverlay({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\\n  return (\\n    <DialogPrimitive.Overlay\\n      className={cn(\\n        \\\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in\\\",\\n        className,\\n      )}\\n      data-slot=\\\"dialog-overlay\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DialogContent({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof DialogPrimitive.Content>) {\\n  return (\\n    <DialogPortal>\\n      <DialogOverlay />\\n      <DialogPrimitive.Content\\n        className={cn(\\n          \\\"-translate-x-1/2 -translate-y-1/2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] gap-4 overflow-y-auto rounded-xl border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-100\\\",\\n          className,\\n        )}\\n        data-slot=\\\"dialog-content\\\"\\n        {...props}\\n      >\\n        {children}\\n        <DialogPrimitive.Close className=\\\"group absolute top-3 right-3 flex size-7 items-center justify-center rounded outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none\\\">\\n          <XIcon\\n            className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n            size={16}\\n          />\\n          <span className=\\\"sr-only\\\">Close</span>\\n        </DialogPrimitive.Close>\\n      </DialogPrimitive.Content>\\n    </DialogPortal>\\n  );\\n}\\n\\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\\\"div\\\">) {\\n  return (\\n    <div\\n      className={cn(\\\"flex flex-col gap-1 text-center sm:text-left\\\", className)}\\n      data-slot=\\\"alert-dialog-header\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\\\"div\\\">) {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-dialog-footer\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DialogTitle({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\\n  return (\\n    <DialogPrimitive.Title\\n      className={cn(\\\"font-semibold text-lg leading-none\\\", className)}\\n      data-slot=\\\"alert-dialog-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DialogDescription({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\\n  return (\\n    <DialogPrimitive.Description\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"alert-dialog-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  Dialog,\\n  DialogClose,\\n  DialogContent,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogOverlay,\\n  DialogPortal,\\n  DialogTitle,\\n  DialogTrigger,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/dropdown-menu.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"dropdown-menu\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/dropdown-menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \\\"lucide-react\\\";\\nimport { DropdownMenu as DropdownMenuPrimitive } from \\\"radix-ui\\\";\\nimport * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\ntype PointerDownEvent = Parameters<\\n  NonNullable<DropdownMenuPrimitive.DropdownMenuContentProps[\\\"onPointerDown\\\"]>\\n>[0];\\ntype PointerDownOutsideEvent = Parameters<\\n  NonNullable<\\n    DropdownMenuPrimitive.DropdownMenuContentProps[\\\"onPointerDownOutside\\\"]\\n  >\\n>[0];\\n\\nfunction DropdownMenu({\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\\n  return <DropdownMenuPrimitive.Root data-slot=\\\"dropdown-menu\\\" {...props} />;\\n}\\n\\nfunction DropdownMenuPortal({\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\\n  return (\\n    <DropdownMenuPrimitive.Portal data-slot=\\\"dropdown-menu-portal\\\" {...props} />\\n  );\\n}\\n\\nfunction DropdownMenuTrigger({\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\\n  return (\\n    <DropdownMenuPrimitive.Trigger\\n      data-slot=\\\"dropdown-menu-trigger\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DropdownMenuContent({\\n  className,\\n  sideOffset = 4,\\n  onPointerDown,\\n  onPointerDownOutside,\\n  onCloseAutoFocus,\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\\n  const isCloseFromMouse = React.useRef<boolean>(false);\\n\\n  const handlePointerDown = React.useCallback(\\n    (e: PointerDownEvent) => {\\n      isCloseFromMouse.current = true;\\n      onPointerDown?.(e);\\n    },\\n    [onPointerDown],\\n  );\\n\\n  const handlePointerDownOutside = React.useCallback(\\n    (e: PointerDownOutsideEvent) => {\\n      isCloseFromMouse.current = true;\\n      onPointerDownOutside?.(e);\\n    },\\n    [onPointerDownOutside],\\n  );\\n\\n  const handleCloseAutoFocus = React.useCallback(\\n    (e: Event) => {\\n      if (onCloseAutoFocus) {\\n        return onCloseAutoFocus(e);\\n      }\\n\\n      if (!isCloseFromMouse.current) {\\n        return;\\n      }\\n\\n      e.preventDefault();\\n      isCloseFromMouse.current = false;\\n    },\\n    [onCloseAutoFocus],\\n  );\\n\\n  return (\\n    <DropdownMenuPrimitive.Portal>\\n      <DropdownMenuPrimitive.Content\\n        className={cn(\\n          \\\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in\\\",\\n          className,\\n        )}\\n        data-slot=\\\"dropdown-menu-content\\\"\\n        onCloseAutoFocus={handleCloseAutoFocus}\\n        onPointerDown={handlePointerDown}\\n        onPointerDownOutside={handlePointerDownOutside}\\n        sideOffset={sideOffset}\\n        {...props}\\n      />\\n    </DropdownMenuPrimitive.Portal>\\n  );\\n}\\n\\nfunction DropdownMenuGroup({\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\\n  return (\\n    <DropdownMenuPrimitive.Group data-slot=\\\"dropdown-menu-group\\\" {...props} />\\n  );\\n}\\n\\nfunction DropdownMenuItem({\\n  className,\\n  inset,\\n  variant = \\\"default\\\",\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\\n  inset?: boolean;\\n  variant?: \\\"default\\\" | \\\"destructive\\\";\\n}) {\\n  return (\\n    <DropdownMenuPrimitive.Item\\n      className={cn(\\n        \\\"data-[variant=destructive]:*:[svg]:!text-destructive-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive-foreground data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive-foreground dark:data-[variant=destructive]:focus:bg-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-inset={inset}\\n      data-slot=\\\"dropdown-menu-item\\\"\\n      data-variant={variant}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DropdownMenuCheckboxItem({\\n  className,\\n  children,\\n  checked,\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\\n  return (\\n    <DropdownMenuPrimitive.CheckboxItem\\n      checked={checked}\\n      className={cn(\\n        \\\"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"dropdown-menu-checkbox-item\\\"\\n      {...props}\\n    >\\n      <span className=\\\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\\\">\\n        <DropdownMenuPrimitive.ItemIndicator>\\n          <CheckIcon size={16} />\\n        </DropdownMenuPrimitive.ItemIndicator>\\n      </span>\\n      {children}\\n    </DropdownMenuPrimitive.CheckboxItem>\\n  );\\n}\\n\\nfunction DropdownMenuRadioGroup({\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\\n  return (\\n    <DropdownMenuPrimitive.RadioGroup\\n      data-slot=\\\"dropdown-menu-radio-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DropdownMenuRadioItem({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\\n  return (\\n    <DropdownMenuPrimitive.RadioItem\\n      className={cn(\\n        \\\"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"dropdown-menu-radio-item\\\"\\n      {...props}\\n    >\\n      <span className=\\\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\\\">\\n        <DropdownMenuPrimitive.ItemIndicator>\\n          <CircleIcon className=\\\"size-2 fill-current\\\" />\\n        </DropdownMenuPrimitive.ItemIndicator>\\n      </span>\\n      {children}\\n    </DropdownMenuPrimitive.RadioItem>\\n  );\\n}\\n\\nfunction DropdownMenuLabel({\\n  className,\\n  inset,\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\\n  inset?: boolean;\\n}) {\\n  return (\\n    <DropdownMenuPrimitive.Label\\n      className={cn(\\n        \\\"px-2 py-1.5 font-medium text-muted-foreground text-xs data-[inset]:pl-8\\\",\\n        className,\\n      )}\\n      data-inset={inset}\\n      data-slot=\\\"dropdown-menu-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DropdownMenuSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\\n  return (\\n    <DropdownMenuPrimitive.Separator\\n      className={cn(\\\"-mx-1 my-1 h-px bg-border\\\", className)}\\n      data-slot=\\\"dropdown-menu-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DropdownMenuShortcut({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">) {\\n  return (\\n    <kbd\\n      className={cn(\\n        \\\"-me-1 ms-auto inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\\\",\\n        className,\\n      )}\\n      data-slot=\\\"dropdown-menu-shortcut\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction DropdownMenuSub({\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\\n  return <DropdownMenuPrimitive.Sub data-slot=\\\"dropdown-menu-sub\\\" {...props} />;\\n}\\n\\nfunction DropdownMenuSubTrigger({\\n  className,\\n  inset,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\\n  inset?: boolean;\\n}) {\\n  return (\\n    <DropdownMenuPrimitive.SubTrigger\\n      className={cn(\\n        \\\"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[inset]:pl-8 data-[state=open]:text-accent-foreground\\\",\\n        className,\\n      )}\\n      data-inset={inset}\\n      data-slot=\\\"dropdown-menu-sub-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n      <ChevronRightIcon\\n        className=\\\"ml-auto text-muted-foreground/80\\\"\\n        size={16}\\n      />\\n    </DropdownMenuPrimitive.SubTrigger>\\n  );\\n}\\n\\nfunction DropdownMenuSubContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\\n  return (\\n    <DropdownMenuPrimitive.SubContent\\n      className={cn(\\n        \\\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in\\\",\\n        className,\\n      )}\\n      data-slot=\\\"dropdown-menu-sub-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  DropdownMenu,\\n  DropdownMenuCheckboxItem,\\n  DropdownMenuContent,\\n  DropdownMenuGroup,\\n  DropdownMenuItem,\\n  DropdownMenuLabel,\\n  DropdownMenuPortal,\\n  DropdownMenuRadioGroup,\\n  DropdownMenuRadioItem,\\n  DropdownMenuSeparator,\\n  DropdownMenuShortcut,\\n  DropdownMenuSub,\\n  DropdownMenuSubContent,\\n  DropdownMenuSubTrigger,\\n  DropdownMenuTrigger,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/hover-card.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"hover-card\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/hover-card.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { HoverCard as HoverCardPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction HoverCard({\\n  ...props\\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\\n  return <HoverCardPrimitive.Root data-slot=\\\"hover-card\\\" {...props} />;\\n}\\n\\nfunction HoverCardTrigger({\\n  ...props\\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\\n  return (\\n    <HoverCardPrimitive.Trigger data-slot=\\\"hover-card-trigger\\\" {...props} />\\n  );\\n}\\n\\nfunction HoverCardContent({\\n  className,\\n  align = \\\"center\\\",\\n  sideOffset = 4,\\n  showArrow = false,\\n  ...props\\n}: React.ComponentProps<typeof HoverCardPrimitive.Content> & {\\n  showArrow?: boolean;\\n}) {\\n  return (\\n    <HoverCardPrimitive.Content\\n      align={align}\\n      className={cn(\\n        \\\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in\\\",\\n        className,\\n      )}\\n      data-slot=\\\"hover-card-content\\\"\\n      sideOffset={sideOffset}\\n      {...props}\\n    >\\n      {props.children}\\n      {showArrow && (\\n        <HoverCardPrimitive.Arrow className=\\\"-my-px fill-popover drop-shadow-[0_1px_0_var(--border)]\\\" />\\n      )}\\n    </HoverCardPrimitive.Content>\\n  );\\n}\\n\\nexport { HoverCard, HoverCardContent, HoverCardTrigger };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/input.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/input.tsx\",\n      \"content\": \"import type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Input({ className, type, ...props }: React.ComponentProps<\\\"input\\\">) {\\n  return (\\n    <input\\n      className={cn(\\n        \\\"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground/70 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\\\",\\n        \\\"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\",\\n        \\\"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\\\",\\n        type === \\\"search\\\" &&\\n          \\\"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\\\",\\n        type === \\\"file\\\" &&\\n          \\\"p-0 pr-3 text-muted-foreground/70 italic file:me-3 file:h-full file:border-0 file:border-input file:border-r file:border-solid file:bg-transparent file:px-3 file:font-medium file:text-foreground file:text-sm file:not-italic\\\",\\n        className,\\n      )}\\n      data-slot=\\\"input\\\"\\n      type={type}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Input };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/label.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"label\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/label.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Label as LabelPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Label({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\\n  return (\\n    <LabelPrimitive.Root\\n      className={cn(\\n        \\\"select-none font-medium text-foreground text-sm leading-4 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50\\\",\\n        className,\\n      )}\\n      data-slot=\\\"label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Label };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/multiselect.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"multiselect\",\n  \"type\": \"registry:ui\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/command.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/multiselect.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Command as CommandPrimitive, useCommandState } from \\\"cmdk\\\";\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport * as React from \\\"react\\\";\\nimport { useEffect } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport {\\n  Command,\\n  CommandGroup,\\n  CommandItem,\\n  CommandList,\\n} from \\\"@/registry/default/ui/command\\\";\\n\\nexport interface Option {\\n  value: string;\\n  label: string;\\n  disable?: boolean;\\n  /** fixed option that can't be removed. */\\n  fixed?: boolean;\\n  /** Group the options by providing key. */\\n  [key: string]: string | boolean | undefined;\\n}\\ninterface GroupOption {\\n  [key: string]: Option[];\\n}\\n\\ninterface MultipleSelectorProps {\\n  value?: Option[];\\n  defaultOptions?: Option[];\\n  /** manually controlled options */\\n  options?: Option[];\\n  placeholder?: string;\\n  /** Loading component. */\\n  loadingIndicator?: React.ReactNode;\\n  /** Empty component. */\\n  emptyIndicator?: React.ReactNode;\\n  /** Debounce time for async search. Only work with `onSearch`. */\\n  delay?: number;\\n  /**\\n   * Only work with `onSearch` prop. Trigger search when `onFocus`.\\n   * For example, when user click on the input, it will trigger the search to get initial options.\\n   **/\\n  triggerSearchOnFocus?: boolean;\\n  /** async search */\\n  onSearch?: (value: string) => Promise<Option[]>;\\n  /**\\n   * sync search. This search will not showing loadingIndicator.\\n   * The rest props are the same as async search.\\n   * i.e.: creatable, groupBy, delay.\\n   **/\\n  onSearchSync?: (value: string) => Option[];\\n  onChange?: (options: Option[]) => void;\\n  /** Limit the maximum number of selected options. */\\n  maxSelected?: number;\\n  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */\\n  onMaxSelected?: (maxLimit: number) => void;\\n  /** Hide the placeholder when there are options selected. */\\n  hidePlaceholderWhenSelected?: boolean;\\n  disabled?: boolean;\\n  /** Group the options base on provided key. */\\n  groupBy?: string;\\n  className?: string;\\n  badgeClassName?: string;\\n  /**\\n   * First item selected is a default behavior by cmdk. That is why the default is true.\\n   * This is a workaround solution by add a dummy item.\\n   *\\n   * @reference: https://github.com/pacocoursey/cmdk/issues/171\\n   */\\n  selectFirstItem?: boolean;\\n  /** Allow user to create option when there is no option matched. */\\n  creatable?: boolean;\\n  /** Props of `Command` */\\n  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;\\n  /** Props of `CommandInput` */\\n  inputProps?: Omit<\\n    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,\\n    \\\"value\\\" | \\\"placeholder\\\" | \\\"disabled\\\"\\n  >;\\n  /** hide the clear all button. */\\n  hideClearAllButton?: boolean;\\n}\\n\\nexport interface MultipleSelectorRef {\\n  selectedValue: Option[];\\n  input: HTMLInputElement;\\n  focus: () => void;\\n  reset: () => void;\\n}\\n\\nexport function useDebounce<T>(value: T, delay?: number): T {\\n  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);\\n\\n  useEffect(() => {\\n    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);\\n\\n    return () => {\\n      clearTimeout(timer);\\n    };\\n  }, [value, delay]);\\n\\n  return debouncedValue;\\n}\\n\\nfunction transToGroupOption(options: Option[], groupBy?: string) {\\n  if (options.length === 0) {\\n    return {};\\n  }\\n  if (!groupBy) {\\n    return {\\n      \\\"\\\": options,\\n    };\\n  }\\n\\n  const groupOption: GroupOption = {};\\n  options.forEach((option) => {\\n    const key = (option[groupBy] as string) || \\\"\\\";\\n    if (!groupOption[key]) {\\n      groupOption[key] = [];\\n    }\\n    groupOption[key].push(option);\\n  });\\n  return groupOption;\\n}\\n\\nfunction removePickedOption(groupOption: GroupOption, picked: Option[]) {\\n  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;\\n\\n  for (const [key, value] of Object.entries(cloneOption)) {\\n    cloneOption[key] = value.filter(\\n      (val) => !picked.find((p) => p.value === val.value),\\n    );\\n  }\\n  return cloneOption;\\n}\\n\\nfunction isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {\\n  for (const [, value] of Object.entries(groupOption)) {\\n    if (\\n      value.some((option) => targetOption.find((p) => p.value === option.value))\\n    ) {\\n      return true;\\n    }\\n  }\\n  return false;\\n}\\n\\nconst CommandEmpty = ({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLDivElement>) => {\\n  const render = useCommandState((state) => state.filtered.count === 0);\\n\\n  if (!render) return null;\\n\\n  return (\\n    <div\\n      className={cn(\\\"px-2 py-4 text-center text-sm\\\", className)}\\n      role=\\\"presentation\\\"\\n      {...props}\\n    />\\n  );\\n};\\n\\nCommandEmpty.displayName = \\\"CommandEmpty\\\";\\n\\nconst MultipleSelector = ({\\n  value,\\n  onChange,\\n  placeholder,\\n  defaultOptions: arrayDefaultOptions = [],\\n  options: arrayOptions,\\n  delay,\\n  onSearch,\\n  onSearchSync,\\n  loadingIndicator,\\n  emptyIndicator,\\n  maxSelected = Number.MAX_SAFE_INTEGER,\\n  onMaxSelected,\\n  hidePlaceholderWhenSelected,\\n  disabled,\\n  groupBy,\\n  className,\\n  badgeClassName,\\n  selectFirstItem = true,\\n  creatable = false,\\n  triggerSearchOnFocus = false,\\n  commandProps,\\n  inputProps,\\n  hideClearAllButton = false,\\n}: MultipleSelectorProps) => {\\n  const inputRef = React.useRef<HTMLInputElement>(null);\\n  const [open, setOpen] = React.useState(false);\\n  const [onScrollbar, setOnScrollbar] = React.useState(false);\\n  const [isLoading, setIsLoading] = React.useState(false);\\n  const dropdownRef = React.useRef<HTMLDivElement>(null); // Added this\\n\\n  const [selected, setSelected] = React.useState<Option[]>(value || []);\\n  const [options, setOptions] = React.useState<GroupOption>(\\n    transToGroupOption(arrayDefaultOptions, groupBy),\\n  );\\n  const [inputValue, setInputValue] = React.useState(\\\"\\\");\\n  const debouncedSearchTerm = useDebounce(inputValue, delay || 500);\\n\\n  const handleClickOutside = React.useCallback(\\n    (event: MouseEvent | TouchEvent) => {\\n      if (\\n        dropdownRef.current &&\\n        !dropdownRef.current.contains(event.target as Node) &&\\n        inputRef.current &&\\n        !inputRef.current.contains(event.target as Node)\\n      ) {\\n        setOpen(false);\\n        inputRef.current.blur();\\n      }\\n    },\\n    [],\\n  );\\n\\n  const handleUnselect = React.useCallback(\\n    (option: Option) => {\\n      const newOptions = selected.filter((s) => s.value !== option.value);\\n      setSelected(newOptions);\\n      onChange?.(newOptions);\\n    },\\n    [onChange, selected],\\n  );\\n\\n  const handleKeyDown = React.useCallback(\\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\\n      const input = inputRef.current;\\n      if (input) {\\n        if (e.key === \\\"Delete\\\" || e.key === \\\"Backspace\\\") {\\n          if (input.value === \\\"\\\" && selected.length > 0) {\\n            const lastSelectOption = selected[selected.length - 1];\\n            // If last item is fixed, we should not remove it.\\n            if (!lastSelectOption.fixed) {\\n              handleUnselect(selected[selected.length - 1]);\\n            }\\n          }\\n        }\\n        // This is not a default behavior of the <input /> field\\n        if (e.key === \\\"Escape\\\") {\\n          input.blur();\\n        }\\n      }\\n    },\\n    [handleUnselect, selected],\\n  );\\n\\n  useEffect(() => {\\n    if (open) {\\n      document.addEventListener(\\\"mousedown\\\", handleClickOutside);\\n      document.addEventListener(\\\"touchend\\\", handleClickOutside);\\n    } else {\\n      document.removeEventListener(\\\"mousedown\\\", handleClickOutside);\\n      document.removeEventListener(\\\"touchend\\\", handleClickOutside);\\n    }\\n\\n    return () => {\\n      document.removeEventListener(\\\"mousedown\\\", handleClickOutside);\\n      document.removeEventListener(\\\"touchend\\\", handleClickOutside);\\n    };\\n  }, [open, handleClickOutside]);\\n\\n  useEffect(() => {\\n    if (value) {\\n      setSelected(value);\\n    }\\n  }, [value]);\\n\\n  useEffect(() => {\\n    /** If `onSearch` is provided, do not trigger options updated. */\\n    if (!arrayOptions || onSearch) {\\n      return;\\n    }\\n    const newOption = transToGroupOption(arrayOptions || [], groupBy);\\n    if (JSON.stringify(newOption) !== JSON.stringify(options)) {\\n      setOptions(newOption);\\n    }\\n  }, [arrayOptions, groupBy, onSearch, options]);\\n\\n  useEffect(() => {\\n    /** sync search */\\n\\n    const doSearchSync = () => {\\n      const res = onSearchSync?.(debouncedSearchTerm);\\n      setOptions(transToGroupOption(res || [], groupBy));\\n    };\\n\\n    const exec = async () => {\\n      if (!onSearchSync || !open) return;\\n\\n      if (triggerSearchOnFocus) {\\n        doSearchSync();\\n      }\\n\\n      if (debouncedSearchTerm) {\\n        doSearchSync();\\n      }\\n    };\\n\\n    void exec();\\n    // eslint-disable-next-line react-hooks/exhaustive-deps\\n  }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearchSync]);\\n\\n  useEffect(() => {\\n    /** async search */\\n\\n    const doSearch = async () => {\\n      setIsLoading(true);\\n      const res = await onSearch?.(debouncedSearchTerm);\\n      setOptions(transToGroupOption(res || [], groupBy));\\n      setIsLoading(false);\\n    };\\n\\n    const exec = async () => {\\n      if (!onSearch || !open) return;\\n\\n      if (triggerSearchOnFocus) {\\n        await doSearch();\\n      }\\n\\n      if (debouncedSearchTerm) {\\n        await doSearch();\\n      }\\n    };\\n\\n    void exec();\\n    // eslint-disable-next-line react-hooks/exhaustive-deps\\n  }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\\n\\n  const CreatableItem = () => {\\n    if (!creatable) return undefined;\\n    if (\\n      isOptionsExist(options, [{ label: inputValue, value: inputValue }]) ||\\n      selected.find((s) => s.value === inputValue)\\n    ) {\\n      return undefined;\\n    }\\n\\n    const Item = (\\n      <CommandItem\\n        className=\\\"cursor-pointer\\\"\\n        onMouseDown={(e) => {\\n          e.preventDefault();\\n          e.stopPropagation();\\n        }}\\n        onSelect={(value: string) => {\\n          if (selected.length >= maxSelected) {\\n            onMaxSelected?.(selected.length);\\n            return;\\n          }\\n          setInputValue(\\\"\\\");\\n          const newOptions = [...selected, { label: value, value }];\\n          setSelected(newOptions);\\n          onChange?.(newOptions);\\n        }}\\n        value={inputValue}\\n      >\\n        {`Create \\\"${inputValue}\\\"`}\\n      </CommandItem>\\n    );\\n\\n    // For normal creatable\\n    if (!onSearch && inputValue.length > 0) {\\n      return Item;\\n    }\\n\\n    // For async search creatable. avoid showing creatable item before loading at first.\\n    if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {\\n      return Item;\\n    }\\n\\n    return undefined;\\n  };\\n\\n  const EmptyItem = React.useCallback(() => {\\n    if (!emptyIndicator) return undefined;\\n\\n    // For async search that showing emptyIndicator\\n    if (onSearch && !creatable && Object.keys(options).length === 0) {\\n      return (\\n        <CommandItem disabled value=\\\"-\\\">\\n          {emptyIndicator}\\n        </CommandItem>\\n      );\\n    }\\n\\n    return <CommandEmpty>{emptyIndicator}</CommandEmpty>;\\n  }, [creatable, emptyIndicator, onSearch, options]);\\n\\n  const selectables = React.useMemo<GroupOption>(\\n    () => removePickedOption(options, selected),\\n    [options, selected],\\n  );\\n\\n  /** Avoid Creatable Selector freezing or lagging when paste a long string. */\\n  const commandFilter = React.useCallback(() => {\\n    if (commandProps?.filter) {\\n      return commandProps.filter;\\n    }\\n\\n    if (creatable) {\\n      return (value: string, search: string) => {\\n        return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;\\n      };\\n    }\\n    // Using default filter in `cmdk`. We don&lsquo;t have to provide it.\\n    return undefined;\\n  }, [creatable, commandProps?.filter]);\\n\\n  return (\\n    <Command\\n      ref={dropdownRef}\\n      {...commandProps}\\n      className={cn(\\n        \\\"h-auto overflow-visible bg-transparent\\\",\\n        commandProps?.className,\\n      )}\\n      filter={commandFilter()}\\n      onKeyDown={(e) => {\\n        handleKeyDown(e);\\n        commandProps?.onKeyDown?.(e);\\n      }} // When onSearch is provided, we don&lsquo;t want to filter the options. You can still override it.\\n      shouldFilter={\\n        commandProps?.shouldFilter !== undefined\\n          ? commandProps.shouldFilter\\n          : !onSearch\\n      }\\n    >\\n      <div\\n        className={cn(\\n          \\\"relative min-h-[38px] rounded-md border border-input text-sm outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\\\",\\n          {\\n            \\\"cursor-text\\\": !disabled && selected.length !== 0,\\n            \\\"p-1\\\": selected.length !== 0,\\n          },\\n          !hideClearAllButton && \\\"pe-9\\\",\\n          className,\\n        )}\\n        onClick={() => {\\n          if (disabled) return;\\n          inputRef?.current?.focus();\\n        }}\\n      >\\n        <div className=\\\"flex flex-wrap gap-1\\\">\\n          {selected.map((option) => {\\n            return (\\n              <div\\n                className={cn(\\n                  \\\"relative inline-flex h-7 animate-fadeIn cursor-default items-center rounded-md border bg-background ps-2 pe-7 pl-2 font-medium text-secondary-foreground text-xs transition-all hover:bg-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-fixed:pe-2\\\",\\n                  badgeClassName,\\n                )}\\n                data-disabled={disabled || undefined}\\n                data-fixed={option.fixed}\\n                key={option.value}\\n              >\\n                {option.label}\\n                <button\\n                  aria-label=\\\"Remove\\\"\\n                  className=\\\"-inset-y-px -end-px absolute flex size-7 items-center justify-center rounded-e-md border border-transparent p-0 text-muted-foreground/80 outline-none outline-hidden transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n                  onClick={() => handleUnselect(option)}\\n                  onKeyDown={(e) => {\\n                    if (e.key === \\\"Enter\\\") {\\n                      handleUnselect(option);\\n                    }\\n                  }}\\n                  onMouseDown={(e) => {\\n                    e.preventDefault();\\n                    e.stopPropagation();\\n                  }}\\n                  type=\\\"button\\\"\\n                >\\n                  <XIcon aria-hidden=\\\"true\\\" size={14} />\\n                </button>\\n              </div>\\n            );\\n          })}\\n          {/* Avoid having the \\\"Search\\\" Icon */}\\n          <CommandPrimitive.Input\\n            {...inputProps}\\n            className={cn(\\n              \\\"flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed\\\",\\n              {\\n                \\\"ml-1\\\": selected.length !== 0,\\n                \\\"px-3 py-2\\\": selected.length === 0,\\n                \\\"w-full\\\": hidePlaceholderWhenSelected,\\n              },\\n              inputProps?.className,\\n            )}\\n            disabled={disabled}\\n            onBlur={(event) => {\\n              if (!onScrollbar) {\\n                setOpen(false);\\n              }\\n              inputProps?.onBlur?.(event);\\n            }}\\n            onFocus={(event) => {\\n              setOpen(true);\\n              if (triggerSearchOnFocus) {\\n                onSearch?.(debouncedSearchTerm);\\n              }\\n              inputProps?.onFocus?.(event);\\n            }}\\n            onValueChange={(value) => {\\n              setInputValue(value);\\n              inputProps?.onValueChange?.(value);\\n            }}\\n            placeholder={\\n              hidePlaceholderWhenSelected && selected.length !== 0\\n                ? \\\"\\\"\\n                : placeholder\\n            }\\n            ref={inputRef}\\n            value={inputValue}\\n          />\\n          <button\\n            aria-label=\\\"Clear all\\\"\\n            className={cn(\\n              \\\"absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\",\\n              (hideClearAllButton ||\\n                disabled ||\\n                selected.length < 1 ||\\n                selected.filter((s) => s.fixed).length === selected.length) &&\\n                \\\"hidden\\\",\\n            )}\\n            onClick={() => {\\n              setSelected(selected.filter((s) => s.fixed));\\n              onChange?.(selected.filter((s) => s.fixed));\\n            }}\\n            type=\\\"button\\\"\\n          >\\n            <XIcon aria-hidden=\\\"true\\\" size={16} />\\n          </button>\\n        </div>\\n      </div>\\n      <div className=\\\"relative\\\">\\n        <div\\n          className={cn(\\n            \\\"absolute top-2 z-10 w-full overflow-hidden rounded-md border border-input\\\",\\n            \\\"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=open]:animate-in\\\",\\n            !open && \\\"hidden\\\",\\n          )}\\n          data-state={open ? \\\"open\\\" : \\\"closed\\\"}\\n        >\\n          {open && (\\n            <CommandList\\n              className=\\\"bg-popover text-popover-foreground shadow-lg outline-hidden\\\"\\n              onMouseEnter={() => {\\n                setOnScrollbar(true);\\n              }}\\n              onMouseLeave={() => {\\n                setOnScrollbar(false);\\n              }}\\n              onMouseUp={() => {\\n                inputRef?.current?.focus();\\n              }}\\n            >\\n              {isLoading ? (\\n                loadingIndicator\\n              ) : (\\n                <>\\n                  {EmptyItem()}\\n                  {CreatableItem()}\\n                  {!selectFirstItem && (\\n                    <CommandItem className=\\\"hidden\\\" value=\\\"-\\\" />\\n                  )}\\n                  {Object.entries(selectables).map(([key, dropdowns]) => (\\n                    <CommandGroup\\n                      className=\\\"h-full overflow-auto\\\"\\n                      heading={key}\\n                      key={key}\\n                    >\\n                      {dropdowns.map((option) => {\\n                        return (\\n                          <CommandItem\\n                            className={cn(\\n                              \\\"cursor-pointer\\\",\\n                              option.disable &&\\n                                \\\"pointer-events-none cursor-not-allowed opacity-50\\\",\\n                            )}\\n                            disabled={option.disable}\\n                            key={option.value}\\n                            onMouseDown={(e) => {\\n                              e.preventDefault();\\n                              e.stopPropagation();\\n                            }}\\n                            onSelect={() => {\\n                              if (selected.length >= maxSelected) {\\n                                onMaxSelected?.(selected.length);\\n                                return;\\n                              }\\n                              setInputValue(\\\"\\\");\\n                              const newOptions = [...selected, option];\\n                              setSelected(newOptions);\\n                              onChange?.(newOptions);\\n                            }}\\n                            value={option.value}\\n                          >\\n                            {option.label}\\n                          </CommandItem>\\n                        );\\n                      })}\\n                    </CommandGroup>\\n                  ))}\\n                </>\\n              )}\\n            </CommandList>\\n          )}\\n        </div>\\n      </div>\\n    </Command>\\n  );\\n};\\n\\nMultipleSelector.displayName = \\\"MultipleSelector\\\";\\nexport default MultipleSelector;\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/navigation-menu.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"navigation-menu\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/navigation-menu.tsx\",\n      \"content\": \"import { cva } from \\\"class-variance-authority\\\";\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { NavigationMenu as NavigationMenuPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction NavigationMenu({\\n  className,\\n  children,\\n  viewport = true,\\n  ...props\\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\\n  viewport?: boolean;\\n}) {\\n  return (\\n    <NavigationMenuPrimitive.Root\\n      className={cn(\\n        \\\"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\\\",\\n        className,\\n      )}\\n      data-slot=\\\"navigation-menu\\\"\\n      data-viewport={viewport}\\n      {...props}\\n    >\\n      {children}\\n      {viewport && <NavigationMenuViewport />}\\n    </NavigationMenuPrimitive.Root>\\n  );\\n}\\n\\nfunction NavigationMenuList({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\\n  return (\\n    <NavigationMenuPrimitive.List\\n      className={cn(\\n        \\\"group flex flex-1 list-none items-center justify-center gap-1\\\",\\n        className,\\n      )}\\n      data-slot=\\\"navigation-menu-list\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction NavigationMenuItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\\n  return (\\n    <NavigationMenuPrimitive.Item\\n      className={cn(\\\"relative\\\", className)}\\n      data-slot=\\\"navigation-menu-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nconst navigationMenuTriggerStyle = cva(\\n  \\\"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:hover:bg-accent\\\",\\n);\\n\\nfunction NavigationMenuTrigger({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\\n  return (\\n    <NavigationMenuPrimitive.Trigger\\n      className={cn(navigationMenuTriggerStyle(), \\\"group\\\", className)}\\n      data-slot=\\\"navigation-menu-trigger\\\"\\n      {...props}\\n    >\\n      {children}{\\\" \\\"}\\n      <ChevronDownIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\\\"\\n      />\\n    </NavigationMenuPrimitive.Trigger>\\n  );\\n}\\n\\nfunction NavigationMenuContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\\n  return (\\n    <NavigationMenuPrimitive.Content\\n      className={cn(\\n        \\\"data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out top-0 left-0 w-full p-2 pr-2.5 data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out md:absolute md:w-auto\\\",\\n        \\\"group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 **:data-[slot=navigation-menu-link]:focus:outline-none **:data-[slot=navigation-menu-link]:focus:ring-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in\\\",\\n        className,\\n      )}\\n      data-slot=\\\"navigation-menu-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction NavigationMenuViewport({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"absolute top-full left-0 isolate z-50 flex justify-center\\\",\\n      )}\\n    >\\n      <NavigationMenuPrimitive.Viewport\\n        className={cn(\\n          \\\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full origin-top-center overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=open]:animate-in md:w-(--radix-navigation-menu-viewport-width)\\\",\\n          className,\\n        )}\\n        data-slot=\\\"navigation-menu-viewport\\\"\\n        {...props}\\n      />\\n    </div>\\n  );\\n}\\n\\nfunction NavigationMenuLink({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\\n  return (\\n    <NavigationMenuPrimitive.Link\\n      className={cn(\\n        \\\"flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-all hover:bg-accent focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-active:bg-accent data-active:text-accent-foreground data-active:focus:bg-accent data-active:hover:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\\\",\\n        className,\\n      )}\\n      data-slot=\\\"navigation-menu-link\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction NavigationMenuIndicator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\\n  return (\\n    <NavigationMenuPrimitive.Indicator\\n      className={cn(\\n        \\\"data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in\\\",\\n        className,\\n      )}\\n      data-slot=\\\"navigation-menu-indicator\\\"\\n      {...props}\\n    >\\n      <div className=\\\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\\\" />\\n    </NavigationMenuPrimitive.Indicator>\\n  );\\n}\\n\\nexport {\\n  NavigationMenu,\\n  NavigationMenuList,\\n  NavigationMenuItem,\\n  NavigationMenuContent,\\n  NavigationMenuTrigger,\\n  NavigationMenuLink,\\n  NavigationMenuIndicator,\\n  NavigationMenuViewport,\\n  navigationMenuTriggerStyle,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/pagination.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"pagination\",\n  \"type\": \"registry:ui\",\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/button.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/pagination.tsx\",\n      \"content\": \"import {\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  MoreHorizontalIcon,\\n} from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { type Button, buttonVariants } from \\\"@/registry/default/ui/button\\\";\\n\\nfunction Pagination({ className, ...props }: React.ComponentProps<\\\"nav\\\">) {\\n  return (\\n    <nav\\n      aria-label=\\\"pagination\\\"\\n      className={cn(\\\"mx-auto flex w-full justify-center\\\", className)}\\n      data-slot=\\\"pagination\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction PaginationContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"ul\\\">) {\\n  return (\\n    <ul\\n      className={cn(\\\"flex flex-row items-center gap-1\\\", className)}\\n      data-slot=\\\"pagination-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction PaginationItem({ ...props }: React.ComponentProps<\\\"li\\\">) {\\n  return <li data-slot=\\\"pagination-item\\\" {...props} />;\\n}\\n\\ntype PaginationLinkProps = {\\n  isActive?: boolean;\\n  isDisabled?: boolean;\\n} & Pick<React.ComponentProps<typeof Button>, \\\"size\\\"> &\\n  React.ComponentProps<\\\"a\\\">;\\n\\nfunction PaginationLink({\\n  className,\\n  isActive,\\n  size = \\\"icon\\\",\\n  ...props\\n}: PaginationLinkProps) {\\n  return (\\n    <a\\n      aria-current={isActive ? \\\"page\\\" : undefined}\\n      className={cn(\\n        buttonVariants({\\n          size,\\n          variant: isActive ? \\\"outline\\\" : \\\"ghost\\\",\\n        }),\\n        className,\\n      )}\\n      data-active={isActive}\\n      data-slot=\\\"pagination-link\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction PaginationPrevious({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof PaginationLink>) {\\n  return (\\n    <PaginationLink\\n      aria-label=\\\"Go to previous page\\\"\\n      className={cn(\\\"gap-1 px-2.5 sm:pe-4\\\", className)}\\n      size=\\\"default\\\"\\n      {...props}\\n    >\\n      <ChevronLeftIcon size={16} />\\n      <span>Previous</span>\\n    </PaginationLink>\\n  );\\n}\\n\\nfunction PaginationNext({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof PaginationLink>) {\\n  return (\\n    <PaginationLink\\n      aria-label=\\\"Go to next page\\\"\\n      className={cn(\\\"gap-1 px-2.5 sm:ps-4\\\", className)}\\n      size=\\\"default\\\"\\n      {...props}\\n    >\\n      <span>Next</span>\\n      <ChevronRightIcon size={16} />\\n    </PaginationLink>\\n  );\\n}\\n\\nfunction PaginationEllipsis({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">) {\\n  return (\\n    <span\\n      aria-hidden\\n      className={cn(\\\"flex size-9 items-center justify-center\\\", className)}\\n      data-slot=\\\"pagination-ellipsis\\\"\\n      {...props}\\n    >\\n      <MoreHorizontalIcon size={16} />\\n      <span className=\\\"sr-only\\\">More pages</span>\\n    </span>\\n  );\\n}\\n\\nexport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n  PaginationLink,\\n  PaginationNext,\\n  PaginationPrevious,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/popover.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"popover\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/popover.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Popover as PopoverPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Popover({\\n  ...props\\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\\n  return <PopoverPrimitive.Root data-slot=\\\"popover\\\" {...props} />;\\n}\\n\\nfunction PopoverTrigger({\\n  ...props\\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\\n  return <PopoverPrimitive.Trigger data-slot=\\\"popover-trigger\\\" {...props} />;\\n}\\n\\nfunction PopoverContent({\\n  className,\\n  align = \\\"center\\\",\\n  sideOffset = 4,\\n  showArrow = false,\\n  ...props\\n}: React.ComponentProps<typeof PopoverPrimitive.Content> & {\\n  showArrow?: boolean;\\n}) {\\n  return (\\n    <PopoverPrimitive.Portal>\\n      <PopoverPrimitive.Content\\n        align={align}\\n        className={cn(\\n          \\\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in\\\",\\n          className,\\n        )}\\n        data-slot=\\\"popover-content\\\"\\n        sideOffset={sideOffset}\\n        {...props}\\n      >\\n        {props.children}\\n        {showArrow && (\\n          <PopoverPrimitive.Arrow className=\\\"-my-px fill-popover drop-shadow-[0_1px_0_var(--border)]\\\" />\\n        )}\\n      </PopoverPrimitive.Content>\\n    </PopoverPrimitive.Portal>\\n  );\\n}\\n\\nfunction PopoverAnchor({\\n  ...props\\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\\n  return <PopoverPrimitive.Anchor data-slot=\\\"popover-anchor\\\" {...props} />;\\n}\\n\\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/progress.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"progress\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/progress.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Progress as ProgressPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Progress({\\n  className,\\n  value,\\n  ...props\\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\\n  return (\\n    <ProgressPrimitive.Root\\n      className={cn(\\n        \\\"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\\\",\\n        className,\\n      )}\\n      data-slot=\\\"progress\\\"\\n      {...props}\\n    >\\n      <ProgressPrimitive.Indicator\\n        className=\\\"size-full flex-1 bg-primary transition-all\\\"\\n        data-slot=\\\"progress-indicator\\\"\\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\\n      />\\n    </ProgressPrimitive.Root>\\n  );\\n}\\n\\nexport { Progress };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/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  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/radio-group.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RadioGroup as RadioGroupPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction RadioGroup({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\\n  return (\\n    <RadioGroupPrimitive.Root\\n      className={cn(\\\"grid gap-3\\\", className)}\\n      data-slot=\\\"radio-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction RadioGroupItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\\n  return (\\n    <RadioGroupPrimitive.Item\\n      className={cn(\\n        \\\"aspect-square size-4 shrink-0 rounded-full border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40\\\",\\n        className,\\n      )}\\n      data-slot=\\\"radio-group-item\\\"\\n      {...props}\\n    >\\n      <RadioGroupPrimitive.Indicator className=\\\"flex items-center justify-center text-current\\\">\\n        <svg\\n          fill=\\\"currentcolor\\\"\\n          height=\\\"6\\\"\\n          viewBox=\\\"0 0 6 6\\\"\\n          width=\\\"6\\\"\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <circle cx=\\\"3\\\" cy=\\\"3\\\" r=\\\"3\\\" />\\n        </svg>\\n      </RadioGroupPrimitive.Indicator>\\n    </RadioGroupPrimitive.Item>\\n  );\\n}\\n\\nexport { RadioGroup, RadioGroupItem };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/scroll-area.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"scroll-area\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/scroll-area.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ScrollArea as ScrollAreaPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction ScrollArea({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\\n  return (\\n    <ScrollAreaPrimitive.Root\\n      className={cn(\\\"relative\\\", className)}\\n      data-slot=\\\"scroll-area\\\"\\n      {...props}\\n    >\\n      <ScrollAreaPrimitive.Viewport\\n        className=\\\"size-full rounded-[inherit]\\\"\\n        data-slot=\\\"scroll-area-viewport\\\"\\n      >\\n        {children}\\n      </ScrollAreaPrimitive.Viewport>\\n      <ScrollBar />\\n      <ScrollAreaPrimitive.Corner />\\n    </ScrollAreaPrimitive.Root>\\n  );\\n}\\n\\nfunction ScrollBar({\\n  className,\\n  orientation = \\\"vertical\\\",\\n  ...props\\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\\n  return (\\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\\n      className={cn(\\n        \\\"flex touch-none select-none\\\",\\n        orientation === \\\"vertical\\\" &&\\n          \\\"h-full w-2.5 border-l border-l-transparent p-px\\\",\\n        orientation === \\\"horizontal\\\" &&\\n          \\\"h-2.5 flex-col border-t border-t-transparent p-px\\\",\\n        className,\\n      )}\\n      data-slot=\\\"scroll-area-scrollbar\\\"\\n      orientation={orientation}\\n      {...props}\\n    >\\n      <ScrollAreaPrimitive.ScrollAreaThumb\\n        className=\\\"relative flex-1 rounded-full bg-border\\\"\\n        data-slot=\\\"scroll-area-thumb\\\"\\n      />\\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\\n  );\\n}\\n\\nexport { ScrollArea, ScrollBar };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/select-native.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"select-native\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/select-native.tsx\",\n      \"content\": \"import { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nconst SelectNative = ({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\\"select\\\">) => {\\n  return (\\n    <div className=\\\"relative flex\\\">\\n      <select\\n        className={cn(\\n          \\\"peer inline-flex w-full cursor-pointer appearance-none items-center rounded-md border border-input text-foreground text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 has-[option[disabled]:checked]:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\\\",\\n          props.multiple\\n            ? \\\"py-1 *:px-3 *:py-1 [&_option:checked]:bg-accent\\\"\\n            : \\\"h-9 ps-3 pe-8\\\",\\n          className,\\n        )}\\n        data-slot=\\\"select-native\\\"\\n        {...props}\\n      >\\n        {children}\\n      </select>\\n      {!props.multiple && (\\n        <span className=\\\"pointer-events-none absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50 peer-aria-invalid:text-destructive/80\\\">\\n          <ChevronDownIcon aria-hidden=\\\"true\\\" size={16} />\\n        </span>\\n      )}\\n    </div>\\n  );\\n};\\n\\nexport { SelectNative };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/select.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"select\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/select.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \\\"lucide-react\\\";\\nimport { Select as SelectPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Select({\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\\n  return <SelectPrimitive.Root data-slot=\\\"select\\\" {...props} />;\\n}\\n\\nfunction SelectGroup({\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\\n  return <SelectPrimitive.Group data-slot=\\\"select-group\\\" {...props} />;\\n}\\n\\nfunction SelectValue({\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\\n  return <SelectPrimitive.Value data-slot=\\\"select-value\\\" {...props} />;\\n}\\n\\nfunction SelectTrigger({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {\\n  return (\\n    <SelectPrimitive.Trigger\\n      className={cn(\\n        \\\"flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-foreground text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:aria-invalid:ring-destructive/40 [&>span]:line-clamp-1 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"select-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n      <SelectPrimitive.Icon asChild>\\n        <ChevronDownIcon\\n          className=\\\"shrink-0 in-aria-invalid:text-destructive/80 text-muted-foreground/80\\\"\\n          size={16}\\n        />\\n      </SelectPrimitive.Icon>\\n    </SelectPrimitive.Trigger>\\n  );\\n}\\n\\nfunction SelectContent({\\n  className,\\n  children,\\n  position = \\\"popper\\\",\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\\n  return (\\n    <SelectPrimitive.Portal>\\n      <SelectPrimitive.Content\\n        className={cn(\\n          \\\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-32 overflow-hidden rounded-md border border-input bg-popover text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in [&_[role=group]]:py-1\\\",\\n          position === \\\"popper\\\" &&\\n            \\\"data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 w-full min-w-[var(--radix-select-trigger-width)] data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1\\\",\\n          className,\\n        )}\\n        data-slot=\\\"select-content\\\"\\n        position={position}\\n        {...props}\\n      >\\n        <SelectScrollUpButton />\\n        <SelectPrimitive.Viewport\\n          className={cn(\\n            \\\"p-1\\\",\\n            position === \\\"popper\\\" && \\\"h-[var(--radix-select-trigger-height)]\\\",\\n          )}\\n        >\\n          {children}\\n        </SelectPrimitive.Viewport>\\n        <SelectScrollDownButton />\\n      </SelectPrimitive.Content>\\n    </SelectPrimitive.Portal>\\n  );\\n}\\n\\nfunction SelectLabel({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\\n  return (\\n    <SelectPrimitive.Label\\n      className={cn(\\n        \\\"py-1.5 ps-8 pe-2 font-medium text-muted-foreground text-xs\\\",\\n        className,\\n      )}\\n      data-slot=\\\"select-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction SelectItem({\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\\n  return (\\n    <SelectPrimitive.Item\\n      className={cn(\\n        \\\"relative flex w-full cursor-default select-none items-center rounded py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\\\",\\n        className,\\n      )}\\n      data-slot=\\\"select-item\\\"\\n      {...props}\\n    >\\n      <span className=\\\"absolute start-2 flex size-3.5 items-center justify-center\\\">\\n        <SelectPrimitive.ItemIndicator>\\n          <CheckIcon size={16} />\\n        </SelectPrimitive.ItemIndicator>\\n      </span>\\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\\n    </SelectPrimitive.Item>\\n  );\\n}\\n\\nfunction SelectSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\\n  return (\\n    <SelectPrimitive.Separator\\n      className={cn(\\\"-mx-1 my-1 h-px bg-border\\\", className)}\\n      data-slot=\\\"select-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction SelectScrollUpButton({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\\n  return (\\n    <SelectPrimitive.ScrollUpButton\\n      className={cn(\\n        \\\"flex cursor-default items-center justify-center py-1 text-muted-foreground/80\\\",\\n        className,\\n      )}\\n      data-slot=\\\"select-scroll-up-button\\\"\\n      {...props}\\n    >\\n      <ChevronUpIcon size={16} />\\n    </SelectPrimitive.ScrollUpButton>\\n  );\\n}\\n\\nfunction SelectScrollDownButton({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\\n  return (\\n    <SelectPrimitive.ScrollDownButton\\n      className={cn(\\n        \\\"flex cursor-default items-center justify-center py-1 text-muted-foreground/80\\\",\\n        className,\\n      )}\\n      data-slot=\\\"select-scroll-down-button\\\"\\n      {...props}\\n    >\\n      <ChevronDownIcon size={16} />\\n    </SelectPrimitive.ScrollDownButton>\\n  );\\n}\\n\\nexport {\\n  Select,\\n  SelectContent,\\n  SelectGroup,\\n  SelectItem,\\n  SelectLabel,\\n  SelectScrollDownButton,\\n  SelectScrollUpButton,\\n  SelectSeparator,\\n  SelectTrigger,\\n  SelectValue,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/slider.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"slider\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/tooltip.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/slider.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Slider as SliderPrimitive } from \\\"radix-ui\\\";\\nimport * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nfunction Slider({\\n  className,\\n  defaultValue,\\n  value,\\n  min = 0,\\n  max = 100,\\n  showTooltip = false,\\n  tooltipContent,\\n  ...props\\n}: React.ComponentProps<typeof SliderPrimitive.Root> & {\\n  showTooltip?: boolean;\\n  tooltipContent?: (value: number) => React.ReactNode;\\n}) {\\n  const [internalValues, setInternalValues] = React.useState<number[]>(\\n    Array.isArray(value)\\n      ? value\\n      : Array.isArray(defaultValue)\\n        ? defaultValue\\n        : [min, max],\\n  );\\n\\n  React.useEffect(() => {\\n    if (value !== undefined) {\\n      setInternalValues(Array.isArray(value) ? value : [value]);\\n    }\\n  }, [value]);\\n\\n  const handleValueChange = (newValue: number[]) => {\\n    setInternalValues(newValue);\\n    props.onValueChange?.(newValue);\\n  };\\n\\n  const [showTooltipState, setShowTooltipState] = React.useState(false);\\n\\n  const handlePointerDown = () => {\\n    if (showTooltip) {\\n      setShowTooltipState(true);\\n    }\\n  };\\n\\n  const handlePointerUp = React.useCallback(() => {\\n    if (showTooltip) {\\n      setShowTooltipState(false);\\n    }\\n  }, [showTooltip]);\\n\\n  React.useEffect(() => {\\n    if (showTooltip) {\\n      document.addEventListener(\\\"pointerup\\\", handlePointerUp);\\n      return () => {\\n        document.removeEventListener(\\\"pointerup\\\", handlePointerUp);\\n      };\\n    }\\n  }, [showTooltip, handlePointerUp]);\\n\\n  const renderThumb = (value: number) => {\\n    const thumb = (\\n      <SliderPrimitive.Thumb\\n        className=\\\"block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm outline-none ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\\\"\\n        data-slot=\\\"slider-thumb\\\"\\n        onPointerDown={handlePointerDown}\\n      />\\n    );\\n\\n    if (!showTooltip) return thumb;\\n\\n    return (\\n      <TooltipProvider>\\n        <Tooltip open={showTooltipState}>\\n          <TooltipTrigger asChild>{thumb}</TooltipTrigger>\\n          <TooltipContent\\n            className=\\\"px-2 py-1 text-xs\\\"\\n            side={props.orientation === \\\"vertical\\\" ? \\\"right\\\" : \\\"top\\\"}\\n            sideOffset={8}\\n          >\\n            <p>{tooltipContent ? tooltipContent(value) : value}</p>\\n          </TooltipContent>\\n        </Tooltip>\\n      </TooltipProvider>\\n    );\\n  };\\n\\n  return (\\n    <SliderPrimitive.Root\\n      className={cn(\\n        \\\"relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50\\\",\\n        className,\\n      )}\\n      data-slot=\\\"slider\\\"\\n      defaultValue={defaultValue}\\n      max={max}\\n      min={min}\\n      onValueChange={handleValueChange}\\n      value={value}\\n      {...props}\\n    >\\n      <SliderPrimitive.Track\\n        className={cn(\\n          \\\"relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5\\\",\\n        )}\\n        data-slot=\\\"slider-track\\\"\\n      >\\n        <SliderPrimitive.Range\\n          className={cn(\\n            \\\"absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\\\",\\n          )}\\n          data-slot=\\\"slider-range\\\"\\n        />\\n      </SliderPrimitive.Track>\\n      {Array.from({ length: internalValues.length }, (_, index) => (\\n        <React.Fragment key={String(index)}>\\n          {renderThumb(internalValues[index])}\\n        </React.Fragment>\\n      ))}\\n    </SliderPrimitive.Root>\\n  );\\n}\\n\\nexport { Slider };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/sonner.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"sonner\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"sonner\",\n    \"next-themes\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/sonner.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useTheme } from \\\"next-themes\\\";\\nimport { Toaster as Sonner, type ToasterProps } from \\\"sonner\\\";\\n\\nconst Toaster = ({ ...props }: ToasterProps) => {\\n  const { theme = \\\"system\\\" } = useTheme();\\n\\n  return (\\n    <Sonner\\n      className=\\\"toaster group\\\"\\n      style={\\n        {\\n          \\\"--normal-bg\\\": \\\"var(--popover)\\\",\\n          \\\"--normal-border\\\": \\\"var(--border)\\\",\\n          \\\"--normal-text\\\": \\\"var(--popover-foreground)\\\",\\n        } as React.CSSProperties\\n      }\\n      theme={theme as ToasterProps[\\\"theme\\\"]}\\n      toastOptions={{\\n        classNames: {\\n          description: \\\"text-muted-foreground!\\\",\\n        },\\n      }}\\n      {...props}\\n    />\\n  );\\n};\\n\\nexport { Toaster };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/stepper.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"stepper\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/stepper.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, LoaderCircleIcon } from \\\"lucide-react\\\";\\nimport { Slot } from \\\"radix-ui\\\";\\nimport * as React from \\\"react\\\";\\nimport { createContext, useContext } from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\n// Types\\ntype StepperContextValue = {\\n  activeStep: number;\\n  setActiveStep: (step: number) => void;\\n  orientation: \\\"horizontal\\\" | \\\"vertical\\\";\\n};\\n\\ntype StepItemContextValue = {\\n  step: number;\\n  state: StepState;\\n  isDisabled: boolean;\\n  isLoading: boolean;\\n};\\n\\ntype StepState = \\\"active\\\" | \\\"completed\\\" | \\\"inactive\\\" | \\\"loading\\\";\\n\\n// Contexts\\nconst StepperContext = createContext<StepperContextValue | undefined>(\\n  undefined,\\n);\\nconst StepItemContext = createContext<StepItemContextValue | undefined>(\\n  undefined,\\n);\\n\\nconst useStepper = () => {\\n  const context = useContext(StepperContext);\\n  if (!context) {\\n    throw new Error(\\\"useStepper must be used within a Stepper\\\");\\n  }\\n  return context;\\n};\\n\\nconst useStepItem = () => {\\n  const context = useContext(StepItemContext);\\n  if (!context) {\\n    throw new Error(\\\"useStepItem must be used within a StepperItem\\\");\\n  }\\n  return context;\\n};\\n\\n// Components\\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\\n  defaultValue?: number;\\n  value?: number;\\n  onValueChange?: (value: number) => void;\\n  orientation?: \\\"horizontal\\\" | \\\"vertical\\\";\\n}\\n\\nfunction Stepper({\\n  defaultValue = 0,\\n  value,\\n  onValueChange,\\n  orientation = \\\"horizontal\\\",\\n  className,\\n  ...props\\n}: StepperProps) {\\n  const [activeStep, setInternalStep] = React.useState(defaultValue);\\n\\n  const setActiveStep = React.useCallback(\\n    (step: number) => {\\n      if (value === undefined) {\\n        setInternalStep(step);\\n      }\\n      onValueChange?.(step);\\n    },\\n    [value, onValueChange],\\n  );\\n\\n  const currentStep = value ?? activeStep;\\n\\n  return (\\n    <StepperContext.Provider\\n      value={{\\n        activeStep: currentStep,\\n        orientation,\\n        setActiveStep,\\n      }}\\n    >\\n      <div\\n        className={cn(\\n          \\\"group/stepper inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\\\",\\n          className,\\n        )}\\n        data-orientation={orientation}\\n        data-slot=\\\"stepper\\\"\\n        {...props}\\n      />\\n    </StepperContext.Provider>\\n  );\\n}\\n\\n// StepperItem\\ninterface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {\\n  step: number;\\n  completed?: boolean;\\n  disabled?: boolean;\\n  loading?: boolean;\\n}\\n\\nfunction StepperItem({\\n  step,\\n  completed = false,\\n  disabled = false,\\n  loading = false,\\n  className,\\n  children,\\n  ...props\\n}: StepperItemProps) {\\n  const { activeStep } = useStepper();\\n\\n  const state: StepState =\\n    completed || step < activeStep\\n      ? \\\"completed\\\"\\n      : activeStep === step\\n        ? \\\"active\\\"\\n        : \\\"inactive\\\";\\n\\n  const isLoading = loading && step === activeStep;\\n\\n  return (\\n    <StepItemContext.Provider\\n      value={{ isDisabled: disabled, isLoading, state, step }}\\n    >\\n      <div\\n        className={cn(\\n          \\\"group/step flex items-center group-data-[orientation=horizontal]/stepper:flex-row group-data-[orientation=vertical]/stepper:flex-col\\\",\\n          className,\\n        )}\\n        data-slot=\\\"stepper-item\\\"\\n        data-state={state}\\n        {...(isLoading ? { \\\"data-loading\\\": true } : {})}\\n        {...props}\\n      >\\n        {children}\\n      </div>\\n    </StepItemContext.Provider>\\n  );\\n}\\n\\n// StepperTrigger\\ninterface StepperTriggerProps\\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\\n  asChild?: boolean;\\n}\\n\\nfunction StepperTrigger({\\n  asChild = false,\\n  className,\\n  children,\\n  ...props\\n}: StepperTriggerProps) {\\n  const { setActiveStep } = useStepper();\\n  const { step, isDisabled } = useStepItem();\\n\\n  if (asChild) {\\n    const Comp = asChild ? Slot.Root : \\\"span\\\";\\n    return (\\n      <Comp className={className} data-slot=\\\"stepper-trigger\\\">\\n        {children}\\n      </Comp>\\n    );\\n  }\\n\\n  return (\\n    <button\\n      className={cn(\\n        \\\"inline-flex items-center gap-3 rounded-full outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\\\",\\n        className,\\n      )}\\n      data-slot=\\\"stepper-trigger\\\"\\n      disabled={isDisabled}\\n      onClick={() => setActiveStep(step)}\\n      type=\\\"button\\\"\\n      {...props}\\n    >\\n      {children}\\n    </button>\\n  );\\n}\\n\\n// StepperIndicator\\ninterface StepperIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\\n  asChild?: boolean;\\n}\\n\\nfunction StepperIndicator({\\n  asChild = false,\\n  className,\\n  children,\\n  ...props\\n}: StepperIndicatorProps) {\\n  const { state, step, isLoading } = useStepItem();\\n\\n  return (\\n    <span\\n      className={cn(\\n        \\\"relative flex size-6 shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground text-xs data-[state=active]:bg-primary data-[state=completed]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:text-primary-foreground\\\",\\n        className,\\n      )}\\n      data-slot=\\\"stepper-indicator\\\"\\n      data-state={state}\\n      {...props}\\n    >\\n      {asChild ? (\\n        children\\n      ) : (\\n        <>\\n          <span className=\\\"transition-all group-data-[state=completed]/step:scale-0 group-data-loading/step:scale-0 group-data-[state=completed]/step:opacity-0 group-data-loading/step:opacity-0 group-data-loading/step:transition-none\\\">\\n            {step}\\n          </span>\\n          <CheckIcon\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"absolute scale-0 opacity-0 transition-all group-data-[state=completed]/step:scale-100 group-data-[state=completed]/step:opacity-100\\\"\\n            size={16}\\n          />\\n          {isLoading && (\\n            <span className=\\\"absolute transition-all\\\">\\n              <LoaderCircleIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"animate-spin\\\"\\n                size={14}\\n              />\\n            </span>\\n          )}\\n        </>\\n      )}\\n    </span>\\n  );\\n}\\n\\n// StepperTitle\\nfunction StepperTitle({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLHeadingElement>) {\\n  return (\\n    <h3\\n      className={cn(\\\"font-medium text-sm\\\", className)}\\n      data-slot=\\\"stepper-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\n// StepperDescription\\nfunction StepperDescription({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLParagraphElement>) {\\n  return (\\n    <p\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"stepper-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\n// StepperSeparator\\nfunction StepperSeparator({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLDivElement>) {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"m-0.5 bg-muted group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=vertical]/stepper:h-12 group-data-[orientation=horizontal]/stepper:w-full group-data-[orientation=vertical]/stepper:w-0.5 group-data-[orientation=horizontal]/stepper:flex-1 group-data-[state=completed]/step:bg-primary\\\",\\n        className,\\n      )}\\n      data-slot=\\\"stepper-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  Stepper,\\n  StepperDescription,\\n  StepperIndicator,\\n  StepperItem,\\n  StepperSeparator,\\n  StepperTitle,\\n  StepperTrigger,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/switch.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"switch\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/switch.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Switch as SwitchPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Switch({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\\n  return (\\n    <SwitchPrimitive.Root\\n      className={cn(\\n        \\\"peer inline-flex h-6 w-10 shrink-0 items-center rounded-full border-2 border-transparent outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\\\",\\n        className,\\n      )}\\n      data-slot=\\\"switch\\\"\\n      {...props}\\n    >\\n      <SwitchPrimitive.Thumb\\n        className={cn(\\n          \\\"data-[state=checked]:rtl:-translate-x-4 pointer-events-none block size-5 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\\\",\\n        )}\\n        data-slot=\\\"switch-thumb\\\"\\n      />\\n    </SwitchPrimitive.Root>\\n  );\\n}\\n\\nexport { Switch };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/table.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"table\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/table.tsx\",\n      \"content\": \"import type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Table({ className, ...props }: React.ComponentProps<\\\"table\\\">) {\\n  return (\\n    <div className=\\\"relative w-full overflow-auto\\\">\\n      <table\\n        className={cn(\\\"w-full caption-bottom text-sm\\\", className)}\\n        data-slot=\\\"table\\\"\\n        {...props}\\n      />\\n    </div>\\n  );\\n}\\n\\nfunction TableHeader({ className, ...props }: React.ComponentProps<\\\"thead\\\">) {\\n  return (\\n    <thead className={cn(className)} data-slot=\\\"table-header\\\" {...props} />\\n  );\\n}\\n\\nfunction TableBody({ className, ...props }: React.ComponentProps<\\\"tbody\\\">) {\\n  return (\\n    <tbody\\n      className={cn(\\\"[&_tr:last-child]:border-0\\\", className)}\\n      data-slot=\\\"table-body\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TableFooter({ className, ...props }: React.ComponentProps<\\\"tfoot\\\">) {\\n  return (\\n    <tfoot\\n      className={cn(\\n        \\\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-footer\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TableRow({ className, ...props }: React.ComponentProps<\\\"tr\\\">) {\\n  return (\\n    <tr\\n      className={cn(\\n        \\\"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-row\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TableHead({ className, ...props }: React.ComponentProps<\\\"th\\\">) {\\n  return (\\n    <th\\n      className={cn(\\n        \\\"h-12 px-3 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pr-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-head\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TableCell({ className, ...props }: React.ComponentProps<\\\"td\\\">) {\\n  return (\\n    <td\\n      className={cn(\\n        \\\"p-3 align-middle [&:has([role=checkbox])]:pr-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-cell\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TableCaption({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"caption\\\">) {\\n  return (\\n    <caption\\n      className={cn(\\\"mt-4 text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"table-caption\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  Table,\\n  TableBody,\\n  TableCaption,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/tabs.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tabs\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/tabs.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Tabs as TabsPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Tabs({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\\n  return (\\n    <TabsPrimitive.Root\\n      className={cn(\\\"flex flex-col gap-2\\\", className)}\\n      data-slot=\\\"tabs\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TabsList({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\\n  return (\\n    <TabsPrimitive.List\\n      className={cn(\\n        \\\"inline-flex w-fit items-center justify-center rounded-md bg-muted p-0.5 text-muted-foreground/70\\\",\\n        className,\\n      )}\\n      data-slot=\\\"tabs-list\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TabsTrigger({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\\n  return (\\n    <TabsPrimitive.Trigger\\n      className={cn(\\n        \\\"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm outline-none transition-all hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"tabs-trigger\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction TabsContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\\n  return (\\n    <TabsPrimitive.Content\\n      className={cn(\\\"flex-1 outline-none\\\", className)}\\n      data-slot=\\\"tabs-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/textarea.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"textarea\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/textarea.tsx\",\n      \"content\": \"import type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction Textarea({ className, ...props }: React.ComponentProps<\\\"textarea\\\">) {\\n  return (\\n    <textarea\\n      className={cn(\\n        \\\"flex min-h-19.5 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\\\",\\n        className,\\n      )}\\n      data-slot=\\\"textarea\\\"\\n      {...props}\\n    />\\n  );\\n}\\nTextarea.displayName = \\\"Textarea\\\";\\n\\nexport { Textarea };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/timeline.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"timeline\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/timeline.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Slot } from \\\"radix-ui\\\";\\nimport * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\n// Types\\ntype TimelineContextValue = {\\n  activeStep: number;\\n  setActiveStep: (step: number) => void;\\n};\\n\\n// Context\\nconst TimelineContext = React.createContext<TimelineContextValue | undefined>(\\n  undefined,\\n);\\n\\nconst useTimeline = () => {\\n  const context = React.useContext(TimelineContext);\\n  if (!context) {\\n    throw new Error(\\\"useTimeline must be used within a Timeline\\\");\\n  }\\n  return context;\\n};\\n\\n// Components\\ninterface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {\\n  defaultValue?: number;\\n  value?: number;\\n  onValueChange?: (value: number) => void;\\n  orientation?: \\\"horizontal\\\" | \\\"vertical\\\";\\n}\\n\\nfunction Timeline({\\n  defaultValue = 1,\\n  value,\\n  onValueChange,\\n  orientation = \\\"vertical\\\",\\n  className,\\n  ...props\\n}: TimelineProps) {\\n  const [activeStep, setInternalStep] = React.useState(defaultValue);\\n\\n  const setActiveStep = React.useCallback(\\n    (step: number) => {\\n      if (value === undefined) {\\n        setInternalStep(step);\\n      }\\n      onValueChange?.(step);\\n    },\\n    [value, onValueChange],\\n  );\\n\\n  const currentStep = value ?? activeStep;\\n\\n  return (\\n    <TimelineContext.Provider\\n      value={{ activeStep: currentStep, setActiveStep }}\\n    >\\n      <div\\n        className={cn(\\n          \\\"group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\\\",\\n          className,\\n        )}\\n        data-orientation={orientation}\\n        data-slot=\\\"timeline\\\"\\n        {...props}\\n      />\\n    </TimelineContext.Provider>\\n  );\\n}\\n\\n// TimelineContent\\nfunction TimelineContent({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLDivElement>) {\\n  return (\\n    <div\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"timeline-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\n// TimelineDate\\ninterface TimelineDateProps extends React.HTMLAttributes<HTMLTimeElement> {\\n  asChild?: boolean;\\n}\\n\\nfunction TimelineDate({\\n  asChild = false,\\n  className,\\n  ...props\\n}: TimelineDateProps) {\\n  const Comp = asChild ? Slot.Root : \\\"time\\\";\\n\\n  return (\\n    <Comp\\n      className={cn(\\n        \\\"mb-1 block font-medium text-muted-foreground text-xs group-data-[orientation=vertical]/timeline:max-sm:h-4\\\",\\n        className,\\n      )}\\n      data-slot=\\\"timeline-date\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\n// TimelineHeader\\nfunction TimelineHeader({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLDivElement>) {\\n  return (\\n    <div className={cn(className)} data-slot=\\\"timeline-header\\\" {...props} />\\n  );\\n}\\n\\n// TimelineIndicator\\ninterface TimelineIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\\n  asChild?: boolean;\\n}\\n\\nfunction TimelineIndicator({\\n  asChild = false,\\n  className,\\n  children,\\n  ...props\\n}: TimelineIndicatorProps) {\\n  return (\\n    <div\\n      aria-hidden=\\\"true\\\"\\n      className={cn(\\n        \\\"group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 absolute size-4 rounded-full border-2 border-primary/20 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=horizontal]/timeline:left-0 group-data-completed/timeline-item:border-primary\\\",\\n        className,\\n      )}\\n      data-slot=\\\"timeline-indicator\\\"\\n      {...props}\\n    >\\n      {children}\\n    </div>\\n  );\\n}\\n\\n// TimelineItem\\ninterface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {\\n  step: number;\\n}\\n\\nfunction TimelineItem({ step, className, ...props }: TimelineItemProps) {\\n  const { activeStep } = useTimeline();\\n\\n  return (\\n    <div\\n      className={cn(\\n        \\\"group/timeline-item relative flex flex-1 flex-col gap-0.5 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:not-last:pb-12 has-[+[data-completed]]:[&_[data-slot=timeline-separator]]:bg-primary\\\",\\n        className,\\n      )}\\n      data-completed={step <= activeStep || undefined}\\n      data-slot=\\\"timeline-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\n// TimelineSeparator\\nfunction TimelineSeparator({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLDivElement>) {\\n  return (\\n    <div\\n      aria-hidden=\\\"true\\\"\\n      className={cn(\\n        \\\"group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 absolute self-start bg-primary/10 group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=vertical]/timeline:translate-y-4.5\\\",\\n        className,\\n      )}\\n      data-slot=\\\"timeline-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\n// TimelineTitle\\nfunction TimelineTitle({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLHeadingElement>) {\\n  return (\\n    <h3\\n      className={cn(\\\"font-medium text-sm\\\", className)}\\n      data-slot=\\\"timeline-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  Timeline,\\n  TimelineContent,\\n  TimelineDate,\\n  TimelineHeader,\\n  TimelineIndicator,\\n  TimelineItem,\\n  TimelineSeparator,\\n  TimelineTitle,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/toast.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toast\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/toast.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport { Toast as ToastPrimitives } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nconst ToastProvider = ToastPrimitives.Provider;\\n\\nfunction ToastViewport({\\n  className,\\n  ...props\\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>) {\\n  return (\\n    <ToastPrimitives.Viewport\\n      className={cn(\\n        \\\"fixed top-0 right-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:flex-col md:max-w-[400px]\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nconst toastVariants = cva(\\n  \\\"group data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=closed]:data-[swipe-direction=left]:slide-out-to-left-full data-[state=closed]:data-[swipe-direction=right]:slide-out-to-right-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between overflow-hidden rounded-md border p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\\\",\\n  {\\n    defaultVariants: {\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      variant: {\\n        default: \\\"border bg-background text-foreground\\\",\\n        destructive:\\n          \\\"destructive group border-destructive bg-destructive text-white\\\",\\n      },\\n    },\\n  },\\n);\\n\\nfunction Toast({\\n  className,\\n  variant,\\n  ...props\\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\\n  VariantProps<typeof toastVariants>) {\\n  return (\\n    <ToastPrimitives.Root\\n      className={cn(toastVariants({ variant }), className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction ToastAction({\\n  className,\\n  asChild = false,\\n  ...props\\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>) {\\n  return (\\n    <ToastPrimitives.Action\\n      asChild={asChild}\\n      className={cn(\\n        !asChild &&\\n          \\\"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-secondary focus:ring-ring focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 focus:group-[.destructive]:ring-destructive hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-white\\\",\\n        className,\\n      )}\\n      {...props}\\n    >\\n      {props.children}\\n    </ToastPrimitives.Action>\\n  );\\n}\\n\\nfunction ToastClose({\\n  className,\\n  asChild = false,\\n  ...props\\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>) {\\n  return (\\n    <ToastPrimitives.Close\\n      asChild={asChild}\\n      className={cn(\\n        !asChild &&\\n          \\\"group absolute top-3 right-3 flex size-7 items-center justify-center rounded outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none\\\",\\n        className,\\n      )}\\n      toast-close=\\\"\\\"\\n      {...props}\\n    >\\n      {asChild ? (\\n        props.children\\n      ) : (\\n        <XIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"opacity-60 transition-opacity group-hover:opacity-100\\\"\\n          size={16}\\n        />\\n      )}\\n    </ToastPrimitives.Close>\\n  );\\n}\\n\\nfunction ToastTitle({\\n  className,\\n  ...props\\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>) {\\n  return (\\n    <ToastPrimitives.Title\\n      className={cn(\\\"font-medium text-sm\\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction ToastDescription({\\n  className,\\n  ...props\\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>) {\\n  return (\\n    <ToastPrimitives.Description\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;\\n\\ntype ToastActionElement = React.ReactElement<typeof ToastAction>;\\n\\nexport {\\n  Toast,\\n  ToastAction,\\n  ToastClose,\\n  ToastDescription,\\n  ToastProvider,\\n  ToastTitle,\\n  ToastViewport,\\n  type ToastActionElement,\\n  type ToastProps,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"path\": \"registry/default/hooks/use-toast.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\n// Inspired by react-hot-toast library\\nimport * as React from \\\"react\\\";\\n\\nimport type {\\n  ToastActionElement,\\n  ToastProps,\\n} from \\\"@/registry/default/ui/toast\\\";\\n\\nconst TOAST_LIMIT = 1;\\nconst TOAST_REMOVE_DELAY = 1000000;\\n\\ntype ToasterToast = ToastProps & {\\n  id: string;\\n  title?: React.ReactNode;\\n  description?: React.ReactNode;\\n  action?: ToastActionElement;\\n};\\n\\nconst actionTypes = {\\n  ADD_TOAST: \\\"ADD_TOAST\\\",\\n  DISMISS_TOAST: \\\"DISMISS_TOAST\\\",\\n  REMOVE_TOAST: \\\"REMOVE_TOAST\\\",\\n  UPDATE_TOAST: \\\"UPDATE_TOAST\\\",\\n} as const;\\n\\nlet count = 0;\\n\\nfunction genId() {\\n  count = (count + 1) % Number.MAX_SAFE_INTEGER;\\n  return count.toString();\\n}\\n\\ntype ActionType = typeof actionTypes;\\n\\ntype Action =\\n  | {\\n      type: ActionType[\\\"ADD_TOAST\\\"];\\n      toast: ToasterToast;\\n    }\\n  | {\\n      type: ActionType[\\\"UPDATE_TOAST\\\"];\\n      toast: Partial<ToasterToast>;\\n    }\\n  | {\\n      type: ActionType[\\\"DISMISS_TOAST\\\"];\\n      toastId?: ToasterToast[\\\"id\\\"];\\n    }\\n  | {\\n      type: ActionType[\\\"REMOVE_TOAST\\\"];\\n      toastId?: ToasterToast[\\\"id\\\"];\\n    };\\n\\ninterface State {\\n  toasts: ToasterToast[];\\n}\\n\\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\\n\\nconst addToRemoveQueue = (toastId: string) => {\\n  if (toastTimeouts.has(toastId)) {\\n    return;\\n  }\\n\\n  const timeout = setTimeout(() => {\\n    toastTimeouts.delete(toastId);\\n    dispatch({\\n      toastId: toastId,\\n      type: \\\"REMOVE_TOAST\\\",\\n    });\\n  }, TOAST_REMOVE_DELAY);\\n\\n  toastTimeouts.set(toastId, timeout);\\n};\\n\\nexport const reducer = (state: State, action: Action): State => {\\n  switch (action.type) {\\n    case \\\"ADD_TOAST\\\":\\n      return {\\n        ...state,\\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\\n      };\\n\\n    case \\\"UPDATE_TOAST\\\":\\n      return {\\n        ...state,\\n        toasts: state.toasts.map((t) =>\\n          t.id === action.toast.id ? { ...t, ...action.toast } : t,\\n        ),\\n      };\\n\\n    case \\\"DISMISS_TOAST\\\": {\\n      const { toastId } = action;\\n\\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\\n      // but I'll keep it here for simplicity\\n      if (toastId) {\\n        addToRemoveQueue(toastId);\\n      } else {\\n        for (const toast of state.toasts) {\\n          addToRemoveQueue(toast.id);\\n        }\\n      }\\n\\n      return {\\n        ...state,\\n        toasts: state.toasts.map((t) =>\\n          t.id === toastId || toastId === undefined\\n            ? {\\n                ...t,\\n                open: false,\\n              }\\n            : t,\\n        ),\\n      };\\n    }\\n    case \\\"REMOVE_TOAST\\\":\\n      if (action.toastId === undefined) {\\n        return {\\n          ...state,\\n          toasts: [],\\n        };\\n      }\\n      return {\\n        ...state,\\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\\n      };\\n  }\\n};\\n\\nconst listeners: Array<(state: State) => void> = [];\\n\\nlet memoryState: State = { toasts: [] };\\n\\nfunction dispatch(action: Action) {\\n  memoryState = reducer(memoryState, action);\\n  for (const listener of listeners) {\\n    listener(memoryState);\\n  }\\n}\\n\\ntype Toast = Omit<ToasterToast, \\\"id\\\">;\\n\\nfunction toast({ ...props }: Toast) {\\n  const id = genId();\\n\\n  const update = (props: ToasterToast) =>\\n    dispatch({\\n      toast: { ...props, id },\\n      type: \\\"UPDATE_TOAST\\\",\\n    });\\n  const dismiss = () => dispatch({ toastId: id, type: \\\"DISMISS_TOAST\\\" });\\n\\n  dispatch({\\n    toast: {\\n      ...props,\\n      id,\\n      onOpenChange: (open) => {\\n        if (!open) dismiss();\\n      },\\n      open: true,\\n    },\\n    type: \\\"ADD_TOAST\\\",\\n  });\\n\\n  return {\\n    dismiss,\\n    id: id,\\n    update,\\n  };\\n}\\n\\nfunction useToast() {\\n  const [state, setState] = React.useState<State>(memoryState);\\n\\n  React.useEffect(() => {\\n    listeners.push(setState);\\n    return () => {\\n      const index = listeners.indexOf(setState);\\n      if (index > -1) {\\n        listeners.splice(index, 1);\\n      }\\n    };\\n  }, []);\\n\\n  return {\\n    ...state,\\n    dismiss: (toastId?: string) => dispatch({ toastId, type: \\\"DISMISS_TOAST\\\" }),\\n    toast,\\n  };\\n}\\n\\nexport { toast, useToast };\\n\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"path\": \"registry/default/ui/toaster.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useToast } from \\\"@/registry/default/hooks/use-toast\\\";\\nimport {\\n  Toast,\\n  ToastClose,\\n  ToastDescription,\\n  ToastProvider,\\n  ToastTitle,\\n  ToastViewport,\\n} from \\\"@/registry/default/ui/toast\\\";\\n\\nexport function Toaster() {\\n  const { toasts } = useToast();\\n\\n  return (\\n    <ToastProvider>\\n      {toasts.map(({ id, title, description, action, ...props }) => (\\n        <Toast key={id} {...props}>\\n          <div className=\\\"flex w-full justify-between gap-2\\\">\\n            <div className=\\\"flex flex-col gap-3\\\">\\n              <div className=\\\"space-y-1\\\">\\n                {title && <ToastTitle>{title}</ToastTitle>}\\n                {description && (\\n                  <ToastDescription>{description}</ToastDescription>\\n                )}\\n              </div>\\n              <div>{action}</div>\\n            </div>\\n            <div>\\n              <ToastClose />\\n            </div>\\n          </div>\\n        </Toast>\\n      ))}\\n      <ToastViewport />\\n    </ToastProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/toggle-group.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-group\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"registryDependencies\": [\n    \"https://coss.com/origin/r/toggle.json\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/toggle-group.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { VariantProps } from \\\"class-variance-authority\\\";\\nimport { ToggleGroup as ToggleGroupPrimitive } from \\\"radix-ui\\\";\\nimport * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { toggleVariants } from \\\"@/registry/default/ui/toggle\\\";\\n\\nconst ToggleGroupContext = React.createContext<\\n  VariantProps<typeof toggleVariants>\\n>({\\n  size: \\\"default\\\",\\n  variant: \\\"default\\\",\\n});\\n\\nfunction ToggleGroup({\\n  className,\\n  variant,\\n  size,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\\n  VariantProps<typeof toggleVariants>) {\\n  return (\\n    <ToggleGroupPrimitive.Root\\n      className={cn(\\n        \\\"group/toggle-group flex items-center rounded-md data-[variant=outline]:shadow-xs\\\",\\n        className,\\n      )}\\n      data-size={size}\\n      data-slot=\\\"toggle-group\\\"\\n      data-variant={variant}\\n      {...props}\\n    >\\n      <ToggleGroupContext.Provider value={{ size, variant }}>\\n        {children}\\n      </ToggleGroupContext.Provider>\\n    </ToggleGroupPrimitive.Root>\\n  );\\n}\\n\\nfunction ToggleGroupItem({\\n  className,\\n  children,\\n  variant,\\n  size,\\n  ...props\\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\\n  VariantProps<typeof toggleVariants>) {\\n  const context = React.useContext(ToggleGroupContext);\\n\\n  return (\\n    <ToggleGroupPrimitive.Item\\n      className={cn(\\n        toggleVariants({\\n          size: context.size || size,\\n          variant: context.variant || variant,\\n        }),\\n        \\\"min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l\\\",\\n        className,\\n      )}\\n      data-size={context.size || size}\\n      data-slot=\\\"toggle-group-item\\\"\\n      data-variant={context.variant || variant}\\n      {...props}\\n    >\\n      {children}\\n    </ToggleGroupPrimitive.Item>\\n  );\\n}\\n\\nexport { ToggleGroup, ToggleGroupItem };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/toggle.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/toggle.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport { Toggle as TogglePrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nconst toggleVariants = cva(\\n  \\\"inline-flex items-center justify-center gap-2 rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n  {\\n    defaultVariants: {\\n      size: \\\"default\\\",\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      size: {\\n        default: \\\"h-9 px-3\\\",\\n        lg: \\\"h-10 px-3\\\",\\n        sm: \\\"h-8 px-2\\\",\\n      },\\n      variant: {\\n        default: \\\"bg-transparent\\\",\\n        outline:\\n          \\\"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\\\",\\n      },\\n    },\\n  },\\n);\\n\\nfunction Toggle({\\n  className,\\n  variant,\\n  size,\\n  ...props\\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\\n  VariantProps<typeof toggleVariants>) {\\n  return (\\n    <TogglePrimitive.Root\\n      className={cn(toggleVariants({ className, size, variant }))}\\n      data-slot=\\\"toggle\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Toggle, toggleVariants };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/tooltip.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tooltip\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/tooltip.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Tooltip as TooltipPrimitive } from \\\"radix-ui\\\";\\nimport type * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nfunction TooltipProvider({\\n  delayDuration = 0,\\n  ...props\\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\\n  return (\\n    <TooltipPrimitive.Provider\\n      data-slot=\\\"tooltip-provider\\\"\\n      delayDuration={delayDuration}\\n      {...props}\\n    />\\n  );\\n}\\n\\nfunction Tooltip({\\n  ...props\\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\\n  return (\\n    <TooltipProvider>\\n      <TooltipPrimitive.Root data-slot=\\\"tooltip\\\" {...props} />\\n    </TooltipProvider>\\n  );\\n}\\n\\nfunction TooltipTrigger({\\n  ...props\\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\\n  return <TooltipPrimitive.Trigger data-slot=\\\"tooltip-trigger\\\" {...props} />;\\n}\\n\\nfunction TooltipContent({\\n  className,\\n  sideOffset = 4,\\n  showArrow = false,\\n  children,\\n  ...props\\n}: React.ComponentProps<typeof TooltipPrimitive.Content> & {\\n  showArrow?: boolean;\\n}) {\\n  return (\\n    <TooltipPrimitive.Portal>\\n      <TooltipPrimitive.Content\\n        className={cn(\\n          \\\"fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 relative z-50 max-w-70 animate-in rounded-md border bg-popover px-3 py-1.5 text-popover-foreground text-sm data-[state=closed]:animate-out\\\",\\n          className,\\n        )}\\n        data-slot=\\\"tooltip-content\\\"\\n        sideOffset={sideOffset}\\n        {...props}\\n      >\\n        {children}\\n        {showArrow && (\\n          <TooltipPrimitive.Arrow className=\\\"-my-px fill-popover drop-shadow-[0_1px_0_var(--border)]\\\" />\\n        )}\\n      </TooltipPrimitive.Content>\\n    </TooltipPrimitive.Portal>\\n  );\\n}\\n\\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/tree.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tree\",\n  \"type\": \"registry:component\",\n  \"dependencies\": [\n    \"@headless-tree/core\",\n    \"@headless-tree/react\",\n    \"radix-ui\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/tree.tsx\",\n      \"content\": \"// biome-ignore-all lint/suspicious/noExplicitAny: known\\n\\n\\\"use client\\\";\\n\\nimport type { ItemInstance } from \\\"@headless-tree/core\\\";\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport { Slot } from \\\"radix-ui\\\";\\nimport * as React from \\\"react\\\";\\n\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\ninterface TreeContextValue<T = any> {\\n  indent: number;\\n  currentItem?: ItemInstance<T>;\\n  tree?: any;\\n}\\n\\nconst TreeContext = React.createContext<TreeContextValue>({\\n  currentItem: undefined,\\n  indent: 20,\\n  tree: undefined,\\n});\\n\\nfunction useTreeContext<T = any>() {\\n  return React.useContext(TreeContext) as TreeContextValue<T>;\\n}\\n\\ninterface TreeProps extends React.HTMLAttributes<HTMLDivElement> {\\n  indent?: number;\\n  tree?: any;\\n}\\n\\nfunction Tree({ indent = 20, tree, className, ...props }: TreeProps) {\\n  const containerProps =\\n    tree && typeof tree.getContainerProps === \\\"function\\\"\\n      ? tree.getContainerProps()\\n      : {};\\n  const mergedProps = { ...props, ...containerProps };\\n\\n  // Extract style from mergedProps to merge with our custom styles\\n  const { style: propStyle, ...otherProps } = mergedProps;\\n\\n  // Merge styles\\n  const mergedStyle = {\\n    ...propStyle,\\n    \\\"--tree-indent\\\": `${indent}px`,\\n  } as React.CSSProperties;\\n\\n  return (\\n    <TreeContext.Provider value={{ indent, tree }}>\\n      <div\\n        className={cn(\\\"flex flex-col\\\", className)}\\n        data-slot=\\\"tree\\\"\\n        style={mergedStyle}\\n        {...otherProps}\\n      />\\n    </TreeContext.Provider>\\n  );\\n}\\n\\ninterface TreeItemProps<T = any>\\n  extends React.HTMLAttributes<HTMLButtonElement> {\\n  item: ItemInstance<T>;\\n  indent?: number;\\n  asChild?: boolean;\\n}\\n\\nfunction TreeItem<T = any>({\\n  item,\\n  className,\\n  asChild,\\n  children,\\n  ...props\\n}: Omit<TreeItemProps<T>, \\\"indent\\\">) {\\n  const { indent } = useTreeContext<T>();\\n\\n  const itemProps = typeof item.getProps === \\\"function\\\" ? item.getProps() : {};\\n  const mergedProps = { ...props, ...itemProps };\\n\\n  // Extract style from mergedProps to merge with our custom styles\\n  const { style: propStyle, ...otherProps } = mergedProps;\\n\\n  // Merge styles\\n  const mergedStyle = {\\n    ...propStyle,\\n    \\\"--tree-padding\\\": `${item.getItemMeta().level * indent}px`,\\n  } as React.CSSProperties;\\n\\n  const Comp = asChild ? Slot.Root : \\\"button\\\";\\n\\n  return (\\n    <TreeContext.Provider value={{ currentItem: item, indent }}>\\n      <Comp\\n        aria-expanded={item.isExpanded()}\\n        className={cn(\\n          \\\"z-10 select-none ps-(--tree-padding) not-last:pb-0.5 outline-hidden focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\\\",\\n          className,\\n        )}\\n        data-drag-target={\\n          typeof item.isDragTarget === \\\"function\\\"\\n            ? item.isDragTarget() || false\\n            : undefined\\n        }\\n        data-focus={\\n          typeof item.isFocused === \\\"function\\\"\\n            ? item.isFocused() || false\\n            : undefined\\n        }\\n        data-folder={\\n          typeof item.isFolder === \\\"function\\\"\\n            ? item.isFolder() || false\\n            : undefined\\n        }\\n        data-search-match={\\n          typeof item.isMatchingSearch === \\\"function\\\"\\n            ? item.isMatchingSearch() || false\\n            : undefined\\n        }\\n        data-selected={\\n          typeof item.isSelected === \\\"function\\\"\\n            ? item.isSelected() || false\\n            : undefined\\n        }\\n        data-slot=\\\"tree-item\\\"\\n        style={mergedStyle}\\n        {...otherProps}\\n      >\\n        {children}\\n      </Comp>\\n    </TreeContext.Provider>\\n  );\\n}\\n\\ninterface TreeItemLabelProps<T = any>\\n  extends React.HTMLAttributes<HTMLSpanElement> {\\n  item?: ItemInstance<T>;\\n}\\n\\nfunction TreeItemLabel<T = any>({\\n  item: propItem,\\n  children,\\n  className,\\n  ...props\\n}: TreeItemLabelProps<T>) {\\n  const { currentItem } = useTreeContext<T>();\\n  const item = propItem || currentItem;\\n\\n  if (!item) {\\n    console.warn(\\\"TreeItemLabel: No item provided via props or context\\\");\\n    return null;\\n  }\\n\\n  return (\\n    <span\\n      className={cn(\\n        \\\"flex items-center gap-1 rounded-sm bg-background in-data-[drag-target=true]:bg-accent in-data-[search-match=true]:bg-blue-400/20! in-data-[selected=true]:bg-accent px-2 py-1.5 not-in-data-[folder=true]:ps-7 in-data-[selected=true]:text-accent-foreground text-sm in-focus-visible:ring-[3px] in-focus-visible:ring-ring/50 transition-colors hover:bg-accent [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"tree-item-label\\\"\\n      {...props}\\n    >\\n      {item.isFolder() && (\\n        <ChevronDownIcon className=\\\"in-aria-[expanded=false]:-rotate-90 size-4 text-muted-foreground\\\" />\\n      )}\\n      {children ||\\n        (typeof item.getItemName === \\\"function\\\" ? item.getItemName() : null)}\\n    </span>\\n  );\\n}\\n\\nfunction TreeDragLine({\\n  className,\\n  ...props\\n}: React.HTMLAttributes<HTMLDivElement>) {\\n  const { tree } = useTreeContext();\\n\\n  if (!tree || typeof tree.getDragLineStyle !== \\\"function\\\") {\\n    console.warn(\\n      \\\"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method\\\",\\n    );\\n    return null;\\n  }\\n\\n  const dragLine = tree.getDragLineStyle();\\n  return (\\n    <div\\n      className={cn(\\n        \\\"-mt-px before:-top-[3px] absolute z-30 h-0.5 w-[unset] bg-primary before:absolute before:left-0 before:size-2 before:rounded-full before:border-2 before:border-primary before:bg-background\\\",\\n        className,\\n      )}\\n      style={dragLine}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { Tree, TreeItem, TreeItemLabel, TreeDragLine };\\n\",\n      \"type\": \"registry:component\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/use-character-limit.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"use-character-limit\",\n  \"type\": \"registry:hook\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/hooks/use-character-limit.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { type ChangeEvent, useState } from \\\"react\\\";\\n\\ntype UseCharacterLimitProps = {\\n  maxLength: number;\\n  initialValue?: string;\\n};\\n\\nexport function useCharacterLimit({\\n  maxLength,\\n  initialValue = \\\"\\\",\\n}: UseCharacterLimitProps) {\\n  const [value, setValue] = useState(initialValue);\\n  const [characterCount, setCharacterCount] = useState(initialValue.length);\\n\\n  const handleChange = (\\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\\n  ) => {\\n    const newValue = e.target.value;\\n    if (newValue.length <= maxLength) {\\n      setValue(newValue);\\n      setCharacterCount(newValue.length);\\n    }\\n  };\\n\\n  return {\\n    characterCount,\\n    handleChange,\\n    maxLength,\\n    value,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/use-file-upload.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"use-file-upload\",\n  \"type\": \"registry:hook\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/hooks/use-file-upload.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ChangeEvent,\\n  type DragEvent,\\n  type InputHTMLAttributes,\\n  useCallback,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\n\\nexport type FileMetadata = {\\n  name: string;\\n  size: number;\\n  type: string;\\n  url: string;\\n  id: string;\\n};\\n\\nexport type FileWithPreview = {\\n  file: File | FileMetadata;\\n  id: string;\\n  preview?: string;\\n};\\n\\nexport type FileUploadOptions = {\\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\\n  maxSize?: number; // in bytes\\n  accept?: string;\\n  multiple?: boolean; // Defaults to false\\n  initialFiles?: FileMetadata[];\\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\\n};\\n\\nexport type FileUploadState = {\\n  files: FileWithPreview[];\\n  isDragging: boolean;\\n  errors: string[];\\n};\\n\\nexport type FileUploadActions = {\\n  addFiles: (files: FileList | File[]) => void;\\n  removeFile: (id: string) => void;\\n  clearFiles: () => void;\\n  clearErrors: () => void;\\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\\n  openFileDialog: () => void;\\n  getInputProps: (\\n    props?: InputHTMLAttributes<HTMLInputElement>,\\n  ) => InputHTMLAttributes<HTMLInputElement> & {\\n    // Use `any` here to avoid cross-React ref type conflicts across packages\\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\\n    ref: any;\\n  };\\n};\\n\\nexport const useFileUpload = (\\n  options: FileUploadOptions = {},\\n): [FileUploadState, FileUploadActions] => {\\n  const {\\n    maxFiles = Number.POSITIVE_INFINITY,\\n    maxSize = Number.POSITIVE_INFINITY,\\n    accept = \\\"*\\\",\\n    multiple = false,\\n    initialFiles = [],\\n    onFilesChange,\\n    onFilesAdded,\\n  } = options;\\n\\n  const [state, setState] = useState<FileUploadState>({\\n    errors: [],\\n    files: initialFiles.map((file) => ({\\n      file,\\n      id: file.id,\\n      preview: file.url,\\n    })),\\n    isDragging: false,\\n  });\\n\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  const validateFile = useCallback(\\n    (file: File | FileMetadata): string | null => {\\n      if (file instanceof File) {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      } else {\\n        if (file.size > maxSize) {\\n          return `File \\\"${file.name}\\\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\\n        }\\n      }\\n\\n      if (accept !== \\\"*\\\") {\\n        const acceptedTypes = accept.split(\\\",\\\").map((type) => type.trim());\\n        const fileType = file instanceof File ? file.type || \\\"\\\" : file.type;\\n        const fileExtension = `.${file instanceof File ? file.name.split(\\\".\\\").pop() : file.name.split(\\\".\\\").pop()}`;\\n\\n        const isAccepted = acceptedTypes.some((type) => {\\n          if (type.startsWith(\\\".\\\")) {\\n            return fileExtension.toLowerCase() === type.toLowerCase();\\n          }\\n          if (type.endsWith(\\\"/*\\\")) {\\n            const baseType = type.split(\\\"/\\\")[0];\\n            return fileType.startsWith(`${baseType}/`);\\n          }\\n          return fileType === type;\\n        });\\n\\n        if (!isAccepted) {\\n          return `File \\\"${file instanceof File ? file.name : file.name}\\\" is not an accepted file type.`;\\n        }\\n      }\\n\\n      return null;\\n    },\\n    [accept, maxSize],\\n  );\\n\\n  const createPreview = useCallback(\\n    (file: File | FileMetadata): string | undefined => {\\n      if (file instanceof File) {\\n        return URL.createObjectURL(file);\\n      }\\n      return file.url;\\n    },\\n    [],\\n  );\\n\\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\\n    if (file instanceof File) {\\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\\n    }\\n    return file.id;\\n  }, []);\\n\\n  const clearFiles = useCallback(() => {\\n    setState((prev) => {\\n      // Clean up object URLs\\n      for (const file of prev.files ?? []) {\\n        if (\\n          file.preview &&\\n          file.file instanceof File &&\\n          file.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(file.preview);\\n        }\\n      }\\n\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n\\n      const newState = {\\n        ...prev,\\n        errors: [],\\n        files: [],\\n      };\\n\\n      onFilesChange?.(newState.files);\\n      return newState;\\n    });\\n  }, [onFilesChange]);\\n\\n  const addFiles = useCallback(\\n    (newFiles: FileList | File[]) => {\\n      if (!newFiles || newFiles.length === 0) return;\\n\\n      const newFilesArray = Array.from(newFiles);\\n      const errors: string[] = [];\\n\\n      // Clear existing errors when new files are uploaded\\n      setState((prev) => ({ ...prev, errors: [] }));\\n\\n      // In single file mode, clear existing files first\\n      if (!multiple) {\\n        clearFiles();\\n      }\\n\\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\\n      if (\\n        multiple &&\\n        maxFiles !== Number.POSITIVE_INFINITY &&\\n        state.files.length + newFilesArray.length > maxFiles\\n      ) {\\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\\n        setState((prev) => ({ ...prev, errors }));\\n        return;\\n      }\\n\\n      const validFiles: FileWithPreview[] = [];\\n\\n      for (const file of newFilesArray) {\\n        if (multiple) {\\n          const isDuplicate = state.files.some(\\n            (existingFile) =>\\n              existingFile.file.name === file.name &&\\n              existingFile.file.size === file.size,\\n          );\\n\\n          if (isDuplicate) {\\n            continue;\\n          }\\n        }\\n\\n        if (file.size > maxSize) {\\n          errors.push(\\n            multiple\\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\\n          );\\n          continue;\\n        }\\n\\n        const error = validateFile(file);\\n\\n        if (error) {\\n          errors.push(error);\\n          continue;\\n        }\\n\\n        validFiles.push({\\n          file,\\n          id: generateUniqueId(file),\\n          preview: createPreview(file),\\n        });\\n      }\\n\\n      // Only update state if we have valid files to add\\n      if (validFiles.length > 0) {\\n        // Call the onFilesAdded callback with the newly added valid files\\n        onFilesAdded?.(validFiles);\\n\\n        setState((prev) => {\\n          const newFiles = !multiple\\n            ? validFiles\\n            : [...prev.files, ...validFiles];\\n          onFilesChange?.(newFiles);\\n          return {\\n            ...prev,\\n            errors,\\n            files: newFiles,\\n          };\\n        });\\n      } else if (errors.length > 0) {\\n        setState((prev) => ({\\n          ...prev,\\n          errors,\\n        }));\\n      }\\n\\n      // Reset input value after handling files\\n      if (inputRef.current) {\\n        inputRef.current.value = \\\"\\\";\\n      }\\n    },\\n    [\\n      state.files,\\n      maxFiles,\\n      multiple,\\n      maxSize,\\n      validateFile,\\n      createPreview,\\n      generateUniqueId,\\n      clearFiles,\\n      onFilesChange,\\n      onFilesAdded,\\n    ],\\n  );\\n\\n  const removeFile = useCallback(\\n    (id: string) => {\\n      setState((prev) => {\\n        const fileToRemove = prev.files.find((file) => file.id === id);\\n        if (\\n          fileToRemove?.preview &&\\n          fileToRemove.file instanceof File &&\\n          fileToRemove.file.type.startsWith(\\\"image/\\\")\\n        ) {\\n          URL.revokeObjectURL(fileToRemove.preview);\\n        }\\n\\n        const newFiles = prev.files.filter((file) => file.id !== id);\\n        onFilesChange?.(newFiles);\\n\\n        return {\\n          ...prev,\\n          errors: [],\\n          files: newFiles,\\n        };\\n      });\\n    },\\n    [onFilesChange],\\n  );\\n\\n  const clearErrors = useCallback(() => {\\n    setState((prev) => ({\\n      ...prev,\\n      errors: [],\\n    }));\\n  }, []);\\n\\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n    setState((prev) => ({ ...prev, isDragging: true }));\\n  }, []);\\n\\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n\\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\\n      return;\\n    }\\n\\n    setState((prev) => ({ ...prev, isDragging: false }));\\n  }, []);\\n\\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\\n    e.preventDefault();\\n    e.stopPropagation();\\n  }, []);\\n\\n  const handleDrop = useCallback(\\n    (e: DragEvent<HTMLElement>) => {\\n      e.preventDefault();\\n      e.stopPropagation();\\n      setState((prev) => ({ ...prev, isDragging: false }));\\n\\n      // Don't process files if the input is disabled\\n      if (inputRef.current?.disabled) {\\n        return;\\n      }\\n\\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\\n        // In single file mode, only use the first file\\n        if (!multiple) {\\n          const file = e.dataTransfer.files[0];\\n          addFiles([file]);\\n        } else {\\n          addFiles(e.dataTransfer.files);\\n        }\\n      }\\n    },\\n    [addFiles, multiple],\\n  );\\n\\n  const handleFileChange = useCallback(\\n    (e: ChangeEvent<HTMLInputElement>) => {\\n      if (e.target.files && e.target.files.length > 0) {\\n        addFiles(e.target.files);\\n      }\\n    },\\n    [addFiles],\\n  );\\n\\n  const openFileDialog = useCallback(() => {\\n    if (inputRef.current) {\\n      inputRef.current.click();\\n    }\\n  }, []);\\n\\n  const getInputProps = useCallback(\\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\\n      return {\\n        ...props,\\n        accept: props.accept || accept,\\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\\n        onChange: handleFileChange,\\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\\n        ref: inputRef as any,\\n        type: \\\"file\\\" as const,\\n      };\\n    },\\n    [accept, multiple, handleFileChange],\\n  );\\n\\n  return [\\n    state,\\n    {\\n      addFiles,\\n      clearErrors,\\n      clearFiles,\\n      getInputProps,\\n      handleDragEnter,\\n      handleDragLeave,\\n      handleDragOver,\\n      handleDrop,\\n      handleFileChange,\\n      openFileDialog,\\n      removeFile,\\n    },\\n  ];\\n};\\n\\n// Helper function to format bytes to human-readable format\\nexport const formatBytes = (bytes: number, decimals = 2): string => {\\n  if (bytes === 0) return \\\"0 Bytes\\\";\\n\\n  const k = 1024;\\n  const dm = decimals < 0 ? 0 : decimals;\\n  const sizes = [\\\"Bytes\\\", \\\"KB\\\", \\\"MB\\\", \\\"GB\\\", \\\"TB\\\", \\\"PB\\\", \\\"EB\\\", \\\"ZB\\\", \\\"YB\\\"];\\n\\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\\n\\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\\n};\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/use-pagination.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"use-pagination\",\n  \"type\": \"registry:hook\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/hooks/use-pagination.ts\",\n      \"content\": \"type UsePaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n  paginationItemsToDisplay: number;\\n};\\n\\ntype UsePaginationReturn = {\\n  pages: number[];\\n  showLeftEllipsis: boolean;\\n  showRightEllipsis: boolean;\\n};\\n\\nexport function usePagination({\\n  currentPage,\\n  totalPages,\\n  paginationItemsToDisplay,\\n}: UsePaginationProps): UsePaginationReturn {\\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\\n  const showRightEllipsis =\\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\\n\\n  function calculatePaginationRange(): number[] {\\n    if (totalPages <= paginationItemsToDisplay) {\\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\\n    }\\n\\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\\n    const initialRange = {\\n      end: currentPage + halfDisplay,\\n      start: currentPage - halfDisplay,\\n    };\\n\\n    const adjustedRange = {\\n      end: Math.min(totalPages, initialRange.end),\\n      start: Math.max(1, initialRange.start),\\n    };\\n\\n    if (adjustedRange.start === 1) {\\n      adjustedRange.end = paginationItemsToDisplay;\\n    }\\n    if (adjustedRange.end === totalPages) {\\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\\n    }\\n\\n    if (showLeftEllipsis) adjustedRange.start++;\\n    if (showRightEllipsis) adjustedRange.end--;\\n\\n    return Array.from(\\n      { length: adjustedRange.end - adjustedRange.start + 1 },\\n      (_, i) => adjustedRange.start + i,\\n    );\\n  }\\n\\n  const pages = calculatePaginationRange();\\n\\n  return {\\n    pages,\\n    showLeftEllipsis,\\n    showRightEllipsis,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/use-slider-with-input.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"use-slider-with-input\",\n  \"type\": \"registry:hook\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useState } from \\\"react\\\";\\n\\ntype UseSliderWithInputProps = {\\n  minValue?: number;\\n  maxValue?: number;\\n  initialValue?: number[];\\n  defaultValue?: number[];\\n};\\n\\nexport function useSliderWithInput({\\n  minValue = 0,\\n  maxValue = 100,\\n  initialValue = [minValue],\\n  defaultValue = [minValue],\\n}: UseSliderWithInputProps) {\\n  const [sliderValue, setSliderValue] = useState(initialValue);\\n  const [inputValues, setInputValues] = useState(\\n    initialValue.map((v) => v.toString()),\\n  );\\n\\n  const showReset =\\n    sliderValue.length === defaultValue.length &&\\n    !sliderValue.every((value, index) => value === defaultValue[index]);\\n\\n  const validateAndUpdateValue = useCallback(\\n    (rawValue: string, index: number) => {\\n      if (rawValue === \\\"\\\" || rawValue === \\\"-\\\") {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = \\\"0\\\";\\n        setInputValues(newInputValues);\\n\\n        const newSliderValues = [...sliderValue];\\n        newSliderValues[index] = 0;\\n        setSliderValue(newSliderValues);\\n        return;\\n      }\\n\\n      const numValue = Number.parseFloat(rawValue);\\n\\n      if (Number.isNaN(numValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = sliderValue[index]?.toString();\\n        setInputValues(newInputValues);\\n        return;\\n      }\\n\\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue));\\n\\n      if (sliderValue.length > 1) {\\n        if (index === 0) {\\n          clampedValue = Math.min(clampedValue, sliderValue[1]);\\n        } else {\\n          clampedValue = Math.max(clampedValue, sliderValue[0]);\\n        }\\n      }\\n\\n      const newSliderValues = [...sliderValue];\\n      newSliderValues[index] = clampedValue;\\n      setSliderValue(newSliderValues);\\n\\n      const newInputValues = [...inputValues];\\n      newInputValues[index] = clampedValue.toString();\\n      setInputValues(newInputValues);\\n    },\\n    [sliderValue, inputValues, minValue, maxValue],\\n  );\\n\\n  const handleInputChange = useCallback(\\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\\n      const newValue = e.target.value;\\n      if (newValue === \\\"\\\" || /^-?\\\\d*\\\\.?\\\\d*$/.test(newValue)) {\\n        const newInputValues = [...inputValues];\\n        newInputValues[index] = newValue;\\n        setInputValues(newInputValues);\\n      }\\n    },\\n    [inputValues],\\n  );\\n\\n  const handleSliderChange = useCallback((newValue: number[]) => {\\n    setSliderValue(newValue);\\n    setInputValues(newValue.map((v) => v.toString()));\\n  }, []);\\n\\n  const resetToDefault = useCallback(() => {\\n    setSliderValue(defaultValue);\\n    setInputValues(defaultValue.map((v) => v.toString()));\\n  }, [defaultValue]);\\n\\n  return {\\n    handleInputChange,\\n    handleSliderChange,\\n    inputValues,\\n    resetToDefault,\\n    showReset,\\n    sliderValue,\\n    validateAndUpdateValue,\\n  };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/use-toast.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"use-toast\",\n  \"type\": \"registry:hook\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/hooks/use-toast.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\n// Inspired by react-hot-toast library\\nimport * as React from \\\"react\\\";\\n\\nimport type {\\n  ToastActionElement,\\n  ToastProps,\\n} from \\\"@/registry/default/ui/toast\\\";\\n\\nconst TOAST_LIMIT = 1;\\nconst TOAST_REMOVE_DELAY = 1000000;\\n\\ntype ToasterToast = ToastProps & {\\n  id: string;\\n  title?: React.ReactNode;\\n  description?: React.ReactNode;\\n  action?: ToastActionElement;\\n};\\n\\nconst actionTypes = {\\n  ADD_TOAST: \\\"ADD_TOAST\\\",\\n  DISMISS_TOAST: \\\"DISMISS_TOAST\\\",\\n  REMOVE_TOAST: \\\"REMOVE_TOAST\\\",\\n  UPDATE_TOAST: \\\"UPDATE_TOAST\\\",\\n} as const;\\n\\nlet count = 0;\\n\\nfunction genId() {\\n  count = (count + 1) % Number.MAX_SAFE_INTEGER;\\n  return count.toString();\\n}\\n\\ntype ActionType = typeof actionTypes;\\n\\ntype Action =\\n  | {\\n      type: ActionType[\\\"ADD_TOAST\\\"];\\n      toast: ToasterToast;\\n    }\\n  | {\\n      type: ActionType[\\\"UPDATE_TOAST\\\"];\\n      toast: Partial<ToasterToast>;\\n    }\\n  | {\\n      type: ActionType[\\\"DISMISS_TOAST\\\"];\\n      toastId?: ToasterToast[\\\"id\\\"];\\n    }\\n  | {\\n      type: ActionType[\\\"REMOVE_TOAST\\\"];\\n      toastId?: ToasterToast[\\\"id\\\"];\\n    };\\n\\ninterface State {\\n  toasts: ToasterToast[];\\n}\\n\\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\\n\\nconst addToRemoveQueue = (toastId: string) => {\\n  if (toastTimeouts.has(toastId)) {\\n    return;\\n  }\\n\\n  const timeout = setTimeout(() => {\\n    toastTimeouts.delete(toastId);\\n    dispatch({\\n      toastId: toastId,\\n      type: \\\"REMOVE_TOAST\\\",\\n    });\\n  }, TOAST_REMOVE_DELAY);\\n\\n  toastTimeouts.set(toastId, timeout);\\n};\\n\\nexport const reducer = (state: State, action: Action): State => {\\n  switch (action.type) {\\n    case \\\"ADD_TOAST\\\":\\n      return {\\n        ...state,\\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\\n      };\\n\\n    case \\\"UPDATE_TOAST\\\":\\n      return {\\n        ...state,\\n        toasts: state.toasts.map((t) =>\\n          t.id === action.toast.id ? { ...t, ...action.toast } : t,\\n        ),\\n      };\\n\\n    case \\\"DISMISS_TOAST\\\": {\\n      const { toastId } = action;\\n\\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\\n      // but I'll keep it here for simplicity\\n      if (toastId) {\\n        addToRemoveQueue(toastId);\\n      } else {\\n        for (const toast of state.toasts) {\\n          addToRemoveQueue(toast.id);\\n        }\\n      }\\n\\n      return {\\n        ...state,\\n        toasts: state.toasts.map((t) =>\\n          t.id === toastId || toastId === undefined\\n            ? {\\n                ...t,\\n                open: false,\\n              }\\n            : t,\\n        ),\\n      };\\n    }\\n    case \\\"REMOVE_TOAST\\\":\\n      if (action.toastId === undefined) {\\n        return {\\n          ...state,\\n          toasts: [],\\n        };\\n      }\\n      return {\\n        ...state,\\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\\n      };\\n  }\\n};\\n\\nconst listeners: Array<(state: State) => void> = [];\\n\\nlet memoryState: State = { toasts: [] };\\n\\nfunction dispatch(action: Action) {\\n  memoryState = reducer(memoryState, action);\\n  for (const listener of listeners) {\\n    listener(memoryState);\\n  }\\n}\\n\\ntype Toast = Omit<ToasterToast, \\\"id\\\">;\\n\\nfunction toast({ ...props }: Toast) {\\n  const id = genId();\\n\\n  const update = (props: ToasterToast) =>\\n    dispatch({\\n      toast: { ...props, id },\\n      type: \\\"UPDATE_TOAST\\\",\\n    });\\n  const dismiss = () => dispatch({ toastId: id, type: \\\"DISMISS_TOAST\\\" });\\n\\n  dispatch({\\n    toast: {\\n      ...props,\\n      id,\\n      onOpenChange: (open) => {\\n        if (!open) dismiss();\\n      },\\n      open: true,\\n    },\\n    type: \\\"ADD_TOAST\\\",\\n  });\\n\\n  return {\\n    dismiss,\\n    id: id,\\n    update,\\n  };\\n}\\n\\nfunction useToast() {\\n  const [state, setState] = React.useState<State>(memoryState);\\n\\n  React.useEffect(() => {\\n    listeners.push(setState);\\n    return () => {\\n      const index = listeners.indexOf(setState);\\n      if (index > -1) {\\n        listeners.splice(index, 1);\\n      }\\n    };\\n  }, []);\\n\\n  return {\\n    ...state,\\n    dismiss: (toastId?: string) => dispatch({ toastId, type: \\\"DISMISS_TOAST\\\" }),\\n    toast,\\n  };\\n}\\n\\nexport { toast, useToast };\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/public/r/utils.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"utils\",\n  \"type\": \"registry:lib\",\n  \"dependencies\": [\n    \"clsx\",\n    \"tailwind-merge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/lib/utils.ts\",\n      \"content\": \"import { type ClassValue, clsx } from \\\"clsx\\\";\\nimport { twMerge } from \\\"tailwind-merge\\\";\\n\\nexport function cn(...inputs: ClassValue[]) {\\n  return twMerge(clsx(inputs));\\n}\\n\",\n      \"type\": \"registry:lib\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/origin/registry/default/components/comp-01.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Simple input</Label>\n      <Input id={id} placeholder=\"Email\" type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-02.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>\n        Required input <span className=\"text-destructive\">*</span>\n      </Label>\n      <Input id={id} placeholder=\"Email\" required type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-03.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with helper text</Label>\n      <Input id={id} placeholder=\"Email\" type=\"email\" />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        We won&lsquo;t share your email with anyone\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-04.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\" htmlFor={id}>\n          Input with hint\n        </Label>\n        <span className=\"text-muted-foreground text-sm\">Optional</span>\n      </div>\n      <Input id={id} placeholder=\"Email\" type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-05.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"[--ring:var(--color-indigo-300)] in-[.dark]:[--ring:var(--color-indigo-900)] *:not-first:mt-2\">\n      <Label htmlFor={id}>Input with colored border and ring</Label>\n      <Input id={id} placeholder=\"Email\" type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-06.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with error</Label>\n      <Input\n        aria-invalid\n        className=\"peer\"\n        defaultValue=\"invalid@email.com\"\n        id={id}\n        placeholder=\"Email\"\n        type=\"email\"\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-xs peer-aria-invalid:text-destructive\"\n        role=\"alert\"\n      >\n        Email is invalid\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-07.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with gray background</Label>\n      <Input\n        className=\"border-transparent bg-muted shadow-none\"\n        id={id}\n        placeholder=\"Email\"\n        type=\"email\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-08.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Disabled input</Label>\n      <Input disabled id={id} placeholder=\"Email\" type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-09.tsx",
    "content": "import { AtSignIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with start icon</Label>\n      <div className=\"relative\">\n        <Input className=\"peer ps-9\" id={id} placeholder=\"Email\" type=\"email\" />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <AtSignIcon aria-hidden=\"true\" size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-10.tsx",
    "content": "import { MailIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with end icon</Label>\n      <div className=\"relative\">\n        <Input className=\"peer pe-9\" id={id} placeholder=\"Email\" type=\"email\" />\n        <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <MailIcon aria-hidden=\"true\" size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-100.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [open, setOpen] = useState<boolean>(false);\n\n  return (\n    <Button\n      aria-expanded={open}\n      aria-label={open ? \"Close menu\" : \"Open menu\"}\n      className=\"group\"\n      onClick={() => setOpen((prevState) => !prevState)}\n      size=\"icon\"\n      variant=\"outline\"\n    >\n      <svg\n        className=\"pointer-events-none\"\n        fill=\"none\"\n        height={16}\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 24 24\"\n        width={16}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n          d=\"M4 12L20 12\"\n        />\n        <path\n          className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n          d=\"M4 12H20\"\n        />\n        <path\n          className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n          d=\"M4 12H20\"\n        />\n      </svg>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-101.tsx",
    "content": "\"use client\";\n\nimport { BookmarkIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  const [bookmarked, setBookmarked] = useState<boolean>(false);\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <div>\n            <Toggle\n              aria-label=\"Bookmark this\"\n              className=\"group size-9 p-0 hover:bg-indigo-50 hover:text-indigo-500 data-[state=on]:bg-indigo-50 data-[state=on]:text-indigo-500\"\n              onPressedChange={setBookmarked}\n              pressed={bookmarked}\n            >\n              <BookmarkIcon aria-hidden=\"true\" size={16} />\n            </Toggle>\n          </div>\n        </TooltipTrigger>\n        <TooltipContent className=\"px-2 py-1 text-xs\">\n          <p>{bookmarked ? \"Remove bookmark\" : \"Bookmark this\"}</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-102.tsx",
    "content": "import { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        aria-label=\"Upvote\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <ChevronUpIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <span className=\"flex items-center border border-input px-3 font-medium text-sm\">\n        235\n      </span>\n      <Button\n        aria-label=\"Downvote\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <ChevronDownIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-103.tsx",
    "content": "import { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex -space-x-px rounded-full shadow-xs rtl:space-x-reverse\">\n      <Button\n        aria-label=\"Upvote\"\n        className=\"rounded-none shadow-none first:rounded-s-full last:rounded-e-full focus-visible:z-10\"\n        size=\"icon\"\n      >\n        <ChevronUpIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <span className=\"flex items-center bg-primary px-1 font-medium text-primary-foreground text-sm\">\n        235\n      </span>\n      <Button\n        aria-label=\"Downvote\"\n        className=\"rounded-none shadow-none first:rounded-s-full last:rounded-e-full focus-visible:z-10\"\n        size=\"icon\"\n      >\n        <ChevronDownIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-104.tsx",
    "content": "\"use client\";\n\nimport {\n  MinusIcon,\n  PlusIcon,\n  Volume1Icon,\n  Volume2Icon,\n  VolumeIcon,\n  VolumeXIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [volume, setVolume] = useState(3); // Initialize volume state (0-9)\n\n  const decreaseVolume = () => setVolume((prev) => Math.max(0, prev - 1));\n  const increaseVolume = () => setVolume((prev) => Math.min(6, prev + 1));\n\n  // Optimized volume icon selection\n  const Icon =\n    volume === 0\n      ? VolumeXIcon\n      : volume < 3\n        ? VolumeIcon\n        : volume < 5\n          ? Volume1Icon\n          : Volume2Icon;\n\n  return (\n    <div\n      aria-labelledby=\"volume-control\"\n      className=\"inline-flex items-center\"\n      role=\"group\"\n    >\n      <span className=\"sr-only\" id=\"volume-control\">\n        Volume Control\n      </span>\n      <Button\n        aria-label=\"Decrease volume\"\n        className=\"rounded-full\"\n        disabled={volume === 0}\n        onClick={decreaseVolume}\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <MinusIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <div\n        aria-live=\"polite\"\n        className=\"flex items-center px-3 font-medium text-sm tabular-nums\"\n      >\n        <Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        <span aria-label={`Current volume is ${volume}`} className=\"ms-2\">\n          {volume}\n        </span>\n      </div>\n      <Button\n        aria-label=\"Increase volume\"\n        className=\"rounded-full\"\n        disabled={volume === 6}\n        onClick={increaseVolume}\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <PlusIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-105.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  const [copied, setCopied] = useState<boolean>(false);\n\n  const handleCopy = async () => {\n    try {\n      // await navigator.clipboard.writeText(\"string to copy\");\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n            className=\"disabled:opacity-100\"\n            disabled={copied}\n            onClick={handleCopy}\n            size=\"icon\"\n            variant=\"outline\"\n          >\n            <div\n              className={cn(\n                \"transition-all\",\n                copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\",\n              )}\n            >\n              <CheckIcon\n                aria-hidden=\"true\"\n                className=\"stroke-emerald-500\"\n                size={16}\n              />\n            </div>\n            <div\n              className={cn(\n                \"absolute transition-all\",\n                copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\",\n              )}\n            >\n              <CopyIcon aria-hidden=\"true\" size={16} />\n            </div>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"px-2 py-1 text-xs\">\n          Click to copy\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-106.tsx",
    "content": "import { FlipHorizontalIcon, FlipVerticalIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        aria-label=\"Flip Horizontal\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <FlipHorizontalIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <Button\n        aria-label=\"Flip Vertical\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <FlipVerticalIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-107.tsx",
    "content": "\"use client\";\n\nimport {\n  AlignCenterIcon,\n  AlignJustifyIcon,\n  AlignLeftIcon,\n  AlignRightIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Component() {\n  const [value, setValue] = useState<string>(\"center\");\n\n  return (\n    <ToggleGroup\n      className=\"inline-flex divide-x divide-background\"\n      onValueChange={(value) => {\n        if (value) setValue(value);\n      }}\n      type=\"single\"\n      value={value}\n    >\n      <ToggleGroupItem\n        aria-label=\"Align Left\"\n        className=\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\"\n        value=\"left\"\n      >\n        <AlignLeftIcon aria-hidden=\"true\" size={16} />\n      </ToggleGroupItem>\n      <ToggleGroupItem\n        aria-label=\"Align Center\"\n        className=\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\"\n        value=\"center\"\n      >\n        <AlignCenterIcon aria-hidden=\"true\" size={16} />\n      </ToggleGroupItem>\n      <ToggleGroupItem\n        aria-label=\"Align Right\"\n        className=\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\"\n        value=\"right\"\n      >\n        <AlignRightIcon aria-hidden=\"true\" size={16} />\n      </ToggleGroupItem>\n      <ToggleGroupItem\n        aria-label=\"Align Justify\"\n        className=\"bg-primary/80 text-primary-foreground hover:bg-primary hover:text-primary-foreground data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\"\n        value=\"justify\"\n      >\n        <AlignJustifyIcon aria-hidden=\"true\" size={16} />\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-108.tsx",
    "content": "import { EllipsisIcon, FilesIcon, FilmIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        variant=\"outline\"\n      >\n        <FilesIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n        Files\n      </Button>\n      <Button\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        variant=\"outline\"\n      >\n        <FilmIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n        Media\n      </Button>\n      <Button\n        aria-label=\"Menu\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <EllipsisIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-109.tsx",
    "content": "import {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Component() {\n  return (\n    <ToggleGroup className=\"inline-flex\" type=\"single\" variant=\"outline\">\n      <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n      <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n      <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-11.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with start inline add-on</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-16\"\n          id={id}\n          placeholder=\"google.com\"\n          type=\"text\"\n        />\n        <span className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm peer-disabled:opacity-50\">\n          https://\n        </span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-110.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Component() {\n  const [value, setValue] = useState<string>(\"left\");\n\n  return (\n    <ToggleGroup\n      onValueChange={(value) => {\n        if (value) setValue(value);\n      }}\n      type=\"single\"\n      value={value}\n      variant=\"outline\"\n    >\n      <ToggleGroupItem className=\"flex-1\" value=\"left\">\n        Left\n      </ToggleGroupItem>\n      <ToggleGroupItem className=\"flex-1\" value=\"center\">\n        Center\n      </ToggleGroupItem>\n      <ToggleGroupItem className=\"flex-1\" value=\"right\">\n        Right\n      </ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-111.tsx",
    "content": "import { QrCodeIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        aria-label=\"QR code\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n      >\n        <QrCodeIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <Button className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\">\n        Sign in\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-112.tsx",
    "content": "import { SquareArrowOutUpRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        variant=\"outline\"\n      >\n        Preview\n      </Button>\n      <Button\n        aria-label=\"Open link\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <SquareArrowOutUpRightIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-113.tsx",
    "content": "import { ChevronDownIcon, PinIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        aria-label=\"Options\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n      >\n        <ChevronDownIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <Button className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\">\n        <PinIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n        Pinned\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-114.tsx",
    "content": "import { ChevronDownIcon, GitForkIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\">\n        <GitForkIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        Fork\n        <span className=\"ms-1 -me-1 inline-flex h-5 max-h-full items-center rounded border border-primary-foreground/30 px-1 font-[inherit] font-medium text-[0.625rem] text-primary-foreground/60\">\n          18\n        </span>\n      </Button>\n      <Button\n        aria-label=\"Options\"\n        className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n        size=\"icon\"\n      >\n        <ChevronDownIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-115.tsx",
    "content": "import { ChevronLeftIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"relative ps-12\">\n      Previous\n      <span className=\"pointer-events-none absolute inset-y-0 start-0 flex w-9 items-center justify-center bg-primary-foreground/15\">\n        <ChevronLeftIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n      </span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-116.tsx",
    "content": "import { ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"relative pe-12\">\n      Next\n      <span className=\"pointer-events-none absolute inset-y-0 end-0 flex w-9 items-center justify-center bg-primary-foreground/15\">\n        <ChevronRightIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n      </span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-117.tsx",
    "content": "import { ThumbsUpIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"py-0 pe-0\" variant=\"outline\">\n      <ThumbsUpIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n      Like\n      <span className=\"relative ms-1 inline-flex h-full items-center justify-center rounded-full px-3 font-medium text-muted-foreground text-xs before:absolute before:inset-0 before:left-0 before:w-px before:bg-input\">\n        86\n      </span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-118.tsx",
    "content": "import { StarIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button>\n      <StarIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n      <span className=\"flex items-baseline gap-2\">\n        Star\n        <span className=\"text-primary-foreground/60 text-xs\">729</span>\n      </span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-119.tsx",
    "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex flex-wrap gap-2\">\n      <Button aria-label=\"Login with Google\" size=\"icon\" variant=\"outline\">\n        <RiGoogleFill aria-hidden=\"true\" size={16} />\n      </Button>\n      <Button aria-label=\"Login with Facebook\" size=\"icon\" variant=\"outline\">\n        <RiFacebookFill aria-hidden=\"true\" size={16} />\n      </Button>\n      <Button aria-label=\"Login with X\" size=\"icon\" variant=\"outline\">\n        <RiTwitterXFill aria-hidden=\"true\" size={16} />\n      </Button>\n      <Button aria-label=\"Login with GitHub\" size=\"icon\" variant=\"outline\">\n        <RiGithubFill aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-12.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with end inline add-on</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer pe-12\"\n          id={id}\n          placeholder=\"google\"\n          type=\"text\"\n        />\n        <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground text-sm peer-disabled:opacity-50\">\n          .com\n        </span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-120.tsx",
    "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button\n        aria-label=\"Login with Google\"\n        className=\"flex-1\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <RiGoogleFill\n          aria-hidden=\"true\"\n          className=\"text-[#DB4437] dark:text-primary\"\n          size={16}\n        />\n      </Button>\n      <Button\n        aria-label=\"Login with Facebook\"\n        className=\"flex-1\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <RiFacebookFill\n          aria-hidden=\"true\"\n          className=\"text-[#1877f2] dark:text-primary\"\n          size={16}\n        />\n      </Button>\n      <Button\n        aria-label=\"Login with X\"\n        className=\"flex-1\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <RiTwitterXFill\n          aria-hidden=\"true\"\n          className=\"text-[#14171a] dark:text-primary\"\n          size={16}\n        />\n      </Button>\n      <Button\n        aria-label=\"Login with GitHub\"\n        className=\"flex-1\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <RiGithubFill\n          aria-hidden=\"true\"\n          className=\"text-black dark:text-primary\"\n          size={16}\n        />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-121.tsx",
    "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Button variant=\"outline\">\n        <RiGoogleFill\n          aria-hidden=\"true\"\n          className=\"me-1 text-[#DB4437] dark:text-white/60\"\n          size={16}\n        />\n        Login with Google\n      </Button>\n      <Button variant=\"outline\">\n        <RiTwitterXFill\n          aria-hidden=\"true\"\n          className=\"me-1 text-[#14171a] dark:text-white/60\"\n          size={16}\n        />\n        Login with X\n      </Button>\n      <Button variant=\"outline\">\n        <RiFacebookFill\n          aria-hidden=\"true\"\n          className=\"me-1 text-[#1877f2] dark:text-white/60\"\n          size={16}\n        />\n        Login with Facebook\n      </Button>\n      <Button variant=\"outline\">\n        <RiGithubFill\n          aria-hidden=\"true\"\n          className=\"me-1 text-[#333333] dark:text-white/60\"\n          size={16}\n        />\n        Login with GitHub\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-122.tsx",
    "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Button className=\"bg-[#DB4437] text-white after:flex-1 hover:bg-[#DB4437]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiGoogleFill aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        </span>\n        Login with Google\n      </Button>\n      <Button className=\"bg-[#14171a] text-white after:flex-1 hover:bg-[#14171a]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiTwitterXFill aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        </span>\n        Login with X\n      </Button>\n      <Button className=\"bg-[#1877f2] text-white after:flex-1 hover:bg-[#1877f2]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiFacebookFill aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        </span>\n        Login with Facebook\n      </Button>\n      <Button className=\"bg-[#333333] text-white after:flex-1 hover:bg-[#333333]/90\">\n        <span className=\"pointer-events-none me-2 flex-1\">\n          <RiGithubFill aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n        </span>\n        Login with GitHub\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-123.tsx",
    "content": "\"use client\";\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\n\n  const toggleExpand = () => {\n    setIsExpanded((prevState) => !prevState);\n  };\n\n  return (\n    <Button\n      aria-controls=\"expandable-content\"\n      aria-expanded={isExpanded}\n      className=\"gap-1\"\n      onClick={toggleExpand}\n      variant=\"ghost\" // Use this ID on the element that this button controls\n    >\n      {isExpanded ? \"Show less\" : \"Show more\"}\n      {isExpanded ? (\n        <ChevronUpIcon aria-hidden=\"true\" className=\"-me-1\" size={16} />\n      ) : (\n        <ChevronDownIcon aria-hidden=\"true\" className=\"-me-1\" size={16} />\n      )}\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-124.tsx",
    "content": "import { ChevronLeftIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"gap-1\" variant=\"link\">\n      <ChevronLeftIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n      Go back\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-125.tsx",
    "content": "\"use client\";\n\nimport { CircleUserRoundIcon } from \"lucide-react\";\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n    });\n\n  const previewUrl = files[0]?.preview || null;\n  const fileName = files[0]?.file.name || null;\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"inline-flex items-center gap-2 align-top\">\n        <div\n          aria-label={previewUrl ? \"Upload preview\" : \"Default user avatar\"}\n          className=\"relative flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-md border border-input\"\n        >\n          {previewUrl ? (\n            <img\n              alt=\"Upload preview\"\n              className=\"size-full object-cover\"\n              height={32}\n              src={previewUrl}\n              width={32}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"opacity-60\" size={16} />\n            </div>\n          )}\n        </div>\n        <div className=\"relative inline-block\">\n          <Button aria-haspopup=\"dialog\" onClick={openFileDialog}>\n            {fileName ? \"Change image\" : \"Upload image\"}\n          </Button>\n          <input\n            {...getInputProps()}\n            aria-label=\"Upload image file\"\n            className=\"sr-only\"\n            tabIndex={-1}\n          />\n        </div>\n      </div>\n      {fileName && (\n        <div className=\"inline-flex gap-2 text-xs\">\n          <p aria-live=\"polite\" className=\"truncate text-muted-foreground\">\n            {fileName}\n          </p>{\" \"}\n          <button\n            aria-label={`Remove ${fileName}`}\n            className=\"font-medium text-destructive hover:underline\"\n            onClick={() => removeFile(files[0]?.id)}\n            type=\"button\"\n          >\n            Remove\n          </button>\n        </div>\n      )}\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Basic image uploader ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          Docs\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-126.tsx",
    "content": "\"use client\";\n\nimport { CircleUserRoundIcon, XIcon } from \"lucide-react\";\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n    });\n\n  const previewUrl = files[0]?.preview || null;\n  const fileName = files[0]?.file.name || null;\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"relative inline-flex\">\n        <Button\n          aria-label={previewUrl ? \"Change image\" : \"Upload image\"}\n          className=\"relative size-16 overflow-hidden p-0 shadow-none\"\n          onClick={openFileDialog}\n          variant=\"outline\"\n        >\n          {previewUrl ? (\n            <img\n              alt=\"Upload preview\"\n              className=\"size-full object-cover\"\n              height={64}\n              src={previewUrl}\n              style={{ objectFit: \"cover\" }}\n              width={64}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"size-4 opacity-60\" />\n            </div>\n          )}\n        </Button>\n        {previewUrl && (\n          <Button\n            aria-label=\"Remove image\"\n            className=\"absolute -top-2 -right-2 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n            onClick={() => removeFile(files[0]?.id)}\n            size=\"icon\"\n          >\n            <XIcon className=\"size-3.5\" />\n          </Button>\n        )}\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload image file\"\n          className=\"sr-only\"\n          tabIndex={-1}\n        />\n      </div>\n      {fileName && <p className=\"text-muted-foreground text-xs\">{fileName}</p>}\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Avatar upload button\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-127.tsx",
    "content": "import {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-grid w-fit grid-cols-3 gap-1\">\n      <Button\n        aria-label=\"Pan camera up\"\n        className=\"col-start-2\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <ChevronUpIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <Button\n        aria-label=\"Pan camera left\"\n        className=\"col-start-1\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <div aria-hidden=\"true\" className=\"flex items-center justify-center\">\n        <CircleIcon className=\"opacity-60\" size={16} />\n      </div>\n      <Button aria-label=\"Pan camera right\" size=\"icon\" variant=\"outline\">\n        <ChevronRightIcon aria-hidden=\"true\" size={16} />\n      </Button>\n      <Button\n        aria-label=\"Pan camera down\"\n        className=\"col-start-2\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <ChevronDownIcon aria-hidden=\"true\" size={16} />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-128.tsx",
    "content": "import { ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"group h-auto gap-4 py-3 text-left\" variant=\"outline\">\n      <div className=\"space-y-1\">\n        <h3>Talent Agency</h3>\n        <p className=\"whitespace-break-spaces font-normal text-muted-foreground\">\n          Matches for your roster\n        </p>\n      </div>\n      <ChevronRightIcon\n        aria-hidden=\"true\"\n        className=\"opacity-60 transition-transform group-hover:translate-x-0.5\"\n        size={16}\n      />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-129.tsx",
    "content": "\"use client\";\n\nimport { BellIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [count, setCount] = useState(3);\n\n  const handleClick = () => {\n    setCount(0);\n  };\n\n  return (\n    <Button\n      aria-label=\"Notifications\"\n      className=\"relative\"\n      onClick={handleClick}\n      size=\"icon\"\n      variant=\"outline\"\n    >\n      <BellIcon aria-hidden=\"true\" size={16} />\n      {count > 0 && (\n        <Badge className=\"absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1\">\n          {count > 99 ? \"99+\" : count}\n        </Badge>\n      )}\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-13.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with inline add-ons</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-6 pe-12\"\n          id={id}\n          placeholder=\"0.00\"\n          type=\"text\"\n        />\n        <span className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm peer-disabled:opacity-50\">\n          €\n        </span>\n        <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground text-sm peer-disabled:opacity-50\">\n          EUR\n        </span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-130.tsx",
    "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Component() {\n  const [theme, setTheme] = useState<string>(\"light\");\n\n  return (\n    <div>\n      <Toggle\n        aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}\n        className=\"group size-9 data-[state=on]:bg-transparent data-[state=on]:hover:bg-muted\"\n        onPressedChange={() =>\n          setTheme((prev) => (prev === \"dark\" ? \"light\" : \"dark\"))\n        }\n        pressed={theme === \"dark\"}\n        variant=\"outline\"\n      >\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\n        <MoonIcon\n          aria-hidden=\"true\"\n          className=\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\"\n          size={16}\n        />\n        <SunIcon\n          aria-hidden=\"true\"\n          className=\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\"\n          size={16}\n        />\n      </Toggle>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-131.tsx",
    "content": "\"use client\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nconst options = [\n  {\n    description:\n      \"All commits from this branch will be added to the base branch via a commit version.\",\n    label: \"Merge pull request\",\n  },\n  {\n    description:\n      \"The 6 commits from this branch will be combined into one commit in the base branch.\",\n    label: \"Squash and merge\",\n  },\n  {\n    description:\n      \"The 6 commits from this branch will be rebased and added to the base branch.\",\n    label: \"Rebase and merge\",\n  },\n];\n\nexport default function Component() {\n  const [selectedIndex, setSelectedIndex] = useState(\"0\");\n\n  return (\n    <div className=\"inline-flex divide-x divide-primary-foreground/30 rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\">\n        {options[Number(selectedIndex)].label}\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            aria-label=\"Options\"\n            className=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus-visible:z-10\"\n            size=\"icon\"\n          >\n            <ChevronDownIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          align=\"end\"\n          className=\"max-w-64 md:max-w-xs\"\n          side=\"bottom\"\n          sideOffset={4}\n        >\n          <DropdownMenuRadioGroup\n            onValueChange={setSelectedIndex}\n            value={selectedIndex}\n          >\n            {options.map((option, index) => (\n              <DropdownMenuRadioItem\n                className=\"items-start [&>span]:pt-1.5\"\n                key={option.label}\n                value={String(index)}\n              >\n                <div className=\"flex flex-col gap-1\">\n                  <span className=\"font-medium text-sm\">{option.label}</span>\n                  <span className=\"text-muted-foreground text-xs\">\n                    {option.description}\n                  </span>\n                </div>\n              </DropdownMenuRadioItem>\n            ))}\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-132.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id={id} />\n      <Label htmlFor={id}>Simple checkbox</Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-133.tsx",
    "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState<boolean | \"indeterminate\">(\n    \"indeterminate\",\n  );\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox checked={checked} id={id} onCheckedChange={setChecked} />\n      <Label htmlFor={id}>Indeterminate checkbox</Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-134.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-center gap-2 [--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] in-[.dark]:[--primary:var(--color-indigo-500)] in-[.dark]:[--ring:var(--color-indigo-900)]\">\n      <Checkbox defaultChecked id={id} />\n      <Label htmlFor={id}>Colored checkbox</Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-135.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox disabled id={id} />\n      <Label htmlFor={id}>Disabled checkbox</Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-136.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox defaultChecked id={id} />\n      <Label className=\"peer-data-[state=checked]:line-through\" htmlFor={id}>\n        Simple todo item\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-137.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox className=\"rounded-full\" defaultChecked id={id} />\n      <Label\n        className=\"peer-data-[state=checked]:line-throgh relative [--primary:var(--color-emerald-500)] after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:-translate-y-1/2 after:scale-x-0 after:bg-muted-foreground after:transition-transform after:ease-in-out peer-data-[state=checked]:text-muted-foreground peer-data-[state=checked]:after:origin-bottom peer-data-[state=checked]:after:scale-x-100\"\n        htmlFor={id}\n      >\n        Fancy todo item\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-138.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id={id} />\n      <Label htmlFor={id}>\n        I agree to the{\" \"}\n        <a\n          className=\"underline\"\n          href=\"https://coss.com/origin\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          terms of service\n        </a>\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-139.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex gap-6\">\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id={`${id}-a`} />\n        <Label htmlFor={`${id}-a`}>React</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id={`${id}-b`} />\n        <Label htmlFor={`${id}-b`}>Next.js</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id={`${id}-c`} />\n        <Label htmlFor={`${id}-c`}>Astro</Label>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-14.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with start add-on</Label>\n      <div className=\"flex rounded-md shadow-xs\">\n        <span className=\"-z-10 inline-flex items-center rounded-s-md border border-input bg-background px-3 text-muted-foreground text-sm\">\n          https://\n        </span>\n        <Input\n          className=\"-ms-px rounded-s-none shadow-none\"\n          id={id}\n          placeholder=\"google.com\"\n          type=\"text\"\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-140.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      <Checkbox className=\"order-1\" id={id} />\n      <Label htmlFor={id}>Right aligned checkbox</Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-141.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Checkbox aria-describedby={`${id}-description`} id={id} />\n      <div className=\"grid grow gap-2\">\n        <Label htmlFor={id}>\n          Label{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (Sublabel)\n          </span>\n        </Label>\n        <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n          You can use this checkbox with a label and a description.\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-142.tsx",
    "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const checkboxId = useId();\n  const inputId = useId();\n  const [checked, setChecked] = useState<boolean | \"indeterminate\">(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (checked === true && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [checked]);\n\n  return (\n    <div>\n      <div className=\"flex items-start gap-2\">\n        <Checkbox\n          aria-controls={inputId}\n          aria-describedby={`${checkboxId}-description`}\n          checked={checked}\n          id={checkboxId}\n          onCheckedChange={setChecked}\n        />\n        <div className=\"grow\">\n          <div className=\"grid gap-2\">\n            <Label htmlFor={checkboxId}>Checkbox with expansion</Label>\n            <p\n              className=\"text-muted-foreground text-xs\"\n              id={`${checkboxId}-description`}\n            >\n              You can use this checkbox with a label and a description.\n            </p>\n          </div>\n          {/* Expandable field */}\n          <div\n            aria-labelledby={checkboxId}\n            className=\"grid transition-all ease-in-out data-[state=collapsed]:grid-rows-[0fr] data-[state=expanded]:grid-rows-[1fr] data-[state=collapsed]:opacity-0 data-[state=expanded]:opacity-100\"\n            data-state={checked ? \"expanded\" : \"collapsed\"}\n            id={inputId}\n            role=\"region\"\n          >\n            <div className=\"pointer-events-none -m-2 overflow-hidden p-2\">\n              <div className=\"pointer-events-auto mt-3\">\n                <Input\n                  aria-label=\"Additional Information\"\n                  disabled={!checked}\n                  id=\"checkbox-11-additional-info\"\n                  placeholder=\"Enter details\"\n                  ref={inputRef}\n                  type=\"text\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-143.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Checkbox\n        aria-describedby={`${id}-description`}\n        className=\"order-1\"\n        id={id}\n      />\n      <div className=\"grid grow gap-2\">\n        <Label htmlFor={id}>\n          Label{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (Sublabel)\n          </span>\n        </Label>\n        <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n          You can use this checkbox with a label and a description.\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-144.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n      <Checkbox\n        aria-describedby={`${id}-description`}\n        className=\"order-1 after:absolute after:inset-0\"\n        id={id}\n      />\n      <div className=\"grid grow gap-2\">\n        <Label htmlFor={id}>\n          Label{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (Sublabel)\n          </span>\n        </Label>\n        <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n          A short description goes here.\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-145.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n      <Checkbox\n        aria-describedby={`${id}-description`}\n        className=\"order-1 after:absolute after:inset-0\"\n        id={id}\n      />\n      <div className=\"flex grow items-start gap-3\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"shrink-0\"\n          height={24}\n          viewBox=\"0 0 32 24\"\n          width={32}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect fill=\"#252525\" height=\"24\" rx=\"4\" width=\"32\" />\n          <path\n            d=\"M19.0537 6.49742H12.9282V17.5026H19.0537V6.49742Z\"\n            fill=\"#FF5A00\"\n          />\n          <path\n            d=\"M13.3359 12C13.3359 9.76408 14.3871 7.77961 16 6.49741C14.8129 5.56408 13.3155 5 11.6822 5C7.81295 5 4.68221 8.13074 4.68221 12C4.68221 15.8693 7.81295 19 11.6822 19C13.3155 19 14.8129 18.4359 16 17.5026C14.3848 16.2385 13.3359 14.2359 13.3359 12Z\"\n            fill=\"#EB001B\"\n          />\n          <path\n            d=\"M27.3178 12C27.3178 15.8693 24.1871 19 20.3178 19C18.6845 19 17.1871 18.4359 16 17.5026C17.6333 16.2181 18.6641 14.2359 18.6641 12C18.6641 9.76408 17.6129 7.77961 16 6.49741C17.1848 5.56408 18.6822 5 20.3155 5C24.1871 5 27.3178 8.15113 27.3178 12Z\"\n            fill=\"#F79E1B\"\n          />\n        </svg>\n        <div className=\"grid gap-2\">\n          <Label htmlFor={id}>\n            Label{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n            A short description goes here.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-146.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n      <Checkbox\n        aria-describedby={`${id}-description`}\n        className=\"order-1 after:absolute after:inset-0\"\n        id={id}\n      />\n      <div className=\"flex grow items-center gap-3\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"shrink-0\"\n          height={32}\n          width={32}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle cx=\"16\" cy=\"16\" fill=\"#121212\" r=\"16\" />\n          <g clipPath=\"url(#sb-a)\">\n            <path\n              d=\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\"\n              fill=\"url(#sb-b)\"\n            />\n            <path\n              d=\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\"\n              fill=\"url(#sb-c)\"\n              fillOpacity=\".2\"\n            />\n            <path\n              d=\"M14.375 6.367c.506-.638 1.532-.289 1.544.525l.078 11.903H8.094c-1.45 0-2.258-1.674-1.357-2.81l7.638-9.618Z\"\n              fill=\"#3ECF8E\"\n            />\n          </g>\n          <defs>\n            <linearGradient\n              gradientUnits=\"userSpaceOnUse\"\n              id=\"sb-b\"\n              x1=\"15.907\"\n              x2=\"23.02\"\n              y1=\"15.73\"\n              y2=\"18.713\"\n            >\n              <stop stopColor=\"#249361\" />\n              <stop offset=\"1\" stopColor=\"#3ECF8E\" />\n            </linearGradient>\n            <linearGradient\n              gradientUnits=\"userSpaceOnUse\"\n              id=\"sb-c\"\n              x1=\"12.753\"\n              x2=\"15.997\"\n              y1=\"11.412\"\n              y2=\"17.519\"\n            >\n              <stop />\n              <stop offset=\"1\" stopOpacity=\"0\" />\n            </linearGradient>\n            <clipPath id=\"sb-a\">\n              <path d=\"M6.354 6h19.292v20H6.354z\" fill=\"#fff\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <div className=\"grid gap-2\">\n          <Label htmlFor={id}>\n            Label{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n            A short description goes here.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-147.tsx",
    "content": "import { Brush, Eraser, Scissors, SwatchBook } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { defaultChecked: true, Icon: SwatchBook, label: \"Palette\", value: \"1\" },\n    { Icon: Brush, label: \"Brush\", value: \"2\" },\n    { Icon: Eraser, label: \"Eraser\", value: \"3\" },\n    { Icon: Scissors, label: \"Cut\", value: \"4\" },\n  ];\n\n  return (\n    <div className=\"grid grid-cols-2 gap-3\">\n      {items.map((item) => (\n        <div\n          className=\"relative flex cursor-pointer flex-col gap-4 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\"\n          key={`${id}-${item.value}`}\n        >\n          <div className=\"flex justify-between gap-2\">\n            <Checkbox\n              className=\"order-1 after:absolute after:inset-0\"\n              defaultChecked={item.defaultChecked}\n              id={`${id}-${item.value}`}\n              value={item.value}\n            />\n            <item.Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          </div>\n          <Label htmlFor={`${id}-${item.value}`}>{item.label}</Label>\n        </div>\n      ))}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-148.tsx",
    "content": "\"use client\";\n\nimport { Fragment, useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxTree } from \"@/registry/default/ui/checkbox-tree\";\nimport { Label } from \"@/registry/default/ui/label\";\n\ninterface TreeNode {\n  id: string;\n  label: string;\n  defaultChecked?: boolean;\n  children?: TreeNode[];\n}\n\nconst initialTree: TreeNode = {\n  children: [\n    { defaultChecked: true, id: \"2\", label: \"Mountains\" },\n    {\n      children: [\n        { id: \"4\", label: \"Niagara Falls\" },\n        { defaultChecked: true, id: \"5\", label: \"Angel Falls\" },\n      ],\n      id: \"3\",\n      label: \"Waterfalls\",\n    },\n    { id: \"6\", label: \"Grand Canyon\" },\n  ],\n  id: \"1\",\n  label: \"Natural Wonders\",\n};\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"space-y-3\">\n      <CheckboxTree\n        renderNode={({ node, isChecked, onCheckedChange, children }) => (\n          <Fragment key={`${id}-${node.id}`}>\n            <div className=\"flex items-center gap-2\">\n              <Checkbox\n                checked={isChecked}\n                id={`${id}-${node.id}`}\n                onCheckedChange={onCheckedChange}\n              />\n              <Label htmlFor={`${id}-${node.id}`}>{node.label}</Label>\n            </div>\n            {children && <div className=\"ms-6 space-y-3\">{children}</div>}\n          </Fragment>\n        )}\n        tree={initialTree}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-149.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { defaultChecked: true, label: \"Monday\", value: \"1\" },\n    { defaultChecked: true, label: \"Tuesday\", value: \"2\" },\n    { label: \"Wednesday\", value: \"3\" },\n    { defaultChecked: true, label: \"Thursday\", value: \"4\" },\n    { defaultChecked: true, label: \"Friday\", value: \"5\" },\n    { label: \"Saturday\", value: \"6\" },\n    { disabled: true, label: \"Sunday\", value: \"7\" },\n  ];\n\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        Days of the week\n      </legend>\n      <div className=\"flex gap-1.5\">\n        {items.map((item) => (\n          <label\n            className=\"relative flex size-9 cursor-pointer flex-col items-center justify-center gap-3 rounded-full border border-input text-center shadow-xs outline-none transition-[color,box-shadow] has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary has-focus-visible:border-ring has-data-[state=checked]:bg-primary has-data-[state=checked]:text-primary-foreground has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={`${id}-${item.value}`}\n          >\n            <Checkbox\n              className=\"sr-only after:absolute after:inset-0\"\n              defaultChecked={item.defaultChecked}\n              disabled={item.disabled}\n              id={`${id}-${item.value}`}\n              value={item.value}\n            />\n            <span aria-hidden=\"true\" className=\"font-medium text-sm\">\n              {item.label[0]}\n            </span>\n            <span className=\"sr-only\">{item.label}</span>\n          </label>\n        ))}\n      </div>\n    </fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-15.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with end add-on</Label>\n      <div className=\"flex rounded-md shadow-xs\">\n        <Input\n          className=\"-me-px rounded-e-none shadow-none\"\n          id={id}\n          placeholder=\"google\"\n          type=\"text\"\n        />\n        <span className=\"-z-10 inline-flex items-center rounded-e-md border border-input bg-background px-3 text-muted-foreground text-sm\">\n          .com\n        </span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-150.tsx",
    "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\n\nexport default function Component() {\n  const id = useId();\n  const [theme, setTheme] = useState<string>(\"light\");\n\n  return (\n    <div className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        Dark mode toggle checkbox\n      </legend>\n      <div className=\"flex flex-col justify-center\">\n        <input\n          checked={theme === \"dark\"}\n          className=\"peer sr-only\"\n          id={id}\n          name={id}\n          onChange={() =>\n            setTheme((prev) => (prev === \"dark\" ? \"light\" : \"dark\"))\n          }\n          type=\"checkbox\"\n        />\n        <label\n          aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}\n          className=\"group relative inline-flex size-9 items-center justify-center rounded-md border border-input bg-background text-foreground shadow-xs outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50\"\n          htmlFor={id}\n        >\n          {/* Note: After dark mode implementation, rely on dark: prefix rather than group-peer-checked: */}\n          <MoonIcon\n            aria-hidden=\"true\"\n            className=\"shrink-0 scale-0 opacity-0 transition-all group-peer-checked:scale-100 group-peer-checked:opacity-100\"\n            size={16}\n          />\n          <SunIcon\n            aria-hidden=\"true\"\n            className=\"absolute shrink-0 scale-100 opacity-100 transition-all group-peer-checked:scale-0 group-peer-checked:opacity-0\"\n            size={16}\n          />\n        </label>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-151.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"grid gap-3\">\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id={`${id}-1`} />\n        <Label htmlFor={`${id}-1`}>React</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id={`${id}-2`} />\n        <Label htmlFor={`${id}-2`}>Next.js</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Checkbox id={`${id}-3`} />\n        <Label htmlFor={`${id}-3`}>Astro</Label>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-152.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup defaultValue=\"1\">\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-1`} value=\"1\" />\n        <Label htmlFor={`${id}-1`}>Option 1</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-2`} value=\"2\" />\n        <Label htmlFor={`${id}-2`}>Option 2</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-3`} value=\"3\" />\n        <Label htmlFor={`${id}-3`}>Option 3</Label>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-153.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup\n      className=\"[--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] in-[.dark]:[--primary:var(--color-indigo-500)] in-[.dark]:[--ring:var(--color-indigo-900)]\"\n      defaultValue=\"1\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-1`} value=\"1\" />\n        <Label htmlFor={`${id}-1`}>Option 1</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-2`} value=\"2\" />\n        <Label htmlFor={`${id}-2`}>Option 2</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-3`} value=\"3\" />\n        <Label htmlFor={`${id}-3`}>Option 3</Label>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-154.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup defaultValue=\"2\" disabled>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-1`} value=\"1\" />\n        <Label htmlFor={`${id}-1`}>Option 1</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-2`} value=\"2\" />\n        <Label htmlFor={`${id}-2`}>Option 2</Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-3`} value=\"3\" />\n        <Label htmlFor={`${id}-3`}>Option 3</Label>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-155.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup className=\"gap-6\" defaultValue=\"1\">\n      <div className=\"flex items-start gap-2\">\n        <RadioGroupItem\n          aria-describedby={`${id}-1-description`}\n          id={`${id}-1`}\n          value=\"1\"\n        />\n        <div className=\"grid grow gap-2\">\n          <Label htmlFor={`${id}-1`}>\n            Small{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p\n            className=\"text-muted-foreground text-xs\"\n            id={`${id}-1-description`}\n          >\n            You can use this card with a label and a description.\n          </p>\n        </div>\n      </div>\n      <div className=\"flex items-start gap-2\">\n        <RadioGroupItem\n          aria-describedby={`${id}-2-description`}\n          id={`${id}-2`}\n          value=\"2\"\n        />\n        <div className=\"grid grow gap-2\">\n          <Label htmlFor={`${id}-2`}>\n            Large{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p\n            className=\"text-muted-foreground text-xs\"\n            id={`${id}-2-description`}\n          >\n            You can use this card with a label and a description.\n          </p>\n        </div>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-156.tsx",
    "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const radioId = useId();\n  const inputId = useId();\n  const [selectedValue, setSelectedValue] = useState(\"without-expansion\");\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (selectedValue === \"with-expansion\" && inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [selectedValue]);\n\n  return (\n    <RadioGroup\n      className=\"gap-6\"\n      onValueChange={setSelectedValue}\n      value={selectedValue}\n    >\n      <div>\n        <div className=\"flex items-start gap-2\">\n          <RadioGroupItem\n            aria-controls={inputId}\n            aria-describedby={`${radioId}-1-description`}\n            id={`${radioId}-1`}\n            value=\"with-expansion\"\n          />\n          <div className=\"grow\">\n            <div className=\"grid grow gap-2\">\n              <Label htmlFor={`${radioId}-1`}>Radio with expansion</Label>\n              <p\n                className=\"text-muted-foreground text-xs\"\n                id={`${radioId}-1-description`}\n              >\n                You can use this radio with a label and a description.\n              </p>\n            </div>\n            {/* Expandable field */}\n            <div\n              aria-labelledby={`${radioId}-1`}\n              className=\"grid transition-all ease-in-out data-[state=collapsed]:grid-rows-[0fr] data-[state=expanded]:grid-rows-[1fr] data-[state=collapsed]:opacity-0 data-[state=expanded]:opacity-100\"\n              data-state={\n                selectedValue === \"with-expansion\" ? \"expanded\" : \"collapsed\"\n              }\n              id={inputId}\n              role=\"region\"\n            >\n              <div className=\"pointer-events-none -m-2 overflow-hidden p-2\">\n                <div className=\"pointer-events-auto mt-3\">\n                  <Input\n                    aria-label=\"Additional Information\"\n                    disabled={selectedValue !== \"with-expansion\"}\n                    id=\"radio-05-additional-info\"\n                    placeholder=\"Enter details\"\n                    ref={inputRef}\n                    type=\"text\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex items-start gap-2\">\n        <RadioGroupItem\n          aria-describedby={`${radioId}-2-description`}\n          id={`${radioId}-2`}\n          value=\"without-expansion\"\n        />\n        <div className=\"grid grow gap-2\">\n          <Label htmlFor={`${radioId}-2`}>Radio without expansion</Label>\n          <p\n            className=\"text-muted-foreground text-xs\"\n            id={`${radioId}-2-description`}\n          >\n            You can use this checkbox with a label and a description.\n          </p>\n        </div>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-157.tsx",
    "content": "import { RiStarFill } from \"@remixicon/react\";\nimport { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup defaultValue=\"all\">\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-1`} value=\"all\" />\n        <Label htmlFor={`${id}-1`}>\n          All reviews{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (12,921)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-2`} value=\"5-stars\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-2`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n          </span>\n          <span className=\"sr-only\">5 stars</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (5,168)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-3`} value=\"4-stars\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-3`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n          </span>\n          <span className=\"sr-only\">4 stars</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (4,726)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-4`} value=\"3-stars\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-4`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n          </span>\n          <span className=\"sr-only\">3 stars</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (3,234)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-5`} value=\"2-stars\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-5`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n          </span>\n          <span className=\"sr-only\">2 stars</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (1,842)\n          </span>\n        </Label>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <RadioGroupItem id={`${id}-6`} value=\"1-star\" />\n        <Label className=\"inline-flex items-center gap-1\" htmlFor={`${id}-6`}>\n          <span\n            aria-hidden=\"true\"\n            className=\"inline-flex items-center text-amber-500\"\n          >\n            <RiStarFill size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n            <RiStarFill className=\"opacity-30\" size={16} />\n          </span>\n          <span className=\"sr-only\">1 star</span>{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (452)\n          </span>\n        </Label>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-158.tsx",
    "content": "import { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        Choose a color\n      </legend>\n      <RadioGroup className=\"flex gap-1.5\" defaultValue=\"blue\">\n        <RadioGroupItem\n          aria-label=\"Blue\"\n          className=\"size-6 border-blue-500 bg-blue-500 shadow-none data-[state=checked]:border-blue-500 data-[state=checked]:bg-blue-500\"\n          value=\"blue\"\n        />\n        <RadioGroupItem\n          aria-label=\"Indigo\"\n          className=\"size-6 border-indigo-500 bg-indigo-500 shadow-none data-[state=checked]:border-indigo-500 data-[state=checked]:bg-indigo-500\"\n          value=\"indigo\"\n        />\n        <RadioGroupItem\n          aria-label=\"Pink\"\n          className=\"size-6 border-pink-500 bg-pink-500 shadow-none data-[state=checked]:border-pink-500 data-[state=checked]:bg-pink-500\"\n          value=\"pink\"\n        />\n        <RadioGroupItem\n          aria-label=\"red\"\n          className=\"size-6 border-red-500 bg-red-500 shadow-none data-[state=checked]:border-red-500 data-[state=checked]:bg-red-500\"\n          value=\"red\"\n        />\n        <RadioGroupItem\n          aria-label=\"orange\"\n          className=\"size-6 border-orange-500 bg-orange-500 shadow-none data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500\"\n          value=\"orange\"\n        />\n        <RadioGroupItem\n          aria-label=\"amber\"\n          className=\"size-6 border-amber-500 bg-amber-500 shadow-none data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500\"\n          value=\"amber\"\n        />\n        <RadioGroupItem\n          aria-label=\"emerald\"\n          className=\"size-6 border-emerald-500 bg-emerald-500 shadow-none data-[state=checked]:border-emerald-500 data-[state=checked]:bg-emerald-500\"\n          value=\"emerald\"\n        />\n      </RadioGroup>\n    </fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-159.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup className=\"gap-2\" defaultValue=\"1\">\n      {/* Radio card #1 */}\n      <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n        <RadioGroupItem\n          aria-describedby={`${id}-1-description`}\n          className=\"order-1 after:absolute after:inset-0\"\n          id={`${id}-1`}\n          value=\"1\"\n        />\n        <div className=\"grid grow gap-2\">\n          <Label htmlFor={`${id}-1`}>\n            Label{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p\n            className=\"text-muted-foreground text-xs\"\n            id={`${id}-1-description`}\n          >\n            You can use this card with a label and a description.\n          </p>\n        </div>\n      </div>\n      {/* Radio card #2 */}\n      <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n        <RadioGroupItem\n          aria-describedby={`${id}-2-description`}\n          className=\"order-1 after:absolute after:inset-0\"\n          id={`${id}-2`}\n          value=\"2\"\n        />\n        <div className=\"grid grow gap-2\">\n          <Label htmlFor={`${id}-2`}>\n            Label{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p\n            className=\"text-muted-foreground text-xs\"\n            id={`${id}-2-description`}\n          >\n            You can use this card with a label and a description.\n          </p>\n        </div>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-16.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with inline start and end add-on</Label>\n      <div className=\"relative flex rounded-md shadow-xs\">\n        <span className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm\">\n          €\n        </span>\n        <Input\n          className=\"-me-px rounded-e-none ps-6 shadow-none\"\n          id={id}\n          placeholder=\"0.00\"\n          type=\"text\"\n        />\n        <span className=\"-z-10 inline-flex items-center rounded-e-md border border-input bg-background px-3 text-muted-foreground text-sm\">\n          EUR\n        </span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-160.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup className=\"gap-2\" defaultValue=\"1\">\n      {/* Radio card #1 */}\n      <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n        <RadioGroupItem\n          aria-describedby={`${id}-1-description`}\n          className=\"order-1 after:absolute after:inset-0\"\n          id={`${id}-1`}\n          value=\"1\"\n        />\n        <div className=\"flex grow items-start gap-3\">\n          <svg\n            aria-hidden=\"true\"\n            className=\"shrink-0\"\n            height={24}\n            viewBox=\"0 0 32 24\"\n            width={32}\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <rect fill=\"#252525\" height=\"24\" rx=\"4\" width=\"32\" />\n            <path\n              d=\"M19.0537 6.49742H12.9282V17.5026H19.0537V6.49742Z\"\n              fill=\"#FF5A00\"\n            />\n            <path\n              d=\"M13.3359 12C13.3359 9.76408 14.3871 7.77961 16 6.49741C14.8129 5.56408 13.3155 5 11.6822 5C7.81295 5 4.68221 8.13074 4.68221 12C4.68221 15.8693 7.81295 19 11.6822 19C13.3155 19 14.8129 18.4359 16 17.5026C14.3848 16.2385 13.3359 14.2359 13.3359 12Z\"\n              fill=\"#EB001B\"\n            />\n            <path\n              d=\"M27.3178 12C27.3178 15.8693 24.1871 19 20.3178 19C18.6845 19 17.1871 18.4359 16 17.5026C17.6333 16.2181 18.6641 14.2359 18.6641 12C18.6641 9.76408 17.6129 7.77961 16 6.49741C17.1848 5.56408 18.6822 5 20.3155 5C24.1871 5 27.3178 8.15113 27.3178 12Z\"\n              fill=\"#F79E1B\"\n            />\n          </svg>\n          <div className=\"grid grow gap-2\">\n            <Label htmlFor={`${id}-1`}>\n              Label{\" \"}\n              <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n                (Sublabel)\n              </span>\n            </Label>\n            <p\n              className=\"text-muted-foreground text-xs\"\n              id={`${id}-1-description`}\n            >\n              You can use this card with a label and a description.\n            </p>\n          </div>\n        </div>\n      </div>\n      {/* Radio card #2 */}\n      <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n        <RadioGroupItem\n          aria-describedby={`${id}-2-description`}\n          className=\"order-1 after:absolute after:inset-0\"\n          id={`${id}-2`}\n          value=\"2\"\n        />\n        <div className=\"flex grow items-start gap-3\">\n          <svg\n            aria-hidden=\"true\"\n            className=\"shrink-0\"\n            height={24}\n            viewBox=\"0 0 32 24\"\n            width={32}\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <g clipPath=\"url(#vc-a)\">\n              <path\n                d=\"M28 0H4a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4Z\"\n                fill=\"#252525\"\n              />\n              <path\n                d=\"m15.884 8.262-1.604 7.496h-1.94l1.604-7.496h1.94Z\"\n                fill=\"#fff\"\n              />\n              <path\n                clipRule=\"evenodd\"\n                d=\"M26.207 15.758H28l-1.567-7.496H24.78a.882.882 0 0 0-.826.55l-2.91 6.946h2.037l.404-1.12h2.488l.235 1.12Zm-2.165-2.656 1.021-2.815.587 2.815h-1.608Z\"\n                fill=\"#fff\"\n                fillRule=\"evenodd\"\n              />\n              <path\n                d=\"M21.144 13.31c.005-1.183-.975-1.698-1.76-2.11-.526-.276-.964-.506-.957-.861.007-.27.263-.555.823-.628.277-.036 1.044-.065 1.913.335l.34-1.59a5.23 5.23 0 0 0-1.815-.331c-1.917 0-3.265 1.018-3.276 2.477-.013 1.08.963 1.681 1.697 2.04.756.368 1.01.604 1.006.932-.005.503-.604.726-1.16.734-.945.015-1.506-.247-1.95-.454l-.042-.02-.352 1.643c.454.208 1.29.39 2.156.398 2.038 0 3.371-1.006 3.377-2.565ZM13.112 8.262 9.97 15.758H7.92L6.374 9.775c-.094-.368-.175-.503-.46-.658-.467-.253-1.237-.49-1.914-.638l.046-.217h3.3c.42 0 .798.28.894.763l.817 4.338 2.018-5.101h2.037Z\"\n                fill=\"#fff\"\n              />\n            </g>\n            <defs>\n              <clipPath id=\"vc-a\">\n                <path d=\"M0 0h32v24H0z\" fill=\"#fff\" />\n              </clipPath>\n            </defs>\n          </svg>\n          <div className=\"grid grow gap-2\">\n            <Label htmlFor={`${id}-2`}>\n              Label{\" \"}\n              <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n                (Sublabel)\n              </span>\n            </Label>\n            <p\n              className=\"text-muted-foreground text-xs\"\n              id={`${id}-2-description`}\n            >\n              You can use this card with a label and a description.\n            </p>\n          </div>\n        </div>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-161.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup className=\"gap-2\" defaultValue=\"1\">\n      {/* Radio card #1 */}\n      <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n        <RadioGroupItem\n          aria-describedby={`${id}-1-description`}\n          className=\"order-1 after:absolute after:inset-0\"\n          id={`${id}-1`}\n          value=\"1\"\n        />\n        <div className=\"flex grow items-center gap-3\">\n          <svg\n            aria-hidden=\"true\"\n            className=\"shrink-0\"\n            height={32}\n            width={32}\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"16\" cy=\"16\" fill=\"#121212\" r=\"16\" />\n            <g clipPath=\"url(#sb-a)\">\n              <path\n                d=\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\"\n                fill=\"url(#sb-b)\"\n              />\n              <path\n                d=\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\"\n                fill=\"url(#sb-c)\"\n                fillOpacity=\".2\"\n              />\n              <path\n                d=\"M14.375 6.367c.506-.638 1.532-.289 1.544.525l.078 11.903H8.094c-1.45 0-2.258-1.674-1.357-2.81l7.638-9.618Z\"\n                fill=\"#3ECF8E\"\n              />\n            </g>\n            <defs>\n              <linearGradient\n                gradientUnits=\"userSpaceOnUse\"\n                id=\"sb-b\"\n                x1=\"15.907\"\n                x2=\"23.02\"\n                y1=\"15.73\"\n                y2=\"18.713\"\n              >\n                <stop stopColor=\"#249361\" />\n                <stop offset=\"1\" stopColor=\"#3ECF8E\" />\n              </linearGradient>\n              <linearGradient\n                gradientUnits=\"userSpaceOnUse\"\n                id=\"sb-c\"\n                x1=\"12.753\"\n                x2=\"15.997\"\n                y1=\"11.412\"\n                y2=\"17.519\"\n              >\n                <stop />\n                <stop offset=\"1\" stopOpacity=\"0\" />\n              </linearGradient>\n              <clipPath id=\"sb-a\">\n                <path d=\"M6.354 6h19.292v20H6.354z\" fill=\"#fff\" />\n              </clipPath>\n            </defs>\n          </svg>\n          <div className=\"grid grow gap-2\">\n            <Label htmlFor={`${id}-1`}>\n              Label{\" \"}\n              <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n                (Sublabel)\n              </span>\n            </Label>\n            <p\n              className=\"text-muted-foreground text-xs\"\n              id={`${id}-1-description`}\n            >\n              You can use this card with a label and a description.\n            </p>\n          </div>\n        </div>\n      </div>\n      {/* Radio card #2 */}\n      <div className=\"relative flex items-center gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n        <RadioGroupItem\n          aria-describedby={`${id}-2-description`}\n          className=\"order-1 after:absolute after:inset-0\"\n          id={`${id}-2`}\n          value=\"2\"\n        />\n        <div className=\"flex grow items-start gap-3\">\n          <svg\n            aria-hidden=\"true\"\n            className=\"shrink-0\"\n            height={32}\n            width={32}\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle cx=\"16\" cy=\"16\" fill=\"#090A15\" r=\"16\" />\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.004 19.728a.996.996 0 0 1-.008-1.054l7.478-12.199a.996.996 0 0 1 1.753.104l6.832 14.82a.996.996 0 0 1-.618 1.37l-10.627 3.189a.996.996 0 0 1-1.128-.42l-3.682-5.81Zm8.333-9.686a.373.373 0 0 1 .709-.074l4.712 10.904a.374.374 0 0 1-.236.506L14.18 23.57a.373.373 0 0 1-.473-.431l2.63-13.097Z\"\n              fill=\"#fff\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n          <div className=\"grid grow gap-2\">\n            <Label htmlFor={`${id}-2`}>\n              Label{\" \"}\n              <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n                (Sublabel)\n              </span>\n            </Label>\n            <p\n              className=\"text-muted-foreground text-xs\"\n              id={`${id}-2-description`}\n            >\n              You can use this card with a label and a description.\n            </p>\n          </div>\n        </div>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-162.tsx",
    "content": "import { Brush, Eraser, Scissors, SwatchBook } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { Icon: SwatchBook, label: \"Palette\", value: \"1\" },\n    { Icon: Brush, label: \"Brush\", value: \"2\" },\n    { Icon: Eraser, label: \"Eraser\", value: \"3\" },\n    { Icon: Scissors, label: \"Cut\", value: \"4\" },\n  ];\n\n  return (\n    <RadioGroup className=\"grid-cols-2\" defaultValue=\"1\">\n      {items.map((item) => (\n        <div\n          className=\"relative flex flex-col gap-4 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\"\n          key={`${id}-${item.value}`}\n        >\n          <div className=\"flex justify-between gap-2\">\n            <RadioGroupItem\n              className=\"order-1 after:absolute after:inset-0\"\n              id={`${id}-${item.value}`}\n              value={item.value}\n            />\n            <item.Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          </div>\n          <Label htmlFor={`${id}-${item.value}`}>{item.label}</Label>\n        </div>\n      ))}\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-163.tsx",
    "content": "import { RiAppleLine, RiBankCardLine, RiPaypalLine } from \"@remixicon/react\";\nimport { useId } from \"react\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <RadioGroup className=\"grid-cols-3\" defaultValue=\"1\">\n      {/* Credit card */}\n      <div className=\"relative flex cursor-pointer flex-col items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n        <RadioGroupItem className=\"sr-only\" id={`${id}-1`} value=\"1\" />\n        <RiBankCardLine aria-hidden=\"true\" className=\"opacity-60\" size={20} />\n        <label\n          className=\"cursor-pointer font-medium text-foreground text-xs leading-none after:absolute after:inset-0\"\n          htmlFor={`${id}-1`}\n        >\n          Card\n        </label>\n      </div>\n      {/* PayPal */}\n      <div className=\"relative flex cursor-pointer flex-col items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n        <RadioGroupItem className=\"sr-only\" id={`${id}-2`} value=\"2\" />\n        <RiPaypalLine aria-hidden=\"true\" className=\"opacity-60\" size={20} />\n        <label\n          className=\"cursor-pointer font-medium text-foreground text-xs leading-none after:absolute after:inset-0\"\n          htmlFor={`${id}-2`}\n        >\n          PayPal\n        </label>\n      </div>\n      {/* Apple Pay */}\n      <div className=\"relative flex cursor-pointer flex-col items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n        <RadioGroupItem className=\"sr-only\" id={`${id}-3`} value=\"3\" />\n        <RiAppleLine aria-hidden=\"true\" className=\"opacity-60\" size={20} />\n        <label\n          className=\"cursor-pointer font-medium text-foreground text-xs leading-none after:absolute after:inset-0\"\n          htmlFor={`${id}-3`}\n        >\n          Apple Pay\n        </label>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-164.tsx",
    "content": "import { useId } from \"react\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { label: \"2 CPU\", value: \"1\" },\n    { label: \"4 CPU\", value: \"2\" },\n    { label: \"6 CPU\", value: \"3\" },\n    { label: \"8 CPU\", value: \"4\" },\n    { label: \"12 CPU\", value: \"5\" },\n    { disabled: true, label: \"16 CPU\", value: \"6\" },\n  ];\n\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        CPU Cores\n      </legend>\n      <RadioGroup className=\"grid grid-cols-3 gap-2\" defaultValue=\"1\">\n        {items.map((item) => (\n          <label\n            className=\"relative flex cursor-pointer flex-col items-center gap-3 rounded-md border border-input px-2 py-3 text-center shadow-xs outline-none transition-[color,box-shadow] has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={`${id}-${item.value}`}\n          >\n            <RadioGroupItem\n              className=\"sr-only after:absolute after:inset-0\"\n              disabled={item.disabled}\n              id={`${id}-${item.value}`}\n              value={item.value}\n            />\n            <p className=\"font-medium text-foreground text-sm leading-none\">\n              {item.label}\n            </p>\n          </label>\n        ))}\n      </RadioGroup>\n    </fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-165.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { label: \"USA\", value: \"1\" },\n    { label: \"UK\", value: \"2\" },\n    { label: \"France\", value: \"3\" },\n  ];\n\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        Server location\n      </legend>\n      <RadioGroup className=\"flex flex-wrap gap-2\" defaultValue=\"1\">\n        {items.map((item) => (\n          <div\n            className=\"relative flex flex-col items-start gap-4 rounded-md border border-input p-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50\"\n            key={`${id}-${item.value}`}\n          >\n            <div className=\"flex items-center gap-2\">\n              <RadioGroupItem\n                className=\"after:absolute after:inset-0\"\n                id={`${id}-${item.value}`}\n                value={item.value}\n              />\n              <Label htmlFor={`${id}-${item.value}`}>{item.label}</Label>\n            </div>\n          </div>\n        ))}\n      </RadioGroup>\n    </fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-166.tsx",
    "content": "import { useId } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { label: \"Hobby\", price: \"$9/mo\", value: \"1\" },\n    { label: \"Plus\", price: \"$29/mo\", value: \"2\" },\n    { label: \"Team\", price: \"$49/mo\", value: \"3\" },\n    { label: \"Enterprise\", price: \"Custom\", value: \"4\" },\n  ];\n\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        Choose plan\n      </legend>\n      <RadioGroup\n        className=\"gap-0 -space-y-px rounded-md shadow-xs\"\n        defaultValue=\"2\"\n      >\n        {items.map((item) => (\n          <div\n            className=\"relative flex flex-col gap-4 border border-input p-4 outline-none first:rounded-t-md last:rounded-b-md has-data-[state=checked]:z-10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\"\n            key={`${id}-${item.value}`}\n          >\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <RadioGroupItem\n                  aria-describedby={`${`${id}-${item.value}`}-price`}\n                  className=\"after:absolute after:inset-0\"\n                  id={`${id}-${item.value}`}\n                  value={item.value}\n                />\n                <Label\n                  className=\"inline-flex items-start\"\n                  htmlFor={`${id}-${item.value}`}\n                >\n                  {item.label}\n                  {item.value === \"2\" && (\n                    <Badge className=\"ms-2 -mt-1\">Popular</Badge>\n                  )}\n                </Label>\n              </div>\n              <div\n                className=\"text-muted-foreground text-xs leading-[inherit]\"\n                id={`${`${id}-${item.value}`}-price`}\n              >\n                {item.price}\n              </div>\n            </div>\n          </div>\n        ))}\n      </RadioGroup>\n    </fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-167.tsx",
    "content": "import { useId } from \"react\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n\n  const items = [\n    { icon: \"😠\", label: \"Angry\", value: \"1\" },\n    { icon: \"🙁\", label: \"Sad\", value: \"2\" },\n    { icon: \"😐\", label: \"Neutral\", value: \"3\" },\n    { icon: \"🙂\", label: \"Happy\", value: \"4\" },\n    { icon: \"😀\", label: \"Laughing\", value: \"5\" },\n  ];\n\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        How did it go?\n      </legend>\n      <RadioGroup className=\"flex gap-1.5\" defaultValue=\"3\">\n        {items.map((item) => (\n          <label\n            className=\"relative flex size-9 cursor-pointer flex-col items-center justify-center rounded-full border border-input text-center text-xl shadow-xs outline-none transition-[color,box-shadow] has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={`${id}-${item.value}`}\n          >\n            <RadioGroupItem\n              className=\"sr-only after:absolute after:inset-0\"\n              id={`${id}-${item.value}`}\n              value={item.value}\n            />\n            {item.icon}\n          </label>\n        ))}\n      </RadioGroup>\n    </fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-168.tsx",
    "content": "import { useId } from \"react\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <>\n      <fieldset className=\"space-y-4\">\n        <legend className=\"font-medium text-foreground text-sm leading-none\">\n          How likely are you to recommend us?\n        </legend>\n        <RadioGroup className=\"flex gap-0 -space-x-px rounded-md shadow-xs\">\n          {[\"0\", \"1\", \"2\", \"3\", \"4\", \"5\"].map((value) => (\n            <label\n              className=\"relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center font-medium text-sm outline-none transition-[color,box-shadow] first:rounded-s-md last:rounded-e-md has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n              key={value}\n            >\n              <RadioGroupItem\n                className=\"sr-only after:absolute after:inset-0\"\n                id={`${id}-${value}`}\n                value={value}\n              />\n              {value}\n            </label>\n          ))}\n        </RadioGroup>\n      </fieldset>\n      <div className=\"mt-1 flex justify-between font-medium text-xs\">\n        <p>\n          <span className=\"text-base\">😡</span> Not likely\n        </p>\n        <p>\n          Very Likely <span className=\"text-base\">😍</span>\n        </p>\n      </div>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-169.tsx",
    "content": "import { CheckIcon, MinusIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nconst items = [\n  { image: \"/origin/ui-light.png\", label: \"Light\", value: \"1\" },\n  { image: \"/origin/ui-dark.png\", label: \"Dark\", value: \"2\" },\n  { image: \"/origin/ui-system.png\", label: \"System\", value: \"3\" },\n];\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        Choose a theme\n      </legend>\n      <RadioGroup className=\"flex gap-3\" defaultValue=\"1\">\n        {items.map((item) => (\n          <label key={`${id}-${item.value}`}>\n            <RadioGroupItem\n              className=\"peer sr-only after:absolute after:inset-0\"\n              id={`${id}-${item.value}`}\n              value={item.value}\n            />\n            <img\n              alt={item.label}\n              className=\"relative cursor-pointer overflow-hidden rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-data-disabled:cursor-not-allowed peer-data-[state=checked]:border-ring peer-data-[state=checked]:bg-accent peer-data-disabled:opacity-50\"\n              height={70}\n              src={item.image}\n              width={88}\n            />\n            <span className=\"group mt-2 flex items-center gap-1 peer-data-[state=unchecked]:text-muted-foreground/70\">\n              <CheckIcon\n                aria-hidden=\"true\"\n                className=\"group-peer-data-[state=unchecked]:hidden\"\n                size={16}\n              />\n              <MinusIcon\n                aria-hidden=\"true\"\n                className=\"group-peer-data-[state=checked]:hidden\"\n                size={16}\n              />\n              <span className=\"font-medium text-xs\">{item.label}</span>\n            </span>\n          </label>\n        ))}\n      </RadioGroup>\n    </fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-17.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with start select</Label>\n      <div className=\"flex rounded-md shadow-xs\">\n        <SelectNative className=\"w-fit rounded-e-none text-muted-foreground shadow-none hover:text-foreground\">\n          <option value=\"https://\">https://</option>\n          <option value=\"http://\">http://</option>\n          <option value=\"ftp://\">ftp://</option>\n          <option value=\"sftp://\">sftp://</option>\n          <option value=\"ws://\">ws://</option>\n          <option value=\"wss://\">wss://</option>\n        </SelectNative>\n        <Input\n          className=\"-ms-px rounded-s-none shadow-none focus-visible:z-10\"\n          id={id}\n          placeholder=\"192.168.1.1\"\n          type=\"text\"\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-170.tsx",
    "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  const [selectedValue, setSelectedValue] = useState(\"on\");\n\n  return (\n    <div className=\"inline-flex h-9 rounded-md bg-input/50 p-0.5\">\n      <RadioGroup\n        className=\"group relative inline-grid grid-cols-[1fr_1fr] items-center gap-0 font-medium text-sm after:absolute after:inset-y-0 after:w-1/2 after:rounded-sm after:bg-background after:shadow-xs after:transition-[translate,box-shadow] after:duration-300 after:ease-[cubic-bezier(0.16,1,0.3,1)] has-focus-visible:after:border-ring has-focus-visible:after:ring-[3px] has-focus-visible:after:ring-ring/50 data-[state=off]:after:translate-x-0 data-[state=on]:after:translate-x-full\"\n        data-state={selectedValue}\n        onValueChange={setSelectedValue}\n        value={selectedValue}\n      >\n        <label className=\"relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-4 transition-colors group-data-[state=on]:text-muted-foreground/70\">\n          Bill Monthly\n          <RadioGroupItem className=\"sr-only\" id={`${id}-1`} value=\"off\" />\n        </label>\n        <label className=\"relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-4 transition-colors group-data-[state=off]:text-muted-foreground/70\">\n          <span>\n            Bill Yearly{\" \"}\n            <span className=\"transition-colors group-data-[state=off]:text-muted-foreground/70 group-data-[state=on]:text-emerald-500\">\n              -20%\n            </span>\n          </span>\n          <RadioGroupItem className=\"sr-only\" id={`${id}-2`} value=\"on\" />\n        </label>\n      </RadioGroup>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-171.tsx",
    "content": "\"use client\";\n\nimport { RiStarFill } from \"@remixicon/react\";\nimport { useId, useState } from \"react\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  const [hoverRating, setHoverRating] = useState(\"\");\n  const [currentRating, setCurrentRating] = useState(\"\");\n\n  return (\n    <fieldset className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm leading-none\">\n        Rate your experience\n      </legend>\n      <RadioGroup\n        className=\"inline-flex gap-0\"\n        onValueChange={setCurrentRating}\n      >\n        {[\"1\", \"2\", \"3\", \"4\", \"5\"].map((value) => (\n          <label\n            className=\"group relative cursor-pointer rounded p-0.5 outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={value}\n            onMouseEnter={() => setHoverRating(value)}\n            onMouseLeave={() => setHoverRating(\"\")}\n          >\n            <RadioGroupItem\n              className=\"sr-only\"\n              id={`${id}-${value}`}\n              value={value}\n            />\n            <RiStarFill\n              className={`transition-all ${\n                (hoverRating || currentRating) >= value\n                  ? \"text-amber-500\"\n                  : \"text-input\"\n              } group-hover:scale-110`}\n              size={24}\n            />\n            <span className=\"sr-only\">\n              {value} star{value === \"1\" ? \"\" : \"s\"}\n            </span>\n          </label>\n        ))}\n      </RadioGroup>\n    </fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-172.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch id={id} />\n      <Label className=\"sr-only\" htmlFor={id}>\n        Simple switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-173.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch\n        className=\"h-5 w-8 [&_span]:size-4 data-[state=checked]:[&_span]:translate-x-3 data-[state=checked]:[&_span]:rtl:-translate-x-3\"\n        id={id}\n      />\n      <Label className=\"sr-only\" htmlFor={id}>\n        Small switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-174.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"inline-flex items-center gap-2 [--primary:var(--color-indigo-500)] [--ring:var(--color-indigo-300)] in-[.dark]:[--primary:var(--color-indigo-500)] in-[.dark]:[--ring:var(--color-indigo-900)]\">\n      <Switch defaultChecked id={id} />\n      <Label className=\"sr-only\" htmlFor={id}>\n        Colored switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-175.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch disabled id={id} />\n      <Label className=\"sr-only\" htmlFor={id}>\n        Disabled\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-176.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch className=\"rounded-sm [&_span]:rounded\" id={id} />\n      <Label className=\"sr-only\" htmlFor={id}>\n        Square switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-177.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch\n        className=\"h-3 w-9 border-none outline-offset-[6px] [&_span]:border [&_span]:border-input\"\n        id={id}\n      />\n      <Label className=\"sr-only\" htmlFor={id}>\n        M2-style switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-178.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch\n        className=\"data-[state=unchecked]:border-input data-[state=unchecked]:bg-transparent [&_span]:transition-all data-[state=unchecked]:[&_span]:size-4 data-[state=unchecked]:[&_span]:translate-x-0.5 data-[state=unchecked]:[&_span]:bg-input data-[state=unchecked]:[&_span]:shadow-none data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5\"\n        id={id}\n      />\n      <Label className=\"sr-only\" htmlFor={id}>\n        M3-style switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-179.tsx",
    "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch\n        aria-label=\"Toggle switch\"\n        checked={checked}\n        id={id}\n        onCheckedChange={setChecked}\n      />\n      <Label className=\"font-medium text-sm\" htmlFor={id}>\n        {checked ? \"On\" : \"Off\"}\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-18.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with end select</Label>\n      <div className=\"flex rounded-md shadow-xs\">\n        <Input\n          className=\"-me-px rounded-e-none shadow-none focus-visible:z-10\"\n          id={id}\n          placeholder=\"google\"\n          type=\"text\"\n        />\n        <SelectNative className=\"w-fit rounded-s-none text-muted-foreground shadow-none hover:text-foreground\">\n          <option>.com</option>\n          <option>.org</option>\n          <option>.net</option>\n        </SelectNative>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-180.tsx",
    "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState(false);\n\n  const toggleSwitch = () => setChecked((prev) => !prev);\n\n  return (\n    <div\n      className=\"group inline-flex items-center gap-2\"\n      data-state={checked ? \"checked\" : \"unchecked\"}\n    >\n      <span\n        aria-controls={id}\n        className=\"flex-1 cursor-pointer text-right font-medium text-sm group-data-[state=checked]:text-muted-foreground/70\"\n        id={`${id}-off`}\n        onClick={() => setChecked(false)}\n      >\n        Off\n      </span>\n      <Switch\n        aria-labelledby={`${id}-off ${id}-on`}\n        checked={checked}\n        id={id}\n        onCheckedChange={toggleSwitch}\n      />\n      <span\n        aria-controls={id}\n        className=\"flex-1 cursor-pointer text-left font-medium text-sm group-data-[state=unchecked]:text-muted-foreground/70\"\n        id={`${id}-on`}\n        onClick={() => setChecked(true)}\n      >\n        On\n      </span>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-181.tsx",
    "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch\n        aria-label=\"Toggle switch\"\n        checked={checked}\n        id={id}\n        onCheckedChange={setChecked}\n      />\n      <Label htmlFor={id}>\n        <span className=\"sr-only\">Toggle switch</span>\n        {checked ? (\n          <SunIcon aria-hidden=\"true\" size={16} />\n        ) : (\n          <MoonIcon aria-hidden=\"true\" size={16} />\n        )}\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-182.tsx",
    "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState(false);\n\n  const toggleSwitch = () => setChecked((prev) => !prev);\n\n  return (\n    <div\n      className=\"group inline-flex items-center gap-2\"\n      data-state={checked ? \"checked\" : \"unchecked\"}\n    >\n      <span\n        aria-controls={id}\n        className=\"flex-1 cursor-pointer text-right font-medium text-sm group-data-[state=checked]:text-muted-foreground/70\"\n        id={`${id}-off`}\n        onClick={() => setChecked(false)}\n      >\n        <MoonIcon aria-hidden=\"true\" size={16} />\n      </span>\n      <Switch\n        aria-label=\"Toggle between dark and light mode\"\n        aria-labelledby={`${id}-off ${id}-on`}\n        checked={checked}\n        id={id}\n        onCheckedChange={toggleSwitch}\n      />\n      <span\n        aria-controls={id}\n        className=\"flex-1 cursor-pointer text-left font-medium text-sm group-data-[state=unchecked]:text-muted-foreground/70\"\n        id={`${id}-on`}\n        onClick={() => setChecked(true)}\n      >\n        <SunIcon aria-hidden=\"true\" size={16} />\n      </span>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-183.tsx",
    "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <div>\n      <div className=\"relative inline-grid h-9 grid-cols-[1fr_1fr] items-center font-medium text-sm\">\n        <Switch\n          checked={checked}\n          className=\"peer absolute inset-0 h-[inherit] w-auto data-[state=checked]:bg-input/50 data-[state=unchecked]:bg-input/50 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full [&_span]:data-[state=checked]:rtl:-translate-x-full\"\n          id={id}\n          onCheckedChange={setChecked}\n        />\n        <span className=\"pointer-events-none relative ms-0.5 flex min-w-8 items-center justify-center text-center peer-data-[state=checked]:text-muted-foreground/70\">\n          <MoonIcon aria-hidden=\"true\" size={16} />\n        </span>\n        <span className=\"pointer-events-none relative me-0.5 flex min-w-8 items-center justify-center text-center peer-data-[state=unchecked]:text-muted-foreground/70\">\n          <SunIcon aria-hidden=\"true\" size={16} />\n        </span>\n      </div>\n      <Label className=\"sr-only\" htmlFor={id}>\n        Labeled switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-184.tsx",
    "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <div>\n      <div className=\"relative inline-grid h-9 grid-cols-[1fr_1fr] items-center font-medium text-sm\">\n        <Switch\n          checked={checked}\n          className=\"peer absolute inset-0 h-[inherit] w-auto data-[state=unchecked]:bg-input/50 [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full [&_span]:data-[state=checked]:rtl:-translate-x-full\"\n          id={id}\n          onCheckedChange={setChecked}\n        />\n        <span className=\"pointer-events-none relative ms-0.5 flex min-w-8 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full peer-data-[state=unchecked]:rtl:-translate-x-full\">\n          <MoonIcon aria-hidden=\"true\" size={16} />\n        </span>\n        <span className=\"pointer-events-none relative me-0.5 flex min-w-8 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=unchecked]:invisible peer-data-[state=checked]:-translate-x-full peer-data-[state=checked]:text-background peer-data-[state=checked]:rtl:translate-x-full\">\n          <SunIcon aria-hidden=\"true\" size={16} />\n        </span>\n      </div>\n      <Label className=\"sr-only\" htmlFor={id}>\n        Labeled switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-185.tsx",
    "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <div>\n      <div className=\"relative inline-grid h-9 grid-cols-[1fr_1fr] items-center font-medium text-sm\">\n        <Switch\n          checked={checked}\n          className=\"peer absolute inset-0 h-[inherit] w-auto rounded-md data-[state=unchecked]:bg-input/50 [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:rounded-sm [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full [&_span]:data-[state=checked]:rtl:-translate-x-full\"\n          id={id}\n          onCheckedChange={setChecked}\n        />\n        <span className=\"pointer-events-none relative ms-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full peer-data-[state=unchecked]:rtl:-translate-x-full\">\n          <span className=\"font-medium text-[10px] uppercase\">Off</span>\n        </span>\n        <span className=\"pointer-events-none relative me-0.5 flex items-center justify-center px-2 text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=unchecked]:invisible peer-data-[state=checked]:-translate-x-full peer-data-[state=checked]:text-background peer-data-[state=checked]:rtl:translate-x-full\">\n          <span className=\"font-medium text-[10px] uppercase\">On</span>\n        </span>\n      </div>\n      <Label className=\"sr-only\" htmlFor={id}>\n        Labeled switch\n      </Label>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-186.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n      <Switch\n        aria-describedby={`${id}-description`}\n        className=\"order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2 data-[state=checked]:[&_span]:rtl:-translate-x-2\"\n        id={id}\n      />\n      <div className=\"grid grow gap-2\">\n        <Label htmlFor={id}>\n          Label{\" \"}\n          <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n            (Sublabel)\n          </span>\n        </Label>\n        <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n          A short description goes here.\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-187.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n      <Switch\n        aria-describedby={`${id}-description`}\n        className=\"order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2 data-[state=checked]:[&_span]:rtl:-translate-x-2\"\n        id={id}\n      />\n      <div className=\"flex grow items-start gap-3\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"shrink-0\"\n          height={24}\n          viewBox=\"0 0 32 24\"\n          width={32}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect fill=\"#252525\" height=\"24\" rx=\"4\" width=\"32\" />\n          <path\n            d=\"M19.0537 6.49742H12.9282V17.5026H19.0537V6.49742Z\"\n            fill=\"#FF5A00\"\n          />\n          <path\n            d=\"M13.3359 12C13.3359 9.76408 14.3871 7.77961 16 6.49741C14.8129 5.56408 13.3155 5 11.6822 5C7.81295 5 4.68221 8.13074 4.68221 12C4.68221 15.8693 7.81295 19 11.6822 19C13.3155 19 14.8129 18.4359 16 17.5026C14.3848 16.2385 13.3359 14.2359 13.3359 12Z\"\n            fill=\"#EB001B\"\n          />\n          <path\n            d=\"M27.3178 12C27.3178 15.8693 24.1871 19 20.3178 19C18.6845 19 17.1871 18.4359 16 17.5026C17.6333 16.2181 18.6641 14.2359 18.6641 12C18.6641 9.76408 17.6129 7.77961 16 6.49741C17.1848 5.56408 18.6822 5 20.3155 5C24.1871 5 27.3178 8.15113 27.3178 12Z\"\n            fill=\"#F79E1B\"\n          />\n        </svg>\n        <div className=\"grid grow gap-2\">\n          <Label htmlFor={id}>\n            Label{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n            A short description goes here.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-188.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative flex w-full items-start gap-2 rounded-md border border-input p-4 shadow-xs outline-none has-data-[state=checked]:border-primary/50\">\n      <Switch\n        aria-describedby={`${id}-description`}\n        className=\"order-1 h-4 w-6 after:absolute after:inset-0 [&_span]:size-3 data-[state=checked]:[&_span]:translate-x-2 data-[state=checked]:[&_span]:rtl:-translate-x-2\"\n        id={id}\n      />\n      <div className=\"flex grow items-center gap-3\">\n        <svg\n          aria-hidden=\"true\"\n          className=\"shrink-0\"\n          height={32}\n          width={32}\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle cx=\"16\" cy=\"16\" fill=\"#121212\" r=\"16\" />\n          <g clipPath=\"url(#sb-a)\">\n            <path\n              d=\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\"\n              fill=\"url(#sb-b)\"\n            />\n            <path\n              d=\"M17.63 25.52c-.506.637-1.533.287-1.545-.526l-.178-11.903h8.003c1.45 0 2.259 1.674 1.357 2.81l-7.637 9.618Z\"\n              fill=\"url(#sb-c)\"\n              fillOpacity=\".2\"\n            />\n            <path\n              d=\"M14.375 6.367c.506-.638 1.532-.289 1.544.525l.078 11.903H8.094c-1.45 0-2.258-1.674-1.357-2.81l7.638-9.618Z\"\n              fill=\"#3ECF8E\"\n            />\n          </g>\n          <defs>\n            <linearGradient\n              gradientUnits=\"userSpaceOnUse\"\n              id=\"sb-b\"\n              x1=\"15.907\"\n              x2=\"23.02\"\n              y1=\"15.73\"\n              y2=\"18.713\"\n            >\n              <stop stopColor=\"#249361\" />\n              <stop offset=\"1\" stopColor=\"#3ECF8E\" />\n            </linearGradient>\n            <linearGradient\n              gradientUnits=\"userSpaceOnUse\"\n              id=\"sb-c\"\n              x1=\"12.753\"\n              x2=\"15.997\"\n              y1=\"11.412\"\n              y2=\"17.519\"\n            >\n              <stop />\n              <stop offset=\"1\" stopOpacity=\"0\" />\n            </linearGradient>\n            <clipPath id=\"sb-a\">\n              <path d=\"M6.354 6h19.292v20H6.354z\" fill=\"#fff\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <div className=\"grid grow gap-2\">\n          <Label htmlFor={id}>\n            Label{\" \"}\n            <span className=\"font-normal text-muted-foreground text-xs leading-[inherit]\">\n              (Sublabel)\n            </span>\n          </Label>\n          <p className=\"text-muted-foreground text-xs\" id={`${id}-description`}>\n            A short description goes here.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-189.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Simple select (native)</Label>\n      <SelectNative id={id}>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-19.tsx",
    "content": "import { SendIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with end inline button</Label>\n      <div className=\"relative\">\n        <Input className=\"pe-9\" id={id} placeholder=\"Email\" type=\"email\" />\n        <button\n          aria-label=\"Subscribe\"\n          className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n          type=\"button\"\n        >\n          <SendIcon aria-hidden=\"true\" size={16} />\n        </button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-190.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with placeholder (native)</Label>\n      <SelectNative defaultValue=\"\" id={id}>\n        <option disabled value=\"\">\n          Please select a value\n        </option>\n        <option value=\"1\">1 to 5</option>\n        <option value=\"2\">5 to 10</option>\n        <option value=\"3\">More than 10</option>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-191.tsx",
    "content": "import { ClockIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with icon (native)</Label>\n      <div className=\"group relative\">\n        <SelectNative className=\"ps-9\" id={id}>\n          <option value=\"1\">00:00 AM - 11:59 PM</option>\n          <option value=\"2\">01:00 AM - 12:59 PM</option>\n          <option value=\"3\">02:00 AM - 01:59 PM</option>\n          <option value=\"4\">03:00 AM - 02:59 PM</option>\n        </SelectNative>\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[select[disabled]]:opacity-50\">\n          <ClockIcon aria-hidden=\"true\" size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-192.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with helper text (native)</Label>\n      <SelectNative id={id}>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Tell us what&lsquo;s your favorite Select framework\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-193.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"[--ring:var(--color-indigo-300)] in-[.dark]:[--ring:var(--color-indigo-900)] *:not-first:mt-2\">\n      <Label htmlFor={id}>Select with colored border (native)</Label>\n      <SelectNative id={id}>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-194.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with error (native)</Label>\n      <SelectNative aria-invalid id={id}>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-destructive text-xs\"\n        role=\"alert\"\n      >\n        Selected option is invalid\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-195.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with gray background (native)</Label>\n      <SelectNative className=\"border-transparent bg-muted shadow-none\" id={id}>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-196.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Disabled select (native)</Label>\n      <SelectNative disabled id={id}>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-197.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>\n        Required select (native) <span className=\"text-destructive\">*</span>\n      </Label>\n      <SelectNative id={id}>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-198.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with auto-width (native)</Label>\n      <div className=\"w-fit\">\n        <SelectNative id={id}>\n          <option value=\"1\">React</option>\n          <option value=\"2\">Next.js</option>\n          <option value=\"3\">Astro</option>\n          <option value=\"4\">Gatsby</option>\n        </SelectNative>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-199.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with option groups (native)</Label>\n      <SelectNative id={id}>\n        <optgroup label=\"Frontend\">\n          <option value=\"1\">React</option>\n          <option value=\"2\">Vue</option>\n          <option value=\"3\">Angular</option>\n        </optgroup>\n        <optgroup label=\"Backend\">\n          <option value=\"4\">Node.js</option>\n          <option value=\"5\">Python</option>\n          <option value=\"6\">Java</option>\n        </optgroup>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-20.tsx",
    "content": "import { DownloadIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with end icon button</Label>\n      <div className=\"flex rounded-md shadow-xs\">\n        <Input\n          className=\"-me-px flex-1 rounded-e-none shadow-none focus-visible:z-10\"\n          id={id}\n          placeholder=\"Email\"\n          type=\"email\"\n        />\n        <button\n          aria-label=\"Subscribe\"\n          className=\"inline-flex w-9 items-center justify-center rounded-e-md border border-input bg-background text-muted-foreground/80 text-sm outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n          type=\"button\"\n        >\n          <DownloadIcon aria-hidden=\"true\" size={16} />\n        </button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-200.tsx",
    "content": "import { useId, useMemo } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n\n  const timezones = Intl.supportedValuesOf(\"timeZone\");\n\n  const formattedTimezones = useMemo(() => {\n    return timezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        return {\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \" \")}`,\n          numericOffset: Number.parseInt(\n            offset.replace(\"GMT\", \"\").replace(\"+\", \"\") || \"0\",\n            10,\n          ),\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, [timezones]);\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Timezone select (native)</Label>\n      <SelectNative defaultValue=\"Europe/London\" id={id}>\n        {formattedTimezones.map(({ value, label }) => (\n          <option key={value} value={value}>\n            {label}\n          </option>\n        ))}\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-201.tsx",
    "content": "import { useId } from \"react\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"group relative\">\n      <label\n        className=\"absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 font-medium text-foreground text-xs group-has-[select:disabled]:opacity-50\"\n        htmlFor={id}\n      >\n        Select with overlapping label (native)\n      </label>\n      <SelectNative defaultValue=\"\" id={id}>\n        <option disabled value=\"\">\n          Select framework\n        </option>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-202.tsx",
    "content": "import { useId } from \"react\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative rounded-md border border-input bg-background shadow-xs outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[select:is(:disabled)_*]:pointer-events-none has-[select:disabled]:cursor-not-allowed has-aria-invalid:border-destructive has-[select:disabled]:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\">\n      <label\n        className=\"block px-3 pt-2 font-medium text-foreground text-xs\"\n        htmlFor={id}\n      >\n        Select with inset label (native)\n      </label>\n      <SelectNative\n        className=\"border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0\"\n        defaultValue=\"\"\n        id={id}\n      >\n        <option disabled value=\"\">\n          Select framework\n        </option>\n        <option value=\"1\">React</option>\n        <option value=\"2\">Next.js</option>\n        <option value=\"3\">Astro</option>\n        <option value=\"4\">Gatsby</option>\n      </SelectNative>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-203.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Simple select with default value</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-204.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with placeholder</Label>\n      <Select>\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-205.tsx",
    "content": "import { ClockIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with icon</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger className=\"relative ps-9\" id={id}>\n          <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[select[disabled]]:opacity-50\">\n            <ClockIcon aria-hidden=\"true\" size={16} />\n          </div>\n          <SelectValue placeholder=\"Select time\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">00:00 AM - 11:59 PM</SelectItem>\n          <SelectItem value=\"2\">01:00 AM - 12:59 PM</SelectItem>\n          <SelectItem value=\"3\">02:00 AM - 01:59 PM</SelectItem>\n          <SelectItem value=\"4\">03:00 AM - 02:59 PM</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-206.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with helper text</Label>\n      <Select defaultValue=\"3\">\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Tell us what&lsquo;s your favorite Select framework\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-207.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"[--ring:var(--color-indigo-300)] in-[.dark]:[--ring:var(--color-indigo-900)] *:not-first:mt-2\">\n      <Label htmlFor={id}>Select with colored border and ring</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-208.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with error</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger aria-invalid id={id}>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-destructive text-xs\"\n        role=\"alert\"\n      >\n        Selected option is invalid\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-209.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with gray background</Label>\n      <Select defaultValue=\"2\">\n        <SelectTrigger\n          className=\"border-transparent bg-muted shadow-none\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-21.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with end button</Label>\n      <div className=\"flex rounded-md shadow-xs\">\n        <Input\n          className=\"-me-px flex-1 rounded-e-none shadow-none focus-visible:z-10\"\n          id={id}\n          placeholder=\"Email\"\n          type=\"email\"\n        />\n        <button\n          className=\"inline-flex items-center rounded-e-md border border-input bg-background px-3 font-medium text-foreground text-sm outline-none transition-[color,box-shadow] hover:bg-accent hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50\"\n          type=\"button\"\n        >\n          Send\n        </button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-210.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Disabled select</Label>\n      <Select defaultValue=\"1\" disabled>\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-211.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>\n        Required select <span className=\"text-destructive\">*</span>\n      </Label>\n      <Select defaultValue=\"4\" required>\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-212.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with auto-width</Label>\n      <Select defaultValue=\"1\">\n        {/* Adjust the min-width to fit the longest option */}\n        <SelectTrigger className=\"w-auto min-w-48 max-w-full\" id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-213.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with options groups</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Frontend</SelectLabel>\n            <SelectItem value=\"1\">React</SelectItem>\n            <SelectItem value=\"2\">Vue</SelectItem>\n            <SelectItem value=\"3\">Angular</SelectItem>\n          </SelectGroup>\n          <SelectGroup>\n            <SelectLabel>Backend</SelectLabel>\n            <SelectItem value=\"4\">Node.js</SelectItem>\n            <SelectItem value=\"5\">Python</SelectItem>\n            <SelectItem value=\"6\">Java</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-214.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with separator</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Frontend</SelectLabel>\n            <SelectItem value=\"1\">React</SelectItem>\n            <SelectItem value=\"2\">Vue</SelectItem>\n            <SelectItem value=\"3\">Angular</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Backend</SelectLabel>\n            <SelectItem value=\"4\">Node.js</SelectItem>\n            <SelectItem value=\"5\">Python</SelectItem>\n            <SelectItem value=\"6\">Java</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-215.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with disabled options</Label>\n      <Select defaultValue=\"2\">\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem disabled value=\"1\">\n            React\n          </SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem disabled value=\"3\">\n            Astro\n          </SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-216.tsx",
    "content": "import { useId } from \"react\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"group relative\">\n      <label\n        className=\"absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 font-medium text-foreground text-xs group-has-disabled:opacity-50\"\n        htmlFor={id}\n      >\n        Select with overlapping label\n      </label>\n      <Select>\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-217.tsx",
    "content": "import { useId } from \"react\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative rounded-md border border-input bg-background shadow-xs outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 has-[input:is(:disabled)]:*:pointer-events-none dark:has-aria-invalid:ring-destructive/40\">\n      <label\n        className=\"block px-3 pt-2 font-medium text-foreground text-xs\"\n        htmlFor={id}\n      >\n        Select with inset label\n      </label>\n      <Select>\n        <SelectTrigger\n          className=\"border-none bg-transparent shadow-none focus:ring-0 focus:ring-offset-0\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-218.tsx",
    "content": "import { useId, useMemo } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n\n  const timezones = Intl.supportedValuesOf(\"timeZone\");\n\n  const formattedTimezones = useMemo(() => {\n    return timezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        return {\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \" \")}`,\n          numericOffset: Number.parseInt(\n            offset.replace(\"GMT\", \"\").replace(\"+\", \"\") || \"0\",\n            10,\n          ),\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, [timezones]);\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Timezone select</Label>\n      <Select defaultValue=\"Europe/London\">\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select timezone\" />\n        </SelectTrigger>\n        <SelectContent>\n          {formattedTimezones.map(({ value, label }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-219.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with right indicator</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger id={id}>\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n          <SelectItem value=\"1\">React</SelectItem>\n          <SelectItem value=\"2\">Next.js</SelectItem>\n          <SelectItem value=\"3\">Astro</SelectItem>\n          <SelectItem value=\"4\">Gatsby</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-22.tsx",
    "content": "import { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with button</Label>\n      <div className=\"flex gap-2\">\n        <Input className=\"flex-1\" id={id} placeholder=\"Email\" type=\"email\" />\n        <Button variant=\"outline\">Send</Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-220.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nfunction StatusDot({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"currentColor\"\n      height=\"8\"\n      viewBox=\"0 0 8 8\"\n      width=\"8\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle cx=\"4\" cy=\"4\" r=\"4\" />\n    </svg>\n  );\n}\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Status select</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger\n          className=\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Select status\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n          <SelectItem value=\"1\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-emerald-600\" />\n              <span className=\"truncate\">Completed</span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-blue-500\" />\n              <span className=\"truncate\">In Progress</span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-amber-500\" />\n              <span className=\"truncate\">Pending</span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"4\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-gray-500\" />\n              <span className=\"truncate\">Cancelled</span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"5\">\n            <span className=\"flex items-center gap-2\">\n              <StatusDot className=\"text-red-500\" />\n              <span className=\"truncate\">Failed</span>\n            </span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-221.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with left text</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger id={id}>\n          <span>\n            Language: <SelectValue placeholder=\"Select a language\" />\n          </span>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem value=\"1\">Javascript</SelectItem>\n          <SelectItem value=\"2\">Bash</SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-222.tsx",
    "content": "import { RiGatsbyLine, RiNextjsLine, RiReactjsLine } from \"@remixicon/react\";\nimport { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with icon</Label>\n      <Select defaultValue=\"3\">\n        <SelectTrigger\n          className=\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:flex [&_*[role=option]>span]:gap-2\">\n          <SelectItem value=\"1\">\n            <RiReactjsLine aria-hidden=\"true\" size={16} />\n            <span className=\"truncate\">React</span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            <RiNextjsLine aria-hidden=\"true\" size={16} />\n            <span className=\"truncate\">Next.js</span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            <RiGatsbyLine aria-hidden=\"true\" size={16} />\n            <span className=\"truncate\">Gatsby</span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-223.tsx",
    "content": "import { RiGatsbyLine, RiNextjsLine, RiReactjsLine } from \"@remixicon/react\";\nimport { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with icon and right indicator</Label>\n      <Select defaultValue=\"2\">\n        <SelectTrigger\n          className=\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n          <SelectItem value=\"1\">\n            <RiReactjsLine aria-hidden=\"true\" size={16} />\n            <span className=\"truncate\">React</span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            <RiNextjsLine aria-hidden=\"true\" size={16} />\n            <span className=\"truncate\">Next.js</span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            <RiGatsbyLine aria-hidden=\"true\" size={16} />\n            <span className=\"truncate\">Gatsby</span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-224.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with description and right indicator</Label>\n      <Select defaultValue=\"2\">\n        <SelectTrigger className=\"**:data-desc:hidden\" id={id}>\n          <SelectValue placeholder=\"Choose a plan\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n          <SelectItem value=\"1\">\n            Standard Plan\n            <span\n              className=\"mt-1 block text-muted-foreground text-xs\"\n              data-desc\n            >\n              Ideal for individuals\n            </span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            Pro Plan\n            <span\n              className=\"mt-1 block text-muted-foreground text-xs\"\n              data-desc\n            >\n              For professional users\n            </span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            Enterprise Plan\n            <span\n              className=\"mt-1 block text-muted-foreground text-xs\"\n              data-desc\n            >\n              Built for large teams\n            </span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-225.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst countries = [\n  {\n    continent: \"America\",\n    items: [\n      { flag: \"🇺🇸\", label: \"United States\", value: \"1\" },\n      { flag: \"🇨🇦\", label: \"Canada\", value: \"2\" },\n      { flag: \"🇲🇽\", label: \"Mexico\", value: \"3\" },\n    ],\n  },\n  {\n    continent: \"Africa\",\n    items: [\n      { flag: \"🇿🇦\", label: \"South Africa\", value: \"4\" },\n      { flag: \"🇳🇬\", label: \"Nigeria\", value: \"5\" },\n      { flag: \"🇲🇦\", label: \"Morocco\", value: \"6\" },\n    ],\n  },\n  {\n    continent: \"Asia\",\n    items: [\n      { flag: \"🇨🇳\", label: \"China\", value: \"7\" },\n      { flag: \"🇯🇵\", label: \"Japan\", value: \"8\" },\n      { flag: \"🇮🇳\", label: \"India\", value: \"9\" },\n    ],\n  },\n  {\n    continent: \"Europe\",\n    items: [\n      { flag: \"🇬🇧\", label: \"United Kingdom\", value: \"10\" },\n      { flag: \"🇫🇷\", label: \"France\", value: \"11\" },\n      { flag: \"🇩🇪\", label: \"Germany\", value: \"12\" },\n    ],\n  },\n  {\n    continent: \"Oceania\",\n    items: [\n      { flag: \"🇦🇺\", label: \"Australia\", value: \"13\" },\n      { flag: \"🇳🇿\", label: \"New Zealand\", value: \"14\" },\n    ],\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with flag</Label>\n      <Select defaultValue=\"2\">\n        <SelectTrigger\n          className=\"[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n          {countries.map((continent) => (\n            <SelectGroup key={continent.continent}>\n              <SelectLabel className=\"ps-2\">{continent.continent}</SelectLabel>\n              {continent.items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  <span className=\"text-lg leading-none\">{item.flag}</span>{\" \"}\n                  <span className=\"truncate\">{item.label}</span>\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-226.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with avatar</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger\n          className=\"ps-2 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n          <SelectGroup>\n            <SelectLabel className=\"ps-2\">Impersonate user</SelectLabel>\n            <SelectItem value=\"1\">\n              <img\n                alt=\"Frank Allison\"\n                className=\"size-5 rounded\"\n                height={20}\n                src=\"/origin/avatar-20-01.jpg\"\n                width={20}\n              />\n              <span className=\"truncate\">Jenny Hamilton</span>\n            </SelectItem>\n            <SelectItem value=\"2\">\n              <img\n                alt=\"Xavier Guerra\"\n                className=\"size-5 rounded\"\n                height={20}\n                src=\"/origin/avatar-20-02.jpg\"\n                width={20}\n              />\n              <span className=\"truncate\">Paul Smith</span>\n            </SelectItem>\n            <SelectItem value=\"3\">\n              <img\n                alt=\"Anne Kelley\"\n                className=\"size-5 rounded\"\n                height={20}\n                src=\"/origin/avatar-20-03.jpg\"\n                width={20}\n              />\n              <span className=\"truncate\">Luna Wyen</span>\n            </SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-227.tsx",
    "content": "import { useId } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst Square = ({\n  className,\n  children,\n}: {\n  className?: string;\n  children: React.ReactNode;\n}) => (\n  <span\n    aria-hidden=\"true\"\n    className={cn(\n      \"flex size-5 items-center justify-center rounded bg-muted font-medium text-muted-foreground text-xs\",\n      className,\n    )}\n    data-square\n  >\n    {children}\n  </span>\n);\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with placeholder avatar</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger\n          className=\"ps-2 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_[data-square]]:shrink-0\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Select framework\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n          <SelectGroup>\n            <SelectLabel className=\"ps-2\">Impersonate user</SelectLabel>\n            <SelectItem value=\"1\">\n              <Square className=\"bg-indigo-400/20 text-indigo-500\">F</Square>\n              <span className=\"truncate\">Frank Morris</span>\n            </SelectItem>\n            <SelectItem value=\"2\">\n              <Square className=\"bg-purple-400/20 text-purple-500\">X</Square>\n              <span className=\"truncate\">Xavier Guerra</span>\n            </SelectItem>\n            <SelectItem value=\"3\">\n              <Square className=\"bg-rose-400/20 text-rose-500\">A</Square>\n              <span className=\"truncate\">Anne Kelley</span>\n            </SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-228.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with portrait</Label>\n      <Select defaultValue=\"1\">\n        <SelectTrigger\n          className=\"h-auto ps-2 text-left [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0\"\n          id={id}\n        >\n          <SelectValue placeholder=\"Choose a plan\" />\n        </SelectTrigger>\n        <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n          <SelectItem value=\"1\">\n            <span className=\"flex items-center gap-2\">\n              <img\n                alt=\"Jenny Hamilton\"\n                className=\"rounded-full\"\n                height={40}\n                src=\"/origin/avatar-40-01.jpg\"\n                width={40}\n              />\n              <span>\n                <span className=\"block font-medium\">Jenny Hamilton</span>\n                <span className=\"mt-0.5 block text-muted-foreground text-xs\">\n                  @jennycodes\n                </span>\n              </span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"2\">\n            <span className=\"flex items-center gap-2\">\n              <img\n                alt=\"Paul Smith\"\n                className=\"rounded-full\"\n                height={40}\n                src=\"/origin/avatar-40-02.jpg\"\n                width={40}\n              />\n              <span>\n                <span className=\"block font-medium\">Paul Smith</span>\n                <span className=\"mt-0.5 block text-muted-foreground text-xs\">\n                  @paulsmith\n                </span>\n              </span>\n            </span>\n          </SelectItem>\n          <SelectItem value=\"3\">\n            <span className=\"flex items-center gap-2\">\n              <img\n                alt=\"Luna Wyen\"\n                className=\"rounded-full\"\n                height={40}\n                src=\"/origin/avatar-40-03.jpg\"\n                width={40}\n              />\n              <span>\n                <span className=\"block font-medium\">Luna Wyen</span>\n                <span className=\"mt-0.5 block text-muted-foreground text-xs\">\n                  @wyen.luna\n                </span>\n              </span>\n            </span>\n          </SelectItem>\n        </SelectContent>\n      </Select>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-229.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst frameworks = [\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n  {\n    label: \"SvelteKit\",\n    value: \"sveltekit\",\n  },\n  {\n    label: \"Nuxt.js\",\n    value: \"nuxt.js\",\n  },\n  {\n    label: \"Remix\",\n    value: \"remix\",\n  },\n  {\n    label: \"Astro\",\n    value: \"astro\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Vue.js\",\n    value: \"vue\",\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Ember.js\",\n    value: \"ember\",\n  },\n  {\n    label: \"Gatsby\",\n    value: \"gatsby\",\n  },\n  {\n    label: \"Eleventy\",\n    value: \"eleventy\",\n  },\n  {\n    label: \"SolidJS\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Qwik\",\n    value: \"qwik\",\n  },\n  {\n    label: \"Alpine.js\",\n    value: \"alpine\",\n  },\n  {\n    label: \"Lit\",\n    value: \"lit\",\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [open, setOpen] = useState<boolean>(false);\n  const [value, setValue] = useState<string>(\"\");\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with search</Label>\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverTrigger asChild>\n          <Button\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\"\n            id={id}\n            role=\"combobox\"\n            variant=\"outline\"\n          >\n            <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n              {value\n                ? frameworks.find((framework) => framework.value === value)\n                    ?.label\n                : \"Select framework\"}\n            </span>\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 text-muted-foreground/80\"\n              size={16}\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          align=\"start\"\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search framework...\" />\n            <CommandList>\n              <CommandEmpty>No framework found.</CommandEmpty>\n              <CommandGroup>\n                {frameworks.map((framework) => (\n                  <CommandItem\n                    key={framework.value}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue);\n                      setOpen(false);\n                    }}\n                    value={framework.value}\n                  >\n                    {framework.label}\n                    {value === framework.value && (\n                      <CheckIcon className=\"ml-auto\" size={16} />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-23.tsx",
    "content": "\"use client\";\n\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Show/hide password input</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"pe-9\"\n          id={id}\n          placeholder=\"Password\"\n          type={isVisible ? \"text\" : \"password\"}\n        />\n        <button\n          aria-controls=\"password\"\n          aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n          aria-pressed={isVisible}\n          className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n          onClick={toggleVisibility}\n          type=\"button\"\n        >\n          {isVisible ? (\n            <EyeOffIcon aria-hidden=\"true\" size={16} />\n          ) : (\n            <EyeIcon aria-hidden=\"true\" size={16} />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-230.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, ChevronDownIcon, PlusIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/registry/default/ui/command\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst organizations = [\n  {\n    label: \"coss.com\",\n    value: \"coss\",\n  },\n  {\n    label: \"Cruip\",\n    value: \"cruip\",\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [open, setOpen] = useState<boolean>(false);\n  const [value, setValue] = useState<string>(\"coss\");\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Select with search and button</Label>\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverTrigger asChild>\n          <Button\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\"\n            id={id}\n            role=\"combobox\"\n            variant=\"outline\"\n          >\n            <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n              {value\n                ? organizations.find(\n                    (organization) => organization.value === value,\n                  )?.label\n                : \"Select organization\"}\n            </span>\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 text-muted-foreground/80\"\n              size={16}\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          align=\"start\"\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Find organization\" />\n            <CommandList>\n              <CommandEmpty>No organization found.</CommandEmpty>\n              <CommandGroup>\n                {organizations.map((organization) => (\n                  <CommandItem\n                    key={organization.value}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue);\n                      setOpen(false);\n                    }}\n                    value={organization.value}\n                  >\n                    {organization.label}\n                    {value === organization.value && (\n                      <CheckIcon className=\"ml-auto\" size={16} />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup>\n                <Button\n                  className=\"w-full justify-start font-normal\"\n                  variant=\"ghost\"\n                >\n                  <PlusIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-2 opacity-60\"\n                    size={16}\n                  />\n                  New organization\n                </Button>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-231.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Component() {\n  const id = useId();\n  const [open, setOpen] = useState<boolean>(false);\n  const [value, setValue] = useState<string>(\"Europe/London\");\n\n  const timezones = Intl.supportedValuesOf(\"timeZone\");\n\n  const formattedTimezones = useMemo(() => {\n    return timezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        return {\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \" \")}`,\n          numericOffset: Number.parseInt(\n            offset.replace(\"GMT\", \"\").replace(\"+\", \"\") || \"0\",\n            10,\n          ),\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, [timezones]);\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Timezone select with search</Label>\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverTrigger asChild>\n          <Button\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\"\n            id={id}\n            role=\"combobox\"\n            variant=\"outline\"\n          >\n            <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n              {value\n                ? formattedTimezones.find(\n                    (timezone) => timezone.value === value,\n                  )?.label\n                : \"Select timezone\"}\n            </span>\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 text-muted-foreground/80\"\n              size={16}\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          align=\"start\"\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n        >\n          <Command\n            filter={(value, search) => {\n              const normalizedValue = value.toLowerCase();\n              const normalizedSearch = search.toLowerCase().replace(/\\s+/g, \"\");\n              return normalizedValue.includes(normalizedSearch) ? 1 : 0;\n            }}\n          >\n            <CommandInput placeholder=\"Search timezone...\" />\n            <CommandList>\n              <CommandEmpty>No timezone found.</CommandEmpty>\n              <CommandGroup>\n                {formattedTimezones.map(({ value: itemValue, label }) => (\n                  <CommandItem\n                    key={itemValue}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue);\n                      setOpen(false);\n                    }}\n                    value={itemValue}\n                  >\n                    {label}\n                    {value === itemValue && (\n                      <CheckIcon className=\"ml-auto\" size={16} />\n                    )}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-232.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\";\nimport { Fragment, useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst countries = [\n  {\n    continent: \"America\",\n    items: [\n      { flag: \"🇺🇸\", value: \"United States\" },\n      { flag: \"🇨🇦\", value: \"Canada\" },\n      { flag: \"🇲🇽\", value: \"Mexico\" },\n    ],\n  },\n  {\n    continent: \"Africa\",\n    items: [\n      { flag: \"🇿🇦\", value: \"South Africa\" },\n      { flag: \"🇳🇬\", value: \"Nigeria\" },\n      { flag: \"🇲🇦\", value: \"Morocco\" },\n    ],\n  },\n  {\n    continent: \"Asia\",\n    items: [\n      { flag: \"🇨🇳\", value: \"China\" },\n      { flag: \"🇯🇵\", value: \"Japan\" },\n      { flag: \"🇮🇳\", value: \"India\" },\n    ],\n  },\n  {\n    continent: \"Europe\",\n    items: [\n      { flag: \"🇬🇧\", value: \"United Kingdom\" },\n      { flag: \"🇫🇷\", value: \"France\" },\n      { flag: \"🇩🇪\", value: \"Germany\" },\n    ],\n  },\n  {\n    continent: \"Oceania\",\n    items: [\n      { flag: \"🇦🇺\", value: \"Australia\" },\n      { flag: \"🇳🇿\", value: \"New Zealand\" },\n    ],\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [open, setOpen] = useState<boolean>(false);\n  const [value, setValue] = useState<string>(\"\");\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with flag and search</Label>\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverTrigger asChild>\n          <Button\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\"\n            id={id}\n            role=\"combobox\"\n            variant=\"outline\"\n          >\n            {value ? (\n              <span className=\"flex min-w-0 items-center gap-2\">\n                <span className=\"text-lg leading-none\">\n                  {\n                    countries\n                      .map((group) =>\n                        group.items.find((item) => item.value === value),\n                      )\n                      .filter(Boolean)[0]?.flag\n                  }\n                </span>\n                <span className=\"truncate\">{value}</span>\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground\">Select country</span>\n            )}\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 text-muted-foreground/80\"\n              size={16}\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          align=\"start\"\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandList>\n              <CommandEmpty>No country found.</CommandEmpty>\n              {countries.map((group) => (\n                <Fragment key={group.continent}>\n                  <CommandGroup heading={group.continent}>\n                    {group.items.map((country) => (\n                      <CommandItem\n                        key={country.value}\n                        onSelect={(currentValue) => {\n                          setValue(currentValue);\n                          setOpen(false);\n                        }}\n                        value={country.value}\n                      >\n                        <span className=\"text-lg leading-none\">\n                          {country.flag}\n                        </span>{\" \"}\n                        {country.value}\n                        {value === country.value && (\n                          <CheckIcon className=\"ml-auto\" size={16} />\n                        )}\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </Fragment>\n              ))}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-233.tsx",
    "content": "\"use client\";\n\nimport {\n  BlocksIcon,\n  BrainIcon,\n  ChevronDownIcon,\n  CpuIcon,\n  DatabaseIcon,\n  GlobeIcon,\n  LayoutIcon,\n  LineChartIcon,\n  NetworkIcon,\n  SearchIcon,\n  ServerIcon,\n} from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst items = [\n  {\n    icon: LineChartIcon,\n    label: \"Analytics Platform\",\n    number: 2451,\n    value: \"analytics platform\",\n  },\n  {\n    icon: BrainIcon,\n    label: \"AI Services\",\n    number: 1832,\n    value: \"ai services\",\n  },\n  {\n    icon: DatabaseIcon,\n    label: \"Database Systems\",\n    number: 1654,\n    value: \"database systems\",\n  },\n  {\n    icon: CpuIcon,\n    label: \"Compute Resources\",\n    number: 943,\n    value: \"compute resources\",\n  },\n  {\n    icon: NetworkIcon,\n    label: \"Network Services\",\n    number: 832,\n    value: \"network services\",\n  },\n  {\n    icon: GlobeIcon,\n    label: \"Web Services\",\n    number: 654,\n    value: \"web services\",\n  },\n  {\n    icon: SearchIcon,\n    label: \"Monitoring Tools\",\n    number: 432,\n    value: \"monitoring tools\",\n  },\n  {\n    icon: ServerIcon,\n    label: \"Server Management\",\n    number: 321,\n    value: \"server management\",\n  },\n  {\n    icon: BlocksIcon,\n    label: \"Infrastructure\",\n    number: 234,\n    value: \"infrastructure\",\n  },\n  {\n    icon: LayoutIcon,\n    label: \"Frontend Services\",\n    number: 123,\n    value: \"frontend services\",\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [open, setOpen] = useState<boolean>(false);\n  const [value, setValue] = useState<string>(\"\");\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Options with icon and number</Label>\n      <Popover onOpenChange={setOpen} open={open}>\n        <PopoverTrigger asChild>\n          <Button\n            aria-expanded={open}\n            className=\"w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\"\n            id={id}\n            role=\"combobox\"\n            variant=\"outline\"\n          >\n            {value ? (\n              <span className=\"flex min-w-0 items-center gap-2\">\n                {(() => {\n                  const selectedItem = items.find(\n                    (item) => item.value === value,\n                  );\n                  if (selectedItem) {\n                    const Icon = selectedItem.icon;\n                    return <Icon className=\"size-4 text-muted-foreground\" />;\n                  }\n                  return null;\n                })()}\n                <span className=\"truncate\">\n                  {items.find((item) => item.value === value)?.label}\n                </span>\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground\">\n                Select service category\n              </span>\n            )}\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 text-muted-foreground/80\"\n              size={16}\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          align=\"start\"\n          className=\"w-full min-w-[var(--radix-popper-anchor-width)] border-input p-0\"\n        >\n          <Command>\n            <CommandInput placeholder=\"Search services...\" />\n            <CommandList>\n              <CommandEmpty>No service found.</CommandEmpty>\n              <CommandGroup>\n                {items.map((item) => (\n                  <CommandItem\n                    className=\"flex items-center justify-between\"\n                    key={item.value}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue);\n                      setOpen(false);\n                    }}\n                    value={item.value}\n                  >\n                    <div className=\"flex items-center gap-2\">\n                      <item.icon className=\"size-4 text-muted-foreground\" />\n                      {item.label}\n                    </div>\n                    <span className=\"text-muted-foreground text-xs\">\n                      {item.number.toLocaleString()}\n                    </span>\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-234.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport MultipleSelector, {\n  type Option,\n} from \"@/registry/default/ui/multiselect\";\n\nconst frameworks: Option[] = [\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n  {\n    label: \"SvelteKit\",\n    value: \"sveltekit\",\n  },\n  {\n    disable: true,\n    label: \"Nuxt.js\",\n    value: \"nuxt.js\",\n  },\n  {\n    label: \"Remix\",\n    value: \"remix\",\n  },\n  {\n    label: \"Astro\",\n    value: \"astro\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Vue.js\",\n    value: \"vue\",\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Ember.js\",\n    value: \"ember\",\n  },\n  {\n    label: \"Gatsby\",\n    value: \"gatsby\",\n  },\n  {\n    disable: true,\n    label: \"Eleventy\",\n    value: \"eleventy\",\n  },\n  {\n    label: \"SolidJS\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Qwik\",\n    value: \"qwik\",\n  },\n  {\n    label: \"Alpine.js\",\n    value: \"alpine\",\n  },\n  {\n    label: \"Lit\",\n    value: \"lit\",\n  },\n];\n\nexport default function Component() {\n  const _id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Multiselect</Label>\n      <MultipleSelector\n        commandProps={{\n          label: \"Select frameworks\",\n        }}\n        defaultOptions={frameworks}\n        emptyIndicator={<p className=\"text-center text-sm\">No results found</p>}\n        hideClearAllButton\n        hidePlaceholderWhenSelected\n        placeholder=\"Select frameworks\"\n        value={frameworks.slice(0, 2)}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Inspired by{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://shadcnui-expansions.typeart.cc/docs/multiple-selector\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          shadcn/ui expansions\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-235.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport MultipleSelector, {\n  type Option,\n} from \"@/registry/default/ui/multiselect\";\n\nconst frameworks: Option[] = [\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n  {\n    label: \"SvelteKit\",\n    value: \"sveltekit\",\n  },\n  {\n    label: \"Nuxt.js\",\n    value: \"nuxt.js\",\n  },\n  {\n    label: \"Remix\",\n    value: \"remix\",\n  },\n  {\n    label: \"Astro\",\n    value: \"astro\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Vue.js\",\n    value: \"vue\",\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Ember.js\",\n    value: \"ember\",\n  },\n  {\n    label: \"Gatsby\",\n    value: \"gatsby\",\n  },\n  {\n    label: \"Eleventy\",\n    value: \"eleventy\",\n  },\n  {\n    label: \"SolidJS\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Qwik\",\n    value: \"qwik\",\n  },\n  {\n    label: \"Alpine.js\",\n    value: \"alpine\",\n  },\n  {\n    label: \"Lit\",\n    value: \"lit\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Multiselect with placeholder and clear</Label>\n      <MultipleSelector\n        commandProps={{\n          label: \"Select frameworks\",\n        }}\n        defaultOptions={frameworks}\n        emptyIndicator={<p className=\"text-center text-sm\">No results found</p>}\n        placeholder=\"Select frameworks\"\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Inspired by{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://shadcnui-expansions.typeart.cc/docs/multiple-selector\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          shadcn/ui expansions\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-236.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { SelectNative } from \"@/registry/default/ui/select-native\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Multiple select (native)</Label>\n      <div className=\"overflow-hidden rounded-md border border-input\">\n        <SelectNative className=\"rounded-none border-none\" id={id} multiple>\n          <option value=\"1\">React</option>\n          <option value=\"2\">Next.js</option>\n          <option value=\"3\">Astro</option>\n          <option value=\"4\">Gatsby</option>\n          <option value=\"5\">Vue</option>\n          <option value=\"6\">Angular</option>\n        </SelectNative>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-237.tsx",
    "content": "\"use client\";\n\nimport { ListBox, ListBoxItem } from \"react-aria-components\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Listbox with single option</Label>\n      <div className=\"overflow-hidden rounded-md border border-input\">\n        <ListBox\n          aria-label=\"Select framework\"\n          className=\"space-y-1 bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\"\n          defaultSelectedKeys={[\"svelte\"]}\n          selectionMode=\"single\"\n        >\n          <ListBoxItem\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n            id=\"react\"\n          >\n            React\n          </ListBoxItem>\n          <ListBoxItem\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n            id=\"vue\"\n          >\n            Vue\n          </ListBoxItem>\n          <ListBoxItem\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n            id=\"angular\"\n            isDisabled\n          >\n            Angular\n          </ListBoxItem>\n          <ListBoxItem\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n            id=\"svelte\"\n          >\n            Svelte\n          </ListBoxItem>\n        </ListBox>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/ListBox.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-238.tsx",
    "content": "\"use client\";\n\nimport { ListBox, ListBoxItem } from \"react-aria-components\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Listbox with multiple options</Label>\n      <div className=\"overflow-hidden rounded-md border border-input\">\n        <ListBox\n          aria-label=\"Select framework\"\n          className=\"max-h-72 min-h-20 space-y-1 overflow-auto bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\"\n          defaultSelectedKeys={[\"react\", \"vue\"]}\n          selectionMode=\"multiple\"\n        >\n          <ListBoxItem\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n            id=\"react\"\n          >\n            React\n          </ListBoxItem>\n          <ListBoxItem\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n            id=\"vue\"\n          >\n            Vue\n          </ListBoxItem>\n          <ListBoxItem\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n            id=\"angular\"\n          >\n            Angular\n          </ListBoxItem>\n          <ListBoxItem\n            className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n            id=\"svelte\"\n          >\n            Svelte\n          </ListBoxItem>\n        </ListBox>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/ListBox.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-239.tsx",
    "content": "\"use client\";\n\nimport {\n  Header,\n  ListBox,\n  ListBoxItem,\n  ListBoxSection,\n  Separator,\n} from \"react-aria-components\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label>Listbox with option groups</Label>\n      <div className=\"overflow-hidden rounded-md border border-input\">\n        <ListBox\n          aria-label=\"Select some foods\"\n          className=\"max-h-72 min-h-20 space-y-2 overflow-auto bg-background p-1 text-sm shadow-xs transition-[color,box-shadow]\"\n          defaultSelectedKeys={[\"lettuce\", \"tuna\"]}\n          selectionMode=\"multiple\"\n        >\n          <ListBoxSection className=\"space-y-1\">\n            <Header className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\">\n              Veggies\n            </Header>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"lettuce\"\n            >\n              Lettuce\n            </ListBoxItem>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"tomato\"\n            >\n              Tomato\n            </ListBoxItem>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"onion\"\n            >\n              Onion\n            </ListBoxItem>\n          </ListBoxSection>\n          <Separator className=\"-mx-1 my-2 h-px bg-border\" />\n          <ListBoxSection className=\"space-y-1\">\n            <Header className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\">\n              Protein\n            </Header>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"ham\"\n            >\n              Ham\n            </ListBoxItem>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"tuna\"\n            >\n              Tuna\n            </ListBoxItem>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"tofu\"\n            >\n              Tofu\n            </ListBoxItem>\n          </ListBoxSection>\n          <Separator className=\"-mx-1 my-2 h-px bg-border\" />\n          <ListBoxSection className=\"space-y-1\">\n            <Header className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\">\n              Condiments\n            </Header>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"mayo\"\n            >\n              Mayonaise\n            </ListBoxItem>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"mustard\"\n            >\n              Mustard\n            </ListBoxItem>\n            <ListBoxItem\n              className=\"relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-focus-visible:border-ring data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-disabled:opacity-50 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\"\n              id=\"ranch\"\n            >\n              Ranch\n            </ListBoxItem>\n          </ListBoxSection>\n        </ListBox>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/ListBox.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-24.tsx",
    "content": "\"use client\";\n\nimport { CircleXIcon } from \"lucide-react\";\nimport { useId, useRef, useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [inputValue, setInputValue] = useState(\"Click to clear\");\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleClearInput = () => {\n    setInputValue(\"\");\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with clear button</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"pe-9\"\n          id={id}\n          onChange={(e) => setInputValue(e.target.value)}\n          placeholder=\"Type something...\"\n          ref={inputRef}\n          type=\"text\"\n          value={inputValue}\n        />\n        {inputValue && (\n          <button\n            aria-label=\"Clear input\"\n            className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            onClick={handleClearInput}\n            type=\"button\"\n          >\n            <CircleXIcon aria-hidden=\"true\" size={16} />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-240.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Simple slider</Label>\n      <Slider aria-label=\"Simple slider\" defaultValue={[25]} />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-241.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Disabled slider</Label>\n      <Slider aria-label=\"Disabled slider\" defaultValue={[25]} disabled />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-242.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with square thumb</Label>\n      <Slider\n        aria-label=\"Slider with square thumb\"\n        className=\"[&>:last-child>span]:rounded\"\n        defaultValue={[25]}\n        max={100}\n        step={10}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-243.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with solid thumb</Label>\n      <Slider\n        aria-label=\"Slider with solid thumb\"\n        className=\"[&>:first-child>span]:opacity-70 [&>:last-child>span]:bg-primary\"\n        defaultValue={[25]}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-244.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with tiny thumb</Label>\n      <Slider\n        aria-label=\"Slider with tiny thumb\"\n        className=\"**:data-[slot=slider-thumb]:shadow-none [&>:last-child>span]:h-6 [&>:last-child>span]:w-2.5 [&>:last-child>span]:border-[3px] [&>:last-child>span]:border-background [&>:last-child>span]:bg-primary [&>:last-child>span]:ring-offset-0\"\n        defaultValue={[25]}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-245.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with reference labels</Label>\n      <div>\n        <Slider\n          aria-label=\"Slider with reference labels\"\n          defaultValue={[15]}\n          max={35}\n          min={5}\n        />\n        <span\n          aria-hidden=\"true\"\n          className=\"mt-4 flex w-full items-center justify-between gap-1 font-medium text-muted-foreground text-xs\"\n        >\n          <span>5 GB</span>\n          <span>20 GB</span>\n          <span>35 GB</span>\n        </span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-246.tsx",
    "content": "import { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const max = 12;\n  const skipInterval = 2; // Set to 1 to allow no text skipping\n  const ticks = [...Array(max + 1)].map((_, i) => i);\n\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with ticks</Label>\n      <div>\n        <Slider aria-label=\"Slider with ticks\" defaultValue={[5]} max={max} />\n        <span\n          aria-hidden=\"true\"\n          className=\"mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs\"\n        >\n          {ticks.map((_, i) => (\n            <span\n              className=\"flex w-0 flex-col items-center justify-center gap-2\"\n              key={String(i)}\n            >\n              <span\n                className={cn(\n                  \"h-1 w-px bg-muted-foreground/70\",\n                  i % skipInterval !== 0 && \"h-0.5\",\n                )}\n              />\n              <span className={cn(i % skipInterval !== 0 && \"opacity-0\")}>\n                {i}\n              </span>\n            </span>\n          ))}\n        </span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-247.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const [value, setValue] = useState([25]);\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\">Slider with output</Label>\n        <output className=\"font-medium text-sm tabular-nums\">{value[0]}</output>\n      </div>\n      <Slider\n        aria-label=\"Slider with output\"\n        onValueChange={setValue}\n        value={value}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-248.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with labels</Label>\n      <div>\n        <span\n          aria-hidden=\"true\"\n          className=\"mb-3 flex w-full items-center justify-between gap-2 font-medium text-muted-foreground text-xs\"\n        >\n          <span>Low</span>\n          <span>High</span>\n        </span>\n        <Slider aria-label=\"Slider with labels\" defaultValue={[50]} step={10} />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-249.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with labels and tooltip</Label>\n      <div>\n        <span\n          aria-hidden=\"true\"\n          className=\"mb-3 flex w-full items-center justify-between gap-2 font-medium text-muted-foreground text-xs\"\n        >\n          <span>Low</span>\n          <span>High</span>\n        </span>\n        <Slider\n          aria-label=\"Slider with labels and tooltip\"\n          defaultValue={[50]}\n          showTooltip={true}\n          step={10}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-25.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Search input with &lt;kbd&gt;</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"pe-11\"\n          id={id}\n          placeholder=\"Search...\"\n          type=\"search\"\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-2 text-muted-foreground\">\n          <kbd className=\"inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n            ⌘K\n          </kbd>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-250.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Dual range slider</Label>\n      <Slider\n        aria-label=\"Dual range slider\"\n        defaultValue={[25, 75]}\n        step={10}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-251.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const [value, setValue] = useState([25, 75]);\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\">Dual range slider with output</Label>\n        <output className=\"font-medium text-sm tabular-nums\">\n          {value[0]} - {value[1]}\n        </output>\n      </div>\n      <Slider\n        aria-label=\"Dual range slider with output\"\n        onValueChange={setValue}\n        value={value}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-252.tsx",
    "content": "\"use client\";\n\nimport { Volume2Icon, VolumeXIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const [value, setValue] = useState([25]);\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\">Volume</Label>\n        <output className=\"font-medium text-sm tabular-nums\">{value[0]}</output>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <VolumeXIcon\n          aria-hidden=\"true\"\n          className=\"shrink-0 opacity-60\"\n          size={16}\n        />\n        <Slider\n          aria-label=\"Volume slider\"\n          onValueChange={setValue}\n          value={value}\n        />\n        <Volume2Icon\n          aria-hidden=\"true\"\n          className=\"shrink-0 opacity-60\"\n          size={16}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-253.tsx",
    "content": "\"use client\";\n\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Slider with multiple thumbs</Label>\n      <Slider\n        aria-label=\"Slider with multiple thumbs\"\n        defaultValue={[25, 50, 100]}\n        showTooltip\n        tooltipContent={(value) => `${value}%`}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-254.tsx",
    "content": "\"use client\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\nimport { useSliderWithInput } from \"@/registry/default/hooks/use-slider-with-input\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  const minValue = 0;\n  const maxValue = 2;\n  const initialValue = [1.25];\n  const defaultValue = [1];\n\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n    resetToDefault,\n    showReset,\n  } = useSliderWithInput({ defaultValue, initialValue, maxValue, minValue });\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label>Temperature</Label>\n        <div className=\"flex items-center gap-1\">\n          <TooltipProvider delayDuration={0}>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button\n                  aria-label=\"Reset\"\n                  className={cn(\n                    \"size-7 transition-opacity\",\n                    showReset ? \"opacity-100\" : \"opacity-0\",\n                  )}\n                  onClick={resetToDefault}\n                  size=\"icon\"\n                  variant=\"ghost\"\n                >\n                  <RotateCcwIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent className=\"px-2 py-1 text-xs\">\n                Reset to default\n              </TooltipContent>\n            </Tooltip>\n          </TooltipProvider>\n          <Input\n            aria-label=\"Enter value\"\n            className=\"h-7 w-12 px-2 py-0\"\n            inputMode=\"decimal\"\n            onBlur={() => validateAndUpdateValue(inputValues[0] ?? \"\", 0)}\n            onChange={(e) => handleInputChange(e, 0)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\") {\n                validateAndUpdateValue(inputValues[0] ?? \"\", 0);\n              }\n            }}\n            type=\"text\"\n            value={inputValues[0]}\n          />\n        </div>\n      </div>\n      <div className=\"flex items-center gap-4\">\n        <Slider\n          aria-label=\"Temperature\"\n          className=\"grow\"\n          max={maxValue}\n          min={minValue}\n          onValueChange={handleSliderChange}\n          step={0.01}\n          value={sliderValue}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-255.tsx",
    "content": "\"use client\";\n\nimport { useSliderWithInput } from \"@/registry/default/hooks/use-slider-with-input\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const minValue = 0;\n  const maxValue = 100;\n  const initialValue = [25];\n\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n  } = useSliderWithInput({ initialValue, maxValue, minValue });\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label>Slider with input</Label>\n      <div className=\"flex items-center gap-4\">\n        <Slider\n          aria-label=\"Slider with input\"\n          className=\"grow\"\n          max={maxValue}\n          min={minValue}\n          onValueChange={handleSliderChange}\n          value={sliderValue}\n        />\n        <Input\n          aria-label=\"Enter value\"\n          className=\"h-8 w-12 px-2 py-1\"\n          inputMode=\"decimal\"\n          onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\n          onChange={(e) => handleInputChange(e, 0)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              validateAndUpdateValue(inputValues[0], 0);\n            }\n          }}\n          type=\"text\"\n          value={inputValues[0]}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-256.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const [value, setValue] = useState([3]);\n\n  const labels = [\"Awful\", \"Poor\", \"Okay\", \"Good\", \"Amazing\"];\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\">Rate your experience</Label>\n        <span className=\"font-medium text-sm\">{labels[value[0] - 1]}</span>\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <span className=\"text-2xl\">😡</span>\n        <Slider\n          aria-label=\"Rate your experience\"\n          max={5}\n          min={1}\n          onValueChange={setValue}\n          value={value}\n        />\n        <span className=\"text-2xl\">😍</span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-257.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const [value, setValue] = useState([3]);\n\n  const emojis = [\"😡\", \"🙁\", \"😐\", \"🙂\", \"😍\"];\n  const labels = [\"Awful\", \"Poor\", \"Okay\", \"Good\", \"Amazing\"];\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label>Rate your experience</Label>\n      <div className=\"flex items-center gap-2\">\n        <Slider\n          aria-label=\"Rate your experience\"\n          max={5}\n          min={1}\n          onValueChange={setValue}\n          showTooltip\n          tooltipContent={(value) => labels[value - 1]}\n          value={value}\n        />\n        <span className=\"text-2xl\">{emojis[value[0] - 1]}</span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-258.tsx",
    "content": "\"use client\";\n\nimport { useSliderWithInput } from \"@/registry/default/hooks/use-slider-with-input\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const minValue = 0;\n  const maxValue = 200;\n  const initialValue = [50, 150];\n\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n  } = useSliderWithInput({ initialValue, maxValue, minValue });\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label>Dual range slider with input</Label>\n      <div className=\"flex items-center gap-4\">\n        <Input\n          aria-label=\"Enter minimum value\"\n          className=\"h-8 w-12 px-2 py-1\"\n          inputMode=\"decimal\"\n          onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\n          onChange={(e) => handleInputChange(e, 0)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              validateAndUpdateValue(inputValues[0], 0);\n            }\n          }}\n          type=\"text\"\n          value={inputValues[0]}\n        />\n        <Slider\n          aria-label=\"Dual range slider with input\"\n          className=\"grow\"\n          max={maxValue}\n          min={minValue}\n          onValueChange={handleSliderChange}\n          value={sliderValue}\n        />\n        <Input\n          aria-label=\"Enter maximum value\"\n          className=\"h-8 w-12 px-2 py-1\"\n          inputMode=\"decimal\"\n          onBlur={() => validateAndUpdateValue(inputValues[1], 1)}\n          onChange={(e) => handleInputChange(e, 1)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              validateAndUpdateValue(inputValues[1], 1);\n            }\n          }}\n          type=\"text\"\n          value={inputValues[1]}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-259.tsx",
    "content": "\"use client\";\n\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const minValue = 0;\n  const maxValue = 200;\n  const steps = 5;\n  const [value, setValue] = useState([100]);\n\n  const decreaseValue = () =>\n    setValue((prev) => [Math.max(minValue, prev[0] - steps)]);\n  const increaseValue = () =>\n    setValue((prev) => [Math.min(maxValue, prev[0] + steps)]);\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label className=\"tabular-nums\">{value[0]} credits/mo</Label>\n      <div className=\"flex items-center gap-4\">\n        <div>\n          <Button\n            aria-label=\"Decrease value\"\n            className=\"size-8\"\n            disabled={value[0] === 0}\n            onClick={decreaseValue}\n            size=\"icon\"\n            variant=\"outline\"\n          >\n            <MinusIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n        <Slider\n          aria-label=\"Dual range slider with buttons\"\n          className=\"grow\"\n          max={maxValue}\n          min={minValue}\n          onValueChange={setValue}\n          step={steps}\n          value={value}\n        />\n        <div>\n          <Button\n            aria-label=\"Increase value\"\n            className=\"size-8\"\n            disabled={value[0] === 200}\n            onClick={increaseValue}\n            size=\"icon\"\n            variant=\"outline\"\n          >\n            <PlusIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-26.tsx",
    "content": "import { ArrowRightIcon, SearchIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Search input with icon and button</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9 pe-9\"\n          id={id}\n          placeholder=\"Search...\"\n          type=\"search\"\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n        <button\n          aria-label=\"Submit search\"\n          className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n          type=\"submit\"\n        >\n          <ArrowRightIcon aria-hidden=\"true\" size={16} />\n        </button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-260.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const min_price = 5;\n  const max_price = 1240;\n  const [value, setValue] = useState([min_price, max_price]);\n\n  const formatPrice = (price: number) => {\n    return price === max_price\n      ? `$${price.toLocaleString()}+`\n      : `$${price.toLocaleString()}`;\n  };\n\n  return (\n    <div className=\"*:not-first:mt-3\">\n      <Label className=\"tabular-nums\">\n        From {formatPrice(value[0])} to {formatPrice(value[1])}\n      </Label>\n      <div className=\"flex items-center gap-4\">\n        <Slider\n          aria-label=\"Price range slider\"\n          max={max_price}\n          min={min_price}\n          onValueChange={setValue}\n          value={value}\n        />\n        <Button variant=\"outline\">Go</Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-261.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Vertical slider</Label>\n      <div className=\"flex h-40 justify-center\">\n        <Slider\n          aria-label=\"Vertical slider\"\n          defaultValue={[5]}\n          max={10}\n          orientation=\"vertical\"\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-262.tsx",
    "content": "\"use client\";\n\nimport { useSliderWithInput } from \"@/registry/default/hooks/use-slider-with-input\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const minValue = 0;\n  const maxValue = 100;\n  const initialValue = [25];\n\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n  } = useSliderWithInput({ initialValue, maxValue, minValue });\n\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Vertical slider with input</Label>\n      <div className=\"flex h-40 flex-col items-center justify-center gap-4\">\n        <Slider\n          aria-label=\"Slider with input\"\n          className=\"data-[orientation=vertical]:min-h-0\"\n          max={maxValue}\n          min={minValue}\n          onValueChange={handleSliderChange}\n          orientation=\"vertical\"\n          value={sliderValue}\n        />\n        <Input\n          aria-label=\"Enter value\"\n          className=\"h-8 w-12 px-2 py-1\"\n          inputMode=\"decimal\"\n          onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\n          onChange={(e) => handleInputChange(e, 0)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              validateAndUpdateValue(inputValues[0], 0);\n            }\n          }}\n          type=\"text\"\n          value={inputValues[0]}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-263.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Vertical dual range slider and tooltip</Label>\n      <div className=\"flex h-40 justify-center\">\n        <Slider\n          aria-label=\"Vertical slider\"\n          defaultValue={[2, 7]}\n          max={10}\n          orientation=\"vertical\"\n          showTooltip\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-264.tsx",
    "content": "\"use client\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\nimport React, { useRef } from \"react\";\nimport { useSliderWithInput } from \"@/registry/default/hooks/use-slider-with-input\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  // Create refs to store reset functions\n  const resetFunctionsRef = useRef<(() => void)[]>([]);\n\n  // Function to reset all sliders to default\n  const resetAll = () => {\n    for (const resetFn of resetFunctionsRef.current) {\n      resetFn();\n    }\n  };\n\n  // Function to register reset functions\n  const registerResetFunction = (resetFn: () => void, index: number) => {\n    resetFunctionsRef.current[index] = resetFn;\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm\">\n        Object position\n      </legend>\n      <div className=\"space-y-2\">\n        <SliderWithInput\n          defaultValue={[0]}\n          initialValue={[-2]}\n          label=\"X\"\n          maxValue={10}\n          minValue={-10}\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 0)}\n        />\n        <SliderWithInput\n          defaultValue={[0]}\n          initialValue={[4]}\n          label=\"Y\"\n          maxValue={10}\n          minValue={-10}\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 1)}\n        />\n        <SliderWithInput\n          defaultValue={[0]}\n          initialValue={[2]}\n          label=\"Z\"\n          maxValue={10}\n          minValue={-10}\n          onRegisterReset={(resetFn) => registerResetFunction(resetFn, 2)}\n        />\n      </div>\n      <Button className=\"w-full\" onClick={resetAll} variant=\"outline\">\n        <RotateCcwIcon\n          aria-hidden=\"true\"\n          className=\"-ms-1 opacity-60\"\n          size={16}\n        />\n        Reset\n      </Button>\n    </div>\n  );\n}\n\nfunction SliderWithInput({\n  minValue,\n  maxValue,\n  initialValue,\n  defaultValue,\n  label,\n  onRegisterReset,\n}: {\n  minValue: number;\n  maxValue: number;\n  initialValue: number[];\n  defaultValue: number[];\n  label: string;\n  onRegisterReset: (resetFn: () => void) => void;\n}) {\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n    resetToDefault,\n  } = useSliderWithInput({ defaultValue, initialValue, maxValue, minValue });\n\n  // Register the reset function when the component mounts\n  React.useEffect(() => {\n    onRegisterReset(resetToDefault);\n  }, [onRegisterReset, resetToDefault]);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Label className=\"text-muted-foreground text-xs\">{label}</Label>\n      <Slider\n        aria-label={label}\n        className=\"grow [&>:last-child>span]:rounded\"\n        max={maxValue}\n        min={minValue}\n        onValueChange={handleSliderChange}\n        value={sliderValue}\n      />\n      <Input\n        aria-label=\"Enter value\"\n        className=\"h-8 w-12 px-2 py-1\"\n        inputMode=\"decimal\"\n        onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\n        onChange={(e) => handleInputChange(e, 0)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            validateAndUpdateValue(inputValues[0], 0);\n          }\n        }}\n        type=\"text\"\n        value={inputValues[0]}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-265.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { useSliderWithInput } from \"@/registry/default/hooks/use-slider-with-input\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst items = [\n  { id: 1, price: 80 },\n  { id: 2, price: 95 },\n  { id: 3, price: 110 },\n  { id: 4, price: 125 },\n  { id: 5, price: 130 },\n  { id: 6, price: 140 },\n  { id: 7, price: 145 },\n  { id: 8, price: 150 },\n  { id: 9, price: 155 },\n  { id: 10, price: 165 },\n  { id: 11, price: 175 },\n  { id: 12, price: 185 },\n  { id: 13, price: 195 },\n  { id: 14, price: 205 },\n  { id: 15, price: 215 },\n  { id: 16, price: 225 },\n  { id: 17, price: 235 },\n  { id: 18, price: 245 },\n  { id: 19, price: 255 },\n  { id: 20, price: 260 },\n  { id: 21, price: 265 },\n  { id: 22, price: 270 },\n  { id: 23, price: 275 },\n  { id: 24, price: 280 },\n  { id: 25, price: 285 },\n  { id: 26, price: 290 },\n  { id: 27, price: 290 },\n  { id: 28, price: 295 },\n  { id: 29, price: 295 },\n  { id: 30, price: 295 },\n  { id: 31, price: 298 },\n  { id: 32, price: 299 },\n  { id: 33, price: 300 },\n  { id: 34, price: 305 },\n  { id: 35, price: 310 },\n  { id: 36, price: 315 },\n  { id: 37, price: 320 },\n  { id: 38, price: 325 },\n  { id: 39, price: 330 },\n  { id: 40, price: 335 },\n  { id: 41, price: 340 },\n  { id: 42, price: 345 },\n  { id: 43, price: 350 },\n  { id: 44, price: 355 },\n  { id: 45, price: 360 },\n  { id: 46, price: 365 },\n  { id: 47, price: 365 },\n  { id: 48, price: 375 },\n  { id: 49, price: 380 },\n  { id: 50, price: 385 },\n  { id: 51, price: 390 },\n  { id: 52, price: 395 },\n  { id: 53, price: 400 },\n  { id: 54, price: 405 },\n  { id: 55, price: 410 },\n  { id: 56, price: 415 },\n  { id: 57, price: 420 },\n  { id: 58, price: 425 },\n  { id: 59, price: 430 },\n  { id: 60, price: 435 },\n  { id: 61, price: 440 },\n  { id: 62, price: 445 },\n  { id: 63, price: 450 },\n  { id: 64, price: 455 },\n  { id: 65, price: 460 },\n  { id: 66, price: 465 },\n  { id: 67, price: 470 },\n  { id: 68, price: 475 },\n  { id: 69, price: 480 },\n  { id: 70, price: 485 },\n  { id: 71, price: 490 },\n  { id: 72, price: 495 },\n  { id: 73, price: 495 },\n  { id: 74, price: 498 },\n  { id: 75, price: 499 },\n  { id: 76, price: 500 },\n  { id: 77, price: 500 },\n  { id: 78, price: 500 },\n  { id: 79, price: 515 },\n  { id: 80, price: 530 },\n  { id: 81, price: 545 },\n  { id: 82, price: 560 },\n  { id: 83, price: 575 },\n  { id: 84, price: 590 },\n  { id: 85, price: 605 },\n  { id: 86, price: 620 },\n  { id: 87, price: 635 },\n  { id: 88, price: 650 },\n  { id: 89, price: 655 },\n  { id: 90, price: 660 },\n  { id: 91, price: 665 },\n  { id: 92, price: 670 },\n  { id: 93, price: 675 },\n  { id: 94, price: 680 },\n  { id: 95, price: 685 },\n  { id: 96, price: 690 },\n  { id: 97, price: 695 },\n  { id: 98, price: 700 },\n  { id: 99, price: 700 },\n  { id: 100, price: 700 },\n  { id: 101, price: 700 },\n  { id: 102, price: 700 },\n  { id: 103, price: 700 },\n  { id: 104, price: 725 },\n  { id: 105, price: 750 },\n  { id: 106, price: 775 },\n  { id: 107, price: 800 },\n  { id: 108, price: 815 },\n  { id: 109, price: 830 },\n  { id: 110, price: 845 },\n  { id: 111, price: 845 },\n  { id: 112, price: 845 },\n  { id: 113, price: 870 },\n  { id: 114, price: 875 },\n  { id: 115, price: 880 },\n  { id: 116, price: 885 },\n  { id: 117, price: 890 },\n  { id: 118, price: 895 },\n  { id: 119, price: 898 },\n  { id: 120, price: 900 },\n];\n\nexport default function Component() {\n  const id = useId();\n\n  // Define the number of ticks\n  const tick_count = 40;\n  // Find the min and max values across all items\n  const minValue = Math.min(...items.map((item) => item.price));\n  const maxValue = Math.max(...items.map((item) => item.price));\n\n  const {\n    sliderValue,\n    inputValues,\n    validateAndUpdateValue,\n    handleInputChange,\n    handleSliderChange,\n  } = useSliderWithInput({ initialValue: [200, 780], maxValue, minValue }); // set initialValue: [minValue, maxValue] to show all items by default\n\n  // Calculate the price step based on the min and max prices\n  const priceStep = (maxValue - minValue) / tick_count;\n\n  // Calculate item counts for each price range\n  const itemCounts = Array(tick_count)\n    .fill(0)\n    .map((_, tick) => {\n      const rangeMin = minValue + tick * priceStep;\n      const rangeMax = minValue + (tick + 1) * priceStep;\n      return items.filter(\n        (item) => item.price >= rangeMin && item.price < rangeMax,\n      ).length;\n    });\n\n  // Find maximum count for scaling\n  const maxCount = Math.max(...itemCounts);\n\n  const handleSliderValueChange = (values: number[]) => {\n    handleSliderChange(values);\n  };\n\n  // Function to count items in the selected range\n  const countItemsInRange = (min: number, max: number) => {\n    return items.filter((item) => item.price >= min && item.price <= max)\n      .length;\n  };\n\n  const isBarInSelectedRange = (\n    index: number,\n    minValue: number,\n    priceStep: number,\n    sliderValue: number[],\n  ) => {\n    const rangeMin = minValue + index * priceStep;\n    const rangeMax = minValue + (index + 1) * priceStep;\n    return (\n      countItemsInRange(sliderValue[0], sliderValue[1]) > 0 &&\n      rangeMin <= sliderValue[1] &&\n      rangeMax >= sliderValue[0]\n    );\n  };\n\n  return (\n    <div className=\"*:not-first:mt-4\">\n      <Label>Price slider</Label>\n      <div>\n        {/* Histogram bars */}\n        <div aria-hidden=\"true\" className=\"flex h-12 w-full items-end px-3\">\n          {itemCounts.map((count, i) => (\n            <div\n              className=\"flex flex-1 justify-center\"\n              key={String(i)}\n              style={{\n                height: `${(count / maxCount) * 100}%`,\n              }}\n            >\n              <span\n                className=\"size-full bg-primary/20\"\n                data-selected={isBarInSelectedRange(\n                  i,\n                  minValue,\n                  priceStep,\n                  sliderValue,\n                )}\n              />\n            </div>\n          ))}\n        </div>\n        <Slider\n          aria-label=\"Price range\"\n          max={maxValue}\n          min={minValue}\n          onValueChange={handleSliderValueChange}\n          value={sliderValue}\n        />\n      </div>\n\n      {/* Inputs */}\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"*:not-first:mt-1\">\n          <Label htmlFor={`${id}-min`}>Min price</Label>\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Enter minimum price\"\n              className=\"peer w-full ps-6\"\n              id={`${id}-min`}\n              inputMode=\"decimal\"\n              onBlur={() => validateAndUpdateValue(inputValues[0], 0)}\n              onChange={(e) => handleInputChange(e, 0)}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\") {\n                  validateAndUpdateValue(inputValues[0], 0);\n                }\n              }}\n              type=\"text\"\n              value={inputValues[0]}\n            />\n            <span className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm peer-disabled:opacity-50\">\n              $\n            </span>\n          </div>\n        </div>\n        <div className=\"*:not-first:mt-1\">\n          <Label htmlFor={`${id}-max`}>Max price</Label>\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Enter maximum price\"\n              className=\"peer w-full ps-6\"\n              id={`${id}-max`}\n              inputMode=\"decimal\"\n              onBlur={() => validateAndUpdateValue(inputValues[1], 1)}\n              onChange={(e) => handleInputChange(e, 1)}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\") {\n                  validateAndUpdateValue(inputValues[1], 1);\n                }\n              }}\n              type=\"text\"\n              value={inputValues[1]}\n            />\n            <span className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground text-sm peer-disabled:opacity-50\">\n              $\n            </span>\n          </div>\n        </div>\n      </div>\n\n      {/* Button */}\n      <Button className=\"w-full\" variant=\"outline\">\n        Show {countItemsInRange(sliderValue[0], sliderValue[1])} items\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-266.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <legend className=\"font-medium text-foreground text-sm\">Equalizer</legend>\n      <div className=\"flex h-48 justify-center gap-8\">\n        <div className=\"flex flex-col items-center gap-2\">\n          <Slider\n            aria-label=\"60 Hz\"\n            className=\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\"\n            defaultValue={[2]}\n            max={5}\n            min={-5}\n            orientation=\"vertical\"\n            showTooltip\n          />\n          <Label className=\"flex w-0 justify-center text-muted-foreground text-xs\">\n            60\n          </Label>\n        </div>\n        <div className=\"flex flex-col items-center gap-2\">\n          <Slider\n            aria-label=\"250 Hz\"\n            className=\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\"\n            defaultValue={[1]}\n            max={5}\n            min={-5}\n            orientation=\"vertical\"\n            showTooltip\n          />\n          <Label className=\"flex w-0 justify-center text-muted-foreground text-xs\">\n            250\n          </Label>\n        </div>\n        <div className=\"flex flex-col items-center gap-2\">\n          <Slider\n            aria-label=\"1k\"\n            className=\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\"\n            defaultValue={[-1]}\n            max={5}\n            min={-5}\n            orientation=\"vertical\"\n            showTooltip\n          />\n          <Label className=\"flex w-0 justify-center text-muted-foreground text-xs\">\n            1k\n          </Label>\n        </div>\n        <div className=\"flex flex-col items-center gap-2\">\n          <Slider\n            aria-label=\"4k\"\n            className=\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\"\n            defaultValue={[-3]}\n            max={5}\n            min={-5}\n            orientation=\"vertical\"\n            showTooltip\n          />\n          <Label className=\"flex w-0 justify-center text-muted-foreground text-xs\">\n            4k\n          </Label>\n        </div>\n        <div className=\"flex flex-col items-center gap-2\">\n          <Slider\n            aria-label=\"16k\"\n            className=\"[&>:last-child>span]:h-6 [&>:last-child>span]:w-4 [&>:last-child>span]:rounded\"\n            defaultValue={[2]}\n            max={5}\n            min={-5}\n            orientation=\"vertical\"\n            showTooltip\n          />\n          <Label className=\"flex w-0 justify-center text-muted-foreground text-xs\">\n            16K\n          </Label>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-267.tsx",
    "content": "import { TriangleAlert } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border px-4 py-3\">\n      <p className=\"text-sm\">\n        <TriangleAlert\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex text-amber-500\"\n          size={16}\n        />\n        Some information is missing!\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-268.tsx",
    "content": "import { TriangleAlert } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-amber-500/50 px-4 py-3 text-amber-600\">\n      <p className=\"text-sm\">\n        <TriangleAlert\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex opacity-60\"\n          size={16}\n        />\n        Some information is missing!\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-269.tsx",
    "content": "import { CircleAlert } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border px-4 py-3\">\n      <p className=\"text-sm\">\n        <CircleAlert\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex text-red-500\"\n          size={16}\n        />\n        An error occurred!\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-27.tsx",
    "content": "\"use client\";\n\nimport { LoaderCircleIcon, MicIcon, SearchIcon } from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [inputValue, setInputValue] = useState(\"\");\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (inputValue) {\n      setIsLoading(true);\n      const timer = setTimeout(() => {\n        setIsLoading(false);\n      }, 500);\n      return () => clearTimeout(timer);\n    }\n    setIsLoading(false);\n  }, [inputValue]);\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Search input with loader</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9 pe-9\"\n          id={id}\n          onChange={(e) => setInputValue(e.target.value)}\n          placeholder=\"Search...\"\n          type=\"search\"\n          value={inputValue}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          {isLoading ? (\n            <LoaderCircleIcon\n              aria-label=\"Loading...\"\n              className=\"animate-spin\"\n              role=\"status\"\n              size={16}\n            />\n          ) : (\n            <SearchIcon aria-hidden=\"true\" size={16} />\n          )}\n        </div>\n        <button\n          aria-label=\"Press to speak\"\n          className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n          type=\"submit\"\n        >\n          <MicIcon aria-hidden=\"true\" size={16} />\n        </button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-270.tsx",
    "content": "import { CircleAlert } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-red-500/50 px-4 py-3 text-red-600\">\n      <p className=\"text-sm\">\n        <CircleAlert\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex opacity-60\"\n          size={16}\n        />\n        An error occurred!\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-271.tsx",
    "content": "import { CircleCheckIcon } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-eborder px-4 py-3\">\n      <p className=\"text-sm\">\n        <CircleCheckIcon\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex text-emerald-500\"\n          size={16}\n        />\n        Completed successfully!\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-272.tsx",
    "content": "import { CircleCheckIcon } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-emerald-500/50 px-4 py-3 text-emerald-600\">\n      <p className=\"text-sm\">\n        <CircleCheckIcon\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex opacity-60\"\n          size={16}\n        />\n        Completed successfully!\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-273.tsx",
    "content": "import { InfoIcon } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border px-4 py-3\">\n      <p className=\"text-sm\">\n        <InfoIcon\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex text-blue-500\"\n          size={16}\n        />\n        Just a quick note!\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-274.tsx",
    "content": "import { InfoIcon } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-blue-500/50 px-4 py-3 text-blue-600\">\n      <p className=\"text-sm\">\n        <InfoIcon\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex opacity-60\"\n          size={16}\n        />\n        Just a quick note!\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-275.tsx",
    "content": "import { ArrowRightIcon, TriangleAlert } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border px-4 py-3\">\n      <div className=\"flex gap-3\">\n        <TriangleAlert\n          aria-hidden=\"true\"\n          className=\"hrink-0 mt-0.5 text-amber-500\"\n          size={16}\n        />\n        <div className=\"flex grow justify-between gap-3\">\n          <p className=\"text-sm\">Some information is missing!</p>\n          <a className=\"group whitespace-nowrap font-medium text-sm\" href=\"#\">\n            Link\n            <ArrowRightIcon\n              aria-hidden=\"true\"\n              className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n              size={16}\n            />\n          </a>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-276.tsx",
    "content": "import { ArrowRightIcon, TriangleAlert } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-amber-500/50 px-4 py-3 text-amber-600\">\n      <div className=\"flex gap-3\">\n        <TriangleAlert\n          aria-hidden=\"true\"\n          className=\"mt-0.5 shrink-0 opacity-60\"\n          size={16}\n        />\n        <div className=\"flex grow justify-between gap-3\">\n          <p className=\"text-sm\">Some information is missing!</p>\n          <a className=\"group whitespace-nowrap font-medium text-sm\" href=\"#\">\n            Link\n            <ArrowRightIcon\n              aria-hidden=\"true\"\n              className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n              size={16}\n            />\n          </a>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-277.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border px-4 py-3\">\n      <div className=\"flex gap-3\">\n        <CircleAlertIcon\n          aria-hidden=\"true\"\n          className=\"mt-0.5 shrink-0 text-red-500 opacity-60\"\n          size={16}\n        />\n        <div className=\"grow space-y-1\">\n          <p className=\"font-medium text-sm\">\n            Password does not meet requirements:\n          </p>\n          <ul className=\"list-inside list-disc text-muted-foreground text-sm\">\n            <li>Minimum 8 characters</li>\n            <li>Inlcude a special character</li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-278.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"rounded-md border border-red-500/50 px-4 py-3 text-red-600\">\n      <div className=\"flex gap-3\">\n        <CircleAlertIcon\n          aria-hidden=\"true\"\n          className=\"mt-0.5 shrink-0 opacity-60\"\n          size={16}\n        />\n        <div className=\"grow space-y-1\">\n          <p className=\"font-medium text-sm\">\n            Password does not meet requirements:\n          </p>\n          <ul className=\"list-inside list-disc text-sm opacity-80\">\n            <li>Minimum 8 characters</li>\n            <li>Inlcude a special character</li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-279.tsx",
    "content": "import { TriangleAlert, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <p className=\"grow text-sm\">\n          <TriangleAlert\n            aria-hidden=\"true\"\n            className=\"me-3 -mt-0.5 inline-flex text-amber-500\"\n            size={16}\n          />\n          Some information is missing!\n        </p>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-28.tsx",
    "content": "\"use client\";\n\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport {\n  Button,\n  Group,\n  Input,\n  Label,\n  NumberField,\n} from \"react-aria-components\";\n\nexport default function Component() {\n  return (\n    <NumberField defaultValue={2048} minValue={0}>\n      <div className=\"*:not-first:mt-2\">\n        <Label className=\"font-medium text-foreground text-sm\">\n          Number input with plus/minus buttons\n        </Label>\n        <Group className=\"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input text-sm shadow-xs outline-none transition-[color,box-shadow] data-focus-within:border-ring data-disabled:opacity-50 data-focus-within:ring-[3px] data-focus-within:ring-ring/50 data-focus-within:has-aria-invalid:border-destructive data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40\">\n          <Button\n            className=\"-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-md border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            slot=\"decrement\"\n          >\n            <MinusIcon aria-hidden=\"true\" size={16} />\n          </Button>\n          <Input className=\"w-full grow bg-background px-3 py-2 text-center text-foreground tabular-nums\" />\n          <Button\n            className=\"-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-md border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            slot=\"increment\"\n          >\n            <PlusIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </Group>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/NumberField.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-280.tsx",
    "content": "import { CircleCheckIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <p className=\"grow text-sm\">\n          <CircleCheckIcon\n            aria-hidden=\"true\"\n            className=\"me-3 -mt-0.5 inline-flex text-red-500\"\n            size={16}\n          />\n          An error occurred!\n        </p>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-281.tsx",
    "content": "import { CircleCheckIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <p className=\"grow text-sm\">\n          <CircleCheckIcon\n            aria-hidden=\"true\"\n            className=\"me-3 -mt-0.5 inline-flex text-emerald-500\"\n            size={16}\n          />\n          Completed successfully!\n        </p>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-282.tsx",
    "content": "import { InfoIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <p className=\"grow text-sm\">\n          <InfoIcon\n            aria-hidden=\"true\"\n            className=\"me-3 -mt-0.5 inline-flex text-blue-500\"\n            size={16}\n          />\n          Just a quick note!\n        </p>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-283.tsx",
    "content": "import { ArrowRightIcon, TriangleAlert, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <TriangleAlert\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-amber-500\"\n            size={16}\n          />\n          <div className=\"flex grow justify-between gap-12\">\n            <p className=\"text-sm\">Some information is missing!</p>\n            <a className=\"group whitespace-nowrap font-medium text-sm\" href=\"#\">\n              Link\n              <ArrowRightIcon\n                aria-hidden=\"true\"\n                className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n                size={16}\n              />\n            </a>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-284.tsx",
    "content": "import { ArrowRightIcon, CircleAlert, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <CircleAlert\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-red-500\"\n            size={16}\n          />\n          <div className=\"flex grow justify-between gap-12\">\n            <p className=\"text-sm\">An error occurred!</p>\n            <a className=\"group whitespace-nowrap font-medium text-sm\" href=\"#\">\n              Link\n              <ArrowRightIcon\n                aria-hidden=\"true\"\n                className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n                size={16}\n              />\n            </a>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-285.tsx",
    "content": "import { ArrowRightIcon, CircleCheckIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <CircleCheckIcon\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-emerald-500\"\n            size={16}\n          />\n          <div className=\"flex grow justify-between gap-12\">\n            <p className=\"text-sm\">Completed successfully!</p>\n            <a className=\"group whitespace-nowrap font-medium text-sm\" href=\"#\">\n              Link\n              <ArrowRightIcon\n                aria-hidden=\"true\"\n                className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n                size={16}\n              />\n            </a>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-286.tsx",
    "content": "import { ArrowRightIcon, InfoIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <InfoIcon\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-blue-500\"\n            size={16}\n          />\n          <div className=\"flex grow justify-between gap-12\">\n            <p className=\"text-sm\">Just a quick note!</p>\n            <a className=\"group whitespace-nowrap font-medium text-sm\" href=\"#\">\n              Link\n              <ArrowRightIcon\n                aria-hidden=\"true\"\n                className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n                size={16}\n              />\n            </a>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-287.tsx",
    "content": "import { CircleCheckIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex items-center gap-2\">\n        <div className=\"flex grow items-center gap-3\">\n          <CircleCheckIcon\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-emerald-500\"\n            size={16}\n          />\n          <div className=\"flex grow items-center justify-between gap-12\">\n            <p className=\"text-sm\">You&lsquo;ve made changes!</p>\n            <Button size=\"sm\">Undo</Button>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-288.tsx",
    "content": "import { CircleCheckIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <CircleCheckIcon\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-emerald-500\"\n            size={16}\n          />\n          <div className=\"flex grow justify-between gap-12\">\n            <p className=\"text-sm\">Message sent</p>\n            <div className=\"whitespace-nowrap text-sm\">\n              <button\n                className=\"font-medium text-sm hover:underline\"\n                type=\"button\"\n              >\n                View\n              </button>{\" \"}\n              <span className=\"mx-1 text-muted-foreground\">·</span>{\" \"}\n              <button\n                className=\"font-medium text-sm hover:underline\"\n                type=\"button\"\n              >\n                Undo\n              </button>\n            </div>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-289.tsx",
    "content": "import { TriangleAlertIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <TriangleAlertIcon\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-amber-500\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col gap-3\">\n            <div className=\"space-y-1\">\n              <p className=\"font-medium text-sm\">\n                Something requires your action!\n              </p>\n              <p className=\"text-muted-foreground text-sm\">\n                It conveys that a specific action is needed to resolve or\n                address a situation.\n              </p>\n            </div>\n            <div>\n              <Button size=\"sm\">Learn more</Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-29.tsx",
    "content": "\"use client\";\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport {\n  Button,\n  Group,\n  Input,\n  Label,\n  NumberField,\n} from \"react-aria-components\";\n\nexport default function Component() {\n  return (\n    <NumberField\n      defaultValue={99}\n      formatOptions={{\n        currency: \"EUR\",\n        currencySign: \"accounting\",\n        style: \"currency\",\n      }}\n    >\n      <div className=\"*:not-first:mt-2\">\n        <Label className=\"font-medium text-foreground text-sm\">\n          Number input with chevrons\n        </Label>\n        <Group className=\"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input text-sm shadow-xs outline-none transition-[color,box-shadow] data-focus-within:border-ring data-disabled:opacity-50 data-focus-within:ring-[3px] data-focus-within:ring-ring/50 data-focus-within:has-aria-invalid:border-destructive data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40\">\n          <Input className=\"flex-1 bg-background px-3 py-2 text-foreground tabular-nums\" />\n          <div className=\"flex h-[calc(100%+2px)] flex-col\">\n            <Button\n              className=\"-me-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n              slot=\"increment\"\n            >\n              <ChevronUpIcon aria-hidden=\"true\" size={12} />\n            </Button>\n            <Button\n              className=\"-me-px -mt-px flex h-1/2 w-6 flex-1 items-center justify-center border border-input bg-background text-muted-foreground/80 text-sm transition-[color,box-shadow] hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n              slot=\"decrement\"\n            >\n              <ChevronDownIcon aria-hidden=\"true\" size={12} />\n            </Button>\n          </div>\n        </Group>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/NumberField.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-290.tsx",
    "content": "import { CircleAlertIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <CircleAlertIcon\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-red-500\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col gap-3\">\n            <div className=\"space-y-1\">\n              <p className=\"font-medium text-sm\">\n                We couldn&lsquo;t complete your request!\n              </p>\n              <p className=\"text-muted-foreground text-sm\">\n                It indicates that an issue has prevented the processing of the\n                request.\n              </p>\n            </div>\n            <div className=\"flex gap-2\">\n              <Button size=\"sm\">Learn more</Button>\n            </div>\n          </div>\n          <Button\n            aria-label=\"Close notification\"\n            className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n            variant=\"ghost\"\n          >\n            <XIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n              size={16}\n            />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-291.tsx",
    "content": "import { CircleCheckIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <CircleCheckIcon\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-emerald-500\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col gap-3\">\n            <div className=\"space-y-1\">\n              <p className=\"font-medium text-sm\">Your request was completed!</p>\n              <p className=\"text-muted-foreground text-sm\">\n                It demonstrates that the task or request has been processed.\n              </p>\n            </div>\n            <div className=\"flex gap-2\">\n              <Button size=\"sm\">Learn more</Button>\n            </div>\n          </div>\n          <Button\n            aria-label=\"Close notification\"\n            className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n            variant=\"ghost\"\n          >\n            <XIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n              size={16}\n            />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-292.tsx",
    "content": "import { Info, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <Info\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-blue-500\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col gap-3\">\n            <div className=\"space-y-1\">\n              <p className=\"font-medium text-sm\">\n                Here is some helpful information!\n              </p>\n              <p className=\"text-muted-foreground text-sm\">\n                It aims to provide clarity or support for better\n                decision-making.\n              </p>\n            </div>\n            <div className=\"flex gap-2\">\n              <Button size=\"sm\">Learn more</Button>\n            </div>\n          </div>\n          <Button\n            aria-label=\"Close notification\"\n            className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n            variant=\"ghost\"\n          >\n            <XIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n              size={16}\n            />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-293.tsx",
    "content": "import { XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow flex-col gap-3\">\n          <div className=\"space-y-1\">\n            <p className=\"font-medium text-sm\">We Value Your Privacy 🍪</p>\n            <p className=\"text-muted-foreground text-sm\">\n              We use cookies to improve your experience, and show personalized\n              content.\n            </p>\n          </div>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Accept</Button>\n            <Button size=\"sm\" variant=\"outline\">\n              Decline\n            </Button>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-294.tsx",
    "content": "import { RefreshCwIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex gap-3\">\n        <div\n          aria-hidden=\"true\"\n          className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n        >\n          <RefreshCwIcon className=\"opacity-60\" size={16} />\n        </div>\n        <div className=\"flex grow flex-col gap-3\">\n          <div className=\"space-y-1\">\n            <p className=\"font-medium text-sm\">Version 1.4 is now available!</p>\n            <p className=\"text-muted-foreground text-sm\">\n              This update contains several bug fixes and performance\n              improvements.\n            </p>\n          </div>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Install</Button>\n            <Button size=\"sm\" variant=\"link\">\n              Later\n            </Button>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-295.tsx",
    "content": "import { XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex gap-3\">\n        <img\n          alt=\"Mary Palmer\"\n          className=\"size-9 rounded-full\"\n          height={32}\n          src=\"/origin/avatar-32-01.jpg\"\n          width={32}\n        />\n        <div className=\"flex grow flex-col gap-3\">\n          <div className=\"space-y-1\">\n            <p className=\"text-muted-foreground text-sm\">\n              <a\n                className=\"font-medium text-foreground hover:underline\"\n                href=\"#\"\n              >\n                Mary Palmer\n              </a>{\" \"}\n              mentioned you in{\" \"}\n              <a\n                className=\"font-medium text-foreground hover:underline\"\n                href=\"#\"\n              >\n                project-campaign-02\n              </a>\n              .\n            </p>\n            <p className=\"text-muted-foreground text-xs\">2 min ago</p>\n          </div>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Accept</Button>\n            <Button size=\"sm\" variant=\"outline\">\n              Decline\n            </Button>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-296.tsx",
    "content": "import { RadioIcon, XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 right-4` to the container element.\n    <div className=\"z-50 max-w-[400px] rounded-md border bg-background p-4 shadow-lg\">\n      <div className=\"flex items-center gap-2\">\n        <div\n          aria-hidden=\"true\"\n          className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n        >\n          <RadioIcon className=\"opacity-60\" size={16} />\n        </div>\n        <div className=\"flex grow items-center gap-12\">\n          <div className=\"space-y-1\">\n            <p className=\"font-medium text-sm\">Live in 27 hours</p>\n            <p className=\"text-muted-foreground text-xs\">\n              November 20 at 8:00 PM.\n            </p>\n          </div>\n          <Button size=\"sm\">Notify me</Button>\n        </div>\n        <Button\n          aria-label=\"Close notification\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-297.tsx",
    "content": "\"use client\";\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ToastAction } from \"@/registry/default/ui/toast\";\n\nexport default function Component() {\n  const { toast } = useToast();\n\n  return (\n    <Button\n      onClick={() => {\n        toast({\n          action: <ToastAction altText=\"Try again\">Try again</ToastAction>,\n          description: \"There was a problem with your request.\",\n          title: \"We couldn't complete your request!\",\n        });\n      }}\n      variant=\"outline\"\n    >\n      Show toast\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-298.tsx",
    "content": "\"use client\";\n\nimport { CircleCheckIcon, XIcon } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/default/ui/toast\";\n\ninterface UseProgressTimerProps {\n  duration: number;\n  interval?: number;\n  onComplete?: () => void;\n}\n\nfunction useProgressTimer({\n  duration,\n  interval = 100,\n  onComplete,\n}: UseProgressTimerProps) {\n  const [progress, setProgress] = useState(duration);\n  const timerRef = useRef(0);\n  const timerState = useRef({\n    isPaused: false,\n    remaining: duration,\n    startTime: 0,\n  });\n\n  const cleanup = useCallback(() => {\n    window.clearInterval(timerRef.current);\n  }, []);\n\n  const reset = useCallback(() => {\n    cleanup();\n    setProgress(duration);\n    timerState.current = {\n      isPaused: false,\n      remaining: duration,\n      startTime: 0,\n    };\n  }, [duration, cleanup]);\n\n  const start = useCallback(() => {\n    const state = timerState.current;\n    state.startTime = Date.now();\n    state.isPaused = false;\n\n    timerRef.current = window.setInterval(() => {\n      const elapsedTime = Date.now() - state.startTime;\n      const remaining = Math.max(0, state.remaining - elapsedTime);\n\n      setProgress(remaining);\n\n      if (remaining <= 0) {\n        cleanup();\n        onComplete?.();\n      }\n    }, interval);\n  }, [interval, cleanup, onComplete]);\n\n  const pause = useCallback(() => {\n    const state = timerState.current;\n    if (!state.isPaused) {\n      cleanup();\n      state.remaining = Math.max(\n        0,\n        state.remaining - (Date.now() - state.startTime),\n      );\n      state.isPaused = true;\n    }\n  }, [cleanup]);\n\n  const resume = useCallback(() => {\n    const state = timerState.current;\n    if (state.isPaused && state.remaining > 0) {\n      start();\n    }\n  }, [start]);\n\n  useEffect(() => {\n    return cleanup;\n  }, [cleanup]);\n\n  return {\n    pause,\n    progress,\n    reset,\n    resume,\n    start,\n  };\n}\n\nexport default function Component() {\n  const [open, setOpen] = useState(false);\n  const toastDuration = 5000;\n  const { progress, start, pause, resume, reset } = useProgressTimer({\n    duration: toastDuration,\n    onComplete: () => setOpen(false),\n  });\n\n  const handleOpenChange = useCallback(\n    (isOpen: boolean) => {\n      setOpen(isOpen);\n      if (isOpen) {\n        reset();\n        start();\n      }\n    },\n    [reset, start],\n  );\n\n  const handleButtonClick = useCallback(() => {\n    if (open) {\n      setOpen(false);\n      // Wait for the close animation to finish\n      window.setTimeout(() => {\n        handleOpenChange(true);\n      }, 150);\n    } else {\n      handleOpenChange(true);\n    }\n  }, [open, handleOpenChange]);\n\n  return (\n    <ToastProvider swipeDirection=\"left\">\n      <Button onClick={handleButtonClick} variant=\"outline\">\n        Custom toast\n      </Button>\n      <Toast\n        onOpenChange={handleOpenChange}\n        onPause={pause}\n        onResume={resume}\n        open={open}\n      >\n        <div className=\"flex w-full justify-between gap-3\">\n          <CircleCheckIcon\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 text-emerald-500\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col gap-3\">\n            <div className=\"space-y-1\">\n              <ToastTitle>Your request was completed!</ToastTitle>\n              <ToastDescription>\n                It demonstrates that the task or request has been processed.\n              </ToastDescription>\n            </div>\n            <div>\n              <ToastAction altText=\"Undo changes\" asChild>\n                <Button size=\"sm\">Undo changes</Button>\n              </ToastAction>\n            </div>\n          </div>\n          <ToastClose asChild>\n            <Button\n              aria-label=\"Close notification\"\n              className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n              variant=\"ghost\"\n            >\n              <XIcon\n                aria-hidden=\"true\"\n                className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n                size={16}\n              />\n            </Button>\n          </ToastClose>\n        </div>\n        <div aria-hidden=\"true\" className=\"contents\">\n          <div\n            className=\"pointer-events-none absolute bottom-0 left-0 h-1 w-full bg-emerald-500\"\n            style={{\n              transition: \"width 100ms linear\",\n              width: `${(progress / toastDuration) * 100}%`,\n            }}\n          />\n        </div>\n      </Toast>\n      <ToastViewport className=\"sm:right-auto sm:left-0\" />\n    </ToastProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-299.tsx",
    "content": "\"use client\";\n\nimport { toast } from \"sonner\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button\n      onClick={() => {\n        toast(\"Your request was completed!\", {\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n          description: \"It was a long journey, but we made it!\",\n        });\n      }}\n      variant=\"outline\"\n    >\n      Show sonner\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-30.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>File input</Label>\n      <Input\n        className=\"p-0 pe-3 file:me-3 file:border-0 file:border-e\"\n        id={id}\n        type=\"file\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-300.tsx",
    "content": "\"use client\";\n\nimport { CircleCheckIcon, XIcon } from \"lucide-react\";\nimport { toast } from \"sonner\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button\n      onClick={() => {\n        toast.custom((t) => (\n          <div className=\"w-full rounded-md border bg-background px-4 py-3 text-foreground shadow-lg sm:w-[var(--width)]\">\n            <div className=\"flex gap-2\">\n              <div className=\"flex grow gap-3\">\n                <CircleCheckIcon\n                  aria-hidden=\"true\"\n                  className=\"mt-0.5 shrink-0 text-emerald-500\"\n                  size={16}\n                />\n                <div className=\"flex grow justify-between gap-12\">\n                  <p className=\"text-sm\">Message sent</p>\n                  <div className=\"whitespace-nowrap text-sm\">\n                    <button\n                      className=\"font-medium text-sm hover:underline\"\n                      type=\"button\"\n                    >\n                      View\n                    </button>{\" \"}\n                    <span className=\"mx-1 text-muted-foreground\">·</span>{\" \"}\n                    <button\n                      className=\"font-medium text-sm hover:underline\"\n                      onClick={() => toast.dismiss(t)}\n                      type=\"button\"\n                    >\n                      Undo\n                    </button>\n                  </div>\n                </div>\n              </div>\n              <Button\n                aria-label=\"Close banner\"\n                className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n                onClick={() => toast.dismiss(t)}\n                variant=\"ghost\"\n              >\n                <XIcon\n                  aria-hidden=\"true\"\n                  className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n                  size={16}\n                />\n              </Button>\n            </div>\n          </div>\n        ));\n      }}\n      variant=\"outline\"\n    >\n      Custom sonner\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-301.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    // To make the notification fixed, add classes like `fixed bottom-4 inset-x-4` to the container element.\n    <div className=\"z-50 rounded-md border bg-background px-4 py-3 shadow-lg\">\n      <div className=\"flex flex-col justify-between gap-3 md:flex-row md:items-center\">\n        <p className=\"text-sm\">\n          We use cookies to improve your experience, analyze site usage, and\n          show personalized content.\n        </p>\n        <div className=\"flex gap-2 max-md:flex-wrap\">\n          <Button size=\"sm\">Accept</Button>\n          <Button size=\"sm\" variant=\"outline\">\n            Decline\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-302.tsx",
    "content": "import { ArrowRightIcon } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground\">\n      <p className=\"flex justify-center text-sm\">\n        <a className=\"group\" href=\"#\">\n          <span className=\"me-1 text-base leading-none\">✨</span>\n          Introducing transactional and marketing emails\n          <ArrowRightIcon\n            aria-hidden=\"true\"\n            className=\"ms-2 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n            size={16}\n          />\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-303.tsx",
    "content": "import { EclipseIcon } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground\">\n      <p className=\"text-center text-sm\">\n        <EclipseIcon\n          aria-hidden=\"true\"\n          className=\"me-3 -mt-0.5 inline-flex opacity-60\"\n          size={16}\n        />\n        Get the most out of your app with real-time updates and analytics{\" \"}\n        <span className=\"text-muted-foreground\">·</span>{\" \"}\n        <a className=\"font-medium underline hover:no-underline\" href=\"#\">\n          Upgrade\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-304.tsx",
    "content": "import { ArrowRightIcon, Eclipse } from \"lucide-react\";\n\nexport default function Component() {\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground\">\n      <div className=\"flex flex-col justify-between gap-2 md:flex-row\">\n        <div className=\"flex grow gap-3\">\n          <Eclipse\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 opacity-60\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col justify-between gap-2 md:flex-row md:items-center\">\n            <p className=\"text-sm\">\n              We just added something awesome to make your experience even\n              better.\n            </p>\n            <a className=\"group whitespace-nowrap font-medium text-sm\" href=\"#\">\n              Learn more\n              <ArrowRightIcon\n                aria-hidden=\"true\"\n                className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n                size={16}\n              />\n            </a>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-305.tsx",
    "content": "\"use client\";\n\nimport { ArrowRightIcon, Eclipse, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true);\n\n  if (!isVisible) return null;\n\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground\">\n      <div className=\"flex gap-2\">\n        <div className=\"flex grow gap-3\">\n          <Eclipse\n            aria-hidden=\"true\"\n            className=\"mt-0.5 shrink-0 opacity-60\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col justify-between gap-2 md:flex-row\">\n            <p className=\"text-sm\">\n              We just added something awesome to make your experience even\n              better.\n            </p>\n            <a className=\"group whitespace-nowrap font-medium text-sm\" href=\"#\">\n              Learn more\n              <ArrowRightIcon\n                aria-hidden=\"true\"\n                className=\"ms-1 -mt-0.5 inline-flex opacity-60 transition-transform group-hover:translate-x-0.5\"\n                size={16}\n              />\n            </a>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-306.tsx",
    "content": "\"use client\";\n\nimport { EclipseIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true);\n\n  if (!isVisible) return null;\n\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground md:py-2\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center\">\n          <EclipseIcon\n            aria-hidden=\"true\"\n            className=\"shrink-0 opacity-60 max-md:mt-0.5\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <p className=\"text-sm\">\n              It&lsquo;s live and ready to use! Start exploring the latest\n              addition to your toolkit.\n            </p>\n            <div className=\"flex gap-2 max-md:flex-wrap\">\n              <Button className=\"text-sm\" size=\"sm\">\n                Download\n              </Button>\n              <Button className=\"text-sm\" size=\"sm\" variant=\"outline\">\n                Learn more\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-307.tsx",
    "content": "\"use client\";\n\nimport { Eclipse, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true);\n\n  if (!isVisible) return null;\n\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground md:py-2\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center\">\n          <Eclipse\n            aria-hidden=\"true\"\n            className=\"shrink-0 opacity-60 max-md:mt-0.5\"\n            size={16}\n          />\n          <div className=\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <p className=\"text-sm\">\n              It&lsquo;s live and ready to use! Start exploring the latest\n              addition to your toolkit.\n            </p>\n            <div className=\"flex gap-2 max-md:flex-wrap\">\n              <Button className=\"text-sm\" size=\"sm\">\n                Download\n              </Button>\n              <Button className=\"text-sm\" size=\"sm\" variant=\"link\">\n                Learn more\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-308.tsx",
    "content": "\"use client\";\n\nimport { Eclipse, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true);\n\n  if (!isVisible) return null;\n\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground md:py-2\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center md:justify-center\">\n          <Eclipse\n            aria-hidden=\"true\"\n            className=\"shrink-0 opacity-60 max-md:mt-0.5\"\n            size={16}\n          />\n          <div className=\"flex flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <p className=\"text-sm\">\n              It&lsquo;s live and ready to use! Start exploring the latest\n              addition to your toolkit.\n            </p>\n            <div className=\"flex gap-2 max-md:flex-wrap\">\n              <Button className=\"rounded-full\" size=\"sm\">\n                Learn more\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-309.tsx",
    "content": "\"use client\";\n\nimport { RocketIcon, XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true);\n\n  if (!isVisible) return null;\n\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/15 max-md:mt-0.5\"\n          >\n            <RocketIcon className=\"opacity-80\" size={16} />\n          </div>\n          <div className=\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <div className=\"space-y-0.5\">\n              <p className=\"font-medium text-sm\">\n                Boost your experience with coss.com\n              </p>\n              <p className=\"text-muted-foreground text-sm\">\n                The new feature is live! Try it out and let us know what you\n                think.\n              </p>\n            </div>\n            <div className=\"flex gap-2 max-md:flex-wrap\">\n              <Button className=\"text-sm\" size=\"sm\">\n                Try now\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-31.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"group relative\">\n      <label\n        className=\"absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 font-medium text-foreground text-xs group-has-disabled:opacity-50\"\n        htmlFor={id}\n      >\n        Input with overlapping label\n      </label>\n      <Input className=\"h-10\" id={id} placeholder=\"Email\" type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-310.tsx",
    "content": "\"use client\";\n\nimport { TicketPercent, XIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\n// Define the sale end date - eg: new Date('2024-12-31T23:59:59');\nconst saleEndDate = new Date(\n  Date.now() + 9 * 60 * 60 * 1000 + 45 * 60 * 1000 + 24 * 1000,\n); // Setting 9h 45m 24s from now for demo purposes\n\ninterface TimeLeft {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  isExpired: boolean;\n}\n\nexport default function Component() {\n  const [isVisible, setIsVisible] = useState(true);\n  const [timeLeft, setTimeLeft] = useState<TimeLeft>({\n    days: 0,\n    hours: 0,\n    isExpired: false,\n    minutes: 0,\n    seconds: 0,\n  });\n\n  useEffect(() => {\n    const calculateTimeLeft = () => {\n      const now = new Date();\n      const difference = saleEndDate.getTime() - now.getTime();\n\n      if (difference <= 0) {\n        setTimeLeft({\n          days: 0,\n          hours: 0,\n          isExpired: true,\n          minutes: 0,\n          seconds: 0,\n        });\n        return;\n      }\n\n      const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n      const hours = Math.floor(\n        (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),\n      );\n      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));\n      const seconds = Math.floor((difference % (1000 * 60)) / 1000);\n\n      setTimeLeft({\n        days,\n        hours,\n        isExpired: false,\n        minutes,\n        seconds,\n      });\n    };\n\n    // Calculate immediately and then every second\n    calculateTimeLeft();\n    const timer = setInterval(calculateTimeLeft, 1000);\n\n    return () => clearInterval(timer);\n  }, []);\n\n  if (!isVisible || timeLeft.isExpired) return null;\n\n  return (\n    <div className=\"dark bg-muted px-4 py-3 text-foreground\">\n      <div className=\"flex gap-2 md:items-center\">\n        <div className=\"flex grow gap-3 md:items-center\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/15 max-md:mt-0.5\"\n          >\n            <TicketPercent className=\"opacity-80\" size={16} />\n          </div>\n          <div className=\"flex grow flex-col justify-between gap-3 md:flex-row md:items-center\">\n            <div className=\"space-y-0.5\">\n              <p className=\"font-medium text-sm\">Black Friday Sale!</p>\n              <p className=\"text-muted-foreground text-sm\">\n                It kicks off today and is available for just 24\n                hours—don&lsquo;t miss out!\n              </p>\n            </div>\n            <div className=\"flex gap-3 max-md:flex-wrap\">\n              <div className=\"flex items-center divide-x divide-primary-foreground rounded-md bg-primary/15 text-sm tabular-nums\">\n                {timeLeft.days > 0 && (\n                  <span className=\"flex h-8 items-center justify-center p-2\">\n                    {timeLeft.days}\n                    <span className=\"text-muted-foreground\">d</span>\n                  </span>\n                )}\n                <span className=\"flex h-8 items-center justify-center p-2\">\n                  {timeLeft.hours.toString().padStart(2, \"0\")}\n                  <span className=\"text-muted-foreground\">h</span>\n                </span>\n                <span className=\"flex h-8 items-center justify-center p-2\">\n                  {timeLeft.minutes.toString().padStart(2, \"0\")}\n                  <span className=\"text-muted-foreground\">m</span>\n                </span>\n                <span className=\"flex h-8 items-center justify-center p-2\">\n                  {timeLeft.seconds.toString().padStart(2, \"0\")}\n                  <span className=\"text-muted-foreground\">s</span>\n                </span>\n              </div>\n              <Button className=\"text-sm\" size=\"sm\">\n                Buy now\n              </Button>\n            </div>\n          </div>\n        </div>\n        <Button\n          aria-label=\"Close banner\"\n          className=\"group -my-1.5 -me-2 size-8 shrink-0 p-0 hover:bg-transparent\"\n          onClick={() => setIsVisible(false)}\n          variant=\"ghost\"\n        >\n          <XIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-311.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"border-b px-4 py-3\">\n      <p className=\"text-center text-sm\">\n        <span className=\"mr-1 text-base leading-none\">📫</span> Subscribe to our\n        newsletter and get 10% off your first order!{\" \"}\n        <span className=\"mx-1 text-muted-foreground\">·</span>{\" \"}\n        <a className=\"font-medium underline hover:no-underline\" href=\"#\">\n          Subscribe\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-312.tsx",
    "content": "\"use client\";\n\nimport { DownloadIcon, LoaderCircleIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [isDownloading, setIsDownloading] = useState(false);\n\n  const handleDownload = () => {\n    setIsDownloading(true);\n    // Simulate download\n    setTimeout(() => {\n      setIsDownloading(false);\n    }, 2000);\n  };\n\n  return (\n    <div className=\"bg-muted px-4 py-3 md:py-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-2\">\n        <p className=\"text-sm\">\n          <span className=\"font-medium\">v2.1.0</span>\n          <span className=\"mx-2 text-muted-foreground\">•</span>\n          New features and improvements available\n        </p>\n        <Button\n          className=\"min-w-24\"\n          disabled={isDownloading}\n          onClick={handleDownload}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          {isDownloading ? (\n            <>\n              <LoaderCircleIcon\n                aria-hidden=\"true\"\n                className=\"-ms-0.5 me-2 animate-spin\"\n                size={16}\n              />\n              Updating...\n            </>\n          ) : (\n            <>\n              <DownloadIcon aria-hidden=\"true\" className=\"-ms-0.5\" size={16} />\n              Update now\n            </>\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-313.tsx",
    "content": "import {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function AlertComponent() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Alert dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Take a moment to review the details provided to ensure you\n            understand the implications.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Okay</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-314.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function AlertComponent() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Alert dialog with icon</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <CircleAlertIcon className=\"opacity-80\" size={16} />\n          </div>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Are you sure you want to delete your account? All your data will\n              be removed.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n        </div>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Confirm</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-315.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable (native scrollbar)</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\">\n        <div className=\"overflow-y-auto\">\n          <DialogHeader className=\"contents space-y-0 text-left\">\n            <DialogTitle className=\"px-6 pt-6\">\n              Frequently Asked Questions (FAQ)\n            </DialogTitle>\n            <DialogDescription asChild>\n              <div className=\"p-6\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Account Management</strong>\n                    </p>\n                    <p>\n                      Navigate to the registration page, provide required\n                      information, and verify your email address. You can sign\n                      up using your email or through social media platforms.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Password Reset Process</strong>\n                    </p>\n                    <p>\n                      Users can reset their password through the account\n                      settings page. Click &quot;Forgot Password&quot; and\n                      follow the email verification steps to regain account\n                      access quickly and securely.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Service Pricing Tiers</strong>\n                    </p>\n                    <p>\n                      We offer three primary subscription levels designed to\n                      meet diverse user needs: Basic (free with limited\n                      features), Professional (monthly fee with comprehensive\n                      access), and Enterprise (custom pricing with full platform\n                      capabilities).\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Technical Support Channels</strong>\n                    </p>\n                    <p>\n                      Customer support is accessible through multiple\n                      communication methods including email support, live chat\n                      during business hours, an integrated support ticket\n                      system, and phone support specifically for\n                      enterprise-level customers.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Data Protection Strategies</strong>\n                    </p>\n                    <p>\n                      Our platform implements rigorous security measures\n                      including 256-bit SSL encryption, regular comprehensive\n                      security audits, strict data access controls, and\n                      compliance with international privacy protection\n                      standards.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Platform Compatibility</strong>\n                    </p>\n                    <p>\n                      The service supports multiple device and operating system\n                      environments, including web browsers like Chrome and\n                      Firefox, mobile applications for iOS and Android, and\n                      desktop applications compatible with Windows and macOS.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Subscription Management</strong>\n                    </p>\n                    <p>\n                      Subscriptions can be cancelled at any time through account\n                      settings, with pro-rated refunds available within 30 days\n                      of payment. Both monthly and annual billing options are\n                      provided, with special discounts offered for annual\n                      commitments.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Payment Method Options</strong>\n                    </p>\n                    <p>\n                      We accept a wide range of payment methods including major\n                      credit cards such as Visa, MasterCard, and American\n                      Express, digital payment platforms like PayPal, and direct\n                      bank transfers. Regional payment options may also be\n                      available depending on user location.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Customer Support</strong>\n                    </p>\n                    <p>\n                      Our dedicated customer support team is available 24/7,\n                      providing quick and efficient assistance to address any\n                      inquiries or issues you may have.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Privacy Policy</strong>\n                    </p>\n                    <p>\n                      Our privacy policy outlines how we collect, use, and\n                      protect your personal data, ensuring your privacy is\n                      protected at all times.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter className=\"px-6 pb-6 sm:justify-start\">\n            <DialogClose asChild>\n              <Button type=\"button\" variant=\"outline\">\n                Cancel\n              </Button>\n            </DialogClose>\n            <DialogClose asChild>\n              <Button type=\"button\">Okay</Button>\n            </DialogClose>\n          </DialogFooter>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-316.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable (custom scrollbar)</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\">\n        <ScrollArea className=\"flex max-h-full flex-col overflow-hidden\">\n          <DialogHeader className=\"contents space-y-0 text-left\">\n            <DialogTitle className=\"px-6 pt-6\">\n              Frequently Asked Questions (FAQ)\n            </DialogTitle>\n            <DialogDescription asChild>\n              <div className=\"p-6\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Account Management</strong>\n                    </p>\n                    <p>\n                      Navigate to the registration page, provide required\n                      information, and verify your email address. You can sign\n                      up using your email or through social media platforms.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Password Reset Process</strong>\n                    </p>\n                    <p>\n                      Users can reset their password through the account\n                      settings page. Click &quot;Forgot Password&quot; and\n                      follow the email verification steps to regain account\n                      access quickly and securely.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Service Pricing Tiers</strong>\n                    </p>\n                    <p>\n                      We offer three primary subscription levels designed to\n                      meet diverse user needs: Basic (free with limited\n                      features), Professional (monthly fee with comprehensive\n                      access), and Enterprise (custom pricing with full platform\n                      capabilities).\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Technical Support Channels</strong>\n                    </p>\n                    <p>\n                      Customer support is accessible through multiple\n                      communication methods including email support, live chat\n                      during business hours, an integrated support ticket\n                      system, and phone support specifically for\n                      enterprise-level customers.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Data Protection Strategies</strong>\n                    </p>\n                    <p>\n                      Our platform implements rigorous security measures\n                      including 256-bit SSL encryption, regular comprehensive\n                      security audits, strict data access controls, and\n                      compliance with international privacy protection\n                      standards.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Platform Compatibility</strong>\n                    </p>\n                    <p>\n                      The service supports multiple device and operating system\n                      environments, including web browsers like Chrome and\n                      Firefox, mobile applications for iOS and Android, and\n                      desktop applications compatible with Windows and macOS.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Subscription Management</strong>\n                    </p>\n                    <p>\n                      Subscriptions can be cancelled at any time through account\n                      settings, with pro-rated refunds available within 30 days\n                      of payment. Both monthly and annual billing options are\n                      provided, with special discounts offered for annual\n                      commitments.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Payment Method Options</strong>\n                    </p>\n                    <p>\n                      We accept a wide range of payment methods including major\n                      credit cards such as Visa, MasterCard, and American\n                      Express, digital payment platforms like PayPal, and direct\n                      bank transfers. Regional payment options may also be\n                      available depending on user location.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Customer Support</strong>\n                    </p>\n                    <p>\n                      Our dedicated customer support team is available 24/7,\n                      providing quick and efficient assistance to address any\n                      inquiries or issues you may have.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Privacy Policy</strong>\n                    </p>\n                    <p>\n                      Our privacy policy outlines how we collect, use, and\n                      protect your personal data, ensuring your privacy is\n                      protected at all times.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter className=\"px-6 pb-6 sm:justify-start\">\n            <DialogClose asChild>\n              <Button type=\"button\" variant=\"outline\">\n                Cancel\n              </Button>\n            </DialogClose>\n            <DialogClose asChild>\n              <Button type=\"button\">Okay</Button>\n            </DialogClose>\n          </DialogFooter>\n        </ScrollArea>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-317.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable (sticky header)</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5\">\n        <DialogHeader className=\"contents space-y-0 text-left\">\n          <DialogTitle className=\"border-b px-6 py-4 text-base\">\n            Frequently Asked Questions (FAQ)\n          </DialogTitle>\n          <div className=\"overflow-y-auto\">\n            <DialogDescription asChild>\n              <div className=\"px-6 py-4\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Account Management</strong>\n                    </p>\n                    <p>\n                      Navigate to the registration page, provide required\n                      information, and verify your email address. You can sign\n                      up using your email or through social media platforms.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Password Reset Process</strong>\n                    </p>\n                    <p>\n                      Users can reset their password through the account\n                      settings page. Click &quot;Forgot Password&quot; and\n                      follow the email verification steps to regain account\n                      access quickly and securely.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Service Pricing Tiers</strong>\n                    </p>\n                    <p>\n                      We offer three primary subscription levels designed to\n                      meet diverse user needs: Basic (free with limited\n                      features), Professional (monthly fee with comprehensive\n                      access), and Enterprise (custom pricing with full platform\n                      capabilities).\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Technical Support Channels</strong>\n                    </p>\n                    <p>\n                      Customer support is accessible through multiple\n                      communication methods including email support, live chat\n                      during business hours, an integrated support ticket\n                      system, and phone support specifically for\n                      enterprise-level customers.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Data Protection Strategies</strong>\n                    </p>\n                    <p>\n                      Our platform implements rigorous security measures\n                      including 256-bit SSL encryption, regular comprehensive\n                      security audits, strict data access controls, and\n                      compliance with international privacy protection\n                      standards.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Platform Compatibility</strong>\n                    </p>\n                    <p>\n                      The service supports multiple device and operating system\n                      environments, including web browsers like Chrome and\n                      Firefox, mobile applications for iOS and Android, and\n                      desktop applications compatible with Windows and macOS.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Subscription Management</strong>\n                    </p>\n                    <p>\n                      Subscriptions can be cancelled at any time through account\n                      settings, with pro-rated refunds available within 30 days\n                      of payment. Both monthly and annual billing options are\n                      provided, with special discounts offered for annual\n                      commitments.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Payment Method Options</strong>\n                    </p>\n                    <p>\n                      We accept a wide range of payment methods including major\n                      credit cards such as Visa, MasterCard, and American\n                      Express, digital payment platforms like PayPal, and direct\n                      bank transfers. Regional payment options may also be\n                      available depending on user location.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Customer Support</strong>\n                    </p>\n                    <p>\n                      Our dedicated customer support team is available 24/7,\n                      providing quick and efficient assistance to address any\n                      inquiries or issues you may have.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Privacy Policy</strong>\n                    </p>\n                    <p>\n                      Our privacy policy outlines how we collect, use, and\n                      protect your personal data, ensuring your privacy is\n                      protected at all times.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n            <DialogFooter className=\"px-6 pb-6 sm:justify-start\">\n              <DialogClose asChild>\n                <Button type=\"button\">Okay</Button>\n              </DialogClose>\n            </DialogFooter>\n          </div>\n        </DialogHeader>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-318.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable (sticky footer)</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:hidden\">\n        <div className=\"overflow-y-auto\">\n          <DialogHeader className=\"contents space-y-0 text-left\">\n            <DialogTitle className=\"px-6 pt-6 text-base\">\n              Frequently Asked Questions (FAQ)\n            </DialogTitle>\n            <DialogDescription asChild>\n              <div className=\"p-6\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Account Management</strong>\n                    </p>\n                    <p>\n                      Navigate to the registration page, provide required\n                      information, and verify your email address. You can sign\n                      up using your email or through social media platforms.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Password Reset Process</strong>\n                    </p>\n                    <p>\n                      Users can reset their password through the account\n                      settings page. Click &quot;Forgot Password&quot; and\n                      follow the email verification steps to regain account\n                      access quickly and securely.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Service Pricing Tiers</strong>\n                    </p>\n                    <p>\n                      We offer three primary subscription levels designed to\n                      meet diverse user needs: Basic (free with limited\n                      features), Professional (monthly fee with comprehensive\n                      access), and Enterprise (custom pricing with full platform\n                      capabilities).\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Technical Support Channels</strong>\n                    </p>\n                    <p>\n                      Customer support is accessible through multiple\n                      communication methods including email support, live chat\n                      during business hours, an integrated support ticket\n                      system, and phone support specifically for\n                      enterprise-level customers.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Data Protection Strategies</strong>\n                    </p>\n                    <p>\n                      Our platform implements rigorous security measures\n                      including 256-bit SSL encryption, regular comprehensive\n                      security audits, strict data access controls, and\n                      compliance with international privacy protection\n                      standards.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Platform Compatibility</strong>\n                    </p>\n                    <p>\n                      The service supports multiple device and operating system\n                      environments, including web browsers like Chrome and\n                      Firefox, mobile applications for iOS and Android, and\n                      desktop applications compatible with Windows and macOS.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Subscription Management</strong>\n                    </p>\n                    <p>\n                      Subscriptions can be cancelled at any time through account\n                      settings, with pro-rated refunds available within 30 days\n                      of payment. Both monthly and annual billing options are\n                      provided, with special discounts offered for annual\n                      commitments.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Payment Method Options</strong>\n                    </p>\n                    <p>\n                      We accept a wide range of payment methods including major\n                      credit cards such as Visa, MasterCard, and American\n                      Express, digital payment platforms like PayPal, and direct\n                      bank transfers. Regional payment options may also be\n                      available depending on user location.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Customer Support</strong>\n                    </p>\n                    <p>\n                      Our dedicated customer support team is available 24/7,\n                      providing quick and efficient assistance to address any\n                      inquiries or issues you may have.\n                    </p>\n                  </div>\n                  <div className=\"space-y-1\">\n                    <p>\n                      <strong>Privacy Policy</strong>\n                    </p>\n                    <p>\n                      Our privacy policy outlines how we collect, use, and\n                      protect your personal data, ensuring your privacy is\n                      protected at all times.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n        <DialogFooter className=\"border-t px-6 py-4\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n          </DialogClose>\n          <DialogClose asChild>\n            <Button type=\"button\">Okay</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-319.tsx",
    "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\n\nexport default function Component() {\n  const [hasReadToBottom, setHasReadToBottom] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const handleScroll = () => {\n    const content = contentRef.current;\n    if (!content) return;\n\n    const scrollPercentage =\n      content.scrollTop / (content.scrollHeight - content.clientHeight);\n    if (scrollPercentage >= 0.99 && !hasReadToBottom) {\n      setHasReadToBottom(true);\n    }\n  };\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Terms & Conditions</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 sm:max-h-[min(640px,80vh)] sm:max-w-lg [&>button:last-child]:top-3.5\">\n        <DialogHeader className=\"contents space-y-0 text-left\">\n          <DialogTitle className=\"border-b px-6 py-4 text-base\">\n            Terms & Conditions\n          </DialogTitle>\n          <div\n            className=\"overflow-y-auto\"\n            onScroll={handleScroll}\n            ref={contentRef}\n          >\n            <DialogDescription asChild>\n              <div className=\"px-6 py-4\">\n                <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n                  <div className=\"space-y-4\">\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Acceptance of Terms</strong>\n                      </p>\n                      <p>\n                        By accessing and using this website, users agree to\n                        comply with and be bound by these Terms of Service.\n                        Users who do not agree with these terms should\n                        discontinue use of the website immediately.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>User Account Responsibilities</strong>\n                      </p>\n                      <p>\n                        Users are responsible for maintaining the\n                        confidentiality of their account credentials. Any\n                        activities occurring under a user&lsquo;s account are\n                        the sole responsibility of the account holder. Users\n                        must notify the website administrators immediately of\n                        any unauthorized account access.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Content Usage and Restrictions</strong>\n                      </p>\n                      <p>\n                        The website and its original content are protected by\n                        intellectual property laws. Users may not reproduce,\n                        distribute, modify, create derivative works, or\n                        commercially exploit any content without explicit\n                        written permission from the website owners.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Limitation of Liability</strong>\n                      </p>\n                      <p>\n                        The website provides content &ldquo;as is&ldquo; without\n                        any warranties. The website owners shall not be liable\n                        for direct, indirect, incidental, consequential, or\n                        punitive damages arising from user interactions with the\n                        platform.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>User Conduct Guidelines</strong>\n                      </p>\n                      <ul className=\"list-disc pl-6\">\n                        <li>Not upload harmful or malicious content</li>\n                        <li>Respect the rights of other users</li>\n                        <li>\n                          Avoid activities that could disrupt website\n                          functionality\n                        </li>\n                        <li>\n                          Comply with applicable local and international laws\n                        </li>\n                      </ul>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Modifications to Terms</strong>\n                      </p>\n                      <p>\n                        The website reserves the right to modify these terms at\n                        any time. Continued use of the website after changes\n                        constitutes acceptance of the new terms.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Termination Clause</strong>\n                      </p>\n                      <p>\n                        The website may terminate or suspend user access without\n                        prior notice for violations of these terms or for any\n                        other reason deemed appropriate by the administration.\n                      </p>\n                    </div>\n\n                    <div className=\"space-y-1\">\n                      <p>\n                        <strong>Governing Law</strong>\n                      </p>\n                      <p>\n                        These terms are governed by the laws of the jurisdiction\n                        where the website is primarily operated, without regard\n                        to conflict of law principles.\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </DialogDescription>\n          </div>\n        </DialogHeader>\n        <DialogFooter className=\"border-t px-6 py-4 sm:items-center\">\n          {!hasReadToBottom && (\n            <span className=\"grow text-muted-foreground text-xs max-sm:text-center\">\n              Read all terms before accepting.\n            </span>\n          )}\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n          </DialogClose>\n          <DialogClose asChild>\n            <Button disabled={!hasReadToBottom} type=\"button\">\n              I agree\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-32.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"group relative\">\n      <label\n        className=\"absolute top-1/2 block origin-start -translate-y-1/2 cursor-text px-1 text-muted-foreground/70 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:font-medium group-focus-within:text-foreground group-focus-within:text-xs has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground has-[+input:not(:placeholder-shown)]:text-xs\"\n        htmlFor={id}\n      >\n        <span className=\"inline-flex bg-background px-2\">\n          Input with label animation\n        </span>\n      </label>\n      <Input id={id} placeholder=\" \" type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-320.tsx",
    "content": "\"use client\";\n\nimport { CircleAlertIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst PROJECT_NAME = \"coss-ui\";\n\nexport default function Component() {\n  const id = useId();\n  const [inputValue, setInputValue] = useState(\"\");\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Delete project</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <CircleAlertIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">\n              Final confirmation\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              This action cannot be undone. To confirm, please enter the project\n              name <span className=\"text-foreground\">coss-ui</span>.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"*:not-first:mt-2\">\n            <Label htmlFor={id}>Project name</Label>\n            <Input\n              id={id}\n              onChange={(e) => setInputValue(e.target.value)}\n              placeholder=\"Type coss-ui to confirm\"\n              type=\"text\"\n              value={inputValue}\n            />\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button className=\"flex-1\" type=\"button\" variant=\"outline\">\n                Cancel\n              </Button>\n            </DialogClose>\n            <Button\n              className=\"flex-1\"\n              disabled={inputValue !== PROJECT_NAME}\n              type=\"button\"\n            >\n              Delete\n            </Button>\n          </DialogFooter>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-321.tsx",
    "content": "import { MailIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Newsletter</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"mb-2 flex flex-col items-center gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n              height=\"20\"\n              viewBox=\"0 0 32 32\"\n              width=\"20\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"16\" cy=\"16\" fill=\"none\" r=\"12\" strokeWidth=\"8\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">\n              Never miss an update\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              Subscribe to receive news and special offers.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"*:not-first:mt-2\">\n            <div className=\"relative\">\n              <Input\n                aria-label=\"Email\"\n                className=\"peer ps-9\"\n                id=\"dialog-subscribe\"\n                placeholder=\"hi@yourcompany.com\"\n                type=\"email\"\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <MailIcon aria-hidden=\"true\" size={16} />\n              </div>\n            </div>\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Subscribe\n          </Button>\n        </form>\n\n        <p className=\"text-center text-muted-foreground text-xs\">\n          By subscribing you agree to our{\" \"}\n          <a className=\"underline hover:no-underline\" href=\"#\">\n            Privacy Policy\n          </a>\n          .\n        </p>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-322.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Feedback</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Send us feedback</DialogTitle>\n          <DialogDescription>\n            Watch{\" \"}\n            <a className=\"text-foreground hover:underline\" href=\"#\">\n              tutorials\n            </a>\n            , read coss.com&lsquo;s{\" \"}\n            <a className=\"text-foreground hover:underline\" href=\"#\">\n              documentation\n            </a>\n            , or join our{\" \"}\n            <a className=\"text-foreground hover:underline\" href=\"#\">\n              Discord\n            </a>{\" \"}\n            for community help.\n          </DialogDescription>\n        </DialogHeader>\n        <form className=\"space-y-5\">\n          <Textarea\n            aria-label=\"Send feedback\"\n            id=\"feedback\"\n            placeholder=\"How can we improve coss.com?\"\n          />\n          <div className=\"flex flex-col sm:flex-row sm:justify-end\">\n            <Button type=\"button\">Send feedback</Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-323.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Rating</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 p-0 [&>button:last-child]:top-3.5\">\n        <DialogHeader className=\"contents space-y-0 text-left\">\n          <DialogTitle className=\"border-b px-6 py-4 text-base\">\n            Help us improve\n          </DialogTitle>\n        </DialogHeader>\n        <div className=\"px-6 py-4\">\n          <form className=\"space-y-5\">\n            <div className=\"space-y-4\">\n              <div>\n                <fieldset className=\"space-y-4\">\n                  <legend className=\"font-semibold text-foreground text-lg leading-none\">\n                    How hard was it to set up your account?\n                  </legend>\n                  <RadioGroup className=\"flex gap-0 -space-x-px rounded-md shadow-xs\">\n                    {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((number) => (\n                      <label\n                        className=\"relative flex size-9 flex-1 cursor-pointer flex-col items-center justify-center gap-3 border border-input text-center text-sm outline-none transition-[color,box-shadow] first:rounded-s-md last:rounded-e-md has-data-[state=checked]:z-10 has-data-disabled:cursor-not-allowed has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-data-disabled:opacity-50 has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n                        key={number}\n                      >\n                        <RadioGroupItem\n                          className=\"sr-only after:absolute after:inset-0\"\n                          id={`radio-17-r${number}`}\n                          value={number.toString()}\n                        />\n                        {number}\n                      </label>\n                    ))}\n                  </RadioGroup>\n                </fieldset>\n                <div className=\"mt-2 flex justify-between text-muted-foreground text-xs\">\n                  <p>Very easy</p>\n                  <p>Very dificult</p>\n                </div>\n              </div>\n\n              <div className=\"*:not-first:mt-2\">\n                <Label>Why did you give this rating?</Label>\n                <Textarea\n                  aria-label=\"Send feedback\"\n                  id=\"feedback\"\n                  placeholder=\"How can we improve coss.com?\"\n                />\n              </div>\n            </div>\n            <Button className=\"w-full\" type=\"button\">\n              Send feedback\n            </Button>\n          </form>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-324.tsx",
    "content": "\"use client\";\n\nimport { OTPInput, type SlotProps } from \"input-otp\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\n\nconst CORRECT_CODE = \"6548\";\n\nexport default function Component() {\n  const [value, setValue] = useState(\"\");\n  const [hasGuessed, setHasGuessed] = useState<undefined | boolean>(undefined);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (hasGuessed) {\n      closeButtonRef.current?.focus();\n    }\n  }, [hasGuessed]);\n\n  async function onSubmit(e?: React.FormEvent<HTMLFormElement>) {\n    e?.preventDefault?.();\n\n    inputRef.current?.select();\n    await new Promise((r) => setTimeout(r, 1_00));\n\n    setHasGuessed(value === CORRECT_CODE);\n\n    setValue(\"\");\n    setTimeout(() => {\n      inputRef.current?.blur();\n    }, 20);\n  }\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">OTP code</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n              height=\"20\"\n              viewBox=\"0 0 32 32\"\n              width=\"20\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"16\" cy=\"16\" fill=\"none\" r=\"12\" strokeWidth=\"8\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">\n              {hasGuessed ? \"Code verified!\" : \"Enter confirmation code\"}\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              {hasGuessed\n                ? \"Your code has been successfully verified.\"\n                : `Check your email and enter the code - Try ${CORRECT_CODE}`}\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        {hasGuessed ? (\n          <div className=\"text-center\">\n            <DialogClose asChild>\n              <Button ref={closeButtonRef} type=\"button\">\n                Close\n              </Button>\n            </DialogClose>\n          </div>\n        ) : (\n          <div className=\"space-y-4\">\n            <div className=\"flex justify-center\">\n              <OTPInput\n                containerClassName=\"flex items-center gap-3 has-disabled:opacity-50\"\n                id=\"cofirmation-code\"\n                maxLength={4}\n                onChange={setValue}\n                onComplete={onSubmit}\n                onFocus={() => setHasGuessed(undefined)}\n                ref={inputRef}\n                render={({ slots }) => (\n                  <div className=\"flex gap-2\">\n                    {slots.map((slot, idx) => (\n                      <Slot key={String(idx)} {...slot} />\n                    ))}\n                  </div>\n                )}\n                value={value}\n              />\n            </div>\n            {hasGuessed === false && (\n              <p\n                aria-live=\"polite\"\n                className=\"text-center text-muted-foreground text-xs\"\n                role=\"alert\"\n              >\n                Invalid code. Please try again.\n              </p>\n            )}\n            <p className=\"text-center text-sm\">\n              <a className=\"underline hover:no-underline\" href=\"#\">\n                Resend code\n              </a>\n            </p>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction Slot(props: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"flex size-9 items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow]\",\n        { \"z-10 border-ring ring-[3px] ring-ring/50\": props.isActive },\n      )}\n    >\n      {props.char !== null && <div>{props.char}</div>}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-325.tsx",
    "content": "import { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Sign up</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n              height=\"20\"\n              viewBox=\"0 0 32 32\"\n              width=\"20\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"16\" cy=\"16\" fill=\"none\" r=\"12\" strokeWidth=\"8\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">\n              Sign up coss.com\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              We just need a few details to get you started.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-name`}>Full name</Label>\n              <Input\n                id={`${id}-name`}\n                placeholder=\"Matt Welsh\"\n                required\n                type=\"text\"\n              />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-email`}>Email</Label>\n              <Input\n                id={`${id}-email`}\n                placeholder=\"hi@yourcompany.com\"\n                required\n                type=\"email\"\n              />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-password`}>Password</Label>\n              <Input\n                id={`${id}-password`}\n                placeholder=\"Enter your password\"\n                required\n                type=\"password\"\n              />\n            </div>\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Sign up\n          </Button>\n        </form>\n\n        <div className=\"flex items-center gap-3 before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border\">\n          <span className=\"text-muted-foreground text-xs\">Or</span>\n        </div>\n\n        <Button variant=\"outline\">Continue with Google</Button>\n\n        <p className=\"text-center text-muted-foreground text-xs\">\n          By signing up you agree to our{\" \"}\n          <a className=\"underline hover:no-underline\" href=\"#\">\n            Terms\n          </a>\n          .\n        </p>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-326.tsx",
    "content": "import { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Sign in</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <svg\n              aria-hidden=\"true\"\n              className=\"stroke-zinc-800 dark:stroke-zinc-100\"\n              height=\"20\"\n              viewBox=\"0 0 32 32\"\n              width=\"20\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"16\" cy=\"16\" fill=\"none\" r=\"12\" strokeWidth=\"8\" />\n            </svg>\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"sm:text-center\">Welcome back</DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              Enter your credentials to login to your account.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-email`}>Email</Label>\n              <Input\n                id={`${id}-email`}\n                placeholder=\"hi@yourcompany.com\"\n                required\n                type=\"email\"\n              />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`${id}-password`}>Password</Label>\n              <Input\n                id={`${id}-password`}\n                placeholder=\"Enter your password\"\n                required\n                type=\"password\"\n              />\n            </div>\n          </div>\n          <div className=\"flex justify-between gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <Checkbox id={`${id}-remember`} />\n              <Label\n                className=\"font-normal text-muted-foreground\"\n                htmlFor={`${id}-remember`}\n              >\n                Remember me\n              </Label>\n            </div>\n            <a className=\"text-sm underline hover:no-underline\" href=\"#\">\n              Forgot password?\n            </a>\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Sign in\n          </Button>\n        </form>\n\n        <div className=\"flex items-center gap-3 before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border\">\n          <span className=\"text-muted-foreground text-xs\">Or</span>\n        </div>\n\n        <Button variant=\"outline\">Login with Google</Button>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-327.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon, UserRoundPlusIcon } from \"lucide-react\";\nimport { useId, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  const id = useId();\n  const [emails, setEmails] = useState([\n    \"mark@yourcompany.com\",\n    \"jane@yourcompany.com\",\n    \"\",\n  ]);\n  const [copied, setCopied] = useState<boolean>(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const lastInputRef = useRef<HTMLInputElement>(null);\n\n  const addEmail = () => {\n    setEmails([...emails, \"\"]);\n  };\n\n  const handleEmailChange = (index: number, value: string) => {\n    const newEmails = [...emails];\n    newEmails[index] = value;\n    setEmails(newEmails);\n  };\n\n  const handleCopy = () => {\n    if (inputRef.current) {\n      navigator.clipboard.writeText(inputRef.current.value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    }\n  };\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Invite members</Button>\n      </DialogTrigger>\n      <DialogContent\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n          lastInputRef.current?.focus();\n        }}\n      >\n        <div className=\"flex flex-col gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <UserRoundPlusIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Invite team members</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Invite teammates to earn free components.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label>Invite via email</Label>\n              <div className=\"space-y-3\">\n                {emails.map((email, index) => (\n                  <Input\n                    id={`team-email-${index + 1}`}\n                    key={email}\n                    onChange={(e) => handleEmailChange(index, e.target.value)}\n                    placeholder=\"hi@yourcompany.com\"\n                    ref={index === emails.length - 1 ? lastInputRef : undefined}\n                    type=\"email\"\n                    value={email}\n                  />\n                ))}\n              </div>\n            </div>\n            <button\n              className=\"text-sm underline hover:no-underline\"\n              onClick={addEmail}\n              type=\"button\"\n            >\n              + Add another\n            </button>\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Send invites\n          </Button>\n        </form>\n\n        <hr className=\"my-1 border-t\" />\n\n        <div className=\"*:not-first:mt-2\">\n          <Label htmlFor={id}>Invite via magic link</Label>\n          <div className=\"relative\">\n            <Input\n              className=\"pe-9\"\n              defaultValue=\"https://coss.com/ui/refer/87689\"\n              id={id}\n              readOnly\n              ref={inputRef}\n              type=\"text\"\n            />\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <button\n                    aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n                    className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n                    disabled={copied}\n                    onClick={handleCopy}\n                    type=\"button\"\n                  >\n                    <div\n                      className={cn(\n                        \"transition-all\",\n                        copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\",\n                      )}\n                    >\n                      <CheckIcon\n                        aria-hidden=\"true\"\n                        className=\"stroke-emerald-500\"\n                        size={16}\n                      />\n                    </div>\n                    <div\n                      className={cn(\n                        \"absolute transition-all\",\n                        copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\",\n                      )}\n                    >\n                      <CopyIcon aria-hidden=\"true\" size={16} />\n                    </div>\n                  </button>\n                </TooltipTrigger>\n                <TooltipContent className=\"px-2 py-1 text-xs\">\n                  Copy to clipboard\n                </TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-328.tsx",
    "content": "\"use client\";\n\nimport { CreditCardIcon, WalletIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { usePaymentInputs } from \"react-payment-inputs\";\nimport images, { type CardImages } from \"react-payment-inputs/images\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const {\n    meta,\n    getCardNumberProps,\n    getExpiryDateProps,\n    getCVCProps,\n    getCardImageProps,\n  } = usePaymentInputs();\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Card details</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <WalletIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Update your card</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Your new card will replace your current card.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`name-${id}`}>Name on card</Label>\n              <Input id={`name-${id}`} required type=\"text\" />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`number-${id}`}>Card Number</Label>\n              <div className=\"relative\">\n                <Input\n                  {...getCardNumberProps()}\n                  className=\"peer pe-9 [direction:inherit]\"\n                  id={`number-${id}`}\n                />\n                <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                  {meta.cardType ? (\n                    <svg\n                      className=\"overflow-hidden rounded-sm\"\n                      {...getCardImageProps({\n                        images: images as unknown as CardImages,\n                      })}\n                      width={20}\n                    />\n                  ) : (\n                    <CreditCardIcon aria-hidden=\"true\" size={16} />\n                  )}\n                </div>\n              </div>\n            </div>\n            <div className=\"flex gap-4\">\n              <div className=\"flex-1 space-y-2\">\n                <Label htmlFor={`expiry-${id}`}>Expiry date</Label>\n                <Input\n                  className=\"[direction:inherit]\"\n                  {...getExpiryDateProps()}\n                  id={`expiry-${id}`}\n                />\n              </div>\n              <div className=\"flex-1 space-y-2\">\n                <Label htmlFor={`cvc-${id}`}>CVC</Label>\n                <Input\n                  className=\"[direction:inherit]\"\n                  {...getCVCProps()}\n                  id={`cvc-${id}`}\n                />\n              </div>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Checkbox id={`primary-${id}`} />\n            <Label\n              className=\"font-normal text-muted-foreground\"\n              htmlFor={`primary-${id}`}\n            >\n              Set as default payment method\n            </Label>\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Update card\n          </Button>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-329.tsx",
    "content": "\"use client\";\n\nimport { CreditCardIcon, StoreIcon } from \"lucide-react\";\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { usePaymentInputs } from \"react-payment-inputs\";\nimport images, { type CardImages } from \"react-payment-inputs/images\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  const {\n    meta,\n    getCardNumberProps,\n    getExpiryDateProps,\n    getCVCProps,\n    getCardImageProps,\n  } = usePaymentInputs();\n  const couponInputRef = useRef<HTMLInputElement>(null);\n  const [showCouponInput, setShowCouponInput] = useState(false);\n  const [couponCode, setCouponCode] = useState(\"\");\n\n  // Auto-focus the coupon input when it's shown\n  useEffect(() => {\n    if (showCouponInput && couponInputRef.current) {\n      couponInputRef.current.focus();\n    }\n  }, [showCouponInput]);\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Checkout</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"mb-2 flex flex-col gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <StoreIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Confirm and pay</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Pay securely and cancel any time.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <div className=\"space-y-4\">\n            <RadioGroup className=\"grid-cols-2\" defaultValue=\"yearly\">\n              {/* Monthly */}\n              <label className=\"relative flex cursor-pointer flex-col gap-1 rounded-md border border-input px-4 py-3 shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n                <RadioGroupItem\n                  className=\"sr-only after:absolute after:inset-0\"\n                  id=\"radio-monthly\"\n                  value=\"monthly\"\n                />\n                <p className=\"font-medium text-foreground text-sm\">Monthly</p>\n                <p className=\"text-muted-foreground text-sm\">$32/month</p>\n              </label>\n              {/* Yearly */}\n              <label className=\"relative flex cursor-pointer flex-col gap-1 rounded-md border border-input px-4 py-3 shadow-xs outline-none transition-[color,box-shadow] has-data-[state=checked]:border-primary/50 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n                <RadioGroupItem\n                  className=\"sr-only after:absolute after:inset-0\"\n                  id=\"radio-yearly\"\n                  value=\"yearly\"\n                />\n                <div className=\"inline-flex items-start justify-between gap-2\">\n                  <p className=\"font-medium text-foreground text-sm\">Yearly</p>\n                  <Badge>Popular</Badge>\n                </div>\n                <p className=\"text-muted-foreground text-sm\">$320/month</p>\n              </label>\n            </RadioGroup>\n            <div className=\"*:not-first:mt-2\">\n              <Label htmlFor={`name-${id}`}>Name on card</Label>\n              <Input id={`name-${id}`} required type=\"text\" />\n            </div>\n            <div className=\"*:not-first:mt-2\">\n              <legend className=\"font-medium text-foreground text-sm\">\n                Card Details\n              </legend>\n              <div className=\"rounded-md shadow-xs\">\n                <div className=\"relative focus-within:z-10\">\n                  <Input\n                    className=\"peer rounded-b-none pe-9 shadow-none [direction:inherit]\"\n                    {...getCardNumberProps()}\n                  />\n                  <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                    {meta.cardType ? (\n                      <svg\n                        className=\"overflow-hidden rounded-sm\"\n                        {...getCardImageProps({\n                          images: images as unknown as CardImages,\n                        })}\n                        width={20}\n                      />\n                    ) : (\n                      <CreditCardIcon aria-hidden=\"true\" size={16} />\n                    )}\n                  </div>\n                </div>\n                <div className=\"-mt-px flex\">\n                  <div className=\"min-w-0 flex-1 focus-within:z-10\">\n                    <Input\n                      className=\"rounded-e-none rounded-t-none shadow-none [direction:inherit]\"\n                      {...getExpiryDateProps()}\n                    />\n                  </div>\n                  <div className=\"-ms-px min-w-0 flex-1 focus-within:z-10\">\n                    <Input\n                      className=\"rounded-s-none rounded-t-none shadow-none [direction:inherit]\"\n                      {...getCVCProps()}\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n            {!showCouponInput ? (\n              <button\n                className=\"text-sm underline hover:no-underline\"\n                onClick={() => setShowCouponInput(true)}\n                type=\"button\"\n              >\n                + Add coupon\n              </button>\n            ) : (\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`coupon-${id}`}>Coupon code</Label>\n                <Input\n                  id={`coupon-${id}`}\n                  onChange={(e) => setCouponCode(e.target.value)}\n                  placeholder=\"Enter your code\"\n                  ref={couponInputRef}\n                  value={couponCode}\n                />\n              </div>\n            )}\n          </div>\n          <Button className=\"w-full\" type=\"button\">\n            Subscribe\n          </Button>\n        </form>\n\n        <p className=\"text-center text-muted-foreground text-xs\">\n          Payments are non-refundable. Cancel anytime.\n        </p>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-33.tsx",
    "content": "import { useId } from \"react\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative rounded-md border border-input bg-background shadow-xs outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 has-[input:is(:disabled)]:*:pointer-events-none dark:has-aria-invalid:ring-destructive/40\">\n      <label\n        className=\"block px-3 pt-2 font-medium text-foreground text-xs\"\n        htmlFor={id}\n      >\n        Input with inset label\n      </label>\n      <input\n        className=\"flex h-10 w-full bg-transparent px-3 pb-2 text-foreground text-sm placeholder:text-muted-foreground/70 focus-visible:outline-none\"\n        disabled\n        id={id}\n        placeholder=\"Email\"\n        type=\"email\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-330.tsx",
    "content": "import { CheckIcon, RefreshCcwIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Change plan</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"mb-2 flex flex-col gap-2\">\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\"\n          >\n            <RefreshCcwIcon className=\"opacity-80\" size={16} />\n          </div>\n          <DialogHeader>\n            <DialogTitle className=\"text-left\">Change your plan</DialogTitle>\n            <DialogDescription className=\"text-left\">\n              Pick one of the following plans.\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        <form className=\"space-y-5\">\n          <RadioGroup className=\"gap-2\" defaultValue=\"2\">\n            {/* Radio card #1 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                aria-describedby={`${id}-1-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n                id={`${id}-1`}\n                value=\"1\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-1`}>Essential</Label>\n                <p\n                  className=\"text-muted-foreground text-xs\"\n                  id={`${id}-1-description`}\n                >\n                  $4 per member/month\n                </p>\n              </div>\n            </div>\n            {/* Radio card #2 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                aria-describedby={`${id}-2-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n                id={`${id}-2`}\n                value=\"2\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-2`}>Standard</Label>\n                <p\n                  className=\"text-muted-foreground text-xs\"\n                  id={`${id}-2-description`}\n                >\n                  $19 per member/month\n                </p>\n              </div>\n            </div>\n            {/* Radio card #3 */}\n            <div className=\"relative flex w-full items-center gap-2 rounded-md border border-input px-4 py-3 shadow-xs outline-none has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent\">\n              <RadioGroupItem\n                aria-describedby={`${id}-3-description`}\n                className=\"order-1 after:absolute after:inset-0\"\n                id={`${id}-3`}\n                value=\"3\"\n              />\n              <div className=\"grid grow gap-1\">\n                <Label htmlFor={`${id}-3`}>Enterprise</Label>\n                <p\n                  className=\"text-muted-foreground text-xs\"\n                  id={`${id}-3-description`}\n                >\n                  $32 per member/month\n                </p>\n              </div>\n            </div>\n          </RadioGroup>\n\n          <div className=\"space-y-3\">\n            <p>\n              <strong className=\"font-medium text-sm\">Features include:</strong>\n            </p>\n            <ul className=\"space-y-2 text-muted-foreground text-sm\">\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  size={16}\n                />\n                Create unlimited projects.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  size={16}\n                />\n                Remove watermarks.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  size={16}\n                />\n                Add unlimited users and free viewers.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  size={16}\n                />\n                Upload unlimited files.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  size={16}\n                />\n                7-day money back guarantee.\n              </li>\n              <li className=\"flex gap-2\">\n                <CheckIcon\n                  aria-hidden=\"true\"\n                  className=\"mt-0.5 shrink-0 text-primary\"\n                  size={16}\n                />\n                Advanced permissions.\n              </li>\n            </ul>\n          </div>\n\n          <div className=\"grid gap-2\">\n            <Button className=\"w-full\" type=\"button\">\n              Change plan\n            </Button>\n            <DialogClose asChild>\n              <Button className=\"w-full\" type=\"button\" variant=\"ghost\">\n                Cancel\n              </Button>\n            </DialogClose>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-331.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, ImagePlusIcon, XIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { useCharacterLimit } from \"@/registry/default/hooks/use-character-limit\";\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\n// Pretend we have initial image files\nconst initialBgImage = [\n  {\n    id: \"profile-bg-123456789\",\n    name: \"profile-bg.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"/origin/profile-bg.jpg\",\n  },\n];\n\nconst initialAvatarImage = [\n  {\n    id: \"avatar-123456789\",\n    name: \"avatar-72-01.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"/origin/avatar-72-01.jpg\",\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n\n  const maxLength = 180;\n  const {\n    value,\n    characterCount,\n    handleChange,\n    maxLength: limit,\n  } = useCharacterLimit({\n    initialValue:\n      \"Hey, I am Margaret, a web developer who loves turning ideas into amazing websites!\",\n    maxLength,\n  });\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit profile</Button>\n      </DialogTrigger>\n      <DialogContent className=\"flex flex-col gap-0 overflow-y-visible p-0 sm:max-w-lg [&>button:last-child]:top-3.5\">\n        <DialogHeader className=\"contents space-y-0 text-left\">\n          <DialogTitle className=\"border-b px-6 py-4 text-base\">\n            Edit profile\n          </DialogTitle>\n        </DialogHeader>\n        <DialogDescription className=\"sr-only\">\n          Make changes to your profile here. You can change your photo and set a\n          username.\n        </DialogDescription>\n        <div className=\"overflow-y-auto\">\n          <ProfileBg />\n          <Avatar />\n          <div className=\"px-6 pt-4 pb-6\">\n            <form className=\"space-y-4\">\n              <div className=\"flex flex-col gap-4 sm:flex-row\">\n                <div className=\"flex-1 space-y-2\">\n                  <Label htmlFor={`${id}-first-name`}>First name</Label>\n                  <Input\n                    defaultValue=\"Margaret\"\n                    id={`${id}-first-name`}\n                    placeholder=\"Matt\"\n                    required\n                    type=\"text\"\n                  />\n                </div>\n                <div className=\"flex-1 space-y-2\">\n                  <Label htmlFor={`${id}-last-name`}>Last name</Label>\n                  <Input\n                    defaultValue=\"Villard\"\n                    id={`${id}-last-name`}\n                    placeholder=\"Welsh\"\n                    required\n                    type=\"text\"\n                  />\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-username`}>Username</Label>\n                <div className=\"relative\">\n                  <Input\n                    className=\"peer pe-9\"\n                    defaultValue=\"margaret-villard-69\"\n                    id={`${id}-username`}\n                    placeholder=\"Username\"\n                    required\n                    type=\"text\"\n                  />\n                  <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                    <CheckIcon\n                      aria-hidden=\"true\"\n                      className=\"text-emerald-500\"\n                      size={16}\n                    />\n                  </div>\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-website`}>Website</Label>\n                <div className=\"flex rounded-md shadow-xs\">\n                  <span className=\"-z-10 inline-flex items-center rounded-s-md border border-input bg-background px-3 text-muted-foreground text-sm\">\n                    https://\n                  </span>\n                  <Input\n                    className=\"-ms-px rounded-s-none shadow-none\"\n                    defaultValue=\"www.margaret.com\"\n                    id={`${id}-website`}\n                    placeholder=\"yourwebsite.com\"\n                    type=\"text\"\n                  />\n                </div>\n              </div>\n              <div className=\"*:not-first:mt-2\">\n                <Label htmlFor={`${id}-bio`}>Biography</Label>\n                <Textarea\n                  aria-describedby={`${id}-description`}\n                  defaultValue={value}\n                  id={`${id}-bio`}\n                  maxLength={maxLength}\n                  onChange={handleChange}\n                  placeholder=\"Write a few sentences about yourself\"\n                />\n                <p\n                  aria-live=\"polite\"\n                  className=\"mt-2 text-right text-muted-foreground text-xs\"\n                  id={`${id}-description`}\n                  role=\"status\"\n                >\n                  <span className=\"tabular-nums\">{limit - characterCount}</span>{\" \"}\n                  characters left\n                </p>\n              </div>\n            </form>\n          </div>\n        </div>\n        <DialogFooter className=\"border-t px-6 py-4\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n          </DialogClose>\n          <DialogClose asChild>\n            <Button type=\"button\">Save changes</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction ProfileBg() {\n  const [{ files }, { removeFile, openFileDialog, getInputProps }] =\n    useFileUpload({\n      accept: \"image/*\",\n      initialFiles: initialBgImage,\n    });\n\n  const currentImage = files[0]?.preview || null;\n\n  return (\n    <div className=\"h-32\">\n      <div className=\"relative flex size-full items-center justify-center overflow-hidden bg-muted\">\n        {currentImage && (\n          <img\n            alt={\n              files[0]?.preview\n                ? \"Upload preview\"\n                : \"Default profile background\"\n            }\n            className=\"size-full object-cover\"\n            height={96}\n            src={currentImage}\n            width={512}\n          />\n        )}\n        <div className=\"absolute inset-0 flex items-center justify-center gap-2\">\n          <button\n            aria-label={currentImage ? \"Change image\" : \"Upload image\"}\n            className=\"z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n            onClick={openFileDialog}\n            type=\"button\"\n          >\n            <ImagePlusIcon aria-hidden=\"true\" size={16} />\n          </button>\n          {currentImage && (\n            <button\n              aria-label=\"Remove image\"\n              className=\"z-50 flex size-10 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              onClick={() => removeFile(files[0]?.id)}\n              type=\"button\"\n            >\n              <XIcon aria-hidden=\"true\" size={16} />\n            </button>\n          )}\n        </div>\n      </div>\n      <input\n        {...getInputProps()}\n        aria-label=\"Upload image file\"\n        className=\"sr-only\"\n      />\n    </div>\n  );\n}\n\nfunction Avatar() {\n  const [{ files }, { openFileDialog, getInputProps }] = useFileUpload({\n    accept: \"image/*\",\n    initialFiles: initialAvatarImage,\n  });\n\n  const currentImage = files[0]?.preview || null;\n\n  return (\n    <div className=\"-mt-10 px-6\">\n      <div className=\"relative flex size-20 items-center justify-center overflow-hidden rounded-full border-4 border-background bg-muted shadow-black/10 shadow-xs\">\n        {currentImage && (\n          <img\n            alt=\"Profile\"\n            className=\"size-full object-cover\"\n            height={80}\n            src={currentImage}\n            width={80}\n          />\n        )}\n        <button\n          aria-label=\"Change profile picture\"\n          className=\"absolute flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n          onClick={openFileDialog}\n          type=\"button\"\n        >\n          <ImagePlusIcon aria-hidden=\"true\" size={16} />\n        </button>\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload profile picture\"\n          className=\"sr-only\"\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-332.tsx",
    "content": "\"use client\";\n\nimport { ArrowRightIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\n\nexport default function Component() {\n  const [step, setStep] = useState(1);\n\n  const stepContent = [\n    {\n      description:\n        \"Discover a powerful collection of components designed to enhance your development workflow.\",\n      title: \"Welcome to coss.com\",\n    },\n    {\n      description:\n        \"Each component is fully customizable and built with modern web standards in mind.\",\n      title: \"Customizable Components\",\n    },\n    {\n      description:\n        \"Begin building amazing interfaces with our comprehensive component library.\",\n      title: \"Ready to Start?\",\n    },\n    {\n      description:\n        \"Access our extensive documentation and community resources to make the most of coss.com.\",\n      title: \"Get Support\",\n    },\n  ];\n\n  const totalSteps = stepContent.length;\n\n  const handleContinue = () => {\n    if (step < totalSteps) {\n      setStep(step + 1);\n    }\n  };\n\n  return (\n    <Dialog\n      onOpenChange={(open) => {\n        if (open) setStep(1);\n      }}\n    >\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Onboarding</Button>\n      </DialogTrigger>\n      <DialogContent className=\"gap-0 p-0 [&>button:last-child]:text-white\">\n        <div className=\"p-2\">\n          <img\n            alt=\"dialog\"\n            className=\"w-full rounded-md\"\n            height={216}\n            src=\"/origin/dialog-content.png\"\n            width={382}\n          />\n        </div>\n        <div className=\"space-y-6 px-6 pt-3 pb-6\">\n          <DialogHeader>\n            <DialogTitle>{stepContent[step - 1].title}</DialogTitle>\n            <DialogDescription>\n              {stepContent[step - 1].description}\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n            <div className=\"flex justify-center space-x-1.5 max-sm:order-1\">\n              {[...Array(totalSteps)].map((_, index) => (\n                <div\n                  className={cn(\n                    \"size-1.5 rounded-full bg-primary\",\n                    index + 1 === step ? \"bg-primary\" : \"opacity-20\",\n                  )}\n                  key={String(index)}\n                />\n              ))}\n            </div>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button type=\"button\" variant=\"ghost\">\n                  Skip\n                </Button>\n              </DialogClose>\n              {step < totalSteps ? (\n                <Button\n                  className=\"group\"\n                  onClick={handleContinue}\n                  type=\"button\"\n                >\n                  Next\n                  <ArrowRightIcon\n                    aria-hidden=\"true\"\n                    className=\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\"\n                    size={16}\n                  />\n                </Button>\n              ) : (\n                <DialogClose asChild>\n                  <Button type=\"button\">Okay</Button>\n                </DialogClose>\n              )}\n            </DialogFooter>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-333.tsx",
    "content": "\"use client\";\n\nimport {\n  ArrowUpRightIcon,\n  CircleFadingPlusIcon,\n  FileInputIcon,\n  FolderPlusIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\n\nexport default function Component() {\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n    };\n\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  return (\n    <>\n      <button\n        className=\"inline-flex h-9 w-fit rounded-md border border-input bg-background px-3 py-2 text-foreground text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        onClick={() => setOpen(true)}\n        type=\"button\"\n      >\n        <span className=\"flex grow items-center\">\n          <SearchIcon\n            aria-hidden=\"true\"\n            className=\"-ms-1 me-3 text-muted-foreground/80\"\n            size={16}\n          />\n          <span className=\"font-normal text-muted-foreground/70\">Search</span>\n        </span>\n        <kbd className=\"ms-12 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n          ⌘K\n        </kbd>\n      </button>\n      <CommandDialog onOpenChange={setOpen} open={open}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Quick start\">\n            <CommandItem>\n              <FolderPlusIcon\n                aria-hidden=\"true\"\n                className=\"opacity-60\"\n                size={16}\n              />\n              <span>New folder</span>\n              <CommandShortcut className=\"justify-center\">⌘N</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <FileInputIcon\n                aria-hidden=\"true\"\n                className=\"opacity-60\"\n                size={16}\n              />\n              <span>Import document</span>\n              <CommandShortcut className=\"justify-center\">⌘I</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CircleFadingPlusIcon\n                aria-hidden=\"true\"\n                className=\"opacity-60\"\n                size={16}\n              />\n              <span>Add block</span>\n              <CommandShortcut className=\"justify-center\">⌘B</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Navigation\">\n            <CommandItem>\n              <ArrowUpRightIcon\n                aria-hidden=\"true\"\n                className=\"opacity-60\"\n                size={16}\n              />\n              <span>Go to dashboard</span>\n            </CommandItem>\n            <CommandItem>\n              <ArrowUpRightIcon\n                aria-hidden=\"true\"\n                className=\"opacity-60\"\n                size={16}\n              />\n              <span>Go to apps</span>\n            </CommandItem>\n            <CommandItem>\n              <ArrowUpRightIcon\n                aria-hidden=\"true\"\n                className=\"opacity-60\"\n                size={16}\n              />\n              <span>Go to connections</span>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-334.tsx",
    "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ chevron</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-335.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ plus-minus</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                {item.title}\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-336.tsx",
    "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ left chevron</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionTrigger className=\"justify-start gap-3 py-2 text-[15px] leading-6 hover:no-underline [&>svg]:-order-1\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-337.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ left plus-minus</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&>svg]:-order-1 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                {item.title}\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-338.tsx",
    "content": "import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from \"lucide-react\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    icon: CommandIcon,\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    icon: EclipseIcon,\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    icon: ZapIcon,\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    icon: AtSignIcon,\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ icon and chevron</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline\">\n              <span className=\"flex items-center gap-3\">\n                <item.icon\n                  aria-hidden=\"true\"\n                  className=\"shrink-0 opacity-60\"\n                  size={16}\n                />\n                <span>{item.title}</span>\n              </span>\n            </AccordionTrigger>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-339.tsx",
    "content": "import {\n  AtSignIcon,\n  CommandIcon,\n  EclipseIcon,\n  PlusIcon,\n  ZapIcon,\n} from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    icon: CommandIcon,\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    icon: EclipseIcon,\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    icon: ZapIcon,\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    icon: AtSignIcon,\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ icon and plus-minus</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                <span className=\"flex items-center gap-3\">\n                  <item.icon\n                    aria-hidden=\"true\"\n                    className=\"shrink-0 opacity-60\"\n                    size={16}\n                  />\n                  <span>{item.title}</span>\n                </span>\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-34.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { useCharacterLimit } from \"@/registry/default/hooks/use-character-limit\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const maxLength = 50;\n  const {\n    value,\n    characterCount,\n    handleChange,\n    maxLength: limit,\n  } = useCharacterLimit({ maxLength });\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with character limit</Label>\n      <div className=\"relative\">\n        <Input\n          aria-describedby={`${id}-description`}\n          className=\"peer pe-14\"\n          id={id}\n          maxLength={maxLength}\n          onChange={handleChange}\n          type=\"text\"\n          value={value}\n        />\n        <div\n          aria-live=\"polite\"\n          className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground text-xs tabular-nums peer-disabled:opacity-50\"\n          id={`${id}-description`}\n          role=\"status\"\n        >\n          {characterCount}/{limit}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-340.tsx",
    "content": "import { ChevronDownIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n    id: \"1\",\n    sub: \"Manage your linked social and work accounts\",\n    title: \"Connected accounts\",\n  },\n  {\n    content:\n      \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n    id: \"2\",\n    sub: \"Customize your notification preferences\",\n    title: \"Notifications\",\n  },\n  {\n    content:\n      \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n    id: \"3\",\n    sub: \"Add an extra layer of security to your account\",\n    title: \"2-step verification\",\n  },\n  {\n    content:\n      \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n    id: \"4\",\n    sub: \"We're here to help 24/7\",\n    title: \"Contact support\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ sub-header and chevron</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&[data-state=open]>svg]:rotate-180\">\n                <span className=\"flex flex-col space-y-1\">\n                  <span>{item.title}</span>\n                  {item.sub && (\n                    <span className=\"font-normal text-sm\">{item.sub}</span>\n                  )}\n                </span>\n                <ChevronDownIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-341.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n    id: \"1\",\n    sub: \"Manage your linked social and work accounts\",\n    title: \"Connected accounts\",\n  },\n  {\n    content:\n      \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n    id: \"2\",\n    sub: \"Customize your notification preferences\",\n    title: \"Notifications\",\n  },\n  {\n    content:\n      \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n    id: \"3\",\n    sub: \"Add an extra layer of security to your account\",\n    title: \"2-step verification\",\n  },\n  {\n    content:\n      \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n    id: \"4\",\n    sub: \"We're here to help 24/7\",\n    title: \"Contact support\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ sub-header and plus-minus</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                <span className=\"flex flex-col space-y-1\">\n                  <span>{item.title}</span>\n                  {item.sub && (\n                    <span className=\"font-normal text-sm\">{item.sub}</span>\n                  )}\n                </span>\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-342.tsx",
    "content": "import {\n  BellIcon,\n  ChevronDownIcon,\n  LifeBuoyIcon,\n  Link2Icon,\n  ShieldCheckIcon,\n} from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n    icon: Link2Icon,\n    id: \"1\",\n    sub: \"Manage your linked social and work accounts\",\n    title: \"Connected accounts\",\n  },\n  {\n    content:\n      \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n    icon: BellIcon,\n    id: \"2\",\n    sub: \"Customize your notification preferences\",\n    title: \"Notifications\",\n  },\n  {\n    content:\n      \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n    icon: ShieldCheckIcon,\n    id: \"3\",\n    sub: \"Add an extra layer of security to your account\",\n    title: \"2-step verification\",\n  },\n  {\n    content:\n      \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n    icon: LifeBuoyIcon,\n    id: \"4\",\n    sub: \"We're here to help 24/7\",\n    title: \"Contact support\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ icon, sub-header, and chevron</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&[data-state=open]>svg]:rotate-180\">\n                <span className=\"flex items-center gap-3\">\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"flex size-10 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <item.icon className=\"opacity-60\" size={16} />\n                  </span>\n                  <span className=\"flex flex-col space-y-1\">\n                    <span>{item.title}</span>\n                    {item.sub && (\n                      <span className=\"font-normal text-sm\">{item.sub}</span>\n                    )}\n                  </span>\n                </span>\n                <ChevronDownIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ms-3 ps-10 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-343.tsx",
    "content": "import {\n  BellIcon,\n  LifeBuoyIcon,\n  Link2Icon,\n  PlusIcon,\n  ShieldCheckIcon,\n} from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n    icon: Link2Icon,\n    id: \"1\",\n    sub: \"Manage your linked social and work accounts\",\n    title: \"Connected accounts\",\n  },\n  {\n    content:\n      \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n    icon: BellIcon,\n    id: \"2\",\n    sub: \"Customize your notification preferences\",\n    title: \"Notifications\",\n  },\n  {\n    content:\n      \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n    icon: ShieldCheckIcon,\n    id: \"3\",\n    sub: \"Add an extra layer of security to your account\",\n    title: \"2-step verification\",\n  },\n  {\n    content:\n      \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n    icon: LifeBuoyIcon,\n    id: \"4\",\n    sub: \"We're here to help 24/7\",\n    title: \"Contact support\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">W/ icon, sub-header, and plus-minus</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem className=\"py-2\" key={item.id} value={item.id}>\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                <span className=\"flex items-center gap-3\">\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"flex size-10 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <item.icon className=\"opacity-60\" size={16} />\n                  </span>\n                  <span className=\"flex flex-col space-y-1\">\n                    <span>{item.title}</span>\n                    {item.sub && (\n                      <span className=\"font-normal text-sm\">{item.sub}</span>\n                    )}\n                  </span>\n                </span>\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ms-3 ps-10 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-344.tsx",
    "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Tabs w/ chevron</h2>\n      <Accordion\n        className=\"w-full space-y-2\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline focus-visible:ring-0\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-345.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Tabs w/ plus-minus</h2>\n      <Accordion\n        className=\"w-full space-y-2\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none ocus-visible:ring-0 transition-all [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                {item.title}\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-346.tsx",
    "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Tabs w/ left chevron</h2>\n      <Accordion\n        className=\"w-full space-y-2\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionTrigger className=\"justify-start gap-3 py-2 text-[15px] leading-6 hover:no-underline focus-visible:ring-0 [&>svg]:-order-1\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-347.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Tabs w/ left plus-minus</h2>\n      <Accordion\n        className=\"w-full space-y-2\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"rounded-md border bg-background px-4 py-1 outline-none last:border-b has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:ring-0 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                {item.title}\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-348.tsx",
    "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Table w/ chevron</h2>\n      <Accordion\n        className=\"w-full -space-y-px\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"relative border bg-background px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionTrigger className=\"py-2 text-[15px] leading-6 hover:no-underline focus-visible:ring-0\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-349.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Table w/ plus-minus</h2>\n      <Accordion\n        className=\"w-full -space-y-px\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"relative border bg-background px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center justify-between rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:ring-0 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                {item.title}\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-35.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { useCharacterLimit } from \"@/registry/default/hooks/use-character-limit\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const maxLength = 8;\n  const {\n    value,\n    characterCount,\n    handleChange,\n    maxLength: limit,\n  } = useCharacterLimit({ maxLength });\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with characters left</Label>\n      <Input\n        aria-describedby={`${id}-description`}\n        id={id}\n        maxLength={maxLength}\n        onChange={handleChange}\n        type=\"text\"\n        value={value}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        id={`${id}-description`}\n        role=\"status\"\n      >\n        <span className=\"tabular-nums\">{limit - characterCount}</span>{\" \"}\n        characters left\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-350.tsx",
    "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Table w/ left chevron</h2>\n      <Accordion\n        className=\"w-full -space-y-px\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"relative border bg-background px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionTrigger className=\"justify-start gap-3 rounded-md py-2 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0 [&>svg]:-order-1\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-351.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n} from \"@/registry/default/ui/accordion\";\n\nconst items = [\n  {\n    content:\n      \"coss ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    content:\n      \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.\",\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    content:\n      \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    content:\n      \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.\",\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Table w/ left plus-minus</h2>\n      <Accordion\n        className=\"w-full -space-y-px\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"relative border bg-background px-4 py-1 outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionPrimitive.Header className=\"flex\">\n              <AccordionPrimitive.Trigger className=\"flex flex-1 items-center gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:ring-0 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&>svg]:-order-1 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n                {item.title}\n                <PlusIcon\n                  aria-hidden=\"true\"\n                  className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n                  size={16}\n                />\n              </AccordionPrimitive.Trigger>\n            </AccordionPrimitive.Header>\n            <AccordionContent className=\"ps-7 pb-2 text-muted-foreground\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-352.tsx",
    "content": "import { ChevronDownIcon } from \"lucide-react\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\";\n\nconst items = [\n  {\n    collapsibles: [\n      {\n        content:\n          \"We optimize every component for maximum performance and minimal bundle size.\",\n        title: \"What about performance?\",\n      },\n      {\n        content:\n          \"Our documentation is comprehensive and includes live examples for every component.\",\n        title: \"How is the documentation?\",\n      },\n    ],\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"Yes, our theming system is fully customizable and supports both light and dark modes.\",\n        title: \"Can I use custom themes?\",\n      },\n      {\n        content:\n          \"We have first-class support for Tailwind CSS with custom utility classes.\",\n        title: \"What about Tailwind support?\",\n      },\n    ],\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"Our components are tree-shakeable and typically add minimal overhead to your bundle.\",\n        open: true,\n        title: \"What's the bundle size impact?\",\n      },\n      {\n        content:\n          \"We support automatic code splitting for optimal loading performance.\",\n        title: \"How is code splitting handled?\",\n      },\n    ],\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\",\n        title: \"Which screen readers are supported?\",\n      },\n      {\n        content:\n          \"Full keyboard navigation support is implemented following WAI-ARIA best practices.\",\n        title: \"What about keyboard navigation?\",\n      },\n    ],\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Multi-level</h2>\n      <Accordion\n        className=\"w-full -space-y-px\"\n        collapsible\n        defaultValue=\"3\"\n        type=\"single\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            className=\"relative border bg-background outline-none first:rounded-t-md last:rounded-b-md last:border-b has-focus-visible:z-10 has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionTrigger className=\"rounded-md px-4 py-3 text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0\">\n              {item.title}\n            </AccordionTrigger>\n            <AccordionContent className=\"p-0\">\n              {item.collapsibles.map((collapsible, _index) => (\n                <CollapsibleDemo\n                  content={collapsible.content}\n                  key={collapsible.title}\n                  open={collapsible.open}\n                  title={collapsible.title}\n                />\n              ))}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n\nfunction CollapsibleDemo({\n  title,\n  content,\n  open,\n}: {\n  title: string;\n  content: string;\n  open?: boolean;\n}) {\n  return (\n    <Collapsible className=\"border-t bg-accent px-4 py-3\" defaultOpen={open}>\n      <CollapsibleTrigger className=\"flex gap-2 font-semibold text-[15px] leading-6 [&[data-state=open]>svg]:rotate-180\">\n        <ChevronDownIcon\n          aria-hidden=\"true\"\n          className=\"mt-1 shrink-0 opacity-60 transition-transform duration-200\"\n          size={16}\n        />\n        {title}\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"mt-1 overflow-hidden ps-6 text-muted-foreground text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n        {content}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-353.tsx",
    "content": "import {\n  AtSignIcon,\n  ChevronDownIcon,\n  CircleDashedIcon,\n  CommandIcon,\n  EclipseIcon,\n  GaugeIcon,\n  type LucideIcon,\n  ZapIcon,\n} from \"lucide-react\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\";\n\nconst items = [\n  {\n    collapsibles: [\n      {\n        content:\n          \"We optimize every component for maximum performance and minimal bundle size.\",\n        icon: GaugeIcon,\n        title: \"What about performance?\",\n      },\n      {\n        content:\n          \"Our documentation is comprehensive and includes live examples for every component.\",\n        icon: CircleDashedIcon,\n        title: \"How is the documentation?\",\n      },\n    ],\n    icon: CommandIcon,\n    id: \"1\",\n    title: \"What makes coss ui different?\",\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"Yes, our theming system is fully customizable and supports both light and dark modes.\",\n        icon: GaugeIcon,\n        title: \"Can I use custom themes?\",\n      },\n      {\n        content:\n          \"We have first-class support for Tailwind CSS with custom utility classes.\",\n        icon: CircleDashedIcon,\n        title: \"What about Tailwind support?\",\n      },\n    ],\n    icon: EclipseIcon,\n    id: \"2\",\n    title: \"How can I customize the components?\",\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"Our components are tree-shakeable and typically add minimal overhead to your bundle.\",\n        icon: GaugeIcon,\n        open: true,\n        title: \"What's the bundle size impact?\",\n      },\n      {\n        content:\n          \"We support automatic code splitting for optimal loading performance.\",\n        icon: CircleDashedIcon,\n        title: \"How is code splitting handled?\",\n      },\n    ],\n    icon: ZapIcon,\n    id: \"3\",\n    title: \"Is coss ui optimized for performance?\",\n  },\n  {\n    collapsibles: [\n      {\n        content:\n          \"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\",\n        icon: GaugeIcon,\n        title: \"Which screen readers are supported?\",\n      },\n      {\n        content:\n          \"Full keyboard navigation support is implemented following WAI-ARIA best practices.\",\n        icon: CircleDashedIcon,\n        title: \"What about keyboard navigation?\",\n      },\n    ],\n    icon: AtSignIcon,\n    id: \"4\",\n    title: \"How accessible are the components?\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"font-bold text-xl\">Multi-level w/ icon</h2>\n      <Accordion className=\"w-full\" collapsible defaultValue=\"3\" type=\"single\">\n        {items.map((item) => (\n          <AccordionItem\n            className=\"outline-none has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\"\n            key={item.id}\n            value={item.id}\n          >\n            <AccordionTrigger className=\"justify-start gap-3 rounded-md text-[15px] leading-6 outline-none hover:no-underline focus-visible:ring-0 [&>svg]:-order-1\">\n              <span className=\"flex items-center gap-3\">\n                <item.icon\n                  aria-hidden=\"true\"\n                  className=\"shrink-0 opacity-60\"\n                  size={16}\n                />\n                <span>{item.title}</span>\n              </span>\n            </AccordionTrigger>\n            <AccordionContent className=\"p-0\">\n              {item.collapsibles.map((collapsible, _index) => (\n                <CollapsibleDemo\n                  content={collapsible.content}\n                  icon={collapsible.icon}\n                  key={collapsible.title}\n                  open={collapsible.open}\n                  title={collapsible.title}\n                />\n              ))}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n}\n\nfunction CollapsibleDemo({\n  title,\n  content,\n  open,\n  icon: Icon,\n}: {\n  title: string;\n  content: string;\n  open?: boolean;\n  icon: LucideIcon;\n}) {\n  return (\n    <Collapsible className=\"border-t py-3 ps-6 pe-4\" defaultOpen={open}>\n      <CollapsibleTrigger className=\"flex gap-2 font-semibold text-[15px] leading-6 [&[data-state=open]>svg]:rotate-180\">\n        <ChevronDownIcon\n          aria-hidden=\"true\"\n          className=\"mt-1 shrink-0 opacity-60 transition-transform duration-200\"\n          size={16}\n        />\n        <span className=\"flex items-center gap-3\">\n          <Icon aria-hidden=\"true\" className=\"shrink-0 opacity-60\" size={16} />\n          <span>{title}</span>\n        </span>\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"mt-1 overflow-hidden ps-6 text-muted-foreground text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n        {content}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-354.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\">\n            Tiny\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"px-2 py-1 text-xs\">\n          This is a simple tooltip\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-355.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\">\n            Dark\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"dark px-2 py-1 text-xs\">\n          This tooltip will be always dark\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-356.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\">\n            W/ arrow\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"dark px-2 py-1 text-xs\" showArrow={true}>\n          This tooltip has an arrow\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-357.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\">\n            W/ title\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"py-3\">\n          <div className=\"space-y-1\">\n            <p className=\"font-medium text-[13px]\">Tooltip with title</p>\n            <p className=\"text-muted-foreground text-xs\">\n              Tooltips are made to be highly customizable, with features like\n              dynamic placement, rich content, and a robust API. You can even\n              use them as a full-featured dropdown menu by setting the{\" \"}\n              <code>trigger</code> prop to <code>click</code>.\n            </p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-358.tsx",
    "content": "import { GlobeIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\">\n            W/ icon\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"dark py-3\">\n          <div className=\"flex gap-3\">\n            <GlobeIcon\n              aria-hidden=\"true\"\n              className=\"mt-0.5 shrink-0 opacity-60\"\n              size={16}\n            />\n            <div className=\"space-y-1\">\n              <p className=\"font-medium text-[13px]\">\n                Tooltip with title and icon\n              </p>\n              <p className=\"text-muted-foreground text-xs\">\n                Tooltips are made to be highly customizable, with features like\n                dynamic placement, rich content, and a robust API.\n              </p>\n            </div>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-359.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\">\n            W/ image\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"py-3\">\n          <div className=\"space-y-2\">\n            <img\n              alt=\"Content\"\n              className=\"w-full rounded\"\n              height={216}\n              src=\"/origin/dialog-content.png\"\n              width={382}\n            />\n            <div className=\"space-y-1\">\n              <p className=\"font-medium text-[13px]\">\n                Tooltip with title and icon\n              </p>\n              <p className=\"text-muted-foreground text-xs\">\n                Tooltips are made to be highly customizable, with features like\n                dynamic placement, rich content, and a robust API.\n              </p>\n            </div>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-36.tsx",
    "content": "\"use client\";\n\nimport { Label } from \"react-aria-components\";\nimport { DateField, DateInput } from \"@/registry/default/ui/datefield-rac\";\n\nexport default function Component() {\n  return (\n    <DateField className=\"*:not-first:mt-2\">\n      <Label className=\"font-medium text-foreground text-sm\">Date input</Label>\n      <DateInput />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateField.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </DateField>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-360.tsx",
    "content": "import {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-grid w-fit grid-cols-3 gap-1\">\n      <TooltipProvider delayDuration={0}>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              aria-label=\"Pan camera up\"\n              className=\"col-start-2\"\n              size=\"icon\"\n              variant=\"outline\"\n            >\n              <ChevronUpIcon aria-hidden=\"true\" size={16} />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent className=\"px-2 py-1 text-xs\" side=\"top\">\n            Pan top\n            <kbd className=\"ms-2 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n              ⌘T\n            </kbd>\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n      <TooltipProvider delayDuration={0}>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              aria-label=\"Pan camera left\"\n              className=\"col-start-1\"\n              size=\"icon\"\n              variant=\"outline\"\n            >\n              <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent className=\"px-2 py-1 text-xs\" side=\"left\">\n            Pan left\n            <kbd className=\"ms-2 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n              ⌘L\n            </kbd>\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n      <div aria-hidden=\"true\" className=\"flex items-center justify-center\">\n        <CircleIcon className=\"opacity-60\" size={16} />\n      </div>\n      <TooltipProvider delayDuration={0}>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button aria-label=\"Pan camera right\" size=\"icon\" variant=\"outline\">\n              <ChevronRightIcon aria-hidden=\"true\" size={16} />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent className=\"px-2 py-1 text-xs\" side=\"right\">\n            Pan right\n            <kbd className=\"ms-2 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n              ⌘R\n            </kbd>\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n      <TooltipProvider delayDuration={0}>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              aria-label=\"Pan camera down\"\n              className=\"col-start-2\"\n              size=\"icon\"\n              variant=\"outline\"\n            >\n              <ChevronDownIcon aria-hidden=\"true\" size={16} />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent className=\"px-2 py-1 text-xs\" side=\"bottom\">\n            Pan bottom\n            <kbd className=\"ms-2 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n              ⌘B\n            </kbd>\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-361.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\">\n            Stats\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"py-3\">\n          <ul className=\"grid gap-3 text-xs\">\n            <li className=\"grid gap-0.5\">\n              <span className=\"text-muted-foreground\">Status</span>\n              <span className=\"font-medium\">Completed</span>\n            </li>\n            <li className=\"grid gap-0.5\">\n              <span className=\"text-muted-foreground\">Code Coverage</span>\n              <span className=\"font-medium\">94.3%</span>\n            </li>\n            <li className=\"grid gap-0.5\">\n              <span className=\"text-muted-foreground\">Last Deploy</span>\n              <span className=\"font-medium\">Today at 15:42</span>\n            </li>\n            <li className=\"grid gap-0.5\">\n              <span className=\"text-muted-foreground\">Performance Score</span>\n              <span className=\"font-medium\">98/100</span>\n            </li>\n          </ul>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-362.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"sm\" variant=\"outline\">\n            Chart\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"py-2\">\n          <div className=\"space-y-2\">\n            <div className=\"font-medium text-[13px]\">Tuesday, Aug 13</div>\n            <div className=\"flex items-center gap-2 text-xs\">\n              <svg\n                aria-hidden=\"true\"\n                className=\"shrink-0 text-indigo-500\"\n                fill=\"currentColor\"\n                height=\"8\"\n                viewBox=\"0 0 8 8\"\n                width=\"8\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <circle cx=\"4\" cy=\"4\" r=\"4\" />\n              </svg>\n              <span className=\"flex grow gap-2\">\n                Sales <span className=\"ml-auto\">$40</span>\n              </span>\n            </div>\n            <div className=\"flex items-center gap-2 text-xs\">\n              <svg\n                aria-hidden=\"true\"\n                className=\"shrink-0 text-purple-500\"\n                fill=\"currentColor\"\n                height=\"8\"\n                viewBox=\"0 0 8 8\"\n                width=\"8\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <circle cx=\"4\" cy=\"4\" r=\"4\" />\n              </svg>\n              <span className=\"flex grow gap-2\">\n                Revenue <span className=\"ml-auto\">$74</span>\n              </span>\n            </div>\n            <div className=\"flex items-center gap-2 text-xs\">\n              <svg\n                aria-hidden=\"true\"\n                className=\"shrink-0 text-rose-500\"\n                fill=\"currentColor\"\n                height=\"8\"\n                viewBox=\"0 0 8 8\"\n                width=\"8\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <circle cx=\"4\" cy=\"4\" r=\"4\" />\n              </svg>\n              <span className=\"flex grow gap-2\">\n                Costs <span className=\"ml-auto\">$410</span>\n              </span>\n            </div>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-363.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\";\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button\n          aria-label=\"My profile\"\n          asChild\n          className=\"size-auto overflow-hidden rounded-full bg-transparent p-0 hover:bg-transparent\"\n        >\n          <a href=\"#\">\n            <img\n              alt=\"Avatar\"\n              height={40}\n              src=\"/origin/avatar-40-04.jpg\"\n              width={40}\n            />\n          </a>\n        </Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-[340px]\">\n        <div className=\"flex items-start gap-3\">\n          <img\n            alt=\"Avatar\"\n            className=\"shrink-0 rounded-full\"\n            height={40}\n            src=\"/origin/avatar-40-04.jpg\"\n            width={40}\n          />\n          <div className=\"space-y-1\">\n            <p className=\"font-medium text-sm\">@Origin_UI</p>\n            <p className=\"text-muted-foreground text-sm\">\n              Beautiful UI components built with Tailwind CSS and Next.js.\n            </p>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-364.tsx",
    "content": "import {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\";\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <div className=\"flex items-center gap-3\">\n        <img\n          alt=\"Avatar\"\n          className=\"shrink-0 rounded-full\"\n          height={40}\n          src=\"/origin/avatar-40-05.jpg\"\n          width={40}\n        />\n        <div className=\"space-y-0.5\">\n          <HoverCardTrigger asChild>\n            <p>\n              <a className=\"font-medium text-sm hover:underline\" href=\"#\">\n                Keith Kennedy\n              </a>\n            </p>\n          </HoverCardTrigger>\n          <p className=\"text-muted-foreground text-xs\">@k.kennedy</p>\n        </div>\n      </div>\n      <HoverCardContent>\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center gap-3\">\n            <img\n              alt=\"Avatar\"\n              className=\"shrink-0 rounded-full\"\n              height={40}\n              src=\"/origin/avatar-40-05.jpg\"\n              width={40}\n            />\n            <div className=\"space-y-0.5\">\n              <p className=\"font-medium text-sm\">Keith Kennedy</p>\n              <p className=\"text-muted-foreground text-xs\">@k.kennedy</p>\n            </div>\n          </div>\n          <p className=\"text-muted-foreground text-sm\">\n            Designer at{\" \"}\n            <strong className=\"font-medium text-foreground\">@coss.com</strong>.\n            Crafting web experiences with Tailwind CSS.\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex -space-x-1.5\">\n              <img\n                alt=\"Friend 01\"\n                className=\"rounded-full ring-1 ring-background\"\n                height={20}\n                src=\"/origin/avatar-20-04.jpg\"\n                width={20}\n              />\n              <img\n                alt=\"Friend 02\"\n                className=\"rounded-full ring-1 ring-background\"\n                height={20}\n                src=\"/origin/avatar-20-05.jpg\"\n                width={20}\n              />\n              <img\n                alt=\"Friend 03\"\n                className=\"rounded-full ring-1 ring-background\"\n                height={20}\n                src=\"/origin/avatar-20-06.jpg\"\n                width={20}\n              />\n            </div>\n            <div className=\"text-muted-foreground text-xs\">\n              3 mutual friends\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-365.tsx",
    "content": "import {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\";\n\nexport default function HoverCardDemo() {\n  return (\n    <div className=\"max-w-md text-sm\">\n      <HoverCard>\n        <HoverCardTrigger asChild>\n          <a className=\"flex size-16 overflow-hidden rounded-md\" href=\"#\">\n            <img\n              alt=\"Content\"\n              className=\"size-full object-cover\"\n              height={216}\n              src=\"/origin/dialog-content.png\"\n              width={382}\n            />\n          </a>\n        </HoverCardTrigger>\n        <HoverCardContent className=\"w-[320px]\" showArrow>\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1\">\n              <h2 className=\"font-semibold\">\n                Building a Design System with Next.js and Tailwind CSS\n              </h2>\n              <p className=\"text-muted-foreground text-sm\">\n                Learn how to build a comprehensive design system using Tailwind\n                CSS, including component architecture, and theme customization.\n              </p>\n            </div>\n            <div className=\"flex items-center gap-2 text-muted-foreground text-xs\">\n              <span>8 min read</span>\n              <span>·</span>\n              <span>Updated 2 days ago</span>\n            </div>\n          </div>\n        </HoverCardContent>\n      </HoverCard>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-366.tsx",
    "content": "import { EllipsisIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          aria-label=\"Open edit menu\"\n          className=\"rounded-full shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          <EllipsisIcon aria-hidden=\"true\" size={16} />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem>Option 1</DropdownMenuItem>\n        <DropdownMenuItem>Option 2</DropdownMenuItem>\n        <DropdownMenuItem>Option 3</DropdownMenuItem>\n        <DropdownMenuItem>Option 4</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-367.tsx",
    "content": "import { ChevronDownIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">\n          Same width of trigger\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"-me-1 opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"min-w-(--radix-dropdown-menu-trigger-width)\">\n        <DropdownMenuItem>Option 1</DropdownMenuItem>\n        <DropdownMenuItem>Option 2</DropdownMenuItem>\n        <DropdownMenuItem>Option 3</DropdownMenuItem>\n        <DropdownMenuItem>Option 4</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-368.tsx",
    "content": "import {\n  BoltIcon,\n  ChevronDownIcon,\n  CopyPlusIcon,\n  FilesIcon,\n  Layers2Icon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">\n          Menu with icons\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"-me-1 opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem>\n          <CopyPlusIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          Copy\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <BoltIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          Edit\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Layers2Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          Group\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <FilesIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          Clone\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-369.tsx",
    "content": "import {\n  BoltIcon,\n  ChevronDownIcon,\n  CopyPlusIcon,\n  FilesIcon,\n  Layers2Icon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">\n          Grouped items\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"-me-1 opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <CopyPlusIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Copy\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BoltIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Edit\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Layers2Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Group\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <FilesIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Clone\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <TrashIcon aria-hidden=\"true\" size={16} />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-37.tsx",
    "content": "\"use client\";\n\nimport { Label } from \"react-aria-components\";\nimport { DateInput, TimeField } from \"@/registry/default/ui/datefield-rac\";\n\nexport default function Component() {\n  return (\n    <TimeField className=\"*:not-first:mt-2\">\n      <Label className=\"font-medium text-foreground text-sm\">Time input</Label>\n      <DateInput />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateField.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </TimeField>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-370.tsx",
    "content": "import {\n  BoltIcon,\n  ChevronDownIcon,\n  CopyPlusIcon,\n  FilesIcon,\n  Layers2Icon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">\n          Labeled grouped items\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"-me-1 opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuLabel>Label</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <CopyPlusIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Copy\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BoltIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Edit\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuLabel>Label</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Layers2Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Group\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <FilesIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Clone\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <TrashIcon aria-hidden=\"true\" size={16} />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-371.tsx",
    "content": "\"use client\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\ntype Checked = boolean;\n\nexport default function Component() {\n  const [nextjs, setNextjs] = useState<Checked>(false);\n  const [sveltekit, setSveltekit] = useState<Checked>(true);\n  const [astro, setAstro] = useState<Checked>(false);\n  const [remix, setRemix] = useState<Checked>(false);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">\n          Checkbox items\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"-me-1 opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuCheckboxItem checked={nextjs} onCheckedChange={setNextjs}>\n          Next.js\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={sveltekit}\n          onCheckedChange={setSveltekit}\n        >\n          SvelteKit\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem\n          checked={remix}\n          disabled\n          onCheckedChange={setRemix}\n        >\n          Remix\n        </DropdownMenuCheckboxItem>\n        <DropdownMenuCheckboxItem checked={astro} onCheckedChange={setAstro}>\n          Astro\n        </DropdownMenuCheckboxItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-372.tsx",
    "content": "\"use client\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  const [framework, setFramework] = useState(\"nextjs\");\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">\n          Radio items\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"-me-1 opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuRadioGroup onValueChange={setFramework} value={framework}>\n          <DropdownMenuRadioItem value=\"nextjs\">Next.js</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem disabled value=\"sveltekit\">\n            SvelteKit\n          </DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"remix\">Remix</DropdownMenuRadioItem>\n          <DropdownMenuRadioItem value=\"astro\">Astro</DropdownMenuRadioItem>\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-373.tsx",
    "content": "import { ChevronDownIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">\n          Rich menu\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"-me-1 opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem variant=\"destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-374.tsx",
    "content": "\"use client\";\n\nimport {\n  ArchiveRestoreIcon,\n  ChevronDownIcon,\n  PlusIcon,\n  Share2Icon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  const [framework, setFramework] = useState(\"nextjs\");\n  const [emailNotifications, setEmailNotifications] = useState(false);\n  const [pushNotifications, setPushNotifications] = useState(true);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">\n          Rich menu with icons\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"-me-1 opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PlusIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>New</span>\n            <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>Framework</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuRadioGroup\n                  onValueChange={setFramework}\n                  value={framework}\n                >\n                  <DropdownMenuRadioItem value=\"nextjs\">\n                    Next.js\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem disabled value=\"sveltekit\">\n                    SvelteKit\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"remix\">\n                    Remix\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"astro\">\n                    Astro\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>Notifications</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuCheckboxItem\n                  checked={emailNotifications}\n                  onCheckedChange={setEmailNotifications}\n                >\n                  Email\n                </DropdownMenuCheckboxItem>\n                <DropdownMenuCheckboxItem\n                  checked={pushNotifications}\n                  onCheckedChange={setPushNotifications}\n                >\n                  Push\n                </DropdownMenuCheckboxItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <Share2Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Share</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <ArchiveRestoreIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n            <span>Archive</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem variant=\"destructive\">\n          <TrashIcon aria-hidden=\"true\" size={16} />\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-375.tsx",
    "content": "import { CircleUserRoundIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button aria-label=\"Open account menu\" size=\"icon\" variant=\"outline\">\n          <CircleUserRoundIcon aria-hidden=\"true\" size={16} />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\">\n        <DropdownMenuLabel className=\"flex flex-col\">\n          <span>Signed in as</span>\n          <span className=\"font-normal text-foreground text-xs\">\n            k.kennedy@coss.com\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Option 1</DropdownMenuItem>\n          <DropdownMenuItem>Option 2</DropdownMenuItem>\n          <DropdownMenuItem>Option 3</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>Logout</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-376.tsx",
    "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  CircleUserRoundIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button aria-label=\"Open account menu\" size=\"icon\" variant=\"outline\">\n          <CircleUserRoundIcon aria-hidden=\"true\" size={16} />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\">\n        <DropdownMenuLabel className=\"flex items-start gap-3\">\n          <img\n            alt=\"Avatar\"\n            className=\"shrink-0 rounded-full\"\n            height={32}\n            src=\"/origin/avatar.jpg\"\n            width={32}\n          />\n          <div className=\"flex min-w-0 flex-col\">\n            <span className=\"truncate font-medium text-foreground text-sm\">\n              Keith Kennedy\n            </span>\n            <span className=\"truncate font-normal text-muted-foreground text-xs\">\n              k.kennedy@coss.com\n            </span>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-377.tsx",
    "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  ChevronDownIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button className=\"h-auto p-0 hover:bg-transparent\" variant=\"ghost\">\n          <Avatar>\n            <AvatarImage alt=\"Profile image\" src=\"/origin/avatar.jpg\" />\n            <AvatarFallback>KK</AvatarFallback>\n          </Avatar>\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate font-medium text-foreground text-sm\">\n            Keith Kennedy\n          </span>\n          <span className=\"truncate font-normal text-muted-foreground text-xs\">\n            k.kennedy@coss.com\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-378.tsx",
    "content": "import {\n  BookIcon,\n  InfoIcon,\n  LifeBuoyIcon,\n  MessageCircleMoreIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          aria-label=\"Open edit menu\"\n          className=\"rounded-full shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          <InfoIcon aria-hidden=\"true\" size={16} />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"pb-2\">\n        <DropdownMenuLabel>Need help?</DropdownMenuLabel>\n        <DropdownMenuItem\n          asChild\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n        >\n          <a href=\"#\">\n            <BookIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Documentation\n          </a>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          asChild\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n        >\n          <a href=\"#\">\n            <LifeBuoyIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Support\n          </a>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          asChild\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n        >\n          <a href=\"#\">\n            <MessageCircleMoreIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n            Contact us\n          </a>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-379.tsx",
    "content": "import {\n  Heading1Icon,\n  Heading2Icon,\n  MinusIcon,\n  PlusIcon,\n  TextQuoteIcon,\n  TypeIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          aria-label=\"Open edit menu\"\n          className=\"rounded-full shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          <PlusIcon aria-hidden=\"true\" size={16} />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"pb-2\">\n        <DropdownMenuLabel>Add block</DropdownMenuLabel>\n        <DropdownMenuItem>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-8 items-center justify-center rounded-md border bg-background\"\n          >\n            <TypeIcon className=\"opacity-60\" size={16} />\n          </div>\n          <div>\n            <div className=\"font-medium text-sm\">Text</div>\n            <div className=\"text-muted-foreground text-xs\">\n              Start writing with plain text\n            </div>\n          </div>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-8 items-center justify-center rounded-md border bg-background\"\n          >\n            <TextQuoteIcon className=\"opacity-60\" size={16} />\n          </div>\n          <div>\n            <div className=\"font-medium text-sm\">Quote</div>\n            <div className=\"text-muted-foreground text-xs\">Capture a quote</div>\n          </div>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-8 items-center justify-center rounded-md border bg-background\"\n          >\n            <MinusIcon className=\"opacity-60\" size={16} />\n          </div>\n          <div>\n            <div className=\"font-medium text-sm\">Divider</div>\n            <div className=\"text-muted-foreground text-xs\">\n              Visually divide blocks\n            </div>\n          </div>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-8 items-center justify-center rounded-md border bg-background\"\n          >\n            <Heading1Icon className=\"opacity-60\" size={16} />\n          </div>\n          <div>\n            <div className=\"font-medium text-sm\">Heading 1</div>\n            <div className=\"text-muted-foreground text-xs\">\n              Big section heading\n            </div>\n          </div>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-8 items-center justify-center rounded-md border bg-background\"\n          >\n            <Heading2Icon className=\"opacity-60\" size={16} />\n          </div>\n          <div>\n            <div className=\"font-medium text-sm\">Heading 2</div>\n            <div className=\"text-muted-foreground text-xs\">\n              Medium section subheading\n            </div>\n          </div>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-38.tsx",
    "content": "\"use client\";\n\nimport { ClockIcon } from \"lucide-react\";\nimport { Label } from \"react-aria-components\";\nimport { DateInput, TimeField } from \"@/registry/default/ui/datefield-rac\";\n\nexport default function Component() {\n  return (\n    <TimeField className=\"*:not-first:mt-2\">\n      <Label className=\"font-medium text-foreground text-sm\">\n        Time input with start icon\n      </Label>\n      <div className=\"relative\">\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 z-10 flex items-center justify-center ps-3 text-muted-foreground/80\">\n          <ClockIcon aria-hidden=\"true\" size={16} />\n        </div>\n        <DateInput className=\"ps-9\" />\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateField.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </TimeField>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-380.tsx",
    "content": "\"use client\";\n\nimport { MonitorIcon, MoonIcon, SunIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\ntype Theme = \"light\" | \"dark\" | \"system\";\n\nexport default function Component() {\n  const [theme, setTheme] = useState<Theme>(\"system\");\n\n  // For demo purposes, we'll simulate system preference as \"light\"\n  const systemPreference = \"light\";\n  const displayTheme = theme === \"system\" ? systemPreference : theme;\n\n  return (\n    <div>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button aria-label=\"Select theme\" size=\"icon\" variant=\"outline\">\n            {displayTheme === \"light\" && (\n              <SunIcon aria-hidden=\"true\" size={16} />\n            )}\n            {displayTheme === \"dark\" && (\n              <MoonIcon aria-hidden=\"true\" size={16} />\n            )}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-32\">\n          <DropdownMenuItem onClick={() => setTheme(\"light\")}>\n            <SunIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Light</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => setTheme(\"dark\")}>\n            <MoonIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Dark</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => setTheme(\"system\")}>\n            <MonitorIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>System</span>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-381.tsx",
    "content": "import { ListFilterIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button aria-label=\"Filters\" size=\"icon\" variant=\"outline\">\n            <ListFilterIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-36 p-3\">\n          <div className=\"space-y-3\">\n            <div className=\"font-medium text-muted-foreground text-xs\">\n              Filters\n            </div>\n            <form>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-1`} />\n                  <Label className=\"font-normal\" htmlFor={`${id}-1`}>\n                    Real Time\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-2`} />\n                  <Label className=\"font-normal\" htmlFor={`${id}-2`}>\n                    Top Channels\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-3`} />\n                  <Label className=\"font-normal\" htmlFor={`${id}-3`}>\n                    Last Orders\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-4`} />\n                  <Label className=\"font-normal\" htmlFor={`${id}-4`}>\n                    Total Spent\n                  </Label>\n                </div>\n              </div>\n              <div\n                aria-orientation=\"horizontal\"\n                className=\"-mx-3 my-3 h-px bg-border\"\n                role=\"separator\"\n                tabIndex={-1}\n              />\n              <div className=\"flex justify-between gap-2\">\n                <Button className=\"h-7 px-2\" size=\"sm\" variant=\"outline\">\n                  Clear\n                </Button>\n                <Button className=\"h-7 px-2\" size=\"sm\">\n                  Apply\n                </Button>\n              </div>\n            </form>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-382.tsx",
    "content": "\"use client\";\n\nimport { BellIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst initialNotifications = [\n  {\n    action: \"requested review on\",\n    id: 1,\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n    user: \"Chris Tompson\",\n  },\n  {\n    action: \"shared\",\n    id: 2,\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n    user: \"Emma Davis\",\n  },\n  {\n    action: \"assigned you to\",\n    id: 3,\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n    user: \"James Wilson\",\n  },\n  {\n    action: \"replied to your comment in\",\n    id: 4,\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n    user: \"Alex Morgan\",\n  },\n  {\n    action: \"commented on\",\n    id: 5,\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n    user: \"Sarah Chen\",\n  },\n  {\n    action: \"mentioned you in\",\n    id: 6,\n    target: \"coss.com open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n    user: \"Miky Derya\",\n  },\n];\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"currentColor\"\n      height=\"6\"\n      viewBox=\"0 0 6 6\"\n      width=\"6\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  );\n}\n\nexport default function Component() {\n  const [notifications, setNotifications] = useState(initialNotifications);\n  const unreadCount = notifications.filter((n) => n.unread).length;\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      })),\n    );\n  };\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification,\n      ),\n    );\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          aria-label=\"Open notifications\"\n          className=\"relative\"\n          size=\"icon\"\n          variant=\"outline\"\n        >\n          <BellIcon aria-hidden=\"true\" size={16} />\n          {unreadCount > 0 && (\n            <Badge className=\"absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1\">\n              {unreadCount > 99 ? \"99+\" : unreadCount}\n            </Badge>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"font-semibold text-sm\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"font-medium text-xs hover:underline\"\n              onClick={handleMarkAllAsRead}\n              type=\"button\"\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n          role=\"separator\"\n          tabIndex={-1}\n        />\n        {notifications.map((notification) => (\n          <div\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n            key={notification.id}\n          >\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                  type=\"button\"\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-muted-foreground text-xs\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-383.tsx",
    "content": "\"use client\";\n\nimport { BellIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst initialNotifications = [\n  {\n    action: \"requested review on\",\n    id: 1,\n    image: \"/origin/avatar-80-01.jpg\",\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n    user: \"Chris Tompson\",\n  },\n  {\n    action: \"shared\",\n    id: 2,\n    image: \"/origin/avatar-80-02.jpg\",\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n    user: \"Emma Davis\",\n  },\n  {\n    action: \"assigned you to\",\n    id: 3,\n    image: \"/origin/avatar-80-03.jpg\",\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n    user: \"James Wilson\",\n  },\n  {\n    action: \"replied to your comment in\",\n    id: 4,\n    image: \"/origin/avatar-80-04.jpg\",\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n    user: \"Alex Morgan\",\n  },\n  {\n    action: \"commented on\",\n    id: 5,\n    image: \"/origin/avatar-80-05.jpg\",\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n    user: \"Sarah Chen\",\n  },\n  {\n    action: \"mentioned you in\",\n    id: 6,\n    image: \"/origin/avatar-80-06.jpg\",\n    target: \"coss.com open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n    user: \"Miky Derya\",\n  },\n];\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"currentColor\"\n      height=\"6\"\n      viewBox=\"0 0 6 6\"\n      width=\"6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  );\n}\n\nexport default function Component() {\n  const [notifications, setNotifications] = useState(initialNotifications);\n  const unreadCount = notifications.filter((n) => n.unread).length;\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      })),\n    );\n  };\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification,\n      ),\n    );\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          aria-label=\"Open notifications\"\n          className=\"relative\"\n          size=\"icon\"\n          variant=\"outline\"\n        >\n          <BellIcon aria-hidden=\"true\" size={16} />\n          {unreadCount > 0 && (\n            <Badge className=\"absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1\">\n              {unreadCount > 99 ? \"99+\" : unreadCount}\n            </Badge>\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"font-semibold text-sm\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"font-medium text-xs hover:underline\"\n              onClick={handleMarkAllAsRead}\n              type=\"button\"\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n          role=\"separator\"\n          tabIndex={-1}\n        />\n        {notifications.map((notification) => (\n          <div\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n            key={notification.id}\n          >\n            <div className=\"relative flex items-start gap-3 pe-3\">\n              <img\n                alt={notification.user}\n                className=\"size-9 rounded-md\"\n                height={32}\n                src={notification.image}\n                width={32}\n              />\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                  type=\"button\"\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-muted-foreground text-xs\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-384.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Component() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Tooltip-like popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"max-w-[280px] py-3 shadow-none\" side=\"top\">\n        <div className=\"space-y-3\">\n          <div className=\"space-y-1\">\n            <p className=\"font-medium text-[13px]\">Popover with button</p>\n            <p className=\"text-muted-foreground text-xs\">\n              I am a popover that would like to look like a tooltip. I\n              can&lsquo;t be a tooltip because of the interactive element inside\n              me.\n            </p>\n          </div>\n          <Button className=\"h-7 px-2\" size=\"sm\">\n            Know more\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-385.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst tips = [\n  {\n    description:\n      \"This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.\",\n    title: \"Welcome to Dashboard\",\n  },\n  {\n    description:\n      \"Use the toolbar above to create new projects, invite team members, or access settings.\",\n    title: \"Quick Actions\",\n  },\n  {\n    description:\n      \"Click the support icon in the top right corner to access our help center and documentation.\",\n    title: \"Need Help?\",\n  },\n];\n\nexport default function Component() {\n  const [currentTip, setCurrentTip] = useState(0);\n\n  const handleNavigation = () => {\n    if (currentTip === tips.length - 1) {\n      setCurrentTip(0);\n    } else {\n      setCurrentTip(currentTip + 1);\n    }\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Tooltip-like with steps</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"max-w-[280px] py-3 shadow-none\" side=\"top\">\n        <div className=\"space-y-3\">\n          <div className=\"space-y-1\">\n            <p className=\"font-medium text-[13px]\">{tips[currentTip].title}</p>\n            <p className=\"text-muted-foreground text-xs\">\n              {tips[currentTip].description}\n            </p>\n          </div>\n          <div className=\"flex items-center justify-between gap-2\">\n            <span className=\"text-muted-foreground text-xs\">\n              {currentTip + 1}/{tips.length}\n            </span>\n            <button\n              className=\"font-medium text-xs hover:underline\"\n              onClick={handleNavigation}\n              type=\"button\"\n            >\n              {currentTip === tips.length - 1 ? \"Start over\" : \"Next\"}\n            </button>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-386.tsx",
    "content": "\"use client\";\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst tips = [\n  {\n    description:\n      \"This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.\",\n    title: \"Welcome to Dashboard\",\n  },\n  {\n    description:\n      \"Use the toolbar above to create new projects, invite team members, or access settings.\",\n    title: \"Quick Actions\",\n  },\n  {\n    description:\n      \"Click the support icon in the top right corner to access our help center and documentation.\",\n    title: \"Need Help?\",\n  },\n  {\n    description:\n      \"Press ⌘K to open the command palette. Use arrow keys to navigate and Enter to select an action.\",\n    title: \"Keyboard Shortcuts\",\n  },\n  {\n    description:\n      \"Enable notifications to receive updates about your projects, team activity, and important deadlines.\",\n    title: \"Stay Updated\",\n  },\n];\n\nexport default function Component() {\n  const [currentTip, setCurrentTip] = useState(0);\n\n  const handleNext = () => {\n    if (currentTip < tips.length - 1) {\n      setCurrentTip(currentTip + 1);\n    }\n  };\n\n  const handlePrev = () => {\n    if (currentTip > 0) {\n      setCurrentTip(currentTip - 1);\n    }\n  };\n\n  const isFirstTip = currentTip === 0;\n  const isLastTip = currentTip === tips.length - 1;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Tooltip-like with nav</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"max-w-[280px] py-3 shadow-none\" side=\"top\">\n        <div className=\"space-y-3\">\n          <div className=\"space-y-1\">\n            <p className=\"font-medium text-[13px]\">{tips[currentTip].title}</p>\n            <p className=\"text-muted-foreground text-xs\">\n              {tips[currentTip].description}\n            </p>\n          </div>\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground text-xs\">\n              {currentTip + 1}/{tips.length}\n            </span>\n            <div className=\"flex gap-0.5\">\n              <Button\n                aria-label=\"Previous tip\"\n                className=\"size-6\"\n                disabled={isFirstTip}\n                onClick={handlePrev}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <ArrowLeftIcon aria-hidden=\"true\" size={14} />\n              </Button>\n              <Button\n                aria-label=\"Next tip\"\n                className=\"size-6\"\n                disabled={isLastTip}\n                onClick={handleNext}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <ArrowRightIcon aria-hidden=\"true\" size={14} />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-387.tsx",
    "content": "\"use client\";\n\nimport {\n  RiCodeFill,\n  RiFacebookFill,\n  RiMailLine,\n  RiTwitterXFill,\n} from \"@remixicon/react\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useId, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  const id = useId();\n  const [copied, setCopied] = useState<boolean>(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleCopy = () => {\n    if (inputRef.current) {\n      navigator.clipboard.writeText(inputRef.current.value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\">Share</Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-72\">\n          <div className=\"flex flex-col gap-3 text-center\">\n            <div className=\"font-medium text-sm\">Share code</div>\n            <div className=\"flex flex-wrap justify-center gap-2\">\n              <Button aria-label=\"Embed\" size=\"icon\" variant=\"outline\">\n                <RiCodeFill aria-hidden=\"true\" size={16} />\n              </Button>\n              <Button\n                aria-label=\"Share on Twitter\"\n                size=\"icon\"\n                variant=\"outline\"\n              >\n                <RiTwitterXFill aria-hidden=\"true\" size={16} />\n              </Button>\n              <Button\n                aria-label=\"Share on Facebook\"\n                size=\"icon\"\n                variant=\"outline\"\n              >\n                <RiFacebookFill aria-hidden=\"true\" size={16} />\n              </Button>\n              <Button\n                aria-label=\"Share via email\"\n                size=\"icon\"\n                variant=\"outline\"\n              >\n                <RiMailLine aria-hidden=\"true\" size={16} />\n              </Button>\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"relative\">\n                <Input\n                  aria-label=\"Share link\"\n                  className=\"pe-9\"\n                  defaultValue=\"https://coss.com/origin/Avx8HD\"\n                  id={id}\n                  readOnly\n                  ref={inputRef}\n                  type=\"text\"\n                />\n                <TooltipProvider delayDuration={0}>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <button\n                        aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n                        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n                        disabled={copied}\n                        onClick={handleCopy}\n                        type=\"button\"\n                      >\n                        <div\n                          className={cn(\n                            \"transition-all\",\n                            copied\n                              ? \"scale-100 opacity-100\"\n                              : \"scale-0 opacity-0\",\n                          )}\n                        >\n                          <CheckIcon\n                            aria-hidden=\"true\"\n                            className=\"stroke-emerald-500\"\n                            size={16}\n                          />\n                        </div>\n                        <div\n                          className={cn(\n                            \"absolute transition-all\",\n                            copied\n                              ? \"scale-0 opacity-0\"\n                              : \"scale-100 opacity-100\",\n                          )}\n                        >\n                          <CopyIcon aria-hidden=\"true\" size={16} />\n                        </div>\n                      </button>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"px-2 py-1 text-xs\">\n                      Copy to clipboard\n                    </TooltipContent>\n                  </Tooltip>\n                </TooltipProvider>\n              </div>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-388.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\">Feedback</Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-72\">\n          <h2 className=\"mb-2 font-semibold text-sm\">Send us feedback</h2>\n          <form className=\"space-y-3\">\n            <Textarea\n              aria-label=\"Send feedback\"\n              id=\"feedback\"\n              placeholder=\"How can we improve coss ui?\"\n            />\n            <div className=\"flex flex-col sm:flex-row sm:justify-end\">\n              <Button size=\"sm\">Send feedback</Button>\n            </div>\n          </form>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-389.tsx",
    "content": "\"use client\";\n\nimport {\n  ClubIcon,\n  DiamondIcon,\n  HeartIcon,\n  type LucideIcon,\n  SpadeIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface TourStep {\n  icon: LucideIcon;\n  title: string;\n  description: string;\n}\n\nconst tourSteps: TourStep[] = [\n  {\n    description:\n      \"This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.\",\n    icon: HeartIcon,\n    title: \"Heart\",\n  },\n  {\n    description:\n      \"Use the toolbar above to create new projects, invite team members, or access settings.\",\n    icon: DiamondIcon,\n    title: \"Diamond\",\n  },\n  {\n    description:\n      \"Click the support icon in the top right corner to access our help center and documentation.\",\n    icon: ClubIcon,\n    title: \"Club\",\n  },\n  {\n    description:\n      \"Press ⌘K to open the command palette. Use arrow keys to navigate and Enter to select an action.\",\n    icon: SpadeIcon,\n    title: \"Spade\",\n  },\n];\n\ninterface CardProps {\n  number: number;\n  isActive: boolean;\n}\n\nfunction Card({ number, isActive }: CardProps) {\n  const content = (\n    <div className=\"flex size-10 items-center justify-center rounded-md bg-secondary font-medium text-muted-foreground text-sm\">\n      {number + 1}\n    </div>\n  );\n\n  return isActive ? <PopoverAnchor>{content}</PopoverAnchor> : content;\n}\n\nexport default function Component() {\n  const [currentTip, setCurrentTip] = useState(0);\n\n  const handleNavigation = () => {\n    if (currentTip === tourSteps.length - 1) {\n      setCurrentTip(0);\n    } else {\n      setCurrentTip(currentTip + 1);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Popover\n        onOpenChange={(open) => {\n          if (open) setCurrentTip(0);\n        }}\n      >\n        <div className=\"grid grid-cols-2 place-items-center gap-4\">\n          {tourSteps.map((step, index) => (\n            <Card\n              isActive={currentTip === index}\n              key={step.title}\n              number={index}\n            />\n          ))}\n        </div>\n\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\">Start tour</Button>\n        </PopoverTrigger>\n\n        <PopoverContent\n          className=\"max-w-[280px] py-3 shadow-none\"\n          showArrow={true}\n          side={currentTip % 2 === 0 ? \"left\" : \"right\"}\n        >\n          <div className=\"space-y-3\">\n            <div className=\"space-y-1\">\n              <p className=\"font-medium text-[13px]\">\n                {tourSteps[currentTip].title}\n              </p>\n              <p className=\"text-muted-foreground text-xs\">\n                {tourSteps[currentTip].description}\n              </p>\n            </div>\n            <div className=\"flex items-center justify-between gap-2\">\n              <span className=\"text-muted-foreground text-xs\">\n                {currentTip + 1}/{tourSteps.length}\n              </span>\n              <button\n                className=\"font-medium text-xs hover:underline\"\n                onClick={handleNavigation}\n                type=\"button\"\n              >\n                {currentTip === tourSteps.length - 1 ? \"Start over\" : \"Next\"}\n              </button>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-39.tsx",
    "content": "\"use client\";\n\nimport { ClockIcon } from \"lucide-react\";\nimport { Label } from \"react-aria-components\";\nimport { DateInput, TimeField } from \"@/registry/default/ui/datefield-rac\";\n\nexport default function Component() {\n  return (\n    <TimeField className=\"*:not-first:mt-2\">\n      <Label className=\"font-medium text-foreground text-sm\">\n        Time input with end icon\n      </Label>\n      <div className=\"relative\">\n        <DateInput />\n        <div className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center justify-center pe-3 text-muted-foreground/80\">\n          <ClockIcon aria-hidden=\"true\" size={16} />\n        </div>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateField.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </TimeField>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-390.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Component() {\n  return (\n    <Avatar>\n      <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n      <AvatarFallback>KK</AvatarFallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-391.tsx",
    "content": "import { Avatar, AvatarFallback } from \"@/registry/default/ui/avatar\";\n\nexport default function Component() {\n  return (\n    <Avatar>\n      <AvatarFallback>KK</AvatarFallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-392.tsx",
    "content": "import { UserRoundIcon } from \"lucide-react\";\nimport { Avatar, AvatarFallback } from \"@/registry/default/ui/avatar\";\n\nexport default function Component() {\n  return (\n    <Avatar>\n      <AvatarFallback>\n        <UserRoundIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-393.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Component() {\n  return (\n    <Avatar className=\"rounded-md\">\n      <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n      <AvatarFallback>KK</AvatarFallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-394.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Component() {\n  return (\n    <div className=\"relative\">\n      <Avatar>\n        <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n        <AvatarFallback>KK</AvatarFallback>\n      </Avatar>\n      <span className=\"absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background bg-emerald-500\">\n        <span className=\"sr-only\">Online</span>\n      </span>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-395.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Component() {\n  return (\n    <div className=\"relative\">\n      <Avatar>\n        <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n        <AvatarFallback>KK</AvatarFallback>\n      </Avatar>\n      <span className=\"absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background bg-muted-foreground\">\n        <span className=\"sr-only\">Offline</span>\n      </span>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-396.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Component() {\n  return (\n    <div className=\"relative\">\n      <Avatar className=\"rounded-md\">\n        <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n        <AvatarFallback>KK</AvatarFallback>\n      </Avatar>\n      <span className=\"absolute -end-1 -top-1 size-3 rounded-full border-2 border-background bg-emerald-500\">\n        <span className=\"sr-only\">Online</span>\n      </span>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-397.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Component() {\n  return (\n    <div className=\"relative\">\n      <Avatar>\n        <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n        <AvatarFallback>KK</AvatarFallback>\n      </Avatar>\n      <span className=\"absolute -end-1.5 -top-1.5\">\n        <span className=\"sr-only\">Verified</span>\n        <svg\n          aria-hidden=\"true\"\n          height=\"20\"\n          viewBox=\"0 0 24 24\"\n          width=\"20\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            className=\"fill-background\"\n            d=\"M3.046 8.277A4.402 4.402 0 0 1 8.303 3.03a4.4 4.4 0 0 1 7.411 0 4.397 4.397 0 0 1 5.19 3.068c.207.713.23 1.466.067 2.19a4.4 4.4 0 0 1 0 7.415 4.403 4.403 0 0 1-3.06 5.187 4.398 4.398 0 0 1-2.186.072 4.398 4.398 0 0 1-7.422 0 4.398 4.398 0 0 1-5.257-5.248 4.4 4.4 0 0 1 0-7.437Z\"\n          />\n          <path\n            className=\"fill-primary\"\n            d=\"M4.674 8.954a3.602 3.602 0 0 1 4.301-4.293 3.6 3.6 0 0 1 6.064 0 3.598 3.598 0 0 1 4.3 4.302 3.6 3.6 0 0 1 0 6.067 3.6 3.6 0 0 1-4.29 4.302 3.6 3.6 0 0 1-6.074 0 3.598 3.598 0 0 1-4.3-4.293 3.6 3.6 0 0 1 0-6.085Z\"\n          />\n          <path\n            className=\"fill-background\"\n            d=\"M15.707 9.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z\"\n          />\n        </svg>\n      </span>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-398.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <div className=\"relative\">\n      <Avatar>\n        <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n        <AvatarFallback>KK</AvatarFallback>\n      </Avatar>\n      <Badge className=\"absolute -top-1.5 left-full min-w-5 -translate-x-3.5 border-background px-1\">\n        6\n      </Badge>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-399.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <div className=\"relative\">\n      <Avatar className=\"rounded-md\">\n        <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n        <AvatarFallback>KK</AvatarFallback>\n      </Avatar>\n      <Badge className=\"absolute -top-2 left-full min-w-5 -translate-x-3 border-background px-1\">\n        6\n      </Badge>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-40.tsx",
    "content": "\"use client\";\n\nimport { Label } from \"react-aria-components\";\nimport { DateField, DateInput } from \"@/registry/default/ui/datefield-rac\";\n\nexport default function Component() {\n  return (\n    <DateField className=\"*:not-first:mt-2\" granularity=\"minute\" hourCycle={24}>\n      <Label className=\"font-medium text-foreground text-sm\">\n        Date and time input\n      </Label>\n      <DateInput />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateField.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </DateField>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-400.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-1.5\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-1 ring-background\"\n        height={20}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={20}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-1 ring-background\"\n        height={20}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={20}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-1 ring-background\"\n        height={20}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={20}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-1 ring-background\"\n        height={20}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={20}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-401.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-[0.45rem]\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-1 ring-background\"\n        height={24}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={24}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-1 ring-background\"\n        height={24}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={24}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-1 ring-background\"\n        height={24}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={24}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-1 ring-background\"\n        height={24}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={24}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-402.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-[0.525rem]\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={28}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={28}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={28}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={28}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={28}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={28}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={28}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={28}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-403.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-[0.6rem]\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={32}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={32}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={32}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={32}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={32}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={32}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={32}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={32}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-404.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-[0.675rem]\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={36}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={36}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={36}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={36}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={36}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={36}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={36}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={36}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-405.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-3\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={40}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={40}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={40}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={40}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={40}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={40}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={40}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={40}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-406.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-[0.9rem]\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={48}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={48}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={48}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={48}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={48}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={48}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={48}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={48}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-407.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-[1.2rem]\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={64}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={64}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={64}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={64}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={64}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={64}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={64}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={64}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-408.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex -space-x-6\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={80}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={80}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={80}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={80}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={80}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={80}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={80}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={80}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-409.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex -space-x-3\">\n      <img\n        alt=\"Avatar 01\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={40}\n        src=\"/origin/avatar-80-03.jpg\"\n        width={40}\n      />\n      <img\n        alt=\"Avatar 02\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={40}\n        src=\"/origin/avatar-80-04.jpg\"\n        width={40}\n      />\n      <img\n        alt=\"Avatar 03\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={40}\n        src=\"/origin/avatar-80-05.jpg\"\n        width={40}\n      />\n      <img\n        alt=\"Avatar 04\"\n        className=\"rounded-full ring-2 ring-background\"\n        height={40}\n        src=\"/origin/avatar-80-06.jpg\"\n        width={40}\n      />\n      <Button\n        className=\"flex size-10 items-center justify-center rounded-full bg-secondary text-muted-foreground text-xs ring-2 ring-background hover:bg-secondary hover:text-foreground\"\n        size=\"icon\"\n        variant=\"secondary\"\n      >\n        +3\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-41.tsx",
    "content": "\"use client\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport {\n  Button,\n  DatePicker,\n  Dialog,\n  Group,\n  Label,\n  Popover,\n} from \"react-aria-components\";\nimport { Calendar } from \"@/registry/default/ui/calendar-rac\";\nimport { DateInput } from \"@/registry/default/ui/datefield-rac\";\n\nexport default function Component() {\n  return (\n    <DatePicker className=\"*:not-first:mt-2\">\n      <Label className=\"font-medium text-foreground text-sm\">Date picker</Label>\n      <div className=\"flex\">\n        <Group className=\"w-full\">\n          <DateInput className=\"pe-9\" />\n        </Group>\n        <Button className=\"z-10 -ms-9 -me-px flex w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\">\n          <CalendarIcon size={16} />\n        </Button>\n      </div>\n      <Popover\n        className=\"data-[entering]:fade-in-0 data-[entering]:zoom-in-95 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-lg border bg-background text-popover-foreground shadow-lg outline-hidden data-entering:animate-in data-exiting:animate-out\"\n        offset={4}\n      >\n        <Dialog className=\"max-h-[inherit] overflow-auto p-2\">\n          <Calendar />\n        </Dialog>\n      </Popover>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DatePicker.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </DatePicker>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-410.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex items-center rounded-full bg-muted p-0.5\">\n      <div className=\"flex -space-x-3\">\n        <img\n          alt=\"Avatar 01\"\n          className=\"rounded-full ring-2 ring-muted\"\n          height={40}\n          src=\"/origin/avatar-80-03.jpg\"\n          width={40}\n        />\n        <img\n          alt=\"Avatar 02\"\n          className=\"rounded-full ring-2 ring-muted\"\n          height={40}\n          src=\"/origin/avatar-80-04.jpg\"\n          width={40}\n        />\n        <img\n          alt=\"Avatar 03\"\n          className=\"rounded-full ring-2 ring-muted\"\n          height={40}\n          src=\"/origin/avatar-80-05.jpg\"\n          width={40}\n        />\n        <img\n          alt=\"Avatar 04\"\n          className=\"rounded-full ring-2 ring-muted\"\n          height={40}\n          src=\"/origin/avatar-80-06.jpg\"\n          width={40}\n        />\n      </div>\n      <Button\n        className=\"flex items-center justify-center rounded-full bg-transparent px-3 text-muted-foreground text-xs shadow-none hover:bg-transparent hover:text-foreground\"\n        variant=\"secondary\"\n      >\n        +3\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-411.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex items-center rounded-full border bg-background p-1 shadow-sm\">\n      <div className=\"flex -space-x-3\">\n        <img\n          alt=\"Avatar 01\"\n          className=\"rounded-full ring-2 ring-background\"\n          height={40}\n          src=\"/origin/avatar-80-03.jpg\"\n          width={40}\n        />\n        <img\n          alt=\"Avatar 02\"\n          className=\"rounded-full ring-2 ring-background\"\n          height={40}\n          src=\"/origin/avatar-80-04.jpg\"\n          width={40}\n        />\n        <img\n          alt=\"Avatar 03\"\n          className=\"rounded-full ring-2 ring-background\"\n          height={40}\n          src=\"/origin/avatar-80-05.jpg\"\n          width={40}\n        />\n        <img\n          alt=\"Avatar 04\"\n          className=\"rounded-full ring-2 ring-background\"\n          height={40}\n          src=\"/origin/avatar-80-06.jpg\"\n          width={40}\n        />\n      </div>\n      <Button\n        className=\"flex items-center justify-center rounded-full bg-transparent px-3 text-muted-foreground text-xs shadow-none hover:bg-transparent hover:text-foreground\"\n        variant=\"secondary\"\n      >\n        +3\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-412.tsx",
    "content": "export default function Component() {\n  return (\n    <div className=\"flex items-center rounded-full border bg-background p-1 shadow-sm\">\n      <div className=\"flex -space-x-1.5\">\n        <img\n          alt=\"Avatar 01\"\n          className=\"rounded-full ring-1 ring-background\"\n          height={20}\n          src=\"/origin/avatar-80-03.jpg\"\n          width={20}\n        />\n        <img\n          alt=\"Avatar 02\"\n          className=\"rounded-full ring-1 ring-background\"\n          height={20}\n          src=\"/origin/avatar-80-04.jpg\"\n          width={20}\n        />\n        <img\n          alt=\"Avatar 03\"\n          className=\"rounded-full ring-1 ring-background\"\n          height={20}\n          src=\"/origin/avatar-80-05.jpg\"\n          width={20}\n        />\n        <img\n          alt=\"Avatar 04\"\n          className=\"rounded-full ring-1 ring-background\"\n          height={20}\n          src=\"/origin/avatar-80-06.jpg\"\n          width={20}\n        />\n      </div>\n      <p className=\"px-2 text-muted-foreground text-xs\">\n        Trusted by <strong className=\"font-medium text-foreground\">60K+</strong>{\" \"}\n        developers.\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-413.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return <Badge>Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-414.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return <Badge className=\"rounded\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-415.tsx",
    "content": "import { ZapIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <Badge>\n      <ZapIcon aria-hidden=\"true\" className=\"-ms-0.5 opacity-60\" size={12} />\n      Badge\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-416.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return <Badge className=\"min-w-5 px-1\">6</Badge>;\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-417.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <Badge asChild>\n      <a href=\"#\">Link</a>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-418.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <Badge className=\"items-baseline gap-1.5\">\n      Badge\n      <span className=\"font-medium text-[0.625rem] text-primary-foreground/60\">\n        73\n      </span>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-419.tsx",
    "content": "import { CheckIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <Badge className=\"gap-1\" variant=\"outline\">\n      <CheckIcon aria-hidden=\"true\" className=\"text-emerald-500\" size={12} />\n      Badge\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-42.tsx",
    "content": "\"use client\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport {\n  Button,\n  DateRangePicker,\n  Dialog,\n  Group,\n  Label,\n  Popover,\n} from \"react-aria-components\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { RangeCalendar } from \"@/registry/default/ui/calendar-rac\";\nimport { DateInput, dateInputStyle } from \"@/registry/default/ui/datefield-rac\";\n\nexport default function Component() {\n  return (\n    <DateRangePicker className=\"*:not-first:mt-2\">\n      <Label className=\"font-medium text-foreground text-sm\">\n        Date range picker\n      </Label>\n      <div className=\"flex\">\n        <Group className={cn(dateInputStyle, \"pe-9\")}>\n          <DateInput slot=\"start\" unstyled />\n          <span aria-hidden=\"true\" className=\"px-2 text-muted-foreground/70\">\n            -\n          </span>\n          <DateInput slot=\"end\" unstyled />\n        </Group>\n        <Button className=\"z-10 -ms-9 -me-px flex w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\">\n          <CalendarIcon size={16} />\n        </Button>\n      </div>\n      <Popover\n        className=\"data-[entering]:fade-in-0 data-[entering]:zoom-in-95 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-md border bg-background text-popover-foreground shadow-lg outline-hidden data-entering:animate-in data-exiting:animate-out\"\n        offset={4}\n      >\n        <Dialog className=\"max-h-[inherit] overflow-auto p-2\">\n          <RangeCalendar />\n        </Dialog>\n      </Popover>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </DateRangePicker>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-420.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <Badge className=\"gap-1.5\" variant=\"outline\">\n      <span\n        aria-hidden=\"true\"\n        className=\"size-1.5 rounded-full bg-emerald-500\"\n      />\n      Badge\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-421.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <Badge className=\"gap-1.5\" variant=\"outline\">\n      <span aria-hidden=\"true\" className=\"size-1.5 rounded-full bg-amber-500\" />\n      Badge\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-422.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  return (\n    <Badge className=\"gap-1.5\" variant=\"outline\">\n      <span aria-hidden=\"true\" className=\"size-1.5 rounded-full bg-red-500\" />\n      Badge\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-423.tsx",
    "content": "import { CheckIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <Badge className=\"relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n      <Checkbox\n        className=\"peer sr-only after:absolute after:inset-0\"\n        defaultChecked\n        id={id}\n      />\n      <CheckIcon\n        aria-hidden=\"true\"\n        className=\"hidden peer-data-[state=checked]:block\"\n        size={12}\n      />\n      <label\n        className=\"cursor-pointer select-none after:absolute after:inset-0\"\n        htmlFor={id}\n      >\n        Selectable\n      </label>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-424.tsx",
    "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  const [isActive, setIsActive] = useState(true);\n\n  if (!isActive) return null;\n\n  return (\n    <Badge className=\"gap-0\">\n      Removable\n      <button\n        className=\"-my-px -ms-px -me-1.5 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-primary-foreground/60 outline-none transition-[color,box-shadow] hover:text-primary-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        onClick={() => setIsActive(false)}\n        type=\"button\"\n      >\n        <XIcon aria-hidden=\"true\" size={12} />\n      </button>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-425.tsx",
    "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Component() {\n  const [isActive, setIsActive] = useState(true);\n\n  if (!isActive) return null;\n\n  return (\n    <Badge className=\"gap-0 rounded-md px-2 py-1\" variant=\"outline\">\n      Tag\n      <button\n        aria-label=\"Delete\"\n        className=\"-my-[5px] -ms-0.5 -me-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-foreground/60 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        onClick={() => setIsActive(false)}\n        type=\"button\"\n      >\n        <XIcon aria-hidden=\"true\" size={14} />\n      </button>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-426.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList>\n        <TabsTrigger value=\"tab-1\">Tab 1</TabsTrigger>\n        <TabsTrigger value=\"tab-2\">Tab 2</TabsTrigger>\n        <TabsTrigger value=\"tab-3\">Tab 3</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-427.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList className=\"bg-transparent\">\n        <TabsTrigger\n          className=\"data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-1\"\n        >\n          Tab 1\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-2\"\n        >\n          Tab 2\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-3\"\n        >\n          Tab 3\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-428.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList className=\"gap-1 bg-transparent\">\n        <TabsTrigger\n          className=\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\"\n          value=\"tab-1\"\n        >\n          Tab 1\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\"\n          value=\"tab-2\"\n        >\n          Tab 2\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\"\n          value=\"tab-3\"\n        >\n          Tab 3\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-429.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList className=\"h-auto rounded-none border-b bg-transparent p-0\">\n        <TabsTrigger\n          className=\"relative rounded-none py-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-1\"\n        >\n          Tab 1\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative rounded-none py-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-2\"\n        >\n          Tab 2\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative rounded-none py-2 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-3\"\n        >\n          Tab 3\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-43.tsx",
    "content": "\"use client\";\n\nimport { getLocalTimeZone, isWeekend, today } from \"@internationalized/date\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useLocale } from \"react-aria\";\nimport type { DateValue } from \"react-aria-components\";\nimport {\n  Button,\n  DateRangePicker,\n  Dialog,\n  Group,\n  Label,\n  Popover,\n} from \"react-aria-components\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { RangeCalendar } from \"@/registry/default/ui/calendar-rac\";\nimport { DateInput, dateInputStyle } from \"@/registry/default/ui/datefield-rac\";\n\nexport default function Component() {\n  const now = today(getLocalTimeZone());\n  const disabledRanges = [\n    [now, now.add({ days: 5 })],\n    [now.add({ days: 14 }), now.add({ days: 16 })],\n    [now.add({ days: 23 }), now.add({ days: 24 })],\n  ];\n\n  const { locale } = useLocale();\n  const isDateUnavailable = (date: DateValue) =>\n    isWeekend(date, locale) ||\n    disabledRanges.some(\n      (interval) =>\n        date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,\n    );\n  const validate = (value: { start: DateValue; end: DateValue } | null) =>\n    disabledRanges.some(\n      (interval) =>\n        value &&\n        value.end.compare(interval[0]) >= 0 &&\n        value.start.compare(interval[1]) <= 0,\n    )\n      ? \"Selected date range may not include unavailable dates.\"\n      : null;\n\n  return (\n    <DateRangePicker\n      className=\"*:not-first:mt-2\"\n      isDateUnavailable={isDateUnavailable}\n      validate={validate}\n    >\n      <Label className=\"font-medium text-foreground text-sm\">\n        Date range picker (unavailable dates)\n      </Label>\n      <div className=\"flex\">\n        <Group className={cn(dateInputStyle, \"pe-9\")}>\n          <DateInput slot=\"start\" unstyled />\n          <span aria-hidden=\"true\" className=\"px-2 text-muted-foreground/70\">\n            -\n          </span>\n          <DateInput slot=\"end\" unstyled />\n        </Group>\n        <Button className=\"z-10 -ms-9 -me-px flex w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground data-focus-visible:border-ring data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\">\n          <CalendarIcon size={16} />\n        </Button>\n      </div>\n      <Popover\n        className=\"data-[entering]:fade-in-0 data-[entering]:zoom-in-95 data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-md border bg-background text-popover-foreground shadow-lg outline-hidden data-entering:animate-in data-exiting:animate-out\"\n        offset={4}\n      >\n        <Dialog className=\"max-h-[inherit] overflow-auto p-2\">\n          <RangeCalendar isDateUnavailable={isDateUnavailable} minValue={now} />\n        </Dialog>\n      </Popover>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </DateRangePicker>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-430.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList className=\"h-auto gap-2 rounded-none border-b bg-transparent px-0 py-1 text-foreground\">\n        <TabsTrigger\n          className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n          value=\"tab-1\"\n        >\n          Tab 1\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n          value=\"tab-2\"\n        >\n          Tab 2\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n          value=\"tab-3\"\n        >\n          Tab 3\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-431.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList className=\"h-auto -space-x-px bg-background p-0 shadow-xs rtl:space-x-reverse\">\n        <TabsTrigger\n          className=\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\"\n          value=\"tab-1\"\n        >\n          Tab 1\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\"\n          value=\"tab-2\"\n        >\n          Tab 2\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\"\n          value=\"tab-3\"\n        >\n          Tab 3\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-432.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList className=\"relative h-auto w-full gap-0.5 bg-transparent p-0 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border\">\n        <TabsTrigger\n          className=\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\"\n          value=\"tab-1\"\n        >\n          Tab 1\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\"\n          value=\"tab-2\"\n        >\n          Tab 2\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\"\n          value=\"tab-3\"\n        >\n          Tab 3\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-433.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { ScrollArea, ScrollBar } from \"@/registry/default/ui/scroll-area\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <ScrollArea>\n        <TabsList className=\"mb-3\">\n          <TabsTrigger value=\"tab-1\">\n            <HouseIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Overview\n          </TabsTrigger>\n          <TabsTrigger className=\"group\" value=\"tab-2\">\n            <PanelsTopLeftIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Projects\n            <Badge\n              className=\"ms-1.5 min-w-5 bg-primary/15 px-1 transition-opacity group-data-[state=inactive]:opacity-50\"\n              variant=\"secondary\"\n            >\n              3\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger className=\"group\" value=\"tab-3\">\n            <BoxIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Packages\n            <Badge className=\"ms-1.5 transition-opacity group-data-[state=inactive]:opacity-50\">\n              New\n            </Badge>\n          </TabsTrigger>\n        </TabsList>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-434.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport { ScrollArea, ScrollBar } from \"@/registry/default/ui/scroll-area\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <ScrollArea>\n        <TabsList className=\"mb-3 gap-1 bg-transparent\">\n          <TabsTrigger\n            className=\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\"\n            value=\"tab-1\"\n          >\n            <HouseIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Overview\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\"\n            value=\"tab-2\"\n          >\n            <PanelsTopLeftIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Projects\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none\"\n            value=\"tab-3\"\n          >\n            <BoxIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Packages\n          </TabsTrigger>\n        </TabsList>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-435.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport { ScrollArea, ScrollBar } from \"@/registry/default/ui/scroll-area\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <ScrollArea>\n        <TabsList className=\"mb-3 h-auto -space-x-px bg-background p-0 shadow-xs rtl:space-x-reverse\">\n          <TabsTrigger\n            className=\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\"\n            value=\"tab-1\"\n          >\n            <HouseIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Overview\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\"\n            value=\"tab-2\"\n          >\n            <PanelsTopLeftIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Projects\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative overflow-hidden rounded-none border py-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 first:rounded-s last:rounded-e data-[state=active]:bg-muted data-[state=active]:after:bg-primary\"\n            value=\"tab-3\"\n          >\n            <BoxIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Packages\n          </TabsTrigger>\n        </TabsList>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-436.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport { ScrollArea, ScrollBar } from \"@/registry/default/ui/scroll-area\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <ScrollArea>\n        <TabsList className=\"relative mb-3 h-auto w-full gap-0.5 bg-transparent p-0 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border\">\n          <TabsTrigger\n            className=\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\"\n            value=\"tab-1\"\n          >\n            <HouseIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Overview\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\"\n            value=\"tab-2\"\n          >\n            <PanelsTopLeftIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Projects\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"overflow-hidden rounded-b-none border-x border-t bg-muted py-2 data-[state=active]:z-10 data-[state=active]:shadow-none\"\n            value=\"tab-3\"\n          >\n            <BoxIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Packages\n          </TabsTrigger>\n        </TabsList>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-437.tsx",
    "content": "import {\n  BoxIcon,\n  ChartLine,\n  HouseIcon,\n  PanelsTopLeftIcon,\n  SettingsIcon,\n  UsersRoundIcon,\n} from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { ScrollArea, ScrollBar } from \"@/registry/default/ui/scroll-area\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <ScrollArea>\n        <TabsList className=\"mb-3 h-auto gap-2 rounded-none border-b bg-transparent px-0 py-1 text-foreground\">\n          <TabsTrigger\n            className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n            value=\"tab-1\"\n          >\n            <HouseIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Overview\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n            value=\"tab-2\"\n          >\n            <PanelsTopLeftIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Projects\n            <Badge\n              className=\"ms-1.5 min-w-5 bg-primary/15 px-1\"\n              variant=\"secondary\"\n            >\n              3\n            </Badge>\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n            value=\"tab-3\"\n          >\n            <BoxIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Packages\n            <Badge className=\"ms-1.5\">New</Badge>\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n            value=\"tab-4\"\n          >\n            <UsersRoundIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Team\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n            value=\"tab-5\"\n          >\n            <ChartLine\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Insights\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"relative after:absolute after:inset-x-0 after:bottom-0 after:-mb-1 after:h-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n            value=\"tab-6\"\n          >\n            <SettingsIcon\n              aria-hidden=\"true\"\n              className=\"-ms-0.5 me-1.5 opacity-60\"\n              size={16}\n            />\n            Settings\n          </TabsTrigger>\n        </TabsList>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n      <TabsContent value=\"tab-1\">\n        <p className=\"pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-4\">\n        <p className=\"pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 4\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-5\">\n        <p className=\"pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 5\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-6\">\n        <p className=\"pt-1 text-center text-muted-foreground text-xs\">\n          Content for Tab 6\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-438.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList className=\"h-auto rounded-none border-b bg-transparent p-0\">\n        <TabsTrigger\n          className=\"relative flex-col rounded-none px-4 py-2 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-1\"\n        >\n          <HouseIcon\n            aria-hidden=\"true\"\n            className=\"mb-1.5 opacity-60\"\n            size={16}\n          />\n          Overview\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative flex-col rounded-none px-4 py-2 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-2\"\n        >\n          <PanelsTopLeftIcon\n            aria-hidden=\"true\"\n            className=\"mb-1.5 opacity-60\"\n            size={16}\n          />\n          Projects\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative flex-col rounded-none px-4 py-2 text-xs after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-3\"\n        >\n          <BoxIcon aria-hidden=\"true\" className=\"mb-1.5 opacity-60\" size={16} />\n          Packages\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-439.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList className=\"mx-auto flex w-full max-w-xs bg-transparent\">\n        <TabsTrigger\n          className=\"group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-1\"\n        >\n          <Badge className=\"mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50\">\n            3\n          </Badge>\n          Overview\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-2\"\n        >\n          <Badge className=\"mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50\">\n            0\n          </Badge>\n          Projects\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"group flex-1 flex-col p-3 text-xs data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-3\"\n        >\n          <Badge className=\"mb-1.5 min-w-5 px-1 transition-opacity group-data-[state=inactive]:opacity-50\">\n            7\n          </Badge>\n          Packages\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-44.tsx",
    "content": "\"use client\";\n\nimport { OTPInput, type SlotProps } from \"input-otp\";\nimport { useId } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>OTP input single</Label>\n      <OTPInput\n        containerClassName=\"flex items-center gap-3 has-disabled:opacity-50\"\n        id={id}\n        maxLength={4}\n        render={({ slots }) => (\n          <div className=\"flex\">\n            {slots.map((slot, idx) => (\n              <Slot key={String(idx)} {...slot} />\n            ))}\n          </div>\n        )}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/guilhermerodz/input-otp\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          Input OTP\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Slot(props: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"relative -ms-px flex size-9 items-center justify-center border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow] first:ms-0 first:rounded-s-md last:rounded-e-md\",\n        { \"z-10 border-ring ring-[3px] ring-ring/50\": props.isActive },\n      )}\n    >\n      {props.char !== null && <div>{props.char}</div>}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-440.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList>\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span>\n                <TabsTrigger className=\"py-3\" value=\"tab-1\">\n                  <HouseIcon aria-hidden=\"true\" size={16} />\n                </TabsTrigger>\n              </span>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\">\n              Overview\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span>\n                <TabsTrigger className=\"group py-3\" value=\"tab-2\">\n                  <span className=\"relative\">\n                    <PanelsTopLeftIcon aria-hidden=\"true\" size={16} />\n                    <Badge className=\"absolute -top-2.5 left-full min-w-4 -translate-x-1.5 border-background px-0.5 text-[10px]/[.875rem] transition-opacity group-data-[state=inactive]:opacity-50\">\n                      3\n                    </Badge>\n                  </span>\n                </TabsTrigger>\n              </span>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\">\n              Projects\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span>\n                <TabsTrigger className=\"py-3\" value=\"tab-3\">\n                  <BoxIcon aria-hidden=\"true\" size={16} />\n                </TabsTrigger>\n              </span>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\">\n              Packages\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </TabsList>\n      <TabsContent value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 1\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 2\n        </p>\n      </TabsContent>\n      <TabsContent value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Content for Tab 3\n        </p>\n      </TabsContent>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-441.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <Tabs\n      className=\"w-full flex-row\"\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n    >\n      <TabsList className=\"flex-col\">\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span>\n                <TabsTrigger className=\"py-3\" value=\"tab-1\">\n                  <HouseIcon aria-hidden=\"true\" size={16} />\n                </TabsTrigger>\n              </span>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\" side=\"right\">\n              Overview\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span>\n                <TabsTrigger className=\"group py-3\" value=\"tab-2\">\n                  <span className=\"relative\">\n                    <PanelsTopLeftIcon aria-hidden=\"true\" size={16} />\n                    <Badge className=\"absolute -top-2.5 left-full min-w-4 -translate-x-1.5 border-background px-0.5 text-[10px]/[.875rem] transition-opacity group-data-[state=inactive]:opacity-50\">\n                      3\n                    </Badge>\n                  </span>\n                </TabsTrigger>\n              </span>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\" side=\"right\">\n              Projects\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <span>\n                <TabsTrigger className=\"py-3\" value=\"tab-3\">\n                  <BoxIcon aria-hidden=\"true\" size={16} />\n                </TabsTrigger>\n              </span>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\" side=\"right\">\n              Packages\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </TabsList>\n      <div className=\"grow rounded-md border text-start\">\n        <TabsContent value=\"tab-1\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 1\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-2\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 2\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-3\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 3\n          </p>\n        </TabsContent>\n      </div>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-442.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs\n      className=\"w-full flex-row\"\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n    >\n      <TabsList className=\"flex-col\">\n        <TabsTrigger className=\"w-full\" value=\"tab-1\">\n          Overview\n        </TabsTrigger>\n        <TabsTrigger className=\"w-full\" value=\"tab-2\">\n          Projects\n        </TabsTrigger>\n        <TabsTrigger className=\"w-full\" value=\"tab-3\">\n          Packages\n        </TabsTrigger>\n      </TabsList>\n      <div className=\"grow rounded-md border text-start\">\n        <TabsContent value=\"tab-1\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 1\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-2\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 2\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-3\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 3\n          </p>\n        </TabsContent>\n      </div>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-443.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs\n      className=\"w-full flex-row\"\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n    >\n      <TabsList className=\"flex-col rounded-none border-l bg-transparent p-0\">\n        <TabsTrigger\n          className=\"relative w-full justify-start rounded-none after:absolute after:inset-y-0 after:start-0 after:w-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-1\"\n        >\n          Overview\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative w-full justify-start rounded-none after:absolute after:inset-y-0 after:start-0 after:w-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-2\"\n        >\n          Projects\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative w-full justify-start rounded-none after:absolute after:inset-y-0 after:start-0 after:w-0.5 data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:after:bg-primary\"\n          value=\"tab-3\"\n        >\n          Packages\n        </TabsTrigger>\n      </TabsList>\n      <div className=\"grow rounded-md border text-start\">\n        <TabsContent value=\"tab-1\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 1\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-2\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 2\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-3\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 3\n          </p>\n        </TabsContent>\n      </div>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-444.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs\n      className=\"w-full flex-row\"\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n    >\n      <TabsList className=\"flex-col gap-1 rounded-none bg-transparent px-1 py-0 text-foreground\">\n        <TabsTrigger\n          className=\"relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n          value=\"tab-1\"\n        >\n          <HouseIcon\n            aria-hidden=\"true\"\n            className=\"-ms-0.5 me-1.5 opacity-60\"\n            size={16}\n          />\n          Overview\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n          value=\"tab-2\"\n        >\n          <PanelsTopLeftIcon\n            aria-hidden=\"true\"\n            className=\"-ms-0.5 me-1.5 opacity-60\"\n            size={16}\n          />\n          Projects\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"relative w-full justify-start after:absolute after:inset-y-0 after:start-0 after:-ms-1 after:w-0.5 hover:bg-accent hover:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:hover:bg-accent data-[state=active]:after:bg-primary\"\n          value=\"tab-3\"\n        >\n          <BoxIcon\n            aria-hidden=\"true\"\n            className=\"-ms-0.5 me-1.5 opacity-60\"\n            size={16}\n          />\n          Packages\n        </TabsTrigger>\n      </TabsList>\n      <div className=\"grow rounded-md border text-start\">\n        <TabsContent value=\"tab-1\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 1\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-2\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 2\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-3\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 3\n          </p>\n        </TabsContent>\n      </div>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-445.tsx",
    "content": "import {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/default/ui/tabs\";\n\nexport default function Component() {\n  return (\n    <Tabs\n      className=\"w-full flex-row\"\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n    >\n      <TabsList className=\"flex-col gap-1 bg-transparent py-0\">\n        <TabsTrigger\n          className=\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-1\"\n        >\n          Overview\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-2\"\n        >\n          Projects\n        </TabsTrigger>\n        <TabsTrigger\n          className=\"w-full justify-start data-[state=active]:bg-muted data-[state=active]:shadow-none\"\n          value=\"tab-3\"\n        >\n          Packages\n        </TabsTrigger>\n      </TabsList>\n      <div className=\"grow rounded-md border text-start\">\n        <TabsContent value=\"tab-1\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 1\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-2\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 2\n          </p>\n        </TabsContent>\n        <TabsContent value=\"tab-3\">\n          <p className=\"px-4 py-3 text-muted-foreground text-xs\">\n            Content for Tab 3\n          </p>\n        </TabsContent>\n      </div>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-446.tsx",
    "content": "import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"hover:text-foreground\">\n              <BreadcrumbEllipsis />\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem asChild>\n                <a href=\"#\">Documentation</a>\n              </DropdownMenuItem>\n              <DropdownMenuItem asChild>\n                <a href=\"#\">Themes</a>\n              </DropdownMenuItem>\n              <DropdownMenuItem asChild>\n                <a href=\"#\">GitHub</a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-447.tsx",
    "content": "import { FoldersIcon } from \"lucide-react\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"hover:text-foreground\">\n              <span\n                aria-hidden=\"true\"\n                className=\"flex size-5 items-center justify-center\"\n                role=\"presentation\"\n              >\n                <FoldersIcon size={16} />\n              </span>\n              <span className=\"sr-only\">Toggle menu</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem asChild>\n                <a href=\"#\">Documentation</a>\n              </DropdownMenuItem>\n              <DropdownMenuItem asChild>\n                <a href=\"#\">Themes</a>\n              </DropdownMenuItem>\n              <DropdownMenuItem asChild>\n                <a href=\"#\">GitHub</a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-448.tsx",
    "content": "import { HomeIcon } from \"lucide-react\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">\n            <HomeIcon aria-hidden=\"true\" size={16} />\n            <span className=\"sr-only\">Home</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-449.tsx",
    "content": "import { ComponentIcon, HomeIcon } from \"lucide-react\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink className=\"inline-flex items-center gap-1.5\" href=\"#\">\n            <HomeIcon aria-hidden=\"true\" size={16} />\n            Home\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink className=\"inline-flex items-center gap-1.5\" href=\"#\">\n            <ComponentIcon aria-hidden=\"true\" size={16} />\n            Components\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-45.tsx",
    "content": "\"use client\";\n\nimport { OTPInput, type SlotProps } from \"input-otp\";\nimport { MinusIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>OTP input double</Label>\n      <OTPInput\n        containerClassName=\"flex items-center gap-3 has-disabled:opacity-50\"\n        id={id}\n        maxLength={6}\n        render={({ slots }) => (\n          <>\n            <div className=\"flex\">\n              {slots.slice(0, 3).map((slot, idx) => (\n                <Slot key={String(idx)} {...slot} />\n              ))}\n            </div>\n\n            <div className=\"text-muted-foreground/80\">\n              <MinusIcon aria-hidden=\"true\" size={16} />\n            </div>\n\n            <div className=\"flex\">\n              {slots.slice(3).map((slot, idx) => (\n                <Slot key={String(idx)} {...slot} />\n              ))}\n            </div>\n          </>\n        )}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/guilhermerodz/input-otp\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          Input OTP\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Slot(props: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"relative -ms-px flex size-9 items-center justify-center border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow] first:ms-0 first:rounded-s-md last:rounded-e-md\",\n        { \"z-10 border-ring ring-[3px] ring-ring/50\": props.isActive },\n      )}\n    >\n      {props.char !== null && <div>{props.char}</div>}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-450.tsx",
    "content": "import { HomeIcon } from \"lucide-react\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">\n            <HomeIcon aria-hidden=\"true\" size={16} />\n            <span className=\"sr-only\">Home</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-451.tsx",
    "content": "import { HomeIcon } from \"lucide-react\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">\n            <HomeIcon aria-hidden=\"true\" size={16} />\n            <span className=\"sr-only\">Home</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-452.tsx",
    "content": "import { HomeIcon } from \"lucide-react\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList className=\"rounded-md border bg-background px-3 py-2 shadow-xs\">\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">\n            <HomeIcon aria-hidden=\"true\" size={16} />\n            <span className=\"sr-only\">Home</span>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-453.tsx",
    "content": "import { DatabaseIcon } from \"lucide-react\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Databases</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <Select defaultValue=\"1\">\n            <SelectTrigger\n              aria-label=\"Select database\"\n              className=\"relative gap-2 ps-9\"\n              id=\"select-database\"\n            >\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[select[disabled]]:opacity-50\">\n                <DatabaseIcon aria-hidden=\"true\" size={16} />\n              </div>\n              <SelectValue placeholder=\"Select database\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"1\">Orion</SelectItem>\n              <SelectItem value=\"2\">Sigma</SelectItem>\n              <SelectItem value=\"3\">Dorado</SelectItem>\n            </SelectContent>\n          </Select>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-454.tsx",
    "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"w-full justify-between gap-3\">\n        <PaginationItem>\n          <Button\n            aria-disabled={currentPage === 1 ? true : undefined}\n            asChild\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            role={currentPage === 1 ? \"link\" : undefined}\n            variant=\"outline\"\n          >\n            <a\n              href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            >\n              <ChevronLeftIcon\n                aria-hidden=\"true\"\n                className=\"-ms-1 opacity-60\"\n                size={16}\n              />\n              Previous\n            </a>\n          </Button>\n        </PaginationItem>\n        <PaginationItem>\n          <Button\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            asChild\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            role={currentPage === totalPages ? \"link\" : undefined}\n            variant=\"outline\"\n          >\n            <a\n              href={\n                currentPage === totalPages\n                  ? undefined\n                  : `#/page/${currentPage + 1}`\n              }\n            >\n              Next\n              <ChevronRightIcon\n                aria-hidden=\"true\"\n                className=\"-me-1 opacity-60\"\n                size={16}\n              />\n            </a>\n          </Button>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-455.tsx",
    "content": "import { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"w-full justify-between gap-3\">\n        <PaginationItem>\n          <Button\n            aria-disabled={currentPage === 1 ? true : undefined}\n            className=\"group aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            role={currentPage === 1 ? \"link\" : undefined}\n            variant=\"ghost\"\n          >\n            <ArrowLeftIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5\"\n              size={16}\n            />\n            Previous\n          </Button>\n        </PaginationItem>\n        <PaginationItem>\n          <Button\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            className=\"group aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            role={currentPage === totalPages ? \"link\" : undefined}\n            variant=\"ghost\"\n          >\n            Next\n            <ArrowRightIcon\n              aria-hidden=\"true\"\n              className=\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\"\n              size={16}\n            />\n          </Button>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-456.tsx",
    "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"w-full justify-between\">\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === 1 ? true : undefined}\n            aria-label=\"Go to previous page\"\n            className={cn(\n              \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n              buttonVariants({\n                variant: \"outline\",\n              }),\n            )}\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <p aria-live=\"polite\" className=\"text-muted-foreground text-sm\">\n            Page <span className=\"text-foreground\">{currentPage}</span> of{\" \"}\n            <span className=\"text-foreground\">{totalPages}</span>\n          </p>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            aria-label=\"Go to next page\"\n            className={cn(\n              \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n              buttonVariants({\n                variant: \"outline\",\n              }),\n            )}\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-457.tsx",
    "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"gap-3\">\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === 1 ? true : undefined}\n            aria-label=\"Go to previous page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <p aria-live=\"polite\" className=\"text-muted-foreground text-sm\">\n            Page <span className=\"text-foreground\">{currentPage}</span> of{\" \"}\n            <span className=\"text-foreground\">{totalPages}</span>\n          </p>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            aria-label=\"Go to next page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-458.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <p aria-live=\"polite\" className=\"grow text-muted-foreground text-sm\">\n        Page <span className=\"text-foreground\">{currentPage}</span> of{\" \"}\n        <span className=\"text-foreground\">{totalPages}</span>\n      </p>\n      <Pagination className=\"w-auto\">\n        <PaginationContent className=\"gap-3\">\n          <PaginationItem>\n            <Button\n              aria-disabled={currentPage === 1 ? true : undefined}\n              asChild\n              className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n              role={currentPage === 1 ? \"link\" : undefined}\n              variant=\"outline\"\n            >\n              <a\n                href={\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\n                }\n              >\n                Previous\n              </a>\n            </Button>\n          </PaginationItem>\n          <PaginationItem>\n            <Button\n              aria-disabled={currentPage === totalPages ? true : undefined}\n              asChild\n              className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n              role={currentPage === totalPages ? \"link\" : undefined}\n              variant=\"outline\"\n            >\n              <a\n                href={\n                  currentPage === totalPages\n                    ? undefined\n                    : `#/page/${currentPage + 1}`\n                }\n              >\n                Next\n              </a>\n            </Button>\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-459.tsx",
    "content": "import { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  paginationItemsToDisplay?: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5,\n}: PaginationProps) {\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    paginationItemsToDisplay,\n    totalPages,\n  });\n\n  return (\n    <Pagination>\n      <PaginationContent>\n        {/* Previous page button */}\n        <PaginationItem>\n          <PaginationPrevious\n            aria-disabled={currentPage === 1 ? true : undefined}\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}\n          />\n        </PaginationItem>\n\n        {/* Left ellipsis (...) */}\n        {showLeftEllipsis && (\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Page number links */}\n        {pages.map((page) => (\n          <PaginationItem key={page}>\n            <PaginationLink\n              href={`#/page/${page}`}\n              isActive={page === currentPage}\n            >\n              {page}\n            </PaginationLink>\n          </PaginationItem>\n        ))}\n\n        {/* Right ellipsis (...) */}\n        {showRightEllipsis && (\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Next page button */}\n        <PaginationItem>\n          <PaginationNext\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            role={currentPage === totalPages ? \"link\" : undefined}\n          />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-46.tsx",
    "content": "\"use client\";\n\nimport { ChevronDownIcon, PhoneIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { useId, useState } from \"react\";\nimport * as RPNInput from \"react-phone-number-input\";\nimport flags from \"react-phone-number-input/flags\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <div className=\"*:not-first:mt-2\" dir=\"ltr\">\n      <Label htmlFor={id}>PhoneIcon number input</Label>\n      <RPNInput.default\n        className=\"flex rounded-md shadow-xs\"\n        countrySelectComponent={CountrySelect}\n        flagComponent={FlagComponent}\n        id={id}\n        inputComponent={PhoneInput}\n        international\n        onChange={(newValue) => setValue(newValue ?? \"\")}\n        placeholder=\"Enter phone number\"\n        value={value}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://gitlab.com/catamphetamine/react-phone-number-input\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          react-phone-number-input\n        </a>\n      </p>\n    </div>\n  );\n}\n\nconst PhoneInput = ({ className, ...props }: React.ComponentProps<\"input\">) => {\n  return (\n    <Input\n      className={cn(\n        \"-ms-px rounded-s-none shadow-none focus-visible:z-10\",\n        className,\n      )}\n      data-slot=\"phone-input\"\n      {...props}\n    />\n  );\n};\n\nPhoneInput.displayName = \"PhoneInput\";\n\ntype CountrySelectProps = {\n  disabled?: boolean;\n  value: RPNInput.Country;\n  onChange: (value: RPNInput.Country) => void;\n  options: { label: string; value: RPNInput.Country | undefined }[];\n};\n\nconst CountrySelect = ({\n  disabled,\n  value,\n  onChange,\n  options,\n}: CountrySelectProps) => {\n  const handleSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange(event.target.value as RPNInput.Country);\n  };\n\n  return (\n    <div className=\"relative inline-flex items-center self-stretch rounded-s-md border border-input bg-background py-2 ps-3 pe-2 text-muted-foreground outline-none transition-[color,box-shadow] focus-within:z-10 focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 hover:bg-accent hover:text-foreground has-disabled:pointer-events-none has-aria-invalid:border-destructive/60 has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\">\n      <div aria-hidden=\"true\" className=\"inline-flex items-center gap-1\">\n        <FlagComponent aria-hidden=\"true\" country={value} countryName={value} />\n        <span className=\"text-muted-foreground/80\">\n          <ChevronDownIcon aria-hidden=\"true\" size={16} />\n        </span>\n      </div>\n      <select\n        aria-label=\"Select country\"\n        className=\"absolute inset-0 text-sm opacity-0\"\n        disabled={disabled}\n        onChange={handleSelect}\n        value={value}\n      >\n        <option key=\"default\" value=\"\">\n          Select a country\n        </option>\n        {options\n          .filter((x) => x.value)\n          .map((option, i) => (\n            <option key={option.value ?? `empty-${i}`} value={option.value}>\n              {option.label}{\" \"}\n              {option.value &&\n                `+${RPNInput.getCountryCallingCode(option.value)}`}\n            </option>\n          ))}\n      </select>\n    </div>\n  );\n};\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n  const Flag = flags[country];\n\n  return (\n    <span className=\"w-5 overflow-hidden rounded-sm\">\n      {Flag ? (\n        <Flag title={countryName} />\n      ) : (\n        <PhoneIcon aria-hidden=\"true\" size={16} />\n      )}\n    </span>\n  );\n};\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-460.tsx",
    "content": "import {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  paginationItemsToDisplay?: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5,\n}: PaginationProps) {\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    paginationItemsToDisplay,\n    totalPages,\n  });\n\n  return (\n    <Pagination>\n      <PaginationContent>\n        {/* First page button */}\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === 1 ? true : undefined}\n            aria-label=\"Go to first page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Previous page button */}\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === 1 ? true : undefined}\n            aria-label=\"Go to previous page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Left ellipsis (...) */}\n        {showLeftEllipsis && (\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Page number links */}\n        {pages.map((page) => (\n          <PaginationItem key={page}>\n            <PaginationLink\n              href={`#/page/${page}`}\n              isActive={page === currentPage}\n            >\n              {page}\n            </PaginationLink>\n          </PaginationItem>\n        ))}\n\n        {/* Right ellipsis (...) */}\n        {showRightEllipsis && (\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Next page button */}\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            aria-label=\"Go to next page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Last page button */}\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            aria-label=\"Go to last page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages ? undefined : `#/page/${totalPages}`\n            }\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronLastIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-461.tsx",
    "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  paginationItemsToDisplay?: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5,\n}: PaginationProps) {\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    paginationItemsToDisplay,\n    totalPages,\n  });\n\n  return (\n    <Pagination>\n      <PaginationContent className=\"inline-flex gap-0 -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n        {/* Previous page button */}\n        <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n          <PaginationLink\n            aria-disabled={currentPage === 1 ? true : undefined}\n            aria-label=\"Go to previous page\"\n            className={cn(\n              buttonVariants({\n                variant: \"outline\",\n              }),\n              \"rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50\",\n            )}\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Left ellipsis (...) */}\n        {showLeftEllipsis && (\n          <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n            <PaginationEllipsis />\n          </PaginationItem>\n        )}\n\n        {/* Page number links */}\n        {pages.map((page) => (\n          <PaginationItem key={page}>\n            <PaginationLink\n              className={cn(\n                buttonVariants({\n                  variant: \"outline\",\n                }),\n                \"rounded-none shadow-none focus-visible:z-10\",\n                page === currentPage && \"bg-accent\",\n              )}\n              href={`#/page/${page}`}\n              isActive={page === currentPage}\n            >\n              {page}\n            </PaginationLink>\n          </PaginationItem>\n        ))}\n\n        {/* Right ellipsis (...) */}\n        {showRightEllipsis && (\n          <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n            <PaginationEllipsis\n              className={cn(\n                buttonVariants({\n                  variant: \"outline\",\n                }),\n                \"pointer-events-none rounded-none shadow-none\",\n              )}\n            />\n          </PaginationItem>\n        )}\n\n        {/* Next page button */}\n        <PaginationItem className=\"[&:first-child>a]:rounded-s-md [&:last-child>a]:rounded-e-md\">\n          <PaginationLink\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            aria-label=\"Go to next page\"\n            className={cn(\n              buttonVariants({\n                variant: \"outline\",\n              }),\n              \"rounded-none shadow-none focus-visible:z-10 aria-disabled:pointer-events-none [&[aria-disabled]>svg]:opacity-50\",\n            )}\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-462.tsx",
    "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  paginationItemsToDisplay?: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5,\n}: PaginationProps) {\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    paginationItemsToDisplay,\n    totalPages,\n  });\n\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      {/* Page number information */}\n      <p\n        aria-live=\"polite\"\n        className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n      >\n        Page <span className=\"text-foreground\">{currentPage}</span> of{\" \"}\n        <span className=\"text-foreground\">{totalPages}</span>\n      </p>\n\n      {/* Pagination */}\n      <div className=\"grow\">\n        <Pagination>\n          <PaginationContent>\n            {/* Previous page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === 1 ? true : undefined}\n                aria-label=\"Go to previous page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n                href={\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\n                }\n                role={currentPage === 1 ? \"link\" : undefined}\n              >\n                <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n              </PaginationLink>\n            </PaginationItem>\n\n            {/* Left ellipsis (...) */}\n            {showLeftEllipsis && (\n              <PaginationItem>\n                <PaginationEllipsis />\n              </PaginationItem>\n            )}\n\n            {/* Page number links */}\n            {pages.map((page) => (\n              <PaginationItem key={page}>\n                <PaginationLink\n                  href={`#/page/${page}`}\n                  isActive={page === currentPage}\n                >\n                  {page}\n                </PaginationLink>\n              </PaginationItem>\n            ))}\n\n            {/* Right ellipsis (...) */}\n            {showRightEllipsis && (\n              <PaginationItem>\n                <PaginationEllipsis />\n              </PaginationItem>\n            )}\n\n            {/* Next page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === totalPages ? true : undefined}\n                aria-label=\"Go to next page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n                href={\n                  currentPage === totalPages\n                    ? undefined\n                    : `#/page/${currentPage + 1}`\n                }\n                role={currentPage === totalPages ? \"link\" : undefined}\n              >\n                <ChevronRightIcon aria-hidden=\"true\" size={16} />\n              </PaginationLink>\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n\n      {/* Results per page */}\n      <div className=\"flex flex-1 justify-end\">\n        <Select aria-label=\"Results per page\" defaultValue=\"10\">\n          <SelectTrigger\n            className=\"w-fit whitespace-nowrap\"\n            id=\"results-per-page\"\n          >\n            <SelectValue placeholder=\"Select number of results\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"10\">10 / page</SelectItem>\n            <SelectItem value=\"20\">20 / page</SelectItem>\n            <SelectItem value=\"50\">50 / page</SelectItem>\n            <SelectItem value=\"100\">100 / page</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-463.tsx",
    "content": "import {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  const id = useId();\n  return (\n    <div className=\"flex items-center justify-between gap-8\">\n      {/* Results per page */}\n      <div className=\"flex items-center gap-3\">\n        <Label htmlFor={id}>Rows per page</Label>\n        <Select defaultValue=\"25\">\n          <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n            <SelectValue placeholder=\"Select number of results\" />\n          </SelectTrigger>\n          <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n            <SelectItem value=\"10\">10</SelectItem>\n            <SelectItem value=\"25\">25</SelectItem>\n            <SelectItem value=\"50\">50</SelectItem>\n            <SelectItem value=\"100\">100</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n\n      {/* Page number information */}\n      <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n        <p\n          aria-live=\"polite\"\n          className=\"whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          <span className=\"text-foreground\">1-25</span> of{\" \"}\n          <span className=\"text-foreground\">100</span>\n        </p>\n      </div>\n\n      {/* Pagination */}\n      <div>\n        <Pagination>\n          <PaginationContent>\n            {/* First page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === 1 ? true : undefined}\n                aria-label=\"Go to first page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n                href={\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\n                }\n                role={currentPage === 1 ? \"link\" : undefined}\n              >\n                <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n              </PaginationLink>\n            </PaginationItem>\n\n            {/* Previous page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === 1 ? true : undefined}\n                aria-label=\"Go to previous page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n                href={\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\n                }\n                role={currentPage === 1 ? \"link\" : undefined}\n              >\n                <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n              </PaginationLink>\n            </PaginationItem>\n\n            {/* Next page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === totalPages ? true : undefined}\n                aria-label=\"Go to next page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n                href={\n                  currentPage === totalPages\n                    ? undefined\n                    : `#/page/${currentPage + 1}`\n                }\n                role={currentPage === totalPages ? \"link\" : undefined}\n              >\n                <ChevronRightIcon aria-hidden=\"true\" size={16} />\n              </PaginationLink>\n            </PaginationItem>\n\n            {/* Last page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === totalPages ? true : undefined}\n                aria-label=\"Go to last page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n                href={\n                  currentPage === totalPages\n                    ? undefined\n                    : `#/page/${totalPages}`\n                }\n                role={currentPage === totalPages ? \"link\" : undefined}\n              >\n                <ChevronLastIcon aria-hidden=\"true\" size={16} />\n              </PaginationLink>\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-464.tsx",
    "content": "import {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  paginationItemsToDisplay?: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n}: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent>\n        {/* First page button */}\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === 1 ? true : undefined}\n            aria-label=\"Go to first page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Previous page button */}\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === 1 ? true : undefined}\n            aria-label=\"Go to previous page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={currentPage === 1 ? undefined : `#/page/${currentPage - 1}`}\n            role={currentPage === 1 ? \"link\" : undefined}\n          >\n            <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Page number select */}\n        <PaginationItem>\n          <Select aria-label=\"Select page\" defaultValue={String(currentPage)}>\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id=\"select-page\">\n              <SelectValue placeholder=\"Select page\" />\n            </SelectTrigger>\n            <SelectContent>\n              {Array.from({ length: totalPages }, (_, i) => i + 1).map(\n                (page) => (\n                  <SelectItem key={page} value={String(page)}>\n                    Page {page}\n                  </SelectItem>\n                ),\n              )}\n            </SelectContent>\n          </Select>\n        </PaginationItem>\n\n        {/* Next page button */}\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            aria-label=\"Go to next page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages\n                ? undefined\n                : `#/page/${currentPage + 1}`\n            }\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronRightIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n\n        {/* Last page button */}\n        <PaginationItem>\n          <PaginationLink\n            aria-disabled={currentPage === totalPages ? true : undefined}\n            aria-label=\"Go to last page\"\n            className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n            href={\n              currentPage === totalPages ? undefined : `#/page/${totalPages}`\n            }\n            role={currentPage === totalPages ? \"link\" : undefined}\n          >\n            <ChevronLastIcon aria-hidden=\"true\" size={16} />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-465.tsx",
    "content": "import { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  paginationItemsToDisplay?: number;\n};\n\nexport default function Component({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay = 5,\n}: PaginationProps) {\n  const id = useId();\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage,\n    paginationItemsToDisplay,\n    totalPages,\n  });\n\n  return (\n    <div className=\"flex items-center justify-between gap-4\">\n      {/* Pagination */}\n      <div>\n        <Pagination>\n          <PaginationContent>\n            {/* Previous page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === 1 ? true : undefined}\n                aria-label=\"Go to previous page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n                href={\n                  currentPage === 1 ? undefined : `#/page/${currentPage - 1}`\n                }\n                role={currentPage === 1 ? \"link\" : undefined}\n              >\n                <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n              </PaginationLink>\n            </PaginationItem>\n\n            {/* Left ellipsis (...) */}\n            {showLeftEllipsis && (\n              <PaginationItem>\n                <PaginationEllipsis />\n              </PaginationItem>\n            )}\n\n            {/* Page number links */}\n            {pages.map((page) => (\n              <PaginationItem key={page}>\n                <PaginationLink\n                  href={`#/page/${page}`}\n                  isActive={page === currentPage}\n                >\n                  {page}\n                </PaginationLink>\n              </PaginationItem>\n            ))}\n\n            {/* Right ellipsis (...) */}\n            {showRightEllipsis && (\n              <PaginationItem>\n                <PaginationEllipsis />\n              </PaginationItem>\n            )}\n\n            {/* Next page button */}\n            <PaginationItem>\n              <PaginationLink\n                aria-disabled={currentPage === totalPages ? true : undefined}\n                aria-label=\"Go to next page\"\n                className=\"aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n                href={\n                  currentPage === totalPages\n                    ? undefined\n                    : `#/page/${currentPage + 1}`\n                }\n                role={currentPage === totalPages ? \"link\" : undefined}\n              >\n                <ChevronRightIcon aria-hidden=\"true\" size={16} />\n              </PaginationLink>\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n\n      {/* Go to page input */}\n      <div className=\"flex items-center gap-3\">\n        <Label className=\"whitespace-nowrap\" htmlFor={id}>\n          Go to page\n        </Label>\n        <Input\n          className=\"w-14\"\n          defaultValue={String(currentPage)}\n          id={id}\n          type=\"text\"\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-466.tsx",
    "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    balance: \"$1,250.00\",\n    email: \"alex.t@company.com\",\n    id: \"1\",\n    location: \"San Francisco, US\",\n    name: \"Alex Thompson\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"sarah.c@company.com\",\n    id: \"2\",\n    location: \"Singapore\",\n    name: \"Sarah Chen\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$650.00\",\n    email: \"j.wilson@company.com\",\n    id: \"3\",\n    location: \"London, UK\",\n    name: \"James Wilson\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$0.00\",\n    email: \"m.garcia@company.com\",\n    id: \"4\",\n    location: \"Madrid, Spain\",\n    name: \"Maria Garcia\",\n    status: \"Active\",\n  },\n  {\n    balance: \"-$1,000.00\",\n    email: \"d.kim@company.com\",\n    id: \"5\",\n    location: \"Seoul, KR\",\n    name: \"David Kim\",\n    status: \"Active\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Location</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Balance</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {items.map((item) => (\n            <TableRow key={item.id}>\n              <TableCell className=\"font-medium\">{item.name}</TableCell>\n              <TableCell>{item.email}</TableCell>\n              <TableCell>{item.location}</TableCell>\n              <TableCell>{item.status}</TableCell>\n              <TableCell className=\"text-right\">{item.balance}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={4}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic table\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-467.tsx",
    "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    balance: \"$1,250.00\",\n    email: \"alex.t@company.com\",\n    id: \"1\",\n    image:\n      \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/exp1/avatar-40-02_upqrxi.jpg\",\n    location: \"San Francisco, US\",\n    name: \"Alex Thompson\",\n    status: \"Active\",\n    username: \"@alexthompson\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"sarah.c@company.com\",\n    id: \"2\",\n    image:\n      \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/exp1/avatar-40-01_ij9v7j.jpg\",\n    location: \"Singapore\",\n    name: \"Sarah Chen\",\n    status: \"Active\",\n    username: \"@sarahchen\",\n  },\n  {\n    balance: \"$0.00\",\n    email: \"m.garcia@company.com\",\n    id: \"4\",\n    image:\n      \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/exp1/avatar-40-03_dkeufx.jpg\",\n    location: \"Madrid, Spain\",\n    name: \"Maria Garcia\",\n    status: \"Active\",\n    username: \"@mariagarcia\",\n  },\n  {\n    balance: \"-$1,000.00\",\n    email: \"d.kim@company.com\",\n    id: \"5\",\n    image:\n      \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/exp1/avatar-40-05_cmz0mg.jpg\",\n    location: \"Seoul, KR\",\n    name: \"David Kim\",\n    status: \"Active\",\n    username: \"@davidkim\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Location</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Balance</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {items.map((item) => (\n            <TableRow key={item.id}>\n              <TableCell>\n                <div className=\"flex items-center gap-3\">\n                  <img\n                    alt={item.name}\n                    className=\"rounded-full\"\n                    height={40}\n                    src={item.image}\n                    width={40}\n                  />\n                  <div>\n                    <div className=\"font-medium\">{item.name}</div>\n                    <span className=\"mt-0.5 text-muted-foreground text-xs\">\n                      {item.username}\n                    </span>\n                  </div>\n                </div>\n              </TableCell>\n              <TableCell>{item.email}</TableCell>\n              <TableCell>{item.location}</TableCell>\n              <TableCell>{item.status}</TableCell>\n              <TableCell className=\"text-right\">{item.balance}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Table with images\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-468.tsx",
    "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    balance: \"$1,250.00\",\n    email: \"alex.t@company.com\",\n    id: \"1\",\n    location: \"San Francisco, US\",\n    name: \"Alex Thompson\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"sarah.c@company.com\",\n    id: \"2\",\n    location: \"Singapore\",\n    name: \"Sarah Chen\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$650.00\",\n    email: \"j.wilson@company.com\",\n    id: \"3\",\n    location: \"London, UK\",\n    name: \"James Wilson\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$0.00\",\n    email: \"m.garcia@company.com\",\n    id: \"4\",\n    location: \"Madrid, Spain\",\n    name: \"Maria Garcia\",\n    status: \"Active\",\n  },\n  {\n    balance: \"-$1,000.00\",\n    email: \"d.kim@company.com\",\n    id: \"5\",\n    location: \"Seoul, KR\",\n    name: \"David Kim\",\n    status: \"Active\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Location</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Balance</TableHead>\n          </TableRow>\n        </TableHeader>\n        <tbody aria-hidden=\"true\" className=\"table-row h-2\" />\n        <TableBody className=\"[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg\">\n          {items.map((item) => (\n            <TableRow className=\"border-none\" key={item.id}>\n              <TableCell className=\"py-2.5 font-medium\">{item.name}</TableCell>\n              <TableCell className=\"py-2.5\">{item.email}</TableCell>\n              <TableCell className=\"py-2.5\">{item.location}</TableCell>\n              <TableCell className=\"py-2.5\">{item.status}</TableCell>\n              <TableCell className=\"py-2.5 text-right\">\n                {item.balance}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <tbody aria-hidden=\"true\" className=\"table-row h-2\" />\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={4}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Table without horizontal dividers\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-469.tsx",
    "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    balance: \"$1,250.00\",\n    email: \"alex.t@company.com\",\n    id: \"1\",\n    location: \"San Francisco, US\",\n    name: \"Alex Thompson\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"sarah.c@company.com\",\n    id: \"2\",\n    location: \"Singapore\",\n    name: \"Sarah Chen\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$650.00\",\n    email: \"j.wilson@company.com\",\n    id: \"3\",\n    location: \"London, UK\",\n    name: \"James Wilson\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$0.00\",\n    email: \"m.garcia@company.com\",\n    id: \"4\",\n    location: \"Madrid, Spain\",\n    name: \"Maria Garcia\",\n    status: \"Active\",\n  },\n  {\n    balance: \"-$1,000.00\",\n    email: \"d.kim@company.com\",\n    id: \"5\",\n    location: \"Seoul, KR\",\n    name: \"David Kim\",\n    status: \"Active\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div>\n      <Table>\n        <TableHeader className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Location</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Balance</TableHead>\n          </TableRow>\n        </TableHeader>\n        <tbody aria-hidden=\"true\" className=\"table-row h-2\" />\n        <TableBody className=\"[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg\">\n          {items.map((item) => (\n            <TableRow\n              className=\"border-none odd:bg-muted/50 hover:bg-transparent odd:hover:bg-muted/50\"\n              key={item.id}\n            >\n              <TableCell className=\"py-2.5 font-medium\">{item.name}</TableCell>\n              <TableCell className=\"py-2.5\">{item.email}</TableCell>\n              <TableCell className=\"py-2.5\">{item.location}</TableCell>\n              <TableCell className=\"py-2.5\">{item.status}</TableCell>\n              <TableCell className=\"py-2.5 text-right\">\n                {item.balance}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <tbody aria-hidden=\"true\" className=\"table-row h-2\" />\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={4}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Striped table\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-47.tsx",
    "content": "\"use client\";\n\nimport { CreditCardIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { usePaymentInputs } from \"react-payment-inputs\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const { getCardNumberProps } = usePaymentInputs();\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`number-${id}`}>Card Number</Label>\n      <div className=\"relative\">\n        <Input\n          {...getCardNumberProps()}\n          className=\"peer ps-9 [direction:inherit]\"\n          id={`number-${id}`}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <CreditCardIcon aria-hidden=\"true\" size={16} />\n        </div>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/medipass/react-payment-inputs\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Payment Inputs\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-470.tsx",
    "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    balance: \"$1,250.00\",\n    email: \"alex.t@company.com\",\n    id: \"1\",\n    location: \"San Francisco, US\",\n    name: \"Alex Thompson\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"sarah.c@company.com\",\n    id: \"2\",\n    location: \"Singapore\",\n    name: \"Sarah Chen\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$650.00\",\n    email: \"j.wilson@company.com\",\n    id: \"3\",\n    location: \"London, UK\",\n    name: \"James Wilson\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$0.00\",\n    email: \"m.garcia@company.com\",\n    id: \"4\",\n    location: \"Madrid, Spain\",\n    name: \"Maria Garcia\",\n    status: \"Active\",\n  },\n  {\n    balance: \"-$1,000.00\",\n    email: \"d.kim@company.com\",\n    id: \"5\",\n    location: \"Seoul, KR\",\n    name: \"David Kim\",\n    status: \"Active\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div>\n      <Table>\n        <TableHeader className=\"bg-transparent\">\n          <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Location</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Balance</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody className=\"[&_td:first-child]:rounded-l-lg [&_td:last-child]:rounded-r-lg\">\n          {items.map((item) => (\n            <TableRow\n              className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\"\n              key={item.id}\n            >\n              <TableCell className=\"font-medium\">{item.name}</TableCell>\n              <TableCell>{item.email}</TableCell>\n              <TableCell>{item.location}</TableCell>\n              <TableCell>{item.status}</TableCell>\n              <TableCell className=\"text-right\">{item.balance}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Table with vertical lines\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-471.tsx",
    "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst programmingLanguages = [\n  {\n    developer: \"Brendan Eich\",\n    extension: \".js\",\n    id: \"1\",\n    latestVersion: \"ES2021\",\n    name: \"JavaScript\",\n    paradigm: \"Multi-paradigm\",\n    popularity: \"High\",\n    releaseYear: \"1995\",\n    typing: \"Dynamic\",\n  },\n  {\n    developer: \"Guido van Rossum\",\n    extension: \".py\",\n    id: \"2\",\n    latestVersion: \"3.10\",\n    name: \"Python\",\n    paradigm: \"Multi-paradigm\",\n    popularity: \"High\",\n    releaseYear: \"1991\",\n    typing: \"Dynamic\",\n  },\n  {\n    developer: \"James Gosling\",\n    extension: \".java\",\n    id: \"3\",\n    latestVersion: \"17\",\n    name: \"Java\",\n    paradigm: \"Object-oriented\",\n    popularity: \"High\",\n    releaseYear: \"1995\",\n    typing: \"Static\",\n  },\n  {\n    developer: \"Bjarne Stroustrup\",\n    extension: \".cpp\",\n    id: \"4\",\n    latestVersion: \"C++20\",\n    name: \"C++\",\n    paradigm: \"Multi-paradigm\",\n    popularity: \"High\",\n    releaseYear: \"1985\",\n    typing: \"Static\",\n  },\n  {\n    developer: \"Yukihiro Matsumoto\",\n    extension: \".rb\",\n    id: \"5\",\n    latestVersion: \"3.0\",\n    name: \"Ruby\",\n    paradigm: \"Multi-paradigm\",\n    popularity: \"Low\",\n    releaseYear: \"1995\",\n    typing: \"Dynamic\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div>\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"bg-muted/50\">\n              <TableHead className=\"h-9 py-2\">Name</TableHead>\n              <TableHead className=\"h-9 py-2\">Release Year</TableHead>\n              <TableHead className=\"h-9 py-2\">Developer</TableHead>\n              <TableHead className=\"h-9 py-2\">Typing</TableHead>\n              <TableHead className=\"h-9 py-2\">Paradigm</TableHead>\n              <TableHead className=\"h-9 py-2\">Extension</TableHead>\n              <TableHead className=\"h-9 py-2\">Latest Version</TableHead>\n              <TableHead className=\"h-9 py-2\">Popularity</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {programmingLanguages.map((language) => (\n              <TableRow key={language.id}>\n                <TableCell className=\"py-2 font-medium\">\n                  {language.name}\n                </TableCell>\n                <TableCell className=\"py-2\">{language.releaseYear}</TableCell>\n                <TableCell className=\"py-2\">{language.developer}</TableCell>\n                <TableCell className=\"py-2\">{language.typing}</TableCell>\n                <TableCell className=\"py-2\">{language.paradigm}</TableCell>\n                <TableCell className=\"py-2\">{language.extension}</TableCell>\n                <TableCell className=\"py-2\">{language.latestVersion}</TableCell>\n                <TableCell className=\"py-2\">{language.popularity}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Dense table\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-472.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    balance: \"$1,250.00\",\n    email: \"alex.t@company.com\",\n    id: \"1\",\n    location: \"San Francisco, US\",\n    name: \"Alex Thompson\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"sarah.c@company.com\",\n    id: \"2\",\n    location: \"Singapore\",\n    name: \"Sarah Chen\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$650.00\",\n    email: \"j.wilson@company.com\",\n    id: \"3\",\n    location: \"London, UK\",\n    name: \"James Wilson\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$0.00\",\n    email: \"m.garcia@company.com\",\n    id: \"4\",\n    location: \"Madrid, Spain\",\n    name: \"Maria Garcia\",\n    status: \"Active\",\n  },\n  {\n    balance: \"-$1,000.00\",\n    email: \"d.kim@company.com\",\n    id: \"5\",\n    location: \"Seoul, KR\",\n    name: \"David Kim\",\n    status: \"Active\",\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            <TableHead>\n              <Checkbox id={id} />\n            </TableHead>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead>Location</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Balance</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {items.map((item) => (\n            <TableRow\n              className=\"has-data-[state=checked]:bg-muted/50\"\n              key={item.id}\n            >\n              <TableCell>\n                <Checkbox id={`table-checkbox-${item.id}`} />\n              </TableCell>\n              <TableCell className=\"font-medium\">{item.name}</TableCell>\n              <TableCell>{item.email}</TableCell>\n              <TableCell>{item.location}</TableCell>\n              <TableCell>{item.status}</TableCell>\n              <TableCell className=\"text-right\">{item.balance}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Table with row selection\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-473.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    balance: \"$1,250.00\",\n    email: \"alex.t@company.com\",\n    id: \"1\",\n    location: \"San Francisco, US\",\n    name: \"Alex Thompson\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"sarah.c@company.com\",\n    id: \"2\",\n    location: \"Singapore\",\n    name: \"Sarah Chen\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$650.00\",\n    email: \"j.wilson@company.com\",\n    id: \"3\",\n    location: \"London, UK\",\n    name: \"James Wilson\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$0.00\",\n    email: \"m.garcia@company.com\",\n    id: \"4\",\n    location: \"Madrid, Spain\",\n    name: \"Maria Garcia\",\n    status: \"Active\",\n  },\n  {\n    balance: \"-$1,000.00\",\n    email: \"d.kim@company.com\",\n    id: \"5\",\n    location: \"Seoul, KR\",\n    name: \"David Kim\",\n    status: \"Active\",\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div>\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"hover:bg-transparent\">\n              <TableHead className=\"h-11\">\n                <Checkbox id={id} />\n              </TableHead>\n              <TableHead className=\"h-11\">Name</TableHead>\n              <TableHead className=\"h-11\">Email</TableHead>\n              <TableHead className=\"h-11\">Location</TableHead>\n              <TableHead className=\"h-11\">Status</TableHead>\n              <TableHead className=\"h-11 text-right\">Balance</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {items.map((item) => (\n              <TableRow key={item.id}>\n                <TableCell>\n                  <Checkbox id={`table-checkbox-${item.id}`} />\n                </TableCell>\n                <TableCell className=\"font-medium\">{item.name}</TableCell>\n                <TableCell>{item.email}</TableCell>\n                <TableCell>{item.location}</TableCell>\n                <TableCell>{item.status}</TableCell>\n                <TableCell className=\"text-right\">{item.balance}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n          <TableFooter className=\"bg-transparent\">\n            <TableRow className=\"hover:bg-transparent\">\n              <TableCell colSpan={5}>Total</TableCell>\n              <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Card Table\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-474.tsx",
    "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-lg\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table>\n          <TableBody>\n            <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n              <TableCell className=\"bg-muted/50 py-2 font-medium\">\n                Name\n              </TableCell>\n              <TableCell className=\"py-2\">David Kim</TableCell>\n            </TableRow>\n            <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n              <TableCell className=\"bg-muted/50 py-2 font-medium\">\n                Email\n              </TableCell>\n              <TableCell className=\"py-2\">d.kim@company.com</TableCell>\n            </TableRow>\n            <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n              <TableCell className=\"bg-muted/50 py-2 font-medium\">\n                Location\n              </TableCell>\n              <TableCell className=\"py-2\">Seoul, KR</TableCell>\n            </TableRow>\n            <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n              <TableCell className=\"bg-muted/50 py-2 font-medium\">\n                Status\n              </TableCell>\n              <TableCell className=\"py-2\">Active</TableCell>\n            </TableRow>\n            <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n              <TableCell className=\"bg-muted/50 py-2 font-medium\">\n                Balance\n              </TableCell>\n              <TableCell className=\"py-2\">$1,000.00</TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Vertical table\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-475.tsx",
    "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    balance: \"$1,250.00\",\n    email: \"alex.t@company.com\",\n    id: \"1\",\n    location: \"San Francisco, US\",\n    name: \"Alex Thompson\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"sarah.c@company.com\",\n    id: \"2\",\n    location: \"Singapore\",\n    name: \"Sarah Chen\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$650.00\",\n    email: \"j.wilson@company.com\",\n    id: \"3\",\n    location: \"London, UK\",\n    name: \"James Wilson\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$0.00\",\n    email: \"m.garcia@company.com\",\n    id: \"4\",\n    location: \"Madrid, Spain\",\n    name: \"Maria Garcia\",\n    status: \"Active\",\n  },\n  {\n    balance: \"-$1,000.00\",\n    email: \"d.kim@company.com\",\n    id: \"5\",\n    location: \"Seoul, KR\",\n    name: \"David Kim\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$1,500.00\",\n    email: \"john.brown@company.com\",\n    id: \"6\",\n    location: \"New York, US\",\n    name: \"John Brown\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$200.00\",\n    email: \"jane.doe@company.com\",\n    id: \"7\",\n    location: \"Paris, FR\",\n    name: \"Jane Doe\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$1,000.00\",\n    email: \"peter.smith@company.com\",\n    id: \"8\",\n    location: \"Berlin, DE\",\n    name: \"Peter Smith\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$500.00\",\n    email: \"olivia.lee@company.com\",\n    id: \"9\",\n    location: \"Tokyo, JP\",\n    name: \"Olivia Lee\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$300.00\",\n    email: \"liam.chen@company.com\",\n    id: \"10\",\n    location: \"Shanghai, CN\",\n    name: \"Liam Chen\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$800.00\",\n    email: \"ethan.kim@company.com\",\n    id: \"11\",\n    location: \"Busan, KR\",\n    name: \"Ethan Kim\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$1,200.00\",\n    email: \"ava.brown@company.com\",\n    id: \"12\",\n    location: \"London, UK\",\n    name: \"Ava Brown\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$400.00\",\n    email: \"lily.lee@company.com\",\n    id: \"13\",\n    location: \"Seoul, KR\",\n    name: \"Lily Lee\",\n    status: \"Active\",\n  },\n  {\n    balance: \"$600.00\",\n    email: \"noah.smith@company.com\",\n    id: \"14\",\n    location: \"New York, US\",\n    name: \"Noah Smith\",\n    status: \"Inactive\",\n  },\n  {\n    balance: \"$1,800.00\",\n    email: \"eve.chen@company.com\",\n    id: \"15\",\n    location: \"Taipei, TW\",\n    name: \"Eve Chen\",\n    status: \"Active\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div>\n      <div className=\"[&>div]:max-h-96\">\n        <Table className=\"border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\">\n          <TableHeader className=\"sticky top-0 z-10 bg-background/90 backdrop-blur-xs\">\n            <TableRow className=\"hover:bg-transparent\">\n              <TableHead>Name</TableHead>\n              <TableHead>Email</TableHead>\n              <TableHead>Location</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead className=\"text-right\">Balance</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {items.map((item) => (\n              <TableRow key={item.id}>\n                <TableCell className=\"font-medium\">{item.name}</TableCell>\n                <TableCell>{item.email}</TableCell>\n                <TableCell>{item.location}</TableCell>\n                <TableCell>{item.status}</TableCell>\n                <TableCell className=\"text-right\">{item.balance}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n          <TableFooter className=\"bg-transparent\">\n            <TableRow className=\"hover:bg-transparent\">\n              <TableCell colSpan={4}>Total</TableCell>\n              <TableCell className=\"text-right\">$2,500.00</TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </div>\n      <p className=\"mt-8 text-center text-muted-foreground text-sm\">\n        Table with sticky header\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-476.tsx",
    "content": "import { CheckIcon, MonitorIcon, SmartphoneIcon, XIcon } from \"lucide-react\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nconst items = [\n  {\n    desktop: [\n      { name: \"Chrome\", supported: true, version: \"115\" },\n      { name: \"Edge\", supported: true, version: \"115\" },\n      { name: \"Firefox\", supported: false, version: \"111\" },\n      { name: \"Opera\", supported: true, version: \"101\" },\n      { name: \"Safari\", supported: false, version: \"No\" },\n    ],\n    feature: \"scroll-timeline\",\n    mobile: [\n      { name: \"Chrome Android\", supported: true, version: \"115\" },\n      { name: \"Firefox Android\", supported: false, version: \"No\" },\n      { name: \"Opera Android\", supported: true, version: \"77\" },\n      { name: \"Safari iOS\", supported: false, version: \"No\" },\n      { name: \"Samsung Internet\", supported: true, version: \"23\" },\n    ],\n  },\n  {\n    desktop: [\n      { name: \"Chrome\", supported: true, version: \"115\" },\n      { name: \"Edge\", supported: true, version: \"115\" },\n      { name: \"Firefox\", supported: false, version: \"114\" },\n      { name: \"Opera\", supported: true, version: \"101\" },\n      { name: \"Safari\", supported: false, version: \"No\" },\n    ],\n    feature: \"view-timeline\",\n    mobile: [\n      { name: \"Chrome Android\", supported: true, version: \"115\" },\n      { name: \"Firefox Android\", supported: false, version: \"No\" },\n      { name: \"Opera Android\", supported: true, version: \"77\" },\n      { name: \"Safari iOS\", supported: false, version: \"No\" },\n      { name: \"Samsung Internet\", supported: true, version: \"23\" },\n    ],\n  },\n  {\n    desktop: [\n      { name: \"Chrome\", supported: true, version: \"127\" },\n      { name: \"Edge\", supported: true, version: \"127\" },\n      { name: \"Firefox\", supported: false, version: \"3\" },\n      { name: \"Opera\", supported: true, version: \"113\" },\n      { name: \"Safari\", supported: true, version: \"16.4\" },\n    ],\n    feature: \"font-size-adjust\",\n    mobile: [\n      { name: \"Chrome Android\", supported: true, version: \"127\" },\n      { name: \"Firefox Android\", supported: true, version: \"4\" },\n      { name: \"Opera Android\", supported: true, version: \"84\" },\n      { name: \"Safari iOS\", supported: true, version: \"16.4\" },\n      { name: \"Samsung Internet\", supported: false, version: \"No\" },\n    ],\n  },\n];\n\nexport default function Component() {\n  return (\n    <Table>\n      <TableHeader>\n        <TableRow className=\"border-y-0 *:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n          <TableCell />\n          <TableHead className=\"border-b text-center\" colSpan={5}>\n            <MonitorIcon aria-hidden=\"true\" className=\"inline-flex\" size={16} />\n            <span className=\"sr-only\">Desktop browsers</span>\n          </TableHead>\n          <TableHead className=\"border-b text-center\" colSpan={5}>\n            <SmartphoneIcon\n              aria-hidden=\"true\"\n              className=\"inline-flex\"\n              size={16}\n            />\n            <span className=\"sr-only\">Mobile browsers</span>\n          </TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableHeader>\n        <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n          <TableCell />\n          {items[0].desktop.map((browser) => (\n            <TableHead\n              className=\"h-auto py-3 align-bottom text-foreground\"\n              key={browser.name}\n            >\n              <span className=\"relative left-[calc(50%-.5rem)] block rotate-180 whitespace-nowrap leading-4 [text-orientation:sideways] [writing-mode:vertical-rl]\">\n                {browser.name}\n              </span>\n            </TableHead>\n          ))}\n          {items[0].mobile.map((browser) => (\n            <TableHead\n              className=\"h-auto py-3 align-bottom text-foreground\"\n              key={browser.name}\n            >\n              <span className=\"relative left-[calc(50%-.5rem)] block rotate-180 whitespace-nowrap leading-4 [text-orientation:sideways] [writing-mode:vertical-rl]\">\n                {browser.name}\n              </span>\n            </TableHead>\n          ))}\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {items.map((item) => (\n          <TableRow\n            className=\"*:border-border [&>:not(:last-child)]:border-r\"\n            key={item.feature}\n          >\n            <TableHead className=\"font-medium text-foreground\">\n              {item.feature}\n            </TableHead>\n            {[...item.desktop, ...item.mobile].map((browser, index) => (\n              <TableCell\n                className=\"space-y-1 text-center\"\n                key={`${browser.name}-${index}`}\n              >\n                {browser.supported ? (\n                  <CheckIcon\n                    aria-hidden=\"true\"\n                    className=\"inline-flex stroke-emerald-600\"\n                    size={16}\n                  />\n                ) : (\n                  <XIcon\n                    aria-hidden=\"true\"\n                    className=\"inline-flex stroke-red-600\"\n                    size={16}\n                  />\n                )}\n                <span className=\"sr-only\">\n                  {browser.supported ? \"Supported\" : \"Not supported\"}\n                </span>\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  {browser.version}\n                </div>\n              </TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-477.tsx",
    "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter className=\"bg-transparent\">\n          <TableRow className=\"hover:bg-transparent\">\n            <TableCell colSpan={5}>Total</TableCell>\n            <TableCell className=\"text-right\">\n              {new Intl.NumberFormat(\"en-US\", {\n                currency: \"USD\",\n                style: \"currency\",\n              }).format(data.reduce((total, item) => total + item.balance, 0))}\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Basic data table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-478.tsx",
    "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getSortedRowModel,\n  type RowData,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ndeclare module \"@tanstack/react-table\" {\n  //allows us to define custom properties for our columns\n  // Type parameters TData and TValue must match TanStack Table's declaration exactly\n  // biome-ignore lint: Type parameters required for module augmentation compatibility\n  interface ColumnMeta<TData extends RowData, TValue> {\n    filterVariant?: \"text\" | \"range\" | \"select\";\n  }\n}\n\ntype Item = {\n  id: string;\n  keyword: string;\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >;\n  volume: number;\n  cpc: number;\n  traffic: number;\n  link: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n    header: \"Keyword\",\n  },\n  {\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[];\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent];\n\n            return (\n              <div\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded font-medium text-xs\",\n                  styles,\n                )}\n                key={intent}\n              >\n                {intent.charAt(0)}\n              </div>\n            );\n          })}\n        </div>\n      );\n    },\n    enableSorting: false,\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id);\n      return Array.isArray(rowValue) && rowValue.includes(filterValue);\n    },\n    header: \"Intents\",\n    meta: {\n      filterVariant: \"select\",\n    },\n  },\n  {\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = Number.parseInt(row.getValue(\"volume\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(volume);\n    },\n    header: \"Volume\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    header: \"CPC\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = Number.parseInt(row.getValue(\"traffic\"), 10);\n      return new Intl.NumberFormat(\"en-US\", {\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n      }).format(traffic);\n    },\n    header: \"Traffic\",\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon aria-hidden=\"true\" size={12} />\n      </a>\n    ),\n    enableSorting: false,\n    header: \"Link\",\n  },\n];\n\nconst items: Item[] = [\n  {\n    cpc: 2.5,\n    id: \"1\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react components\",\n    link: \"https://coss.com/origin\",\n    traffic: 88,\n    volume: 2507,\n  },\n  {\n    cpc: 4.75,\n    id: \"2\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"buy react templates\",\n    link: \"https://coss.com/origin/input\",\n    traffic: 65,\n    volume: 1850,\n  },\n  {\n    cpc: 3.25,\n    id: \"3\",\n    intents: [\"Informational\", \"Commercial\"],\n    keyword: \"react ui library\",\n    link: \"https://coss.com/origin/badge\",\n    traffic: 112,\n    volume: 3200,\n  },\n  {\n    cpc: 1.95,\n    id: \"4\",\n    intents: [\"Transactional\"],\n    keyword: \"tailwind components download\",\n    link: \"https://coss.com/origin/alert\",\n    traffic: 45,\n    volume: 890,\n  },\n  {\n    cpc: 5.5,\n    id: \"5\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react dashboard template free\",\n    link: \"https://coss.com/origin/tabs\",\n    traffic: 156,\n    volume: 4100,\n  },\n  {\n    cpc: 1.25,\n    id: \"6\",\n    intents: [\"Informational\"],\n    keyword: \"how to use react components\",\n    link: \"https://coss.com/origin/table\",\n    traffic: 42,\n    volume: 1200,\n  },\n  {\n    cpc: 6.8,\n    id: \"7\",\n    intents: [\"Commercial\", \"Transactional\"],\n    keyword: \"react ui kit premium\",\n    link: \"https://coss.com/origin/avatar\",\n    traffic: 28,\n    volume: 760,\n  },\n  {\n    cpc: 1.8,\n    id: \"8\",\n    intents: [\"Informational\", \"Navigational\"],\n    keyword: \"react component documentation\",\n    link: \"https://coss.com/origin\",\n    traffic: 35,\n    volume: 950,\n  },\n];\n\nexport default function Component() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"traffic\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: items,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter\n    getFacetedRowModel: getFacetedRowModel(), // client-side faceting\n    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete\n    getFilteredRowModel: getFilteredRowModel(), //client-side filtering\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      sorting,\n    },\n  });\n\n  const keywordColumn = table.getColumn(\"keyword\");\n  const intentsColumn = table.getColumn(\"intents\");\n  const volumeColumn = table.getColumn(\"volume\");\n  const cpcColumn = table.getColumn(\"cpc\");\n  const trafficColumn = table.getColumn(\"traffic\");\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        {keywordColumn && (\n          <div className=\"w-44\">\n            <Filter column={keywordColumn} />\n          </div>\n        )}\n        {/* Intents select */}\n        {intentsColumn && (\n          <div className=\"w-36\">\n            <Filter column={intentsColumn} />\n          </div>\n        )}\n        {/* Volume inputs */}\n        {volumeColumn && (\n          <div className=\"w-36\">\n            <Filter column={volumeColumn} />\n          </div>\n        )}\n        {/* CPC inputs */}\n        {cpcColumn && (\n          <div className=\"w-36\">\n            <Filter column={cpcColumn} />\n          </div>\n        )}\n        {/* Traffic inputs */}\n        {trafficColumn && (\n          <div className=\"w-36\">\n            <Filter column={trafficColumn} />\n          </div>\n        )}\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t\"\n                    key={header.id}\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span aria-hidden=\"true\" className=\"size-4\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Filter({ column }: { column: Column<Item, unknown> }) {\n  const id = useId();\n  const columnFilterValue = column.getFilterValue();\n  const { filterVariant } = column.columnDef.meta ?? {};\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\";\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return [];\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys());\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        acc.push(...curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, []);\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort();\n  }, [column, filterVariant]);\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            aria-label={`${columnHeader} min`}\n            className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-1`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n          />\n          <Input\n            aria-label={`${columnHeader} max`}\n            className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n            id={`${id}-range-2`}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value);\n          }}\n          value={columnFilterValue?.toString() ?? \"all\"}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          id={`${id}-input`}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n          value={(columnFilterValue ?? \"\") as string}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-479.tsx",
    "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\";\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    className=\"relative h-10 select-none border-t last:[&>.cursor-col-resize]:opacity-0\"\n                    key={header.id}\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell className=\"truncate\" key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-48.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { usePaymentInputs } from \"react-payment-inputs\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const { getExpiryDateProps } = usePaymentInputs();\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`expiry-${id}`}>Expiry date</Label>\n      <Input\n        {...getExpiryDateProps()}\n        className=\"[direction:inherit]\"\n        id={`expiry-${id}`}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/medipass/react-payment-inputs\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Payment Inputs\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-480.tsx",
    "content": "\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\";\nimport { type CSSProperties, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  department: string;\n  role: string;\n  joinDate: string;\n  lastActive: string;\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\";\n};\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (column: Column<Item>): CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    left: isPinned === \"left\" ? `${column.getStart(\"left\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    right: isPinned === \"right\" ? `${column.getAfter(\"right\")}px` : undefined,\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  };\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n  },\n  {\n    accessorKey: \"department\",\n    header: \"Department\",\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"joinDate\",\n    header: \"Join Date\",\n  },\n  {\n    accessorKey: \"lastActive\",\n    header: \"Last Active\",\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  });\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-border [&_th]:border-b [&_tr:not(:last-child)_td]:border-b [&_tr]:border-none\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const { column } = header;\n                const isPinned = column.getIsPinned();\n                const isLastLeftPinned =\n                  isPinned === \"left\" && column.getIsLastColumn(\"left\");\n                const isFirstRightPinned =\n                  isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n                return (\n                  <TableHead\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    data-last-col={\n                      isLastLeftPinned\n                        ? \"left\"\n                        : isFirstRightPinned\n                          ? \"right\"\n                          : undefined\n                    }\n                    data-pinned={isPinned || undefined}\n                    key={header.id}\n                    style={{ ...getPinningStyles(column) }}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            size=\"icon\"\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                            variant=\"ghost\"\n                          >\n                            <PinOffIcon\n                              aria-hidden=\"true\"\n                              className=\"opacity-60\"\n                              size={16}\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                className=\"-mr-1 size-7 shadow-none\"\n                                size=\"icon\"\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                                variant=\"ghost\"\n                              >\n                                <EllipsisIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"left\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to left\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"right\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  aria-hidden=\"true\"\n                                  className=\"opacity-60\"\n                                  size={16}\n                                />\n                                Stick to right\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell;\n                  const isPinned = column.getIsPinned();\n                  const isLastLeftPinned =\n                    isPinned === \"left\" && column.getIsLastColumn(\"left\");\n                  const isFirstRightPinned =\n                    isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n                  return (\n                    <TableCell\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                      data-last-col={\n                        isLastLeftPinned\n                          ? \"left\"\n                          : isFirstRightPinned\n                            ? \"right\"\n                            : undefined\n                      }\n                      data-pinned={isPinned || undefined}\n                      key={cell.id}\n                      style={{ ...getPinningStyles(column) }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-481.tsx",
    "content": "\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\";\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport {\n  type Cell,\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  type Header,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\";\nimport { type CSSProperties, useEffect, useId, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    id: \"name\",\n    sortDescFirst: false,\n    sortUndefined: \"last\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    id: \"email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    id: \"location\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    id: \"balance\",\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    columns.map((column) => column.id as string),\n  );\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columnResizeMode: \"onChange\",\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onColumnOrderChange: setColumnOrder,\n    onSortingChange: setSorting,\n    state: {\n      columnOrder,\n      sorting,\n    },\n  });\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event;\n    if (active && over && active.id !== over.id) {\n      setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string);\n        const newIndex = columnOrder.indexOf(over.id as string);\n        return arrayMove(columnOrder, oldIndex, newIndex); //this is just a splice util\n      });\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={useId()}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"bg-muted/50\" key={headerGroup.id}>\n              <SortableContext\n                items={columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader header={header} key={header.id} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    items={columnOrder}\n                    key={cell.id}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell cell={cell} key={cell.id} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" rel=\"noopener noreferrer\" target=\"_blank\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  );\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<Item, unknown>;\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableHead\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      ref={setNodeRef}\n      style={style}\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          className=\"-ml-2 size-7 shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            aria-hidden=\"true\"\n            className=\"opacity-60\"\n            size={16}\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault();\n              header.column.getToggleSortingHandler()?.(e);\n            }\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  );\n};\n\nconst DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  });\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  };\n\n  return (\n    <TableCell className=\"truncate\" ref={setNodeRef} style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  );\n};\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-482.tsx",
    "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n  note?: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          ) : (\n            <ChevronDownIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n          )}\n        </Button>\n      ) : undefined;\n    },\n    header: () => null,\n    id: \"expander\",\n  },\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Balance</div>,\n  },\n];\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([]);\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data.slice(0, 5)); // Limit to 5 items\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getRowCanExpand: (row) => Boolean(row.original.note),\n  });\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                      key={cell.id}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-483.tsx",
    "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData([...data, ...data]);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-484.tsx",
    "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { usePagination } from \"@/registry/default/hooks/use-pagination\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all rows\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 200,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n];\n\nexport default function Component() {\n  const pageSize = 5;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.getState().pagination.pageIndex + 1,\n    paginationItemsToDisplay: 5,\n    totalPages: table.getPageCount(),\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          aria-live=\"polite\"\n          className=\"flex-1 whitespace-nowrap text-muted-foreground text-sm\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.getState().pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive =\n                  page === table.getState().pagination.pageIndex + 1;\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      aria-current={isActive ? \"page\" : undefined}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                );\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            aria-label=\"Results per page\"\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger\n              className=\"w-fit whitespace-nowrap\"\n              id=\"results-per-page\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-485.tsx",
    "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type FilterFn,\n  flexRender,\n  getCoreRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type Row,\n  type SortingState,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Item = {\n  id: string;\n  name: string;\n  email: string;\n  location: string;\n  flag: string;\n  status: \"Active\" | \"Inactive\" | \"Pending\";\n  balance: number;\n};\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<Item> = (row, _columnId, filterValue) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase();\n  const searchTerm = (filterValue ?? \"\").toLowerCase();\n  return searchableRowContent.includes(searchTerm);\n};\n\nconst statusFilterFn: FilterFn<Item> = (\n  row,\n  columnId,\n  filterValue: string[],\n) => {\n  if (!filterValue?.length) return true;\n  const status = row.getValue(columnId) as string;\n  return filterValue.includes(status);\n};\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableHiding: false,\n    enableSorting: false,\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    enableHiding: false,\n    filterFn: multiColumnFilterFn,\n    header: \"Name\",\n    size: 180,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    size: 220,\n  },\n  {\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    header: \"Location\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\",\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    filterFn: statusFilterFn,\n    header: \"Status\",\n    size: 100,\n  },\n  {\n    accessorKey: \"performance\",\n    header: \"Performance\",\n  },\n  {\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"balance\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        style: \"currency\",\n      }).format(amount);\n      return formatted;\n    },\n    header: \"Balance\",\n    size: 120,\n  },\n  {\n    cell: ({ row }) => <RowActions row={row} />,\n    enableHiding: false,\n    header: () => <span className=\"sr-only\">Actions</span>,\n    id: \"actions\",\n    size: 60,\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  });\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"name\",\n    },\n  ]);\n\n  const [data, setData] = useState<Item[]>([]);\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\",\n      );\n      const data = await res.json();\n      setData(data);\n    }\n    fetchPosts();\n  }, []);\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows;\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id),\n    );\n    setData(updatedData);\n    table.resetRowSelection();\n  };\n\n  const table = useReactTable({\n    columns,\n    data,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      columnFilters,\n      columnVisibility,\n      pagination,\n      sorting,\n    },\n  });\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n\n    if (!statusColumn) return [];\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys());\n\n    return values.sort();\n  }, [table.getColumn]);\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\");\n    if (!statusColumn) return new Map();\n    return statusColumn.getFacetedUniqueValues();\n  }, [table]);\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    return filterValue ?? [];\n  }, [table]);\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[];\n    const newFilterValue = filterValue ? [...filterValue] : [];\n\n    if (checked) {\n      newFilterValue.push(value);\n    } else {\n      const index = newFilterValue.indexOf(value);\n      if (index > -1) {\n        newFilterValue.splice(index, 1);\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\n  };\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              aria-label=\"Filter by name or email\"\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\",\n              )}\n              id={`${id}-input`}\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              ref={inputRef}\n              type=\"text\"\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon aria-hidden=\"true\" size={16} />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                aria-label=\"Clear filter\"\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\");\n                  if (inputRef.current) {\n                    inputRef.current.focus();\n                  }\n                }}\n                type=\"button\"\n              >\n                <CircleXIcon aria-hidden=\"true\" size={16} />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-auto min-w-36 p-3\">\n              <div className=\"space-y-3\">\n                <div className=\"font-medium text-muted-foreground text-xs\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div className=\"flex items-center gap-2\" key={value}>\n                      <Checkbox\n                        checked={selectedStatuses.includes(value)}\n                        id={`${id}-${i}`}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                        htmlFor={`${id}-${i}`}\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-muted-foreground text-xs\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      checked={column.getIsVisible()}\n                      className=\"capitalize\"\n                      key={column.id}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  );\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 opacity-60\"\n              size={16}\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      className=\"h-11\"\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer select-none items-center justify-between gap-2\",\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault();\n                              header.column.getToggleSortingHandler()?.(e);\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                aria-hidden=\"true\"\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )\n                      )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell className=\"last:py-0\" key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label className=\"max-sm:sr-only\" htmlFor={id}>\n            Rows per page\n          </Label>\n          <Select\n            onValueChange={(value) => {\n              table.setPageSize(Number(value));\n            }}\n            value={table.getState().pagination.pageSize.toString()}\n          >\n            <SelectTrigger className=\"w-fit whitespace-nowrap\" id={id}>\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end whitespace-nowrap text-muted-foreground text-sm\">\n          <p\n            aria-live=\"polite\"\n            className=\"whitespace-nowrap text-muted-foreground text-sm\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0,\n                ),\n                table.getRowCount(),\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to first page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.firstPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronFirstIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to previous page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanPreviousPage()}\n                  onClick={() => table.previousPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to next page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.nextPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  aria-label=\"Go to last page\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  disabled={!table.getCanNextPage()}\n                  onClick={() => table.lastPage()}\n                  size=\"icon\"\n                  variant=\"outline\"\n                >\n                  <ChevronLastIcon aria-hidden=\"true\" size={16} />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-muted-foreground text-sm\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction RowActions({ row: _row }: { row: Row<Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            aria-label=\"Edit item\"\n            className=\"shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <EllipsisIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-486.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label className=\"flex-1\">Range</Label>\n      <div className=\"flex\">\n        <Input\n          aria-label=\"Min Value\"\n          className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n          id={`${id}-1`}\n          placeholder=\"From\"\n          type=\"number\"\n        />\n        <Input\n          aria-label=\"Max Value\"\n          className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n          id={`${id}-2`}\n          placeholder=\"To\"\n          type=\"number\"\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-487.tsx",
    "content": "\"use client\";\n\nimport { getLocalTimeZone, today } from \"@internationalized/date\";\nimport { useState } from \"react\";\nimport type { DateValue } from \"react-aria-components\";\nimport { Calendar } from \"@/registry/default/ui/calendar-rac\";\n\nexport default function Component() {\n  const [date, setDate] = useState<DateValue | null>(today(getLocalTimeZone()));\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        onChange={setDate}\n        value={date}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-488.tsx",
    "content": "\"use client\";\n\nimport { getLocalTimeZone, today } from \"@internationalized/date\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-aria-components\";\nimport { RangeCalendar } from \"@/registry/default/ui/calendar-rac\";\n\nexport default function Component() {\n  const now = today(getLocalTimeZone());\n  const [date, setDate] = useState<DateRange | null>({\n    end: now.add({ days: 3 }),\n    start: now,\n  });\n\n  return (\n    <div>\n      <RangeCalendar\n        className=\"rounded-md border p-2\"\n        onChange={setDate}\n        value={date}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Range calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-489.tsx",
    "content": "\"use client\";\n\nimport { getLocalTimeZone, isWeekend, today } from \"@internationalized/date\";\nimport { useLocale } from \"react-aria\";\nimport type { DateValue } from \"react-aria-components\";\nimport { RangeCalendar } from \"@/registry/default/ui/calendar-rac\";\n\nexport default function Component() {\n  const now = today(getLocalTimeZone());\n  const disabledRanges = [\n    [now, now], // Disables today\n    [now.add({ days: 14 }), now.add({ days: 14 })], // Disables only the 14th day from now\n    [now.add({ days: 23 }), now.add({ days: 23 })], // Disables only the 23rd day from now\n  ];\n\n  const { locale } = useLocale();\n  const isDateUnavailable = (date: DateValue) =>\n    isWeekend(date, locale) ||\n    disabledRanges.some(\n      (interval) =>\n        date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,\n    );\n\n  return (\n    <div>\n      <RangeCalendar\n        className=\"rounded-md border p-2\"\n        isDateUnavailable={isDateUnavailable}\n        minValue={today(getLocalTimeZone())}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Disabled dates -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-49.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { usePaymentInputs } from \"react-payment-inputs\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const { getCVCProps } = usePaymentInputs();\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`cvc-${id}`}>Code</Label>\n      <Input\n        {...getCVCProps()}\n        className=\"[direction:inherit]\"\n        id={`cvc-${id}`}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/medipass/react-payment-inputs\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Payment Inputs\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-490.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        mode=\"single\"\n        onSelect={setDate}\n        selected={date}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-491.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  });\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        mode=\"range\"\n        onSelect={setDate}\n        selected={date}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Range calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-492.tsx",
    "content": "import { addDays } from \"date-fns\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        disabled={[\n          { before: new Date() }, // Dates before today\n          new Date(), // Today\n          { dayOfWeek: [0, 6] }, // Weekends\n          {\n            from: addDays(today, 14), // 14th day from now\n            to: addDays(today, 16), // 16th day from now\n          },\n          {\n            from: addDays(today, 23), // 23th day from now\n            to: addDays(today, 24), // 24th day from now\n          },\n        ]}\n        excludeDisabled\n        mode=\"range\"\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Disabled dates -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-493.tsx",
    "content": "\"use client\";\n\nimport { addDays, subDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<Date[] | undefined>([\n    subDays(today, 17),\n    addDays(today, 2),\n    addDays(today, 6),\n    addDays(today, 8),\n  ]);\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        mode=\"multiple\"\n        onSelect={setDate}\n        selected={date}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Multiple day selection -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-494.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        classNames={{\n          day_button: \"rounded-full\",\n        }}\n        mode=\"single\"\n        onSelect={setDate}\n        selected={date}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Custom select day style -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-495.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  });\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        classNames={{\n          day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-r before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-l\",\n          day_button:\n            \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n        }}\n        mode=\"range\"\n        onSelect={setDate}\n        selected={date}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Custom select range style -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-496.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        classNames={{\n          month_caption: \"ms-2.5 me-20 justify-start\",\n          nav: \"justify-end\",\n        }}\n        mode=\"single\"\n        onSelect={setDate}\n        selected={date}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Right navigation -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-497.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { DropdownNavProps, DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>;\n    _e(_event);\n  };\n\n  return (\n    <div>\n      <Calendar\n        captionLayout=\"dropdown\"\n        className=\"rounded-md border p-2\"\n        classNames={{\n          month_caption: \"mx-0\",\n        }}\n        components={{\n          Dropdown: (props: DropdownProps) => {\n            return (\n              <Select\n                onValueChange={(value) => {\n                  if (props.onChange) {\n                    handleCalendarChange(value, props.onChange);\n                  }\n                }}\n                value={String(props.value)}\n              >\n                <SelectTrigger className=\"h-8 w-fit font-medium first:grow\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent className=\"max-h-[min(26rem,var(--radix-select-content-available-height))]\">\n                  {props.options?.map((option) => (\n                    <SelectItem\n                      disabled={option.disabled}\n                      key={option.value}\n                      value={String(option.value)}\n                    >\n                      {option.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            );\n          },\n          DropdownNav: (props: DropdownNavProps) => {\n            return (\n              <div className=\"flex w-full items-center gap-2\">\n                {props.children}\n              </div>\n            );\n          },\n        }}\n        defaultMonth={new Date()}\n        hideNavigation\n        mode=\"single\"\n        onSelect={setDate}\n        selected={date}\n        startMonth={new Date(1980, 6)}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Monthly / yearly selects -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-498.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { DropdownNavProps, DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>;\n    _e(_event);\n  };\n\n  return (\n    <div>\n      <Calendar\n        captionLayout=\"dropdown-years\"\n        className=\"rounded-md border p-2\"\n        components={{\n          DropdownNav: (props: DropdownNavProps) => {\n            return (\n              <div className=\"flex w-full items-center justify-center gap-3 [&>span]:font-medium [&>span]:text-sm\">\n                {props.children}\n              </div>\n            );\n          },\n          YearsDropdown: (props: DropdownProps) => {\n            return (\n              <Select\n                onValueChange={(value) => {\n                  if (props.onChange) {\n                    handleCalendarChange(value, props.onChange);\n                  }\n                }}\n                value={String(props.value)}\n              >\n                <SelectTrigger className=\"h-8 w-fit font-medium\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent className=\"max-h-[min(26rem,var(--radix-select-content-available-height))]\">\n                  {props.options?.map((option) => (\n                    <SelectItem\n                      disabled={option.disabled}\n                      key={option.value}\n                      value={String(option.value)}\n                    >\n                      {option.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            );\n          },\n        }}\n        defaultMonth={new Date()}\n        mode=\"single\"\n        onSelect={setDate}\n        selected={date}\n        startMonth={new Date(1980, 6)}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Yearly select + nav -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-499.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { WeekNumberProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        components={{\n          WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n            return (\n              <th {...props}>\n                <span className=\"inline-flex size-9 items-center justify-center\">\n                  {week.weekNumber}\n                </span>\n              </th>\n            );\n          },\n        }}\n        fixedWeeks\n        mode=\"single\"\n        onSelect={setDate}\n        selected={date}\n        showWeekNumber\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Weekly numbers -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-50.tsx",
    "content": "\"use client\";\n\nimport { CreditCardIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { usePaymentInputs } from \"react-payment-inputs\";\nimport images, { type CardImages } from \"react-payment-inputs/images\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Component() {\n  const id = useId();\n  const {\n    meta,\n    getCardNumberProps,\n    getExpiryDateProps,\n    getCVCProps,\n    getCardImageProps,\n  } = usePaymentInputs();\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <legend className=\"font-medium text-foreground text-sm\">\n        Card Details\n      </legend>\n      <div className=\"rounded-md shadow-xs\">\n        <div className=\"relative focus-within:z-10\">\n          <Input\n            className=\"peer rounded-b-none pe-9 shadow-none [direction:inherit]\"\n            {...getCardNumberProps()}\n            id={`number-${id}`}\n          />\n          <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n            {meta.cardType ? (\n              <svg\n                className=\"overflow-hidden rounded-sm\"\n                {...getCardImageProps({\n                  images: images as unknown as CardImages,\n                })}\n                width={20}\n              />\n            ) : (\n              <CreditCardIcon aria-hidden=\"true\" size={16} />\n            )}\n          </div>\n        </div>\n        <div className=\"-mt-px flex\">\n          <div className=\"min-w-0 flex-1 focus-within:z-10\">\n            <Input\n              className=\"rounded-e-none rounded-t-none shadow-none [direction:inherit]\"\n              {...getExpiryDateProps()}\n              id={`expiry-${id}`}\n            />\n          </div>\n          <div className=\"-ms-px min-w-0 flex-1 focus-within:z-10\">\n            <Input\n              className=\"rounded-s-none rounded-t-none shadow-none [direction:inherit]\"\n              {...getCVCProps()}\n              id={`cvc-${id}`}\n            />\n          </div>\n        </div>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/medipass/react-payment-inputs\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React Payment Inputs\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-500.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const selectedDay = addDays(today, -28);\n  const [month, setMonth] = useState(selectedDay);\n  const [date, setDate] = useState<Date | undefined>(selectedDay);\n\n  return (\n    <div>\n      <div className=\"rounded-md border p-2\">\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          onSelect={setDate}\n          selected={date}\n        />\n        <Button\n          className=\"mt-2 mb-1\"\n          onClick={() => setMonth(today)}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          Current month\n        </Button>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        With button -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-501.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const selectedDay = addDays(today, -28);\n  const [month, setMonth] = useState(selectedDay);\n  const [date, setDate] = useState<Date | undefined>(selectedDay);\n\n  return (\n    <div>\n      <div className=\"rounded-md border p-2\">\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          onSelect={setDate}\n          selected={date}\n        />\n        <Button\n          className=\"mt-2 mb-1\"\n          onClick={() => {\n            setDate(today);\n            setMonth(today);\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          Today\n        </Button>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        With button -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-502.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useEffect, useId, useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const today = new Date();\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<Date | undefined>(today);\n  const [inputValue, setInputValue] = useState(\"\");\n\n  const handleDayPickerSelect = (date: Date | undefined) => {\n    if (!date) {\n      setInputValue(\"\");\n      setDate(undefined);\n    } else {\n      setDate(date);\n      setMonth(date);\n      setInputValue(format(date, \"yyyy-MM-dd\"));\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    setInputValue(value);\n\n    if (value) {\n      const parsedDate = new Date(value);\n      setDate(parsedDate);\n      setMonth(parsedDate);\n    } else {\n      setDate(undefined);\n    }\n  };\n\n  useEffect(() => {\n    setInputValue(format(today, \"yyyy-MM-dd\"));\n  }, [today]);\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <Calendar\n          className=\"p-2\"\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          onSelect={handleDayPickerSelect}\n          selected={date}\n        />\n        <div className=\"border-t p-3\">\n          <div className=\"flex items-center gap-3\">\n            <Label className=\"text-xs\" htmlFor={id}>\n              Enter date\n            </Label>\n            <div className=\"relative grow\">\n              <Input\n                aria-label=\"Select date\"\n                className=\"peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                id={id}\n                onChange={handleInputChange}\n                type=\"date\"\n                value={inputValue}\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <CalendarIcon aria-hidden=\"true\" size={16} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Date input -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-503.tsx",
    "content": "\"use client\";\n\nimport { ClockIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <Calendar\n          className=\"p-2\"\n          mode=\"single\"\n          onSelect={setDate}\n          selected={date}\n        />\n        <div className=\"border-t p-3\">\n          <div className=\"flex items-center gap-3\">\n            <Label className=\"text-xs\" htmlFor={id}>\n              Enter time\n            </Label>\n            <div className=\"relative grow\">\n              <Input\n                className=\"peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                defaultValue=\"12:00:00\"\n                id={id}\n                step=\"1\"\n                type=\"time\"\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <ClockIcon aria-hidden=\"true\" size={16} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Time input -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-504.tsx",
    "content": "\"use client\";\n\nimport {\n  eachMonthOfInterval,\n  eachYearOfInterval,\n  endOfYear,\n  format,\n  isAfter,\n  isBefore,\n  startOfYear,\n} from \"date-fns\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { CaptionLabelProps, MonthGridProps } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport default function Component() {\n  const today = new Date();\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<Date | undefined>(today);\n  const [isYearView, setIsYearView] = useState(false);\n  const startDate = new Date(1980, 6);\n  const endDate = new Date(2030, 6);\n\n  const years = eachYearOfInterval({\n    end: endOfYear(endDate),\n    start: startOfYear(startDate),\n  });\n\n  return (\n    <div>\n      <Calendar\n        className=\"overflow-hidden rounded-md border p-2\"\n        classNames={{\n          month_caption: \"ms-2.5 me-20 justify-start\",\n          nav: \"justify-end\",\n        }}\n        components={{\n          CaptionLabel: (props: CaptionLabelProps) => (\n            <CaptionLabel\n              isYearView={isYearView}\n              setIsYearView={setIsYearView}\n              {...props}\n            />\n          ),\n          MonthGrid: (props: MonthGridProps) => {\n            return (\n              <MonthGrid\n                className={props.className}\n                currentMonth={month.getMonth()}\n                currentYear={month.getFullYear()}\n                endDate={endDate}\n                isYearView={isYearView}\n                onMonthSelect={(selectedMonth: Date) => {\n                  setMonth(selectedMonth);\n                  setIsYearView(false);\n                }}\n                setIsYearView={setIsYearView}\n                startDate={startDate}\n                years={years}\n              >\n                {props.children}\n              </MonthGrid>\n            );\n          },\n        }}\n        defaultMonth={new Date()}\n        endMonth={endDate}\n        mode=\"single\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={setDate}\n        selected={date}\n        startMonth={startDate}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Advanced selection -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction MonthGrid({\n  className,\n  children,\n  isYearView,\n  startDate,\n  endDate,\n  years,\n  currentYear,\n  currentMonth,\n  onMonthSelect,\n}: {\n  className?: string;\n  children: React.ReactNode;\n  isYearView: boolean;\n  setIsYearView: React.Dispatch<React.SetStateAction<boolean>>;\n  startDate: Date;\n  endDate: Date;\n  years: Date[];\n  currentYear: number;\n  currentMonth: number;\n  onMonthSelect: (date: Date) => void;\n}) {\n  const currentYearRef = useRef<HTMLDivElement>(null);\n  const currentMonthButtonRef = useRef<HTMLButtonElement>(null);\n  const scrollAreaRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (isYearView && currentYearRef.current && scrollAreaRef.current) {\n      const viewport = scrollAreaRef.current.querySelector(\n        \"[data-radix-scroll-area-viewport]\",\n      ) as HTMLElement;\n      if (viewport) {\n        const yearTop = currentYearRef.current.offsetTop;\n        viewport.scrollTop = yearTop;\n      }\n      setTimeout(() => {\n        currentMonthButtonRef.current?.focus();\n      }, 100);\n    }\n  }, [isYearView]);\n\n  return (\n    <div className=\"relative\">\n      <table className={className}>{children}</table>\n      {isYearView && (\n        <div className=\"absolute inset-0 z-20 -mx-2 -mb-2 bg-background\">\n          <ScrollArea className=\"h-full\" ref={scrollAreaRef}>\n            {years.map((year) => {\n              const months = eachMonthOfInterval({\n                end: endOfYear(year),\n                start: startOfYear(year),\n              });\n              const isCurrentYear = year.getFullYear() === currentYear;\n\n              return (\n                <div\n                  key={year.getFullYear()}\n                  ref={isCurrentYear ? currentYearRef : undefined}\n                >\n                  <CollapsibleYear\n                    open={isCurrentYear}\n                    title={year.getFullYear().toString()}\n                  >\n                    <div className=\"grid grid-cols-3 gap-2\">\n                      {months.map((month) => {\n                        const isDisabled =\n                          isBefore(month, startDate) || isAfter(month, endDate);\n                        const isCurrentMonth =\n                          month.getMonth() === currentMonth &&\n                          year.getFullYear() === currentYear;\n\n                        return (\n                          <Button\n                            className=\"h-7\"\n                            disabled={isDisabled}\n                            key={month.getTime()}\n                            onClick={() => onMonthSelect(month)}\n                            ref={\n                              isCurrentMonth ? currentMonthButtonRef : undefined\n                            }\n                            size=\"sm\"\n                            variant={isCurrentMonth ? \"default\" : \"outline\"}\n                          >\n                            {format(month, \"MMM\")}\n                          </Button>\n                        );\n                      })}\n                    </div>\n                  </CollapsibleYear>\n                </div>\n              );\n            })}\n          </ScrollArea>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction CaptionLabel({\n  children,\n  isYearView,\n  setIsYearView,\n}: {\n  isYearView: boolean;\n  setIsYearView: React.Dispatch<React.SetStateAction<boolean>>;\n} & React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <Button\n      className=\"-ms-2 flex items-center gap-2 font-medium text-sm hover:bg-transparent data-[state=open]:text-muted-foreground/80 [&[data-state=open]>svg]:rotate-180\"\n      data-state={isYearView ? \"open\" : \"closed\"}\n      onClick={() => setIsYearView((prev) => !prev)}\n      size=\"sm\"\n      variant=\"ghost\"\n    >\n      {children}\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className=\"shrink-0 text-muted-foreground/80 transition-transform duration-200\"\n        size={16}\n      />\n    </Button>\n  );\n}\n\nfunction CollapsibleYear({\n  title,\n  children,\n  open,\n}: {\n  title: string;\n  children: React.ReactNode;\n  open?: boolean;\n}) {\n  return (\n    <Collapsible className=\"border-t px-2 py-1.5\" defaultOpen={open}>\n      <CollapsibleTrigger asChild>\n        <Button\n          className=\"flex w-full justify-start gap-2 font-medium text-sm hover:bg-transparent [&[data-state=open]>svg]:rotate-180\"\n          size=\"sm\"\n          variant=\"ghost\"\n        >\n          <ChevronDownIcon\n            aria-hidden=\"true\"\n            className=\"shrink-0 text-muted-foreground/80 transition-transform duration-200\"\n            size={16}\n          />\n          {title}\n        </Button>\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"overflow-hidden px-3 py-1 text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-505.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<Date>(today);\n  const [time, setTime] = useState<string | null>(null);\n\n  // Mock time slots data\n  const timeSlots = [\n    { available: false, time: \"09:00\" },\n    { available: false, time: \"09:30\" },\n    { available: true, time: \"10:00\" },\n    { available: true, time: \"10:30\" },\n    { available: true, time: \"11:00\" },\n    { available: true, time: \"11:30\" },\n    { available: false, time: \"12:00\" },\n    { available: true, time: \"12:30\" },\n    { available: true, time: \"13:00\" },\n    { available: true, time: \"13:30\" },\n    { available: true, time: \"14:00\" },\n    { available: false, time: \"14:30\" },\n    { available: false, time: \"15:00\" },\n    { available: true, time: \"15:30\" },\n    { available: true, time: \"16:00\" },\n    { available: true, time: \"16:30\" },\n    { available: true, time: \"17:00\" },\n    { available: true, time: \"17:30\" },\n  ];\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <div className=\"flex max-sm:flex-col\">\n          <Calendar\n            className=\"p-2 sm:pe-5\"\n            disabled={[\n              { before: today }, // Dates before today\n            ]}\n            mode=\"single\"\n            onSelect={(newDate) => {\n              if (newDate) {\n                setDate(newDate);\n                setTime(null);\n              }\n            }}\n            selected={date}\n          />\n          <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n            <div className=\"absolute inset-0 py-4 max-sm:border-t\">\n              <ScrollArea className=\"h-full sm:border-s\">\n                <div className=\"space-y-3\">\n                  <div className=\"flex h-5 shrink-0 items-center px-5\">\n                    <p className=\"font-medium text-sm\">\n                      {format(date, \"EEEE, d\")}\n                    </p>\n                  </div>\n                  <div className=\"grid gap-1.5 px-5 max-sm:grid-cols-2\">\n                    {timeSlots.map(({ time: timeSlot, available }) => (\n                      <Button\n                        className=\"w-full\"\n                        disabled={!available}\n                        key={timeSlot}\n                        onClick={() => setTime(timeSlot)}\n                        size=\"sm\"\n                        variant={time === timeSlot ? \"default\" : \"outline\"}\n                      >\n                        {timeSlot}\n                      </Button>\n                    ))}\n                  </div>\n                </div>\n              </ScrollArea>\n            </div>\n          </div>\n        </div>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Appointment picker -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-506.tsx",
    "content": "\"use client\";\n\nimport { subDays, subMonths, subYears } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const yesterday = subDays(today, 1);\n  const lastWeek = subDays(today, 7);\n  const lastMonth = subMonths(today, 1);\n  const lastYear = subYears(today, 1);\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<Date>(today);\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <div className=\"flex max-sm:flex-col\">\n          <div className=\"relative py-4 max-sm:order-1 max-sm:border-t sm:w-32\">\n            <div className=\"h-full sm:border-e\">\n              <div className=\"flex flex-col px-2\">\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(today);\n                    setMonth(today);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Today\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(yesterday);\n                    setMonth(yesterday);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Yesterday\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastWeek);\n                    setMonth(lastWeek);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last week\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastMonth);\n                    setMonth(lastMonth);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last month\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastYear);\n                    setMonth(lastYear);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last year\n                </Button>\n              </div>\n            </div>\n          </div>\n          <Calendar\n            className=\"p-2\"\n            disabled={[\n              { after: today }, // Dates before today\n            ]}\n            mode=\"single\"\n            month={month}\n            onMonthChange={setMonth}\n            onSelect={(newDate) => {\n              if (newDate) {\n                setDate(newDate);\n              }\n            }}\n            selected={date}\n          />\n        </div>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Calendar with presets -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-507.tsx",
    "content": "\"use client\";\n\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const yesterday = {\n    from: subDays(today, 1),\n    to: subDays(today, 1),\n  };\n  const last7Days = {\n    from: subDays(today, 6),\n    to: today,\n  };\n  const last30Days = {\n    from: subDays(today, 29),\n    to: today,\n  };\n  const monthToDate = {\n    from: startOfMonth(today),\n    to: today,\n  };\n  const lastMonth = {\n    from: startOfMonth(subMonths(today, 1)),\n    to: endOfMonth(subMonths(today, 1)),\n  };\n  const yearToDate = {\n    from: startOfYear(today),\n    to: today,\n  };\n  const lastYear = {\n    from: startOfYear(subYears(today, 1)),\n    to: endOfYear(subYears(today, 1)),\n  };\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<DateRange | undefined>(last7Days);\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <div className=\"flex max-sm:flex-col\">\n          <div className=\"relative py-4 max-sm:order-1 max-sm:border-t sm:w-32\">\n            <div className=\"h-full sm:border-e\">\n              <div className=\"flex flex-col px-2\">\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate({\n                      from: today,\n                      to: today,\n                    });\n                    setMonth(today);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Today\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(yesterday);\n                    setMonth(yesterday.to);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Yesterday\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(last7Days);\n                    setMonth(last7Days.to);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last 7 days\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(last30Days);\n                    setMonth(last30Days.to);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last 30 days\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(monthToDate);\n                    setMonth(monthToDate.to);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Month to date\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastMonth);\n                    setMonth(lastMonth.to);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last month\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(yearToDate);\n                    setMonth(yearToDate.to);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Year to date\n                </Button>\n                <Button\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastYear);\n                    setMonth(lastYear.to);\n                  }}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  Last year\n                </Button>\n              </div>\n            </div>\n          </div>\n          <Calendar\n            className=\"p-2\"\n            disabled={[\n              { after: today }, // Dates before today\n            ]}\n            mode=\"range\"\n            month={month}\n            onMonthChange={setMonth}\n            onSelect={(newDate) => {\n              if (newDate) {\n                setDate(newDate);\n              }\n            }}\n            selected={date}\n          />\n        </div>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Range calendar with presets -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-508.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 25),\n  });\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        classNames={{\n          month:\n            \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n          months: \"gap-8\",\n        }}\n        mode=\"range\"\n        numberOfMonths={2}\n        onSelect={setDate}\n        pagedNavigation\n        selected={date}\n        showOutsideDays={false}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Two months calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-509.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 48),\n  });\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        classNames={{\n          month:\n            \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n          months: \"sm:flex-col md:flex-row gap-8\",\n        }}\n        mode=\"range\"\n        numberOfMonths={3}\n        onSelect={setDate}\n        pagedNavigation\n        selected={date}\n        showOutsideDays={false}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Three months calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-51.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [password, setPassword] = useState(\"\");\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n\n  const checkStrength = (pass: string) => {\n    const requirements = [\n      { regex: /.{8,}/, text: \"At least 8 characters\" },\n      { regex: /[0-9]/, text: \"At least 1 number\" },\n      { regex: /[a-z]/, text: \"At least 1 lowercase letter\" },\n      { regex: /[A-Z]/, text: \"At least 1 uppercase letter\" },\n    ];\n\n    return requirements.map((req) => ({\n      met: req.regex.test(pass),\n      text: req.text,\n    }));\n  };\n\n  const strength = checkStrength(password);\n\n  const strengthScore = useMemo(() => {\n    return strength.filter((req) => req.met).length;\n  }, [strength]);\n\n  const getStrengthColor = (score: number) => {\n    if (score === 0) return \"bg-border\";\n    if (score <= 1) return \"bg-red-500\";\n    if (score <= 2) return \"bg-orange-500\";\n    if (score === 3) return \"bg-amber-500\";\n    return \"bg-emerald-500\";\n  };\n\n  const getStrengthText = (score: number) => {\n    if (score === 0) return \"Enter a password\";\n    if (score <= 2) return \"Weak password\";\n    if (score === 3) return \"Medium password\";\n    return \"Strong password\";\n  };\n\n  return (\n    <div>\n      {/* Password input field with toggle visibility button */}\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={id}>Input with password strength indicator</Label>\n        <div className=\"relative\">\n          <Input\n            aria-describedby={`${id}-description`}\n            className=\"pe-9\"\n            id={id}\n            onChange={(e) => setPassword(e.target.value)}\n            placeholder=\"Password\"\n            type={isVisible ? \"text\" : \"password\"}\n            value={password}\n          />\n          <button\n            aria-controls=\"password\"\n            aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n            aria-pressed={isVisible}\n            className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            onClick={toggleVisibility}\n            type=\"button\"\n          >\n            {isVisible ? (\n              <EyeOffIcon aria-hidden=\"true\" size={16} />\n            ) : (\n              <EyeIcon aria-hidden=\"true\" size={16} />\n            )}\n          </button>\n        </div>\n      </div>\n\n      {/* Password strength indicator */}\n      <div\n        aria-label=\"Password strength\"\n        aria-valuemax={4}\n        aria-valuemin={0}\n        aria-valuenow={strengthScore}\n        className=\"mt-3 mb-4 h-1 w-full overflow-hidden rounded-full bg-border\"\n        role=\"progressbar\"\n        tabIndex={-1}\n      >\n        <div\n          className={`h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`}\n          style={{ width: `${(strengthScore / 4) * 100}%` }}\n        />\n      </div>\n\n      {/* Password strength description */}\n      <p\n        className=\"mb-2 font-medium text-foreground text-sm\"\n        id={`${id}-description`}\n      >\n        {getStrengthText(strengthScore)}. Must contain:\n      </p>\n\n      {/* Password requirements list */}\n      <ul aria-label=\"Password requirements\" className=\"space-y-1.5\">\n        {strength.map((req, _index) => (\n          <li className=\"flex items-center gap-2\" key={req.text}>\n            {req.met ? (\n              <CheckIcon\n                aria-hidden=\"true\"\n                className=\"text-emerald-500\"\n                size={16}\n              />\n            ) : (\n              <XIcon\n                aria-hidden=\"true\"\n                className=\"text-muted-foreground/80\"\n                size={16}\n              />\n            )}\n            <span\n              className={`text-xs ${req.met ? \"text-emerald-600\" : \"text-muted-foreground\"}`}\n            >\n              {req.text}\n              <span className=\"sr-only\">\n                {req.met ? \" - Requirement met\" : \" - Requirement not met\"}\n              </span>\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-510.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Component() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  // Mock price data\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n      const todayDate = new Date();\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(todayDate);\n        date.setDate(todayDate.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, []);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        classNames={{\n          day_button: \"size-12\",\n          month:\n            \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n          months: \"sm:flex-col md:flex-row gap-8\",\n          today: \"*:after:hidden\",\n          weekday: \"w-12\",\n        }}\n        components={{\n          DayButton: (props: DayButtonProps) => (\n            <DayButton {...props} prices={mockPriceData} />\n          ),\n        }}\n        disabled={isDateDisabled}\n        mode=\"single\"\n        numberOfMonths={2}\n        onSelect={setDate}\n        pagedNavigation\n        selected={date}\n        showOutsideDays={false}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-4 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Pricing calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-medium text-[10px]\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"text-muted-foreground group-data-selected:text-primary-foreground/70\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-511.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Component() {\n  const id = useId();\n  const [date, setDate] = useState<Date | undefined>();\n\n  return (\n    <div>\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={id}>Date picker</Label>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              className=\"group w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\"\n              id={id}\n              variant={\"outline\"}\n            >\n              <span\n                className={cn(\"truncate\", !date && \"text-muted-foreground\")}\n              >\n                {date ? format(date, \"PPP\") : \"Pick a date\"}\n              </span>\n              <CalendarIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 text-muted-foreground/80 transition-colors group-hover:text-foreground\"\n                size={16}\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"start\" className=\"w-auto p-2\">\n            <Calendar mode=\"single\" onSelect={setDate} selected={date} />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-512.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Component() {\n  const id = useId();\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <div>\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={id}>Date range picker</Label>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              className=\"group w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\"\n              id={id}\n              variant=\"outline\"\n            >\n              <span\n                className={cn(\"truncate\", !date && \"text-muted-foreground\")}\n              >\n                {date?.from ? (\n                  date.to ? (\n                    <>\n                      {format(date.from, \"LLL dd, y\")} -{\" \"}\n                      {format(date.to, \"LLL dd, y\")}\n                    </>\n                  ) : (\n                    format(date.from, \"LLL dd, y\")\n                  )\n                ) : (\n                  \"Pick a date range\"\n                )}\n              </span>\n              <CalendarIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 text-muted-foreground/80 transition-colors group-hover:text-foreground\"\n                size={16}\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"start\" className=\"w-auto p-2\">\n            <Calendar mode=\"range\" onSelect={setDate} selected={date} />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-513.tsx",
    "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map((step) => (\n          <StepperItem className=\"not-last:flex-1\" key={step} step={step}>\n            <StepperTrigger>\n              <StepperIndicator asChild>{step}</StepperIndicator>\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with numbers only\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-514.tsx",
    "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map((step) => (\n          <StepperItem className=\"not-last:flex-1\" key={step} step={step}>\n            <StepperTrigger>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with numbers and checkmarks\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-515.tsx",
    "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map((step) => (\n          <StepperItem className=\"not-last:flex-1\" key={step} step={step}>\n            <StepperTrigger>\n              <StepperIndicator className=\"size-4 data-[state=active]:border-2 data-[state=active]:border-primary data-[state=active]:bg-transparent [&_span]:sr-only [&_svg]:size-3\" />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with tiny buttons and checkmarks\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-516.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(2);\n\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper onValueChange={setCurrentStep} value={currentStep}>\n        {steps.map((step) => (\n          <StepperItem className=\"not-last:flex-1\" key={step} step={step}>\n            <StepperTrigger asChild>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <div className=\"flex justify-center space-x-4\">\n        <Button\n          className=\"w-32\"\n          disabled={currentStep === 1}\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          variant=\"outline\"\n        >\n          Prev step\n        </Button>\n        <Button\n          className=\"w-32\"\n          disabled={currentStep > steps.length}\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          variant=\"outline\"\n        >\n          Next step\n        </Button>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Controlled stepper with checkmarks\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-517.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(2);\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleNextStep = () => {\n    setIsLoading(true);\n    setTimeout(() => {\n      setCurrentStep((prev) => prev + 1);\n      setIsLoading(false);\n    }, 1000);\n  };\n\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper onValueChange={setCurrentStep} value={currentStep}>\n        {steps.map((step) => (\n          <StepperItem\n            className=\"not-last:flex-1\"\n            key={step}\n            loading={isLoading}\n            step={step}\n          >\n            <StepperTrigger asChild>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <div className=\"flex justify-center space-x-4\">\n        <Button\n          className=\"w-32\"\n          disabled={currentStep === 1}\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          variant=\"outline\"\n        >\n          Prev step\n        </Button>\n        <Button\n          className=\"w-32\"\n          disabled={currentStep > steps.length}\n          onClick={handleNextStep}\n          variant=\"outline\"\n        >\n          Next step\n        </Button>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Controlled stepper with checkmarks and loading state\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-518.tsx",
    "content": "import { Shuffle } from \"lucide-react\";\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        <StepperItem className=\"not-last:flex-1\" step={1}>\n          <StepperTrigger>\n            <StepperIndicator asChild>\n              <img\n                alt=\"Mike Palmer\"\n                className=\"rounded-full\"\n                height={32}\n                src=\"/origin/avatar-40-05.jpg\"\n                width={32}\n              />\n            </StepperIndicator>\n          </StepperTrigger>\n          <StepperSeparator />\n        </StepperItem>\n        <StepperItem className=\"not-last:flex-1\" loading step={2}>\n          <StepperTrigger>\n            <StepperIndicator />\n          </StepperTrigger>\n          <StepperSeparator />\n        </StepperItem>\n        <StepperItem className=\"not-last:flex-1\" step={3}>\n          <StepperTrigger>\n            <StepperIndicator asChild>\n              <Shuffle aria-hidden=\"true\" size={14} />\n              <span className=\"sr-only\">Shuffle</span>\n            </StepperIndicator>\n          </StepperTrigger>\n        </StepperItem>\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with mixed elements\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-519.tsx",
    "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n  },\n  {\n    step: 4,\n    title: \"Step Four\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper className=\"items-start gap-4\" defaultValue={2}>\n        {steps.map(({ step, title }) => (\n          <StepperItem className=\"flex-1\" key={step} step={step}>\n            <StepperTrigger className=\"w-full flex-col items-start gap-2 rounded\">\n              <StepperIndicator asChild className=\"h-1 w-full bg-border\">\n                <span className=\"sr-only\">{step}</span>\n              </StepperIndicator>\n              <div className=\"space-y-0.5\">\n                <StepperTitle>{title}</StepperTitle>\n              </div>\n            </StepperTrigger>\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with labels\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-52.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Read-only input</Label>\n      <Input\n        className=\"read-only:bg-muted\"\n        defaultValue=\"This is a read-only input\"\n        id={id}\n        placeholder=\"Email\"\n        readOnly\n        type=\"email\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-520.tsx",
    "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(2);\n\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <div className=\"flex items-center gap-2\">\n        <Button\n          aria-label=\"Prev step\"\n          className=\"shrink-0\"\n          disabled={currentStep === 1}\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n        </Button>\n        <Stepper\n          className=\"gap-1\"\n          onValueChange={setCurrentStep}\n          value={currentStep}\n        >\n          {steps.map((step) => (\n            <StepperItem className=\"flex-1\" key={step} step={step}>\n              <StepperTrigger\n                asChild\n                className=\"w-full flex-col items-start gap-2\"\n              >\n                <StepperIndicator asChild className=\"h-1 w-full bg-border\">\n                  <span className=\"sr-only\">{step}</span>\n                </StepperIndicator>\n              </StepperTrigger>\n            </StepperItem>\n          ))}\n        </Stepper>\n        <Button\n          aria-label=\"Next step\"\n          className=\"shrink-0\"\n          disabled={currentStep === steps.length}\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          <ChevronRightIcon aria-hidden=\"true\" size={16} />\n        </Button>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Paginated stepper\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-521.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(1);\n\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <div className=\"space-y-3\">\n        <Stepper onValueChange={setCurrentStep} value={currentStep}>\n          {steps.map((step) => (\n            <StepperItem className=\"flex-1\" key={step} step={step}>\n              <StepperTrigger\n                asChild\n                className=\"w-full flex-col items-start gap-2\"\n              >\n                <StepperIndicator\n                  asChild\n                  className=\"h-2 w-full rounded-none bg-border\"\n                >\n                  <span className=\"sr-only\">{step}</span>\n                </StepperIndicator>\n              </StepperTrigger>\n            </StepperItem>\n          ))}\n        </Stepper>\n        <div className=\"font-medium text-muted-foreground text-sm tabular-nums\">\n          Step {currentStep} of {steps.length}\n        </div>\n      </div>\n      <div className=\"flex justify-center space-x-4\">\n        <Button\n          className=\"w-32\"\n          disabled={currentStep === 1}\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          variant=\"outline\"\n        >\n          Prev step\n        </Button>\n        <Button\n          className=\"w-32\"\n          disabled={currentStep >= steps.length}\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          variant=\"outline\"\n        >\n          Next step\n        </Button>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Progress stepper\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-522.tsx",
    "content": "import {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [\n  {\n    description: \"Desc for step one\",\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    description: \"Desc for step two\",\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    description: \"Desc for step three\",\n    step: 3,\n    title: \"Step Three\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map(({ step, title, description }) => (\n          <StepperItem\n            className=\"relative flex-1 flex-col!\"\n            key={step}\n            step={step}\n          >\n            <StepperTrigger className=\"flex-col gap-3 rounded\">\n              <StepperIndicator />\n              <div className=\"space-y-0.5 px-2\">\n                <StepperTitle>{title}</StepperTitle>\n                <StepperDescription className=\"max-sm:hidden\">\n                  {description}\n                </StepperDescription>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"absolute inset-x-0 top-3 left-[calc(50%+0.75rem+0.125rem)] -order-1 m-0 -translate-y-1/2 group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with titles and descriptions\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-523.tsx",
    "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map(({ step, title }) => (\n          <StepperItem\n            className=\"not-last:flex-1 max-md:items-start\"\n            key={step}\n            step={step}\n          >\n            <StepperTrigger className=\"rounded max-md:flex-col\">\n              <StepperIndicator />\n              <div className=\"text-center md:text-left\">\n                <StepperTitle>{title}</StepperTitle>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"max-md:mt-3.5 md:mx-4\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with inline titles\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-524.tsx",
    "content": "import {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [\n  {\n    description: \"Desc for step one\",\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    description: \"Desc for step two\",\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    description: \"Desc for step three\",\n    step: 3,\n    title: \"Step Three\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map(({ step, title, description }) => (\n          <StepperItem\n            className=\"not-last:flex-1 max-md:items-start\"\n            key={step}\n            step={step}\n          >\n            <StepperTrigger className=\"rounded max-md:flex-col\">\n              <StepperIndicator />\n              <div className=\"text-center md:text-left\">\n                <StepperTitle>{title}</StepperTitle>\n                <StepperDescription className=\"max-sm:hidden\">\n                  {description}\n                </StepperDescription>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"max-md:mt-3.5 md:mx-4\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with inline titles and descriptions\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-525.tsx",
    "content": "import {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [\n  {\n    description: \"Desc for step one\",\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    description: \"Desc for step two\",\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    description: \"Desc for step three\",\n    step: 3,\n    title: \"Step Three\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map(({ step, title, description }) => (\n          <StepperItem\n            className=\"not-last:flex-1 max-md:items-start\"\n            key={step}\n            step={step}\n          >\n            <StepperTrigger className=\"gap-4 rounded max-md:flex-col\">\n              <StepperIndicator />\n              <div className=\"text-center md:-order-1 md:text-left\">\n                <StepperTitle>{title}</StepperTitle>\n                <StepperDescription className=\"max-sm:hidden\">\n                  {description}\n                </StepperDescription>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"max-md:mt-3.5 md:mx-4\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Stepper with inline titles and descriptions\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-526.tsx",
    "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2} orientation=\"vertical\">\n        {steps.map((step) => (\n          <StepperItem className=\"not-last:flex-1\" key={step} step={step}>\n            <StepperTrigger>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Vertical stepper with numbers and checkmarks\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-527.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(1);\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper\n        onValueChange={setCurrentStep}\n        orientation=\"vertical\"\n        value={currentStep}\n      >\n        {steps.map((step) => (\n          <StepperItem className=\"not-last:flex-1\" key={step} step={step}>\n            <StepperTrigger asChild>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <div className=\"flex justify-center space-x-4\">\n        <Button\n          className=\"w-32\"\n          disabled={currentStep === 1}\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          variant=\"outline\"\n        >\n          Prev step\n        </Button>\n        <Button\n          className=\"w-32\"\n          disabled={currentStep > steps.length}\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          variant=\"outline\"\n        >\n          Next step\n        </Button>\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Controlled vertical stepper with checkmarks\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-528.tsx",
    "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n  },\n  {\n    step: 4,\n    title: \"Step Four\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2} orientation=\"vertical\">\n        {steps.map(({ step, title }) => (\n          <StepperItem\n            className=\"relative not-last:flex-1 items-start\"\n            key={step}\n            step={step}\n          >\n            <StepperTrigger className=\"items-start rounded pb-12 last:pb-0\">\n              <StepperIndicator />\n              <div className=\"mt-0.5 px-2 text-left\">\n                <StepperTitle>{title}</StepperTitle>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 -order-1 m-0 -translate-x-1/2 group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Vertical stepper with inline titles\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-529.tsx",
    "content": "import {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/default/ui/stepper\";\n\nconst steps = [\n  {\n    description: \"Desc for step one\",\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    description: \"Desc for step two\",\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    description: \"Desc for step three\",\n    step: 3,\n    title: \"Step Three\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-8 text-center\">\n      <Stepper defaultValue={2} orientation=\"vertical\">\n        {steps.map(({ step, title, description }) => (\n          <StepperItem\n            className=\"relative not-last:flex-1 items-start\"\n            key={step}\n            step={step}\n          >\n            <StepperTrigger className=\"items-start rounded pb-12 last:pb-0\">\n              <StepperIndicator />\n              <div className=\"mt-0.5 space-y-0.5 px-2 text-left\">\n                <StepperTitle>{title}</StepperTitle>\n                <StepperDescription>{description}</StepperDescription>\n              </div>\n            </StepperTrigger>\n            {step < steps.length && (\n              <StepperSeparator className=\"absolute inset-y-0 top-[calc(1.5rem+0.125rem)] left-3 -order-1 m-0 -translate-x-1/2 group-data-[orientation=vertical]/stepper:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:w-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=horizontal]/stepper:flex-none\" />\n            )}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Vertical stepper with inline titles and descriptions\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-53.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useId, useRef, useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  const id = useId();\n  const [copied, setCopied] = useState<boolean>(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleCopy = () => {\n    if (inputRef.current) {\n      navigator.clipboard.writeText(inputRef.current.value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    }\n  };\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Copy to clipboard</Label>\n      <div className=\"relative\">\n        <Input\n          className=\"pe-9\"\n          defaultValue=\"pnpm install origin-ui\"\n          id={id}\n          readOnly\n          ref={inputRef}\n          type=\"text\"\n        />\n        <TooltipProvider delayDuration={0}>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <button\n                aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n                disabled={copied}\n                onClick={handleCopy}\n                type=\"button\"\n              >\n                <div\n                  className={cn(\n                    \"transition-all\",\n                    copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\",\n                  )}\n                >\n                  <CheckIcon\n                    aria-hidden=\"true\"\n                    className=\"stroke-emerald-500\"\n                    size={16}\n                  />\n                </div>\n                <div\n                  className={cn(\n                    \"absolute transition-all\",\n                    copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\",\n                  )}\n                >\n                  <CopyIcon aria-hidden=\"true\" size={16} />\n                </div>\n              </button>\n            </TooltipTrigger>\n            <TooltipContent className=\"px-2 py-1 text-xs\">\n              Copy to clipboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-530.tsx",
    "content": "import {\n  Timeline,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"Mar 15, 2024\",\n    description:\n      \"Initial team meeting and project scope definition. Established key milestones and resource allocation.\",\n    id: 1,\n    title: \"Project Kickoff\",\n  },\n  {\n    date: \"Mar 22, 2024\",\n    description:\n      \"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\",\n    id: 2,\n    title: \"Design Phase\",\n  },\n  {\n    date: \"Apr 5, 2024\",\n    description:\n      \"Backend API implementation and frontend component development in progress.\",\n    id: 3,\n    title: \"Development Sprint\",\n  },\n  {\n    date: \"Apr 19, 2024\",\n    description:\n      \"Quality assurance testing, performance optimization, and production deployment preparation.\",\n    id: 4,\n    title: \"Testing & Deployment\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineTitle className=\"-mt-0.5\">{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-531.tsx",
    "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"Mar 15, 2024\",\n    description:\n      \"Initial team meeting and project scope definition. Established key milestones and resource allocation.\",\n    id: 1,\n    title: \"Project Kickoff\",\n  },\n  {\n    date: \"Mar 22, 2024\",\n    description:\n      \"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\",\n    id: 2,\n    title: \"Design Phase\",\n  },\n  {\n    date: \"Apr 5, 2024\",\n    description:\n      \"Backend API implementation and frontend component development in progress.\",\n    id: 3,\n    title: \"Development Sprint\",\n  },\n  {\n    date: \"Apr 19, 2024\",\n    description:\n      \"Quality assurance testing, performance optimization, and production deployment preparation.\",\n    id: 4,\n    title: \"Testing & Deployment\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem\n          className=\"sm:group-data-[orientation=vertical]/timeline:ms-32\"\n          key={item.id}\n          step={item.id}\n        >\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate className=\"sm:group-data-[orientation=vertical]/timeline:absolute sm:group-data-[orientation=vertical]/timeline:-left-32 sm:group-data-[orientation=vertical]/timeline:w-20 sm:group-data-[orientation=vertical]/timeline:text-right\">\n              {item.date}\n            </TimelineDate>\n            <TimelineTitle className=\"sm:-mt-0.5\">{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-532.tsx",
    "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"Mar 15, 2024\",\n    description:\n      \"Initial team meeting and project scope definition. Established key milestones and resource allocation.\",\n    id: 1,\n    title: \"Project Kickoff\",\n  },\n  {\n    date: \"Mar 22, 2024\",\n    description:\n      \"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\",\n    id: 2,\n    title: \"Design Phase\",\n  },\n  {\n    date: \"Apr 5, 2024\",\n    description:\n      \"Backend API implementation and frontend component development in progress.\",\n    id: 3,\n    title: \"Development Sprint\",\n  },\n  {\n    date: \"Apr 19, 2024\",\n    description:\n      \"Quality assurance testing, performance optimization, and production deployment preparation.\",\n    id: 4,\n    title: \"Testing & Deployment\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-533.tsx",
    "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"15 minutes ago\",\n    description:\n      \"Submitted PR #342 with new feature implementation. Waiting for code review from team leads.\",\n    id: 1,\n    title: \"Pull Request Submitted\",\n  },\n  {\n    date: \"10 minutes ago\",\n    description:\n      \"Automated tests and build process initiated. Running unit tests and code quality checks.\",\n    id: 2,\n    title: \"CI Pipeline Started\",\n  },\n  {\n    date: \"5 minutes ago\",\n    description:\n      \"Received comments on PR. Minor adjustments needed in error handling and documentation.\",\n    id: 3,\n    title: \"Code Review Feedback\",\n  },\n  {\n    description:\n      \"Implemented requested changes and pushed updates to feature branch. Awaiting final approval.\",\n    id: 4,\n    title: \"Changes Pushed\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineTitle className=\"-mt-0.5\">{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>\n            {item.description}\n            <TimelineDate className=\"mt-2 mb-0\">{item.date}</TimelineDate>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-534.tsx",
    "content": "import { CheckIcon } from \"lucide-react\";\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"Mar 15, 2024\",\n    description:\n      \"Initial team meeting and project scope definition. Established key milestones and resource allocation.\",\n    id: 1,\n    title: \"Project Kickoff\",\n  },\n  {\n    date: \"Mar 22, 2024\",\n    description:\n      \"Completed wireframes and user interface mockups. Stakeholder review and feedback incorporated.\",\n    id: 2,\n    title: \"Design Phase\",\n  },\n  {\n    date: \"Apr 5, 2024\",\n    description:\n      \"Backend API implementation and frontend component development in progress.\",\n    id: 3,\n    title: \"Development Sprint\",\n  },\n  {\n    date: \"Apr 19, 2024\",\n    description:\n      \"Quality assurance testing, performance optimization, and production deployment preparation.\",\n    id: 4,\n    title: \"Testing & Deployment\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem\n          className=\"group-data-[orientation=vertical]/timeline:ms-10\"\n          key={item.id}\n          step={item.id}\n        >\n          <TimelineHeader>\n            <TimelineSeparator className=\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\" />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator className=\"flex size-6 items-center justify-center group-data-[orientation=vertical]/timeline:-left-7 group-data-completed/timeline-item:border-none group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground\">\n              <CheckIcon\n                className=\"group-not-data-completed/timeline-item:hidden\"\n                size={16}\n              />\n            </TimelineIndicator>\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-535.tsx",
    "content": "import { GitCompare, GitFork, GitMerge, GitPullRequest } from \"lucide-react\";\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"15 minutes ago\",\n    description:\n      \"Forked the repository to create a new branch for development.\",\n    icon: GitFork,\n    id: 1,\n    title: \"Forked Repository\",\n  },\n  {\n    date: \"10 minutes ago\",\n    description:\n      \"Submitted PR #342 with new feature implementation. Waiting for code review from team leads.\",\n    icon: GitPullRequest,\n    id: 2,\n    title: \"Pull Request Submitted\",\n  },\n  {\n    date: \"5 minutes ago\",\n    description:\n      \"Received comments on PR. Minor adjustments needed in error handling and documentation.\",\n    icon: GitCompare,\n    id: 3,\n    title: \"Comparing Branches\",\n  },\n  {\n    description:\n      \"Merged the feature branch into the main branch. Ready for deployment.\",\n    icon: GitMerge,\n    id: 4,\n    title: \"Merged Branch\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem\n          className=\"group-data-[orientation=vertical]/timeline:ms-10\"\n          key={item.id}\n          step={item.id}\n        >\n          <TimelineHeader>\n            <TimelineSeparator className=\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\" />\n            <TimelineTitle className=\"mt-0.5\">{item.title}</TimelineTitle>\n            <TimelineIndicator className=\"flex size-6 items-center justify-center border-none bg-primary/10 group-data-[orientation=vertical]/timeline:-left-7 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground\">\n              <item.icon size={14} />\n            </TimelineIndicator>\n          </TimelineHeader>\n          <TimelineContent>\n            {item.description}\n            <TimelineDate className=\"mt-2 mb-0\">{item.date}</TimelineDate>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-536.tsx",
    "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    action: \"opened a new issue\",\n    date: \"15 minutes ago\",\n    description:\n      \"I'm having trouble with the new component library. It's not rendering properly.\",\n    id: 1,\n    image: \"/origin/avatar-40-01.jpg\",\n    title: \"Hannah Kandell\",\n  },\n  {\n    action: \"commented on\",\n    date: \"10 minutes ago\",\n    description:\n      \"Hey Hannah, I'm having trouble with the new component library. It's not rendering properly.\",\n    id: 2,\n    image: \"/origin/avatar-40-02.jpg\",\n    title: \"Chris Tompson\",\n  },\n  {\n    action: \"assigned you to\",\n    date: \"5 minutes ago\",\n    description:\n      \"The new component library is not rendering properly. Can you take a look?\",\n    id: 3,\n    image: \"/origin/avatar-40-03.jpg\",\n    title: \"Emma Davis\",\n  },\n  {\n    action: \"closed the issue\",\n    date: \"2 minutes ago\",\n    description: \"The issue has been fixed. Please review the changes.\",\n    id: 4,\n    image: \"/origin/avatar-40-05.jpg\",\n    title: \"Alex Morgan\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline>\n      {items.map((item) => (\n        <TimelineItem\n          className=\"group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8\"\n          key={item.id}\n          step={item.id}\n        >\n          <TimelineHeader>\n            <TimelineSeparator className=\"group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5\" />\n            <TimelineTitle className=\"mt-0.5\">\n              {item.title}{\" \"}\n              <span className=\"font-normal text-muted-foreground text-sm\">\n                {item.action}\n              </span>\n            </TimelineTitle>\n            <TimelineIndicator className=\"flex size-6 items-center justify-center border-none bg-primary/10 group-data-[orientation=vertical]/timeline:-left-7 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground\">\n              <img\n                alt={item.title}\n                className=\"size-6 rounded-full\"\n                src={item.image}\n              />\n            </TimelineIndicator>\n          </TimelineHeader>\n          <TimelineContent className=\"mt-2 rounded-lg border px-4 py-3 text-foreground\">\n            {item.description}\n            <TimelineDate className=\"mt-1 mb-0\">{item.date}</TimelineDate>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-537.tsx",
    "content": "import {\n  Timeline,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"Mar 15, 2024\",\n    id: 1,\n    title: \"Project Kickoff\",\n  },\n  {\n    date: \"Mar 22, 2024\",\n    id: 2,\n    title: \"Design Phase\",\n  },\n  {\n    date: \"Apr 5, 2024\",\n    id: 3,\n    title: \"Development Sprint\",\n  },\n  {\n    date: \"Apr 19, 2024\",\n    id: 4,\n    title: \"Testing & Deployment\",\n  },\n  {\n    date: \"May 3, 2024\",\n    id: 5,\n    title: \"User Training\",\n  },\n  {\n    date: \"May 17, 2024\",\n    id: 6,\n    title: \"Project Handover\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3}>\n      {items.map((item) => (\n        <TimelineItem\n          className=\"w-[calc(50%-1.5rem)] odd:ms-auto even:text-right even:group-data-[orientation=vertical]/timeline:ms-0 even:group-data-[orientation=vertical]/timeline:me-8 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:-right-6 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:left-auto even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-indicator]]:translate-x-1/2 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:-right-6 even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:left-auto even:group-data-[orientation=vertical]/timeline:[&_[data-slot=timeline-separator]]:translate-x-1/2\"\n          key={item.id}\n          step={item.id}\n        >\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-538.tsx",
    "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineItem,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: new Date(\"2024-01-09T10:55:00\"),\n    description: \"System backup completed successfully.\",\n    id: 1,\n  },\n  {\n    date: new Date(\"2024-01-09T10:50:00\"),\n    description:\n      \"User authentication service restarted due to configuration update.\",\n    id: 2,\n  },\n  {\n    date: new Date(\"2024-01-09T10:45:00\"),\n    description: \"Warning: High CPU usage detected on worker node-03.\",\n    id: 3,\n  },\n  {\n    date: new Date(\"2024-01-09T10:40:00\"),\n    description: \"New deployment initiated for api-service v2.1.0.\",\n    id: 4,\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline className=\"divide-y rounded-lg border\">\n      {items.map((item) => (\n        <TimelineItem className=\"m-0! px-4! py-3!\" key={item.id} step={item.id}>\n          <TimelineContent className=\"text-foreground\">\n            {item.description}\n            <TimelineDate className=\"mt-1\">\n              {item.date.toLocaleDateString(\"en-US\", {\n                day: \"numeric\",\n                month: \"long\",\n                year: \"numeric\",\n              })}{\" \"}\n              at{\" \"}\n              {item.date.toLocaleTimeString(\"en-US\", {\n                hour: \"numeric\",\n                hour12: true,\n                minute: \"2-digit\",\n              })}\n            </TimelineDate>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-539.tsx",
    "content": "import {\n  BookOpenIcon,\n  type LucideIcon,\n  MessageCircleIcon,\n  PencilIcon,\n  PlusIcon,\n} from \"lucide-react\";\nimport {\n  Timeline,\n  TimelineContent,\n  TimelineItem,\n} from \"@/registry/default/ui/timeline\";\n\nconst items: {\n  id: number;\n  user: string;\n  image: string;\n  action: ActionType;\n  date: Date;\n}[] = [\n  {\n    action: \"post\",\n    date: new Date(Date.now() - 59000), // 59 seconds ago\n    id: 1,\n    image: \"/origin/avatar-40-02.jpg\",\n    user: \"Matt\",\n  },\n  {\n    action: \"reply\",\n    date: new Date(Date.now() - 180000), // 3 minutes ago\n    id: 2,\n    image: \"/origin/avatar-40-02.jpg\",\n    user: \"Matt\",\n  },\n  {\n    action: \"edit\",\n    date: new Date(Date.now() - 300000), // 5 minutes ago\n    id: 3,\n    image: \"/origin/avatar-40-02.jpg\",\n    user: \"Matt\",\n  },\n  {\n    action: \"create\",\n    date: new Date(Date.now() - 600000), // 10 minutes ago\n    id: 4,\n    image: \"/origin/avatar-40-02.jpg\",\n    user: \"Matt\",\n  },\n];\n\ntype ActionType = \"post\" | \"reply\" | \"edit\" | \"create\";\n\nfunction getActionIcon(action: ActionType): LucideIcon {\n  const icons: Record<ActionType, LucideIcon> = {\n    create: PlusIcon,\n    edit: PencilIcon,\n    post: BookOpenIcon,\n    reply: MessageCircleIcon,\n  };\n  return icons[action];\n}\n\nfunction getActionText(action: ActionType): string {\n  const texts: Record<ActionType, string> = {\n    create: \"created a new project\",\n    edit: \"edited a post\",\n    post: \"wrote a new post\",\n    reply: \"replied to a comment\",\n  };\n  return texts[action];\n}\n\nfunction getRelativeTimeString(date: Date): string {\n  const now = new Date();\n  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);\n\n  if (diffInSeconds < 60) {\n    return `${diffInSeconds} seconds ago`;\n  }\n  if (diffInSeconds < 3600) {\n    const minutes = Math.floor(diffInSeconds / 60);\n    return `${minutes} ${minutes === 1 ? \"minute\" : \"minutes\"} ago`;\n  }\n  if (diffInSeconds < 86400) {\n    const hours = Math.floor(diffInSeconds / 3600);\n    return `${hours} ${hours === 1 ? \"hour\" : \"hours\"} ago`;\n  }\n  const days = Math.floor(diffInSeconds / 86400);\n  return `${days} ${days === 1 ? \"day\" : \"days\"} ago`;\n}\n\nexport default function Component() {\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"font-medium text-muted-foreground text-xs\">Activity</div>\n      <Timeline>\n        {items.map((item) => {\n          const ActionIcon = getActionIcon(item.action);\n          return (\n            <TimelineItem\n              className=\"m-0! flex-row items-center gap-3 py-2.5!\"\n              key={item.id}\n              step={item.id}\n            >\n              <ActionIcon className=\"text-muted-foreground/80\" size={16} />\n              <img\n                alt={item.user}\n                className=\"size-6 rounded-full\"\n                src={item.image}\n              />\n              <TimelineContent className=\"text-foreground\">\n                <a className=\"font-medium hover:underline\" href=\"#\">\n                  {item.user}\n                </a>\n                <span className=\"font-normal\">\n                  {\" \"}\n                  {getActionText(item.action)}{\" \"}\n                  <a className=\"hover:underline\" href=\"#\">\n                    {getRelativeTimeString(item.date)}\n                  </a>\n                </span>\n              </TimelineContent>\n            </TimelineItem>\n          );\n        })}\n      </Timeline>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-54.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { withMask } from \"use-mask-input\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with mask</Label>\n      <Input\n        id={id}\n        placeholder=\"AB12 CDE\"\n        ref={(input) => {\n          if (input) {\n            withMask(\"AA99 AAA\", {\n              placeholder: \"\",\n              showMaskOnHover: false,\n            })(input);\n          }\n        }}\n        type=\"text\"\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/eduardoborges/use-mask-input\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          use-mask-input\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-540.tsx",
    "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"Mar 15, 2024\",\n    description: \"Initial team meeting.\",\n    id: 1,\n    title: \"Project Kickoff\",\n  },\n  {\n    date: \"Mar 22, 2024\",\n    description: \"Completed wireframes.\",\n    id: 2,\n    title: \"Design Phase\",\n  },\n  {\n    date: \"Apr 5, 2024\",\n    description: \"Backend development.\",\n    id: 3,\n    title: \"Development Sprint\",\n  },\n  {\n    date: \"Apr 19, 2024\",\n    description: \"Performance optimization.\",\n    id: 4,\n    title: \"Testing & Deployment\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3} orientation=\"horizontal\">\n      {items.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-541.tsx",
    "content": "import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/registry/default/ui/timeline\";\n\nconst items = [\n  {\n    date: \"Mar 15, 2024\",\n    description: \"Initial team meeting.\",\n    id: 1,\n    title: \"Project Kickoff\",\n  },\n  {\n    date: \"Mar 22, 2024\",\n    description: \"Completed wireframes.\",\n    id: 2,\n    title: \"Design Phase\",\n  },\n  {\n    date: \"Apr 5, 2024\",\n    description: \"Backend development.\",\n    id: 3,\n    title: \"Development Sprint\",\n  },\n  {\n    date: \"Apr 19, 2024\",\n    description: \"Performance optimization.\",\n    id: 4,\n    title: \"Testing & Deployment\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <Timeline defaultValue={3} orientation=\"horizontal\">\n      {items.map((item) => (\n        <TimelineItem\n          className=\"group-data-[orientation=horizontal]/timeline:mt-0\"\n          key={item.id}\n          step={item.id}\n        >\n          <TimelineHeader>\n            <TimelineSeparator className=\"group-data-[orientation=horizontal]/timeline:top-8\" />\n            <TimelineDate className=\"mb-10\">{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator className=\"group-data-[orientation=horizontal]/timeline:top-8\" />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-542.tsx",
    "content": "\"use client\";\n\nimport { addDays, setHours, setMinutes, subDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport {\n  type CalendarEvent,\n  EventCalendar,\n} from \"@/registry/default/components/event-calendar\";\n\n// Sample events data with hardcoded times\nconst sampleEvents: CalendarEvent[] = [\n  {\n    allDay: true,\n    color: \"sky\",\n    description: \"Strategic planning for next year\",\n    end: subDays(new Date(), 23), // 23 days before today\n    id: \"1\",\n    location: \"Main Conference Hall\",\n    start: subDays(new Date(), 24), // 24 days before today\n    title: \"Annual Planning\",\n  },\n  {\n    color: \"amber\",\n    description: \"Submit final deliverables\",\n    end: setMinutes(setHours(subDays(new Date(), 9), 15), 30), // 3:30 PM, 9 days before\n    id: \"2\",\n    location: \"Office\",\n    start: setMinutes(setHours(subDays(new Date(), 9), 13), 0), // 1:00 PM, 9 days before\n    title: \"Project Deadline\",\n  },\n  {\n    allDay: true,\n    color: \"orange\",\n    description: \"Strategic planning for next year\",\n    end: subDays(new Date(), 13), // 13 days before today\n    id: \"3\",\n    location: \"Main Conference Hall\",\n    start: subDays(new Date(), 13), // 13 days before today\n    title: \"Quarterly Budget Review\",\n  },\n  {\n    color: \"sky\",\n    description: \"Weekly team sync\",\n    end: setMinutes(setHours(new Date(), 11), 0), // 11:00 AM today\n    id: \"4\",\n    location: \"Conference Room A\",\n    start: setMinutes(setHours(new Date(), 10), 0), // 10:00 AM today\n    title: \"Team Meeting\",\n  },\n  {\n    color: \"emerald\",\n    description: \"Discuss new project requirements\",\n    end: setMinutes(setHours(addDays(new Date(), 1), 13), 15), // 1:15 PM, 1 day from now\n    id: \"5\",\n    location: \"Downtown Cafe\",\n    start: setMinutes(setHours(addDays(new Date(), 1), 12), 0), // 12:00 PM, 1 day from now\n    title: \"Lunch with Client\",\n  },\n  {\n    allDay: true,\n    color: \"violet\",\n    description: \"New product release\",\n    end: addDays(new Date(), 6), // 6 days from now\n    id: \"6\",\n    start: addDays(new Date(), 3), // 3 days from now\n    title: \"Product Launch\",\n  },\n  {\n    color: \"rose\",\n    description: \"Discuss about new clients\",\n    end: setMinutes(setHours(addDays(new Date(), 5), 14), 45), // 2:45 PM, 5 days from now\n    id: \"7\",\n    location: \"Downtown Cafe\",\n    start: setMinutes(setHours(addDays(new Date(), 4), 14), 30), // 2:30 PM, 4 days from now\n    title: \"Sales Conference\",\n  },\n  {\n    color: \"orange\",\n    description: \"Weekly team sync\",\n    end: setMinutes(setHours(addDays(new Date(), 5), 10), 30), // 10:30 AM, 5 days from now\n    id: \"8\",\n    location: \"Conference Room A\",\n    start: setMinutes(setHours(addDays(new Date(), 5), 9), 0), // 9:00 AM, 5 days from now\n    title: \"Team Meeting\",\n  },\n  {\n    color: \"sky\",\n    description: \"Weekly team sync\",\n    end: setMinutes(setHours(addDays(new Date(), 5), 15), 30), // 3:30 PM, 5 days from now\n    id: \"9\",\n    location: \"Conference Room A\",\n    start: setMinutes(setHours(addDays(new Date(), 5), 14), 0), // 2:00 PM, 5 days from now\n    title: \"Review contracts\",\n  },\n  {\n    color: \"amber\",\n    description: \"Weekly team sync\",\n    end: setMinutes(setHours(addDays(new Date(), 5), 11), 0), // 11:00 AM, 5 days from now\n    id: \"10\",\n    location: \"Conference Room A\",\n    start: setMinutes(setHours(addDays(new Date(), 5), 9), 45), // 9:45 AM, 5 days from now\n    title: \"Team Meeting\",\n  },\n  {\n    color: \"emerald\",\n    description: \"Quarterly marketing planning\",\n    end: setMinutes(setHours(addDays(new Date(), 9), 15), 30), // 3:30 PM, 9 days from now\n    id: \"11\",\n    location: \"Marketing Department\",\n    start: setMinutes(setHours(addDays(new Date(), 9), 10), 0), // 10:00 AM, 9 days from now\n    title: \"Marketing Strategy Session\",\n  },\n  {\n    allDay: true,\n    color: \"sky\",\n    description: \"Presentation of yearly results\",\n    end: addDays(new Date(), 17), // 17 days from now\n    id: \"12\",\n    location: \"Grand Conference Center\",\n    start: addDays(new Date(), 17), // 17 days from now\n    title: \"Annual Shareholders Meeting\",\n  },\n  {\n    color: \"rose\",\n    description: \"Brainstorming for new features\",\n    end: setMinutes(setHours(addDays(new Date(), 27), 17), 0), // 5:00 PM, 27 days from now\n    id: \"13\",\n    location: \"Innovation Lab\",\n    start: setMinutes(setHours(addDays(new Date(), 26), 9), 0), // 9:00 AM, 26 days from now\n    title: \"Product Development Workshop\",\n  },\n];\n\nexport default function Component() {\n  const [events, setEvents] = useState<CalendarEvent[]>(sampleEvents);\n\n  const handleEventAdd = (event: CalendarEvent) => {\n    setEvents([...events, event]);\n  };\n\n  const handleEventUpdate = (updatedEvent: CalendarEvent) => {\n    setEvents(\n      events.map((event) =>\n        event.id === updatedEvent.id ? updatedEvent : event,\n      ),\n    );\n  };\n\n  const handleEventDelete = (eventId: string) => {\n    setEvents(events.filter((event) => event.id !== eventId));\n  };\n\n  return (\n    <EventCalendar\n      events={events}\n      onEventAdd={handleEventAdd}\n      onEventDelete={handleEventDelete}\n      onEventUpdate={handleEventUpdate}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-543.tsx",
    "content": "\"use client\";\n\nimport { CircleUserRoundIcon, XIcon } from \"lucide-react\";\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [\n    { files, isDragging },\n    {\n      removeFile,\n      openFileDialog,\n      getInputProps,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n    },\n  ] = useFileUpload({\n    accept: \"image/*\",\n  });\n\n  const previewUrl = files[0]?.preview || null;\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"relative inline-flex\">\n        {/* Drop area */}\n        <button\n          aria-label={previewUrl ? \"Change image\" : \"Upload image\"}\n          className=\"relative flex size-16 items-center justify-center overflow-hidden rounded-full border border-input border-dashed outline-none transition-colors hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-disabled:pointer-events-none has-[img]:border-none has-disabled:opacity-50 data-[dragging=true]:bg-accent/50\"\n          data-dragging={isDragging || undefined}\n          onClick={openFileDialog}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n          type=\"button\"\n        >\n          {previewUrl ? (\n            <img\n              alt={files[0]?.file?.name || \"Uploaded image\"}\n              className=\"size-full object-cover\"\n              height={64}\n              src={previewUrl}\n              style={{ objectFit: \"cover\" }}\n              width={64}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"size-4 opacity-60\" />\n            </div>\n          )}\n        </button>\n        {previewUrl && (\n          <Button\n            aria-label=\"Remove image\"\n            className=\"absolute -top-1 -right-1 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n            onClick={() => removeFile(files[0]?.id)}\n            size=\"icon\"\n          >\n            <XIcon className=\"size-3.5\" />\n          </Button>\n        )}\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload image file\"\n          className=\"sr-only\"\n          tabIndex={-1}\n        />\n      </div>\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Avatar uploader with droppable area ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-544.tsx",
    "content": "\"use client\";\n\nimport { AlertCircleIcon, ImageUpIcon, XIcon } from \"lucide-react\";\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\n\nexport default function Component() {\n  const maxSizeMB = 5;\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    accept: \"image/*\",\n    maxSize,\n  });\n\n  const previewUrl = files[0]?.preview || null;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"relative\">\n        {/* Drop area */}\n        <div\n          className=\"relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-[input:focus]:border-ring has-[img]:border-none has-disabled:opacity-50 has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n          data-dragging={isDragging || undefined}\n          onClick={openFileDialog}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n          role=\"button\"\n          tabIndex={-1}\n        >\n          <input\n            {...getInputProps()}\n            aria-label=\"Upload file\"\n            className=\"sr-only\"\n          />\n          {previewUrl ? (\n            <div className=\"absolute inset-0\">\n              <img\n                alt={files[0]?.file?.name || \"Uploaded image\"}\n                className=\"size-full object-cover\"\n                src={previewUrl}\n              />\n            </div>\n          ) : (\n            <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n              <div\n                aria-hidden=\"true\"\n                className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n              >\n                <ImageUpIcon className=\"size-4 opacity-60\" />\n              </div>\n              <p className=\"mb-1.5 font-medium text-sm\">\n                Drop your image here or click to browse\n              </p>\n              <p className=\"text-muted-foreground text-xs\">\n                Max size: {maxSizeMB}MB\n              </p>\n            </div>\n          )}\n        </div>\n        {previewUrl && (\n          <div className=\"absolute top-4 right-4\">\n            <button\n              aria-label=\"Remove image\"\n              className=\"z-50 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              onClick={() => removeFile(files[0]?.id)}\n              type=\"button\"\n            >\n              <XIcon aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Single image uploader w/ max size ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-545.tsx",
    "content": "\"use client\";\n\nimport { AlertCircleIcon, ImageIcon, UploadIcon, XIcon } from \"lucide-react\";\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const maxSizeMB = 2;\n  const maxSize = maxSizeMB * 1024 * 1024; // 2MB default\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    accept: \"image/svg+xml,image/png,image/jpeg,image/jpg,image/gif\",\n    maxSize,\n  });\n  const previewUrl = files[0]?.preview || null;\n  const _fileName = files[0]?.file.name || null;\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"relative\">\n        {/* Drop area */}\n        <div\n          className=\"relative flex min-h-52 flex-col items-center justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n          data-dragging={isDragging || undefined}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n        >\n          <input\n            {...getInputProps()}\n            aria-label=\"Upload image file\"\n            className=\"sr-only\"\n          />\n          {previewUrl ? (\n            <div className=\"absolute inset-0 flex items-center justify-center p-4\">\n              <img\n                alt={files[0]?.file?.name || \"Uploaded image\"}\n                className=\"mx-auto max-h-full rounded object-contain\"\n                src={previewUrl}\n              />\n            </div>\n          ) : (\n            <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n              <div\n                aria-hidden=\"true\"\n                className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n              >\n                <ImageIcon className=\"size-4 opacity-60\" />\n              </div>\n              <p className=\"mb-1.5 font-medium text-sm\">Drop your image here</p>\n              <p className=\"text-muted-foreground text-xs\">\n                SVG, PNG, JPG or GIF (max. {maxSizeMB}MB)\n              </p>\n              <Button\n                className=\"mt-4\"\n                onClick={openFileDialog}\n                variant=\"outline\"\n              >\n                <UploadIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 size-4 opacity-60\"\n                />\n                Select image\n              </Button>\n            </div>\n          )}\n        </div>\n\n        {previewUrl && (\n          <div className=\"absolute top-4 right-4\">\n            <button\n              aria-label=\"Remove image\"\n              className=\"z-50 flex size-8 cursor-pointer items-center justify-center rounded-full bg-black/60 text-white outline-none transition-[color,box-shadow] hover:bg-black/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n              onClick={() => removeFile(files[0]?.id)}\n              type=\"button\"\n            >\n              <XIcon aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Single image uploader w/ max size (drop area + button) ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-546.tsx",
    "content": "\"use client\";\n\nimport { AlertCircleIcon, ImageIcon, UploadIcon, XIcon } from \"lucide-react\";\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    id: \"image-01-123456789\",\n    name: \"image-01.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=1\",\n  },\n  {\n    id: \"image-02-123456789\",\n    name: \"image-02.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=2\",\n  },\n  {\n    id: \"image-03-123456789\",\n    name: \"image-03.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=3\",\n  },\n  {\n    id: \"image-04-123456789\",\n    name: \"image-04.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=4\",\n  },\n];\n\nexport default function Component() {\n  const maxSizeMB = 5;\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\n  const maxFiles = 6;\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    accept: \"image/svg+xml,image/png,image/jpeg,image/jpg,image/gif\",\n    initialFiles,\n    maxFiles,\n    maxSize,\n    multiple: true,\n  });\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        className=\"relative flex min-h-52 flex-col items-center not-data-[files]:justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        data-dragging={isDragging || undefined}\n        data-files={files.length > 0 || undefined}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload image file\"\n          className=\"sr-only\"\n        />\n        {files.length > 0 ? (\n          <div className=\"flex w-full flex-col gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <h3 className=\"truncate font-medium text-sm\">\n                Uploaded Files ({files.length})\n              </h3>\n              <Button\n                disabled={files.length >= maxFiles}\n                onClick={openFileDialog}\n                size=\"sm\"\n                variant=\"outline\"\n              >\n                <UploadIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-0.5 size-3.5 opacity-60\"\n                />\n                Add more\n              </Button>\n            </div>\n\n            <div className=\"grid grid-cols-2 gap-4 md:grid-cols-3\">\n              {files.map((file) => (\n                <div\n                  className=\"relative aspect-square rounded-md bg-accent\"\n                  key={file.id}\n                >\n                  <img\n                    alt={file.file.name}\n                    className=\"size-full rounded-[inherit] object-cover\"\n                    src={file.preview}\n                  />\n                  <Button\n                    aria-label=\"Remove image\"\n                    className=\"absolute -top-2 -right-2 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n                    onClick={() => removeFile(file.id)}\n                    size=\"icon\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              ))}\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n            <div\n              aria-hidden=\"true\"\n              className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n            >\n              <ImageIcon className=\"size-4 opacity-60\" />\n            </div>\n            <p className=\"mb-1.5 font-medium text-sm\">Drop your images here</p>\n            <p className=\"text-muted-foreground text-xs\">\n              SVG, PNG, JPG or GIF (max. {maxSizeMB}MB)\n            </p>\n            <Button className=\"mt-4\" onClick={openFileDialog} variant=\"outline\">\n              <UploadIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n              Select images\n            </Button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Multiple image uploader w/ image grid ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-547.tsx",
    "content": "\"use client\";\n\nimport { AlertCircleIcon, ImageIcon, UploadIcon, XIcon } from \"lucide-react\";\nimport {\n  formatBytes,\n  useFileUpload,\n} from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    id: \"image-01-123456789\",\n    name: \"image-01.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=1\",\n  },\n  {\n    id: \"image-02-123456789\",\n    name: \"image-02.jpg\",\n    size: 2345678,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=2\",\n  },\n  {\n    id: \"image-03-123456789\",\n    name: \"image-03.jpg\",\n    size: 3456789,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=3\",\n  },\n];\n\nexport default function Component() {\n  const maxSizeMB = 5;\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\n  const maxFiles = 6;\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    accept: \"image/svg+xml,image/png,image/jpeg,image/jpg,image/gif\",\n    initialFiles,\n    maxFiles,\n    maxSize,\n    multiple: true,\n  });\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        className=\"relative flex min-h-52 flex-col items-center not-data-[files]:justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        data-dragging={isDragging || undefined}\n        data-files={files.length > 0 || undefined}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload image file\"\n          className=\"sr-only\"\n        />\n        <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n          <div\n            aria-hidden=\"true\"\n            className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n          >\n            <ImageIcon className=\"size-4 opacity-60\" />\n          </div>\n          <p className=\"mb-1.5 font-medium text-sm\">Drop your images here</p>\n          <p className=\"text-muted-foreground text-xs\">\n            SVG, PNG, JPG or GIF (max. {maxSizeMB}MB)\n          </p>\n          <Button className=\"mt-4\" onClick={openFileDialog} variant=\"outline\">\n            <UploadIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n            Select images\n          </Button>\n        </div>\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      {/* File list */}\n      {files.length > 0 && (\n        <div className=\"space-y-2\">\n          {files.map((file) => (\n            <div\n              className=\"flex items-center justify-between gap-2 rounded-lg border bg-background p-2 pe-3\"\n              key={file.id}\n            >\n              <div className=\"flex items-center gap-3 overflow-hidden\">\n                <div className=\"aspect-square shrink-0 rounded bg-accent\">\n                  <img\n                    alt={file.file.name}\n                    className=\"size-10 rounded-[inherit] object-cover\"\n                    src={file.preview}\n                  />\n                </div>\n                <div className=\"flex min-w-0 flex-col gap-0.5\">\n                  <p className=\"truncate font-medium text-[13px]\">\n                    {file.file.name}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    {formatBytes(file.file.size)}\n                  </p>\n                </div>\n              </div>\n\n              <Button\n                aria-label=\"Remove file\"\n                className=\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\"\n                onClick={() => removeFile(file.id)}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <XIcon aria-hidden=\"true\" />\n              </Button>\n            </div>\n          ))}\n\n          {/* Remove all files button */}\n          {files.length > 1 && (\n            <div>\n              <Button onClick={clearFiles} size=\"sm\" variant=\"outline\">\n                Remove all files\n              </Button>\n            </div>\n          )}\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Multiple image uploader w/ image list ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-548.tsx",
    "content": "\"use client\";\n\nimport {\n  AlertCircleIcon,\n  PaperclipIcon,\n  UploadIcon,\n  XIcon,\n} from \"lucide-react\";\nimport {\n  formatBytes,\n  useFileUpload,\n} from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    id: \"document.pdf-1744638436563-8u5xuls\",\n    name: \"document.pdf\",\n    size: 1528737,\n    type: \"application/pdf\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=1\",\n  },\n];\n\nexport default function Component() {\n  const maxSize = 10 * 1024 * 1024; // 10MB default\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    initialFiles,\n    maxSize,\n  });\n\n  const file = files[0];\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        className=\"flex min-h-40 flex-col items-center justify-center rounded-xl border border-input border-dashed p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-[input:focus]:border-ring has-disabled:opacity-50 has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        data-dragging={isDragging || undefined}\n        onClick={openFileDialog}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        role=\"button\"\n        tabIndex={-1}\n      >\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload file\"\n          className=\"sr-only\"\n          disabled={Boolean(file)}\n        />\n\n        <div className=\"flex flex-col items-center justify-center text-center\">\n          <div\n            aria-hidden=\"true\"\n            className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n          >\n            <UploadIcon className=\"size-4 opacity-60\" />\n          </div>\n          <p className=\"mb-1.5 font-medium text-sm\">Upload file</p>\n          <p className=\"text-muted-foreground text-xs\">\n            Drag & drop or click to browse (max. {formatBytes(maxSize)})\n          </p>\n        </div>\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      {/* File list */}\n      {file && (\n        <div className=\"space-y-2\">\n          <div\n            className=\"flex items-center justify-between gap-2 rounded-xl border px-4 py-2\"\n            key={file.id}\n          >\n            <div className=\"flex items-center gap-3 overflow-hidden\">\n              <PaperclipIcon\n                aria-hidden=\"true\"\n                className=\"size-4 shrink-0 opacity-60\"\n              />\n              <div className=\"min-w-0\">\n                <p className=\"truncate font-medium text-[13px]\">\n                  {file.file.name}\n                </p>\n              </div>\n            </div>\n\n            <Button\n              aria-label=\"Remove file\"\n              className=\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\"\n              onClick={() => removeFile(files[0]?.id)}\n              size=\"icon\"\n              variant=\"ghost\"\n            >\n              <XIcon aria-hidden=\"true\" className=\"size-4\" />\n            </Button>\n          </div>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Single file uploader w/ max size ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-549.tsx",
    "content": "\"use client\";\n\nimport {\n  AlertCircleIcon,\n  FileArchiveIcon,\n  FileIcon,\n  FileSpreadsheetIcon,\n  FileTextIcon,\n  FileUpIcon,\n  HeadphonesIcon,\n  ImageIcon,\n  VideoIcon,\n  XIcon,\n} from \"lucide-react\";\nimport {\n  formatBytes,\n  useFileUpload,\n} from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    id: \"document.pdf-1744638436563-8u5xuls\",\n    name: \"document.pdf\",\n    size: 528737,\n    type: \"application/pdf\",\n    url: \"https://example.com/document.pdf\",\n  },\n  {\n    id: \"intro.zip-1744638436563-8u5xuls\",\n    name: \"intro.zip\",\n    size: 252873,\n    type: \"application/zip\",\n    url: \"https://example.com/intro.zip\",\n  },\n  {\n    id: \"conclusion.xlsx-1744638436563-8u5xuls\",\n    name: \"conclusion.xlsx\",\n    size: 352873,\n    type: \"application/xlsx\",\n    url: \"https://example.com/conclusion.xlsx\",\n  },\n];\n\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n  if (\n    fileType.includes(\"pdf\") ||\n    fileName.endsWith(\".pdf\") ||\n    fileType.includes(\"word\") ||\n    fileName.endsWith(\".doc\") ||\n    fileName.endsWith(\".docx\")\n  ) {\n    return <FileTextIcon className=\"size-4 opacity-60\" />;\n  }\n  if (\n    fileType.includes(\"zip\") ||\n    fileType.includes(\"archive\") ||\n    fileName.endsWith(\".zip\") ||\n    fileName.endsWith(\".rar\")\n  ) {\n    return <FileArchiveIcon className=\"size-4 opacity-60\" />;\n  }\n  if (\n    fileType.includes(\"excel\") ||\n    fileName.endsWith(\".xls\") ||\n    fileName.endsWith(\".xlsx\")\n  ) {\n    return <FileSpreadsheetIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.includes(\"video/\")) {\n    return <VideoIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.includes(\"audio/\")) {\n    return <HeadphonesIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.startsWith(\"image/\")) {\n    return <ImageIcon className=\"size-4 opacity-60\" />;\n  }\n  return <FileIcon className=\"size-4 opacity-60\" />;\n};\n\nexport default function Component() {\n  const maxSize = 100 * 1024 * 1024; // 10MB default\n  const maxFiles = 10;\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    initialFiles,\n    maxFiles,\n    maxSize,\n    multiple: true,\n  });\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        className=\"flex min-h-40 flex-col items-center justify-center rounded-xl border border-input border-dashed p-4 transition-colors hover:bg-accent/50 has-disabled:pointer-events-none has-[input:focus]:border-ring has-disabled:opacity-50 has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        data-dragging={isDragging || undefined}\n        onClick={openFileDialog}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        role=\"button\"\n        tabIndex={-1}\n      >\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload files\"\n          className=\"sr-only\"\n        />\n\n        <div className=\"flex flex-col items-center justify-center text-center\">\n          <div\n            aria-hidden=\"true\"\n            className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n          >\n            <FileUpIcon className=\"size-4 opacity-60\" />\n          </div>\n          <p className=\"mb-1.5 font-medium text-sm\">Upload files</p>\n          <p className=\"mb-2 text-muted-foreground text-xs\">\n            Drag & drop or click to browse\n          </p>\n          <div className=\"flex flex-wrap justify-center gap-1 text-muted-foreground/70 text-xs\">\n            <span>All files</span>\n            <span>∙</span>\n            <span>Max {maxFiles} files</span>\n            <span>∙</span>\n            <span>Up to {formatBytes(maxSize)}</span>\n          </div>\n        </div>\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      {/* File list */}\n      {files.length > 0 && (\n        <div className=\"space-y-2\">\n          {files.map((file) => (\n            <div\n              className=\"flex items-center justify-between gap-2 rounded-lg border bg-background p-2 pe-3\"\n              key={file.id}\n            >\n              <div className=\"flex items-center gap-3 overflow-hidden\">\n                <div className=\"flex aspect-square size-10 shrink-0 items-center justify-center rounded border\">\n                  {getFileIcon(file)}\n                </div>\n                <div className=\"flex min-w-0 flex-col gap-0.5\">\n                  <p className=\"truncate font-medium text-[13px]\">\n                    {file.file instanceof File\n                      ? file.file.name\n                      : file.file.name}\n                  </p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    {formatBytes(\n                      file.file instanceof File\n                        ? file.file.size\n                        : file.file.size,\n                    )}\n                  </p>\n                </div>\n              </div>\n\n              <Button\n                aria-label=\"Remove file\"\n                className=\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\"\n                onClick={() => removeFile(file.id)}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <XIcon aria-hidden=\"true\" className=\"size-4\" />\n              </Button>\n            </div>\n          ))}\n\n          {/* Remove all files button */}\n          {files.length > 1 && (\n            <div>\n              <Button onClick={clearFiles} size=\"sm\" variant=\"outline\">\n                Remove all files\n              </Button>\n            </div>\n          )}\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Multiple files uploader w/ list ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-55.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { withMask } from \"use-mask-input\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Timestamp</Label>\n      <Input\n        id={id}\n        placeholder=\"00:00:00\"\n        ref={(input) => {\n          if (input) {\n            withMask(\"99:99:99\", {\n              placeholder: \"-\",\n              showMaskOnHover: false,\n            })(input);\n          }\n        }}\n        type=\"text\"\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/eduardoborges/use-mask-input\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          use-mask-input\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-550.tsx",
    "content": "\"use client\";\n\nimport {\n  AlertCircleIcon,\n  FileArchiveIcon,\n  FileIcon,\n  FileSpreadsheetIcon,\n  FileTextIcon,\n  HeadphonesIcon,\n  ImageIcon,\n  Trash2Icon,\n  UploadIcon,\n  VideoIcon,\n  XIcon,\n} from \"lucide-react\";\nimport {\n  formatBytes,\n  useFileUpload,\n} from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n  if (\n    fileType.includes(\"pdf\") ||\n    fileName.endsWith(\".pdf\") ||\n    fileType.includes(\"word\") ||\n    fileName.endsWith(\".doc\") ||\n    fileName.endsWith(\".docx\")\n  ) {\n    return <FileTextIcon className=\"size-4 opacity-60\" />;\n  }\n  if (\n    fileType.includes(\"zip\") ||\n    fileType.includes(\"archive\") ||\n    fileName.endsWith(\".zip\") ||\n    fileName.endsWith(\".rar\")\n  ) {\n    return <FileArchiveIcon className=\"size-4 opacity-60\" />;\n  }\n  if (\n    fileType.includes(\"excel\") ||\n    fileName.endsWith(\".xls\") ||\n    fileName.endsWith(\".xlsx\")\n  ) {\n    return <FileSpreadsheetIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.includes(\"video/\")) {\n    return <VideoIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.includes(\"audio/\")) {\n    return <HeadphonesIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.startsWith(\"image/\")) {\n    return <ImageIcon className=\"size-4 opacity-60\" />;\n  }\n  return <FileIcon className=\"size-4 opacity-60\" />;\n};\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    id: \"document.pdf-1744638436563-8u5xuls\",\n    name: \"document.pdf\",\n    size: 528737,\n    type: \"application/pdf\",\n    url: \"https://example.com/document.pdf\",\n  },\n  {\n    id: \"intro.zip-1744638436563-8u5xuls\",\n    name: \"intro.zip\",\n    size: 252873,\n    type: \"application/zip\",\n    url: \"https://example.com/intro.zip\",\n  },\n  {\n    id: \"conclusion.xlsx-1744638436563-8u5xuls\",\n    name: \"conclusion.xlsx\",\n    size: 352873,\n    type: \"application/xlsx\",\n    url: \"https://example.com/conclusion.xlsx\",\n  },\n];\n\nexport default function Component() {\n  const maxSize = 10 * 1024 * 1024; // 10MB default\n  const maxFiles = 10;\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    initialFiles,\n    maxFiles,\n    maxSize,\n    multiple: true,\n  });\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        className=\"flex min-h-56 flex-col items-center not-data-[files]:justify-center rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        data-dragging={isDragging || undefined}\n        data-files={files.length > 0 || undefined}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload files\"\n          className=\"sr-only\"\n        />\n\n        {files.length > 0 ? (\n          <div className=\"flex w-full flex-col gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <h3 className=\"truncate font-medium text-sm\">\n                Uploaded Files ({files.length})\n              </h3>\n              <Button onClick={clearFiles} size=\"sm\" variant=\"outline\">\n                <Trash2Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-0.5 size-3.5 opacity-60\"\n                />\n                Remove all\n              </Button>\n            </div>\n            <div className=\"w-full space-y-2\">\n              {files.map((file) => (\n                <div\n                  className=\"flex items-center justify-between gap-2 rounded-lg border bg-background p-2 pe-3\"\n                  key={file.id}\n                >\n                  <div className=\"flex items-center gap-3 overflow-hidden\">\n                    <div className=\"flex aspect-square size-10 shrink-0 items-center justify-center rounded border\">\n                      {getFileIcon(file)}\n                    </div>\n                    <div className=\"flex min-w-0 flex-col gap-0.5\">\n                      <p className=\"truncate font-medium text-[13px]\">\n                        {file.file instanceof File\n                          ? file.file.name\n                          : file.file.name}\n                      </p>\n                      <p className=\"text-muted-foreground text-xs\">\n                        {formatBytes(\n                          file.file instanceof File\n                            ? file.file.size\n                            : file.file.size,\n                        )}\n                      </p>\n                    </div>\n                  </div>\n\n                  <Button\n                    aria-label=\"Remove file\"\n                    className=\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\"\n                    onClick={() => removeFile(file.id)}\n                    size=\"icon\"\n                    variant=\"ghost\"\n                  >\n                    <XIcon aria-hidden=\"true\" className=\"size-4\" />\n                  </Button>\n                </div>\n              ))}\n\n              {files.length < maxFiles && (\n                <Button\n                  className=\"mt-2 w-full\"\n                  onClick={openFileDialog}\n                  variant=\"outline\"\n                >\n                  <UploadIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n                  Add more\n                </Button>\n              )}\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center text-center\">\n            <div\n              aria-hidden=\"true\"\n              className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n            >\n              <FileIcon className=\"size-4 opacity-60\" />\n            </div>\n            <p className=\"mb-1.5 font-medium text-sm\">Upload files</p>\n            <p className=\"text-muted-foreground text-xs\">\n              Max {maxFiles} files ∙ Up to {maxSize}MB\n            </p>\n            <Button className=\"mt-4\" onClick={openFileDialog} variant=\"outline\">\n              <UploadIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n              Select files\n            </Button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Multiple files uploader w/ list inside ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-551.tsx",
    "content": "\"use client\";\n\nimport {\n  AlertCircleIcon,\n  DownloadIcon,\n  FileArchiveIcon,\n  FileIcon,\n  FileSpreadsheetIcon,\n  FileTextIcon,\n  HeadphonesIcon,\n  ImageIcon,\n  Trash2Icon,\n  UploadCloudIcon,\n  UploadIcon,\n  VideoIcon,\n} from \"lucide-react\";\nimport {\n  formatBytes,\n  useFileUpload,\n} from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    id: \"document.pdf-1744638436563-8u5xuls\",\n    name: \"document.pdf\",\n    size: 528737,\n    type: \"application/pdf\",\n    url: \"https://coss.com/origin\",\n  },\n  {\n    id: \"intro.zip-1744638436563-8u5xuls\",\n    name: \"intro.zip\",\n    size: 252873,\n    type: \"application/zip\",\n    url: \"https://coss.com/origin\",\n  },\n  {\n    id: \"conclusion.xlsx-1744638436563-8u5xuls\",\n    name: \"conclusion.xlsx\",\n    size: 352873,\n    type: \"application/xlsx\",\n    url: \"https://coss.com/origin\",\n  },\n];\n\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n  if (\n    fileType.includes(\"pdf\") ||\n    fileName.endsWith(\".pdf\") ||\n    fileType.includes(\"word\") ||\n    fileName.endsWith(\".doc\") ||\n    fileName.endsWith(\".docx\")\n  ) {\n    return <FileTextIcon className=\"size-4 opacity-60\" />;\n  }\n  if (\n    fileType.includes(\"zip\") ||\n    fileType.includes(\"archive\") ||\n    fileName.endsWith(\".zip\") ||\n    fileName.endsWith(\".rar\")\n  ) {\n    return <FileArchiveIcon className=\"size-4 opacity-60\" />;\n  }\n  if (\n    fileType.includes(\"excel\") ||\n    fileName.endsWith(\".xls\") ||\n    fileName.endsWith(\".xlsx\")\n  ) {\n    return <FileSpreadsheetIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.includes(\"video/\")) {\n    return <VideoIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.includes(\"audio/\")) {\n    return <HeadphonesIcon className=\"size-4 opacity-60\" />;\n  }\n  if (fileType.startsWith(\"image/\")) {\n    return <ImageIcon className=\"size-4 opacity-60\" />;\n  }\n  return <FileIcon className=\"size-4 opacity-60\" />;\n};\n\nexport default function Component() {\n  const maxSize = 10 * 1024 * 1024; // 10MB default\n  const maxFiles = 10;\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    initialFiles,\n    maxFiles,\n    maxSize,\n    multiple: true,\n  });\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        className=\"flex min-h-56 flex-col items-center not-data-[files]:justify-center rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[files]:hidden data-[dragging=true]:bg-accent/50\"\n        data-dragging={isDragging || undefined}\n        data-files={files.length > 0 || undefined}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload files\"\n          className=\"sr-only\"\n        />\n        <div className=\"flex flex-col items-center justify-center text-center\">\n          <div\n            aria-hidden=\"true\"\n            className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n          >\n            <FileIcon className=\"size-4 opacity-60\" />\n          </div>\n          <p className=\"mb-1.5 font-medium text-sm\">Upload files</p>\n          <p className=\"text-muted-foreground text-xs\">\n            Max {maxFiles} files ∙ Up to {formatBytes(maxSize)}\n          </p>\n          <Button className=\"mt-4\" onClick={openFileDialog} variant=\"outline\">\n            <UploadIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n            Select files\n          </Button>\n        </div>\n      </div>\n      {files.length > 0 && (\n        <>\n          {/* Table with files */}\n          <div className=\"flex items-center justify-between gap-2\">\n            <h3 className=\"font-medium text-sm\">Files ({files.length})</h3>\n            <div className=\"flex gap-2\">\n              <Button onClick={openFileDialog} size=\"sm\" variant=\"outline\">\n                <UploadCloudIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-0.5 size-3.5 opacity-60\"\n                />\n                Add files\n              </Button>\n              <Button onClick={clearFiles} size=\"sm\" variant=\"outline\">\n                <Trash2Icon\n                  aria-hidden=\"true\"\n                  className=\"-ms-0.5 size-3.5 opacity-60\"\n                />\n                Remove all\n              </Button>\n            </div>\n          </div>\n          <div className=\"overflow-hidden rounded-md border bg-background\">\n            <Table>\n              <TableHeader className=\"text-xs\">\n                <TableRow className=\"bg-muted/50\">\n                  <TableHead className=\"h-9 py-2\">Name</TableHead>\n                  <TableHead className=\"h-9 py-2\">Type</TableHead>\n                  <TableHead className=\"h-9 py-2\">Size</TableHead>\n                  <TableHead className=\"h-9 w-0 py-2 text-right\">\n                    Actions\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody className=\"text-[13px]\">\n                {files.map((file) => (\n                  <TableRow key={file.id}>\n                    <TableCell className=\"max-w-48 py-2 font-medium\">\n                      <span className=\"flex items-center gap-2\">\n                        <span className=\"shrink-0\">{getFileIcon(file)}</span>{\" \"}\n                        <span className=\"truncate\">{file.file.name}</span>\n                      </span>\n                    </TableCell>\n                    <TableCell className=\"py-2 text-muted-foreground\">\n                      {file.file.type.split(\"/\")[1]?.toUpperCase() || \"UNKNOWN\"}\n                    </TableCell>\n                    <TableCell className=\"py-2 text-muted-foreground\">\n                      {formatBytes(file.file.size)}\n                    </TableCell>\n                    <TableCell className=\"whitespace-nowrap py-2 text-right\">\n                      <Button\n                        aria-label={`Download ${file.file.name}`}\n                        className=\"size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\"\n                        onClick={() => window.open(file.preview, \"_blank\")}\n                        size=\"icon\"\n                        variant=\"ghost\"\n                      >\n                        <DownloadIcon className=\"size-4\" />\n                      </Button>\n                      <Button\n                        aria-label={`Remove ${file.file.name}`}\n                        className=\"size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\"\n                        onClick={() => removeFile(file.id)}\n                        size=\"icon\"\n                        variant=\"ghost\"\n                      >\n                        <Trash2Icon className=\"size-4\" />\n                      </Button>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </>\n      )}\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Multiple files uploader w/ table ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-552.tsx",
    "content": "\"use client\";\n\nimport {\n  AlertCircleIcon,\n  FileArchiveIcon,\n  FileIcon,\n  FileSpreadsheetIcon,\n  FileTextIcon,\n  HeadphonesIcon,\n  ImageIcon,\n  Trash2Icon,\n  UploadIcon,\n  VideoIcon,\n  XIcon,\n} from \"lucide-react\";\nimport {\n  formatBytes,\n  useFileUpload,\n} from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    id: \"intro.zip-1744638436563-8u5xuls\",\n    name: \"intro.zip\",\n    size: 252873,\n    type: \"application/zip\",\n    url: \"https://example.com/intro.zip\",\n  },\n  {\n    id: \"image-01-123456789\",\n    name: \"image-01.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=1\",\n  },\n  {\n    id: \"audio-123456789\",\n    name: \"audio.mp3\",\n    size: 1528737,\n    type: \"audio/mpeg\",\n    url: \"https://example.com/audio.mp3\",\n  },\n];\n\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n  const iconMap = {\n    archive: {\n      conditions: (type: string, name: string) =>\n        type.includes(\"zip\") ||\n        type.includes(\"archive\") ||\n        name.endsWith(\".zip\") ||\n        name.endsWith(\".rar\"),\n      icon: FileArchiveIcon,\n    },\n    audio: {\n      conditions: (type: string) => type.includes(\"audio/\"),\n      icon: HeadphonesIcon,\n    },\n    excel: {\n      conditions: (type: string, name: string) =>\n        type.includes(\"excel\") ||\n        name.endsWith(\".xls\") ||\n        name.endsWith(\".xlsx\"),\n      icon: FileSpreadsheetIcon,\n    },\n    image: {\n      conditions: (type: string) => type.startsWith(\"image/\"),\n      icon: ImageIcon,\n    },\n    pdf: {\n      conditions: (type: string, name: string) =>\n        type.includes(\"pdf\") ||\n        name.endsWith(\".pdf\") ||\n        type.includes(\"word\") ||\n        name.endsWith(\".doc\") ||\n        name.endsWith(\".docx\"),\n      icon: FileTextIcon,\n    },\n    video: {\n      conditions: (type: string) => type.includes(\"video/\"),\n      icon: VideoIcon,\n    },\n  };\n\n  for (const { icon: Icon, conditions } of Object.values(iconMap)) {\n    if (conditions(fileType, fileName)) {\n      return <Icon className=\"size-5 opacity-60\" />;\n    }\n  }\n\n  return <FileIcon className=\"size-5 opacity-60\" />;\n};\n\nconst getFilePreview = (file: {\n  file: File | { type: string; name: string; url?: string };\n}) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n  const renderImage = (src: string) => (\n    <img\n      alt={fileName}\n      className=\"size-full rounded-t-[inherit] object-cover\"\n      src={src}\n    />\n  );\n\n  return (\n    <div className=\"flex aspect-square items-center justify-center overflow-hidden rounded-t-[inherit] bg-accent\">\n      {fileType.startsWith(\"image/\") ? (\n        file.file instanceof File ? (\n          (() => {\n            const previewUrl = URL.createObjectURL(file.file);\n            return renderImage(previewUrl);\n          })()\n        ) : file.file.url ? (\n          renderImage(file.file.url)\n        ) : (\n          <ImageIcon className=\"size-5 opacity-60\" />\n        )\n      ) : (\n        getFileIcon(file)\n      )}\n    </div>\n  );\n};\n\nexport default function Component() {\n  const maxSizeMB = 5;\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\n  const maxFiles = 6;\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    initialFiles,\n    maxFiles,\n    maxSize,\n    multiple: true,\n  });\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        className=\"relative flex min-h-52 flex-col items-center not-data-[files]:justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        data-dragging={isDragging || undefined}\n        data-files={files.length > 0 || undefined}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload image file\"\n          className=\"sr-only\"\n        />\n        {files.length > 0 ? (\n          <div className=\"flex w-full flex-col gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <h3 className=\"truncate font-medium text-sm\">\n                Files ({files.length})\n              </h3>\n              <div className=\"flex gap-2\">\n                <Button onClick={openFileDialog} size=\"sm\" variant=\"outline\">\n                  <UploadIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-0.5 size-3.5 opacity-60\"\n                  />\n                  Add files\n                </Button>\n                <Button onClick={clearFiles} size=\"sm\" variant=\"outline\">\n                  <Trash2Icon\n                    aria-hidden=\"true\"\n                    className=\"-ms-0.5 size-3.5 opacity-60\"\n                  />\n                  Remove all\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"grid grid-cols-2 gap-4 md:grid-cols-3\">\n              {files.map((file) => (\n                <div\n                  className=\"relative flex flex-col rounded-md border bg-background\"\n                  key={file.id}\n                >\n                  {getFilePreview(file)}\n                  <Button\n                    aria-label=\"Remove image\"\n                    className=\"absolute -top-2 -right-2 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n                    onClick={() => removeFile(file.id)}\n                    size=\"icon\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                  <div className=\"flex min-w-0 flex-col gap-0.5 border-t p-3\">\n                    <p className=\"truncate font-medium text-[13px]\">\n                      {file.file.name}\n                    </p>\n                    <p className=\"truncate text-muted-foreground text-xs\">\n                      {formatBytes(file.file.size)}\n                    </p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n            <div\n              aria-hidden=\"true\"\n              className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n            >\n              <ImageIcon className=\"size-4 opacity-60\" />\n            </div>\n            <p className=\"mb-1.5 font-medium text-sm\">Drop your files here</p>\n            <p className=\"text-muted-foreground text-xs\">\n              Max {maxFiles} files ∙ Up to {maxSizeMB}MB\n            </p>\n            <Button className=\"mt-4\" onClick={openFileDialog} variant=\"outline\">\n              <UploadIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n              Select images\n            </Button>\n          </div>\n        )}\n      </div>\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Mixed content w/ card ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-553.tsx",
    "content": "\"use client\";\n\nimport {\n  AlertCircleIcon,\n  FileArchiveIcon,\n  FileIcon,\n  FileSpreadsheetIcon,\n  FileTextIcon,\n  HeadphonesIcon,\n  ImageIcon,\n  Trash2Icon,\n  UploadIcon,\n  VideoIcon,\n  XIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  type FileWithPreview,\n  formatBytes,\n  useFileUpload,\n} from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\n\n// Create some dummy initial files\nconst initialFiles = [\n  {\n    id: \"intro.zip-1744638436563-8u5xuls\",\n    name: \"intro.zip\",\n    size: 252873,\n    type: \"application/zip\",\n    url: \"https://example.com/intro.zip\",\n  },\n  {\n    id: \"image-01-123456789\",\n    name: \"image-01.jpg\",\n    size: 1528737,\n    type: \"image/jpeg\",\n    url: \"https://picsum.photos/1000/800?grayscale&random=1\",\n  },\n  {\n    id: \"audio-123456789\",\n    name: \"audio.mp3\",\n    size: 1528737,\n    type: \"audio/mpeg\",\n    url: \"https://example.com/audio.mp3\",\n  },\n];\n\nconst getFileIcon = (file: { file: File | { type: string; name: string } }) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n  const iconMap = {\n    archive: {\n      conditions: (type: string, name: string) =>\n        type.includes(\"zip\") ||\n        type.includes(\"archive\") ||\n        name.endsWith(\".zip\") ||\n        name.endsWith(\".rar\"),\n      icon: FileArchiveIcon,\n    },\n    audio: {\n      conditions: (type: string) => type.includes(\"audio/\"),\n      icon: HeadphonesIcon,\n    },\n    excel: {\n      conditions: (type: string, name: string) =>\n        type.includes(\"excel\") ||\n        name.endsWith(\".xls\") ||\n        name.endsWith(\".xlsx\"),\n      icon: FileSpreadsheetIcon,\n    },\n    image: {\n      conditions: (type: string) => type.startsWith(\"image/\"),\n      icon: ImageIcon,\n    },\n    pdf: {\n      conditions: (type: string, name: string) =>\n        type.includes(\"pdf\") ||\n        name.endsWith(\".pdf\") ||\n        type.includes(\"word\") ||\n        name.endsWith(\".doc\") ||\n        name.endsWith(\".docx\"),\n      icon: FileTextIcon,\n    },\n    video: {\n      conditions: (type: string) => type.includes(\"video/\"),\n      icon: VideoIcon,\n    },\n  };\n\n  for (const { icon: Icon, conditions } of Object.values(iconMap)) {\n    if (conditions(fileType, fileName)) {\n      return <Icon className=\"size-5 opacity-60\" />;\n    }\n  }\n\n  return <FileIcon className=\"size-5 opacity-60\" />;\n};\n\nconst _getFilePreview = (file: {\n  file: File | { type: string; name: string; url?: string };\n}) => {\n  const fileType = file.file instanceof File ? file.file.type : file.file.type;\n  const fileName = file.file instanceof File ? file.file.name : file.file.name;\n\n  const renderImage = (src: string) => (\n    <img\n      alt={fileName}\n      className=\"size-full rounded-t-[inherit] object-cover\"\n      src={src}\n    />\n  );\n\n  return (\n    <div className=\"flex aspect-square items-center justify-center overflow-hidden rounded-t-[inherit] bg-accent\">\n      {fileType.startsWith(\"image/\") ? (\n        file.file instanceof File ? (\n          (() => {\n            const previewUrl = URL.createObjectURL(file.file);\n            return renderImage(previewUrl);\n          })()\n        ) : file.file.url ? (\n          renderImage(file.file.url)\n        ) : (\n          <ImageIcon className=\"size-5 opacity-60\" />\n        )\n      ) : (\n        getFileIcon(file)\n      )}\n    </div>\n  );\n};\n\n// Type for tracking upload progress\ntype UploadProgress = {\n  fileId: string;\n  progress: number;\n  completed: boolean;\n};\n\n// Function to simulate file upload with more realistic timing and progress\nconst simulateUpload = (\n  totalBytes: number,\n  onProgress: (progress: number) => void,\n  onComplete: () => void,\n) => {\n  let timeoutId: NodeJS.Timeout;\n  let uploadedBytes = 0;\n  let lastProgressReport = 0;\n\n  const simulateChunk = () => {\n    // Simulate variable network conditions with random chunk sizes\n    const chunkSize = Math.floor(Math.random() * 300000) + 2000;\n    uploadedBytes = Math.min(totalBytes, uploadedBytes + chunkSize);\n\n    // Calculate progress percentage (0-100)\n    const progressPercent = Math.floor((uploadedBytes / totalBytes) * 100);\n\n    // Only report progress if it's changed by at least 1%\n    if (progressPercent > lastProgressReport) {\n      lastProgressReport = progressPercent;\n      onProgress(progressPercent);\n    }\n\n    // Continue simulation if not complete\n    if (uploadedBytes < totalBytes) {\n      // Variable delay between 50ms and 500ms to simulate network fluctuations (reduced for faster uploads)\n      const delay = Math.floor(Math.random() * 450) + 50;\n\n      // Occasionally add a longer pause to simulate network congestion (5% chance, shorter duration)\n      const extraDelay = Math.random() < 0.05 ? 500 : 0;\n\n      timeoutId = setTimeout(simulateChunk, delay + extraDelay);\n    } else {\n      // Upload complete\n      onComplete();\n    }\n  };\n\n  // Start the simulation\n  timeoutId = setTimeout(simulateChunk, 100);\n\n  // Return a cleanup function to cancel the simulation\n  return () => {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n    }\n  };\n};\n\nexport default function Component() {\n  const maxSizeMB = 5;\n  const maxSize = maxSizeMB * 1024 * 1024; // 5MB default\n  const maxFiles = 6;\n\n  // State to track upload progress for each file\n  const [uploadProgress, setUploadProgress] = useState<UploadProgress[]>([]);\n\n  // Function to handle newly added files\n  const handleFilesAdded = (addedFiles: FileWithPreview[]) => {\n    const newProgressItems = addedFiles.map((file) => ({\n      completed: false,\n      fileId: file.id,\n      progress: 0,\n    }));\n\n    setUploadProgress((prev) => [...prev, ...newProgressItems]);\n\n    const cleanupFunctions: Array<() => void> = [];\n\n    for (const file of addedFiles) {\n      const fileSize =\n        file.file instanceof File ? file.file.size : file.file.size;\n\n      const cleanup = simulateUpload(\n        fileSize,\n        (progress) => {\n          setUploadProgress((prev) =>\n            prev.map((item) =>\n              item.fileId === file.id ? { ...item, progress } : item,\n            ),\n          );\n        },\n        () => {\n          setUploadProgress((prev) =>\n            prev.map((item) =>\n              item.fileId === file.id ? { ...item, completed: true } : item,\n            ),\n          );\n        },\n      );\n\n      cleanupFunctions.push(cleanup);\n    }\n\n    return () => {\n      for (const cleanup of cleanupFunctions) {\n        cleanup();\n      }\n    };\n  };\n\n  // Remove the progress tracking for the file\n  const handleFileRemoved = (fileId: string) => {\n    setUploadProgress((prev) => prev.filter((item) => item.fileId !== fileId));\n  };\n\n  const [\n    { files, isDragging, errors },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      clearFiles,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    initialFiles,\n    maxFiles,\n    maxSize,\n    multiple: true,\n    onFilesAdded: handleFilesAdded,\n  });\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {/* Drop area */}\n      <div\n        className=\"relative flex min-h-52 flex-col items-center not-data-[files]:justify-center overflow-hidden rounded-xl border border-input border-dashed p-4 transition-colors has-[input:focus]:border-ring has-[input:focus]:ring-[3px] has-[input:focus]:ring-ring/50 data-[dragging=true]:bg-accent/50\"\n        data-dragging={isDragging || undefined}\n        data-files={files.length > 0 || undefined}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload image file\"\n          className=\"sr-only\"\n        />\n        {files.length > 0 ? (\n          <div className=\"flex w-full flex-col gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <h3 className=\"truncate font-medium text-sm\">\n                Files ({files.length})\n              </h3>\n              <div className=\"flex gap-2\">\n                <Button onClick={openFileDialog} size=\"sm\" variant=\"outline\">\n                  <UploadIcon\n                    aria-hidden=\"true\"\n                    className=\"-ms-0.5 size-3.5 opacity-60\"\n                  />\n                  Add files\n                </Button>\n                <Button\n                  onClick={() => {\n                    // Clear all progress tracking\n                    setUploadProgress([]);\n                    clearFiles();\n                  }}\n                  size=\"sm\"\n                  variant=\"outline\"\n                >\n                  <Trash2Icon\n                    aria-hidden=\"true\"\n                    className=\"-ms-0.5 size-3.5 opacity-60\"\n                  />\n                  Remove all\n                </Button>\n              </div>\n            </div>\n\n            <div className=\"w-full space-y-2\">\n              {files.map((file) => {\n                // Find the upload progress for this file once to avoid repeated lookups\n                const fileProgress = uploadProgress.find(\n                  (p) => p.fileId === file.id,\n                );\n                const isUploading = fileProgress && !fileProgress.completed;\n\n                return (\n                  <div\n                    className=\"flex flex-col gap-1 rounded-lg border bg-background p-2 pe-3 transition-opacity duration-300\"\n                    data-uploading={isUploading || undefined}\n                    key={file.id}\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <div className=\"flex items-center gap-3 overflow-hidden in-data-[uploading=true]:opacity-50\">\n                        <div className=\"flex aspect-square size-10 shrink-0 items-center justify-center rounded border\">\n                          {getFileIcon(file)}\n                        </div>\n                        <div className=\"flex min-w-0 flex-col gap-0.5\">\n                          <p className=\"truncate font-medium text-[13px]\">\n                            {file.file instanceof File\n                              ? file.file.name\n                              : file.file.name}\n                          </p>\n                          <p className=\"text-muted-foreground text-xs\">\n                            {formatBytes(\n                              file.file instanceof File\n                                ? file.file.size\n                                : file.file.size,\n                            )}\n                          </p>\n                        </div>\n                      </div>\n                      <Button\n                        aria-label=\"Remove file\"\n                        className=\"-me-2 size-8 text-muted-foreground/80 hover:bg-transparent hover:text-foreground\"\n                        onClick={() => {\n                          handleFileRemoved(file.id);\n                          removeFile(file.id);\n                        }}\n                        size=\"icon\"\n                        variant=\"ghost\"\n                      >\n                        <XIcon aria-hidden=\"true\" className=\"size-4\" />\n                      </Button>\n                    </div>\n\n                    {/* Upload progress bar */}\n                    {fileProgress &&\n                      (() => {\n                        const progress = fileProgress.progress || 0;\n                        const completed = fileProgress.completed || false;\n\n                        if (completed) return null;\n\n                        return (\n                          <div className=\"mt-1 flex items-center gap-2\">\n                            <div className=\"h-1.5 w-full overflow-hidden rounded-full bg-gray-100\">\n                              <div\n                                className=\"h-full bg-primary transition-all duration-300 ease-out\"\n                                style={{ width: `${progress}%` }}\n                              />\n                            </div>\n                            <span className=\"w-10 text-muted-foreground text-xs tabular-nums\">\n                              {progress}%\n                            </span>\n                          </div>\n                        );\n                      })()}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center px-4 py-3 text-center\">\n            <div\n              aria-hidden=\"true\"\n              className=\"mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border bg-background\"\n            >\n              <ImageIcon className=\"size-4 opacity-60\" />\n            </div>\n            <p className=\"mb-1.5 font-medium text-sm\">Drop your files here</p>\n            <p className=\"text-muted-foreground text-xs\">\n              Max {maxFiles} files ∙ Up to {maxSizeMB}MB\n            </p>\n            <Button className=\"mt-4\" onClick={openFileDialog} variant=\"outline\">\n              <UploadIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n              Select images\n            </Button>\n          </div>\n        )}\n      </div>\n\n      {errors.length > 0 && (\n        <div\n          className=\"flex items-center gap-1 text-destructive text-xs\"\n          role=\"alert\"\n        >\n          <AlertCircleIcon className=\"size-3 shrink-0\" />\n          <span>{errors[0]}</span>\n        </div>\n      )}\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-center text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        With simulated progress track ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-554.tsx",
    "content": "\"use client\";\n\nimport {\n  ArrowLeftIcon,\n  CircleUserRoundIcon,\n  XIcon,\n  ZoomInIcon,\n  ZoomOutIcon,\n} from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFileUpload } from \"@/registry/default/hooks/use-file-upload\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/default/ui/dialog\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\n// Define type for pixel crop area\ntype Area = { x: number; y: number; width: number; height: number };\n\n// Helper function to create a cropped image blob\nconst createImage = (url: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener(\"load\", () => resolve(image));\n    image.addEventListener(\"error\", (error) => reject(error));\n    image.setAttribute(\"crossOrigin\", \"anonymous\"); // Needed for canvas Tainted check\n    image.src = url;\n  });\n\nasync function getCroppedImg(\n  imageSrc: string,\n  pixelCrop: Area,\n  outputWidth: number = pixelCrop.width, // Optional: specify output size\n  outputHeight: number = pixelCrop.height,\n): Promise<Blob | null> {\n  try {\n    const image = await createImage(imageSrc);\n    const canvas = document.createElement(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n\n    if (!ctx) {\n      return null;\n    }\n\n    // Set canvas size to desired output size\n    canvas.width = outputWidth;\n    canvas.height = outputHeight;\n\n    // Draw the cropped image onto the canvas\n    ctx.drawImage(\n      image,\n      pixelCrop.x,\n      pixelCrop.y,\n      pixelCrop.width,\n      pixelCrop.height,\n      0,\n      0,\n      outputWidth, // Draw onto the output size\n      outputHeight,\n    );\n\n    // Convert canvas to blob\n    return new Promise((resolve) => {\n      canvas.toBlob((blob) => {\n        resolve(blob);\n      }, \"image/jpeg\"); // Specify format and quality if needed\n    });\n  } catch (error) {\n    console.error(\"Error in getCroppedImg:\", error);\n    return null;\n  }\n}\n\nexport default function Component() {\n  const [\n    { files, isDragging },\n    {\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      openFileDialog,\n      removeFile,\n      getInputProps,\n    },\n  ] = useFileUpload({\n    accept: \"image/*\",\n  });\n\n  const previewUrl = files[0]?.preview || null;\n  const fileId = files[0]?.id;\n\n  const [finalImageUrl, setFinalImageUrl] = useState<string | null>(null);\n  const [isDialogOpen, setIsDialogOpen] = useState(false);\n\n  // Ref to track the previous file ID to detect new uploads\n  const previousFileIdRef = useRef<string | undefined | null>(null);\n\n  // State to store the desired crop area in pixels\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\n\n  // State for zoom level\n  const [zoom, setZoom] = useState(1);\n\n  // Callback for Cropper to provide crop data - Wrap with useCallback\n  const handleCropChange = useCallback((pixels: Area | null) => {\n    setCroppedAreaPixels(pixels);\n  }, []);\n\n  const handleApply = async () => {\n    // Check if we have the necessary data\n    if (!previewUrl || !fileId || !croppedAreaPixels) {\n      console.error(\"Missing data for apply:\", {\n        croppedAreaPixels,\n        fileId,\n        previewUrl,\n      });\n      // Remove file if apply is clicked without crop data?\n      if (fileId) {\n        removeFile(fileId);\n        setCroppedAreaPixels(null);\n      }\n      return;\n    }\n\n    try {\n      // 1. Get the cropped image blob using the helper\n      const croppedBlob = await getCroppedImg(previewUrl, croppedAreaPixels);\n\n      if (!croppedBlob) {\n        throw new Error(\"Failed to generate cropped image blob.\");\n      }\n\n      // 2. Create a NEW object URL from the cropped blob\n      const newFinalUrl = URL.createObjectURL(croppedBlob);\n\n      // 3. Revoke the OLD finalImageUrl if it exists\n      if (finalImageUrl) {\n        URL.revokeObjectURL(finalImageUrl);\n      }\n\n      // 4. Set the final avatar state to the NEW URL\n      setFinalImageUrl(newFinalUrl);\n\n      // 5. Close the dialog (don't remove the file yet)\n      setIsDialogOpen(false);\n    } catch (error) {\n      console.error(\"Error during apply:\", error);\n      // Close the dialog even if cropping fails\n      setIsDialogOpen(false);\n    }\n  };\n\n  const handleRemoveFinalImage = () => {\n    if (finalImageUrl) {\n      URL.revokeObjectURL(finalImageUrl);\n    }\n    setFinalImageUrl(null);\n  };\n\n  useEffect(() => {\n    const currentFinalUrl = finalImageUrl;\n    // Cleanup function\n    return () => {\n      if (currentFinalUrl?.startsWith(\"blob:\")) {\n        URL.revokeObjectURL(currentFinalUrl);\n      }\n    };\n  }, [finalImageUrl]);\n\n  // Effect to open dialog when a *new* file is ready\n  useEffect(() => {\n    // Check if fileId exists and is different from the previous one\n    if (fileId && fileId !== previousFileIdRef.current) {\n      setIsDialogOpen(true); // Open dialog for the new file\n      setCroppedAreaPixels(null); // Reset crop area for the new file\n      setZoom(1); // Reset zoom for the new file\n    }\n    // Update the ref to the current fileId for the next render\n    previousFileIdRef.current = fileId;\n  }, [fileId]); // Depend only on fileId\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"relative inline-flex\">\n        {/* Drop area - uses finalImageUrl */}\n        <button\n          aria-label={finalImageUrl ? \"Change image\" : \"Upload image\"}\n          className=\"relative flex size-16 items-center justify-center overflow-hidden rounded-full border border-input border-dashed outline-none transition-colors hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-disabled:pointer-events-none has-[img]:border-none has-disabled:opacity-50 data-[dragging=true]:bg-accent/50\"\n          data-dragging={isDragging || undefined}\n          onClick={openFileDialog}\n          onDragEnter={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDragOver={handleDragOver}\n          onDrop={handleDrop}\n          type=\"button\"\n        >\n          {finalImageUrl ? (\n            <img\n              alt=\"User avatar\"\n              className=\"size-full object-cover\"\n              height={64}\n              src={finalImageUrl}\n              style={{ objectFit: \"cover\" }}\n              width={64}\n            />\n          ) : (\n            <div aria-hidden=\"true\">\n              <CircleUserRoundIcon className=\"size-4 opacity-60\" />\n            </div>\n          )}\n        </button>\n        {/* Remove button - depends on finalImageUrl */}\n        {finalImageUrl && (\n          <Button\n            aria-label=\"Remove image\"\n            className=\"absolute -top-1 -right-1 size-6 rounded-full border-2 border-background shadow-none focus-visible:border-background\"\n            onClick={handleRemoveFinalImage}\n            size=\"icon\"\n          >\n            <XIcon className=\"size-3.5\" />\n          </Button>\n        )}\n        <input\n          {...getInputProps()}\n          aria-label=\"Upload image file\"\n          className=\"sr-only\"\n          tabIndex={-1}\n        />\n      </div>\n\n      {/* Cropper Dialog - Use isDialogOpen for open prop */}\n      <Dialog onOpenChange={setIsDialogOpen} open={isDialogOpen}>\n        <DialogContent className=\"gap-0 p-0 sm:max-w-140 *:[button]:hidden\">\n          <DialogDescription className=\"sr-only\">\n            Crop image dialog\n          </DialogDescription>\n          <DialogHeader className=\"contents space-y-0 text-left\">\n            <DialogTitle className=\"flex items-center justify-between border-b p-4 text-base\">\n              <div className=\"flex items-center gap-2\">\n                <Button\n                  aria-label=\"Cancel\"\n                  className=\"-my-1 opacity-60\"\n                  onClick={() => setIsDialogOpen(false)}\n                  size=\"icon\"\n                  type=\"button\"\n                  variant=\"ghost\"\n                >\n                  <ArrowLeftIcon aria-hidden=\"true\" />\n                </Button>\n                <span>Crop image</span>\n              </div>\n              <Button\n                autoFocus\n                className=\"-my-1\"\n                disabled={!previewUrl}\n                onClick={handleApply}\n              >\n                Apply\n              </Button>\n            </DialogTitle>\n          </DialogHeader>\n          {previewUrl && (\n            <Cropper\n              className=\"h-96 sm:h-120\"\n              image={previewUrl}\n              onCropChange={handleCropChange}\n              onZoomChange={setZoom}\n              zoom={zoom}\n            >\n              <CropperDescription />\n              <CropperImage />\n              <CropperCropArea />\n            </Cropper>\n          )}\n          <DialogFooter className=\"border-t px-4 py-6\">\n            <div className=\"mx-auto flex w-full max-w-80 items-center gap-4\">\n              <ZoomOutIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n              <Slider\n                aria-label=\"Zoom slider\"\n                defaultValue={[1]}\n                max={3}\n                min={1}\n                onValueChange={(value) => setZoom(value[0])}\n                step={0.1}\n                value={[zoom]}\n              />\n              <ZoomInIcon\n                aria-hidden=\"true\"\n                className=\"shrink-0 opacity-60\"\n                size={16}\n              />\n            </div>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Avatar{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/cosscom/coss/blob/main/apps/origin/docs/use-file-upload.md\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          uploader\n        </a>{\" \"}\n        with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          cropper\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-555.tsx",
    "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-01_bcxaic.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Basic cropper ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-556.tsx",
    "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        aspectRatio={16 / 9}\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-02_a2xwtd.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with aspect ratio 16:9 ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-557.tsx",
    "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-03_uym8r0.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea className=\"border-blue-500\" />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with custom crop area color ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-558.tsx",
    "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80 bg-black\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-04_jflxhw.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea className=\"shadow-[0_0_0_9999px_rgba(255,255,255,0.5)]\" />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with custom mask overlay ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-559.tsx",
    "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"aspect-square size-80\"\n        cropPadding={0}\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-05_evczb3.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea className=\"border-4 border-blue-500\" />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with full size crop area ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-56.tsx",
    "content": "\"use client\";\n\nimport { type Tag, TagInput } from \"emblor\";\nimport { useId, useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst tags = [\n  {\n    id: \"1\",\n    text: \"Sport\",\n  },\n  {\n    id: \"2\",\n    text: \"Coding\",\n  },\n  {\n    id: \"3\",\n    text: \"Travel\",\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [exampleTags, setExampleTags] = useState<Tag[]>(tags);\n  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with tags</Label>\n      <TagInput\n        activeTagIndex={activeTagIndex}\n        id={id}\n        inlineTags={false}\n        inputFieldPosition=\"top\"\n        placeholder=\"Add a tag\"\n        setActiveTagIndex={setActiveTagIndex}\n        setTags={(newTags) => {\n          setExampleTags(newTags);\n        }}\n        styleClasses={{\n          input:\n            \"rounded-md transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n          tag: {\n            body: \"relative h-7 bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7\",\n            closeButton:\n              \"absolute -inset-y-px -end-px p-0 rounded-s-none rounded-e-md flex size-7 transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground/80 hover:text-foreground\",\n          },\n          tagList: {\n            container: \"gap-1\",\n          },\n        }}\n        tags={exampleTags}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/JaleelB/emblor\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          emblor\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-560.tsx",
    "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-06_dduwky.jpg\"\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea className=\"rounded-full\" />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with full-rounded mask ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-561.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Component() {\n  const [zoom, setZoom] = useState(1);\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Cropper\n          className=\"h-80\"\n          image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-07_scsejv.jpg\"\n          onZoomChange={setZoom}\n          zoom={zoom}\n        >\n          <CropperDescription />\n          <CropperImage />\n          <CropperCropArea />\n        </Cropper>\n        <div className=\"mx-auto flex w-full max-w-80 items-center gap-1\">\n          <Slider\n            aria-label=\"Zoom slider\"\n            defaultValue={[1]}\n            max={3}\n            min={1}\n            onValueChange={(value) => setZoom(value[0])}\n            step={0.1}\n            value={[zoom]}\n          />\n          <output className=\"block w-10 shrink-0 text-right font-medium text-sm tabular-nums\">\n            {Number.parseFloat(zoom.toFixed(1))}x\n          </output>\n        </div>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with zoom slider ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-562.tsx",
    "content": "import {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\nexport default function Component() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Cropper\n        className=\"h-80\"\n        image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-08_wneftq.jpg\"\n        maxZoom={10}\n        minZoom={2}\n      >\n        <CropperDescription />\n        <CropperImage />\n        <CropperCropArea />\n      </Cropper>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with custom zoom limits ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-563.tsx",
    "content": "\"use client\";\n\nimport React from \"react\";\nimport {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\ntype Area = { x: number; y: number; width: number; height: number };\n\nexport default function Component() {\n  const [cropData, setCropData] = React.useState<Area | null>(null);\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Cropper\n          className=\"h-80\"\n          cropPadding={20}\n          image=\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-09_qskkln.jpg\"\n          onCropChange={setCropData}\n        >\n          <CropperDescription />\n          <CropperImage />\n          <CropperCropArea />\n        </Cropper>\n\n        {cropData && (\n          <pre className=\"overflow-auto rounded-md border bg-muted px-4 py-3 font-mono text-foreground/80 text-xs\">\n            <code>{JSON.stringify(cropData, null, 2)}</code>\n          </pre>\n        )}\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with crop data output ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-564.tsx",
    "content": "\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Cropper,\n  CropperCropArea,\n  CropperDescription,\n  CropperImage,\n} from \"@/registry/default/ui/cropper\";\n\n// Define type for pixel crop area\ntype Area = { x: number; y: number; width: number; height: number };\n\n// --- Start: Copied Helper Functions ---\nconst createImage = (url: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener(\"load\", () => resolve(image));\n    image.addEventListener(\"error\", (error) => reject(error));\n    image.setAttribute(\"crossOrigin\", \"anonymous\"); // Needed for canvas Tainted check\n    image.src = url;\n  });\n\nasync function getCroppedImg(\n  imageSrc: string,\n  pixelCrop: Area,\n  outputWidth: number = pixelCrop.width, // Optional: specify output size\n  outputHeight: number = pixelCrop.height,\n): Promise<Blob | null> {\n  try {\n    const image = await createImage(imageSrc);\n    const canvas = document.createElement(\"canvas\");\n    const ctx = canvas.getContext(\"2d\");\n\n    if (!ctx) {\n      return null;\n    }\n\n    // Set canvas size to desired output size\n    canvas.width = outputWidth;\n    canvas.height = outputHeight;\n\n    // Draw the cropped image onto the canvas\n    ctx.drawImage(\n      image,\n      pixelCrop.x,\n      pixelCrop.y,\n      pixelCrop.width,\n      pixelCrop.height,\n      0,\n      0,\n      outputWidth, // Draw onto the output size\n      outputHeight,\n    );\n\n    // Convert canvas to blob\n    return new Promise((resolve) => {\n      canvas.toBlob((blob) => {\n        resolve(blob);\n      }, \"image/jpeg\"); // Specify format and quality if needed\n    });\n  } catch (error) {\n    console.error(\"Error in getCroppedImg:\", error);\n    return null;\n  }\n}\n// --- End: Copied Helper Functions ---\n\nconst ORIGINAL_IMAGE_URL =\n  \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/cropper-10_k24zxk.jpg\";\n\nexport default function Component() {\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\n  const [croppedImageUrl, setCroppedImageUrl] = useState<string | null>(null);\n\n  // Callback to update crop area state\n  const handleCropChange = useCallback((pixels: Area | null) => {\n    setCroppedAreaPixels(pixels);\n  }, []);\n\n  // Function to handle the crop button click\n  const handleCrop = async () => {\n    if (!croppedAreaPixels) {\n      console.error(\"No crop area selected.\");\n      return;\n    }\n\n    try {\n      const croppedBlob = await getCroppedImg(\n        ORIGINAL_IMAGE_URL,\n        croppedAreaPixels,\n      );\n      if (!croppedBlob) {\n        throw new Error(\"Failed to generate cropped image blob.\");\n      }\n\n      // Create a new object URL\n      const newCroppedUrl = URL.createObjectURL(croppedBlob);\n\n      // Revoke the old URL if it exists\n      if (croppedImageUrl) {\n        URL.revokeObjectURL(croppedImageUrl);\n      }\n\n      // Set the new URL\n      setCroppedImageUrl(newCroppedUrl);\n    } catch (error) {\n      console.error(\"Error during cropping:\", error);\n      // Optionally: Clear the old image URL on error\n      if (croppedImageUrl) {\n        URL.revokeObjectURL(croppedImageUrl);\n      }\n      setCroppedImageUrl(null);\n    }\n  };\n\n  // Effect for cleaning up the object URL\n  useEffect(() => {\n    // This is the cleanup function that runs when the component unmounts\n    // or when croppedImageUrl changes before the next effect runs.\n    const currentUrl = croppedImageUrl;\n    return () => {\n      if (currentUrl?.startsWith(\"blob:\")) {\n        URL.revokeObjectURL(currentUrl);\n        console.log(\"Revoked URL:\", currentUrl); // Optional: for debugging\n      }\n    };\n  }, [croppedImageUrl]); // Dependency array ensures cleanup runs when URL changes\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div className=\"flex w-full flex-col gap-4 md:flex-row\">\n        <Cropper\n          className=\"h-64 md:flex-1\"\n          image={ORIGINAL_IMAGE_URL}\n          onCropChange={handleCropChange}\n        >\n          <CropperDescription />\n          <CropperImage />\n          <CropperCropArea />\n        </Cropper>\n        <div className=\"flex w-26 flex-col gap-4\">\n          <Button disabled={!croppedAreaPixels} onClick={handleCrop}>\n            Crop preview\n          </Button>\n          {/* Display Area */}\n          <div className=\"aspect-square w-full shrink-0 overflow-hidden rounded-lg border\">\n            {croppedImageUrl ? (\n              <img\n                alt=\"Cropped result\"\n                className=\"h-full w-full object-cover\"\n                src={croppedImageUrl}\n              />\n            ) : (\n              <div className=\"flex h-full w-full items-center justify-center bg-muted p-2 text-center text-muted-foreground/80 text-xs\">\n                Image preview\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Cropper with image preview ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/origin-space/image-cropper\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-565.tsx",
    "content": "\"use client\";\n\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem item={item} key={item.getId()}>\n              <TreeItemLabel />\n            </TreeItem>\n          );\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Basic tree with no extra features ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-566.tsx",
    "content": "\"use client\";\n\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          {tree.getItems().map((item) => {\n            return (\n              <TreeItem item={item} key={item.getId()}>\n                <TreeItemLabel className=\"relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10 before:bg-background\" />\n              </TreeItem>\n            );\n          })}\n        </Tree>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Basic tree with vertical lines ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-567.tsx",
    "content": "\"use client\";\n\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          {tree.getItems().map((item) => {\n            return (\n              <TreeItem item={item} key={item.getId()}>\n                <TreeItemLabel className=\"relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10 before:bg-background\">\n                  <span className=\"flex items-center gap-2\">\n                    {item.isFolder() ? (\n                      item.isExpanded() ? (\n                        <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      ) : (\n                        <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      )\n                    ) : (\n                      <FileIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    )}\n                    {item.getItemName()}\n                  </span>\n                </TreeItemLabel>\n              </TreeItem>\n            );\n          })}\n        </Tree>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Basic tree with icons ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-568.tsx",
    "content": "\"use client\";\n\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          {tree.getItems().map((item) => {\n            return (\n              <TreeItem item={item} key={item.getId()}>\n                <TreeItemLabel className=\"relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10 before:bg-background\">\n                  <span className=\"-order-1 flex flex-1 items-center gap-2\">\n                    {item.isFolder() ? (\n                      item.isExpanded() ? (\n                        <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      ) : (\n                        <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      )\n                    ) : (\n                      <FileIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    )}\n                    {item.getItemName()}\n                  </span>\n                </TreeItemLabel>\n              </TreeItem>\n            );\n          })}\n        </Tree>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Basic tree with caret icon on the right ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-569.tsx",
    "content": "\"use client\";\n\nimport {\n  createOnDropHandler,\n  dragAndDropFeature,\n  hotkeysCoreFeature,\n  keyboardDragAndDropFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { AssistiveTreeDescription, useTree } from \"@headless-tree/react\";\nimport { FolderIcon, FolderOpenIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport {\n  Tree,\n  TreeDragLine,\n  TreeItem,\n  TreeItemLabel,\n} from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst initialItems: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const [items, setItems] = useState(initialItems);\n\n  const tree = useTree<Item>({\n    canReorder: true,\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      hotkeysCoreFeature,\n      dragAndDropFeature,\n      keyboardDragAndDropFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n      selectedItems: [\"components\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    onDrop: createOnDropHandler((parentItem, newChildrenIds) => {\n      setItems((prevItems) => ({\n        ...prevItems,\n        [parentItem.getId()]: {\n          ...prevItems[parentItem.getId()],\n          children: newChildrenIds,\n        },\n      }));\n    }),\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        <AssistiveTreeDescription tree={tree} />\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem item={item} key={item.getId()}>\n              <TreeItemLabel>\n                <span className=\"flex items-center gap-2\">\n                  {item.isFolder() &&\n                    (item.isExpanded() ? (\n                      <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ) : (\n                      <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ))}\n                  {item.getItemName()}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          );\n        })}\n        <TreeDragLine />\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Tree with multi-select and drag and drop ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-57.tsx",
    "content": "\"use client\";\n\nimport { type Tag, TagInput } from \"emblor\";\nimport { useId, useState } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst tags = [\n  {\n    id: \"1\",\n    text: \"Red\",\n  },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [exampleTags, setExampleTags] = useState<Tag[]>(tags);\n  const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Input with inner tags</Label>\n      <TagInput\n        activeTagIndex={activeTagIndex}\n        id={id}\n        placeholder=\"Add a tag\"\n        setActiveTagIndex={setActiveTagIndex}\n        setTags={(newTags) => {\n          setExampleTags(newTags);\n        }}\n        styleClasses={{\n          inlineTagsContainer:\n            \"border-input rounded-md bg-background shadow-xs transition-[color,box-shadow] focus-within:border-ring outline-none focus-within:ring-[3px] focus-within:ring-ring/50 p-1 gap-1\",\n          input: \"w-full min-w-[80px] shadow-none px-2 h-7\",\n          tag: {\n            body: \"h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7\",\n            closeButton:\n              \"absolute -inset-y-px -end-px p-0 rounded-e-md flex size-7 transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground/80 hover:text-foreground\",\n          },\n        }}\n        tags={exampleTags}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/JaleelB/emblor\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          emblor\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-570.tsx",
    "content": "\"use client\";\n\nimport {\n  hotkeysCoreFeature,\n  renamingFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\n// Initial data\nconst initialItems: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const [items, setItems] = useState(initialItems);\n\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      hotkeysCoreFeature,\n      renamingFeature,\n      selectionFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    onRename: (item, newName) => {\n      // Update the item name in our state\n      const itemId = item.getId();\n      setItems((prevItems) => ({\n        ...prevItems,\n        [itemId]: {\n          ...prevItems[itemId],\n          name: newName,\n        },\n      }));\n    },\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem item={item} key={item.getId()}>\n              <TreeItemLabel>\n                <span className=\"flex items-center gap-2\">\n                  {item.isFolder() ? (\n                    item.isExpanded() ? (\n                      <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ) : (\n                      <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    )\n                  ) : (\n                    <FileIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                  )}\n                  {item.isRenaming() ? (\n                    <Input\n                      {...item.getRenameInputProps()}\n                      autoFocus\n                      className=\"-my-0.5 h-6 px-1\"\n                    />\n                  ) : (\n                    item.getItemName()\n                  )}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          );\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Tree with renaming (press F2 to rename) ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-571.tsx",
    "content": "\"use client\";\n\nimport {\n  expandAllFeature,\n  hotkeysCoreFeature,\n  searchFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n  type TreeState,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { FolderIcon, FolderOpenIcon, SearchIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  // Store the initial expanded items to reset when search is cleared\n  const initialExpandedItems = [\"engineering\", \"frontend\", \"design-system\"];\n  const [state, setState] = useState<Partial<TreeState<Item>>>({});\n\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      hotkeysCoreFeature,\n      selectionFeature,\n      searchFeature,\n      expandAllFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: initialExpandedItems,\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n    setState,\n    state,\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:nth-2:grow\">\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          {...{\n            ...tree.getSearchInputElementProps(),\n            onChange: (e) => {\n              // First call the original onChange handler from getSearchInputElementProps\n              const originalProps = tree.getSearchInputElementProps();\n              if (originalProps.onChange) {\n                originalProps.onChange(e);\n              }\n\n              // Then handle our custom logic\n              const value = e.target.value;\n\n              if (value.length > 0) {\n                // If input has at least one character, expand all items\n                tree.expandAll();\n              } else {\n                // If input is cleared, reset to initial expanded state\n                setState((prevState) => {\n                  return {\n                    ...prevState,\n                    expandedItems: initialExpandedItems,\n                  };\n                });\n              }\n            },\n          }}\n          placeholder=\"Quick search...\"\n          type=\"search\"\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon aria-hidden=\"true\" className=\"size-4\" />\n        </div>\n      </div>\n\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem item={item} key={item.getId()}>\n              <TreeItemLabel>\n                <span className=\"flex items-center gap-2\">\n                  {item.isFolder() &&\n                    (item.isExpanded() ? (\n                      <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ) : (\n                      <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ))}\n                  {item.getItemName()}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          );\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Tree with search highlight ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-572.tsx",
    "content": "\"use client\";\n\nimport {\n  expandAllFeature,\n  hotkeysCoreFeature,\n  searchFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n  type TreeState,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport {\n  CircleXIcon,\n  FilterIcon,\n  FolderIcon,\n  FolderOpenIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  // Store the initial expanded items to reset when search is cleared\n  const initialExpandedItems = [\"engineering\", \"frontend\", \"design-system\"];\n  const [state, setState] = useState<Partial<TreeState<Item>>>({});\n  const [searchValue, setSearchValue] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      hotkeysCoreFeature,\n      selectionFeature,\n      searchFeature,\n      expandAllFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: initialExpandedItems,\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n    setState,\n    state,\n  });\n\n  // Handle clearing the search\n  const handleClearSearch = () => {\n    setSearchValue(\"\");\n\n    // Manually trigger the tree's search onChange with an empty value\n    // to ensure item.isMatchingSearch() is correctly updated.\n    const searchProps = tree.getSearchInputElementProps();\n    if (searchProps.onChange) {\n      const syntheticEvent = {\n        target: { value: \"\" },\n      } as React.ChangeEvent<HTMLInputElement>; // Cast to the expected event type\n      searchProps.onChange(syntheticEvent);\n    }\n\n    // Reset tree state to initial expanded items\n    setState((prevState) => ({\n      ...prevState,\n      expandedItems: initialExpandedItems,\n    }));\n\n    // Clear custom filtered items\n    setFilteredItems([]);\n\n    if (inputRef.current) {\n      inputRef.current.focus();\n      // Also clear the internal search input\n      inputRef.current.value = \"\";\n    }\n  };\n\n  // Keep track of filtered items separately from the tree's internal search state\n  const [filteredItems, setFilteredItems] = useState<string[]>([]);\n\n  // This function determines if an item should be visible based on our custom filtering\n  const shouldShowItem = (itemId: string) => {\n    if (!searchValue || searchValue.length === 0) return true;\n    return filteredItems.includes(itemId);\n  };\n\n  // Update filtered items when search value changes\n  useEffect(() => {\n    if (!searchValue || searchValue.length === 0) {\n      setFilteredItems([]);\n      return;\n    }\n\n    // Get all items\n    const allItems = tree.getItems();\n\n    // First, find direct matches\n    const directMatches = allItems\n      .filter((item) => {\n        const name = item.getItemName().toLowerCase();\n        return name.includes(searchValue.toLowerCase());\n      })\n      .map((item) => item.getId());\n\n    // Then, find all parent IDs of matching items\n    const parentIds = new Set<string>();\n    for (const matchId of directMatches) {\n      let item = tree.getItems().find((i) => i.getId() === matchId);\n\n      while (item?.getParent?.()) {\n        const parent = item.getParent();\n        if (parent) {\n          parentIds.add(parent.getId());\n          item = parent;\n        } else {\n          break;\n        }\n      }\n    }\n\n    // Find all children of matching items\n    const childrenIds = new Set<string>();\n    for (const matchId of directMatches) {\n      const item = tree.getItems().find((i) => i.getId() === matchId);\n\n      if (item?.isFolder()) {\n        const getDescendants = (itemId: string) => {\n          const children = items[itemId]?.children || [];\n\n          for (const childId of children) {\n            childrenIds.add(childId);\n\n            if (items[childId]?.children?.length) {\n              getDescendants(childId);\n            }\n          }\n        };\n\n        getDescendants(item.getId());\n      }\n    }\n\n    // Combine direct matches, parents, and children\n    setFilteredItems([\n      ...directMatches,\n      ...Array.from(parentIds),\n      ...Array.from(childrenIds),\n    ]);\n\n    // Keep all folders expanded during search to ensure all matches are visible\n    // Store current expanded state first\n    const currentExpandedItems = tree.getState().expandedItems || [];\n\n    // Get all folder IDs that need to be expanded to show matches\n    const folderIdsToExpand = allItems\n      .filter((item) => item.isFolder())\n      .map((item) => item.getId());\n\n    // Update expanded items in the tree state\n    setState((prevState) => ({\n      ...prevState,\n      expandedItems: [\n        ...new Set([...currentExpandedItems, ...folderIdsToExpand]),\n      ],\n    }));\n  }, [searchValue, tree]);\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:nth-2:grow\">\n      <div className=\"relative\">\n        <Input\n          className=\"peer ps-9\"\n          onBlur={(e) => {\n            // Prevent default blur behavior\n            e.preventDefault();\n\n            // Re-apply the search to ensure it stays active\n            if (searchValue && searchValue.length > 0) {\n              const searchProps = tree.getSearchInputElementProps();\n              if (searchProps.onChange) {\n                const syntheticEvent = {\n                  target: { value: searchValue },\n                } as React.ChangeEvent<HTMLInputElement>;\n                searchProps.onChange(syntheticEvent);\n              }\n            }\n          }}\n          onChange={(e) => {\n            const value = e.target.value;\n            setSearchValue(value);\n\n            // Apply the search to the tree's internal state as well\n            const searchProps = tree.getSearchInputElementProps();\n            if (searchProps.onChange) {\n              searchProps.onChange(e);\n            }\n\n            if (value.length > 0) {\n              // If input has at least one character, expand all items\n              tree.expandAll();\n            } else {\n              // If input is cleared, reset to initial expanded state\n              setState((prevState) => ({\n                ...prevState,\n                expandedItems: initialExpandedItems,\n              }));\n              setFilteredItems([]);\n            }\n          }}\n          placeholder=\"Filter items...\"\n          // Prevent the internal search from being cleared on blur\n          ref={inputRef}\n          type=\"search\"\n          value={searchValue}\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <FilterIcon aria-hidden=\"true\" className=\"size-4\" />\n        </div>\n        {searchValue && (\n          <button\n            aria-label=\"Clear search\"\n            className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            onClick={handleClearSearch}\n            type=\"button\"\n          >\n            <CircleXIcon aria-hidden=\"true\" className=\"size-4\" />\n          </button>\n        )}\n      </div>\n\n      <Tree indent={indent} tree={tree}>\n        {searchValue && filteredItems.length === 0 ? (\n          <p className=\"px-3 py-4 text-center text-sm\">\n            No items found for \"{searchValue}\"\n          </p>\n        ) : (\n          tree.getItems().map((item) => {\n            const isVisible = shouldShowItem(item.getId());\n\n            return (\n              <TreeItem\n                className=\"data-[visible=false]:hidden\"\n                data-visible={isVisible || !searchValue}\n                item={item}\n                key={item.getId()}\n              >\n                <TreeItemLabel>\n                  <span className=\"flex items-center gap-2\">\n                    {item.isFolder() &&\n                      (item.isExpanded() ? (\n                        <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      ) : (\n                        <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      ))}\n                    {item.getItemName()}\n                  </span>\n                </TreeItemLabel>\n              </TreeItem>\n            );\n          })\n        )}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Tree with filtering ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-573.tsx",
    "content": "\"use client\";\n\nimport {\n  type FeatureImplementation,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { FolderIcon, FolderOpenIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nconst doubleClickExpandFeature: FeatureImplementation = {\n  itemInstance: {\n    getProps: ({ tree, item, prev }) => ({\n      ...prev?.(),\n      onClick: (e: React.MouseEvent) => {\n        if (e.shiftKey) {\n          item.selectUpTo(e.ctrlKey || e.metaKey);\n        } else if (e.ctrlKey || e.metaKey) {\n          item.toggleSelect();\n        } else {\n          tree.setSelectedItems([item.getItemMeta().itemId]);\n        }\n\n        item.setFocused();\n      },\n      onDoubleClick: (_e: React.MouseEvent) => {\n        item.primaryAction();\n\n        if (!item.isFolder()) {\n          return;\n        }\n\n        if (item.isExpanded()) {\n          item.collapse();\n        } else {\n          item.expand();\n        }\n      },\n    }),\n  },\n};\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      hotkeysCoreFeature,\n      doubleClickExpandFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n      selectedItems: [\"components\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem item={item} key={item.getId()}>\n              <TreeItemLabel>\n                <span className=\"flex items-center gap-2\">\n                  {item.isFolder() &&\n                    (item.isExpanded() ? (\n                      <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ) : (\n                      <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ))}\n                  {item.getItemName()}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          );\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Tree with items expandable on double click ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-574.tsx",
    "content": "\"use client\";\n\nimport {\n  expandAllFeature,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport {\n  FolderIcon,\n  FolderOpenIcon,\n  ListCollapseIcon,\n  ListTreeIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      hotkeysCoreFeature,\n      expandAllFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n      selectedItems: [\"components\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:nth-2:grow\">\n      <div className=\"flex items-center gap-2\">\n        <Button onClick={() => tree.expandAll()} size=\"sm\" variant=\"outline\">\n          <ListTreeIcon\n            aria-hidden=\"true\"\n            className=\"-ms-1 opacity-60\"\n            size={16}\n          />\n          Expand all\n        </Button>\n        <Button onClick={tree.collapseAll} size=\"sm\" variant=\"outline\">\n          <ListCollapseIcon\n            aria-hidden=\"true\"\n            className=\"-ms-1 opacity-60\"\n            size={16}\n          />\n          Collapse all\n        </Button>\n      </div>\n\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem item={item} key={item.getId()}>\n              <TreeItemLabel>\n                <span className=\"flex items-center gap-2\">\n                  {item.isFolder() &&\n                    (item.isExpanded() ? (\n                      <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ) : (\n                      <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                    ))}\n                  {item.getItemName()}\n                  {item.isFolder() && (\n                    <span className=\"-ms-1 text-muted-foreground\">\n                      {`(${item.getChildren().length})`}\n                    </span>\n                  )}\n                </span>\n              </TreeItemLabel>\n            </TreeItem>\n          );\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Tree with expand/collapse all buttons ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com/\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-575.tsx",
    "content": "\"use client\";\n\nimport {\n  createOnDropHandler,\n  dragAndDropFeature,\n  hotkeysCoreFeature,\n  keyboardDragAndDropFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { AssistiveTreeDescription, useTree } from \"@headless-tree/react\";\nimport {\n  RiBracesLine,\n  RiCodeSSlashLine,\n  RiFileLine,\n  RiFileTextLine,\n  RiImageLine,\n  RiReactjsLine,\n} from \"@remixicon/react\";\nimport { useState } from \"react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n  fileExtension?: string;\n}\n\nconst initialItems: Record<string, Item> = {\n  app: {\n    children: [\"app/layout.tsx\", \"app/page.tsx\", \"app/(dashboard)\", \"app/api\"],\n    name: \"app\",\n  },\n  \"app/(dashboard)\": {\n    children: [\"app/(dashboard)/dashboard\"],\n    name: \"(dashboard)\",\n  },\n  \"app/(dashboard)/dashboard\": {\n    children: [\"app/(dashboard)/dashboard/page.tsx\"],\n    name: \"dashboard\",\n  },\n  \"app/(dashboard)/dashboard/page.tsx\": {\n    fileExtension: \"tsx\",\n    name: \"page.tsx\",\n  },\n  \"app/api\": { children: [\"app/api/hello\"], name: \"api\" },\n  \"app/api/hello\": { children: [\"app/api/hello/route.ts\"], name: \"hello\" },\n  \"app/api/hello/route.ts\": { fileExtension: \"ts\", name: \"route.ts\" },\n  \"app/layout.tsx\": { fileExtension: \"tsx\", name: \"layout.tsx\" },\n  \"app/page.tsx\": { fileExtension: \"tsx\", name: \"page.tsx\" },\n  components: {\n    children: [\"components/button.tsx\", \"components/card.tsx\"],\n    name: \"components\",\n  },\n  \"components/button.tsx\": { fileExtension: \"tsx\", name: \"button.tsx\" },\n  \"components/card.tsx\": { fileExtension: \"tsx\", name: \"card.tsx\" },\n  lib: { children: [\"lib/utils.ts\"], name: \"lib\" },\n  \"lib/utils.ts\": { fileExtension: \"ts\", name: \"utils.ts\" },\n  \"next.config.mjs\": { fileExtension: \"mjs\", name: \"next.config.mjs\" },\n  \"package.json\": { fileExtension: \"json\", name: \"package.json\" },\n  public: {\n    children: [\"public/favicon.ico\", \"public/vercel.svg\"],\n    name: \"public\",\n  },\n  \"public/favicon.ico\": { fileExtension: \"ico\", name: \"favicon.ico\" },\n  \"public/vercel.svg\": { fileExtension: \"svg\", name: \"vercel.svg\" },\n  \"README.md\": { fileExtension: \"md\", name: \"README.md\" },\n  root: {\n    children: [\n      \"app\",\n      \"components\",\n      \"lib\",\n      \"public\",\n      \"package.json\",\n      \"tailwind.config.ts\",\n      \"tsconfig.json\",\n      \"next.config.mjs\",\n      \"README.md\",\n    ],\n    name: \"Project Root\",\n  },\n  \"tailwind.config.ts\": { fileExtension: \"ts\", name: \"tailwind.config.ts\" },\n  \"tsconfig.json\": { fileExtension: \"json\", name: \"tsconfig.json\" },\n};\n\n// Helper function to get icon based on file extension\nfunction getFileIcon(extension: string | undefined, className: string) {\n  switch (extension) {\n    case \"tsx\":\n    case \"jsx\":\n      return <RiReactjsLine className={className} />;\n    case \"ts\":\n    case \"js\":\n    case \"mjs\":\n      return <RiCodeSSlashLine className={className} />;\n    case \"json\":\n      return <RiBracesLine className={className} />;\n    case \"svg\":\n    case \"ico\":\n    case \"png\":\n    case \"jpg\":\n      return <RiImageLine className={className} />;\n    case \"md\":\n      return <RiFileTextLine className={className} />;\n    default:\n      return <RiFileLine className={className} />;\n  }\n}\n\nconst indent = 20;\n\nexport default function Component() {\n  const [items, setItems] = useState(initialItems);\n\n  const tree = useTree<Item>({\n    canReorder: false,\n    dataLoader: {\n      getChildren: (itemId) => items[itemId]?.children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      hotkeysCoreFeature,\n      dragAndDropFeature,\n      keyboardDragAndDropFeature,\n    ],\n    getItemName: (item) => item.getItemData()?.name ?? \"Unknown\",\n    indent,\n    initialState: {\n      expandedItems: [\"app\", \"app/(dashboard)\", \"app/(dashboard)/dashboard\"],\n      selectedItems: [\"components\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    onDrop: createOnDropHandler((parentItem, newChildrenIds) => {\n      setItems((prevItems) => {\n        // Sort the children alphabetically\n        const sortedChildren = [...newChildrenIds].sort((a, b) => {\n          const itemA = prevItems[a];\n          const itemB = prevItems[b];\n\n          // First sort folders before files\n          const isAFolder = (itemA?.children?.length ?? 0) > 0;\n          const isBFolder = (itemB?.children?.length ?? 0) > 0;\n\n          if (isAFolder && !isBFolder) return -1;\n          if (!isAFolder && isBFolder) return 1;\n\n          // Then sort alphabetically by name\n          return (itemA?.name ?? \"\").localeCompare(itemB?.name ?? \"\");\n        });\n\n        return {\n          ...prevItems,\n          [parentItem.getId()]: {\n            ...prevItems[parentItem.getId()],\n            children: sortedChildren,\n          },\n        };\n      });\n    }),\n    rootItemId: \"root\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:-ms-1 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          <AssistiveTreeDescription tree={tree} />\n          {tree.getItems().map((item) => {\n            return (\n              <TreeItem className=\"pb-0!\" item={item} key={item.getId()}>\n                <TreeItemLabel className=\"rounded-none py-1\">\n                  <span className=\"flex items-center gap-2\">\n                    {!item.isFolder() &&\n                      getFileIcon(\n                        item.getItemData()?.fileExtension,\n                        \"text-muted-foreground pointer-events-none size-4\",\n                      )}\n                    {item.getItemName()}\n                  </span>\n                </TreeItemLabel>\n              </TreeItem>\n            );\n          })}\n        </Tree>\n      </div>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        File editor with drag and drop ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-576.tsx",
    "content": "\"use client\";\n\nimport { hotkeysCoreFeature, syncDataLoaderFeature } from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  href?: string;\n  children?: string[];\n  current?: boolean;\n}\n\nconst items: Record<string, Item> = {\n  advanced: { href: \"#\", name: \"Advanced Usage\" },\n  api: { children: [\"endpoints\", \"models\"], name: \"API Reference\" },\n  endpoints: { href: \"#\", name: \"Endpoints\" },\n  examples: { href: \"#\", name: \"Code Examples\" },\n  faq: { href: \"#\", name: \"FAQ\" },\n  \"getting-started\": {\n    children: [\"installation\", \"setup\"],\n    name: \"Getting Started\",\n  },\n  guides: { children: [\"getting-started\", \"advanced\"], name: \"User Guides\" },\n  installation: { current: true, href: \"#\", name: \"Installation\" },\n  main: { children: [\"guides\", \"api\", \"resources\"], name: \"Documentation\" },\n  models: { href: \"#\", name: \"Data Models\" },\n  resources: { children: [\"examples\", \"faq\"], name: \"Resources\" },\n  setup: { href: \"#\", name: \"Configuration\" },\n};\n\nconst indent = 20;\n\n// Find the path from root to the current item\nfunction findPathToCurrent(\n  items: Record<string, Item>,\n  rootId: string,\n): string[] {\n  const path: string[] = [];\n\n  function findPath(itemId: string): boolean {\n    const item = items[itemId];\n    if (!item) return false;\n\n    // If this is the current item, we found the path\n    if (item.current) {\n      path.unshift(itemId);\n      return true;\n    }\n\n    // If this item has children, search them\n    if (item.children?.length) {\n      for (const childId of item.children) {\n        if (findPath(childId)) {\n          // If we found the path in this branch, add this item to the path\n          path.unshift(itemId);\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }\n\n  findPath(rootId);\n  return path;\n}\n\n// Get all parent IDs that need to be expanded\nconst pathToCurrent = findPathToCurrent(items, \"main\");\n// Remove the current item from the path if it's a leaf node\nconst expandedItems = pathToCurrent.filter((id) => items[id].children?.length);\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [syncDataLoaderFeature, hotkeysCoreFeature],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      expandedItems,\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"main\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <TreeItem\n              asChild={!!item.getItemData()?.href}\n              item={item}\n              key={item.getId()}\n            >\n              {item.getItemData()?.href ? (\n                <a\n                  data-current={item.getItemData().current}\n                  href={item.getItemData().href}\n                >\n                  <TreeItemLabel className=\"in-data-[current=true]:bg-accent in-data-[current=true]:text-accent-foreground\" />\n                </a>\n              ) : (\n                <TreeItemLabel />\n              )}\n            </TreeItem>\n          );\n        })}\n      </Tree>\n\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Menu navigation tree ∙{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://headless-tree.lukasbach.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          API\n        </a>\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-577.tsx",
    "content": "import Logo from \"@/registry/default/components/navbar-components/logo\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { active: true, href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" },\n];\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, _index) => (\n                    <NavigationMenuItem className=\"w-full\" key={link.label}>\n                      <NavigationMenuLink\n                        active={link.active}\n                        className=\"py-1.5\"\n                        href={link.href}\n                      >\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n            {/* Navigation menu */}\n            <NavigationMenu className=\"max-md:hidden\">\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link, _index) => (\n                  <NavigationMenuItem key={link.label}>\n                    <NavigationMenuLink\n                      active={link.active}\n                      className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                      href={link.href}\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          <Button asChild className=\"text-sm\" size=\"sm\" variant=\"ghost\">\n            <a href=\"#\">Sign In</a>\n          </Button>\n          <Button asChild className=\"text-sm\" size=\"sm\">\n            <a href=\"#\">Get Started</a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-578.tsx",
    "content": "import { BookOpenIcon, InfoIcon, LifeBuoyIcon } from \"lucide-react\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\" },\n  {\n    items: [\n      {\n        description: \"Browse all components in the library.\",\n        href: \"#\",\n        label: \"Components\",\n      },\n      {\n        description: \"Learn how to use the library.\",\n        href: \"#\",\n        label: \"Documentation\",\n      },\n      {\n        description: \"Pre-built layouts for common use cases.\",\n        href: \"#\",\n        label: \"Templates\",\n      },\n    ],\n    label: \"Features\",\n    submenu: true,\n    type: \"description\",\n  },\n  {\n    items: [\n      { href: \"#\", label: \"Product A\" },\n      { href: \"#\", label: \"Product B\" },\n      { href: \"#\", label: \"Product C\" },\n      { href: \"#\", label: \"Product D\" },\n    ],\n    label: \"Pricing\",\n    submenu: true,\n    type: \"simple\",\n  },\n  {\n    items: [\n      { href: \"#\", icon: \"BookOpenIcon\", label: \"Getting Started\" },\n      { href: \"#\", icon: \"LifeBuoyIcon\", label: \"Tutorials\" },\n      { href: \"#\", icon: \"InfoIcon\", label: \"About Us\" },\n    ],\n    label: \"About\",\n    submenu: true,\n    type: \"icon\",\n  },\n];\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-64 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => (\n                    <NavigationMenuItem className=\"w-full\" key={link.label}>\n                      {link.submenu ? (\n                        <>\n                          <div className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\">\n                            {link.label}\n                          </div>\n                          <ul>\n                            {link.items.map((item, _itemIndex) => (\n                              <li key={item.label}>\n                                <NavigationMenuLink\n                                  className=\"py-1.5\"\n                                  href={item.href}\n                                >\n                                  {item.label}\n                                </NavigationMenuLink>\n                              </li>\n                            ))}\n                          </ul>\n                        </>\n                      ) : (\n                        <NavigationMenuLink className=\"py-1.5\" href={link.href}>\n                          {link.label}\n                        </NavigationMenuLink>\n                      )}\n                      {/* Add separator between different types of items */}\n                      {index < navigationLinks.length - 1 &&\n                        // Show separator if:\n                        // 1. One is submenu and one is simple link OR\n                        // 2. Both are submenus but with different types\n                        ((!link.submenu &&\n                          navigationLinks[index + 1].submenu) ||\n                          (link.submenu &&\n                            !navigationLinks[index + 1].submenu) ||\n                          (link.submenu &&\n                            navigationLinks[index + 1].submenu &&\n                            link.type !== navigationLinks[index + 1].type)) && (\n                          <div\n                            aria-orientation=\"horizontal\"\n                            className=\"-mx-1 my-1 h-px w-full bg-border\"\n                            role=\"separator\"\n                            tabIndex={-1}\n                          />\n                        )}\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n            {/* Navigation menu */}\n            <NavigationMenu className=\"max-md:hidden\" viewport={false}>\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link) => (\n                  <NavigationMenuItem key={link.label}>\n                    {link.submenu ? (\n                      <>\n                        <NavigationMenuTrigger className=\"bg-transparent px-2 py-1.5 font-medium text-muted-foreground hover:text-primary *:[svg]:-me-0.5 *:[svg]:size-3.5\">\n                          {link.label}\n                        </NavigationMenuTrigger>\n                        <NavigationMenuContent className=\"data-[motion=from-end]:slide-in-from-right-16! data-[motion=from-start]:slide-in-from-left-16! data-[motion=to-end]:slide-out-to-right-16! data-[motion=to-start]:slide-out-to-left-16! z-50 p-1\">\n                          <ul\n                            className={cn(\n                              link.type === \"description\"\n                                ? \"min-w-64\"\n                                : \"min-w-48\",\n                            )}\n                          >\n                            {link.items.map((item) => (\n                              <li key={item.label}>\n                                <NavigationMenuLink\n                                  className=\"py-1.5\"\n                                  href={item.href}\n                                >\n                                  {/* Display icon if present */}\n                                  {link.type === \"icon\" && \"icon\" in item && (\n                                    <div className=\"flex items-center gap-2\">\n                                      {item.icon === \"BookOpenIcon\" && (\n                                        <BookOpenIcon\n                                          aria-hidden=\"true\"\n                                          className=\"text-foreground opacity-60\"\n                                          size={16}\n                                        />\n                                      )}\n                                      {item.icon === \"LifeBuoyIcon\" && (\n                                        <LifeBuoyIcon\n                                          aria-hidden=\"true\"\n                                          className=\"text-foreground opacity-60\"\n                                          size={16}\n                                        />\n                                      )}\n                                      {item.icon === \"InfoIcon\" && (\n                                        <InfoIcon\n                                          aria-hidden=\"true\"\n                                          className=\"text-foreground opacity-60\"\n                                          size={16}\n                                        />\n                                      )}\n                                      <span>{item.label}</span>\n                                    </div>\n                                  )}\n\n                                  {/* Display label with description if present */}\n                                  {link.type === \"description\" &&\n                                  \"description\" in item ? (\n                                    <div className=\"space-y-1\">\n                                      <div className=\"font-medium\">\n                                        {item.label}\n                                      </div>\n                                      <p className=\"line-clamp-2 text-muted-foreground text-xs\">\n                                        {item.description}\n                                      </p>\n                                    </div>\n                                  ) : (\n                                    // Display simple label if not icon or description type\n                                    !link.type ||\n                                    (link.type !== \"icon\" &&\n                                      link.type !== \"description\" && (\n                                        <span>{item.label}</span>\n                                      ))\n                                  )}\n                                </NavigationMenuLink>\n                              </li>\n                            ))}\n                          </ul>\n                        </NavigationMenuContent>\n                      </>\n                    ) : (\n                      <NavigationMenuLink\n                        className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                        href={link.href}\n                      >\n                        {link.label}\n                      </NavigationMenuLink>\n                    )}\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          <Button asChild className=\"text-sm\" size=\"sm\" variant=\"ghost\">\n            <a href=\"#\">Sign In</a>\n          </Button>\n          <Button asChild className=\"text-sm\" size=\"sm\">\n            <a href=\"#\">Get Started</a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-579.tsx",
    "content": "import Logo from \"@/registry/default/components/navbar-components/logo\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { active: true, href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" },\n];\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex gap-2\">\n          <div className=\"flex items-center md:hidden\">\n            {/* Mobile menu trigger */}\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button className=\"group size-8\" size=\"icon\" variant=\"ghost\">\n                  <svg\n                    className=\"pointer-events-none\"\n                    fill=\"none\"\n                    height={16}\n                    stroke=\"currentColor\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth=\"2\"\n                    viewBox=\"0 0 24 24\"\n                    width={16}\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                      d=\"M4 12L20 12\"\n                    />\n                    <path\n                      className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                      d=\"M4 12H20\"\n                    />\n                    <path\n                      className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                      d=\"M4 12H20\"\n                    />\n                  </svg>\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n                <NavigationMenu className=\"max-w-none *:w-full\">\n                  <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                    {navigationLinks.map((link, index) => (\n                      <NavigationMenuItem\n                        className=\"w-full\"\n                        key={String(index)}\n                      >\n                        <NavigationMenuLink\n                          className=\"py-1.5\"\n                          data-active={link.active ? \"\" : undefined}\n                          href={link.href}\n                        >\n                          {link.label}\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    ))}\n                  </NavigationMenuList>\n                </NavigationMenu>\n              </PopoverContent>\n            </Popover>\n          </div>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n            {/* Navigation menu */}\n            <NavigationMenu className=\"h-full *:h-full max-md:hidden\">\n              <NavigationMenuList className=\"h-full gap-2\">\n                {navigationLinks.map((link, index) => (\n                  <NavigationMenuItem className=\"h-full\" key={String(index)}>\n                    <NavigationMenuLink\n                      className=\"h-full justify-center rounded-none border-transparent border-y-2 py-1.5 font-medium text-muted-foreground hover:border-b-primary hover:bg-transparent hover:text-primary data-[active]:border-b-primary data-[active]:bg-transparent!\"\n                      data-active={link.active ? \"\" : undefined}\n                      href={link.href}\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          <Button asChild className=\"text-sm\" size=\"sm\" variant=\"ghost\">\n            <a href=\"#\">Sign In</a>\n          </Button>\n          <Button asChild className=\"text-sm\" size=\"sm\">\n            <a href=\"#\">Get Started</a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-58.tsx",
    "content": "\"use client\";\n\nimport { OTPInput, type SlotProps } from \"input-otp\";\nimport { useId } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>OTP input (spaced)</Label>\n      <OTPInput\n        containerClassName=\"flex items-center gap-3 has-disabled:opacity-50\"\n        id={id}\n        maxLength={4}\n        render={({ slots }) => (\n          <div className=\"flex gap-2\">\n            {slots.map((slot, idx) => (\n              <Slot key={String(idx)} {...slot} />\n            ))}\n          </div>\n        )}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/guilhermerodz/input-otp\"\n          rel=\"noreferrer noopener nofollow\"\n          target=\"_blank\"\n        >\n          Input OTP\n        </a>\n      </p>\n    </div>\n  );\n}\n\nfunction Slot(props: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"flex size-9 items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs transition-[color,box-shadow]\",\n        { \"z-10 border-ring ring-[3px] ring-ring/50\": props.isActive },\n      )}\n    >\n      {props.char !== null && <div>{props.char}</div>}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-580.tsx",
    "content": "import { SearchIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Products\" },\n  { href: \"#\", label: \"Categories\" },\n  { href: \"#\", label: \"Deals\" },\n];\n\nexport default function Component() {\n  const id = useId();\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link) => (\n                    <NavigationMenuItem className=\"w-full\" key={link.label}>\n                      <NavigationMenuLink className=\"py-1.5\" href={link.href}>\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                  <NavigationMenuItem\n                    aria-hidden=\"true\"\n                    className=\"w-full\"\n                    role=\"presentation\"\n                  >\n                    <div\n                      aria-orientation=\"horizontal\"\n                      className=\"-mx-1 my-1 h-px bg-border\"\n                      role=\"separator\"\n                      tabIndex={-1}\n                    />\n                  </NavigationMenuItem>\n                  <NavigationMenuItem className=\"w-full\">\n                    <NavigationMenuLink className=\"py-1.5\" href=\"#\">\n                      Sign In\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                  <NavigationMenuItem className=\"w-full\">\n                    <Button\n                      asChild\n                      className=\"mt-0.5 w-full text-left text-sm\"\n                      size=\"sm\"\n                    >\n                      <span className=\"flex items-baseline gap-2\">\n                        Cart\n                        <span className=\"text-primary-foreground/60 text-xs\">\n                          2\n                        </span>\n                      </span>\n                    </Button>\n                  </NavigationMenuItem>\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Main nav */}\n          <div className=\"flex flex-1 items-center gap-6 max-md:justify-between\">\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n            {/* Navigation menu */}\n            <NavigationMenu className=\"max-md:hidden\">\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link) => (\n                  <NavigationMenuItem key={link.label}>\n                    <NavigationMenuLink\n                      className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                      href={link.href}\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n            {/* Search form */}\n            <div className=\"relative\">\n              <Input\n                className=\"peer h-8 ps-8 pe-2\"\n                id={id}\n                placeholder=\"Search...\"\n                type=\"search\"\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <SearchIcon size={16} />\n              </div>\n            </div>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2 max-md:hidden\">\n          <Button asChild className=\"text-sm\" size=\"sm\" variant=\"ghost\">\n            <a href=\"#\">Sign In</a>\n          </Button>\n          <Button asChild className=\"text-sm\" size=\"sm\">\n            <a href=\"#\">\n              <span className=\"flex items-baseline gap-2\">\n                Cart\n                <span className=\"text-primary-foreground/60 text-xs\">2</span>\n              </span>\n            </a>\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-581.tsx",
    "content": "import InfoMenu from \"@/registry/default/components/navbar-components/info-menu\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport NotificationMenu from \"@/registry/default/components/navbar-components/notification-menu\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" },\n];\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, index) => (\n                    <NavigationMenuItem className=\"w-full\" key={String(index)}>\n                      <NavigationMenuLink className=\"py-1.5\" href={link.href}>\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n            {/* Navigation menu */}\n            <NavigationMenu className=\"max-md:hidden\">\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link, index) => (\n                  <NavigationMenuItem key={String(index)}>\n                    <NavigationMenuLink\n                      className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                      href={link.href}\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center gap-2\">\n            {/* Info menu */}\n            <InfoMenu />\n            {/* Notification */}\n            <NotificationMenu />\n          </div>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-582.tsx",
    "content": "import {\n  FileTextIcon,\n  GlobeIcon,\n  HomeIcon,\n  LayersIcon,\n  UsersIcon,\n} from \"lucide-react\";\nimport { useId } from \"react\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport ThemeToggle from \"@/registry/default/components/navbar-components/theme-toggle\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\n// Navigation links with icons for desktop icon-only navigation\nconst navigationLinks = [\n  { active: true, href: \"#\", icon: HomeIcon, label: \"Dashboard\" },\n  { href: \"#\", icon: LayersIcon, label: \"Projects\" },\n  { href: \"#\", icon: FileTextIcon, label: \"Documentation\" },\n  { href: \"#\", icon: UsersIcon, label: \"Team\" },\n];\n\n// Language options\nconst languages = [\n  { label: \"En\", value: \"en\" },\n  { label: \"Es\", value: \"es\" },\n  { label: \"Fr\", value: \"fr\" },\n  { label: \"De\", value: \"de\" },\n  { label: \"Ja\", value: \"ja\" },\n];\n\nexport default function Component() {\n  const id = useId();\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, _index) => {\n                    const Icon = link.icon;\n                    return (\n                      <NavigationMenuItem className=\"w-full\" key={link.label}>\n                        <NavigationMenuLink\n                          active={link.active}\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                          href={link.href}\n                        >\n                          <Icon\n                            aria-hidden=\"true\"\n                            className=\"text-muted-foreground\"\n                            size={16}\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    );\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          <div className=\"flex items-center gap-6\">\n            {/* Logo */}\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n            {/* Desktop navigation - icon only */}\n            <NavigationMenu className=\"hidden md:flex\">\n              <NavigationMenuList className=\"gap-2\">\n                <TooltipProvider>\n                  {navigationLinks.map((link) => (\n                    <NavigationMenuItem key={link.label}>\n                      <Tooltip>\n                        <TooltipTrigger asChild>\n                          <NavigationMenuLink\n                            className=\"flex size-8 items-center justify-center p-1.5\"\n                            href={link.href}\n                          >\n                            <link.icon aria-hidden=\"true\" size={20} />\n                            <span className=\"sr-only\">{link.label}</span>\n                          </NavigationMenuLink>\n                        </TooltipTrigger>\n                        <TooltipContent\n                          className=\"px-2 py-1 text-xs\"\n                          side=\"bottom\"\n                        >\n                          <p>{link.label}</p>\n                        </TooltipContent>\n                      </Tooltip>\n                    </NavigationMenuItem>\n                  ))}\n                </TooltipProvider>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Theme toggle */}\n          <ThemeToggle />\n          {/* Language selector */}\n          <Select defaultValue=\"en\">\n            <SelectTrigger\n              aria-label=\"Select language\"\n              className=\"h-8 border-none px-2 shadow-none hover:bg-accent hover:text-accent-foreground [&>svg]:shrink-0 [&>svg]:text-muted-foreground/80\"\n              id={`language-${id}`}\n            >\n              <GlobeIcon aria-hidden=\"true\" size={16} />\n              <SelectValue className=\"hidden sm:inline-flex\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              {languages.map((lang) => (\n                <SelectItem key={lang.value} value={lang.value}>\n                  <span className=\"flex items-center gap-2\">\n                    <span className=\"truncate\">{lang.label}</span>\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-583.tsx",
    "content": "import { ChevronsUpDown } from \"lucide-react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport NotificationMenu from \"@/registry/default/components/navbar-components/notification-menu\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink className=\"text-foreground\" href=\"#\">\n                  <Logo />\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\n              <BreadcrumbItem className=\"md:hidden\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger className=\"hover:text-foreground\">\n                    <BreadcrumbEllipsis />\n                    <span className=\"sr-only\">Toggle menu</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    <DropdownMenuItem asChild>\n                      <a href=\"#\">Personal Account</a>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem asChild>\n                      <a href=\"#\">Projects</a>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </BreadcrumbItem>\n              <BreadcrumbItem className=\"max-md:hidden\">\n                <BreadcrumbLink href=\"#\">Personal Account</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"max-md:hidden\">\n                {\" \"}\n                /{\" \"}\n              </BreadcrumbSeparator>\n              <BreadcrumbItem className=\"max-md:hidden\">\n                <BreadcrumbLink href=\"#\">Projects</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\n              <BreadcrumbItem>\n                <Select defaultValue=\"1\">\n                  <SelectPrimitive.SelectTrigger\n                    aria-label=\"Select project\"\n                    asChild\n                  >\n                    <Button\n                      className=\"h-8 px-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\"\n                      variant=\"ghost\"\n                    >\n                      <SelectValue placeholder=\"Select project\" />\n                      <ChevronsUpDown\n                        className=\"text-muted-foreground/80\"\n                        size={14}\n                      />\n                    </Button>\n                  </SelectPrimitive.SelectTrigger>\n                  <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n                    <SelectItem value=\"1\">Main project</SelectItem>\n                    <SelectItem value=\"2\">Origin project</SelectItem>\n                  </SelectContent>\n                </Select>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          {/* Notification */}\n          <NotificationMenu />\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-584.tsx",
    "content": "import { SearchIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport NotificationMenu from \"@/registry/default/components/navbar-components/notification-menu\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { active: true, href: \"#\", label: \"Home\" },\n  { href: \"#\", label: \"Features\" },\n  { href: \"#\", label: \"Pricing\" },\n  { href: \"#\", label: \"About\" },\n];\n\nexport default function Component() {\n  const id = useId();\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, _index) => (\n                    <NavigationMenuItem className=\"w-full\" key={link.label}>\n                      <NavigationMenuLink\n                        active={link.active}\n                        className=\"py-1.5\"\n                        href={link.href}\n                      >\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Logo */}\n          <div className=\"flex items-center\">\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n          </div>\n        </div>\n        {/* Middle area */}\n        <div className=\"grow\">\n          {/* Search form */}\n          <div className=\"relative mx-auto w-full max-w-xs\">\n            <Input\n              className=\"peer h-8 ps-8 pe-10\"\n              id={id}\n              placeholder=\"Search...\"\n              type=\"search\"\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <SearchIcon size={16} />\n            </div>\n            <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-2 text-muted-foreground\">\n              <kbd className=\"inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n                ⌘K\n              </kbd>\n            </div>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-2\">\n          {/* Notification */}\n          <NotificationMenu />\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n      {/* Bottom navigation */}\n      <div className=\"border-t py-2 max-md:hidden\">\n        {/* Navigation menu */}\n        <NavigationMenu>\n          <NavigationMenuList className=\"gap-2\">\n            {navigationLinks.map((link, _index) => (\n              <NavigationMenuItem key={link.label}>\n                <NavigationMenuLink\n                  active={link.active}\n                  className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                  href={link.href}\n                >\n                  {link.label}\n                </NavigationMenuLink>\n              </NavigationMenuItem>\n            ))}\n          </NavigationMenuList>\n        </NavigationMenu>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-585.tsx",
    "content": "import {\n  HashIcon,\n  HouseIcon,\n  MailIcon,\n  SearchIcon,\n  UsersRound,\n} from \"lucide-react\";\nimport { useId } from \"react\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport NotificationMenu from \"@/registry/default/components/navbar-components/notification-menu\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst _teams = [\"Acme Inc.\", \"coss.com\", \"Junon\"];\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", icon: HouseIcon, label: \"Home\" },\n  { href: \"#\", icon: HashIcon, label: \"Hash\" },\n  { href: \"#\", icon: UsersRound, label: \"Groups\" },\n];\n\nexport default function Component() {\n  const id = useId();\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-48 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, _index) => {\n                    const Icon = link.icon;\n                    return (\n                      <NavigationMenuItem className=\"w-full\" key={link.label}>\n                        <NavigationMenuLink\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                          href={link.href}\n                        >\n                          <Icon\n                            aria-hidden=\"true\"\n                            className=\"text-muted-foreground\"\n                            size={16}\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    );\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          <div className=\"flex items-center gap-6\">\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n            {/* Search form */}\n            <div className=\"relative\">\n              <Input\n                className=\"peer h-8 ps-8 pe-2\"\n                id={id}\n                placeholder=\"Search...\"\n                type=\"search\"\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <SearchIcon size={16} />\n              </div>\n            </div>\n          </div>\n        </div>\n        {/* Middle area */}\n        <NavigationMenu className=\"max-md:hidden\">\n          <NavigationMenuList className=\"gap-2\">\n            {navigationLinks.map((link, _index) => {\n              const Icon = link.icon;\n              return (\n                <NavigationMenuItem key={link.label}>\n                  <NavigationMenuLink\n                    className=\"flex size-8 items-center justify-center p-1.5\"\n                    href={link.href}\n                    title={link.label}\n                  >\n                    <Icon aria-hidden=\"true\" />\n                    <span className=\"sr-only\">{link.label}</span>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              );\n            })}\n          </NavigationMenuList>\n        </NavigationMenu>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-4\">\n          <div className=\"flex items-center gap-2\">\n            {/* Messages */}\n            <Button\n              aria-label=\"Open notifications\"\n              className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n              size=\"icon\"\n              variant=\"ghost\"\n            >\n              <MailIcon aria-hidden=\"true\" size={16} />\n              <div\n                aria-hidden=\"true\"\n                className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n              />\n            </Button>\n            {/* Notification menu */}\n            <NotificationMenu />\n          </div>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-586.tsx",
    "content": "import { MicIcon, SearchIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport ThemeToggle from \"@/registry/default/components/navbar-components/theme-toggle\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Component() {\n  const id = useId();\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Logo */}\n        <div className=\"flex-1\">\n          <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n            <Logo />\n          </a>\n        </div>\n        {/* Middle area */}\n        <div className=\"grow max-sm:hidden\">\n          {/* Search form */}\n          <div className=\"relative mx-auto w-full max-w-xs\">\n            <Input\n              className=\"peer h-8 px-8\"\n              id={id}\n              placeholder=\"Search...\"\n              type=\"search\"\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <SearchIcon size={16} />\n            </div>\n            <button\n              aria-label=\"Press to speak\"\n              className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n              type=\"submit\"\n            >\n              <MicIcon aria-hidden=\"true\" size={16} />\n            </button>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-2\">\n          <Button asChild className=\"text-sm\" size=\"sm\" variant=\"ghost\">\n            <a href=\"#\">Community</a>\n          </Button>\n          <Button asChild className=\"text-sm\" size=\"sm\">\n            <a href=\"#\">Get Started</a>\n          </Button>\n          <ThemeToggle />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-587.tsx",
    "content": "import { HouseIcon, InboxIcon, SearchIcon, ZapIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { active: true, href: \"#\", icon: HouseIcon, label: \"Home\" },\n  { href: \"#\", icon: InboxIcon, label: \"Inbox\" },\n  { href: \"#\", icon: ZapIcon, label: \"Insights\" },\n];\n\nexport default function Component() {\n  const id = useId();\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, _index) => {\n                    const Icon = link.icon;\n                    return (\n                      <NavigationMenuItem className=\"w-full\" key={link.label}>\n                        <NavigationMenuLink\n                          active={link.active}\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                          href={link.href}\n                        >\n                          <Icon\n                            aria-hidden=\"true\"\n                            className=\"text-muted-foreground/80\"\n                            size={16}\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    );\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Logo */}\n          <div className=\"flex items-center\">\n            <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n              <Logo />\n            </a>\n          </div>\n        </div>\n        {/* Middle area */}\n        <NavigationMenu className=\"max-md:hidden\">\n          <NavigationMenuList className=\"gap-2\">\n            {navigationLinks.map((link, _index) => {\n              const Icon = link.icon;\n              return (\n                <NavigationMenuItem key={link.label}>\n                  <NavigationMenuLink\n                    active={link.active}\n                    className=\"flex-row items-center gap-2 py-1.5 font-medium text-foreground hover:text-primary\"\n                    href={link.href}\n                  >\n                    <Icon\n                      aria-hidden=\"true\"\n                      className=\"text-muted-foreground/80\"\n                      size={16}\n                    />\n                    <span>{link.label}</span>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              );\n            })}\n          </NavigationMenuList>\n        </NavigationMenu>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-2\">\n          <div className=\"relative\">\n            <Input\n              className=\"peer h-8 ps-8 pe-2\"\n              id={id}\n              placeholder=\"Search...\"\n              type=\"search\"\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <SearchIcon size={16} />\n            </div>\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-588.tsx",
    "content": "import { HouseIcon, InboxIcon, SparklesIcon, ZapIcon } from \"lucide-react\";\nimport Logo from \"@/registry/default/components/navbar-components/logo\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\n// Navigation links array\nconst navigationLinks = [\n  { active: true, href: \"#\", icon: HouseIcon, label: \"Home\" },\n  { href: \"#\", icon: InboxIcon, label: \"Inbox\" },\n  { href: \"#\", icon: ZapIcon, label: \"Insights\" },\n];\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link) => {\n                    const Icon = link.icon;\n                    return (\n                      <NavigationMenuItem className=\"w-full\" key={link.label}>\n                        <NavigationMenuLink\n                          active={link.active}\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                          href={link.href}\n                        >\n                          <Icon\n                            aria-hidden=\"true\"\n                            className=\"text-muted-foreground/80\"\n                            size={16}\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    );\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n\n          <NavigationMenu className=\"max-md:hidden\">\n            <NavigationMenuList className=\"gap-2\">\n              {navigationLinks.map((link) => {\n                const Icon = link.icon;\n                return (\n                  <NavigationMenuItem key={link.label}>\n                    <NavigationMenuLink\n                      active={link.active}\n                      className=\"flex-row items-center gap-2 py-1.5 font-medium text-foreground hover:text-primary\"\n                      href={link.href}\n                    >\n                      <Icon\n                        aria-hidden=\"true\"\n                        className=\"text-muted-foreground/80\"\n                        size={16}\n                      />\n                      <span>{link.label}</span>\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                );\n              })}\n            </NavigationMenuList>\n          </NavigationMenu>\n        </div>\n\n        {/* Middle side: Logo */}\n        <div className=\"flex items-center\">\n          <a className=\"text-primary hover:text-primary/90\" href=\"#\">\n            <Logo />\n          </a>\n        </div>\n\n        {/* Right side: Actions */}\n        <div className=\"flex flex-1 items-center justify-end gap-4\">\n          {/* User menu */}\n          <UserMenu />\n          {/* Upgrade button */}\n          <Button className=\"text-sm sm:aspect-square\" size=\"sm\">\n            <SparklesIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60 sm:-ms-1\"\n              size={16}\n            />\n            <span className=\"sm:sr-only\">Upgrade</span>\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-589.tsx",
    "content": "import { ChevronsUpDown } from \"lucide-react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport SettingsMenu from \"@/registry/default/components/navbar-components/settings-menu\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Dashboard\" },\n  { href: \"#\", label: \"Docs\" },\n  { href: \"#\", label: \"API reference\" },\n];\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link) => (\n                    <NavigationMenuItem className=\"w-full\" key={link.label}>\n                      <NavigationMenuLink className=\"py-1.5\" href={link.href}>\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          {/* Breadcrumb */}\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <Select defaultValue=\"personal\">\n                  <SelectPrimitive.SelectTrigger\n                    aria-label=\"Select account type\"\n                    asChild\n                  >\n                    <Button\n                      className=\"h-8 p-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\"\n                      variant=\"ghost\"\n                    >\n                      <SelectValue placeholder=\"Select account type\" />\n                      <ChevronsUpDown\n                        className=\"text-muted-foreground/80\"\n                        size={14}\n                      />\n                    </Button>\n                  </SelectPrimitive.SelectTrigger>\n                  <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n                    <SelectItem value=\"personal\">Personal</SelectItem>\n                    <SelectItem value=\"team\">Team</SelectItem>\n                    <SelectItem value=\"business\">Business</SelectItem>\n                  </SelectContent>\n                </Select>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator> / </BreadcrumbSeparator>\n              <BreadcrumbItem>\n                <Select defaultValue=\"1\">\n                  <SelectPrimitive.SelectTrigger\n                    aria-label=\"Select project\"\n                    asChild\n                  >\n                    <Button\n                      className=\"h-8 p-1.5 text-foreground focus-visible:bg-accent focus-visible:ring-0\"\n                      variant=\"ghost\"\n                    >\n                      <SelectValue placeholder=\"Select project\" />\n                      <ChevronsUpDown\n                        className=\"text-muted-foreground/80\"\n                        size={14}\n                      />\n                    </Button>\n                  </SelectPrimitive.SelectTrigger>\n                  <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n                    <SelectItem value=\"1\">Main project</SelectItem>\n                    <SelectItem value=\"2\">Origin project</SelectItem>\n                  </SelectContent>\n                </Select>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center gap-2\">\n            {/* Nav menu */}\n            <NavigationMenu className=\"max-md:hidden\">\n              <NavigationMenuList className=\"gap-2\">\n                {navigationLinks.map((link) => (\n                  <NavigationMenuItem key={link.label}>\n                    <NavigationMenuLink\n                      className=\"py-1.5 font-medium text-muted-foreground hover:text-primary\"\n                      href={link.href}\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n            {/* Settings */}\n            <SettingsMenu />\n          </div>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-59.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Simple textarea</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-590.tsx",
    "content": "import {\n  CompassIcon,\n  FeatherIcon,\n  HouseIcon,\n  PlusIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport NotificationMenu from \"@/registry/default/components/navbar-components/notification-menu\";\nimport TeamSwitcher from \"@/registry/default/components/navbar-components/team-switcher\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst teams = [\"Acme Inc.\", \"coss.com\", \"Junon\"];\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", icon: HouseIcon, label: \"Dashboard\" },\n  { href: \"#\", icon: CompassIcon, label: \"Explore\" },\n  { href: \"#\", icon: FeatherIcon, label: \"Write\" },\n  { href: \"#\", icon: SearchIcon, label: \"Search\" },\n];\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          {/* Mobile menu trigger */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button\n                className=\"group size-8 md:hidden\"\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <svg\n                  className=\"pointer-events-none\"\n                  fill=\"none\"\n                  height={16}\n                  stroke=\"currentColor\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                  width={16}\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                    d=\"M4 12L20 12\"\n                  />\n                  <path\n                    className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    d=\"M4 12H20\"\n                  />\n                  <path\n                    className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                    d=\"M4 12H20\"\n                  />\n                </svg>\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent align=\"start\" className=\"w-48 p-1 md:hidden\">\n              <NavigationMenu className=\"max-w-none *:w-full\">\n                <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                  {navigationLinks.map((link, _index) => {\n                    const Icon = link.icon;\n                    return (\n                      <NavigationMenuItem className=\"w-full\" key={link.label}>\n                        <NavigationMenuLink\n                          className=\"flex-row items-center gap-2 py-1.5\"\n                          href={link.href}\n                        >\n                          <Icon\n                            aria-hidden=\"true\"\n                            className=\"text-muted-foreground\"\n                            size={16}\n                          />\n                          <span>{link.label}</span>\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    );\n                  })}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </PopoverContent>\n          </Popover>\n          <TeamSwitcher defaultTeam={teams[0]} teams={teams} />\n        </div>\n        {/* Middle area */}\n        <NavigationMenu className=\"max-md:hidden\">\n          <NavigationMenuList className=\"gap-2\">\n            {navigationLinks.map((link, _index) => {\n              const Icon = link.icon;\n              return (\n                <NavigationMenuItem key={link.label}>\n                  <NavigationMenuLink\n                    className=\"flex size-8 items-center justify-center p-1.5\"\n                    href={link.href}\n                    title={link.label}\n                  >\n                    <Icon aria-hidden=\"true\" />\n                    <span className=\"sr-only\">{link.label}</span>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              );\n            })}\n          </NavigationMenuList>\n        </NavigationMenu>\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-4\">\n          <Button className=\"text-sm max-sm:aspect-square max-sm:p-0\" size=\"sm\">\n            <PlusIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60 sm:-ms-1\"\n              size={16}\n            />\n            <span className=\"max-sm:sr-only\">Post</span>\n          </Button>\n          <NotificationMenu />\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-591.tsx",
    "content": "import { BotMessageSquareIcon, MessageCircleDashedIcon } from \"lucide-react\";\nimport UserMenu from \"@/registry/default/components/navbar-components/user-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div>\n          <Select aria-label=\"Select AI model\" defaultValue=\"orion-alpha-45\">\n            <SelectTrigger className=\"**:data-desc:hidden [&>svg]:shrink-0 [&>svg]:text-muted-foreground/80\">\n              <BotMessageSquareIcon aria-hidden=\"true\" size={16} />\n              <SelectValue placeholder=\"Choose an AI model\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2 [&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8\">\n              <SelectGroup>\n                <SelectLabel className=\"ps-2\">Models</SelectLabel>\n                <SelectItem value=\"orion-alpha-45\">\n                  Orion-Alpha 4.5\n                  <span\n                    className=\"mt-1 block text-muted-foreground text-xs\"\n                    data-desc\n                  >\n                    Balanced performance and creativity\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"orion-code-4\">\n                  Orion-Code 4\n                  <span\n                    className=\"mt-1 block text-muted-foreground text-xs\"\n                    data-desc\n                  >\n                    Optimized for code generation and understanding\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"nova-chat-4\">\n                  Nova-Chat 4\n                  <span\n                    className=\"mt-1 block text-muted-foreground text-xs\"\n                    data-desc\n                  >\n                    Excels at natural, engaging conversations\n                  </span>\n                </SelectItem>\n                <SelectItem value=\"galaxy-max-4\">\n                  Galaxy-Max 4\n                  <span\n                    className=\"mt-1 block text-muted-foreground text-xs\"\n                    data-desc\n                  >\n                    Most powerful model for complex tasks\n                  </span>\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </div>\n\n        {/* Right side: Actions */}\n        <div className=\"flex items-center justify-end gap-2\">\n          {/* Layout button */}\n          <Button\n            aria-label=\"Temporary chat\"\n            className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <MessageCircleDashedIcon aria-hidden=\"true\" size={16} />\n          </Button>\n          {/* User menu */}\n          <UserMenu />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-592.tsx",
    "content": "\"use client\";\n\nimport { LayoutGridIcon, PlusIcon, SearchIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport InfoMenu from \"@/registry/default/components/navbar-components/info-menu\";\nimport NotificationMenu from \"@/registry/default/components/navbar-components/notification-menu\";\nimport SettingsMenu from \"@/registry/default/components/navbar-components/settings-menu\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"relative flex-1\">\n          <Input\n            className=\"peer h-8 w-full max-w-xs ps-8 pe-2\"\n            id={`input-${id}`}\n            placeholder=\"Search...\"\n            type=\"search\"\n          />\n          <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 text-muted-foreground/80 peer-disabled:opacity-50\">\n            <SearchIcon size={16} />\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          {/* Test mode */}\n          <div className=\"inline-flex items-center gap-2 max-md:hidden\">\n            <Label className=\"font-medium text-sm\" htmlFor={`switch-${id}`}>\n              Test mode\n            </Label>\n            <Switch\n              aria-label=\"Toggle switch\"\n              checked={checked}\n              className=\"h-5 w-8 [&_span]:size-4 data-[state=checked]:[&_span]:translate-x-3 data-[state=checked]:[&_span]:rtl:-translate-x-3\"\n              id={`switch-${id}`}\n              onCheckedChange={setChecked}\n            />\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {/* Layout button */}\n            <Button\n              aria-label=\"Open layout menu\"\n              className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n              size=\"icon\"\n              variant=\"ghost\"\n            >\n              <LayoutGridIcon aria-hidden=\"true\" size={16} />\n            </Button>\n            {/* Info menu */}\n            <InfoMenu />\n            {/* Notification */}\n            <NotificationMenu />\n            {/* Settings */}\n            <SettingsMenu />\n          </div>\n          {/* Add button */}\n          <Button\n            aria-label=\"Add new item\"\n            className=\"size-8 rounded-full\"\n            size=\"icon\"\n          >\n            <PlusIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-593.tsx",
    "content": "import { BookmarkIcon, HomeIcon } from \"lucide-react\";\nimport DatePicker from \"@/registry/default/components/navbar-components/date-picker\";\nimport Filters from \"@/registry/default/components/navbar-components/filters\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">\n                <HomeIcon aria-hidden=\"true\" size={16} />\n                <span className=\"sr-only\">Home</span>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Reports</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          {/* Date picker */}\n          <DatePicker />\n          {/* Filters */}\n          <Filters />\n          {/* Saved button */}\n          <Button\n            className=\"text-sm max-sm:aspect-square max-sm:p-0\"\n            size=\"sm\"\n            variant=\"outline\"\n          >\n            <BookmarkIcon\n              aria-hidden=\"true\"\n              className=\"text-muted-foreground/80 sm:-ms-1\"\n              size={16}\n            />\n            <span className=\"max-sm:sr-only\">Saved</span>\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-594.tsx",
    "content": "import { SparklesIcon, UploadIcon } from \"lucide-react\";\nimport AppToggle from \"@/registry/default/components/navbar-components/app-toggle\";\nimport TeamSwitcher from \"@/registry/default/components/navbar-components/team-switcher\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nconst teams = [\"Acme Inc.\", \"coss.com\", \"Junon\"];\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          <TeamSwitcher defaultTeam={teams[0]} teams={teams} />\n        </div>\n        {/* Middle area */}\n        <AppToggle />\n        {/* Right side */}\n        <div className=\"flex flex-1 items-center justify-end gap-2\">\n          <Button\n            className=\"text-sm max-sm:aspect-square max-sm:p-0\"\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            <UploadIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60 sm:-ms-1\"\n              size={16}\n            />\n            <span className=\"max-sm:sr-only\">Export</span>\n          </Button>\n          <Button className=\"text-sm max-sm:aspect-square max-sm:p-0\" size=\"sm\">\n            <SparklesIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60 sm:-ms-1\"\n              size={16}\n            />\n            <span className=\"max-sm:sr-only\">Upgrade</span>\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-595.tsx",
    "content": "import {\n  ChevronLeftIcon,\n  HistoryIcon,\n  MessageSquareText,\n  UserRoundPlus,\n} from \"lucide-react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 items-center justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-2\">\n          <Button\n            aria-label=\"Go back\"\n            asChild\n            className=\"size-8\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <a href=\"#\">\n              <ChevronLeftIcon />\n            </a>\n          </Button>\n          <h1 className=\"font-medium text-sm\">Basic UI</h1>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-2\">\n          {/* History button */}\n          <Button\n            aria-label=\"History\"\n            className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <HistoryIcon aria-hidden=\"true\" size={16} />\n          </Button>\n          {/* Comments button */}\n          <Button\n            aria-label=\"Save\"\n            className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <MessageSquareText aria-hidden=\"true\" size={16} />\n          </Button>\n          {/* Add user */}\n          <Button\n            aria-label=\"Add user\"\n            className=\"size-8 rounded-full text-muted-foreground shadow-none\"\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <UserRoundPlus aria-hidden=\"true\" size={16} />\n          </Button>\n          {/* Online users */}\n          <div className=\"ml-2 flex items-center gap-2\">\n            <div className=\"relative\">\n              <Avatar>\n                <AvatarImage alt=\"Kelly King\" src=\"/origin/avatar-80-07.jpg\" />\n                <AvatarFallback>KK</AvatarFallback>\n              </Avatar>\n              <span className=\"absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background bg-emerald-500\">\n                <span className=\"sr-only\">Online</span>\n              </span>\n            </div>\n            <div className=\"relative\">\n              <Avatar>\n                <AvatarImage\n                  alt=\"Martha Johnson\"\n                  src=\"/origin/avatar-80-06.jpg\"\n                />\n                <AvatarFallback>KK</AvatarFallback>\n              </Avatar>\n              <span className=\"absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background bg-muted-foreground\">\n                <span className=\"sr-only\">Online</span>\n              </span>\n            </div>\n            <div className=\"relative\">\n              <Avatar>\n                <AvatarImage alt=\"Linda Green\" src=\"/origin/avatar-80-05.jpg\" />\n                <AvatarFallback>KK</AvatarFallback>\n              </Avatar>\n              <span className=\"absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 border-background bg-muted-foreground\">\n                <span className=\"sr-only\">Online</span>\n              </span>\n            </div>\n            <Button\n              className=\"flex size-8 items-center justify-center rounded-full bg-secondary text-muted-foreground text-xs ring-background hover:bg-secondary hover:text-foreground\"\n              size=\"icon\"\n              variant=\"secondary\"\n            >\n              +3\n            </Button>\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-596.tsx",
    "content": "\"use client\";\n\nimport { ClockIcon, PowerIcon, PowerOffIcon, ZapIcon } from \"lucide-react\";\nimport { useId, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/registry/default/ui/navigation-menu\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { active: true, href: \"#\", label: \"Overview\" },\n  { href: \"#\", label: \"Graphs\" },\n  { href: \"#\", label: \"Backups\" },\n];\n\nexport default function Component() {\n  const id = useId();\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <header className=\"border-b px-4 md:px-6\">\n      <div className=\"flex h-16 justify-between gap-4\">\n        {/* Left side */}\n        <div className=\"flex gap-2\">\n          <div className=\"flex items-center md:hidden\">\n            {/* Mobile menu trigger */}\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button className=\"group size-8\" size=\"icon\" variant=\"ghost\">\n                  <svg\n                    className=\"pointer-events-none\"\n                    fill=\"none\"\n                    height={16}\n                    stroke=\"currentColor\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth=\"2\"\n                    viewBox=\"0 0 24 24\"\n                    width={16}\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-315\"\n                      d=\"M4 12L20 12\"\n                    />\n                    <path\n                      className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                      d=\"M4 12H20\"\n                    />\n                    <path\n                      className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-135\"\n                      d=\"M4 12H20\"\n                    />\n                  </svg>\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n                <NavigationMenu className=\"max-w-none *:w-full\">\n                  <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                    {navigationLinks.map((link, _index) => (\n                      <NavigationMenuItem className=\"w-full\" key={link.label}>\n                        <NavigationMenuLink className=\"py-1.5\" href={link.href}>\n                          {link.label}\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    ))}\n                  </NavigationMenuList>\n                </NavigationMenu>\n              </PopoverContent>\n            </Popover>\n          </div>\n          {/* Main nav */}\n          <div className=\"flex items-center gap-6\">\n            {/* Navigation menu */}\n            <NavigationMenu className=\"h-full *:h-full max-md:hidden\">\n              <NavigationMenuList className=\"h-full gap-2\">\n                {navigationLinks.map((link, _index) => (\n                  <NavigationMenuItem className=\"h-full\" key={link.label}>\n                    <NavigationMenuLink\n                      className=\"h-full justify-center rounded-none border-transparent border-y-2 py-1.5 font-medium text-muted-foreground hover:border-b-primary hover:bg-transparent hover:text-primary data-[active]:border-b-primary data-[active]:bg-transparent!\"\n                      data-active={link.active ? \"\" : undefined}\n                      href={link.href}\n                    >\n                      {link.label}\n                    </NavigationMenuLink>\n                  </NavigationMenuItem>\n                ))}\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n        {/* Right side */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <Badge className=\"gap-1.5 text-emerald-600\" variant=\"outline\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n              />\n              Online\n            </Badge>\n            <Badge className=\"gap-1.5\" variant=\"outline\">\n              <ZapIcon\n                aria-hidden=\"true\"\n                className=\"-ms-0.5 opacity-60\"\n                size={12}\n              />\n              99.9%\n            </Badge>\n            <Badge className=\"gap-1.5\" variant=\"outline\">\n              <ClockIcon\n                aria-hidden=\"true\"\n                className=\"-ms-0.5 opacity-60\"\n                size={12}\n              />\n              45ms\n            </Badge>\n          </div>\n          {/* Switch */}\n          <div>\n            <div className=\"relative inline-grid h-7 grid-cols-[1fr_1fr] items-center font-medium text-sm\">\n              <Switch\n                checked={checked}\n                className=\"peer absolute inset-0 h-[inherit] w-auto data-[state=unchecked]:bg-input/50 [&_span]:z-10 [&_span]:h-full [&_span]:w-1/2 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:data-[state=checked]:translate-x-full [&_span]:data-[state=checked]:rtl:-translate-x-full\"\n                id={id}\n                onCheckedChange={setChecked}\n              />\n              <span className=\"pointer-events-none relative ms-0.5 flex w-6 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full peer-data-[state=unchecked]:rtl:-translate-x-full\">\n                <PowerOffIcon aria-hidden=\"true\" size={12} />\n              </span>\n              <span className=\"pointer-events-none relative me-0.5 flex w-6 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=unchecked]:invisible peer-data-[state=checked]:-translate-x-full peer-data-[state=checked]:text-background peer-data-[state=checked]:rtl:translate-x-full\">\n                <PowerIcon aria-hidden=\"true\" size={12} />\n              </span>\n            </div>\n            <Label className=\"sr-only\" htmlFor={id}>\n              Power\n            </Label>\n          </div>\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-597.tsx",
    "content": "\"use client\";\n\nimport {\n  checkboxesFeature,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      checkboxesFeature,\n      hotkeysCoreFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      checkedItems: [\"components\", \"tokens\"],\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-1.5 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <div\n              className=\"flex items-center gap-2 not-last:pb-0.5\"\n              key={item.getId()}\n            >\n              <TreeItem className=\"flex-1 not-last:pb-0\" item={item}>\n                <TreeItemLabel />\n              </TreeItem>\n              <Checkbox\n                checked={\n                  {\n                    checked: true,\n                    indeterminate: \"indeterminate\" as const,\n                    unchecked: false,\n                  }[item.getCheckedState()]\n                }\n                onCheckedChange={(checked) => {\n                  const checkboxProps = item.getCheckboxProps();\n                  checkboxProps.onChange?.({ target: { checked } });\n                }}\n              />\n            </div>\n          );\n        })}\n      </Tree>\n\n      <div className=\"space-y-2\">\n        <p\n          aria-live=\"polite\"\n          className=\"mt-2 text-muted-foreground text-xs\"\n          role=\"region\"\n        >\n          Tree with checkboxes on the right ∙{\" \"}\n          <a\n            className=\"underline hover:text-foreground\"\n            href=\"https://headless-tree.lukasbach.com\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            API\n          </a>\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-598.tsx",
    "content": "\"use client\";\n\nimport {\n  checkboxesFeature,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      checkboxesFeature,\n      hotkeysCoreFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      checkedItems: [\"components\", \"tokens\"],\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <Tree indent={indent} tree={tree}>\n        {tree.getItems().map((item) => {\n          return (\n            <div\n              className=\"flex items-center gap-1.5 not-last:pb-0.5\"\n              key={item.getId()}\n            >\n              <Checkbox\n                checked={\n                  {\n                    checked: true,\n                    indeterminate: \"indeterminate\" as const,\n                    unchecked: false,\n                  }[item.getCheckedState()]\n                }\n                onCheckedChange={(checked) => {\n                  const checkboxProps = item.getCheckboxProps();\n                  checkboxProps.onChange?.({ target: { checked } });\n                }}\n              />\n              <TreeItem className=\"flex-1 not-last:pb-0\" item={item}>\n                <TreeItemLabel />\n              </TreeItem>\n            </div>\n          );\n        })}\n      </Tree>\n\n      <div className=\"space-y-2\">\n        <p\n          aria-live=\"polite\"\n          className=\"mt-2 text-muted-foreground text-xs\"\n          role=\"region\"\n        >\n          Tree with checkboxes on the left ∙{\" \"}\n          <a\n            className=\"underline hover:text-foreground\"\n            href=\"https://headless-tree.lukasbach.com\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            API\n          </a>\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-599.tsx",
    "content": "\"use client\";\n\nimport {\n  checkboxesFeature,\n  hotkeysCoreFeature,\n  selectionFeature,\n  syncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport { FileIcon, FolderIcon, FolderOpenIcon } from \"lucide-react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Tree, TreeItem, TreeItemLabel } from \"@/registry/default/ui/tree\";\n\ninterface Item {\n  name: string;\n  children?: string[];\n}\n\nconst items: Record<string, Item> = {\n  apis: { name: \"APIs\" },\n  backend: { children: [\"apis\", \"infrastructure\"], name: \"Backend\" },\n  company: {\n    children: [\"engineering\", \"marketing\", \"operations\"],\n    name: \"Company\",\n  },\n  components: { name: \"Components\" },\n  content: { name: \"Content\" },\n  \"design-system\": {\n    children: [\"components\", \"tokens\", \"guidelines\"],\n    name: \"Design System\",\n  },\n  engineering: {\n    children: [\"frontend\", \"backend\", \"platform-team\"],\n    name: \"Engineering\",\n  },\n  finance: { name: \"Finance\" },\n  frontend: { children: [\"design-system\", \"web-platform\"], name: \"Frontend\" },\n  guidelines: { name: \"Guidelines\" },\n  hr: { name: \"HR\" },\n  infrastructure: { name: \"Infrastructure\" },\n  marketing: { children: [\"content\", \"seo\"], name: \"Marketing\" },\n  operations: { children: [\"hr\", \"finance\"], name: \"Operations\" },\n  \"platform-team\": { name: \"Platform Team\" },\n  seo: { name: \"SEO\" },\n  tokens: { name: \"Tokens\" },\n  \"web-platform\": { name: \"Web Platform\" },\n};\n\nconst indent = 20;\n\nexport default function Component() {\n  const tree = useTree<Item>({\n    canCheckFolders: true,\n    dataLoader: {\n      getChildren: (itemId) => items[itemId].children ?? [],\n      getItem: (itemId) => items[itemId],\n    },\n    features: [\n      syncDataLoaderFeature,\n      selectionFeature,\n      checkboxesFeature,\n      hotkeysCoreFeature,\n    ],\n    getItemName: (item) => item.getItemData().name,\n    indent,\n    initialState: {\n      checkedItems: [\"components\", \"tokens\"],\n      expandedItems: [\"engineering\", \"frontend\", \"design-system\"],\n    },\n    isItemFolder: (item) => (item.getItemData()?.children?.length ?? 0) > 0,\n    rootItemId: \"company\",\n  });\n\n  return (\n    <div className=\"flex h-full flex-col gap-2 *:first:grow\">\n      <div>\n        <Tree\n          className=\"relative before:absolute before:inset-0 before:ms-4.5 before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\"\n          indent={indent}\n          tree={tree}\n        >\n          {tree.getItems().map((item) => {\n            return (\n              <div\n                className=\"flex items-center gap-1.5 not-last:pb-0.5\"\n                key={item.getId()}\n              >\n                <Checkbox\n                  checked={\n                    {\n                      checked: true,\n                      indeterminate: \"indeterminate\" as const,\n                      unchecked: false,\n                    }[item.getCheckedState()]\n                  }\n                  onCheckedChange={(checked) => {\n                    const checkboxProps = item.getCheckboxProps();\n                    checkboxProps.onChange?.({ target: { checked } });\n                  }}\n                />\n                <TreeItem className=\"flex-1 not-last:pb-0\" item={item}>\n                  <TreeItemLabel className=\"relative before:absolute before:inset-x-0 before:-inset-y-0.5 before:-z-10 before:bg-background\">\n                    <span className=\"flex items-center gap-2\">\n                      {item.isFolder() ? (\n                        item.isExpanded() ? (\n                          <FolderOpenIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                        ) : (\n                          <FolderIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                        )\n                      ) : (\n                        <FileIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n                      )}\n                      {item.getItemName()}\n                    </span>\n                  </TreeItemLabel>\n                </TreeItem>\n              </div>\n            );\n          })}\n        </Tree>\n      </div>\n\n      <div className=\"space-y-2\">\n        <p\n          aria-live=\"polite\"\n          className=\"mt-2 text-muted-foreground text-xs\"\n          role=\"region\"\n        >\n          Tree with canCheckFolders option ∙{\" \"}\n          <a\n            className=\"underline hover:text-foreground\"\n            href=\"https://headless-tree.lukasbach.com\"\n            rel=\"noopener noreferrer\"\n            target=\"_blank\"\n          >\n            API\n          </a>\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-60.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>\n        Required textarea <span className=\"text-destructive\">*</span>\n      </Label>\n      <Textarea id={id} placeholder=\"Leave a message\" required />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-61.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with helper text</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-muted-foreground text-xs\"\n        role=\"region\"\n      >\n        Please add as many details as you can\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-62.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <Label className=\"leading-6\" htmlFor={id}>\n          Textarea with hint\n        </Label>\n        <span className=\"text-muted-foreground text-sm\">Optional</span>\n      </div>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-63.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"[--ring:var(--color-indigo-300)] in-[.dark]:[--ring:var(--color-indigo-900)] *:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with colored border and ring</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-64.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with error</Label>\n      <Textarea\n        aria-invalid\n        defaultValue=\"Hello!\"\n        id={id}\n        placeholder=\"Leave a comment\"\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-destructive text-xs\"\n        role=\"alert\"\n      >\n        Message should be at least 10 characters\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-65.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with gray background</Label>\n      <Textarea\n        className=\"border-transparent bg-muted shadow-none\"\n        id={id}\n        placeholder=\"Leave a comment\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-66.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Shorter textarea</Label>\n      <Textarea\n        className=\"min-h-0\"\n        id={id}\n        placeholder=\"Leave a comment\"\n        rows={2}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-67.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Disabled textarea</Label>\n      <Textarea disabled id={id} placeholder=\"Leave a comment\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-68.tsx",
    "content": "import { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with left button</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n      <Button variant=\"outline\">Send</Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-69.tsx",
    "content": "import { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with right button</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n      <div className=\"flex justify-end\">\n        <Button variant=\"outline\">Send</Button>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-70.tsx",
    "content": "import { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with button</Label>\n      <Textarea id={id} placeholder=\"Leave a comment\" />\n      <Button className=\"w-full\" variant=\"outline\">\n        Send\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-71.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"group relative\">\n      <Label\n        className=\"absolute start-1 top-0 z-10 block -translate-y-1/2 bg-background px-2 font-medium text-foreground text-xs group-has-disabled:opacity-50\"\n        htmlFor={id}\n      >\n        Textarea with overlapping label\n      </Label>\n      <Textarea id={id} />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-72.tsx",
    "content": "import { useId } from \"react\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"group relative\">\n      <label\n        className=\"absolute top-0 block origin-start translate-y-2 cursor-text px-1 text-muted-foreground/70 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:-translate-y-1/2 group-focus-within:cursor-default group-focus-within:font-medium group-focus-within:text-foreground group-focus-within:text-xs has-[+textarea:not(:placeholder-shown)]:pointer-events-none has-[+textarea:not(:placeholder-shown)]:-translate-y-1/2 has-[+textarea:not(:placeholder-shown)]:cursor-default has-aria-invalid:border-destructive has-[+textarea:not(:placeholder-shown)]:font-medium has-[+textarea:not(:placeholder-shown)]:text-foreground has-[+textarea:not(:placeholder-shown)]:text-xs has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\"\n        htmlFor={id}\n      >\n        <span className=\"inline-flex bg-background px-2\">\n          Textarea with label animation\n        </span>\n      </label>\n      <Textarea id={id} placeholder=\" \" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-73.tsx",
    "content": "import { useId } from \"react\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"relative rounded-md border border-input bg-background shadow-xs outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 has-[input:is(:disabled)]:*:pointer-events-none dark:has-aria-invalid:ring-destructive/40\">\n      <label\n        className=\"block px-3 pt-2 font-medium text-foreground text-xs\"\n        htmlFor={id}\n      >\n        Textarea with inset label\n      </label>\n      <textarea\n        className=\"flex min-h-[70px] w-full bg-transparent px-3 pb-2 text-foreground text-sm placeholder:text-muted-foreground/70 focus-visible:outline-none\"\n        id={id}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-74.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { useCharacterLimit } from \"@/registry/default/hooks/use-character-limit\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  const maxLength = 180;\n  const {\n    value,\n    characterCount,\n    handleChange,\n    maxLength: limit,\n  } = useCharacterLimit({ maxLength });\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with characters left</Label>\n      <Textarea\n        aria-describedby={`${id}-description`}\n        id={id}\n        maxLength={maxLength}\n        onChange={handleChange}\n        value={value}\n      />\n      <p\n        aria-live=\"polite\"\n        className=\"mt-2 text-right text-muted-foreground text-xs\"\n        id={`${id}-description`}\n        role=\"status\"\n      >\n        <span className=\"tabular-nums\">{limit - characterCount}</span>{\" \"}\n        characters left\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-75.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Textarea with no resize</Label>\n      <Textarea\n        className=\"[resize:none]\"\n        id={id}\n        placeholder=\"Leave a comment\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-76.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Read-only textarea</Label>\n      <Textarea\n        className=\"read-only:bg-muted\"\n        defaultValue=\"This is a read-only textarea\"\n        id={id}\n        placeholder=\"Leave a comment\"\n        readOnly\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-77.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={id}>Autogrowing textarea</Label>\n      <Textarea\n        className=\"field-sizing-content max-h-29.5 min-h-0 resize-none py-1.75\"\n        id={id}\n        placeholder=\"Leave a comment\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-78.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return <Button>Button</Button>;\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-79.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return <Button disabled>Button</Button>;\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-80.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return <Button className=\"rounded-full\">Button</Button>;\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-81.tsx",
    "content": "import { ArchiveIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button>\n      <ArchiveIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n      Button\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-82.tsx",
    "content": "import { TrashIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button variant=\"destructive\">\n      <TrashIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n      Button\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-83.tsx",
    "content": "import { XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button variant=\"secondary\">\n      <XIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n      Button\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-84.tsx",
    "content": "import { SparklesIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button variant=\"outline\">\n      Button\n      <SparklesIcon aria-hidden=\"true\" className=\"-me-1 opacity-60\" size={16} />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-85.tsx",
    "content": "import { ArrowLeftIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"group\" variant=\"ghost\">\n      <ArrowLeftIcon\n        aria-hidden=\"true\"\n        className=\"-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5\"\n        size={16}\n      />\n      Button\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-86.tsx",
    "content": "import { ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"group\">\n      Button\n      <ArrowRightIcon\n        aria-hidden=\"true\"\n        className=\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\"\n        size={16}\n      />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-87.tsx",
    "content": "import { ArrowRightIcon, MailIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"group\" variant=\"secondary\">\n      <MailIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n      Email\n      <ArrowRightIcon\n        aria-hidden=\"true\"\n        className=\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\"\n        size={16}\n      />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-88.tsx",
    "content": "import { ChevronDownIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button>\n      Button\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className=\"-me-1 opacity-60\"\n        size={16}\n      />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-89.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Button variant=\"ghost\">Cancel</Button>\n      <Button>Save</Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-90.tsx",
    "content": "import { LoaderCircleIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button disabled>\n      <LoaderCircleIcon\n        aria-hidden=\"true\"\n        className=\"-ms-1 animate-spin\"\n        size={16}\n      />\n      Button\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-91.tsx",
    "content": "\"use client\";\n\nimport { LoaderCircleIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const handleClick = () => {\n    setIsLoading(true);\n    // Simulate an async operation\n    setTimeout(() => {\n      setIsLoading(false);\n    }, 1000); // Reset after 1 second\n  };\n\n  return (\n    <Button\n      className=\"group relative disabled:opacity-100\"\n      data-loading={isLoading || undefined}\n      disabled={isLoading}\n      onClick={handleClick}\n    >\n      <span className=\"group-data-loading:text-transparent\">Click me</span>\n      {isLoading && (\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <LoaderCircleIcon\n            aria-hidden=\"true\"\n            className=\"animate-spin\"\n            size={16}\n          />\n        </div>\n      )}\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-92.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"gap-3\" variant=\"outline\">\n      Messages\n      <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground\">\n        18\n      </span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-93.tsx",
    "content": "import { PrinterIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button variant=\"outline\">\n      <PrinterIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" size={16} />\n      Print\n      <kbd className=\"ms-1 -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\">\n        ⌘P\n      </kbd>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-94.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"gap-0 rounded-full py-0 ps-0\">\n      <div className=\"me-0.5 flex aspect-square h-full p-1.5\">\n        <img\n          alt=\"Profile image\"\n          aria-hidden=\"true\"\n          className=\"h-auto w-full rounded-full\"\n          height={24}\n          src=\"/origin/avatar.jpg\"\n          width={24}\n        />\n      </div>\n      @georgelucas\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-95.tsx",
    "content": "import { ChevronDownIcon } from \"lucide-react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"h-auto p-0 hover:bg-transparent\" variant=\"ghost\">\n      <Avatar>\n        <AvatarImage alt=\"Profile image\" src=\"/origin/avatar.jpg\" />\n        <AvatarFallback>KK</AvatarFallback>\n      </Avatar>\n      <ChevronDownIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-96.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button className=\"aspect-square max-sm:p-0\" variant=\"outline\">\n      <PlusIcon aria-hidden=\"true\" className=\"opacity-60 sm:-ms-1\" size={16} />\n      <span className=\"max-sm:sr-only\">Add new</span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-97.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  return (\n    <Button\n      aria-label=\"Add new item\"\n      className=\"rounded-full\"\n      size=\"icon\"\n      variant=\"outline\"\n    >\n      <PlusIcon aria-hidden=\"true\" size={16} />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-98.tsx",
    "content": "\"use client\";\n\nimport { PlusIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Component() {\n  const [open, setOpen] = useState<boolean>(false);\n\n  return (\n    <Button\n      aria-expanded={open}\n      aria-label={open ? \"Close menu\" : \"Open menu\"}\n      className=\"group rounded-full\"\n      onClick={() => setOpen((prevState) => !prevState)}\n      size=\"icon\"\n      variant=\"outline\"\n    >\n      <PlusIcon\n        aria-hidden=\"true\"\n        className=\"transition-transform duration-500 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)] group-aria-expanded:rotate-135\"\n        size={16}\n      />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/comp-99.tsx",
    "content": "\"use client\";\n\nimport { PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Component() {\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button aria-label=\"Add new item\" size=\"icon\" variant=\"outline\">\n            <PlusIcon aria-hidden=\"true\" size={16} />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"px-2 py-1 text-xs\">Tooltip</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/agenda-view.tsx",
    "content": "\"use client\";\n\nimport { RiCalendarEventLine } from \"@remixicon/react\";\nimport { addDays, format, isToday } from \"date-fns\";\nimport { useMemo } from \"react\";\nimport {\n  AgendaDaysToShow,\n  type CalendarEvent,\n  EventItem,\n  getAgendaEventsForDay,\n} from \"@/registry/default/components/event-calendar\";\n\ninterface AgendaViewProps {\n  currentDate: Date;\n  events: CalendarEvent[];\n  onEventSelect: (event: CalendarEvent) => void;\n}\n\nexport function AgendaView({\n  currentDate,\n  events,\n  onEventSelect,\n}: AgendaViewProps) {\n  // Show events for the next days based on constant\n  const days = useMemo(() => {\n    console.log(\"Agenda view updating with date:\", currentDate.toISOString());\n    return Array.from({ length: AgendaDaysToShow }, (_, i) =>\n      addDays(new Date(currentDate), i),\n    );\n  }, [currentDate]);\n\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\n    e.stopPropagation();\n    console.log(\"Agenda view event clicked:\", event);\n    onEventSelect(event);\n  };\n\n  // Check if there are any days with events\n  const hasEvents = days.some(\n    (day) => getAgendaEventsForDay(events, day).length > 0,\n  );\n\n  return (\n    <div className=\"border-border/70 border-t px-4\">\n      {!hasEvents ? (\n        <div className=\"flex min-h-[70svh] flex-col items-center justify-center py-16 text-center\">\n          <RiCalendarEventLine\n            className=\"mb-2 text-muted-foreground/50\"\n            size={32}\n          />\n          <h3 className=\"font-medium text-lg\">No events found</h3>\n          <p className=\"text-muted-foreground\">\n            There are no events scheduled for this time period.\n          </p>\n        </div>\n      ) : (\n        days.map((day) => {\n          const dayEvents = getAgendaEventsForDay(events, day);\n\n          if (dayEvents.length === 0) return null;\n\n          return (\n            <div\n              className=\"relative my-12 border-border/70 border-t\"\n              key={day.toString()}\n            >\n              <span\n                className=\"absolute -top-3 left-0 flex h-6 items-center bg-background pe-4 text-[10px] uppercase data-today:font-medium sm:pe-4 sm:text-xs\"\n                data-today={isToday(day) || undefined}\n              >\n                {format(day, \"d MMM, EEEE\")}\n              </span>\n              <div className=\"mt-6 space-y-2\">\n                {dayEvents.map((event) => (\n                  <EventItem\n                    event={event}\n                    key={event.id}\n                    onClick={(e) => handleEventClick(event, e)}\n                    view=\"agenda\"\n                  />\n                ))}\n              </div>\n            </div>\n          );\n        })\n      )}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/calendar-dnd-context.tsx",
    "content": "\"use client\";\n\nimport {\n  DndContext,\n  type DragEndEvent,\n  type DragOverEvent,\n  DragOverlay,\n  type DragStartEvent,\n  MouseSensor,\n  PointerSensor,\n  TouchSensor,\n  type UniqueIdentifier,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { addMinutes, differenceInMinutes } from \"date-fns\";\nimport {\n  createContext,\n  type ReactNode,\n  useContext,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type CalendarEvent,\n  EventItem,\n} from \"@/registry/default/components/event-calendar\";\n\n// Define the context type\ntype CalendarDndContextType = {\n  activeEvent: CalendarEvent | null;\n  activeId: UniqueIdentifier | null;\n  activeView: \"month\" | \"week\" | \"day\" | null;\n  currentTime: Date | null;\n  eventHeight: number | null;\n  isMultiDay: boolean;\n  multiDayWidth: number | null;\n  dragHandlePosition: {\n    x?: number;\n    y?: number;\n    data?: {\n      isFirstDay?: boolean;\n      isLastDay?: boolean;\n    };\n  } | null;\n};\n\n// Create the context\nconst CalendarDndContext = createContext<CalendarDndContextType>({\n  activeEvent: null,\n  activeId: null,\n  activeView: null,\n  currentTime: null,\n  dragHandlePosition: null,\n  eventHeight: null,\n  isMultiDay: false,\n  multiDayWidth: null,\n});\n\n// Hook to use the context\nexport const useCalendarDnd = () => useContext(CalendarDndContext);\n\n// Props for the provider\ninterface CalendarDndProviderProps {\n  children: ReactNode;\n  onEventUpdate: (event: CalendarEvent) => void;\n}\n\nexport function CalendarDndProvider({\n  children,\n  onEventUpdate,\n}: CalendarDndProviderProps) {\n  const [activeEvent, setActiveEvent] = useState<CalendarEvent | null>(null);\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);\n  const [activeView, setActiveView] = useState<\"month\" | \"week\" | \"day\" | null>(\n    null,\n  );\n  const [currentTime, setCurrentTime] = useState<Date | null>(null);\n  const [eventHeight, setEventHeight] = useState<number | null>(null);\n  const [isMultiDay, setIsMultiDay] = useState(false);\n  const [multiDayWidth, setMultiDayWidth] = useState<number | null>(null);\n  const [dragHandlePosition, setDragHandlePosition] = useState<{\n    x?: number;\n    y?: number;\n    data?: {\n      isFirstDay?: boolean;\n      isLastDay?: boolean;\n    };\n  } | null>(null);\n\n  // Store original event dimensions\n  const eventDimensions = useRef<{ height: number }>({ height: 0 });\n\n  // Configure sensors for better drag detection\n  const sensors = useSensors(\n    useSensor(MouseSensor, {\n      // Require the mouse to move by 5px before activating\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(TouchSensor, {\n      // Press delay of 250ms, with tolerance of 5px of movement\n      activationConstraint: {\n        delay: 250,\n        tolerance: 5,\n      },\n    }),\n    useSensor(PointerSensor, {\n      // Require the pointer to move by 5px before activating\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n  );\n\n  // Generate a stable ID for the DndContext\n  const dndContextId = useId();\n\n  const handleDragStart = (event: DragStartEvent) => {\n    const { active } = event;\n\n    // Add safety check for data.current\n    if (!active.data.current) {\n      console.error(\"Missing data in drag start event\", event);\n      return;\n    }\n\n    const {\n      event: calendarEvent,\n      view,\n      height,\n      isMultiDay: eventIsMultiDay,\n      multiDayWidth: eventMultiDayWidth,\n      dragHandlePosition: eventDragHandlePosition,\n    } = active.data.current as {\n      event: CalendarEvent;\n      view: \"month\" | \"week\" | \"day\";\n      height?: number;\n      isMultiDay?: boolean;\n      multiDayWidth?: number;\n      dragHandlePosition?: {\n        x?: number;\n        y?: number;\n        data?: {\n          isFirstDay?: boolean;\n          isLastDay?: boolean;\n        };\n      };\n    };\n\n    setActiveEvent(calendarEvent);\n    setActiveId(active.id);\n    setActiveView(view);\n    setCurrentTime(new Date(calendarEvent.start));\n    setIsMultiDay(eventIsMultiDay || false);\n    setMultiDayWidth(eventMultiDayWidth || null);\n    setDragHandlePosition(eventDragHandlePosition || null);\n\n    // Store event height if provided\n    if (height) {\n      eventDimensions.current.height = height;\n      setEventHeight(height);\n    }\n  };\n\n  const handleDragOver = (event: DragOverEvent) => {\n    const { over } = event;\n\n    if (over && activeEvent && over.data.current) {\n      const { date, time } = over.data.current as { date: Date; time?: number };\n\n      // Update time for week/day views\n      if (time !== undefined && activeView !== \"month\") {\n        const newTime = new Date(date);\n\n        // Calculate hours and minutes with 15-minute precision\n        const hours = Math.floor(time);\n        const fractionalHour = time - hours;\n\n        // Map to nearest 15 minute interval (0, 0.25, 0.5, 0.75)\n        let minutes = 0;\n        if (fractionalHour < 0.125) minutes = 0;\n        else if (fractionalHour < 0.375) minutes = 15;\n        else if (fractionalHour < 0.625) minutes = 30;\n        else minutes = 45;\n\n        newTime.setHours(hours, minutes, 0, 0);\n\n        // Only update if time has changed\n        if (\n          !currentTime ||\n          newTime.getHours() !== currentTime.getHours() ||\n          newTime.getMinutes() !== currentTime.getMinutes() ||\n          newTime.getDate() !== currentTime.getDate() ||\n          newTime.getMonth() !== currentTime.getMonth() ||\n          newTime.getFullYear() !== currentTime.getFullYear()\n        ) {\n          setCurrentTime(newTime);\n        }\n      } else if (activeView === \"month\") {\n        // For month view, just update the date but preserve time\n        const newTime = new Date(date);\n        if (currentTime) {\n          newTime.setHours(\n            currentTime.getHours(),\n            currentTime.getMinutes(),\n            currentTime.getSeconds(),\n            currentTime.getMilliseconds(),\n          );\n        }\n\n        // Only update if date has changed\n        if (\n          !currentTime ||\n          newTime.getDate() !== currentTime.getDate() ||\n          newTime.getMonth() !== currentTime.getMonth() ||\n          newTime.getFullYear() !== currentTime.getFullYear()\n        ) {\n          setCurrentTime(newTime);\n        }\n      }\n    }\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    // Add robust error checking\n    if (!over || !activeEvent || !currentTime) {\n      // Reset state and exit early\n      setActiveEvent(null);\n      setActiveId(null);\n      setActiveView(null);\n      setCurrentTime(null);\n      setEventHeight(null);\n      setIsMultiDay(false);\n      setMultiDayWidth(null);\n      setDragHandlePosition(null);\n      return;\n    }\n\n    try {\n      // Safely access data with checks\n      if (!active.data.current || !over.data.current) {\n        throw new Error(\"Missing data in drag event\");\n      }\n\n      const activeData = active.data.current as {\n        event?: CalendarEvent;\n        view?: string;\n      };\n      const overData = over.data.current as { date?: Date; time?: number };\n\n      // Verify we have all required data\n      if (!activeData.event || !overData.date) {\n        throw new Error(\"Missing required event data\");\n      }\n\n      const calendarEvent = activeData.event;\n      const date = overData.date;\n      const time = overData.time;\n\n      // Calculate new start time\n      const newStart = new Date(date);\n\n      // If time is provided (for week/day views), set the hours and minutes\n      if (time !== undefined) {\n        const hours = Math.floor(time);\n        const fractionalHour = time - hours;\n\n        // Map to nearest 15 minute interval (0, 0.25, 0.5, 0.75)\n        let minutes = 0;\n        if (fractionalHour < 0.125) minutes = 0;\n        else if (fractionalHour < 0.375) minutes = 15;\n        else if (fractionalHour < 0.625) minutes = 30;\n        else minutes = 45;\n\n        newStart.setHours(hours, minutes, 0, 0);\n      } else {\n        // For month view, preserve the original time from currentTime\n        newStart.setHours(\n          currentTime.getHours(),\n          currentTime.getMinutes(),\n          currentTime.getSeconds(),\n          currentTime.getMilliseconds(),\n        );\n      }\n\n      // Calculate new end time based on the original duration\n      const originalStart = new Date(calendarEvent.start);\n      const originalEnd = new Date(calendarEvent.end);\n      const durationMinutes = differenceInMinutes(originalEnd, originalStart);\n      const newEnd = addMinutes(newStart, durationMinutes);\n\n      // Only update if the start time has actually changed\n      const hasStartTimeChanged =\n        originalStart.getFullYear() !== newStart.getFullYear() ||\n        originalStart.getMonth() !== newStart.getMonth() ||\n        originalStart.getDate() !== newStart.getDate() ||\n        originalStart.getHours() !== newStart.getHours() ||\n        originalStart.getMinutes() !== newStart.getMinutes();\n\n      if (hasStartTimeChanged) {\n        // Update the event only if the time has changed\n        onEventUpdate({\n          ...calendarEvent,\n          end: newEnd,\n          start: newStart,\n        });\n      }\n    } catch (error) {\n      console.error(\"Error in drag end handler:\", error);\n    } finally {\n      // Always reset state\n      setActiveEvent(null);\n      setActiveId(null);\n      setActiveView(null);\n      setCurrentTime(null);\n      setEventHeight(null);\n      setIsMultiDay(false);\n      setMultiDayWidth(null);\n      setDragHandlePosition(null);\n    }\n  };\n\n  return (\n    <DndContext\n      id={dndContextId}\n      onDragEnd={handleDragEnd}\n      onDragOver={handleDragOver}\n      onDragStart={handleDragStart}\n      sensors={sensors}\n    >\n      <CalendarDndContext.Provider\n        value={{\n          activeEvent,\n          activeId,\n          activeView,\n          currentTime,\n          dragHandlePosition,\n          eventHeight,\n          isMultiDay,\n          multiDayWidth,\n        }}\n      >\n        {children}\n\n        <DragOverlay adjustScale={false} dropAnimation={null}>\n          {activeEvent && activeView && (\n            <div\n              style={{\n                height: eventHeight ? `${eventHeight}px` : \"auto\",\n                width:\n                  isMultiDay && multiDayWidth ? `${multiDayWidth}%` : \"100%\",\n                // Remove the transform that was causing the shift\n              }}\n            >\n              <EventItem\n                currentTime={currentTime || undefined}\n                event={activeEvent}\n                isDragging={true}\n                isFirstDay={dragHandlePosition?.data?.isFirstDay !== false}\n                isLastDay={dragHandlePosition?.data?.isLastDay !== false}\n                showTime={activeView !== \"month\"}\n                view={activeView}\n              />\n            </div>\n          )}\n        </DragOverlay>\n      </CalendarDndContext.Provider>\n    </DndContext>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/constants.ts",
    "content": "// Height of calendar events in pixels - used in month, week and day views\nexport const EventHeight = 24;\n\n// Vertical gap between events in pixels - controls spacing in month view\nexport const EventGap = 4;\n\n// Height of hour cells in week and day views - controls the scale of time display\nexport const WeekCellsHeight = 64;\n\n// Number of days to show in the agenda view\nexport const AgendaDaysToShow = 30;\n\n// Start and end hours for the week and day views\nexport const StartHour = 0;\nexport const EndHour = 24;\n\n// Default start and end times\nexport const DefaultStartHour = 9; // 9 AM\nexport const DefaultEndHour = 10; // 10 AM\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/day-view.tsx",
    "content": "\"use client\";\n\nimport {\n  addHours,\n  areIntervalsOverlapping,\n  differenceInMinutes,\n  eachHourOfInterval,\n  format,\n  getHours,\n  getMinutes,\n  isSameDay,\n  startOfDay,\n} from \"date-fns\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport {\n  type CalendarEvent,\n  DraggableEvent,\n  DroppableCell,\n  EventItem,\n  isMultiDayEvent,\n  useCurrentTimeIndicator,\n  WeekCellsHeight,\n} from \"@/registry/default/components/event-calendar\";\nimport {\n  EndHour,\n  StartHour,\n} from \"@/registry/default/components/event-calendar/constants\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ninterface DayViewProps {\n  currentDate: Date;\n  events: CalendarEvent[];\n  onEventSelect: (event: CalendarEvent) => void;\n  onEventCreate: (startTime: Date) => void;\n}\n\ninterface PositionedEvent {\n  event: CalendarEvent;\n  top: number;\n  height: number;\n  left: number;\n  width: number;\n  zIndex: number;\n}\n\nexport function DayView({\n  currentDate,\n  events,\n  onEventSelect,\n  onEventCreate,\n}: DayViewProps) {\n  const hours = useMemo(() => {\n    const dayStart = startOfDay(currentDate);\n    return eachHourOfInterval({\n      end: addHours(dayStart, EndHour - 1),\n      start: addHours(dayStart, StartHour),\n    });\n  }, [currentDate]);\n\n  const dayEvents = useMemo(() => {\n    return events\n      .filter((event) => {\n        const eventStart = new Date(event.start);\n        const eventEnd = new Date(event.end);\n        return (\n          isSameDay(currentDate, eventStart) ||\n          isSameDay(currentDate, eventEnd) ||\n          (currentDate > eventStart && currentDate < eventEnd)\n        );\n      })\n      .sort(\n        (a, b) => new Date(a.start).getTime() - new Date(b.start).getTime(),\n      );\n  }, [currentDate, events]);\n\n  // Filter all-day events\n  const allDayEvents = useMemo(() => {\n    return dayEvents.filter((event) => {\n      // Include explicitly marked all-day events or multi-day events\n      return event.allDay || isMultiDayEvent(event);\n    });\n  }, [dayEvents]);\n\n  // Get only single-day time-based events\n  const timeEvents = useMemo(() => {\n    return dayEvents.filter((event) => {\n      // Exclude all-day events and multi-day events\n      return !event.allDay && !isMultiDayEvent(event);\n    });\n  }, [dayEvents]);\n\n  // Process events to calculate positions\n  const positionedEvents = useMemo(() => {\n    const result: PositionedEvent[] = [];\n    const dayStart = startOfDay(currentDate);\n\n    // Sort events by start time and duration\n    const sortedEvents = [...timeEvents].sort((a, b) => {\n      const aStart = new Date(a.start);\n      const bStart = new Date(b.start);\n      const aEnd = new Date(a.end);\n      const bEnd = new Date(b.end);\n\n      // First sort by start time\n      if (aStart < bStart) return -1;\n      if (aStart > bStart) return 1;\n\n      // If start times are equal, sort by duration (longer events first)\n      const aDuration = differenceInMinutes(aEnd, aStart);\n      const bDuration = differenceInMinutes(bEnd, bStart);\n      return bDuration - aDuration;\n    });\n\n    // Track columns for overlapping events\n    const columns: { event: CalendarEvent; end: Date }[][] = [];\n\n    for (const event of sortedEvents) {\n      const eventStart = new Date(event.start);\n      const eventEnd = new Date(event.end);\n\n      // Adjust start and end times if they're outside this day\n      const adjustedStart = isSameDay(currentDate, eventStart)\n        ? eventStart\n        : dayStart;\n      const adjustedEnd = isSameDay(currentDate, eventEnd)\n        ? eventEnd\n        : addHours(dayStart, 24);\n\n      // Calculate top position and height\n      const startHour =\n        getHours(adjustedStart) + getMinutes(adjustedStart) / 60;\n      const endHour = getHours(adjustedEnd) + getMinutes(adjustedEnd) / 60;\n\n      const top = (startHour - StartHour) * WeekCellsHeight;\n      const height = (endHour - startHour) * WeekCellsHeight;\n\n      // Find a column for this event\n      let columnIndex = 0;\n      let placed = false;\n\n      while (!placed) {\n        const col = columns[columnIndex] || [];\n        if (col.length === 0) {\n          columns[columnIndex] = col;\n          placed = true;\n        } else {\n          const overlaps = col.some((c) =>\n            areIntervalsOverlapping(\n              { end: adjustedEnd, start: adjustedStart },\n              { end: new Date(c.event.end), start: new Date(c.event.start) },\n            ),\n          );\n\n          if (!overlaps) {\n            placed = true;\n          } else {\n            columnIndex++;\n          }\n        }\n      }\n\n      // Ensure column is initialized before pushing\n      const currentColumn = columns[columnIndex] || [];\n      columns[columnIndex] = currentColumn;\n      currentColumn.push({ end: adjustedEnd, event });\n\n      // First column takes full width, others are indented by 10% and take 90% width\n      const width = columnIndex === 0 ? 1 : 0.9;\n      const left = columnIndex === 0 ? 0 : columnIndex * 0.1;\n\n      result.push({\n        event,\n        height,\n        left,\n        top,\n        width,\n        zIndex: 10 + columnIndex,\n      });\n    }\n\n    return result;\n  }, [currentDate, timeEvents]);\n\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onEventSelect(event);\n  };\n\n  const showAllDaySection = allDayEvents.length > 0;\n  const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicator(\n    currentDate,\n    \"day\",\n  );\n\n  return (\n    <div className=\"contents\" data-slot=\"day-view\">\n      {showAllDaySection && (\n        <div className=\"border-border/70 border-t bg-muted/50\">\n          <div className=\"grid grid-cols-[3rem_1fr] sm:grid-cols-[4rem_1fr]\">\n            <div className=\"relative\">\n              <span className=\"absolute bottom-0 left-0 h-6 w-16 max-w-full pe-2 text-right text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\">\n                All day\n              </span>\n            </div>\n            <div className=\"relative border-border/70 border-r p-1 last:border-r-0\">\n              {allDayEvents.map((event) => {\n                const eventStart = new Date(event.start);\n                const eventEnd = new Date(event.end);\n                const isFirstDay = isSameDay(currentDate, eventStart);\n                const isLastDay = isSameDay(currentDate, eventEnd);\n\n                return (\n                  <EventItem\n                    event={event}\n                    isFirstDay={isFirstDay}\n                    isLastDay={isLastDay}\n                    key={`spanning-${event.id}`}\n                    onClick={(e) => handleEventClick(event, e)}\n                    view=\"month\"\n                  >\n                    {/* Always show the title in day view for better usability */}\n                    <div>{event.title}</div>\n                  </EventItem>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid flex-1 grid-cols-[3rem_1fr] overflow-hidden border-border/70 border-t sm:grid-cols-[4rem_1fr]\">\n        <div>\n          {hours.map((hour, index) => (\n            <div\n              className=\"relative h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0\"\n              key={hour.toString()}\n            >\n              {index > 0 && (\n                <span className=\"absolute -top-3 left-0 flex h-6 w-16 max-w-full items-center justify-end bg-background pe-2 text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\">\n                  {format(hour, \"h a\")}\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"relative\">\n          {/* Positioned events */}\n          {positionedEvents.map((positionedEvent) => (\n            <div\n              className=\"absolute z-10 px-0.5\"\n              key={positionedEvent.event.id}\n              style={{\n                height: `${positionedEvent.height}px`,\n                left: `${positionedEvent.left * 100}%`,\n                top: `${positionedEvent.top}px`,\n                width: `${positionedEvent.width * 100}%`,\n                zIndex: positionedEvent.zIndex,\n              }}\n            >\n              <div className=\"size-full\">\n                <DraggableEvent\n                  event={positionedEvent.event}\n                  height={positionedEvent.height}\n                  onClick={(e) => handleEventClick(positionedEvent.event, e)}\n                  showTime\n                  view=\"day\"\n                />\n              </div>\n            </div>\n          ))}\n\n          {/* Current time indicator */}\n          {currentTimeVisible && (\n            <div\n              className=\"pointer-events-none absolute right-0 left-0 z-20\"\n              style={{ top: `${currentTimePosition}%` }}\n            >\n              <div className=\"relative flex items-center\">\n                <div className=\"absolute -left-1 h-2 w-2 rounded-full bg-primary\" />\n                <div className=\"h-[2px] w-full bg-primary\" />\n              </div>\n            </div>\n          )}\n\n          {/* Time grid */}\n          {hours.map((hour) => {\n            const hourValue = getHours(hour);\n            return (\n              <div\n                className=\"relative h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0\"\n                key={hour.toString()}\n              >\n                {/* Quarter-hour intervals */}\n                {[0, 1, 2, 3].map((quarter) => {\n                  const quarterHourTime = hourValue + quarter * 0.25;\n                  return (\n                    <DroppableCell\n                      className={cn(\n                        \"absolute h-[calc(var(--week-cells-height)/4)] w-full\",\n                        quarter === 0 && \"top-0\",\n                        quarter === 1 &&\n                          \"top-[calc(var(--week-cells-height)/4)]\",\n                        quarter === 2 &&\n                          \"top-[calc(var(--week-cells-height)/4*2)]\",\n                        quarter === 3 &&\n                          \"top-[calc(var(--week-cells-height)/4*3)]\",\n                      )}\n                      date={currentDate}\n                      id={`day-cell-${currentDate.toISOString()}-${quarterHourTime}`}\n                      key={`${hour.toString()}-${quarter}`}\n                      onClick={() => {\n                        const startTime = new Date(currentDate);\n                        startTime.setHours(hourValue);\n                        startTime.setMinutes(quarter * 15);\n                        onEventCreate(startTime);\n                      }}\n                      time={quarterHourTime}\n                    />\n                  );\n                })}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/draggable-event.tsx",
    "content": "\"use client\";\n\nimport { useDraggable } from \"@dnd-kit/core\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { differenceInDays } from \"date-fns\";\nimport { useRef, useState } from \"react\";\nimport {\n  type CalendarEvent,\n  EventItem,\n  useCalendarDnd,\n} from \"@/registry/default/components/event-calendar\";\n\ninterface DraggableEventProps {\n  event: CalendarEvent;\n  view: \"month\" | \"week\" | \"day\";\n  showTime?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  height?: number;\n  isMultiDay?: boolean;\n  multiDayWidth?: number;\n  isFirstDay?: boolean;\n  isLastDay?: boolean;\n  \"aria-hidden\"?: boolean | \"true\" | \"false\";\n}\n\nexport function DraggableEvent({\n  event,\n  view,\n  showTime,\n  onClick,\n  height,\n  isMultiDay,\n  multiDayWidth,\n  isFirstDay = true,\n  isLastDay = true,\n  \"aria-hidden\": ariaHidden,\n}: DraggableEventProps) {\n  const { activeId } = useCalendarDnd();\n  const elementRef = useRef<HTMLDivElement>(null);\n  const [dragHandlePosition, setDragHandlePosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n\n  // Check if this is a multi-day event\n  const eventStart = new Date(event.start);\n  const eventEnd = new Date(event.end);\n  const isMultiDayEvent =\n    isMultiDay || event.allDay || differenceInDays(eventEnd, eventStart) >= 1;\n\n  const { attributes, listeners, setNodeRef, transform, isDragging } =\n    useDraggable({\n      data: {\n        dragHandlePosition,\n        event,\n        height: height || elementRef.current?.offsetHeight || null,\n        isFirstDay,\n        isLastDay,\n        isMultiDay: isMultiDayEvent,\n        multiDayWidth: multiDayWidth,\n        view,\n      },\n      id: `${event.id}-${view}`,\n    });\n\n  // Handle mouse down to track where on the event the user clicked\n  const handleMouseDown = (e: React.MouseEvent) => {\n    if (elementRef.current) {\n      const rect = elementRef.current.getBoundingClientRect();\n      setDragHandlePosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      });\n    }\n  };\n\n  // Don't render if this event is being dragged\n  if (isDragging || activeId === `${event.id}-${view}`) {\n    return (\n      <div\n        className=\"opacity-0\"\n        ref={setNodeRef}\n        style={{ height: height || \"auto\" }}\n      />\n    );\n  }\n\n  const style = transform\n    ? {\n        height: height || \"auto\",\n        transform: CSS.Translate.toString(transform),\n        width:\n          isMultiDayEvent && multiDayWidth ? `${multiDayWidth}%` : undefined,\n      }\n    : {\n        height: height || \"auto\",\n        width:\n          isMultiDayEvent && multiDayWidth ? `${multiDayWidth}%` : undefined,\n      };\n\n  // Handle touch start to track where on the event the user touched\n  const handleTouchStart = (e: React.TouchEvent) => {\n    if (elementRef.current) {\n      const rect = elementRef.current.getBoundingClientRect();\n      const touch = e.touches[0];\n      if (touch) {\n        setDragHandlePosition({\n          x: touch.clientX - rect.left,\n          y: touch.clientY - rect.top,\n        });\n      }\n    }\n  };\n\n  return (\n    <div\n      className=\"touch-none\"\n      ref={(node) => {\n        setNodeRef(node);\n        if (elementRef) elementRef.current = node;\n      }}\n      style={style}\n    >\n      <EventItem\n        aria-hidden={ariaHidden}\n        dndAttributes={attributes}\n        dndListeners={listeners}\n        event={event}\n        isDragging={isDragging}\n        isFirstDay={isFirstDay}\n        isLastDay={isLastDay}\n        onClick={onClick}\n        onMouseDown={handleMouseDown}\n        onTouchStart={handleTouchStart}\n        showTime={showTime}\n        view={view}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/droppable-cell.tsx",
    "content": "\"use client\";\n\nimport { useDroppable } from \"@dnd-kit/core\";\nimport { useCalendarDnd } from \"@/registry/default/components/event-calendar\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ninterface DroppableCellProps {\n  id: string;\n  date: Date;\n  time?: number; // For week/day views, represents hours (e.g., 9.25 for 9:15)\n  children?: React.ReactNode;\n  className?: string;\n  onClick?: () => void;\n}\n\nexport function DroppableCell({\n  id,\n  date,\n  time,\n  children,\n  className,\n  onClick,\n}: DroppableCellProps) {\n  const { activeEvent } = useCalendarDnd();\n\n  const { setNodeRef, isOver } = useDroppable({\n    data: {\n      date,\n      time,\n    },\n    id,\n  });\n\n  // Format time for display in tooltip (only for debugging)\n  const formattedTime =\n    time !== undefined\n      ? `${Math.floor(time)}:${Math.round((time - Math.floor(time)) * 60)\n          .toString()\n          .padStart(2, \"0\")}`\n      : null;\n\n  return (\n    <div\n      className={cn(\n        \"flex h-full flex-col overflow-hidden px-0.5 py-1 data-dragging:bg-accent sm:px-1\",\n        className,\n      )}\n      data-dragging={isOver && activeEvent ? true : undefined}\n      onClick={onClick}\n      ref={setNodeRef}\n      title={formattedTime ? `${formattedTime}` : undefined}\n    >\n      {children}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/event-calendar.tsx",
    "content": "\"use client\";\n\nimport { RiCalendarCheckLine } from \"@remixicon/react\";\nimport {\n  addDays,\n  addMonths,\n  addWeeks,\n  endOfWeek,\n  format,\n  isSameMonth,\n  startOfWeek,\n  subMonths,\n  subWeeks,\n} from \"date-fns\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  PlusIcon,\n} from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { toast } from \"sonner\";\nimport {\n  AgendaDaysToShow,\n  AgendaView,\n  addHoursToDate,\n  CalendarDndProvider,\n  type CalendarEvent,\n  type CalendarView,\n  DayView,\n  EventDialog,\n  EventGap,\n  EventHeight,\n  MonthView,\n  WeekCellsHeight,\n  WeekView,\n} from \"@/registry/default/components/event-calendar\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport interface EventCalendarProps {\n  events?: CalendarEvent[];\n  onEventAdd?: (event: CalendarEvent) => void;\n  onEventUpdate?: (event: CalendarEvent) => void;\n  onEventDelete?: (eventId: string) => void;\n  className?: string;\n  initialView?: CalendarView;\n}\n\nexport function EventCalendar({\n  events = [],\n  onEventAdd,\n  onEventUpdate,\n  onEventDelete,\n  className,\n  initialView = \"month\",\n}: EventCalendarProps) {\n  const [currentDate, setCurrentDate] = useState(new Date());\n  const [view, setView] = useState<CalendarView>(initialView);\n  const [isEventDialogOpen, setIsEventDialogOpen] = useState(false);\n  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(\n    null,\n  );\n\n  // Add keyboard shortcuts for view switching\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      // Skip if user is typing in an input, textarea or contentEditable element\n      // or if the event dialog is open\n      if (\n        isEventDialogOpen ||\n        e.target instanceof HTMLInputElement ||\n        e.target instanceof HTMLTextAreaElement ||\n        (e.target instanceof HTMLElement && e.target.isContentEditable)\n      ) {\n        return;\n      }\n\n      switch (e.key.toLowerCase()) {\n        case \"m\":\n          setView(\"month\");\n          break;\n        case \"w\":\n          setView(\"week\");\n          break;\n        case \"d\":\n          setView(\"day\");\n          break;\n        case \"a\":\n          setView(\"agenda\");\n          break;\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [isEventDialogOpen]);\n\n  const handlePrevious = () => {\n    if (view === \"month\") {\n      setCurrentDate(subMonths(currentDate, 1));\n    } else if (view === \"week\") {\n      setCurrentDate(subWeeks(currentDate, 1));\n    } else if (view === \"day\") {\n      setCurrentDate(addDays(currentDate, -1));\n    } else if (view === \"agenda\") {\n      // For agenda view, go back 30 days (a full month)\n      setCurrentDate(addDays(currentDate, -AgendaDaysToShow));\n    }\n  };\n\n  const handleNext = () => {\n    if (view === \"month\") {\n      setCurrentDate(addMonths(currentDate, 1));\n    } else if (view === \"week\") {\n      setCurrentDate(addWeeks(currentDate, 1));\n    } else if (view === \"day\") {\n      setCurrentDate(addDays(currentDate, 1));\n    } else if (view === \"agenda\") {\n      // For agenda view, go forward 30 days (a full month)\n      setCurrentDate(addDays(currentDate, AgendaDaysToShow));\n    }\n  };\n\n  const handleToday = () => {\n    setCurrentDate(new Date());\n  };\n\n  const handleEventSelect = (event: CalendarEvent) => {\n    console.log(\"Event selected:\", event); // Debug log\n    setSelectedEvent(event);\n    setIsEventDialogOpen(true);\n  };\n\n  const handleEventCreate = (startTime: Date) => {\n    console.log(\"Creating new event at:\", startTime); // Debug log\n\n    // Snap to 15-minute intervals\n    const minutes = startTime.getMinutes();\n    const remainder = minutes % 15;\n    if (remainder !== 0) {\n      if (remainder < 7.5) {\n        // Round down to nearest 15 min\n        startTime.setMinutes(minutes - remainder);\n      } else {\n        // Round up to nearest 15 min\n        startTime.setMinutes(minutes + (15 - remainder));\n      }\n      startTime.setSeconds(0);\n      startTime.setMilliseconds(0);\n    }\n\n    const newEvent: CalendarEvent = {\n      allDay: false,\n      end: addHoursToDate(startTime, 1),\n      id: \"\",\n      start: startTime,\n      title: \"\",\n    };\n    setSelectedEvent(newEvent);\n    setIsEventDialogOpen(true);\n  };\n\n  const handleEventSave = (event: CalendarEvent) => {\n    if (event.id) {\n      onEventUpdate?.(event);\n      // Show toast notification when an event is updated\n      toast(`Event \"${event.title}\" updated`, {\n        description: format(new Date(event.start), \"MMM d, yyyy\"),\n        position: \"bottom-left\",\n      });\n    } else {\n      onEventAdd?.({\n        ...event,\n        id: Math.random().toString(36).substring(2, 11),\n      });\n      // Show toast notification when an event is added\n      toast(`Event \"${event.title}\" added`, {\n        description: format(new Date(event.start), \"MMM d, yyyy\"),\n        position: \"bottom-left\",\n      });\n    }\n    setIsEventDialogOpen(false);\n    setSelectedEvent(null);\n  };\n\n  const handleEventDelete = (eventId: string) => {\n    const deletedEvent = events.find((e) => e.id === eventId);\n    onEventDelete?.(eventId);\n    setIsEventDialogOpen(false);\n    setSelectedEvent(null);\n\n    // Show toast notification when an event is deleted\n    if (deletedEvent) {\n      toast(`Event \"${deletedEvent.title}\" deleted`, {\n        description: format(new Date(deletedEvent.start), \"MMM d, yyyy\"),\n        position: \"bottom-left\",\n      });\n    }\n  };\n\n  const handleEventUpdate = (updatedEvent: CalendarEvent) => {\n    onEventUpdate?.(updatedEvent);\n\n    // Show toast notification when an event is updated via drag and drop\n    toast(`Event \"${updatedEvent.title}\" moved`, {\n      description: format(new Date(updatedEvent.start), \"MMM d, yyyy\"),\n      position: \"bottom-left\",\n    });\n  };\n\n  const viewTitle = useMemo(() => {\n    if (view === \"month\") {\n      return format(currentDate, \"MMMM yyyy\");\n    }\n    if (view === \"week\") {\n      const start = startOfWeek(currentDate, { weekStartsOn: 0 });\n      const end = endOfWeek(currentDate, { weekStartsOn: 0 });\n      if (isSameMonth(start, end)) {\n        return format(start, \"MMMM yyyy\");\n      }\n      return `${format(start, \"MMM\")} - ${format(end, \"MMM yyyy\")}`;\n    }\n    if (view === \"day\") {\n      return (\n        <>\n          <span aria-hidden=\"true\" className=\"min-[480px]:hidden\">\n            {format(currentDate, \"MMM d, yyyy\")}\n          </span>\n          <span aria-hidden=\"true\" className=\"max-[479px]:hidden min-md:hidden\">\n            {format(currentDate, \"MMMM d, yyyy\")}\n          </span>\n          <span className=\"max-md:hidden\">\n            {format(currentDate, \"EEE MMMM d, yyyy\")}\n          </span>\n        </>\n      );\n    }\n    if (view === \"agenda\") {\n      // Show the month range for agenda view\n      const start = currentDate;\n      const end = addDays(currentDate, AgendaDaysToShow - 1);\n\n      if (isSameMonth(start, end)) {\n        return format(start, \"MMMM yyyy\");\n      }\n      return `${format(start, \"MMM\")} - ${format(end, \"MMM yyyy\")}`;\n    }\n    return format(currentDate, \"MMMM yyyy\");\n  }, [currentDate, view]);\n\n  return (\n    <div\n      className=\"flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1\"\n      style={\n        {\n          \"--event-gap\": `${EventGap}px`,\n          \"--event-height\": `${EventHeight}px`,\n          \"--week-cells-height\": `${WeekCellsHeight}px`,\n        } as React.CSSProperties\n      }\n    >\n      <CalendarDndProvider onEventUpdate={handleEventUpdate}>\n        <div\n          className={cn(\n            \"flex items-center justify-between p-2 sm:p-4\",\n            className,\n          )}\n        >\n          <div className=\"flex items-center gap-1 sm:gap-4\">\n            <Button\n              className=\"max-[479px]:aspect-square max-[479px]:p-0!\"\n              onClick={handleToday}\n              variant=\"outline\"\n            >\n              <RiCalendarCheckLine\n                aria-hidden=\"true\"\n                className=\"min-[480px]:hidden\"\n                size={16}\n              />\n              <span className=\"max-[479px]:sr-only\">Today</span>\n            </Button>\n            <div className=\"flex items-center sm:gap-2\">\n              <Button\n                aria-label=\"Previous\"\n                onClick={handlePrevious}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <ChevronLeftIcon aria-hidden=\"true\" size={16} />\n              </Button>\n              <Button\n                aria-label=\"Next\"\n                onClick={handleNext}\n                size=\"icon\"\n                variant=\"ghost\"\n              >\n                <ChevronRightIcon aria-hidden=\"true\" size={16} />\n              </Button>\n            </div>\n            <h2 className=\"font-semibold text-sm sm:text-lg md:text-xl\">\n              {viewTitle}\n            </h2>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button className=\"gap-1.5 max-[479px]:h-8\" variant=\"outline\">\n                  <span>\n                    <span aria-hidden=\"true\" className=\"min-[480px]:hidden\">\n                      {view.charAt(0).toUpperCase()}\n                    </span>\n                    <span className=\"max-[479px]:sr-only\">\n                      {view.charAt(0).toUpperCase() + view.slice(1)}\n                    </span>\n                  </span>\n                  <ChevronDownIcon\n                    aria-hidden=\"true\"\n                    className=\"-me-1 opacity-60\"\n                    size={16}\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"min-w-32\">\n                <DropdownMenuItem onClick={() => setView(\"month\")}>\n                  Month <DropdownMenuShortcut>M</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setView(\"week\")}>\n                  Week <DropdownMenuShortcut>W</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setView(\"day\")}>\n                  Day <DropdownMenuShortcut>D</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuItem onClick={() => setView(\"agenda\")}>\n                  Agenda <DropdownMenuShortcut>A</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Button\n              className=\"max-[479px]:aspect-square max-[479px]:p-0!\"\n              onClick={() => {\n                setSelectedEvent(null); // Ensure we're creating a new event\n                setIsEventDialogOpen(true);\n              }}\n              size=\"sm\"\n            >\n              <PlusIcon\n                aria-hidden=\"true\"\n                className=\"opacity-60 sm:-ms-1\"\n                size={16}\n              />\n              <span className=\"max-sm:sr-only\">New event</span>\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"flex flex-1 flex-col\">\n          {view === \"month\" && (\n            <MonthView\n              currentDate={currentDate}\n              events={events}\n              onEventCreate={handleEventCreate}\n              onEventSelect={handleEventSelect}\n            />\n          )}\n          {view === \"week\" && (\n            <WeekView\n              currentDate={currentDate}\n              events={events}\n              onEventCreate={handleEventCreate}\n              onEventSelect={handleEventSelect}\n            />\n          )}\n          {view === \"day\" && (\n            <DayView\n              currentDate={currentDate}\n              events={events}\n              onEventCreate={handleEventCreate}\n              onEventSelect={handleEventSelect}\n            />\n          )}\n          {view === \"agenda\" && (\n            <AgendaView\n              currentDate={currentDate}\n              events={events}\n              onEventSelect={handleEventSelect}\n            />\n          )}\n        </div>\n\n        <EventDialog\n          event={selectedEvent}\n          isOpen={isEventDialogOpen}\n          onClose={() => {\n            setIsEventDialogOpen(false);\n            setSelectedEvent(null);\n          }}\n          onDelete={handleEventDelete}\n          onSave={handleEventSave}\n        />\n      </CalendarDndProvider>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/event-dialog.tsx",
    "content": "\"use client\";\n\nimport { RiCalendarLine, RiDeleteBinLine } from \"@remixicon/react\";\nimport { format, isBefore } from \"date-fns\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type {\n  CalendarEvent,\n  EventColor,\n} from \"@/registry/default/components/event-calendar\";\nimport {\n  DefaultEndHour,\n  DefaultStartHour,\n  EndHour,\n  StartHour,\n} from \"@/registry/default/components/event-calendar/constants\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/default/ui/dialog\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\ninterface EventDialogProps {\n  event: CalendarEvent | null;\n  isOpen: boolean;\n  onClose: () => void;\n  onSave: (event: CalendarEvent) => void;\n  onDelete: (eventId: string) => void;\n}\n\nexport function EventDialog({\n  event,\n  isOpen,\n  onClose,\n  onSave,\n  onDelete,\n}: EventDialogProps) {\n  const [title, setTitle] = useState(\"\");\n  const [description, setDescription] = useState(\"\");\n  const [startDate, setStartDate] = useState<Date>(new Date());\n  const [endDate, setEndDate] = useState<Date>(new Date());\n  const [startTime, setStartTime] = useState(`${DefaultStartHour}:00`);\n  const [endTime, setEndTime] = useState(`${DefaultEndHour}:00`);\n  const [allDay, setAllDay] = useState(false);\n  const [location, setLocation] = useState(\"\");\n  const [color, setColor] = useState<EventColor>(\"sky\");\n  const [error, setError] = useState<string | null>(null);\n  const [startDateOpen, setStartDateOpen] = useState(false);\n  const [endDateOpen, setEndDateOpen] = useState(false);\n\n  // Debug log to check what event is being passed\n  useEffect(() => {\n    console.log(\"EventDialog received event:\", event);\n  }, [event]);\n\n  const resetForm = useCallback(() => {\n    setTitle(\"\");\n    setDescription(\"\");\n    setStartDate(new Date());\n    setEndDate(new Date());\n    setStartTime(`${DefaultStartHour}:00`);\n    setEndTime(`${DefaultEndHour}:00`);\n    setAllDay(false);\n    setLocation(\"\");\n    setColor(\"sky\");\n    setError(null);\n  }, []);\n\n  const formatTimeForInput = useCallback((date: Date) => {\n    const hours = date.getHours().toString().padStart(2, \"0\");\n    const minutes = Math.floor(date.getMinutes() / 15) * 15;\n    return `${hours}:${minutes.toString().padStart(2, \"0\")}`;\n  }, []);\n\n  useEffect(() => {\n    if (event) {\n      setTitle(event.title || \"\");\n      setDescription(event.description || \"\");\n\n      const start = new Date(event.start);\n      const end = new Date(event.end);\n\n      setStartDate(start);\n      setEndDate(end);\n      setStartTime(formatTimeForInput(start));\n      setEndTime(formatTimeForInput(end));\n      setAllDay(event.allDay || false);\n      setLocation(event.location || \"\");\n      setColor((event.color as EventColor) || \"sky\");\n      setError(null); // Reset error when opening dialog\n    } else {\n      resetForm();\n    }\n  }, [event, formatTimeForInput, resetForm]);\n\n  // Memoize time options so they're only calculated once\n  const timeOptions = useMemo(() => {\n    const options = [];\n    for (let hour = StartHour; hour <= EndHour; hour++) {\n      for (let minute = 0; minute < 60; minute += 15) {\n        const formattedHour = hour.toString().padStart(2, \"0\");\n        const formattedMinute = minute.toString().padStart(2, \"0\");\n        const value = `${formattedHour}:${formattedMinute}`;\n        // Use a fixed date to avoid unnecessary date object creations\n        const date = new Date(2000, 0, 1, hour, minute);\n        const label = format(date, \"h:mm a\");\n        options.push({ label, value });\n      }\n    }\n    return options;\n  }, []); // Empty dependency array ensures this only runs once\n\n  const handleSave = () => {\n    const start = new Date(startDate);\n    const end = new Date(endDate);\n\n    if (!allDay) {\n      const [startHours = 0, startMinutes = 0] = startTime\n        .split(\":\")\n        .map(Number);\n      const [endHours = 0, endMinutes = 0] = endTime.split(\":\").map(Number);\n\n      if (\n        startHours < StartHour ||\n        startHours > EndHour ||\n        endHours < StartHour ||\n        endHours > EndHour\n      ) {\n        setError(\n          `Selected time must be between ${StartHour}:00 and ${EndHour}:00`,\n        );\n        return;\n      }\n\n      start.setHours(startHours, startMinutes, 0);\n      end.setHours(endHours, endMinutes, 0);\n    } else {\n      start.setHours(0, 0, 0, 0);\n      end.setHours(23, 59, 59, 999);\n    }\n\n    // Validate that end date is not before start date\n    if (isBefore(end, start)) {\n      setError(\"End date cannot be before start date\");\n      return;\n    }\n\n    // Use generic title if empty\n    const eventTitle = title.trim() ? title : \"(no title)\";\n\n    onSave({\n      allDay,\n      color,\n      description,\n      end,\n      id: event?.id || \"\",\n      location,\n      start,\n      title: eventTitle,\n    });\n  };\n\n  const handleDelete = () => {\n    if (event?.id) {\n      onDelete(event.id);\n    }\n  };\n\n  // Updated color options to match types.ts\n  const colorOptions: Array<{\n    value: EventColor;\n    label: string;\n    bgClass: string;\n    borderClass: string;\n  }> = [\n    {\n      bgClass: \"bg-sky-400 data-[state=checked]:bg-sky-400\",\n      borderClass: \"border-sky-400 data-[state=checked]:border-sky-400\",\n      label: \"Sky\",\n      value: \"sky\",\n    },\n    {\n      bgClass: \"bg-amber-400 data-[state=checked]:bg-amber-400\",\n      borderClass: \"border-amber-400 data-[state=checked]:border-amber-400\",\n      label: \"Amber\",\n      value: \"amber\",\n    },\n    {\n      bgClass: \"bg-violet-400 data-[state=checked]:bg-violet-400\",\n      borderClass: \"border-violet-400 data-[state=checked]:border-violet-400\",\n      label: \"Violet\",\n      value: \"violet\",\n    },\n    {\n      bgClass: \"bg-rose-400 data-[state=checked]:bg-rose-400\",\n      borderClass: \"border-rose-400 data-[state=checked]:border-rose-400\",\n      label: \"Rose\",\n      value: \"rose\",\n    },\n    {\n      bgClass: \"bg-emerald-400 data-[state=checked]:bg-emerald-400\",\n      borderClass: \"border-emerald-400 data-[state=checked]:border-emerald-400\",\n      label: \"Emerald\",\n      value: \"emerald\",\n    },\n    {\n      bgClass: \"bg-orange-400 data-[state=checked]:bg-orange-400\",\n      borderClass: \"border-orange-400 data-[state=checked]:border-orange-400\",\n      label: \"Orange\",\n      value: \"orange\",\n    },\n  ];\n\n  return (\n    <Dialog onOpenChange={(open) => !open && onClose()} open={isOpen}>\n      <DialogContent className=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>{event?.id ? \"Edit Event\" : \"Create Event\"}</DialogTitle>\n          <DialogDescription className=\"sr-only\">\n            {event?.id\n              ? \"Edit the details of this event\"\n              : \"Add a new event to your calendar\"}\n          </DialogDescription>\n        </DialogHeader>\n        {error && (\n          <div className=\"rounded-md bg-destructive/15 px-3 py-2 text-destructive text-sm\">\n            {error}\n          </div>\n        )}\n        <div className=\"grid gap-4 py-4\">\n          <div className=\"*:not-first:mt-1.5\">\n            <Label htmlFor=\"title\">Title</Label>\n            <Input\n              id=\"title\"\n              onChange={(e) => setTitle(e.target.value)}\n              value={title}\n            />\n          </div>\n\n          <div className=\"*:not-first:mt-1.5\">\n            <Label htmlFor=\"description\">Description</Label>\n            <Textarea\n              id=\"description\"\n              onChange={(e) => setDescription(e.target.value)}\n              rows={3}\n              value={description}\n            />\n          </div>\n\n          <div className=\"flex gap-4\">\n            <div className=\"flex-1 *:not-first:mt-1.5\">\n              <Label htmlFor=\"start-date\">Start Date</Label>\n              <Popover onOpenChange={setStartDateOpen} open={startDateOpen}>\n                <PopoverTrigger asChild>\n                  <Button\n                    className={cn(\n                      \"group w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\",\n                      !startDate && \"text-muted-foreground\",\n                    )}\n                    id=\"start-date\"\n                    variant={\"outline\"}\n                  >\n                    <span\n                      className={cn(\n                        \"truncate\",\n                        !startDate && \"text-muted-foreground\",\n                      )}\n                    >\n                      {startDate ? format(startDate, \"PPP\") : \"Pick a date\"}\n                    </span>\n                    <RiCalendarLine\n                      aria-hidden=\"true\"\n                      className=\"shrink-0 text-muted-foreground/80\"\n                      size={16}\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"start\" className=\"w-auto p-2\">\n                  <Calendar\n                    defaultMonth={startDate}\n                    mode=\"single\"\n                    onSelect={(date) => {\n                      if (date) {\n                        setStartDate(date);\n                        // If end date is before the new start date, update it to match the start date\n                        if (isBefore(endDate, date)) {\n                          setEndDate(date);\n                        }\n                        setError(null);\n                        setStartDateOpen(false);\n                      }\n                    }}\n                    selected={startDate}\n                  />\n                </PopoverContent>\n              </Popover>\n            </div>\n\n            {!allDay && (\n              <div className=\"min-w-28 *:not-first:mt-1.5\">\n                <Label htmlFor=\"start-time\">Start Time</Label>\n                <Select onValueChange={setStartTime} value={startTime}>\n                  <SelectTrigger id=\"start-time\">\n                    <SelectValue placeholder=\"Select time\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {timeOptions.map((option) => (\n                      <SelectItem key={option.value} value={option.value}>\n                        {option.label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            )}\n          </div>\n\n          <div className=\"flex gap-4\">\n            <div className=\"flex-1 *:not-first:mt-1.5\">\n              <Label htmlFor=\"end-date\">End Date</Label>\n              <Popover onOpenChange={setEndDateOpen} open={endDateOpen}>\n                <PopoverTrigger asChild>\n                  <Button\n                    className={cn(\n                      \"group w-full justify-between border-input bg-background px-3 font-normal outline-none outline-offset-0 hover:bg-background focus-visible:outline-[3px]\",\n                      !endDate && \"text-muted-foreground\",\n                    )}\n                    id=\"end-date\"\n                    variant={\"outline\"}\n                  >\n                    <span\n                      className={cn(\n                        \"truncate\",\n                        !endDate && \"text-muted-foreground\",\n                      )}\n                    >\n                      {endDate ? format(endDate, \"PPP\") : \"Pick a date\"}\n                    </span>\n                    <RiCalendarLine\n                      aria-hidden=\"true\"\n                      className=\"shrink-0 text-muted-foreground/80\"\n                      size={16}\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"start\" className=\"w-auto p-2\">\n                  <Calendar\n                    defaultMonth={endDate}\n                    disabled={{ before: startDate }}\n                    mode=\"single\"\n                    onSelect={(date) => {\n                      if (date) {\n                        setEndDate(date);\n                        setError(null);\n                        setEndDateOpen(false);\n                      }\n                    }}\n                    selected={endDate}\n                  />\n                </PopoverContent>\n              </Popover>\n            </div>\n\n            {!allDay && (\n              <div className=\"min-w-28 *:not-first:mt-1.5\">\n                <Label htmlFor=\"end-time\">End Time</Label>\n                <Select onValueChange={setEndTime} value={endTime}>\n                  <SelectTrigger id=\"end-time\">\n                    <SelectValue placeholder=\"Select time\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {timeOptions.map((option) => (\n                      <SelectItem key={option.value} value={option.value}>\n                        {option.label}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Checkbox\n              checked={allDay}\n              id=\"all-day\"\n              onCheckedChange={(checked) => setAllDay(checked === true)}\n            />\n            <Label htmlFor=\"all-day\">All day</Label>\n          </div>\n\n          <div className=\"*:not-first:mt-1.5\">\n            <Label htmlFor=\"location\">Location</Label>\n            <Input\n              id=\"location\"\n              onChange={(e) => setLocation(e.target.value)}\n              value={location}\n            />\n          </div>\n          <fieldset className=\"space-y-4\">\n            <legend className=\"font-medium text-foreground text-sm leading-none\">\n              Etiquette\n            </legend>\n            <RadioGroup\n              className=\"flex gap-1.5\"\n              defaultValue={colorOptions[0]?.value}\n              onValueChange={(value: EventColor) => setColor(value)}\n              value={color}\n            >\n              {colorOptions.map((colorOption) => (\n                <RadioGroupItem\n                  aria-label={colorOption.label}\n                  className={cn(\n                    \"size-6 shadow-none\",\n                    colorOption.bgClass,\n                    colorOption.borderClass,\n                  )}\n                  id={`color-${colorOption.value}`}\n                  key={colorOption.value}\n                  value={colorOption.value}\n                />\n              ))}\n            </RadioGroup>\n          </fieldset>\n        </div>\n        <DialogFooter className=\"flex-row sm:justify-between\">\n          {event?.id && (\n            <Button\n              aria-label=\"Delete event\"\n              onClick={handleDelete}\n              size=\"icon\"\n              variant=\"outline\"\n            >\n              <RiDeleteBinLine aria-hidden=\"true\" size={16} />\n            </Button>\n          )}\n          <div className=\"flex flex-1 justify-end gap-2\">\n            <Button onClick={onClose} variant=\"outline\">\n              Cancel\n            </Button>\n            <Button onClick={handleSave}>Save</Button>\n          </div>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/event-item.tsx",
    "content": "\"use client\";\n\nimport type { DraggableAttributes } from \"@dnd-kit/core\";\nimport type { SyntheticListenerMap } from \"@dnd-kit/core/dist/hooks/utilities\";\nimport { differenceInMinutes, format, getMinutes, isPast } from \"date-fns\";\nimport { useMemo } from \"react\";\nimport {\n  type CalendarEvent,\n  getBorderRadiusClasses,\n  getEventColorClasses,\n} from \"@/registry/default/components/event-calendar\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\n// Using date-fns format with custom formatting:\n// 'h' - hours (1-12)\n// 'a' - am/pm\n// ':mm' - minutes with leading zero (only if the token 'mm' is present)\nconst formatTimeWithOptionalMinutes = (date: Date) => {\n  return format(date, getMinutes(date) === 0 ? \"ha\" : \"h:mma\").toLowerCase();\n};\n\ninterface EventWrapperProps {\n  event: CalendarEvent;\n  isFirstDay?: boolean;\n  isLastDay?: boolean;\n  isDragging?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  className?: string;\n  children: React.ReactNode;\n  currentTime?: Date;\n  dndListeners?: SyntheticListenerMap;\n  dndAttributes?: DraggableAttributes;\n  onMouseDown?: (e: React.MouseEvent) => void;\n  onTouchStart?: (e: React.TouchEvent) => void;\n}\n\n// Shared wrapper component for event styling\nfunction EventWrapper({\n  event,\n  isFirstDay = true,\n  isLastDay = true,\n  isDragging,\n  onClick,\n  className,\n  children,\n  currentTime,\n  dndListeners,\n  dndAttributes,\n  onMouseDown,\n  onTouchStart,\n}: EventWrapperProps) {\n  // Always use the currentTime (if provided) to determine if the event is in the past\n  const displayEnd = currentTime\n    ? new Date(\n        new Date(currentTime).getTime() +\n          (new Date(event.end).getTime() - new Date(event.start).getTime()),\n      )\n    : new Date(event.end);\n\n  const isEventInPast = isPast(displayEnd);\n\n  return (\n    <button\n      className={cn(\n        \"flex size-full select-none overflow-hidden px-1 text-left font-medium outline-none backdrop-blur-md transition focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-dragging:cursor-grabbing data-past-event:line-through data-dragging:shadow-lg sm:px-2\",\n        getEventColorClasses(event.color),\n        getBorderRadiusClasses(isFirstDay, isLastDay),\n        className,\n      )}\n      data-dragging={isDragging || undefined}\n      data-past-event={isEventInPast || undefined}\n      onClick={onClick}\n      onMouseDown={onMouseDown}\n      onTouchStart={onTouchStart}\n      type=\"button\"\n      {...dndListeners}\n      {...dndAttributes}\n    >\n      {children}\n    </button>\n  );\n}\n\ninterface EventItemProps {\n  event: CalendarEvent;\n  view: \"month\" | \"week\" | \"day\" | \"agenda\";\n  isDragging?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showTime?: boolean;\n  currentTime?: Date; // For updating time during drag\n  isFirstDay?: boolean;\n  isLastDay?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  dndListeners?: SyntheticListenerMap;\n  dndAttributes?: DraggableAttributes;\n  onMouseDown?: (e: React.MouseEvent) => void;\n  onTouchStart?: (e: React.TouchEvent) => void;\n}\n\nexport function EventItem({\n  event,\n  view,\n  isDragging,\n  onClick,\n  showTime,\n  currentTime,\n  isFirstDay = true,\n  isLastDay = true,\n  children,\n  className,\n  dndListeners,\n  dndAttributes,\n  onMouseDown,\n  onTouchStart,\n}: EventItemProps) {\n  const eventColor = event.color;\n\n  // Use the provided currentTime (for dragging) or the event's actual time\n  const displayStart = useMemo(() => {\n    return currentTime || new Date(event.start);\n  }, [currentTime, event.start]);\n\n  const displayEnd = useMemo(() => {\n    return currentTime\n      ? new Date(\n          new Date(currentTime).getTime() +\n            (new Date(event.end).getTime() - new Date(event.start).getTime()),\n        )\n      : new Date(event.end);\n  }, [currentTime, event.start, event.end]);\n\n  // Calculate event duration in minutes\n  const durationMinutes = useMemo(() => {\n    return differenceInMinutes(displayEnd, displayStart);\n  }, [displayStart, displayEnd]);\n\n  const getEventTime = () => {\n    if (event.allDay) return \"All day\";\n\n    // For short events (less than 45 minutes), only show start time\n    if (durationMinutes < 45) {\n      return formatTimeWithOptionalMinutes(displayStart);\n    }\n\n    // For longer events, show both start and end time\n    return `${formatTimeWithOptionalMinutes(displayStart)} - ${formatTimeWithOptionalMinutes(displayEnd)}`;\n  };\n\n  if (view === \"month\") {\n    return (\n      <EventWrapper\n        className={cn(\n          \"mt-[var(--event-gap)] h-[var(--event-height)] items-center text-[10px] sm:text-xs\",\n          className,\n        )}\n        currentTime={currentTime}\n        dndAttributes={dndAttributes}\n        dndListeners={dndListeners}\n        event={event}\n        isDragging={isDragging}\n        isFirstDay={isFirstDay}\n        isLastDay={isLastDay}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\n        onTouchStart={onTouchStart}\n      >\n        {children || (\n          <span className=\"truncate\">\n            {!event.allDay && (\n              <span className=\"truncate font-normal opacity-70 sm:text-[11px]\">\n                {formatTimeWithOptionalMinutes(displayStart)}{\" \"}\n              </span>\n            )}\n            {event.title}\n          </span>\n        )}\n      </EventWrapper>\n    );\n  }\n\n  if (view === \"week\" || view === \"day\") {\n    return (\n      <EventWrapper\n        className={cn(\n          \"py-1\",\n          durationMinutes < 45 ? \"items-center\" : \"flex-col\",\n          view === \"week\" ? \"text-[10px] sm:text-xs\" : \"text-xs\",\n          className,\n        )}\n        currentTime={currentTime}\n        dndAttributes={dndAttributes}\n        dndListeners={dndListeners}\n        event={event}\n        isDragging={isDragging}\n        isFirstDay={isFirstDay}\n        isLastDay={isLastDay}\n        onClick={onClick}\n        onMouseDown={onMouseDown}\n        onTouchStart={onTouchStart}\n      >\n        {durationMinutes < 45 ? (\n          <div className=\"truncate\">\n            {event.title}{\" \"}\n            {showTime && (\n              <span className=\"opacity-70\">\n                {formatTimeWithOptionalMinutes(displayStart)}\n              </span>\n            )}\n          </div>\n        ) : (\n          <>\n            <div className=\"truncate font-medium\">{event.title}</div>\n            {showTime && (\n              <div className=\"truncate font-normal opacity-70 sm:text-[11px]\">\n                {getEventTime()}\n              </div>\n            )}\n          </>\n        )}\n      </EventWrapper>\n    );\n  }\n\n  // Agenda view - kept separate since it's significantly different\n  return (\n    <button\n      className={cn(\n        \"flex w-full flex-col gap-1 rounded p-2 text-left outline-none transition focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-past-event:line-through data-past-event:opacity-90\",\n        getEventColorClasses(eventColor),\n        className,\n      )}\n      data-past-event={isPast(new Date(event.end)) || undefined}\n      onClick={onClick}\n      onMouseDown={onMouseDown}\n      onTouchStart={onTouchStart}\n      type=\"button\"\n      {...dndListeners}\n      {...dndAttributes}\n    >\n      <div className=\"font-medium text-sm\">{event.title}</div>\n      <div className=\"text-xs opacity-70\">\n        {event.allDay ? (\n          <span>All day</span>\n        ) : (\n          <span className=\"uppercase\">\n            {formatTimeWithOptionalMinutes(displayStart)} -{\" \"}\n            {formatTimeWithOptionalMinutes(displayEnd)}\n          </span>\n        )}\n        {event.location && (\n          <>\n            <span className=\"px-1 opacity-35\"> · </span>\n            <span>{event.location}</span>\n          </>\n        )}\n      </div>\n      {event.description && (\n        <div className=\"my-1 text-xs opacity-90\">{event.description}</div>\n      )}\n    </button>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/events-popup.tsx",
    "content": "\"use client\";\n\nimport { format, isSameDay } from \"date-fns\";\nimport { XIcon } from \"lucide-react\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport {\n  type CalendarEvent,\n  EventItem,\n} from \"@/registry/default/components/event-calendar\";\n\ninterface EventsPopupProps {\n  date: Date;\n  events: CalendarEvent[];\n  position: { top: number; left: number };\n  onClose: () => void;\n  onEventSelect: (event: CalendarEvent) => void;\n}\n\nexport function EventsPopup({\n  date,\n  events,\n  position,\n  onClose,\n  onEventSelect,\n}: EventsPopupProps) {\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  // Handle click outside to close popup\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        popupRef.current &&\n        !popupRef.current.contains(event.target as Node)\n      ) {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [onClose]);\n\n  // Handle escape key to close popup\n  useEffect(() => {\n    const handleEscKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscKey);\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscKey);\n    };\n  }, [onClose]);\n\n  const handleEventClick = (event: CalendarEvent) => {\n    onEventSelect(event);\n    onClose();\n  };\n\n  // Adjust position to ensure popup stays within viewport\n  const adjustedPosition = useMemo(() => {\n    const positionCopy = { ...position };\n\n    // Check if we need to adjust the position to fit in the viewport\n    if (popupRef.current) {\n      const rect = popupRef.current.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n\n      // Adjust horizontally if needed\n      if (positionCopy.left + rect.width > viewportWidth) {\n        positionCopy.left = Math.max(0, viewportWidth - rect.width);\n      }\n\n      // Adjust vertically if needed\n      if (positionCopy.top + rect.height > viewportHeight) {\n        positionCopy.top = Math.max(0, viewportHeight - rect.height);\n      }\n    }\n\n    return positionCopy;\n  }, [position]);\n\n  return (\n    <div\n      className=\"absolute z-50 max-h-96 w-80 overflow-auto rounded-md border bg-background shadow-lg\"\n      ref={popupRef}\n      style={{\n        left: `${adjustedPosition.left}px`,\n        top: `${adjustedPosition.top}px`,\n      }}\n    >\n      <div className=\"sticky top-0 flex items-center justify-between border-b bg-background p-3\">\n        <h3 className=\"font-medium\">{format(date, \"d MMMM yyyy\")}</h3>\n        <button\n          aria-label=\"Close\"\n          className=\"rounded-full p-1 hover:bg-muted\"\n          onClick={onClose}\n          type=\"button\"\n        >\n          <XIcon className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className=\"space-y-2 p-3\">\n        {events.length === 0 ? (\n          <div className=\"py-2 text-muted-foreground text-sm\">No events</div>\n        ) : (\n          events.map((event) => {\n            const eventStart = new Date(event.start);\n            const eventEnd = new Date(event.end);\n            const isFirstDay = isSameDay(date, eventStart);\n            const isLastDay = isSameDay(date, eventEnd);\n\n            return (\n              <div\n                className=\"cursor-pointer\"\n                key={event.id}\n                onClick={() => handleEventClick(event)}\n              >\n                <EventItem\n                  event={event}\n                  isFirstDay={isFirstDay}\n                  isLastDay={isLastDay}\n                  view=\"agenda\"\n                />\n              </div>\n            );\n          })\n        )}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/hooks/use-current-time-indicator.ts",
    "content": "\"use client\";\n\nimport { endOfWeek, isSameDay, isWithinInterval, startOfWeek } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport {\n  EndHour,\n  StartHour,\n} from \"@/registry/default/components/event-calendar/constants\";\n\nexport function useCurrentTimeIndicator(\n  currentDate: Date,\n  view: \"day\" | \"week\",\n) {\n  const [currentTimePosition, setCurrentTimePosition] = useState<number>(0);\n  const [currentTimeVisible, setCurrentTimeVisible] = useState<boolean>(false);\n\n  useEffect(() => {\n    const calculateTimePosition = () => {\n      const now = new Date();\n      const hours = now.getHours();\n      const minutes = now.getMinutes();\n      const totalMinutes = (hours - StartHour) * 60 + minutes;\n      const dayStartMinutes = 0; // 12am\n      const dayEndMinutes = (EndHour - StartHour) * 60; // 12am next day\n\n      // Calculate position as percentage of day\n      const position =\n        ((totalMinutes - dayStartMinutes) / (dayEndMinutes - dayStartMinutes)) *\n        100;\n\n      // Check if current day is in view based on the calendar view\n      let isCurrentTimeVisible = false;\n\n      if (view === \"day\") {\n        isCurrentTimeVisible = isSameDay(now, currentDate);\n      } else if (view === \"week\") {\n        const startOfWeekDate = startOfWeek(currentDate, { weekStartsOn: 0 });\n        const endOfWeekDate = endOfWeek(currentDate, { weekStartsOn: 0 });\n        isCurrentTimeVisible = isWithinInterval(now, {\n          end: endOfWeekDate,\n          start: startOfWeekDate,\n        });\n      }\n\n      setCurrentTimePosition(position);\n      setCurrentTimeVisible(isCurrentTimeVisible);\n    };\n\n    // Calculate immediately\n    calculateTimePosition();\n\n    // Update every minute\n    const interval = setInterval(calculateTimePosition, 60000);\n\n    return () => clearInterval(interval);\n  }, [currentDate, view]);\n\n  return { currentTimePosition, currentTimeVisible };\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/hooks/use-event-visibility.ts",
    "content": "\"use client\";\n\nimport { useLayoutEffect, useMemo, useRef, useState } from \"react\";\n\ninterface EventVisibilityOptions {\n  eventHeight: number;\n  eventGap: number;\n}\n\ninterface EventVisibilityResult {\n  contentRef: React.RefObject<HTMLDivElement>;\n  contentHeight: number | null;\n  getVisibleEventCount: (totalEvents: number) => number;\n}\n\n/**\n * Hook for calculating event visibility based on container height\n * Uses ResizeObserver for efficient updates\n */\nexport function useEventVisibility({\n  eventHeight,\n  eventGap,\n}: EventVisibilityOptions): EventVisibilityResult {\n  // Use the standard pattern for React refs\n  const contentRef = useRef<HTMLDivElement>(null);\n  const observerRef = useRef<ResizeObserver | null>(null);\n  const [contentHeight, setContentHeight] = useState<number | null>(null);\n\n  // Use layout effect for synchronous measurement before paint\n  useLayoutEffect(() => {\n    if (!contentRef.current) return;\n\n    // Function to update the content height\n    const updateHeight = () => {\n      if (contentRef.current) {\n        setContentHeight(contentRef.current.clientHeight);\n      }\n    };\n\n    // Initial measurement (synchronous)\n    updateHeight();\n\n    // Create observer only once and reuse it\n    if (!observerRef.current) {\n      observerRef.current = new ResizeObserver(() => {\n        // Just call updateHeight when resize is detected\n        updateHeight();\n      });\n    }\n\n    // Start observing the content container\n    observerRef.current.observe(contentRef.current);\n\n    // Clean up function\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n      }\n    };\n  }, []);\n\n  // Function to calculate visible events for a cell\n  const getVisibleEventCount = useMemo(() => {\n    return (totalEvents: number): number => {\n      if (!contentHeight) return totalEvents;\n\n      // Calculate how many events can fit in the container\n      const maxEvents = Math.floor(contentHeight / (eventHeight + eventGap));\n\n      // If all events fit, show them all\n      if (totalEvents <= maxEvents) {\n        return totalEvents;\n      }\n      // Otherwise, reserve space for \"more\" button by showing one less\n      return maxEvents > 0 ? maxEvents - 1 : 0;\n    };\n  }, [contentHeight, eventHeight, eventGap]);\n\n  // Use type assertion to satisfy TypeScript\n  return {\n    contentHeight,\n    contentRef,\n    getVisibleEventCount,\n  } as EventVisibilityResult;\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/index.ts",
    "content": "\"use client\";\n\n// Component exports\n\nexport { AgendaView } from \"./agenda-view\";\nexport { CalendarDndProvider, useCalendarDnd } from \"./calendar-dnd-context\";\n// Constants and utility exports\nexport * from \"./constants\";\nexport { DayView } from \"./day-view\";\nexport { DraggableEvent } from \"./draggable-event\";\nexport { DroppableCell } from \"./droppable-cell\";\nexport { EventCalendar } from \"./event-calendar\";\nexport { EventDialog } from \"./event-dialog\";\nexport { EventItem } from \"./event-item\";\nexport { EventsPopup } from \"./events-popup\";\n// Hook exports\nexport * from \"./hooks/use-current-time-indicator\";\nexport * from \"./hooks/use-event-visibility\";\nexport { MonthView } from \"./month-view\";\n// Type exports\nexport type { CalendarEvent, CalendarView, EventColor } from \"./types\";\nexport * from \"./utils\";\nexport { WeekView } from \"./week-view\";\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/month-view.tsx",
    "content": "\"use client\";\n\nimport {\n  addDays,\n  eachDayOfInterval,\n  endOfMonth,\n  endOfWeek,\n  format,\n  isSameDay,\n  isSameMonth,\n  isToday,\n  startOfMonth,\n  startOfWeek,\n} from \"date-fns\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport {\n  type CalendarEvent,\n  DraggableEvent,\n  DroppableCell,\n  EventGap,\n  EventHeight,\n  EventItem,\n  getAllEventsForDay,\n  getEventsForDay,\n  getSpanningEventsForDay,\n  sortEvents,\n  useEventVisibility,\n} from \"@/registry/default/components/event-calendar\";\nimport { DefaultStartHour } from \"@/registry/default/components/event-calendar/constants\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface MonthViewProps {\n  currentDate: Date;\n  events: CalendarEvent[];\n  onEventSelect: (event: CalendarEvent) => void;\n  onEventCreate: (startTime: Date) => void;\n}\n\nexport function MonthView({\n  currentDate,\n  events,\n  onEventSelect,\n  onEventCreate,\n}: MonthViewProps) {\n  const days = useMemo(() => {\n    const monthStart = startOfMonth(currentDate);\n    const monthEnd = endOfMonth(monthStart);\n    const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });\n    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });\n\n    return eachDayOfInterval({ end: calendarEnd, start: calendarStart });\n  }, [currentDate]);\n\n  const weekdays = useMemo(() => {\n    return Array.from({ length: 7 }).map((_, i) => {\n      const date = addDays(startOfWeek(new Date()), i);\n      return format(date, \"EEE\");\n    });\n  }, []);\n\n  const weeks = useMemo(() => {\n    const result = [];\n    let week = [];\n\n    for (let i = 0; i < days.length; i++) {\n      week.push(days[i]);\n      if (week.length === 7 || i === days.length - 1) {\n        result.push(week);\n        week = [];\n      }\n    }\n\n    return result;\n  }, [days]);\n\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onEventSelect(event);\n  };\n\n  const [isMounted, setIsMounted] = useState(false);\n  const { contentRef, getVisibleEventCount } = useEventVisibility({\n    eventGap: EventGap,\n    eventHeight: EventHeight,\n  });\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  return (\n    <div className=\"contents\" data-slot=\"month-view\">\n      <div className=\"grid grid-cols-7 border-border/70 border-b\">\n        {weekdays.map((day) => (\n          <div\n            className=\"py-2 text-center text-muted-foreground/70 text-sm\"\n            key={day}\n          >\n            {day}\n          </div>\n        ))}\n      </div>\n      <div className=\"grid flex-1 auto-rows-fr\">\n        {weeks.map((week, weekIndex) => (\n          <div\n            className=\"grid grid-cols-7 [&:last-child>*]:border-b-0\"\n            key={`week-${week}`}\n          >\n            {week.map((day, dayIndex) => {\n              if (!day) return null; // Skip if day is undefined\n\n              const dayEvents = getEventsForDay(events, day);\n              const spanningEvents = getSpanningEventsForDay(events, day);\n              const isCurrentMonth = isSameMonth(day, currentDate);\n              const cellId = `month-cell-${day.toISOString()}`;\n              const allDayEvents = [...spanningEvents, ...dayEvents];\n              const allEvents = getAllEventsForDay(events, day);\n\n              const isReferenceCell = weekIndex === 0 && dayIndex === 0;\n              const visibleCount = isMounted\n                ? getVisibleEventCount(allDayEvents.length)\n                : undefined;\n              const hasMore =\n                visibleCount !== undefined &&\n                allDayEvents.length > visibleCount;\n              const remainingCount = hasMore\n                ? allDayEvents.length - visibleCount\n                : 0;\n\n              return (\n                <div\n                  className=\"group border-border/70 border-r border-b last:border-r-0 data-outside-cell:bg-muted/25 data-outside-cell:text-muted-foreground/70\"\n                  data-outside-cell={!isCurrentMonth || undefined}\n                  data-today={isToday(day) || undefined}\n                  key={day.toString()}\n                >\n                  <DroppableCell\n                    date={day}\n                    id={cellId}\n                    onClick={() => {\n                      const startTime = new Date(day);\n                      startTime.setHours(DefaultStartHour, 0, 0);\n                      onEventCreate(startTime);\n                    }}\n                  >\n                    <div className=\"mt-1 inline-flex size-6 items-center justify-center rounded-full text-sm group-data-today:bg-primary group-data-today:text-primary-foreground\">\n                      {format(day, \"d\")}\n                    </div>\n                    <div\n                      className=\"min-h-[calc((var(--event-height)+var(--event-gap))*2)] sm:min-h-[calc((var(--event-height)+var(--event-gap))*3)] lg:min-h-[calc((var(--event-height)+var(--event-gap))*4)]\"\n                      ref={isReferenceCell ? contentRef : null}\n                    >\n                      {sortEvents(allDayEvents).map((event, index) => {\n                        const eventStart = new Date(event.start);\n                        const eventEnd = new Date(event.end);\n                        const isFirstDay = isSameDay(day, eventStart);\n                        const isLastDay = isSameDay(day, eventEnd);\n\n                        const isHidden =\n                          isMounted && visibleCount && index >= visibleCount;\n\n                        if (!visibleCount) return null;\n\n                        if (!isFirstDay) {\n                          return (\n                            <div\n                              aria-hidden={isHidden ? \"true\" : undefined}\n                              className=\"aria-hidden:hidden\"\n                              key={`spanning-${event.id}-${day.toISOString().slice(0, 10)}`}\n                            >\n                              <EventItem\n                                event={event}\n                                isFirstDay={isFirstDay}\n                                isLastDay={isLastDay}\n                                onClick={(e) => handleEventClick(event, e)}\n                                view=\"month\"\n                              >\n                                <div aria-hidden={true} className=\"invisible\">\n                                  {!event.allDay && (\n                                    <span>\n                                      {format(\n                                        new Date(event.start),\n                                        \"h:mm\",\n                                      )}{\" \"}\n                                    </span>\n                                  )}\n                                  {event.title}\n                                </div>\n                              </EventItem>\n                            </div>\n                          );\n                        }\n\n                        return (\n                          <div\n                            aria-hidden={isHidden ? \"true\" : undefined}\n                            className=\"aria-hidden:hidden\"\n                            key={event.id}\n                          >\n                            <DraggableEvent\n                              event={event}\n                              isFirstDay={isFirstDay}\n                              isLastDay={isLastDay}\n                              onClick={(e) => handleEventClick(event, e)}\n                              view=\"month\"\n                            />\n                          </div>\n                        );\n                      })}\n\n                      {hasMore && (\n                        <Popover modal>\n                          <PopoverTrigger asChild>\n                            <button\n                              className=\"mt-(--event-gap) flex h-(--event-height) w-full select-none items-center overflow-hidden px-1 text-left text-[10px] text-muted-foreground outline-none backdrop-blur-md transition hover:bg-muted/50 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 sm:px-2 sm:text-xs\"\n                              onClick={(e) => e.stopPropagation()}\n                              type=\"button\"\n                            >\n                              <span>\n                                + {remainingCount}{\" \"}\n                                <span className=\"max-sm:sr-only\">more</span>\n                              </span>\n                            </button>\n                          </PopoverTrigger>\n                          <PopoverContent\n                            align=\"center\"\n                            className=\"max-w-52 p-3\"\n                            style={\n                              {\n                                \"--event-height\": `${EventHeight}px`,\n                              } as Record<string, string>\n                            }\n                          >\n                            <div className=\"space-y-2\">\n                              <div className=\"font-medium text-sm\">\n                                {format(day, \"EEE d\")}\n                              </div>\n                              <div className=\"space-y-1\">\n                                {sortEvents(allEvents).map((event) => {\n                                  const eventStart = new Date(event.start);\n                                  const eventEnd = new Date(event.end);\n                                  const isFirstDay = isSameDay(day, eventStart);\n                                  const isLastDay = isSameDay(day, eventEnd);\n\n                                  return (\n                                    <EventItem\n                                      event={event}\n                                      isFirstDay={isFirstDay}\n                                      isLastDay={isLastDay}\n                                      key={event.id}\n                                      onClick={(e) =>\n                                        handleEventClick(event, e)\n                                      }\n                                      view=\"month\"\n                                    />\n                                  );\n                                })}\n                              </div>\n                            </div>\n                          </PopoverContent>\n                        </Popover>\n                      )}\n                    </div>\n                  </DroppableCell>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/types.ts",
    "content": "export type CalendarView = \"month\" | \"week\" | \"day\" | \"agenda\";\n\nexport interface CalendarEvent {\n  id: string;\n  title: string;\n  description?: string;\n  start: Date;\n  end: Date;\n  allDay?: boolean;\n  color?: EventColor;\n  location?: string;\n}\n\nexport type EventColor =\n  | \"sky\"\n  | \"amber\"\n  | \"violet\"\n  | \"rose\"\n  | \"emerald\"\n  | \"orange\";\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/utils.ts",
    "content": "import { isSameDay } from \"date-fns\";\nimport type {\n  CalendarEvent,\n  EventColor,\n} from \"@/registry/default/components/event-calendar\";\n\n/**\n * Get CSS classes for event colors\n */\nexport function getEventColorClasses(color?: EventColor | string): string {\n  const eventColor = color || \"sky\";\n\n  switch (eventColor) {\n    case \"sky\":\n      return \"bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8\";\n    case \"amber\":\n      return \"bg-amber-200/50 hover:bg-amber-200/40 text-amber-950/80 dark:bg-amber-400/25 dark:hover:bg-amber-400/20 dark:text-amber-200 shadow-amber-700/8\";\n    case \"violet\":\n      return \"bg-violet-200/50 hover:bg-violet-200/40 text-violet-950/80 dark:bg-violet-400/25 dark:hover:bg-violet-400/20 dark:text-violet-200 shadow-violet-700/8\";\n    case \"rose\":\n      return \"bg-rose-200/50 hover:bg-rose-200/40 text-rose-950/80 dark:bg-rose-400/25 dark:hover:bg-rose-400/20 dark:text-rose-200 shadow-rose-700/8\";\n    case \"emerald\":\n      return \"bg-emerald-200/50 hover:bg-emerald-200/40 text-emerald-950/80 dark:bg-emerald-400/25 dark:hover:bg-emerald-400/20 dark:text-emerald-200 shadow-emerald-700/8\";\n    case \"orange\":\n      return \"bg-orange-200/50 hover:bg-orange-200/40 text-orange-950/80 dark:bg-orange-400/25 dark:hover:bg-orange-400/20 dark:text-orange-200 shadow-orange-700/8\";\n    default:\n      return \"bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8\";\n  }\n}\n\n/**\n * Get CSS classes for border radius based on event position in multi-day events\n */\nexport function getBorderRadiusClasses(\n  isFirstDay: boolean,\n  isLastDay: boolean,\n): string {\n  if (isFirstDay && isLastDay) {\n    return \"rounded\"; // Both ends rounded\n  }\n  if (isFirstDay) {\n    return \"rounded-l rounded-r-none\"; // Only left end rounded\n  }\n  if (isLastDay) {\n    return \"rounded-r rounded-l-none\"; // Only right end rounded\n  }\n  return \"rounded-none\"; // No rounded corners\n}\n\n/**\n * Check if an event is a multi-day event\n */\nexport function isMultiDayEvent(event: CalendarEvent): boolean {\n  const eventStart = new Date(event.start);\n  const eventEnd = new Date(event.end);\n  return event.allDay || eventStart.getDate() !== eventEnd.getDate();\n}\n\n/**\n * Filter events for a specific day\n */\nexport function getEventsForDay(\n  events: CalendarEvent[],\n  day: Date,\n): CalendarEvent[] {\n  return events\n    .filter((event) => {\n      const eventStart = new Date(event.start);\n      return isSameDay(day, eventStart);\n    })\n    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());\n}\n\n/**\n * Sort events with multi-day events first, then by start time\n */\nexport function sortEvents(events: CalendarEvent[]): CalendarEvent[] {\n  return [...events].sort((a, b) => {\n    const aIsMultiDay = isMultiDayEvent(a);\n    const bIsMultiDay = isMultiDayEvent(b);\n\n    if (aIsMultiDay && !bIsMultiDay) return -1;\n    if (!aIsMultiDay && bIsMultiDay) return 1;\n\n    return new Date(a.start).getTime() - new Date(b.start).getTime();\n  });\n}\n\n/**\n * Get multi-day events that span across a specific day (but don't start on that day)\n */\nexport function getSpanningEventsForDay(\n  events: CalendarEvent[],\n  day: Date,\n): CalendarEvent[] {\n  return events.filter((event) => {\n    if (!isMultiDayEvent(event)) return false;\n\n    const eventStart = new Date(event.start);\n    const eventEnd = new Date(event.end);\n\n    // Only include if it's not the start day but is either the end day or a middle day\n    return (\n      !isSameDay(day, eventStart) &&\n      (isSameDay(day, eventEnd) || (day > eventStart && day < eventEnd))\n    );\n  });\n}\n\n/**\n * Get all events visible on a specific day (starting, ending, or spanning)\n */\nexport function getAllEventsForDay(\n  events: CalendarEvent[],\n  day: Date,\n): CalendarEvent[] {\n  return events.filter((event) => {\n    const eventStart = new Date(event.start);\n    const eventEnd = new Date(event.end);\n    return (\n      isSameDay(day, eventStart) ||\n      isSameDay(day, eventEnd) ||\n      (day > eventStart && day < eventEnd)\n    );\n  });\n}\n\n/**\n * Get all events for a day (for agenda view)\n */\nexport function getAgendaEventsForDay(\n  events: CalendarEvent[],\n  day: Date,\n): CalendarEvent[] {\n  return events\n    .filter((event) => {\n      const eventStart = new Date(event.start);\n      const eventEnd = new Date(event.end);\n      return (\n        isSameDay(day, eventStart) ||\n        isSameDay(day, eventEnd) ||\n        (day > eventStart && day < eventEnd)\n      );\n    })\n    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());\n}\n\n/**\n * Add hours to a date\n */\nexport function addHoursToDate(date: Date, hours: number): Date {\n  const result = new Date(date);\n  result.setHours(result.getHours() + hours);\n  return result;\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/event-calendar/week-view.tsx",
    "content": "\"use client\";\n\nimport {\n  addHours,\n  areIntervalsOverlapping,\n  differenceInMinutes,\n  eachDayOfInterval,\n  eachHourOfInterval,\n  endOfWeek,\n  format,\n  getHours,\n  getMinutes,\n  isBefore,\n  isSameDay,\n  isToday,\n  startOfDay,\n  startOfWeek,\n} from \"date-fns\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport {\n  type CalendarEvent,\n  DraggableEvent,\n  DroppableCell,\n  EventItem,\n  isMultiDayEvent,\n  useCurrentTimeIndicator,\n  WeekCellsHeight,\n} from \"@/registry/default/components/event-calendar\";\nimport {\n  EndHour,\n  StartHour,\n} from \"@/registry/default/components/event-calendar/constants\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ninterface WeekViewProps {\n  currentDate: Date;\n  events: CalendarEvent[];\n  onEventSelect: (event: CalendarEvent) => void;\n  onEventCreate: (startTime: Date) => void;\n}\n\ninterface PositionedEvent {\n  event: CalendarEvent;\n  top: number;\n  height: number;\n  left: number;\n  width: number;\n  zIndex: number;\n}\n\nexport function WeekView({\n  currentDate,\n  events,\n  onEventSelect,\n  onEventCreate,\n}: WeekViewProps) {\n  const days = useMemo(() => {\n    const weekStart = startOfWeek(currentDate, { weekStartsOn: 0 });\n    const weekEnd = endOfWeek(currentDate, { weekStartsOn: 0 });\n    return eachDayOfInterval({ end: weekEnd, start: weekStart });\n  }, [currentDate]);\n\n  const weekStart = useMemo(\n    () => startOfWeek(currentDate, { weekStartsOn: 0 }),\n    [currentDate],\n  );\n\n  const hours = useMemo(() => {\n    const dayStart = startOfDay(currentDate);\n    return eachHourOfInterval({\n      end: addHours(dayStart, EndHour - 1),\n      start: addHours(dayStart, StartHour),\n    });\n  }, [currentDate]);\n\n  // Get all-day events and multi-day events for the week\n  const allDayEvents = useMemo(() => {\n    return events\n      .filter((event) => {\n        // Include explicitly marked all-day events or multi-day events\n        return event.allDay || isMultiDayEvent(event);\n      })\n      .filter((event) => {\n        const eventStart = new Date(event.start);\n        const eventEnd = new Date(event.end);\n        return days.some(\n          (day) =>\n            isSameDay(day, eventStart) ||\n            isSameDay(day, eventEnd) ||\n            (day > eventStart && day < eventEnd),\n        );\n      });\n  }, [events, days]);\n\n  // Process events for each day to calculate positions\n  const processedDayEvents = useMemo(() => {\n    const result = days.map((day) => {\n      // Get events for this day that are not all-day events or multi-day events\n      const dayEvents = events.filter((event) => {\n        // Skip all-day events and multi-day events\n        if (event.allDay || isMultiDayEvent(event)) return false;\n\n        const eventStart = new Date(event.start);\n        const eventEnd = new Date(event.end);\n\n        // Check if event is on this day\n        return (\n          isSameDay(day, eventStart) ||\n          isSameDay(day, eventEnd) ||\n          (eventStart < day && eventEnd > day)\n        );\n      });\n\n      // Sort events by start time and duration\n      const sortedEvents = [...dayEvents].sort((a, b) => {\n        const aStart = new Date(a.start);\n        const bStart = new Date(b.start);\n        const aEnd = new Date(a.end);\n        const bEnd = new Date(b.end);\n\n        // First sort by start time\n        if (aStart < bStart) return -1;\n        if (aStart > bStart) return 1;\n\n        // If start times are equal, sort by duration (longer events first)\n        const aDuration = differenceInMinutes(aEnd, aStart);\n        const bDuration = differenceInMinutes(bEnd, bStart);\n        return bDuration - aDuration;\n      });\n\n      // Calculate positions for each event\n      const positionedEvents: PositionedEvent[] = [];\n      const dayStart = startOfDay(day);\n\n      // Track columns for overlapping events\n      const columns: { event: CalendarEvent; end: Date }[][] = [];\n\n      for (const event of sortedEvents) {\n        const eventStart = new Date(event.start);\n        const eventEnd = new Date(event.end);\n\n        // Adjust start and end times if they're outside this day\n        const adjustedStart = isSameDay(day, eventStart)\n          ? eventStart\n          : dayStart;\n        const adjustedEnd = isSameDay(day, eventEnd)\n          ? eventEnd\n          : addHours(dayStart, 24);\n\n        // Calculate top position and height\n        const startHour =\n          getHours(adjustedStart) + getMinutes(adjustedStart) / 60;\n        const endHour = getHours(adjustedEnd) + getMinutes(adjustedEnd) / 60;\n\n        // Adjust the top calculation to account for the new start time\n        const top = (startHour - StartHour) * WeekCellsHeight;\n        const height = (endHour - startHour) * WeekCellsHeight;\n\n        // Find a column for this event\n        let columnIndex = 0;\n        let placed = false;\n\n        while (!placed) {\n          const col = columns[columnIndex] || [];\n          if (col.length === 0) {\n            columns[columnIndex] = col;\n            placed = true;\n          } else {\n            const overlaps = col.some((c) =>\n              areIntervalsOverlapping(\n                { end: adjustedEnd, start: adjustedStart },\n                {\n                  end: new Date(c.event.end),\n                  start: new Date(c.event.start),\n                },\n              ),\n            );\n\n            if (!overlaps) {\n              placed = true;\n            } else {\n              columnIndex++;\n            }\n          }\n        }\n\n        // Ensure column is initialized before pushing\n        const currentColumn = columns[columnIndex] || [];\n        columns[columnIndex] = currentColumn;\n        currentColumn.push({ end: adjustedEnd, event });\n\n        // Calculate width and left position based on number of columns\n        const width = columnIndex === 0 ? 1 : 0.9;\n        const left = columnIndex === 0 ? 0 : columnIndex * 0.1;\n\n        positionedEvents.push({\n          event,\n          height,\n          left,\n          top,\n          width,\n          zIndex: 10 + columnIndex, // Higher columns get higher z-index\n        });\n      }\n\n      return positionedEvents;\n    });\n\n    return result;\n  }, [days, events]);\n\n  const handleEventClick = (event: CalendarEvent, e: React.MouseEvent) => {\n    e.stopPropagation();\n    onEventSelect(event);\n  };\n\n  const showAllDaySection = allDayEvents.length > 0;\n  const { currentTimePosition, currentTimeVisible } = useCurrentTimeIndicator(\n    currentDate,\n    \"week\",\n  );\n\n  return (\n    <div className=\"flex h-full flex-col\" data-slot=\"week-view\">\n      <div className=\"sticky top-0 z-30 grid grid-cols-8 border-border/70 border-b bg-background/80 backdrop-blur-md\">\n        <div className=\"py-2 text-center text-muted-foreground/70 text-sm\">\n          <span className=\"max-[479px]:sr-only\">{format(new Date(), \"O\")}</span>\n        </div>\n        {days.map((day) => (\n          <div\n            className=\"py-2 text-center text-muted-foreground/70 text-sm data-today:font-medium data-today:text-foreground\"\n            data-today={isToday(day) || undefined}\n            key={day.toString()}\n          >\n            <span aria-hidden=\"true\" className=\"sm:hidden\">\n              {format(day, \"E\")[0]} {format(day, \"d\")}\n            </span>\n            <span className=\"max-sm:hidden\">{format(day, \"EEE dd\")}</span>\n          </div>\n        ))}\n      </div>\n\n      {showAllDaySection && (\n        <div className=\"border-border/70 border-b bg-muted/50\">\n          <div className=\"grid grid-cols-8\">\n            <div className=\"relative border-border/70 border-r\">\n              <span className=\"absolute bottom-0 left-0 h-6 w-16 max-w-full pe-2 text-right text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\">\n                All day\n              </span>\n            </div>\n            {days.map((day, dayIndex) => {\n              const dayAllDayEvents = allDayEvents.filter((event) => {\n                const eventStart = new Date(event.start);\n                const eventEnd = new Date(event.end);\n                return (\n                  isSameDay(day, eventStart) ||\n                  (day > eventStart && day < eventEnd) ||\n                  isSameDay(day, eventEnd)\n                );\n              });\n\n              return (\n                <div\n                  className=\"relative border-border/70 border-r p-1 last:border-r-0\"\n                  data-today={isToday(day) || undefined}\n                  key={day.toString()}\n                >\n                  {dayAllDayEvents.map((event) => {\n                    const eventStart = new Date(event.start);\n                    const eventEnd = new Date(event.end);\n                    const isFirstDay = isSameDay(day, eventStart);\n                    const isLastDay = isSameDay(day, eventEnd);\n\n                    // Check if this is the first day in the current week view\n                    const isFirstVisibleDay =\n                      dayIndex === 0 && isBefore(eventStart, weekStart);\n                    const shouldShowTitle = isFirstDay || isFirstVisibleDay;\n\n                    return (\n                      <EventItem\n                        event={event}\n                        isFirstDay={isFirstDay}\n                        isLastDay={isLastDay}\n                        key={`spanning-${event.id}`}\n                        onClick={(e) => handleEventClick(event, e)}\n                        view=\"month\"\n                      >\n                        {/* Show title if it's the first day of the event or the first visible day in the week */}\n                        <div\n                          aria-hidden={!shouldShowTitle}\n                          className={cn(\n                            \"truncate\",\n                            !shouldShowTitle && \"invisible\",\n                          )}\n                        >\n                          {event.title}\n                        </div>\n                      </EventItem>\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      )}\n\n      <div className=\"grid flex-1 grid-cols-8 overflow-hidden\">\n        <div className=\"grid auto-cols-fr border-border/70 border-r\">\n          {hours.map((hour, index) => (\n            <div\n              className=\"relative min-h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0\"\n              key={hour.toString()}\n            >\n              {index > 0 && (\n                <span className=\"absolute -top-3 left-0 flex h-6 w-16 max-w-full items-center justify-end bg-background pe-2 text-[10px] text-muted-foreground/70 sm:pe-4 sm:text-xs\">\n                  {format(hour, \"h a\")}\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n\n        {days.map((day, dayIndex) => (\n          <div\n            className=\"relative grid auto-cols-fr border-border/70 border-r last:border-r-0\"\n            data-today={isToday(day) || undefined}\n            key={day.toString()}\n          >\n            {/* Positioned events */}\n            {(processedDayEvents[dayIndex] ?? []).map((positionedEvent) => (\n              <div\n                className=\"absolute z-10 px-0.5\"\n                key={positionedEvent.event.id}\n                onClick={(e) => e.stopPropagation()}\n                style={{\n                  height: `${positionedEvent.height}px`,\n                  left: `${positionedEvent.left * 100}%`,\n                  top: `${positionedEvent.top}px`,\n                  width: `${positionedEvent.width * 100}%`,\n                  zIndex: positionedEvent.zIndex,\n                }}\n              >\n                <div className=\"size-full\">\n                  <DraggableEvent\n                    event={positionedEvent.event}\n                    height={positionedEvent.height}\n                    onClick={(e) => handleEventClick(positionedEvent.event, e)}\n                    showTime\n                    view=\"week\"\n                  />\n                </div>\n              </div>\n            ))}\n\n            {/* Current time indicator - only show for today's column */}\n            {currentTimeVisible && isToday(day) && (\n              <div\n                className=\"pointer-events-none absolute right-0 left-0 z-20\"\n                style={{ top: `${currentTimePosition}%` }}\n              >\n                <div className=\"relative flex items-center\">\n                  <div className=\"absolute -left-1 h-2 w-2 rounded-full bg-primary\" />\n                  <div className=\"h-[2px] w-full bg-primary\" />\n                </div>\n              </div>\n            )}\n            {hours.map((hour) => {\n              const hourValue = getHours(hour);\n              return (\n                <div\n                  className=\"relative min-h-[var(--week-cells-height)] border-border/70 border-b last:border-b-0\"\n                  key={hour.toString()}\n                >\n                  {/* Quarter-hour intervals */}\n                  {[0, 1, 2, 3].map((quarter) => {\n                    const quarterHourTime = hourValue + quarter * 0.25;\n                    return (\n                      <DroppableCell\n                        className={cn(\n                          \"absolute h-[calc(var(--week-cells-height)/4)] w-full\",\n                          quarter === 0 && \"top-0\",\n                          quarter === 1 &&\n                            \"top-[calc(var(--week-cells-height)/4)]\",\n                          quarter === 2 &&\n                            \"top-[calc(var(--week-cells-height)/4*2)]\",\n                          quarter === 3 &&\n                            \"top-[calc(var(--week-cells-height)/4*3)]\",\n                        )}\n                        date={day}\n                        id={`week-cell-${day.toISOString()}-${quarterHourTime}`}\n                        key={`${hour.toString()}-${quarter}`}\n                        onClick={() => {\n                          const startTime = new Date(day);\n                          startTime.setHours(hourValue);\n                          startTime.setMinutes(quarter * 15);\n                          onEventCreate(startTime);\n                        }}\n                        time={quarterHourTime}\n                      />\n                    );\n                  })}\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/app-toggle.tsx",
    "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\";\n\nexport default function AppToggle() {\n  const id = useId();\n  const [selectedValue, setSelectedValue] = useState(\"on\");\n\n  return (\n    <div className=\"inline-flex h-8 rounded-md bg-input/50 p-0.5\">\n      <RadioGroup\n        className=\"group relative inline-grid grid-cols-[1fr_1fr] items-center gap-0 font-medium text-sm after:absolute after:inset-y-0 after:w-1/2 after:rounded-sm after:bg-background after:shadow-xs after:transition-[translate,box-shadow] after:duration-300 after:ease-[cubic-bezier(0.16,1,0.3,1)] has-focus-visible:after:border-ring has-focus-visible:after:ring-[3px] has-focus-visible:after:ring-ring/50 data-[state=off]:after:translate-x-0 data-[state=on]:after:translate-x-full\"\n        data-state={selectedValue}\n        onValueChange={setSelectedValue}\n        value={selectedValue}\n      >\n        <label className=\"relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-3 transition-colors group-data-[state=on]:text-muted-foreground/70\">\n          Sitemap\n          <RadioGroupItem className=\"sr-only\" id={`${id}-1`} value=\"off\" />\n        </label>\n        <label className=\"relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-3 transition-colors group-data-[state=off]:text-muted-foreground/70\">\n          Wireframe\n          <RadioGroupItem className=\"sr-only\" id={`${id}-2`} value=\"on\" />\n        </label>\n      </RadioGroup>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/date-picker.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function DatePicker() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          className=\"group w-full justify-between border-input bg-background px-3 font-normal text-sm outline-none outline-offset-0 focus-visible:outline-[3px]\"\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          <CalendarIcon\n            aria-hidden=\"true\"\n            className=\"-ms-1 shrink-0 text-muted-foreground/80 transition-colors\"\n            size={16}\n          />\n          <span className={cn(\"truncate\", !date && \"font-medium\")}>\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Date\"\n            )}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-auto p-2\">\n        <Calendar mode=\"range\" onSelect={setDate} selected={date} />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/filters.tsx",
    "content": "import { ListFilterIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Component() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button className=\"text-sm\" size=\"sm\" variant=\"outline\">\n            <ListFilterIcon\n              aria-hidden=\"true\"\n              className=\"-ms-1 text-muted-foreground/80\"\n              size={16}\n            />\n            Filters\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-36 p-3\">\n          <div className=\"space-y-3\">\n            <div className=\"font-medium text-xs\">Filters</div>\n            <form>\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-1`} />\n                  <Label className=\"font-normal\" htmlFor={`${id}-1`}>\n                    Real Time\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-2`} />\n                  <Label className=\"font-normal\" htmlFor={`${id}-2`}>\n                    Top Channels\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-3`} />\n                  <Label className=\"font-normal\" htmlFor={`${id}-3`}>\n                    Last Orders\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Checkbox id={`${id}-4`} />\n                  <Label className=\"font-normal\" htmlFor={`${id}-4`}>\n                    Total Spent\n                  </Label>\n                </div>\n              </div>\n              <div\n                aria-orientation=\"horizontal\"\n                className=\"-mx-3 my-3 h-px bg-border\"\n                role=\"separator\"\n                tabIndex={-1}\n              />\n              <div className=\"flex justify-between gap-2\">\n                <Button className=\"h-7 px-2\" size=\"sm\" variant=\"outline\">\n                  Clear\n                </Button>\n                <Button className=\"h-7 px-2\" size=\"sm\">\n                  Apply\n                </Button>\n              </div>\n            </form>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/info-menu.tsx",
    "content": "import {\n  BookIcon,\n  InfoIcon,\n  LifeBuoyIcon,\n  MessageCircleMoreIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function InfoMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          aria-label=\"Open edit menu\"\n          className=\"size-8 rounded-full shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          <InfoIcon\n            aria-hidden=\"true\"\n            className=\"text-muted-foreground\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"pb-2\">\n        <DropdownMenuLabel>Need help?</DropdownMenuLabel>\n        <DropdownMenuItem\n          asChild\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n        >\n          <a href=\"#\">\n            <BookIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Documentation\n          </a>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          asChild\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n        >\n          <a href=\"#\">\n            <LifeBuoyIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Support\n          </a>\n        </DropdownMenuItem>\n        <DropdownMenuItem\n          asChild\n          className=\"cursor-pointer py-1 focus:bg-transparent focus:underline\"\n        >\n          <a href=\"#\">\n            <MessageCircleMoreIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n            Contact us\n          </a>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/logo.tsx",
    "content": "export default function Logo() {\n  return (\n    <svg\n      fill=\"currentColor\"\n      height=\"33\"\n      width=\"33\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M20.46 1.766 17.303.923l-2.66 9.896-2.403-8.934-3.157.843 2.595 9.652-6.464-6.442-2.311 2.304 7.09 7.066-8.83-2.358-.846 3.146 9.648 2.577a6.516 6.516 0 0 1-.169-1.478c0-3.598 2.927-6.515 6.537-6.515s6.537 2.917 6.537 6.515c0 .505-.057.997-.167 1.468l8.768 2.342.846-3.147-9.686-2.586 8.83-2.358-.845-3.147-9.686 2.587 6.464-6.442-2.311-2.304-6.992 6.969 2.369-8.81Z\" />\n      <path d=\"M22.695 18.7a6.495 6.495 0 0 1-1.626 2.986l6.352 6.33 2.31-2.303-7.036-7.013ZM21.005 21.752a6.538 6.538 0 0 1-2.922 1.722l2.312 8.596 3.157-.843-2.547-9.475ZM17.965 23.505a6.569 6.569 0 0 1-1.632.205 6.566 6.566 0 0 1-1.743-.235l-2.314 8.605 3.157.843 2.532-9.418ZM14.478 23.444a6.54 6.54 0 0 1-2.87-1.747l-6.367 6.346 2.31 2.303 6.927-6.902ZM11.555 21.64a6.492 6.492 0 0 1-1.585-2.948L1.173 21.04l.846 3.146 9.536-2.546Z\" />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/notification-menu.tsx",
    "content": "\"use client\";\n\nimport { BellIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst initialNotifications = [\n  {\n    action: \"requested review on\",\n    id: 1,\n    target: \"PR #42: Feature implementation\",\n    timestamp: \"15 minutes ago\",\n    unread: true,\n    user: \"Chris Tompson\",\n  },\n  {\n    action: \"shared\",\n    id: 2,\n    target: \"New component library\",\n    timestamp: \"45 minutes ago\",\n    unread: true,\n    user: \"Emma Davis\",\n  },\n  {\n    action: \"assigned you to\",\n    id: 3,\n    target: \"API integration task\",\n    timestamp: \"4 hours ago\",\n    unread: false,\n    user: \"James Wilson\",\n  },\n  {\n    action: \"replied to your comment in\",\n    id: 4,\n    target: \"Authentication flow\",\n    timestamp: \"12 hours ago\",\n    unread: false,\n    user: \"Alex Morgan\",\n  },\n  {\n    action: \"commented on\",\n    id: 5,\n    target: \"Dashboard redesign\",\n    timestamp: \"2 days ago\",\n    unread: false,\n    user: \"Sarah Chen\",\n  },\n  {\n    action: \"mentioned you in\",\n    id: 6,\n    target: \"coss.com open graph image\",\n    timestamp: \"2 weeks ago\",\n    unread: false,\n    user: \"Miky Derya\",\n  },\n];\n\nfunction Dot({ className }: { className?: string }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className={className}\n      fill=\"currentColor\"\n      height=\"6\"\n      viewBox=\"0 0 6 6\"\n      width=\"6\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle cx=\"3\" cy=\"3\" r=\"3\" />\n    </svg>\n  );\n}\n\nexport default function NotificationMenu() {\n  const [notifications, setNotifications] = useState(initialNotifications);\n  const unreadCount = notifications.filter((n) => n.unread).length;\n\n  const handleMarkAllAsRead = () => {\n    setNotifications(\n      notifications.map((notification) => ({\n        ...notification,\n        unread: false,\n      })),\n    );\n  };\n\n  const handleNotificationClick = (id: number) => {\n    setNotifications(\n      notifications.map((notification) =>\n        notification.id === id\n          ? { ...notification, unread: false }\n          : notification,\n      ),\n    );\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          aria-label=\"Open notifications\"\n          className=\"relative size-8 rounded-full text-muted-foreground shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          <BellIcon aria-hidden=\"true\" size={16} />\n          {unreadCount > 0 && (\n            <div\n              aria-hidden=\"true\"\n              className=\"absolute top-0.5 right-0.5 size-1 rounded-full bg-primary\"\n            />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80 p-1\">\n        <div className=\"flex items-baseline justify-between gap-4 px-3 py-2\">\n          <div className=\"font-semibold text-sm\">Notifications</div>\n          {unreadCount > 0 && (\n            <button\n              className=\"font-medium text-xs hover:underline\"\n              onClick={handleMarkAllAsRead}\n              type=\"button\"\n            >\n              Mark all as read\n            </button>\n          )}\n        </div>\n        <div\n          aria-orientation=\"horizontal\"\n          className=\"-mx-1 my-1 h-px bg-border\"\n          role=\"separator\"\n          tabIndex={-1}\n        />\n        {notifications.map((notification) => (\n          <div\n            className=\"rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent\"\n            key={notification.id}\n          >\n            <div className=\"relative flex items-start pe-3\">\n              <div className=\"flex-1 space-y-1\">\n                <button\n                  className=\"text-left text-foreground/80 after:absolute after:inset-0\"\n                  onClick={() => handleNotificationClick(notification.id)}\n                  type=\"button\"\n                >\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.user}\n                  </span>{\" \"}\n                  {notification.action}{\" \"}\n                  <span className=\"font-medium text-foreground hover:underline\">\n                    {notification.target}\n                  </span>\n                  .\n                </button>\n                <div className=\"text-muted-foreground text-xs\">\n                  {notification.timestamp}\n                </div>\n              </div>\n              {notification.unread && (\n                <div className=\"absolute end-0 self-center\">\n                  <span className=\"sr-only\">Unread</span>\n                  <Dot />\n                </div>\n              )}\n            </div>\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/settings-menu.tsx",
    "content": "import { SettingsIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function SettingsMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          aria-label=\"Open edit menu\"\n          className=\"rounded-full shadow-none\"\n          size=\"icon\"\n          variant=\"ghost\"\n        >\n          <SettingsIcon\n            aria-hidden=\"true\"\n            className=\"text-muted-foreground\"\n            size={16}\n          />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"max-w-64\">\n        <DropdownMenuItem>Appearance</DropdownMenuItem>\n        <DropdownMenuItem>Preferences</DropdownMenuItem>\n        <DropdownMenuItem>API Settings</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/team-switcher.tsx",
    "content": "\"use client\";\n\nimport { ChevronsUpDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function TeamSwitcher({\n  teams,\n  defaultTeam,\n}: {\n  teams: string[];\n  defaultTeam: string;\n}) {\n  const [selectedProject, setSelectedProject] = React.useState(defaultTeam);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button className=\"p-0 hover:bg-transparent\" variant=\"ghost\">\n          <span className=\"flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground\">\n            {selectedProject.charAt(0).toUpperCase()}\n          </span>\n          <div className=\"flex flex-col gap-0.5 leading-none\">\n            <span className=\"\">{selectedProject}</span>\n          </div>\n          <ChevronsUpDown className=\"text-muted-foreground/80\" size={14} />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\">\n        {teams.map((project) => (\n          <DropdownMenuItem\n            key={project}\n            onSelect={() => setSelectedProject(project)}\n          >\n            {project}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/theme-toggle.tsx",
    "content": "\"use client\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function ThemeToggle() {\n  const [theme, setTheme] = useState<string>(\"light\");\n\n  return (\n    <div>\n      <Toggle\n        aria-label={`Switch to ${theme === \"dark\" ? \"light\" : \"dark\"} mode`}\n        className=\"group size-8 rounded-full border-none text-muted-foreground shadow-none data-[state=on]:bg-transparent data-[state=on]:text-muted-foreground data-[state=on]:hover:bg-muted data-[state=on]:hover:text-foreground\"\n        onPressedChange={() =>\n          setTheme((prev) => (prev === \"dark\" ? \"light\" : \"dark\"))\n        }\n        pressed={theme === \"dark\"}\n        variant=\"outline\"\n      >\n        {/* Note: After dark mode implementation, rely on dark: prefix rather than group-data-[state=on]: */}\n        <MoonIcon\n          aria-hidden=\"true\"\n          className=\"shrink-0 scale-0 opacity-0 transition-all group-data-[state=on]:scale-100 group-data-[state=on]:opacity-100\"\n          size={16}\n        />\n        <SunIcon\n          aria-hidden=\"true\"\n          className=\"absolute shrink-0 scale-100 opacity-100 transition-all group-data-[state=on]:scale-0 group-data-[state=on]:opacity-0\"\n          size={16}\n        />\n      </Toggle>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/components/navbar-components/user-menu.tsx",
    "content": "import {\n  BoltIcon,\n  BookOpenIcon,\n  Layers2Icon,\n  LogOutIcon,\n  PinIcon,\n  UserPenIcon,\n} from \"lucide-react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\";\n\nexport default function UserMenu() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button className=\"h-auto p-0 hover:bg-transparent\" variant=\"ghost\">\n          <Avatar>\n            <AvatarImage alt=\"Profile image\" src=\"/origin/avatar.jpg\" />\n            <AvatarFallback>KK</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"max-w-64\">\n        <DropdownMenuLabel className=\"flex min-w-0 flex-col\">\n          <span className=\"truncate font-medium text-foreground text-sm\">\n            Keith Kennedy\n          </span>\n          <span className=\"truncate font-normal text-muted-foreground text-xs\">\n            k.kennedy@coss.com\n          </span>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <BoltIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 1</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Layers2Icon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 2</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <BookOpenIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 3</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <PinIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 4</span>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <UserPenIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            <span>Option 5</span>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>\n          <LogOutIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n          <span>Logout</span>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/hooks/use-character-limit.ts",
    "content": "\"use client\";\n\nimport { type ChangeEvent, useState } from \"react\";\n\ntype UseCharacterLimitProps = {\n  maxLength: number;\n  initialValue?: string;\n};\n\nexport function useCharacterLimit({\n  maxLength,\n  initialValue = \"\",\n}: UseCharacterLimitProps) {\n  const [value, setValue] = useState(initialValue);\n  const [characterCount, setCharacterCount] = useState(initialValue.length);\n\n  const handleChange = (\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n  ) => {\n    const newValue = e.target.value;\n    if (newValue.length <= maxLength) {\n      setValue(newValue);\n      setCharacterCount(newValue.length);\n    }\n  };\n\n  return {\n    characterCount,\n    handleChange,\n    maxLength,\n    value,\n  };\n}\n"
  },
  {
    "path": "apps/origin/registry/default/hooks/use-file-upload.ts",
    "content": "\"use client\";\n\nimport {\n  type ChangeEvent,\n  type DragEvent,\n  type InputHTMLAttributes,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nexport type FileMetadata = {\n  name: string;\n  size: number;\n  type: string;\n  url: string;\n  id: string;\n};\n\nexport type FileWithPreview = {\n  file: File | FileMetadata;\n  id: string;\n  preview?: string;\n};\n\nexport type FileUploadOptions = {\n  maxFiles?: number; // Only used when multiple is true, defaults to Infinity\n  maxSize?: number; // in bytes\n  accept?: string;\n  multiple?: boolean; // Defaults to false\n  initialFiles?: FileMetadata[];\n  onFilesChange?: (files: FileWithPreview[]) => void; // Callback when files change\n  onFilesAdded?: (addedFiles: FileWithPreview[]) => void; // Callback when new files are added\n};\n\nexport type FileUploadState = {\n  files: FileWithPreview[];\n  isDragging: boolean;\n  errors: string[];\n};\n\nexport type FileUploadActions = {\n  addFiles: (files: FileList | File[]) => void;\n  removeFile: (id: string) => void;\n  clearFiles: () => void;\n  clearErrors: () => void;\n  handleDragEnter: (e: DragEvent<HTMLElement>) => void;\n  handleDragLeave: (e: DragEvent<HTMLElement>) => void;\n  handleDragOver: (e: DragEvent<HTMLElement>) => void;\n  handleDrop: (e: DragEvent<HTMLElement>) => void;\n  handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  openFileDialog: () => void;\n  getInputProps: (\n    props?: InputHTMLAttributes<HTMLInputElement>,\n  ) => InputHTMLAttributes<HTMLInputElement> & {\n    // Use `any` here to avoid cross-React ref type conflicts across packages\n    // biome-ignore lint/suspicious/noExplicitAny: intentional\n    ref: any;\n  };\n};\n\nexport const useFileUpload = (\n  options: FileUploadOptions = {},\n): [FileUploadState, FileUploadActions] => {\n  const {\n    maxFiles = Number.POSITIVE_INFINITY,\n    maxSize = Number.POSITIVE_INFINITY,\n    accept = \"*\",\n    multiple = false,\n    initialFiles = [],\n    onFilesChange,\n    onFilesAdded,\n  } = options;\n\n  const [state, setState] = useState<FileUploadState>({\n    errors: [],\n    files: initialFiles.map((file) => ({\n      file,\n      id: file.id,\n      preview: file.url,\n    })),\n    isDragging: false,\n  });\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const validateFile = useCallback(\n    (file: File | FileMetadata): string | null => {\n      if (file instanceof File) {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\n        }\n      } else {\n        if (file.size > maxSize) {\n          return `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}.`;\n        }\n      }\n\n      if (accept !== \"*\") {\n        const acceptedTypes = accept.split(\",\").map((type) => type.trim());\n        const fileType = file instanceof File ? file.type || \"\" : file.type;\n        const fileExtension = `.${file instanceof File ? file.name.split(\".\").pop() : file.name.split(\".\").pop()}`;\n\n        const isAccepted = acceptedTypes.some((type) => {\n          if (type.startsWith(\".\")) {\n            return fileExtension.toLowerCase() === type.toLowerCase();\n          }\n          if (type.endsWith(\"/*\")) {\n            const baseType = type.split(\"/\")[0];\n            return fileType.startsWith(`${baseType}/`);\n          }\n          return fileType === type;\n        });\n\n        if (!isAccepted) {\n          return `File \"${file instanceof File ? file.name : file.name}\" is not an accepted file type.`;\n        }\n      }\n\n      return null;\n    },\n    [accept, maxSize],\n  );\n\n  const createPreview = useCallback(\n    (file: File | FileMetadata): string | undefined => {\n      if (file instanceof File) {\n        return URL.createObjectURL(file);\n      }\n      return file.url;\n    },\n    [],\n  );\n\n  const generateUniqueId = useCallback((file: File | FileMetadata): string => {\n    if (file instanceof File) {\n      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n    }\n    return file.id;\n  }, []);\n\n  const clearFiles = useCallback(() => {\n    setState((prev) => {\n      // Clean up object URLs\n      for (const file of prev.files ?? []) {\n        if (\n          file.preview &&\n          file.file instanceof File &&\n          file.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(file.preview);\n        }\n      }\n\n      if (inputRef.current) {\n        inputRef.current.value = \"\";\n      }\n\n      const newState = {\n        ...prev,\n        errors: [],\n        files: [],\n      };\n\n      onFilesChange?.(newState.files);\n      return newState;\n    });\n  }, [onFilesChange]);\n\n  const addFiles = useCallback(\n    (newFiles: FileList | File[]) => {\n      if (!newFiles || newFiles.length === 0) return;\n\n      const newFilesArray = Array.from(newFiles);\n      const errors: string[] = [];\n\n      // Clear existing errors when new files are uploaded\n      setState((prev) => ({ ...prev, errors: [] }));\n\n      // In single file mode, clear existing files first\n      if (!multiple) {\n        clearFiles();\n      }\n\n      // Check if adding these files would exceed maxFiles (only in multiple mode)\n      if (\n        multiple &&\n        maxFiles !== Number.POSITIVE_INFINITY &&\n        state.files.length + newFilesArray.length > maxFiles\n      ) {\n        errors.push(`You can only upload a maximum of ${maxFiles} files.`);\n        setState((prev) => ({ ...prev, errors }));\n        return;\n      }\n\n      const validFiles: FileWithPreview[] = [];\n\n      for (const file of newFilesArray) {\n        if (multiple) {\n          const isDuplicate = state.files.some(\n            (existingFile) =>\n              existingFile.file.name === file.name &&\n              existingFile.file.size === file.size,\n          );\n\n          if (isDuplicate) {\n            continue;\n          }\n        }\n\n        if (file.size > maxSize) {\n          errors.push(\n            multiple\n              ? `Some files exceed the maximum size of ${formatBytes(maxSize)}.`\n              : `File exceeds the maximum size of ${formatBytes(maxSize)}.`,\n          );\n          continue;\n        }\n\n        const error = validateFile(file);\n\n        if (error) {\n          errors.push(error);\n          continue;\n        }\n\n        validFiles.push({\n          file,\n          id: generateUniqueId(file),\n          preview: createPreview(file),\n        });\n      }\n\n      // Only update state if we have valid files to add\n      if (validFiles.length > 0) {\n        // Call the onFilesAdded callback with the newly added valid files\n        onFilesAdded?.(validFiles);\n\n        setState((prev) => {\n          const newFiles = !multiple\n            ? validFiles\n            : [...prev.files, ...validFiles];\n          onFilesChange?.(newFiles);\n          return {\n            ...prev,\n            errors,\n            files: newFiles,\n          };\n        });\n      } else if (errors.length > 0) {\n        setState((prev) => ({\n          ...prev,\n          errors,\n        }));\n      }\n\n      // Reset input value after handling files\n      if (inputRef.current) {\n        inputRef.current.value = \"\";\n      }\n    },\n    [\n      state.files,\n      maxFiles,\n      multiple,\n      maxSize,\n      validateFile,\n      createPreview,\n      generateUniqueId,\n      clearFiles,\n      onFilesChange,\n      onFilesAdded,\n    ],\n  );\n\n  const removeFile = useCallback(\n    (id: string) => {\n      setState((prev) => {\n        const fileToRemove = prev.files.find((file) => file.id === id);\n        if (\n          fileToRemove?.preview &&\n          fileToRemove.file instanceof File &&\n          fileToRemove.file.type.startsWith(\"image/\")\n        ) {\n          URL.revokeObjectURL(fileToRemove.preview);\n        }\n\n        const newFiles = prev.files.filter((file) => file.id !== id);\n        onFilesChange?.(newFiles);\n\n        return {\n          ...prev,\n          errors: [],\n          files: newFiles,\n        };\n      });\n    },\n    [onFilesChange],\n  );\n\n  const clearErrors = useCallback(() => {\n    setState((prev) => ({\n      ...prev,\n      errors: [],\n    }));\n  }, []);\n\n  const handleDragEnter = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setState((prev) => ({ ...prev, isDragging: true }));\n  }, []);\n\n  const handleDragLeave = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (e.currentTarget.contains(e.relatedTarget as Node)) {\n      return;\n    }\n\n    setState((prev) => ({ ...prev, isDragging: false }));\n  }, []);\n\n  const handleDragOver = useCallback((e: DragEvent<HTMLElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setState((prev) => ({ ...prev, isDragging: false }));\n\n      // Don't process files if the input is disabled\n      if (inputRef.current?.disabled) {\n        return;\n      }\n\n      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n        // In single file mode, only use the first file\n        if (!multiple) {\n          const file = e.dataTransfer.files[0];\n          addFiles([file]);\n        } else {\n          addFiles(e.dataTransfer.files);\n        }\n      }\n    },\n    [addFiles, multiple],\n  );\n\n  const handleFileChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files && e.target.files.length > 0) {\n        addFiles(e.target.files);\n      }\n    },\n    [addFiles],\n  );\n\n  const openFileDialog = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.click();\n    }\n  }, []);\n\n  const getInputProps = useCallback(\n    (props: InputHTMLAttributes<HTMLInputElement> = {}) => {\n      return {\n        ...props,\n        accept: props.accept || accept,\n        multiple: props.multiple !== undefined ? props.multiple : multiple,\n        onChange: handleFileChange,\n        // Cast to `any` to prevent mismatched React ref type errors across workspaces\n        // biome-ignore lint/suspicious/noExplicitAny: Intentional\n        ref: inputRef as any,\n        type: \"file\" as const,\n      };\n    },\n    [accept, multiple, handleFileChange],\n  );\n\n  return [\n    state,\n    {\n      addFiles,\n      clearErrors,\n      clearFiles,\n      getInputProps,\n      handleDragEnter,\n      handleDragLeave,\n      handleDragOver,\n      handleDrop,\n      handleFileChange,\n      openFileDialog,\n      removeFile,\n    },\n  ];\n};\n\n// Helper function to format bytes to human-readable format\nexport const formatBytes = (bytes: number, decimals = 2): string => {\n  if (bytes === 0) return \"0 Bytes\";\n\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];\n};\n"
  },
  {
    "path": "apps/origin/registry/default/hooks/use-pagination.ts",
    "content": "type UsePaginationProps = {\n  currentPage: number;\n  totalPages: number;\n  paginationItemsToDisplay: number;\n};\n\ntype UsePaginationReturn = {\n  pages: number[];\n  showLeftEllipsis: boolean;\n  showRightEllipsis: boolean;\n};\n\nexport function usePagination({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay,\n}: UsePaginationProps): UsePaginationReturn {\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2;\n  const showRightEllipsis =\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2;\n\n  function calculatePaginationRange(): number[] {\n    if (totalPages <= paginationItemsToDisplay) {\n      return Array.from({ length: totalPages }, (_, i) => i + 1);\n    }\n\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2);\n    const initialRange = {\n      end: currentPage + halfDisplay,\n      start: currentPage - halfDisplay,\n    };\n\n    const adjustedRange = {\n      end: Math.min(totalPages, initialRange.end),\n      start: Math.max(1, initialRange.start),\n    };\n\n    if (adjustedRange.start === 1) {\n      adjustedRange.end = paginationItemsToDisplay;\n    }\n    if (adjustedRange.end === totalPages) {\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1;\n    }\n\n    if (showLeftEllipsis) adjustedRange.start++;\n    if (showRightEllipsis) adjustedRange.end--;\n\n    return Array.from(\n      { length: adjustedRange.end - adjustedRange.start + 1 },\n      (_, i) => adjustedRange.start + i,\n    );\n  }\n\n  const pages = calculatePaginationRange();\n\n  return {\n    pages,\n    showLeftEllipsis,\n    showRightEllipsis,\n  };\n}\n"
  },
  {
    "path": "apps/origin/registry/default/hooks/use-slider-with-input.ts",
    "content": "\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\ntype UseSliderWithInputProps = {\n  minValue?: number;\n  maxValue?: number;\n  initialValue?: number[];\n  defaultValue?: number[];\n};\n\nexport function useSliderWithInput({\n  minValue = 0,\n  maxValue = 100,\n  initialValue = [minValue],\n  defaultValue = [minValue],\n}: UseSliderWithInputProps) {\n  const [sliderValue, setSliderValue] = useState(initialValue);\n  const [inputValues, setInputValues] = useState(\n    initialValue.map((v) => v.toString()),\n  );\n\n  const showReset =\n    sliderValue.length === defaultValue.length &&\n    !sliderValue.every((value, index) => value === defaultValue[index]);\n\n  const validateAndUpdateValue = useCallback(\n    (rawValue: string, index: number) => {\n      if (rawValue === \"\" || rawValue === \"-\") {\n        const newInputValues = [...inputValues];\n        newInputValues[index] = \"0\";\n        setInputValues(newInputValues);\n\n        const newSliderValues = [...sliderValue];\n        newSliderValues[index] = 0;\n        setSliderValue(newSliderValues);\n        return;\n      }\n\n      const numValue = Number.parseFloat(rawValue);\n\n      if (Number.isNaN(numValue)) {\n        const newInputValues = [...inputValues];\n        newInputValues[index] = sliderValue[index]?.toString();\n        setInputValues(newInputValues);\n        return;\n      }\n\n      let clampedValue = Math.min(maxValue, Math.max(minValue, numValue));\n\n      if (sliderValue.length > 1) {\n        if (index === 0) {\n          clampedValue = Math.min(clampedValue, sliderValue[1]);\n        } else {\n          clampedValue = Math.max(clampedValue, sliderValue[0]);\n        }\n      }\n\n      const newSliderValues = [...sliderValue];\n      newSliderValues[index] = clampedValue;\n      setSliderValue(newSliderValues);\n\n      const newInputValues = [...inputValues];\n      newInputValues[index] = clampedValue.toString();\n      setInputValues(newInputValues);\n    },\n    [sliderValue, inputValues, minValue, maxValue],\n  );\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\n      const newValue = e.target.value;\n      if (newValue === \"\" || /^-?\\d*\\.?\\d*$/.test(newValue)) {\n        const newInputValues = [...inputValues];\n        newInputValues[index] = newValue;\n        setInputValues(newInputValues);\n      }\n    },\n    [inputValues],\n  );\n\n  const handleSliderChange = useCallback((newValue: number[]) => {\n    setSliderValue(newValue);\n    setInputValues(newValue.map((v) => v.toString()));\n  }, []);\n\n  const resetToDefault = useCallback(() => {\n    setSliderValue(defaultValue);\n    setInputValues(defaultValue.map((v) => v.toString()));\n  }, [defaultValue]);\n\n  return {\n    handleInputChange,\n    handleSliderChange,\n    inputValues,\n    resetToDefault,\n    showReset,\n    sliderValue,\n    validateAndUpdateValue,\n  };\n}\n"
  },
  {
    "path": "apps/origin/registry/default/hooks/use-toast.ts",
    "content": "\"use client\";\n\n// Inspired by react-hot-toast library\nimport * as React from \"react\";\nimport type {\n  ToastActionElement,\n  ToastProps,\n} from \"@/registry/default/ui/toast\";\n\nconst TOAST_LIMIT = 1;\nconst TOAST_REMOVE_DELAY = 1000000;\n\ntype ToasterToast = ToastProps & {\n  id: string;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  action?: ToastActionElement;\n};\n\nconst actionTypes = {\n  ADD_TOAST: \"ADD_TOAST\",\n  DISMISS_TOAST: \"DISMISS_TOAST\",\n  REMOVE_TOAST: \"REMOVE_TOAST\",\n  UPDATE_TOAST: \"UPDATE_TOAST\",\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n  count = (count + 1) % Number.MAX_SAFE_INTEGER;\n  return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n  | {\n      type: ActionType[\"ADD_TOAST\"];\n      toast: ToasterToast;\n    }\n  | {\n      type: ActionType[\"UPDATE_TOAST\"];\n      toast: Partial<ToasterToast>;\n    }\n  | {\n      type: ActionType[\"DISMISS_TOAST\"];\n      toastId?: ToasterToast[\"id\"];\n    }\n  | {\n      type: ActionType[\"REMOVE_TOAST\"];\n      toastId?: ToasterToast[\"id\"];\n    };\n\ninterface State {\n  toasts: ToasterToast[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n  if (toastTimeouts.has(toastId)) {\n    return;\n  }\n\n  const timeout = setTimeout(() => {\n    toastTimeouts.delete(toastId);\n    dispatch({\n      toastId: toastId,\n      type: \"REMOVE_TOAST\",\n    });\n  }, TOAST_REMOVE_DELAY);\n\n  toastTimeouts.set(toastId, timeout);\n};\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"ADD_TOAST\":\n      return {\n        ...state,\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n      };\n\n    case \"UPDATE_TOAST\":\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === action.toast.id ? { ...t, ...action.toast } : t,\n        ),\n      };\n\n    case \"DISMISS_TOAST\": {\n      const { toastId } = action;\n\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\n      // but I'll keep it here for simplicity\n      if (toastId) {\n        addToRemoveQueue(toastId);\n      } else {\n        for (const toast of state.toasts) {\n          addToRemoveQueue(toast.id);\n        }\n      }\n\n      return {\n        ...state,\n        toasts: state.toasts.map((t) =>\n          t.id === toastId || toastId === undefined\n            ? {\n                ...t,\n                open: false,\n              }\n            : t,\n        ),\n      };\n    }\n    case \"REMOVE_TOAST\":\n      if (action.toastId === undefined) {\n        return {\n          ...state,\n          toasts: [],\n        };\n      }\n      return {\n        ...state,\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\n      };\n  }\n};\n\nconst listeners: Array<(state: State) => void> = [];\n\nlet memoryState: State = { toasts: [] };\n\nfunction dispatch(action: Action) {\n  memoryState = reducer(memoryState, action);\n  for (const listener of listeners) {\n    listener(memoryState);\n  }\n}\n\ntype Toast = Omit<ToasterToast, \"id\">;\n\nfunction toast({ ...props }: Toast) {\n  const id = genId();\n\n  const update = (props: ToasterToast) =>\n    dispatch({\n      toast: { ...props, id },\n      type: \"UPDATE_TOAST\",\n    });\n  const dismiss = () => dispatch({ toastId: id, type: \"DISMISS_TOAST\" });\n\n  dispatch({\n    toast: {\n      ...props,\n      id,\n      onOpenChange: (open) => {\n        if (!open) dismiss();\n      },\n      open: true,\n    },\n    type: \"ADD_TOAST\",\n  });\n\n  return {\n    dismiss,\n    id: id,\n    update,\n  };\n}\n\nfunction useToast() {\n  const [state, setState] = React.useState<State>(memoryState);\n\n  React.useEffect(() => {\n    listeners.push(setState);\n    return () => {\n      const index = listeners.indexOf(setState);\n      if (index > -1) {\n        listeners.splice(index, 1);\n      }\n    };\n  }, []);\n\n  return {\n    ...state,\n    dismiss: (toastId?: string) => dispatch({ toastId, type: \"DISMISS_TOAST\" }),\n    toast,\n  };\n}\n\nexport { toast, useToast };\n"
  },
  {
    "path": "apps/origin/registry/default/lib/utils.ts",
    "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
  },
  {
    "path": "apps/origin/registry/default/ui/accordion.tsx",
    "content": "\"use client\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      className={cn(\"border-b last:border-b-0\", className)}\n      data-slot=\"accordion-item\"\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        className={cn(\n          \"flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left font-semibold text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className,\n        )}\n        data-slot=\"accordion-trigger\"\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          aria-hidden=\"true\"\n          className=\"pointer-events-none shrink-0 opacity-60 transition-transform duration-200\"\n          size={16}\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      data-slot=\"accordion-content\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/alert-dialog.tsx",
    "content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  );\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        className,\n      )}\n      data-slot=\"alert-dialog-overlay\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        className={cn(\n          \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-100\",\n          className,\n        )}\n        data-slot=\"alert-dialog-content\"\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-1 text-center sm:text-left\", className)}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      className={cn(\"font-semibold text-lg\", className)}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/avatar.tsx",
    "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Avatar({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n        className,\n      )}\n      data-slot=\"avatar\"\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      className={cn(\"aspect-square size-full\", className)}\n      data-slot=\"avatar-image\"\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      className={cn(\n        \"flex size-full items-center justify-center rounded-[inherit] bg-secondary text-xs\",\n        className,\n      )}\n      data-slot=\"avatar-fallback\"\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/badge.tsx",
    "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-1.5 font-medium text-xs leading-normal transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:shrink-0\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        destructive:\n          \"border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n      },\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\";\n\n  return (\n    <Comp\n      className={cn(badgeVariants({ variant }), className)}\n      data-slot=\"badge\"\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/breadcrumb.tsx",
    "content": "import { ChevronRightIcon, MoreHorizontal } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5\",\n        className,\n      )}\n      data-slot=\"breadcrumb-list\"\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      data-slot=\"breadcrumb-item\"\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"a\";\n\n  return (\n    <Comp\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      data-slot=\"breadcrumb-link\"\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    // biome-ignore lint(a11y/useFocusableInteractive): known\n    <span\n      aria-current=\"page\"\n      aria-disabled=\"true\"\n      className={cn(\"font-normal text-foreground\", className)}\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      {...props}\n    />\n  );\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      aria-hidden=\"true\"\n      className={className}\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      {...props}\n    >\n      {children ?? <ChevronRightIcon size={16} />}\n    </li>\n  );\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\"flex size-5 items-center justify-center\", className)}\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      {...props}\n    >\n      <MoreHorizontal size={16} />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/button.tsx",
    "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 px-4 py-2\",\n        icon: \"size-9\",\n        lg: \"h-10 rounded-md px-8\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n      },\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        outline:\n          \"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n      },\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      className={cn(buttonVariants({ className, size, variant }))}\n      data-slot=\"button\"\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/calendar-rac.tsx",
    "content": "\"use client\";\n\nimport { getLocalTimeZone, today } from \"@internationalized/date\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport {\n  Button,\n  CalendarCell as CalendarCellRac,\n  CalendarGridBody as CalendarGridBodyRac,\n  CalendarGridHeader as CalendarGridHeaderRac,\n  CalendarGrid as CalendarGridRac,\n  CalendarHeaderCell as CalendarHeaderCellRac,\n  Calendar as CalendarRac,\n  composeRenderProps,\n  Heading as HeadingRac,\n  RangeCalendar as RangeCalendarRac,\n} from \"react-aria-components\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ninterface BaseCalendarProps {\n  className?: string;\n}\n\ntype CalendarProps = ComponentProps<typeof CalendarRac> & BaseCalendarProps;\ntype RangeCalendarProps = ComponentProps<typeof RangeCalendarRac> &\n  BaseCalendarProps;\n\nfunction CalendarHeader() {\n  return (\n    <header className=\"flex w-full items-center gap-1 pb-1\">\n      <Button\n        className=\"flex size-9 items-center justify-center rounded-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        slot=\"previous\"\n      >\n        <ChevronLeftIcon size={16} />\n      </Button>\n      <HeadingRac className=\"grow text-center font-medium text-sm\" />\n      <Button\n        className=\"flex size-9 items-center justify-center rounded-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        slot=\"next\"\n      >\n        <ChevronRightIcon size={16} />\n      </Button>\n    </header>\n  );\n}\n\nfunction CalendarGridComponent({ isRange = false }: { isRange?: boolean }) {\n  const now = today(getLocalTimeZone());\n\n  return (\n    <CalendarGridRac>\n      <CalendarGridHeaderRac>\n        {(day) => (\n          <CalendarHeaderCellRac className=\"size-9 rounded-md p-0 font-medium text-muted-foreground/80 text-xs\">\n            {day}\n          </CalendarHeaderCellRac>\n        )}\n      </CalendarGridHeaderRac>\n      <CalendarGridBodyRac className=\"[&_td]:px-0 [&_td]:py-px\">\n        {(date) => (\n          <CalendarCellRac\n            className={cn(\n              \"relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 font-normal text-foreground text-sm outline-none duration-150 [transition-property:color,background-color,border-radius,box-shadow] data-disabled:pointer-events-none data-unavailable:pointer-events-none data-focus-visible:z-10 data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-unavailable:line-through data-disabled:opacity-30 data-unavailable:opacity-30 data-focus-visible:ring-[3px] data-focus-visible:ring-ring/50\",\n              // Range-specific styles\n              isRange &&\n                \"data-invalid:data-selection-end:bg-destructive data-invalid:data-selection-start:bg-destructive data-invalid:data-selection-end:text-white data-invalid:data-selection-start:text-white data-selected:rounded-none data-selection-start:rounded-s-md data-selection-end:rounded-e-md data-invalid:bg-red-100 data-selected:bg-accent data-selection-end:bg-primary data-selection-start:bg-primary data-selected:text-foreground data-selection-end:text-primary-foreground data-selection-start:text-primary-foreground\",\n              // Today indicator styles\n              date.compare(now) === 0 &&\n                cn(\n                  \"after:pointer-events-none after:absolute after:start-1/2 after:bottom-1 after:z-10 after:size-[3px] after:-translate-x-1/2 after:rounded-full after:bg-primary\",\n                  isRange\n                    ? \"data-selection-end:after:bg-background data-selection-start:after:bg-background\"\n                    : \"data-selected:after:bg-background\",\n                ),\n            )}\n            date={date}\n          />\n        )}\n      </CalendarGridBodyRac>\n    </CalendarGridRac>\n  );\n}\n\nfunction Calendar({ className, ...props }: CalendarProps) {\n  return (\n    <CalendarRac\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        cn(\"w-fit\", className),\n      )}\n    >\n      <CalendarHeader />\n      <CalendarGridComponent />\n    </CalendarRac>\n  );\n}\n\nfunction RangeCalendar({ className, ...props }: RangeCalendarProps) {\n  return (\n    <RangeCalendarRac\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        cn(\"w-fit\", className),\n      )}\n    >\n      <CalendarHeader />\n      <CalendarGridComponent isRange />\n    </RangeCalendarRac>\n  );\n}\n\nexport { Calendar, RangeCalendar };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/calendar.tsx",
    "content": "\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  components: userComponents,\n  ...props\n}: React.ComponentProps<typeof DayPicker>) {\n  const defaultClassNames = {\n    button_next: cn(\n      buttonVariants({ variant: \"ghost\" }),\n      \"size-9 p-0 text-muted-foreground/80 hover:text-foreground\",\n    ),\n    button_previous: cn(\n      buttonVariants({ variant: \"ghost\" }),\n      \"size-9 p-0 text-muted-foreground/80 hover:text-foreground\",\n    ),\n    caption_label: \"text-sm font-medium\",\n    day: \"group size-9 px-0 py-px text-sm\",\n    day_button:\n      \"relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 text-foreground group-[[data-selected]:not(.range-middle)]:[transition-property:color,background-color,border-radius,box-shadow] group-[[data-selected]:not(.range-middle)]:duration-150 group-data-disabled:pointer-events-none focus-visible:z-10 hover:not-in-data-selected:bg-accent group-data-selected:bg-primary hover:not-in-data-selected:text-foreground group-data-selected:text-primary-foreground group-data-disabled:text-foreground/30 group-data-disabled:line-through group-data-outside:text-foreground/30 group-data-selected:group-data-outside:text-primary-foreground outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] group-[.range-start:not(.range-end)]:rounded-e-none group-[.range-end:not(.range-start)]:rounded-s-none group-[.range-middle]:rounded-none group-[.range-middle]:group-data-selected:bg-accent group-[.range-middle]:group-data-selected:text-foreground\",\n    hidden: \"invisible\",\n    month: \"w-full\",\n    month_caption:\n      \"relative mx-10 mb-1 flex h-9 items-center justify-center z-20\",\n    months: \"relative flex flex-col sm:flex-row gap-4\",\n    nav: \"absolute top-0 flex w-full justify-between z-10\",\n    outside:\n      \"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\",\n    range_end: \"range-end\",\n    range_middle: \"range-middle\",\n    range_start: \"range-start\",\n    today:\n      \"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors\",\n    week_number: \"size-9 p-0 text-xs font-medium text-muted-foreground/80\",\n    weekday: \"size-9 p-0 text-xs font-medium text-muted-foreground/80\",\n  };\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\n    defaultClassNames,\n  ).reduce(\n    (acc, key) => {\n      const userClass = classNames?.[key as keyof typeof classNames];\n      const baseClass =\n        defaultClassNames[key as keyof typeof defaultClassNames];\n\n      acc[key as keyof typeof defaultClassNames] = userClass\n        ? cn(baseClass, userClass)\n        : baseClass;\n\n      return acc;\n    },\n    { ...defaultClassNames } as typeof defaultClassNames,\n  );\n\n  const defaultComponents = {\n    Chevron: (props: {\n      className?: string;\n      size?: number;\n      disabled?: boolean;\n      orientation?: \"left\" | \"right\" | \"up\" | \"down\";\n    }) => {\n      if (props.orientation === \"left\") {\n        return <ChevronLeftIcon size={16} {...props} aria-hidden=\"true\" />;\n      }\n      return <ChevronRightIcon size={16} {...props} aria-hidden=\"true\" />;\n    },\n  };\n\n  const mergedComponents = {\n    ...defaultComponents,\n    ...userComponents,\n  };\n\n  return (\n    <DayPicker\n      className={cn(\"w-fit\", className)}\n      classNames={mergedClassNames}\n      components={mergedComponents}\n      showOutsideDays={showOutsideDays}\n      {...props}\n    />\n  );\n}\n\nexport { Calendar };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/checkbox-tree.tsx",
    "content": "/**\n * IMPORTANT: This component was built for demo purposes only and has not been tested in production.\n * It serves as a proof of concept for a checkbox tree implementation.\n * If you're interested in collaborating to create a more robust, production-ready\n * headless component, your contributions are welcome!\n */\n\n\"use client\";\n\nimport type React from \"react\";\nimport { useCallback, useMemo, useState } from \"react\";\n\ninterface TreeNode {\n  id: string;\n  label: string;\n  defaultChecked?: boolean;\n  children?: TreeNode[];\n}\n\nfunction useCheckboxTree(initialTree: TreeNode) {\n  const initialCheckedNodes = useMemo(() => {\n    const checkedSet = new Set<string>();\n    const initializeCheckedNodes = (node: TreeNode) => {\n      if (node.defaultChecked) {\n        checkedSet.add(node.id);\n      }\n      node.children?.forEach(initializeCheckedNodes);\n    };\n    initializeCheckedNodes(initialTree);\n    return checkedSet;\n  }, [initialTree]);\n\n  const [checkedNodes, setCheckedNodes] =\n    useState<Set<string>>(initialCheckedNodes);\n\n  const isChecked = useCallback(\n    (node: TreeNode): boolean | \"indeterminate\" => {\n      if (!node.children) {\n        return checkedNodes.has(node.id);\n      }\n\n      const childrenChecked = node.children.map((child) => isChecked(child));\n      if (childrenChecked.every((status) => status === true)) {\n        return true;\n      }\n      if (\n        childrenChecked.some(\n          (status) => status === true || status === \"indeterminate\",\n        )\n      ) {\n        return \"indeterminate\";\n      }\n      return false;\n    },\n    [checkedNodes],\n  );\n\n  const handleCheck = useCallback(\n    (node: TreeNode) => {\n      const newCheckedNodes = new Set(checkedNodes);\n\n      const toggleNode = (n: TreeNode, check: boolean) => {\n        if (check) {\n          newCheckedNodes.add(n.id);\n        } else {\n          newCheckedNodes.delete(n.id);\n        }\n        for (const child of n.children ?? []) {\n          toggleNode(child, check);\n        }\n      };\n\n      const currentStatus = isChecked(node);\n      const newCheck = currentStatus !== true;\n\n      toggleNode(node, newCheck);\n      setCheckedNodes(newCheckedNodes);\n    },\n    [checkedNodes, isChecked],\n  );\n\n  return { handleCheck, isChecked };\n}\n\ninterface CheckboxTreeProps {\n  tree: TreeNode;\n  renderNode: (props: {\n    node: TreeNode;\n    isChecked: boolean | \"indeterminate\";\n    onCheckedChange: () => void;\n    children: React.ReactNode;\n  }) => React.ReactNode;\n}\n\nexport function CheckboxTree({ tree, renderNode }: CheckboxTreeProps) {\n  const { isChecked, handleCheck } = useCheckboxTree(tree);\n\n  const renderTreeNode = (node: TreeNode): React.ReactNode => {\n    const children = node.children?.map(renderTreeNode);\n\n    return renderNode({\n      children,\n      isChecked: isChecked(node),\n      node,\n      onCheckedChange: () => handleCheck(node),\n    });\n  };\n\n  return renderTreeNode(tree);\n}\n"
  },
  {
    "path": "apps/origin/registry/default/ui/checkbox.tsx",
    "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      className={cn(\n        \"peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      data-slot=\"checkbox\"\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className=\"grid place-content-center text-current\"\n        data-slot=\"checkbox-indicator\"\n      >\n        {props.checked === \"indeterminate\" ? (\n          <svg\n            fill=\"currentcolor\"\n            height=\"9\"\n            viewBox=\"0 0 9 9\"\n            width=\"9\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M0.75 4.5C0.75 4.08579 1.08579 3.75 1.5 3.75H7.5C7.91421 3.75 8.25 4.08579 8.25 4.5C8.25 4.91421 7.91421 5.25 7.5 5.25H1.5C1.08579 5.25 0.75 4.91421 0.75 4.5Z\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        ) : (\n          <svg\n            fill=\"currentcolor\"\n            height=\"9\"\n            viewBox=\"0 0 9 9\"\n            width=\"9\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              clipRule=\"evenodd\"\n              d=\"M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z\"\n              fillRule=\"evenodd\"\n            />\n          </svg>\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/collapsible.tsx",
    "content": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  );\n}\n\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/command.tsx",
    "content": "\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/default/ui/dialog\";\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className,\n      )}\n      data-slot=\"command\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string;\n  description?: string;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent className=\"overflow-hidden p-0 sm:max-w-lg [&>button:last-child]:hidden\">\n        <Command className=\"max-h-[100svh] **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      className=\"flex items-center border-input border-b px-5\"\n      cmdk-input-wrapper=\"\"\n    >\n      <SearchIcon className=\"me-3 text-muted-foreground/80\" size={20} />\n      <CommandPrimitive.Input\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        data-slot=\"command-input-wrapper\"\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn(\n        \"max-h-80 flex-1 overflow-y-auto overflow-x-hidden\",\n        className,\n      )}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"py-6 text-center text-sm\"\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        \"overflow-hidden p-2 text-foreground [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs\",\n        className,\n      )}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        \"relative flex cursor-default select-none items-center gap-3 rounded-md px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/cropper.tsx",
    "content": "\"use client\";\n\nimport { Cropper as CropperPrimitive } from \"@origin-space/image-cropper\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Cropper({\n  className,\n  ...props\n}: React.ComponentProps<typeof CropperPrimitive.Root>) {\n  return (\n    <CropperPrimitive.Root\n      className={cn(\n        \"relative flex w-full cursor-move touch-none items-center justify-center overflow-hidden focus:outline-none\",\n        className,\n      )}\n      data-slot=\"cropper\"\n      {...props}\n    />\n  );\n}\n\nfunction CropperDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof CropperPrimitive.Description>) {\n  return (\n    <CropperPrimitive.Description\n      className={cn(\"sr-only\", className)}\n      data-slot=\"cropper-description\"\n      {...props}\n    />\n  );\n}\n\nfunction CropperImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof CropperPrimitive.Image>) {\n  return (\n    <CropperPrimitive.Image\n      className={cn(\n        \"pointer-events-none h-full w-full object-cover\",\n        className,\n      )}\n      data-slot=\"cropper-image\"\n      {...props}\n    />\n  );\n}\n\nfunction CropperCropArea({\n  className,\n  ...props\n}: React.ComponentProps<typeof CropperPrimitive.CropArea>) {\n  return (\n    <CropperPrimitive.CropArea\n      className={cn(\n        \"pointer-events-none absolute border-3 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.3)] in-[[data-slot=cropper]:focus-visible]:ring-[3px] in-[[data-slot=cropper]:focus-visible]:ring-white/50\",\n        className,\n      )}\n      data-slot=\"cropper-crop-area\"\n      {...props}\n    />\n  );\n}\n\nexport { Cropper, CropperDescription, CropperImage, CropperCropArea };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/datefield-rac.tsx",
    "content": "\"use client\";\n\nimport {\n  composeRenderProps,\n  type DateFieldProps,\n  DateField as DateFieldRac,\n  type DateInputProps as DateInputPropsRac,\n  DateInput as DateInputRac,\n  type DateSegmentProps,\n  DateSegment as DateSegmentRac,\n  type DateValue as DateValueRac,\n  type TimeFieldProps,\n  TimeField as TimeFieldRac,\n  type TimeValue as TimeValueRac,\n} from \"react-aria-components\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction DateField<T extends DateValueRac>({\n  className,\n  children,\n  ...props\n}: DateFieldProps<T>) {\n  return (\n    <DateFieldRac\n      className={composeRenderProps(className, (className) => cn(className))}\n      {...props}\n    >\n      {children}\n    </DateFieldRac>\n  );\n}\n\nfunction TimeField<T extends TimeValueRac>({\n  className,\n  children,\n  ...props\n}: TimeFieldProps<T>) {\n  return (\n    <TimeFieldRac\n      className={composeRenderProps(className, (className) => cn(className))}\n      {...props}\n    >\n      {children}\n    </TimeFieldRac>\n  );\n}\n\nfunction DateSegment({ className, ...props }: DateSegmentProps) {\n  return (\n    <DateSegmentRac\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"inline rounded p-0.5 text-foreground caret-transparent outline-hidden data-invalid:data-focused:bg-destructive data-focused:data-placeholder:text-foreground data-invalid:data-focused:text-white data-invalid:data-placeholder:text-destructive data-disabled:cursor-not-allowed data-focused:bg-accent data-[type=literal]:px-0 data-[type=literal]:text-muted-foreground/70 data-focused:text-foreground data-invalid:data-focused:data-placeholder:text-white data-invalid:text-destructive data-placeholder:text-muted-foreground/70 data-disabled:opacity-50\",\n          className,\n        ),\n      )}\n      {...props}\n      data-invalid\n    />\n  );\n}\n\nconst dateInputStyle =\n  \"relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none data-focus-within:border-ring data-focus-within:ring-ring/50 data-focus-within:ring-[3px] data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40 data-focus-within:has-aria-invalid:border-destructive\";\n\ninterface DateInputProps extends DateInputPropsRac {\n  className?: string;\n  unstyled?: boolean;\n}\n\nfunction DateInput({\n  className,\n  unstyled = false,\n  ...props\n}: Omit<DateInputProps, \"children\">) {\n  return (\n    <DateInputRac\n      className={composeRenderProps(className, (className) =>\n        cn(!unstyled && dateInputStyle, className),\n      )}\n      {...props}\n    >\n      {(segment) => <DateSegment segment={segment} />}\n    </DateInputRac>\n  );\n}\n\nexport { DateField, DateInput, DateSegment, TimeField, dateInputStyle };\nexport type { DateInputProps };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/dialog.tsx",
    "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        className,\n      )}\n      data-slot=\"dialog-overlay\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content>) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        className={cn(\n          \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-100\",\n          className,\n        )}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n        <DialogPrimitive.Close className=\"group absolute top-3 right-3 flex size-7 items-center justify-center rounded outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none\">\n          <XIcon\n            className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n            size={16}\n          />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-1 text-center sm:text-left\", className)}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"font-semibold text-lg leading-none\", className)}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/dropdown-menu.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ntype PointerDownEvent = Parameters<\n  NonNullable<DropdownMenuPrimitive.DropdownMenuContentProps[\"onPointerDown\"]>\n>[0];\ntype PointerDownOutsideEvent = Parameters<\n  NonNullable<\n    DropdownMenuPrimitive.DropdownMenuContentProps[\"onPointerDownOutside\"]\n  >\n>[0];\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  );\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  onPointerDown,\n  onPointerDownOutside,\n  onCloseAutoFocus,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  const isCloseFromMouse = React.useRef<boolean>(false);\n\n  const handlePointerDown = React.useCallback(\n    (e: PointerDownEvent) => {\n      isCloseFromMouse.current = true;\n      onPointerDown?.(e);\n    },\n    [onPointerDown],\n  );\n\n  const handlePointerDownOutside = React.useCallback(\n    (e: PointerDownOutsideEvent) => {\n      isCloseFromMouse.current = true;\n      onPointerDownOutside?.(e);\n    },\n    [onPointerDownOutside],\n  );\n\n  const handleCloseAutoFocus = React.useCallback(\n    (e: Event) => {\n      if (onCloseAutoFocus) {\n        return onCloseAutoFocus(e);\n      }\n\n      if (!isCloseFromMouse.current) {\n        return;\n      }\n\n      e.preventDefault();\n      isCloseFromMouse.current = false;\n    },\n    [onCloseAutoFocus],\n  );\n\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        className={cn(\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in\",\n          className,\n        )}\n        data-slot=\"dropdown-menu-content\"\n        onCloseAutoFocus={handleCloseAutoFocus}\n        onPointerDown={handlePointerDown}\n        onPointerDownOutside={handlePointerDownOutside}\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      className={cn(\n        \"data-[variant=destructive]:*:[svg]:!text-destructive-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[variant=destructive]:text-destructive-foreground data-[disabled]:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive-foreground dark:data-[variant=destructive]:focus:bg-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"dropdown-menu-item\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-checkbox-item\"\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon size={16} />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      className={cn(\n        \"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-radio-item\"\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs data-[inset]:pl-8\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"dropdown-menu-label\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      data-slot=\"dropdown-menu-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto -me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] font-medium text-[0.625rem] text-muted-foreground/70\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-shortcut\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      className={cn(\n        \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[inset]:pl-8 data-[state=open]:text-accent-foreground\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"dropdown-menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon\n        className=\"ml-auto text-muted-foreground/80\"\n        size={16}\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      className={cn(\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        className,\n      )}\n      data-slot=\"dropdown-menu-sub-content\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/hover-card.tsx",
    "content": "\"use client\";\n\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  );\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  showArrow = false,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content> & {\n  showArrow?: boolean;\n}) {\n  return (\n    <HoverCardPrimitive.Content\n      align={align}\n      className={cn(\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        className,\n      )}\n      data-slot=\"hover-card-content\"\n      sideOffset={sideOffset}\n      {...props}\n    >\n      {props.children}\n      {showArrow && (\n        <HoverCardPrimitive.Arrow className=\"-my-px fill-popover drop-shadow-[0_1px_0_var(--border)]\" />\n      )}\n    </HoverCardPrimitive.Content>\n  );\n}\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/input.tsx",
    "content": "import type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      className={cn(\n        \"flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground/70 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        type === \"search\" &&\n          \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\",\n        type === \"file\" &&\n          \"p-0 pr-3 text-muted-foreground/70 italic file:me-3 file:h-full file:border-0 file:border-input file:border-r file:border-solid file:bg-transparent file:px-3 file:font-medium file:text-foreground file:text-sm file:not-italic\",\n        className,\n      )}\n      data-slot=\"input\"\n      type={type}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/label.tsx",
    "content": "\"use client\";\n\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      className={cn(\n        \"select-none font-medium text-foreground text-sm leading-4 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50\",\n        className,\n      )}\n      data-slot=\"label\"\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/multiselect.tsx",
    "content": "\"use client\";\n\nimport { Command as CommandPrimitive, useCommandState } from \"cmdk\";\nimport { XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useEffect } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Command,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\";\n\nexport interface Option {\n  value: string;\n  label: string;\n  disable?: boolean;\n  /** fixed option that can't be removed. */\n  fixed?: boolean;\n  /** Group the options by providing key. */\n  [key: string]: string | boolean | undefined;\n}\ninterface GroupOption {\n  [key: string]: Option[];\n}\n\ninterface MultipleSelectorProps {\n  value?: Option[];\n  defaultOptions?: Option[];\n  /** manually controlled options */\n  options?: Option[];\n  placeholder?: string;\n  /** Loading component. */\n  loadingIndicator?: React.ReactNode;\n  /** Empty component. */\n  emptyIndicator?: React.ReactNode;\n  /** Debounce time for async search. Only work with `onSearch`. */\n  delay?: number;\n  /**\n   * Only work with `onSearch` prop. Trigger search when `onFocus`.\n   * For example, when user click on the input, it will trigger the search to get initial options.\n   **/\n  triggerSearchOnFocus?: boolean;\n  /** async search */\n  onSearch?: (value: string) => Promise<Option[]>;\n  /**\n   * sync search. This search will not showing loadingIndicator.\n   * The rest props are the same as async search.\n   * i.e.: creatable, groupBy, delay.\n   **/\n  onSearchSync?: (value: string) => Option[];\n  onChange?: (options: Option[]) => void;\n  /** Limit the maximum number of selected options. */\n  maxSelected?: number;\n  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */\n  onMaxSelected?: (maxLimit: number) => void;\n  /** Hide the placeholder when there are options selected. */\n  hidePlaceholderWhenSelected?: boolean;\n  disabled?: boolean;\n  /** Group the options base on provided key. */\n  groupBy?: string;\n  className?: string;\n  badgeClassName?: string;\n  /**\n   * First item selected is a default behavior by cmdk. That is why the default is true.\n   * This is a workaround solution by add a dummy item.\n   *\n   * @reference: https://github.com/pacocoursey/cmdk/issues/171\n   */\n  selectFirstItem?: boolean;\n  /** Allow user to create option when there is no option matched. */\n  creatable?: boolean;\n  /** Props of `Command` */\n  commandProps?: React.ComponentPropsWithoutRef<typeof Command>;\n  /** Props of `CommandInput` */\n  inputProps?: Omit<\n    React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>,\n    \"value\" | \"placeholder\" | \"disabled\"\n  >;\n  /** hide the clear all button. */\n  hideClearAllButton?: boolean;\n}\n\nexport interface MultipleSelectorRef {\n  selectedValue: Option[];\n  input: HTMLInputElement;\n  focus: () => void;\n  reset: () => void;\n}\n\nexport function useDebounce<T>(value: T, delay?: number): T {\n  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n\nfunction transToGroupOption(options: Option[], groupBy?: string) {\n  if (options.length === 0) {\n    return {};\n  }\n  if (!groupBy) {\n    return {\n      \"\": options,\n    };\n  }\n\n  const groupOption: GroupOption = {};\n  options.forEach((option) => {\n    const key = (option[groupBy] as string) || \"\";\n    if (!groupOption[key]) {\n      groupOption[key] = [];\n    }\n    groupOption[key].push(option);\n  });\n  return groupOption;\n}\n\nfunction removePickedOption(groupOption: GroupOption, picked: Option[]) {\n  const cloneOption = JSON.parse(JSON.stringify(groupOption)) as GroupOption;\n\n  for (const [key, value] of Object.entries(cloneOption)) {\n    cloneOption[key] = value.filter(\n      (val) => !picked.find((p) => p.value === val.value),\n    );\n  }\n  return cloneOption;\n}\n\nfunction isOptionsExist(groupOption: GroupOption, targetOption: Option[]) {\n  for (const [, value] of Object.entries(groupOption)) {\n    if (\n      value.some((option) => targetOption.find((p) => p.value === option.value))\n    ) {\n      return true;\n    }\n  }\n  return false;\n}\n\nconst CommandEmpty = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const render = useCommandState((state) => state.filtered.count === 0);\n\n  if (!render) return null;\n\n  return (\n    <div\n      className={cn(\"px-2 py-4 text-center text-sm\", className)}\n      role=\"presentation\"\n      {...props}\n    />\n  );\n};\n\nCommandEmpty.displayName = \"CommandEmpty\";\n\nconst MultipleSelector = ({\n  value,\n  onChange,\n  placeholder,\n  defaultOptions: arrayDefaultOptions = [],\n  options: arrayOptions,\n  delay,\n  onSearch,\n  onSearchSync,\n  loadingIndicator,\n  emptyIndicator,\n  maxSelected = Number.MAX_SAFE_INTEGER,\n  onMaxSelected,\n  hidePlaceholderWhenSelected,\n  disabled,\n  groupBy,\n  className,\n  badgeClassName,\n  selectFirstItem = true,\n  creatable = false,\n  triggerSearchOnFocus = false,\n  commandProps,\n  inputProps,\n  hideClearAllButton = false,\n}: MultipleSelectorProps) => {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [open, setOpen] = React.useState(false);\n  const [onScrollbar, setOnScrollbar] = React.useState(false);\n  const [isLoading, setIsLoading] = React.useState(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null); // Added this\n\n  const [selected, setSelected] = React.useState<Option[]>(value || []);\n  const [options, setOptions] = React.useState<GroupOption>(\n    transToGroupOption(arrayDefaultOptions, groupBy),\n  );\n  const [inputValue, setInputValue] = React.useState(\"\");\n  const debouncedSearchTerm = useDebounce(inputValue, delay || 500);\n\n  const handleClickOutside = React.useCallback(\n    (event: MouseEvent | TouchEvent) => {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node) &&\n        inputRef.current &&\n        !inputRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n        inputRef.current.blur();\n      }\n    },\n    [],\n  );\n\n  const handleUnselect = React.useCallback(\n    (option: Option) => {\n      const newOptions = selected.filter((s) => s.value !== option.value);\n      setSelected(newOptions);\n      onChange?.(newOptions);\n    },\n    [onChange, selected],\n  );\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const input = inputRef.current;\n      if (input) {\n        if (e.key === \"Delete\" || e.key === \"Backspace\") {\n          if (input.value === \"\" && selected.length > 0) {\n            const lastSelectOption = selected[selected.length - 1];\n            // If last item is fixed, we should not remove it.\n            if (!lastSelectOption.fixed) {\n              handleUnselect(selected[selected.length - 1]);\n            }\n          }\n        }\n        // This is not a default behavior of the <input /> field\n        if (e.key === \"Escape\") {\n          input.blur();\n        }\n      }\n    },\n    [handleUnselect, selected],\n  );\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      document.addEventListener(\"touchend\", handleClickOutside);\n    } else {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"touchend\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"touchend\", handleClickOutside);\n    };\n  }, [open, handleClickOutside]);\n\n  useEffect(() => {\n    if (value) {\n      setSelected(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    /** If `onSearch` is provided, do not trigger options updated. */\n    if (!arrayOptions || onSearch) {\n      return;\n    }\n    const newOption = transToGroupOption(arrayOptions || [], groupBy);\n    if (JSON.stringify(newOption) !== JSON.stringify(options)) {\n      setOptions(newOption);\n    }\n  }, [arrayOptions, groupBy, onSearch, options]);\n\n  useEffect(() => {\n    /** sync search */\n\n    const doSearchSync = () => {\n      const res = onSearchSync?.(debouncedSearchTerm);\n      setOptions(transToGroupOption(res || [], groupBy));\n    };\n\n    const exec = async () => {\n      if (!onSearchSync || !open) return;\n\n      if (triggerSearchOnFocus) {\n        doSearchSync();\n      }\n\n      if (debouncedSearchTerm) {\n        doSearchSync();\n      }\n    };\n\n    void exec();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearchSync]);\n\n  useEffect(() => {\n    /** async search */\n\n    const doSearch = async () => {\n      setIsLoading(true);\n      const res = await onSearch?.(debouncedSearchTerm);\n      setOptions(transToGroupOption(res || [], groupBy));\n      setIsLoading(false);\n    };\n\n    const exec = async () => {\n      if (!onSearch || !open) return;\n\n      if (triggerSearchOnFocus) {\n        await doSearch();\n      }\n\n      if (debouncedSearchTerm) {\n        await doSearch();\n      }\n    };\n\n    void exec();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedSearchTerm, groupBy, open, triggerSearchOnFocus, onSearch]);\n\n  const CreatableItem = () => {\n    if (!creatable) return undefined;\n    if (\n      isOptionsExist(options, [{ label: inputValue, value: inputValue }]) ||\n      selected.find((s) => s.value === inputValue)\n    ) {\n      return undefined;\n    }\n\n    const Item = (\n      <CommandItem\n        className=\"cursor-pointer\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onSelect={(value: string) => {\n          if (selected.length >= maxSelected) {\n            onMaxSelected?.(selected.length);\n            return;\n          }\n          setInputValue(\"\");\n          const newOptions = [...selected, { label: value, value }];\n          setSelected(newOptions);\n          onChange?.(newOptions);\n        }}\n        value={inputValue}\n      >\n        {`Create \"${inputValue}\"`}\n      </CommandItem>\n    );\n\n    // For normal creatable\n    if (!onSearch && inputValue.length > 0) {\n      return Item;\n    }\n\n    // For async search creatable. avoid showing creatable item before loading at first.\n    if (onSearch && debouncedSearchTerm.length > 0 && !isLoading) {\n      return Item;\n    }\n\n    return undefined;\n  };\n\n  const EmptyItem = React.useCallback(() => {\n    if (!emptyIndicator) return undefined;\n\n    // For async search that showing emptyIndicator\n    if (onSearch && !creatable && Object.keys(options).length === 0) {\n      return (\n        <CommandItem disabled value=\"-\">\n          {emptyIndicator}\n        </CommandItem>\n      );\n    }\n\n    return <CommandEmpty>{emptyIndicator}</CommandEmpty>;\n  }, [creatable, emptyIndicator, onSearch, options]);\n\n  const selectables = React.useMemo<GroupOption>(\n    () => removePickedOption(options, selected),\n    [options, selected],\n  );\n\n  /** Avoid Creatable Selector freezing or lagging when paste a long string. */\n  const commandFilter = React.useCallback(() => {\n    if (commandProps?.filter) {\n      return commandProps.filter;\n    }\n\n    if (creatable) {\n      return (value: string, search: string) => {\n        return value.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;\n      };\n    }\n    // Using default filter in `cmdk`. We don&lsquo;t have to provide it.\n    return undefined;\n  }, [creatable, commandProps?.filter]);\n\n  return (\n    <Command\n      ref={dropdownRef}\n      {...commandProps}\n      className={cn(\n        \"h-auto overflow-visible bg-transparent\",\n        commandProps?.className,\n      )}\n      filter={commandFilter()}\n      onKeyDown={(e) => {\n        handleKeyDown(e);\n        commandProps?.onKeyDown?.(e);\n      }} // When onSearch is provided, we don&lsquo;t want to filter the options. You can still override it.\n      shouldFilter={\n        commandProps?.shouldFilter !== undefined\n          ? commandProps.shouldFilter\n          : !onSearch\n      }\n    >\n      <div\n        className={cn(\n          \"relative min-h-[38px] rounded-md border border-input text-sm outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n          {\n            \"cursor-text\": !disabled && selected.length !== 0,\n            \"p-1\": selected.length !== 0,\n          },\n          !hideClearAllButton && \"pe-9\",\n          className,\n        )}\n        onClick={() => {\n          if (disabled) return;\n          inputRef?.current?.focus();\n        }}\n      >\n        <div className=\"flex flex-wrap gap-1\">\n          {selected.map((option) => {\n            return (\n              <div\n                className={cn(\n                  \"relative inline-flex h-7 animate-fadeIn cursor-default items-center rounded-md border bg-background ps-2 pe-7 pl-2 font-medium text-secondary-foreground text-xs transition-all hover:bg-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-fixed:pe-2\",\n                  badgeClassName,\n                )}\n                data-disabled={disabled || undefined}\n                data-fixed={option.fixed}\n                key={option.value}\n              >\n                {option.label}\n                <button\n                  aria-label=\"Remove\"\n                  className=\"absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-md border border-transparent p-0 text-muted-foreground/80 outline-none outline-hidden transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n                  onClick={() => handleUnselect(option)}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Enter\") {\n                      handleUnselect(option);\n                    }\n                  }}\n                  onMouseDown={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                  }}\n                  type=\"button\"\n                >\n                  <XIcon aria-hidden=\"true\" size={14} />\n                </button>\n              </div>\n            );\n          })}\n          {/* Avoid having the \"Search\" Icon */}\n          <CommandPrimitive.Input\n            {...inputProps}\n            className={cn(\n              \"flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed\",\n              {\n                \"ml-1\": selected.length !== 0,\n                \"px-3 py-2\": selected.length === 0,\n                \"w-full\": hidePlaceholderWhenSelected,\n              },\n              inputProps?.className,\n            )}\n            disabled={disabled}\n            onBlur={(event) => {\n              if (!onScrollbar) {\n                setOpen(false);\n              }\n              inputProps?.onBlur?.(event);\n            }}\n            onFocus={(event) => {\n              setOpen(true);\n              if (triggerSearchOnFocus) {\n                onSearch?.(debouncedSearchTerm);\n              }\n              inputProps?.onFocus?.(event);\n            }}\n            onValueChange={(value) => {\n              setInputValue(value);\n              inputProps?.onValueChange?.(value);\n            }}\n            placeholder={\n              hidePlaceholderWhenSelected && selected.length !== 0\n                ? \"\"\n                : placeholder\n            }\n            ref={inputRef}\n            value={inputValue}\n          />\n          <button\n            aria-label=\"Clear all\"\n            className={cn(\n              \"absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n              (hideClearAllButton ||\n                disabled ||\n                selected.length < 1 ||\n                selected.filter((s) => s.fixed).length === selected.length) &&\n                \"hidden\",\n            )}\n            onClick={() => {\n              setSelected(selected.filter((s) => s.fixed));\n              onChange?.(selected.filter((s) => s.fixed));\n            }}\n            type=\"button\"\n          >\n            <XIcon aria-hidden=\"true\" size={16} />\n          </button>\n        </div>\n      </div>\n      <div className=\"relative\">\n        <div\n          className={cn(\n            \"absolute top-2 z-10 w-full overflow-hidden rounded-md border border-input\",\n            \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            !open && \"hidden\",\n          )}\n          data-state={open ? \"open\" : \"closed\"}\n        >\n          {open && (\n            <CommandList\n              className=\"bg-popover text-popover-foreground shadow-lg outline-hidden\"\n              onMouseEnter={() => {\n                setOnScrollbar(true);\n              }}\n              onMouseLeave={() => {\n                setOnScrollbar(false);\n              }}\n              onMouseUp={() => {\n                inputRef?.current?.focus();\n              }}\n            >\n              {isLoading ? (\n                loadingIndicator\n              ) : (\n                <>\n                  {EmptyItem()}\n                  {CreatableItem()}\n                  {!selectFirstItem && (\n                    <CommandItem className=\"hidden\" value=\"-\" />\n                  )}\n                  {Object.entries(selectables).map(([key, dropdowns]) => (\n                    <CommandGroup\n                      className=\"h-full overflow-auto\"\n                      heading={key}\n                      key={key}\n                    >\n                      {dropdowns.map((option) => {\n                        return (\n                          <CommandItem\n                            className={cn(\n                              \"cursor-pointer\",\n                              option.disable &&\n                                \"pointer-events-none cursor-not-allowed opacity-50\",\n                            )}\n                            disabled={option.disable}\n                            key={option.value}\n                            onMouseDown={(e) => {\n                              e.preventDefault();\n                              e.stopPropagation();\n                            }}\n                            onSelect={() => {\n                              if (selected.length >= maxSelected) {\n                                onMaxSelected?.(selected.length);\n                                return;\n                              }\n                              setInputValue(\"\");\n                              const newOptions = [...selected, option];\n                              setSelected(newOptions);\n                              onChange?.(newOptions);\n                            }}\n                            value={option.value}\n                          >\n                            {option.label}\n                          </CommandItem>\n                        );\n                      })}\n                    </CommandGroup>\n                  ))}\n                </>\n              )}\n            </CommandList>\n          )}\n        </div>\n      </div>\n    </Command>\n  );\n};\n\nMultipleSelector.displayName = \"MultipleSelector\";\nexport default MultipleSelector;\n"
  },
  {
    "path": "apps/origin/registry/default/ui/navigation-menu.tsx",
    "content": "import { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean;\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\n        className,\n      )}\n      data-slot=\"navigation-menu-list\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      className={cn(\"relative\", className)}\n      data-slot=\"navigation-menu-item\"\n      {...props}\n    />\n  );\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:hover:bg-accent\",\n);\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      data-slot=\"navigation-menu-trigger\"\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      className={cn(\n        \"data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out top-0 left-0 w-full p-2 pr-2.5 data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 **:data-[slot=navigation-menu-link]:focus:outline-none **:data-[slot=navigation-menu-link]:focus:ring-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in\",\n        className,\n      )}\n      data-slot=\"navigation-menu-content\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\",\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        className={cn(\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full origin-top-center overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=open]:animate-in md:w-(--radix-navigation-menu-viewport-width)\",\n          className,\n        )}\n        data-slot=\"navigation-menu-viewport\"\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      className={cn(\n        \"flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-all hover:bg-accent focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-active:bg-accent data-active:text-accent-foreground data-active:focus:bg-accent data-active:hover:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"navigation-menu-link\"\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      className={cn(\n        \"data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in\",\n        className,\n      )}\n      data-slot=\"navigation-menu-indicator\"\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/pagination.tsx",
    "content": "import {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { type Button, buttonVariants } from \"@/registry/default/ui/button\";\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      data-slot=\"pagination\"\n      {...props}\n    />\n  );\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      data-slot=\"pagination-content\"\n      {...props}\n    />\n  );\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean;\n  isDisabled?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      className={cn(\n        buttonVariants({\n          size,\n          variant: isActive ? \"outline\" : \"ghost\",\n        }),\n        className,\n      )}\n      data-active={isActive}\n      data-slot=\"pagination-link\"\n      {...props}\n    />\n  );\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      className={cn(\"gap-1 px-2.5 sm:pe-4\", className)}\n      size=\"default\"\n      {...props}\n    >\n      <ChevronLeftIcon size={16} />\n      <span>Previous</span>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      className={cn(\"gap-1 px-2.5 sm:ps-4\", className)}\n      size=\"default\"\n      {...props}\n    >\n      <span>Next</span>\n      <ChevronRightIcon size={16} />\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      data-slot=\"pagination-ellipsis\"\n      {...props}\n    >\n      <MoreHorizontalIcon size={16} />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/popover.tsx",
    "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  showArrow = false,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content> & {\n  showArrow?: boolean;\n}) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        className={cn(\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in\",\n          className,\n        )}\n        data-slot=\"popover-content\"\n        sideOffset={sideOffset}\n        {...props}\n      >\n        {props.children}\n        {showArrow && (\n          <PopoverPrimitive.Arrow className=\"-my-px fill-popover drop-shadow-[0_1px_0_var(--border)]\" />\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/progress.tsx",
    "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      className={cn(\n        \"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\",\n        className,\n      )}\n      data-slot=\"progress\"\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        className=\"size-full flex-1 bg-primary transition-all\"\n        data-slot=\"progress-indicator\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/radio-group.tsx",
    "content": "\"use client\";\n\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-3\", className)}\n      data-slot=\"radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      className={cn(\n        \"aspect-square size-4 shrink-0 rounded-full border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      data-slot=\"radio-group-item\"\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n        <svg\n          fill=\"currentcolor\"\n          height=\"6\"\n          viewBox=\"0 0 6 6\"\n          width=\"6\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle cx=\"3\" cy=\"3\" r=\"3\" />\n        </svg>\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/resizable.tsx",
    "content": "\"use client\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\nimport * as ResizablePrimitive from \"react-resizable-panels\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      className={cn(\n        \"flex size-full data-[panel-group-direction=vertical]:flex-col\",\n        className,\n      )}\n      data-slot=\"resizable-panel-group\"\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel({\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />;\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean;\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className,\n      )}\n      data-slot=\"resizable-handle\"\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border\">\n          <GripVerticalIcon size={10} />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  );\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/scroll-area.tsx",
    "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"relative\", className)}\n      data-slot=\"scroll-area\"\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className=\"size-full rounded-[inherit]\"\n        data-slot=\"scroll-area-viewport\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      className={cn(\n        \"flex touch-none select-none\",\n        orientation === \"vertical\" &&\n          \"h-full w-2.5 border-l border-l-transparent p-px\",\n        orientation === \"horizontal\" &&\n          \"h-2.5 flex-col border-t border-t-transparent p-px\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        className=\"relative flex-1 rounded-full bg-border\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/select-native.tsx",
    "content": "import { ChevronDownIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst SelectNative = ({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"select\">) => {\n  return (\n    <div className=\"relative flex\">\n      <select\n        className={cn(\n          \"peer inline-flex w-full cursor-pointer appearance-none items-center rounded-md border border-input text-foreground text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 has-[option[disabled]:checked]:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n          props.multiple\n            ? \"py-1 *:px-3 *:py-1 [&_option:checked]:bg-accent\"\n            : \"h-9 ps-3 pe-8\",\n          className,\n        )}\n        data-slot=\"select-native\"\n        {...props}\n      >\n        {children}\n      </select>\n      {!props.multiple && (\n        <span className=\"pointer-events-none absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center text-muted-foreground/80 peer-disabled:opacity-50 peer-aria-invalid:text-destructive/80\">\n          <ChevronDownIcon aria-hidden=\"true\" size={16} />\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport { SelectNative };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/select.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-foreground text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:aria-invalid:ring-destructive/40 [&>span]:line-clamp-1 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon\n          className=\"shrink-0 in-aria-invalid:text-destructive/80 text-muted-foreground/80\"\n          size={16}\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-32 overflow-hidden rounded-md border border-input bg-popover text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in [&_[role=group]]:py-1\",\n          position === \"popper\" &&\n            \"w-full min-w-[var(--radix-select-trigger-width)] data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        data-slot=\"select-content\"\n        position={position}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" && \"h-[var(--radix-select-trigger-height)]\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\n        \"py-1.5 ps-8 pe-2 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"relative flex w-full cursor-default select-none items-center rounded py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      <span className=\"absolute start-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon size={16} />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1 text-muted-foreground/80\",\n        className,\n      )}\n      data-slot=\"select-scroll-up-button\"\n      {...props}\n    >\n      <ChevronUpIcon size={16} />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1 text-muted-foreground/80\",\n        className,\n      )}\n      data-slot=\"select-scroll-down-button\"\n      {...props}\n    >\n      <ChevronDownIcon size={16} />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/slider.tsx",
    "content": "\"use client\";\n\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  showTooltip = false,\n  tooltipContent,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root> & {\n  showTooltip?: boolean;\n  tooltipContent?: (value: number) => React.ReactNode;\n}) {\n  const [internalValues, setInternalValues] = React.useState<number[]>(\n    Array.isArray(value)\n      ? value\n      : Array.isArray(defaultValue)\n        ? defaultValue\n        : [min, max],\n  );\n\n  React.useEffect(() => {\n    if (value !== undefined) {\n      setInternalValues(Array.isArray(value) ? value : [value]);\n    }\n  }, [value]);\n\n  const handleValueChange = (newValue: number[]) => {\n    setInternalValues(newValue);\n    props.onValueChange?.(newValue);\n  };\n\n  const [showTooltipState, setShowTooltipState] = React.useState(false);\n\n  const handlePointerDown = () => {\n    if (showTooltip) {\n      setShowTooltipState(true);\n    }\n  };\n\n  const handlePointerUp = React.useCallback(() => {\n    if (showTooltip) {\n      setShowTooltipState(false);\n    }\n  }, [showTooltip]);\n\n  React.useEffect(() => {\n    if (showTooltip) {\n      document.addEventListener(\"pointerup\", handlePointerUp);\n      return () => {\n        document.removeEventListener(\"pointerup\", handlePointerUp);\n      };\n    }\n  }, [showTooltip, handlePointerUp]);\n\n  const renderThumb = (value: number) => {\n    const thumb = (\n      <SliderPrimitive.Thumb\n        className=\"block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm outline-none ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\"\n        data-slot=\"slider-thumb\"\n        onPointerDown={handlePointerDown}\n      />\n    );\n\n    if (!showTooltip) return thumb;\n\n    return (\n      <TooltipProvider>\n        <Tooltip open={showTooltipState}>\n          <TooltipTrigger asChild>{thumb}</TooltipTrigger>\n          <TooltipContent\n            className=\"px-2 py-1 text-xs\"\n            side={props.orientation === \"vertical\" ? \"right\" : \"top\"}\n            sideOffset={8}\n          >\n            <p>{tooltipContent ? tooltipContent(value) : value}</p>\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    );\n  };\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        \"relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50\",\n        className,\n      )}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      max={max}\n      min={min}\n      onValueChange={handleValueChange}\n      value={value}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          \"relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5\",\n        )}\n        data-slot=\"slider-track\"\n      >\n        <SliderPrimitive.Range\n          className={cn(\n            \"absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n          )}\n          data-slot=\"slider-range\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: internalValues.length }, (_, index) => (\n        <React.Fragment key={String(index)}>\n          {renderThumb(internalValues[index])}\n        </React.Fragment>\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/sonner.tsx",
    "content": "\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\";\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme();\n\n  return (\n    <Sonner\n      className=\"toaster group\"\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n        } as React.CSSProperties\n      }\n      theme={theme as ToasterProps[\"theme\"]}\n      toastOptions={{\n        classNames: {\n          description: \"text-muted-foreground!\",\n        },\n      }}\n      {...props}\n    />\n  );\n};\n\nexport { Toaster };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/stepper.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, LoaderCircleIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\n// Types\ntype StepperContextValue = {\n  activeStep: number;\n  setActiveStep: (step: number) => void;\n  orientation: \"horizontal\" | \"vertical\";\n};\n\ntype StepItemContextValue = {\n  step: number;\n  state: StepState;\n  isDisabled: boolean;\n  isLoading: boolean;\n};\n\ntype StepState = \"active\" | \"completed\" | \"inactive\" | \"loading\";\n\n// Contexts\nconst StepperContext = createContext<StepperContextValue | undefined>(\n  undefined,\n);\nconst StepItemContext = createContext<StepItemContextValue | undefined>(\n  undefined,\n);\n\nconst useStepper = () => {\n  const context = useContext(StepperContext);\n  if (!context) {\n    throw new Error(\"useStepper must be used within a Stepper\");\n  }\n  return context;\n};\n\nconst useStepItem = () => {\n  const context = useContext(StepItemContext);\n  if (!context) {\n    throw new Error(\"useStepItem must be used within a StepperItem\");\n  }\n  return context;\n};\n\n// Components\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  defaultValue?: number;\n  value?: number;\n  onValueChange?: (value: number) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nfunction Stepper({\n  defaultValue = 0,\n  value,\n  onValueChange,\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: StepperProps) {\n  const [activeStep, setInternalStep] = React.useState(defaultValue);\n\n  const setActiveStep = React.useCallback(\n    (step: number) => {\n      if (value === undefined) {\n        setInternalStep(step);\n      }\n      onValueChange?.(step);\n    },\n    [value, onValueChange],\n  );\n\n  const currentStep = value ?? activeStep;\n\n  return (\n    <StepperContext.Provider\n      value={{\n        activeStep: currentStep,\n        orientation,\n        setActiveStep,\n      }}\n    >\n      <div\n        className={cn(\n          \"group/stepper inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\",\n          className,\n        )}\n        data-orientation={orientation}\n        data-slot=\"stepper\"\n        {...props}\n      />\n    </StepperContext.Provider>\n  );\n}\n\n// StepperItem\ninterface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  step: number;\n  completed?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n}\n\nfunction StepperItem({\n  step,\n  completed = false,\n  disabled = false,\n  loading = false,\n  className,\n  children,\n  ...props\n}: StepperItemProps) {\n  const { activeStep } = useStepper();\n\n  const state: StepState =\n    completed || step < activeStep\n      ? \"completed\"\n      : activeStep === step\n        ? \"active\"\n        : \"inactive\";\n\n  const isLoading = loading && step === activeStep;\n\n  return (\n    <StepItemContext.Provider\n      value={{ isDisabled: disabled, isLoading, state, step }}\n    >\n      <div\n        className={cn(\n          \"group/step flex items-center group-data-[orientation=horizontal]/stepper:flex-row group-data-[orientation=vertical]/stepper:flex-col\",\n          className,\n        )}\n        data-slot=\"stepper-item\"\n        data-state={state}\n        {...(isLoading ? { \"data-loading\": true } : {})}\n        {...props}\n      >\n        {children}\n      </div>\n    </StepItemContext.Provider>\n  );\n}\n\n// StepperTrigger\ninterface StepperTriggerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean;\n}\n\nfunction StepperTrigger({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: StepperTriggerProps) {\n  const { setActiveStep } = useStepper();\n  const { step, isDisabled } = useStepItem();\n\n  if (asChild) {\n    const Comp = asChild ? Slot.Root : \"span\";\n    return (\n      <Comp className={className} data-slot=\"stepper-trigger\">\n        {children}\n      </Comp>\n    );\n  }\n\n  return (\n    <button\n      className={cn(\n        \"inline-flex items-center gap-3 rounded-full outline-none focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50\",\n        className,\n      )}\n      data-slot=\"stepper-trigger\"\n      disabled={isDisabled}\n      onClick={() => setActiveStep(step)}\n      type=\"button\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\n// StepperIndicator\ninterface StepperIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean;\n}\n\nfunction StepperIndicator({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: StepperIndicatorProps) {\n  const { state, step, isLoading } = useStepItem();\n\n  return (\n    <span\n      className={cn(\n        \"relative flex size-6 shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground text-xs data-[state=active]:bg-primary data-[state=completed]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:text-primary-foreground\",\n        className,\n      )}\n      data-slot=\"stepper-indicator\"\n      data-state={state}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          <span className=\"transition-all group-data-[state=completed]/step:scale-0 group-data-loading/step:scale-0 group-data-[state=completed]/step:opacity-0 group-data-loading/step:opacity-0 group-data-loading/step:transition-none\">\n            {step}\n          </span>\n          <CheckIcon\n            aria-hidden=\"true\"\n            className=\"absolute scale-0 opacity-0 transition-all group-data-[state=completed]/step:scale-100 group-data-[state=completed]/step:opacity-100\"\n            size={16}\n          />\n          {isLoading && (\n            <span className=\"absolute transition-all\">\n              <LoaderCircleIcon\n                aria-hidden=\"true\"\n                className=\"animate-spin\"\n                size={14}\n              />\n            </span>\n          )}\n        </>\n      )}\n    </span>\n  );\n}\n\n// StepperTitle\nfunction StepperTitle({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={cn(\"font-medium text-sm\", className)}\n      data-slot=\"stepper-title\"\n      {...props}\n    />\n  );\n}\n\n// StepperDescription\nfunction StepperDescription({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n  return (\n    <p\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"stepper-description\"\n      {...props}\n    />\n  );\n}\n\n// StepperSeparator\nfunction StepperSeparator({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"m-0.5 bg-muted group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=vertical]/stepper:h-12 group-data-[orientation=horizontal]/stepper:w-full group-data-[orientation=vertical]/stepper:w-0.5 group-data-[orientation=horizontal]/stepper:flex-1 group-data-[state=completed]/step:bg-primary\",\n        className,\n      )}\n      data-slot=\"stepper-separator\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Stepper,\n  StepperDescription,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTitle,\n  StepperTrigger,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/switch.tsx",
    "content": "\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        \"peer inline-flex h-6 w-10 shrink-0 items-center rounded-full border-2 border-transparent outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n        className,\n      )}\n      data-slot=\"switch\"\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block size-5 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 data-[state=checked]:rtl:-translate-x-4\",\n        )}\n        data-slot=\"switch-thumb\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/table.tsx",
    "content": "import type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        data-slot=\"table\"\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead className={cn(className)} data-slot=\"table-header\" {...props} />\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      data-slot=\"table-body\"\n      {...props}\n    />\n  );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className,\n      )}\n      data-slot=\"table-footer\"\n      {...props}\n    />\n  );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className,\n      )}\n      data-slot=\"table-row\"\n      {...props}\n    />\n  );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      className={cn(\n        \"h-12 px-3 text-left align-middle font-medium text-muted-foreground has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pr-0\",\n        className,\n      )}\n      data-slot=\"table-head\"\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      className={cn(\n        \"p-3 align-middle [&:has([role=checkbox])]:pr-0\",\n        className,\n      )}\n      data-slot=\"table-cell\"\n      {...props}\n    />\n  );\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      className={cn(\"mt-4 text-muted-foreground text-sm\", className)}\n      data-slot=\"table-caption\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/tabs.tsx",
    "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Tabs({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\"flex flex-col gap-2\", className)}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nfunction TabsList({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"inline-flex w-fit items-center justify-center rounded-md bg-muted p-0.5 text-muted-foreground/70\",\n        className,\n      )}\n      data-slot=\"tabs-list\"\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      className={cn(\n        \"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm outline-none transition-all hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"tabs-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/textarea.tsx",
    "content": "import type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      className={cn(\n        \"flex min-h-19.5 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      data-slot=\"textarea\"\n      {...props}\n    />\n  );\n}\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/timeline.tsx",
    "content": "\"use client\";\n\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\n// Types\ntype TimelineContextValue = {\n  activeStep: number;\n  setActiveStep: (step: number) => void;\n};\n\n// Context\nconst TimelineContext = React.createContext<TimelineContextValue | undefined>(\n  undefined,\n);\n\nconst useTimeline = () => {\n  const context = React.useContext(TimelineContext);\n  if (!context) {\n    throw new Error(\"useTimeline must be used within a Timeline\");\n  }\n  return context;\n};\n\n// Components\ninterface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {\n  defaultValue?: number;\n  value?: number;\n  onValueChange?: (value: number) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nfunction Timeline({\n  defaultValue = 1,\n  value,\n  onValueChange,\n  orientation = \"vertical\",\n  className,\n  ...props\n}: TimelineProps) {\n  const [activeStep, setInternalStep] = React.useState(defaultValue);\n\n  const setActiveStep = React.useCallback(\n    (step: number) => {\n      if (value === undefined) {\n        setInternalStep(step);\n      }\n      onValueChange?.(step);\n    },\n    [value, onValueChange],\n  );\n\n  const currentStep = value ?? activeStep;\n\n  return (\n    <TimelineContext.Provider\n      value={{ activeStep: currentStep, setActiveStep }}\n    >\n      <div\n        className={cn(\n          \"group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\",\n          className,\n        )}\n        data-orientation={orientation}\n        data-slot=\"timeline\"\n        {...props}\n      />\n    </TimelineContext.Provider>\n  );\n}\n\n// TimelineContent\nfunction TimelineContent({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"timeline-content\"\n      {...props}\n    />\n  );\n}\n\n// TimelineDate\ninterface TimelineDateProps extends React.HTMLAttributes<HTMLTimeElement> {\n  asChild?: boolean;\n}\n\nfunction TimelineDate({\n  asChild = false,\n  className,\n  ...props\n}: TimelineDateProps) {\n  const Comp = asChild ? Slot.Root : \"time\";\n\n  return (\n    <Comp\n      className={cn(\n        \"mb-1 block font-medium text-muted-foreground text-xs group-data-[orientation=vertical]/timeline:max-sm:h-4\",\n        className,\n      )}\n      data-slot=\"timeline-date\"\n      {...props}\n    />\n  );\n}\n\n// TimelineHeader\nfunction TimelineHeader({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(className)} data-slot=\"timeline-header\" {...props} />\n  );\n}\n\n// TimelineIndicator\ninterface TimelineIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean;\n}\n\nfunction TimelineIndicator({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: TimelineIndicatorProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"absolute size-4 rounded-full border-2 border-primary/20 group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-completed/timeline-item:border-primary\",\n        className,\n      )}\n      data-slot=\"timeline-indicator\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// TimelineItem\ninterface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  step: number;\n}\n\nfunction TimelineItem({ step, className, ...props }: TimelineItemProps) {\n  const { activeStep } = useTimeline();\n\n  return (\n    <div\n      className={cn(\n        \"group/timeline-item relative flex flex-1 flex-col gap-0.5 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:not-last:pb-12 has-[+[data-completed]]:[&_[data-slot=timeline-separator]]:bg-primary\",\n        className,\n      )}\n      data-completed={step <= activeStep || undefined}\n      data-slot=\"timeline-item\"\n      {...props}\n    />\n  );\n}\n\n// TimelineSeparator\nfunction TimelineSeparator({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"absolute self-start bg-primary/10 group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:translate-y-4.5\",\n        className,\n      )}\n      data-slot=\"timeline-separator\"\n      {...props}\n    />\n  );\n}\n\n// TimelineTitle\nfunction TimelineTitle({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={cn(\"font-medium text-sm\", className)}\n      data-slot=\"timeline-title\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/toast.tsx",
    "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\nimport { Toast as ToastPrimitives } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst ToastProvider = ToastPrimitives.Provider;\n\nfunction ToastViewport({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>) {\n  return (\n    <ToastPrimitives.Viewport\n      className={cn(\n        \"fixed top-0 right-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:flex-col md:max-w-[400px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst toastVariants = cva(\n  \"group data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=closed]:data-[swipe-direction=left]:slide-out-to-left-full data-[state=closed]:data-[swipe-direction=right]:slide-out-to-right-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between overflow-hidden rounded-md border p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default: \"border bg-background text-foreground\",\n        destructive:\n          \"destructive group border-destructive bg-destructive text-white\",\n      },\n    },\n  },\n);\n\nfunction Toast({\n  className,\n  variant,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &\n  VariantProps<typeof toastVariants>) {\n  return (\n    <ToastPrimitives.Root\n      className={cn(toastVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction ToastAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>) {\n  return (\n    <ToastPrimitives.Action\n      asChild={asChild}\n      className={cn(\n        !asChild &&\n          \"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-secondary focus:ring-ring focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 focus:group-[.destructive]:ring-destructive hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-white\",\n        className,\n      )}\n      {...props}\n    >\n      {props.children}\n    </ToastPrimitives.Action>\n  );\n}\n\nfunction ToastClose({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>) {\n  return (\n    <ToastPrimitives.Close\n      asChild={asChild}\n      className={cn(\n        !asChild &&\n          \"group absolute top-3 right-3 flex size-7 items-center justify-center rounded outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none\",\n        className,\n      )}\n      toast-close=\"\"\n      {...props}\n    >\n      {asChild ? (\n        props.children\n      ) : (\n        <XIcon\n          aria-hidden=\"true\"\n          className=\"opacity-60 transition-opacity group-hover:opacity-100\"\n          size={16}\n        />\n      )}\n    </ToastPrimitives.Close>\n  );\n}\n\nfunction ToastTitle({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>) {\n  return (\n    <ToastPrimitives.Title\n      className={cn(\"font-medium text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ToastDescription({\n  className,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>) {\n  return (\n    <ToastPrimitives.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\ntype ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;\n\ntype ToastActionElement = React.ReactElement<typeof ToastAction>;\n\nexport {\n  Toast,\n  ToastAction,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n  type ToastActionElement,\n  type ToastProps,\n};\n"
  },
  {
    "path": "apps/origin/registry/default/ui/toaster.tsx",
    "content": "\"use client\";\n\nimport { useToast } from \"@/registry/default/hooks/use-toast\";\nimport {\n  Toast,\n  ToastClose,\n  ToastDescription,\n  ToastProvider,\n  ToastTitle,\n  ToastViewport,\n} from \"@/registry/default/ui/toast\";\n\nexport function Toaster() {\n  const { toasts } = useToast();\n\n  return (\n    <ToastProvider>\n      {toasts.map(({ id, title, description, action, ...props }) => (\n        <Toast key={id} {...props}>\n          <div className=\"flex w-full justify-between gap-2\">\n            <div className=\"flex flex-col gap-3\">\n              <div className=\"space-y-1\">\n                {title && <ToastTitle>{title}</ToastTitle>}\n                {description && (\n                  <ToastDescription>{description}</ToastDescription>\n                )}\n              </div>\n              <div>{action}</div>\n            </div>\n            <div>\n              <ToastClose />\n            </div>\n          </div>\n        </Toast>\n      ))}\n      <ToastViewport />\n    </ToastProvider>\n  );\n}\n"
  },
  {
    "path": "apps/origin/registry/default/ui/toggle-group.tsx",
    "content": "\"use client\";\n\nimport type { VariantProps } from \"class-variance-authority\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { toggleVariants } from \"@/registry/default/ui/toggle\";\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n});\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      className={cn(\n        \"group/toggle-group flex items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ size, variant }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  );\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext);\n\n  return (\n    <ToggleGroupPrimitive.Item\n      className={cn(\n        toggleVariants({\n          size: context.size || size,\n          variant: context.variant || variant,\n        }),\n        \"min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l\",\n        className,\n      )}\n      data-size={context.size || size}\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/toggle.tsx",
    "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Toggle as TogglePrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 px-3\",\n        lg: \"h-10 px-3\",\n        sm: \"h-8 px-2\",\n      },\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n    },\n  },\n);\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      className={cn(toggleVariants({ className, size, variant }))}\n      data-slot=\"toggle\"\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/tooltip.tsx",
    "content": "\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 4,\n  showArrow = false,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content> & {\n  showArrow?: boolean;\n}) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        className={cn(\n          \"fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 relative z-50 max-w-70 animate-in rounded-md border bg-popover px-3 py-1.5 text-popover-foreground text-sm data-[state=closed]:animate-out\",\n          className,\n        )}\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        {...props}\n      >\n        {children}\n        {showArrow && (\n          <TooltipPrimitive.Arrow className=\"-my-px fill-popover drop-shadow-[0_1px_0_var(--border)]\" />\n        )}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"
  },
  {
    "path": "apps/origin/registry/default/ui/tree.tsx",
    "content": "// biome-ignore-all lint/suspicious/noExplicitAny: known\n\n\"use client\";\n\nimport type { ItemInstance } from \"@headless-tree/core\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ninterface TreeContextValue<T = any> {\n  indent: number;\n  currentItem?: ItemInstance<T>;\n  tree?: any;\n}\n\nconst TreeContext = React.createContext<TreeContextValue>({\n  currentItem: undefined,\n  indent: 20,\n  tree: undefined,\n});\n\nfunction useTreeContext<T = any>() {\n  return React.useContext(TreeContext) as TreeContextValue<T>;\n}\n\ninterface TreeProps extends React.HTMLAttributes<HTMLDivElement> {\n  indent?: number;\n  tree?: any;\n}\n\nfunction Tree({ indent = 20, tree, className, ...props }: TreeProps) {\n  const containerProps =\n    tree && typeof tree.getContainerProps === \"function\"\n      ? tree.getContainerProps()\n      : {};\n  const mergedProps = { ...props, ...containerProps };\n\n  // Extract style from mergedProps to merge with our custom styles\n  const { style: propStyle, ...otherProps } = mergedProps;\n\n  // Merge styles\n  const mergedStyle = {\n    ...propStyle,\n    \"--tree-indent\": `${indent}px`,\n  } as React.CSSProperties;\n\n  return (\n    <TreeContext.Provider value={{ indent, tree }}>\n      <div\n        className={cn(\"flex flex-col\", className)}\n        data-slot=\"tree\"\n        style={mergedStyle}\n        {...otherProps}\n      />\n    </TreeContext.Provider>\n  );\n}\n\ninterface TreeItemProps<T = any>\n  extends React.HTMLAttributes<HTMLButtonElement> {\n  item: ItemInstance<T>;\n  indent?: number;\n  asChild?: boolean;\n}\n\nfunction TreeItem<T = any>({\n  item,\n  className,\n  asChild,\n  children,\n  ...props\n}: Omit<TreeItemProps<T>, \"indent\">) {\n  const { indent } = useTreeContext<T>();\n\n  const itemProps = typeof item.getProps === \"function\" ? item.getProps() : {};\n  const mergedProps = { ...props, ...itemProps };\n\n  // Extract style from mergedProps to merge with our custom styles\n  const { style: propStyle, ...otherProps } = mergedProps;\n\n  // Merge styles\n  const mergedStyle = {\n    ...propStyle,\n    \"--tree-padding\": `${item.getItemMeta().level * indent}px`,\n  } as React.CSSProperties;\n\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <TreeContext.Provider value={{ currentItem: item, indent }}>\n      <Comp\n        aria-expanded={item.isExpanded()}\n        className={cn(\n          \"z-10 select-none ps-(--tree-padding) not-last:pb-0.5 outline-hidden focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n          className,\n        )}\n        data-drag-target={\n          typeof item.isDragTarget === \"function\"\n            ? item.isDragTarget() || false\n            : undefined\n        }\n        data-focus={\n          typeof item.isFocused === \"function\"\n            ? item.isFocused() || false\n            : undefined\n        }\n        data-folder={\n          typeof item.isFolder === \"function\"\n            ? item.isFolder() || false\n            : undefined\n        }\n        data-search-match={\n          typeof item.isMatchingSearch === \"function\"\n            ? item.isMatchingSearch() || false\n            : undefined\n        }\n        data-selected={\n          typeof item.isSelected === \"function\"\n            ? item.isSelected() || false\n            : undefined\n        }\n        data-slot=\"tree-item\"\n        style={mergedStyle}\n        {...otherProps}\n      >\n        {children}\n      </Comp>\n    </TreeContext.Provider>\n  );\n}\n\ninterface TreeItemLabelProps<T = any>\n  extends React.HTMLAttributes<HTMLSpanElement> {\n  item?: ItemInstance<T>;\n}\n\nfunction TreeItemLabel<T = any>({\n  item: propItem,\n  children,\n  className,\n  ...props\n}: TreeItemLabelProps<T>) {\n  const { currentItem } = useTreeContext<T>();\n  const item = propItem || currentItem;\n\n  if (!item) {\n    console.warn(\"TreeItemLabel: No item provided via props or context\");\n    return null;\n  }\n\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-1 rounded-sm bg-background in-data-[drag-target=true]:bg-accent in-data-[search-match=true]:bg-blue-400/20! in-data-[selected=true]:bg-accent px-2 py-1.5 not-in-data-[folder=true]:ps-7 in-data-[selected=true]:text-accent-foreground text-sm in-focus-visible:ring-[3px] in-focus-visible:ring-ring/50 transition-colors hover:bg-accent [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"tree-item-label\"\n      {...props}\n    >\n      {item.isFolder() && (\n        <ChevronDownIcon className=\"size-4 in-aria-[expanded=false]:-rotate-90 text-muted-foreground\" />\n      )}\n      {children ||\n        (typeof item.getItemName === \"function\" ? item.getItemName() : null)}\n    </span>\n  );\n}\n\nfunction TreeDragLine({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const { tree } = useTreeContext();\n\n  if (!tree || typeof tree.getDragLineStyle !== \"function\") {\n    console.warn(\n      \"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method\",\n    );\n    return null;\n  }\n\n  const dragLine = tree.getDragLineStyle();\n  return (\n    <div\n      className={cn(\n        \"absolute z-30 -mt-px h-0.5 w-[unset] bg-primary before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2 before:border-primary before:bg-background\",\n        className,\n      )}\n      style={dragLine}\n      {...props}\n    />\n  );\n}\n\nexport { Tree, TreeItem, TreeItemLabel, TreeDragLine };\n"
  },
  {
    "path": "apps/origin/registry/registry-tags.ts",
    "content": "// Before adding a new tag, ensure it doesn't already exist in the array.\nexport const registryTags = [\n  // Component tags\n  \"accordion\",\n  \"alert\",\n  \"avatar\",\n  \"badge\",\n  \"banner\",\n  \"breadcrumb\",\n  \"button\",\n  \"calendar\",\n  \"checkbox\",\n  \"collapsible\",\n  \"combobox\",\n  \"command\",\n  \"crop\",\n  \"dialog\",\n  \"dropdown\",\n  \"input\",\n  \"label\",\n  \"notification\",\n  \"otp\",\n  \"pagination\",\n  \"popover\",\n  \"radio\",\n  \"select\",\n  \"slider\",\n  \"sonner\",\n  \"stepper\",\n  \"table\",\n  \"tabs\",\n  \"textarea\",\n  \"timeline\",\n  \"switch\",\n  \"tooltip\",\n  // Generic tags\n  \"alert dialog\",\n  \"authentication\",\n  \"autocomplete\",\n  \"avatar group\",\n  \"back\",\n  \"card\",\n  \"chart\",\n  \"checkout\",\n  \"chip\",\n  \"color\",\n  \"controls\",\n  \"cookies\",\n  \"countdown\",\n  \"counter\",\n  \"copy\",\n  \"credit card\",\n  \"darkmode\",\n  \"date\",\n  \"delete\",\n  \"disabled\",\n  \"drag and drop\",\n  \"emblor\",\n  \"equalizer\",\n  \"error\",\n  \"feedback\",\n  \"file\",\n  \"filter\",\n  \"flag\",\n  \"form\",\n  \"gdpr\",\n  \"hamburger\",\n  \"helper\",\n  \"hint\",\n  \"hover card\",\n  \"image\",\n  \"info\",\n  \"kbd\",\n  \"like\",\n  \"loading\",\n  \"login\",\n  \"mask\",\n  \"menu\",\n  \"modal\",\n  \"multiselect\",\n  \"native select\",\n  \"newsletter\",\n  \"next\",\n  \"number\",\n  \"onboarding\",\n  \"password\",\n  \"payment\",\n  \"phone\",\n  \"picker\",\n  \"previous\",\n  \"pricing\",\n  \"privacy\",\n  \"profile\",\n  \"radix\",\n  \"range\",\n  \"range calendar\",\n  \"range slider\",\n  \"rating\",\n  \"react aria\",\n  \"react daypicker\",\n  \"read-only\",\n  \"required\",\n  \"reset\",\n  \"resize\",\n  \"sale\",\n  \"search\",\n  \"share\",\n  \"signup\",\n  \"social\",\n  \"sort\",\n  \"status\",\n  \"sticky\",\n  \"subscribe\",\n  \"success\",\n  \"tag\",\n  \"tanstack\",\n  \"team\",\n  \"text editor\",\n  \"time\",\n  \"timezone\",\n  \"toast\",\n  \"toggle\",\n  \"toggle group\",\n  \"tour\",\n  \"tree\",\n  \"upload\",\n  \"user\",\n  \"vertical slider\",\n  \"vertical stepper\",\n  \"vertical table\",\n  \"vertical tabs\",\n  \"vertical timeline\",\n  \"volume\",\n  \"vote\",\n  \"warning\",\n  \"week\",\n  \"zoom\",\n] as const;\n\nexport type RegistryTag = (typeof registryTags)[number];\n"
  },
  {
    "path": "apps/origin/registry.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry.json\",\n  \"homepage\": \"https://coss.com/origin\",\n  \"items\": [\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/accordion.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"accordion\",\n      \"tailwind\": {\n        \"config\": {\n          \"theme\": {\n            \"extend\": {\n              \"animation\": {\n                \"accordion-down\": \"accordion-down 0.2s ease-out\",\n                \"accordion-up\": \"accordion-up 0.2s ease-out\"\n              },\n              \"keyframes\": {\n                \"accordion-down\": {\n                  \"from\": {\n                    \"height\": \"0\"\n                  },\n                  \"to\": {\n                    \"height\": \"var(--radix-accordion-content-height)\"\n                  }\n                },\n                \"accordion-up\": {\n                  \"from\": {\n                    \"height\": \"var(--radix-accordion-content-height)\"\n                  },\n                  \"to\": {\n                    \"height\": \"0\"\n                  }\n                }\n              }\n            }\n          }\n        }\n      },\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/alert-dialog.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"alert-dialog\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/avatar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"avatar\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/badge.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"badge\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/breadcrumb.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"breadcrumb\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/button.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"button\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"react-day-picker\", \"date-fns\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/calendar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"calendar\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\", \"@internationalized/date\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/calendar-rac.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"calendar-rac\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/checkbox.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"checkbox\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/checkbox-tree.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"checkbox-tree\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/collapsible.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"collapsible\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"cmdk\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/command.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"command\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/dialog.json\"],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"@origin-space/image-cropper\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/cropper.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"cropper\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/datefield-rac.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"datefield-rac\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/dialog.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"dialog\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/dropdown-menu.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"dropdown-menu\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/hover-card.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"hover-card\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/input.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"input\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/label.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"label\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/multiselect.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"multiselect\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/command.json\"],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/navigation-menu.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"navigation-menu\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/pagination.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"pagination\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/popover.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"popover\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/progress.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"progress\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/radio-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"radio-group\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/scroll-area.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"scroll-area\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/select-native.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"select-native\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/select.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"select\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/slider.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"slider\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tooltip.json\"],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"sonner\", \"next-themes\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/sonner.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"sonner\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/stepper.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"stepper\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/switch.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"switch\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/table.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"table\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/tabs.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"tabs\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/textarea.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"textarea\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/timeline.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"timeline\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toast.tsx\",\n          \"type\": \"registry:ui\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-toast.ts\",\n          \"type\": \"registry:hook\"\n        },\n        {\n          \"path\": \"registry/default/ui/toaster.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toast\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toggle.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toggle\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toggle-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toggle-group\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/toggle.json\"],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\"radix-ui\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/tooltip.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"tooltip\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@headless-tree/core\",\n        \"@headless-tree/react\",\n        \"radix-ui\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/tree.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"name\": \"tree\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-character-limit.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-character-limit\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-file-upload\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-pagination\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-slider-with-input\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-toast.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-toast\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"dependencies\": [\"clsx\", \"tailwind-merge\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/lib/utils.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"utils\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-01.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-01\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-02.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"required\"]\n      },\n      \"name\": \"comp-02\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-03.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"helper\"]\n      },\n      \"name\": \"comp-03\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-04.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"hint\"]\n      },\n      \"name\": \"comp-04\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-05.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-05\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-06.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"error\"]\n      },\n      \"name\": \"comp-06\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-07.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-07\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-08.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"disabled\"]\n      },\n      \"name\": \"comp-08\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-09.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-09\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-10.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-10\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-11.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-11\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-12.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-12\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-13.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-13\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-14.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-14\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-15.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-15\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-16.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-16\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-17.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-17\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/select-native.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-18.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-18\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/select-native.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-19.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\"]\n      },\n      \"name\": \"comp-19\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-20.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\"]\n      },\n      \"name\": \"comp-20\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-21.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\"]\n      },\n      \"name\": \"comp-21\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-22.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\"]\n      },\n      \"name\": \"comp-22\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-23.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\", \"password\"]\n      },\n      \"name\": \"comp-23\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-24.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\"]\n      },\n      \"name\": \"comp-24\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-25.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"search\", \"kbd\"]\n      },\n      \"name\": \"comp-25\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-26.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\", \"search\"]\n      },\n      \"name\": \"comp-26\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-27.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\", \"search\"]\n      },\n      \"name\": \"comp-27\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-28.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\", \"number\", \"react aria\"]\n      },\n      \"name\": \"comp-28\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-29.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"button\", \"number\", \"react aria\"]\n      },\n      \"name\": \"comp-29\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-30.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"file\"]\n      },\n      \"name\": \"comp-30\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-31.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-31\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/input.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-32.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-32\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/input.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-33.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-33\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-34.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-character-limit.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-34\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-35.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-character-limit.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\"]\n      },\n      \"name\": \"comp-35\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-36.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"date\", \"react aria\"]\n      },\n      \"name\": \"comp-36\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/datefield-rac.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-37.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"date\", \"react aria\"]\n      },\n      \"name\": \"comp-37\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/datefield-rac.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-38.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"date\", \"react aria\"]\n      },\n      \"name\": \"comp-38\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/datefield-rac.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-39.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"date\", \"react aria\"]\n      },\n      \"name\": \"comp-39\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/datefield-rac.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-40.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"date\", \"react aria\"]\n      },\n      \"name\": \"comp-40\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/datefield-rac.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-41.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"date\", \"calendar\", \"picker\", \"react aria\"]\n      },\n      \"name\": \"comp-41\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/calendar-rac.json\",\n        \"https://coss.com/origin/r/datefield-rac.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-42.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"input\",\n          \"label\",\n          \"date\",\n          \"calendar\",\n          \"range calendar\",\n          \"picker\",\n          \"react aria\"\n        ]\n      },\n      \"name\": \"comp-42\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/calendar-rac.json\",\n        \"https://coss.com/origin/r/datefield-rac.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\n        \"react-aria-components\",\n        \"react-aria\",\n        \"@internationalized/date\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-43.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"input\",\n          \"label\",\n          \"date\",\n          \"calendar\",\n          \"range calendar\",\n          \"picker\",\n          \"react aria\"\n        ]\n      },\n      \"name\": \"comp-43\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/calendar-rac.json\",\n        \"https://coss.com/origin/r/datefield-rac.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"input-otp\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-44.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"otp\"]\n      },\n      \"name\": \"comp-44\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/label.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"input-otp\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-45.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"otp\"]\n      },\n      \"name\": \"comp-45\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/label.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-phone-number-input\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-46.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"phone\"]\n      },\n      \"name\": \"comp-46\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-payment-inputs\"],\n      \"devDependencies\": [\"@types/react-payment-inputs\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-47.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"checkout\", \"payment\", \"credit card\", \"form\"]\n      },\n      \"name\": \"comp-47\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-payment-inputs\"],\n      \"devDependencies\": [\"@types/react-payment-inputs\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-48.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"checkout\", \"payment\", \"credit card\", \"form\"]\n      },\n      \"name\": \"comp-48\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-payment-inputs\"],\n      \"devDependencies\": [\"@types/react-payment-inputs\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-49.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"checkout\", \"payment\", \"credit card\", \"form\"]\n      },\n      \"name\": \"comp-49\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-payment-inputs\"],\n      \"devDependencies\": [\"@types/react-payment-inputs\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-50.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"checkout\", \"payment\", \"credit card\", \"form\"]\n      },\n      \"name\": \"comp-50\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-51.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"password\"]\n      },\n      \"name\": \"comp-51\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-52.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"read-only\"]\n      },\n      \"name\": \"comp-52\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-53.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"copy\"]\n      },\n      \"name\": \"comp-53\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"use-mask-input\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-54.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"mask\"]\n      },\n      \"name\": \"comp-54\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"use-mask-input\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-55.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"mask\", \"time\"]\n      },\n      \"name\": \"comp-55\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"emblor\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-56.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"tag\", \"emblor\"]\n      },\n      \"name\": \"comp-56\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/label.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"emblor\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-57.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"tag\", \"emblor\"]\n      },\n      \"name\": \"comp-57\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/label.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"input-otp\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-58.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"otp\"]\n      },\n      \"name\": \"comp-58\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/label.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-59.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-59\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-60.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"required\"]\n      },\n      \"name\": \"comp-60\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-61.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"helper\"]\n      },\n      \"name\": \"comp-61\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-62.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"hint\"]\n      },\n      \"name\": \"comp-62\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-63.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-63\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-64.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"error\"]\n      },\n      \"name\": \"comp-64\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-65.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-65\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-66.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-66\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-67.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"disabled\"]\n      },\n      \"name\": \"comp-67\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-68.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"button\"]\n      },\n      \"name\": \"comp-68\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-69.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"button\"]\n      },\n      \"name\": \"comp-69\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-70.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"button\"]\n      },\n      \"name\": \"comp-70\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-71.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-71\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-72.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-72\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/textarea.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-73.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-73\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-74.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-character-limit.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-74\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-75.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-75\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-76.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\", \"read-only\"]\n      },\n      \"name\": \"comp-76\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-77.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"textarea\"]\n      },\n      \"name\": \"comp-77\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-78.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-78\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-79.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"disabled\"]\n      },\n      \"name\": \"comp-79\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-80.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-80\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-81.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-81\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-82.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"delete\"]\n      },\n      \"name\": \"comp-82\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-83.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-83\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-84.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-84\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-85.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"back\"]\n      },\n      \"name\": \"comp-85\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-86.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"next\"]\n      },\n      \"name\": \"comp-86\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-87.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-87\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-88.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"dropdown\"]\n      },\n      \"name\": \"comp-88\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-89.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-89\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-90.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"loading\"]\n      },\n      \"name\": \"comp-90\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-91.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"loading\"]\n      },\n      \"name\": \"comp-91\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-92.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"counter\"]\n      },\n      \"name\": \"comp-92\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-93.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"kbd\"]\n      },\n      \"name\": \"comp-93\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-94.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"user\", \"avatar\", \"profile\"]\n      },\n      \"name\": \"comp-94\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-95.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"user\", \"avatar\", \"profile\", \"dropdown\"]\n      },\n      \"name\": \"comp-95\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-96.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-96\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-97.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-97\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-98.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"menu\"]\n      },\n      \"name\": \"comp-98\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-99.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"tooltip\"]\n      },\n      \"name\": \"comp-99\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-100.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"menu\", \"hamburger\"]\n      },\n      \"name\": \"comp-100\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-101.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"toggle\"]\n      },\n      \"name\": \"comp-101\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/toggle.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-102.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"vote\", \"counter\"]\n      },\n      \"name\": \"comp-102\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-103.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"vote\", \"counter\"]\n      },\n      \"name\": \"comp-103\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-104.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"volume\", \"controls\"]\n      },\n      \"name\": \"comp-104\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-105.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"copy\"]\n      },\n      \"name\": \"comp-105\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-106.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"toggle group\"]\n      },\n      \"name\": \"comp-106\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-107.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"toggle group\"]\n      },\n      \"name\": \"comp-107\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/toggle-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-108.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"toggle group\", \"dropdown\"]\n      },\n      \"name\": \"comp-108\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-109.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"toggle group\"]\n      },\n      \"name\": \"comp-109\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/toggle-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-110.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"toggle group\"]\n      },\n      \"name\": \"comp-110\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/toggle-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-111.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-111\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-112.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-112\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-113.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"dropdown\"]\n      },\n      \"name\": \"comp-113\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-114.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"dropdown\", \"counter\"]\n      },\n      \"name\": \"comp-114\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-115.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"previous\"]\n      },\n      \"name\": \"comp-115\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-116.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"next\"]\n      },\n      \"name\": \"comp-116\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-117.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"like\", \"counter\"]\n      },\n      \"name\": \"comp-117\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-118.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"like\", \"counter\"]\n      },\n      \"name\": \"comp-118\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-119.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"social\", \"login\", \"authentication\"]\n      },\n      \"name\": \"comp-119\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-120.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"social\", \"login\", \"authentication\"]\n      },\n      \"name\": \"comp-120\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-121.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"social\", \"login\", \"authentication\"]\n      },\n      \"name\": \"comp-121\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-122.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"social\", \"login\", \"authentication\"]\n      },\n      \"name\": \"comp-122\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-123.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"collapsible\"]\n      },\n      \"name\": \"comp-123\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-124.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"back\"]\n      },\n      \"name\": \"comp-124\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-125.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"upload\", \"user\", \"avatar\", \"profile\", \"image\"]\n      },\n      \"name\": \"comp-125\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-126.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"upload\", \"user\", \"avatar\", \"profile\", \"image\"]\n      },\n      \"name\": \"comp-126\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-127.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-127\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-128.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\"]\n      },\n      \"name\": \"comp-128\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-129.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"dropdown\", \"notification\"]\n      },\n      \"name\": \"comp-129\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-130.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"toggle\", \"darkmode\"]\n      },\n      \"name\": \"comp-130\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/toggle.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-131.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 2,\n        \"tags\": [\"button\", \"dropdown\"]\n      },\n      \"name\": \"comp-131\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-132.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-132\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-133.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-133\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-134.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-134\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-135.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"disabled\", \"radix\"]\n      },\n      \"name\": \"comp-135\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-136.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-136\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-137.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-137\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-138.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"login\", \"authentication\", \"radix\"]\n      },\n      \"name\": \"comp-138\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-139.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-139\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-140.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-140\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-141.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-141\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-142.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"collapsible\", \"radix\"]\n      },\n      \"name\": \"comp-142\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/input.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-143.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-143\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-144.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-144\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-145.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-145\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-146.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-146\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-147.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-147\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-148.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"tree\", \"radix\"]\n      },\n      \"name\": \"comp-148\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/checkbox-tree.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-149.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"week\", \"calendar\", \"radix\"]\n      },\n      \"name\": \"comp-149\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/checkbox.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-150.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"toggle\", \"darkmode\", \"radix\"]\n      },\n      \"name\": \"comp-150\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-151.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"checkbox\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-151\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-152.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-152\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-153.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-153\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-154.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-154\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-155.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-155\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-156.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"collapsible\", \"radix\"]\n      },\n      \"name\": \"comp-156\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-157.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"rating\", \"radix\"]\n      },\n      \"name\": \"comp-157\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-158.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"color\", \"picker\", \"radix\"]\n      },\n      \"name\": \"comp-158\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/radio-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-159.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-159\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-160.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-160\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-161.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-161\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/radio-group.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-162.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-162\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/radio-group.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-163.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"card\", \"checkout\", \"payment\", \"radix\"]\n      },\n      \"name\": \"comp-163\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/radio-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-164.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"card\", \"pricing\", \"radix\"]\n      },\n      \"name\": \"comp-164\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/radio-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-165.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-165\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/radio-group.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-166.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"pricing\", \"radix\"]\n      },\n      \"name\": \"comp-166\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/radio-group.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/badge.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-167.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"rating\", \"vote\", \"radix\"]\n      },\n      \"name\": \"comp-167\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/radio-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-168.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"rating\", \"vote\", \"radix\"]\n      },\n      \"name\": \"comp-168\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/radio-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-169.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"radio\", \"label\", \"darkmode\", \"radix\"]\n      },\n      \"name\": \"comp-169\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/radio-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-170.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"radio\", \"label\", \"pricing\", \"switch\", \"radix\"]\n      },\n      \"name\": \"comp-170\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/radio-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-171.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"radio\", \"label\", \"rating\", \"vote\", \"radix\"]\n      },\n      \"name\": \"comp-171\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/radio-group.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-172.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"radix\"]\n      },\n      \"name\": \"comp-172\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-173.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"radix\"]\n      },\n      \"name\": \"comp-173\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-174.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"radix\"]\n      },\n      \"name\": \"comp-174\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-175.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"radix\"]\n      },\n      \"name\": \"comp-175\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-176.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"radix\"]\n      },\n      \"name\": \"comp-176\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-177.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"radix\"]\n      },\n      \"name\": \"comp-177\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-178.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"radix\"]\n      },\n      \"name\": \"comp-178\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-179.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-179\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-180.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-180\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/switch.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-181.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"darkmode\", \"radix\"]\n      },\n      \"name\": \"comp-181\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-182.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"darkmode\", \"radix\"]\n      },\n      \"name\": \"comp-182\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/switch.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-183.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"darkmode\", \"radix\"]\n      },\n      \"name\": \"comp-183\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-184.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"darkmode\", \"radix\"]\n      },\n      \"name\": \"comp-184\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-185.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-185\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-186.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-186\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-187.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-187\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-188.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"switch\", \"label\", \"card\", \"radix\"]\n      },\n      \"name\": \"comp-188\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/switch.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-189.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-189\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-190.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-190\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-191.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\", \"time\"]\n      },\n      \"name\": \"comp-191\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-192.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-192\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-193.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-193\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-194.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\", \"error\"]\n      },\n      \"name\": \"comp-194\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-195.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-195\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-196.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\", \"disabled\"]\n      },\n      \"name\": \"comp-196\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-197.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-197\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-198.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-198\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-199.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-199\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-200.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\", \"timezone\", \"time\"]\n      },\n      \"name\": \"comp-200\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select-native.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-201.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-201\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/select-native.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-202.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"native select\"]\n      },\n      \"name\": \"comp-202\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/select-native.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-203.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-203\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-204.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-204\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-205.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-205\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-206.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"helper\", \"radix\"]\n      },\n      \"name\": \"comp-206\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-207.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-207\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-208.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-208\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-209.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-209\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-210.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"disabled\", \"radix\"]\n      },\n      \"name\": \"comp-210\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-211.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"required\", \"radix\"]\n      },\n      \"name\": \"comp-211\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-212.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-212\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-213.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-213\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-214.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-214\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-215.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"disabled\", \"radix\"]\n      },\n      \"name\": \"comp-215\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-216.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-216\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/select.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-217.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-217\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/select.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-218.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"timezone\", \"time\", \"radix\"]\n      },\n      \"name\": \"comp-218\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-219.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-219\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-220.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"status\", \"radix\"]\n      },\n      \"name\": \"comp-220\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-221.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-221\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-222.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-222\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@remixicon/react\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-223.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-223\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-224.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-224\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-225.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"flag\", \"radix\"]\n      },\n      \"name\": \"comp-225\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-226.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"user\", \"avatar\", \"profile\", \"radix\"]\n      },\n      \"name\": \"comp-226\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-227.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"user\", \"avatar\", \"profile\", \"radix\"]\n      },\n      \"name\": \"comp-227\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-228.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"user\", \"avatar\", \"profile\", \"radix\"]\n      },\n      \"name\": \"comp-228\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-229.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"label\",\n          \"select\",\n          \"command\",\n          \"combobox\",\n          \"popover\",\n          \"search\",\n          \"autocomplete\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-229\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/command.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-230.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"label\",\n          \"select\",\n          \"command\",\n          \"combobox\",\n          \"popover\",\n          \"search\",\n          \"autocomplete\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-230\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/command.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-231.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"label\",\n          \"select\",\n          \"command\",\n          \"combobox\",\n          \"popover\",\n          \"search\",\n          \"autocomplete\",\n          \"timezone\",\n          \"time\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-231\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/command.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-232.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"label\",\n          \"select\",\n          \"command\",\n          \"combobox\",\n          \"popover\",\n          \"search\",\n          \"autocomplete\",\n          \"flag\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-232\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/command.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-233.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"label\",\n          \"select\",\n          \"command\",\n          \"combobox\",\n          \"popover\",\n          \"search\",\n          \"autocomplete\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-233\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/command.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-234.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"label\",\n          \"select\",\n          \"multiselect\",\n          \"tag\",\n          \"input\",\n          \"search\",\n          \"autocomplete\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-234\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/multiselect.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-235.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"label\",\n          \"select\",\n          \"multiselect\",\n          \"tag\",\n          \"input\",\n          \"search\",\n          \"autocomplete\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-235\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/multiselect.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-236.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"multiselect\", \"native select\"]\n      },\n      \"name\": \"comp-236\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/select-native.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-237.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"multiselect\", \"react aria\"]\n      },\n      \"name\": \"comp-237\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/label.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-238.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"multiselect\", \"react aria\"]\n      },\n      \"name\": \"comp-238\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/label.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-239.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"label\", \"select\", \"multiselect\", \"react aria\"]\n      },\n      \"name\": \"comp-239\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/label.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-240.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-240\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-241.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"disabled\", \"radix\"]\n      },\n      \"name\": \"comp-241\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-242.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-242\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-243.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-243\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-244.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-244\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-245.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-245\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-246.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-246\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-247.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-247\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-248.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-248\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-249.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-249\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-250.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"range slider\", \"label\", \"range\", \"radix\"]\n      },\n      \"name\": \"comp-250\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-251.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"range slider\", \"label\", \"range\", \"radix\"]\n      },\n      \"name\": \"comp-251\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-252.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"volume\", \"controls\", \"radix\"]\n      },\n      \"name\": \"comp-252\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-253.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"range slider\", \"label\", \"range\", \"radix\"]\n      },\n      \"name\": \"comp-253\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-254.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\n          \"slider\",\n          \"label\",\n          \"button\",\n          \"input\",\n          \"tooltip\",\n          \"reset\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-254\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-255.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"input\", \"radix\"]\n      },\n      \"name\": \"comp-255\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-256.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"vote\", \"rating\", \"radix\"]\n      },\n      \"name\": \"comp-256\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-257.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"vote\", \"rating\", \"radix\"]\n      },\n      \"name\": \"comp-257\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-258.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"range slider\", \"label\", \"input\", \"range\", \"radix\"]\n      },\n      \"name\": \"comp-258\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-259.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"button\", \"pricing\", \"radix\"]\n      },\n      \"name\": \"comp-259\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-260.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"range slider\", \"label\", \"button\", \"radix\"]\n      },\n      \"name\": \"comp-260\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-261.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"vertical slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-261\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-262.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"vertical slider\", \"label\", \"input\", \"radix\"]\n      },\n      \"name\": \"comp-262\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\",\n        \"https://coss.com/origin/r/input.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-263.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"vertical slider\", \"range slider\", \"label\", \"radix\"]\n      },\n      \"name\": \"comp-263\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-264.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"input\", \"button\", \"reset\", \"radix\"]\n      },\n      \"name\": \"comp-264\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/button.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-265.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-slider-with-input.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"input\", \"button\", \"radix\"]\n      },\n      \"name\": \"comp-265\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/button.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-266.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"slider\", \"label\", \"equalizer\", \"radix\"]\n      },\n      \"name\": \"comp-266\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-267.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"warning\"]\n      },\n      \"name\": \"comp-267\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-268.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"warning\"]\n      },\n      \"name\": \"comp-268\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-269.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"error\"]\n      },\n      \"name\": \"comp-269\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-270.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"error\"]\n      },\n      \"name\": \"comp-270\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-271.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"success\"]\n      },\n      \"name\": \"comp-271\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-272.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"success\"]\n      },\n      \"name\": \"comp-272\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-273.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"info\"]\n      },\n      \"name\": \"comp-273\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-274.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"info\"]\n      },\n      \"name\": \"comp-274\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-275.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"warning\"]\n      },\n      \"name\": \"comp-275\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-276.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"warning\"]\n      },\n      \"name\": \"comp-276\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-277.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"error\", \"signup\", \"authentication\"]\n      },\n      \"name\": \"comp-277\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-278.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"alert\", \"error\", \"signup\", \"authentication\"]\n      },\n      \"name\": \"comp-278\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-279.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"warning\"]\n      },\n      \"name\": \"comp-279\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-280.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"error\"]\n      },\n      \"name\": \"comp-280\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-281.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"success\"]\n      },\n      \"name\": \"comp-281\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-282.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"info\"]\n      },\n      \"name\": \"comp-282\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-283.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"warning\"]\n      },\n      \"name\": \"comp-283\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-284.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"error\"]\n      },\n      \"name\": \"comp-284\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-285.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"success\"]\n      },\n      \"name\": \"comp-285\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-286.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"info\"]\n      },\n      \"name\": \"comp-286\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-287.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\", \"success\"]\n      },\n      \"name\": \"comp-287\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-288.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"success\"]\n      },\n      \"name\": \"comp-288\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-289.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\", \"warning\"]\n      },\n      \"name\": \"comp-289\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-290.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\", \"error\"]\n      },\n      \"name\": \"comp-290\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-291.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\", \"success\"]\n      },\n      \"name\": \"comp-291\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-292.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\", \"info\"]\n      },\n      \"name\": \"comp-292\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-293.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\", \"cookies\", \"gdpr\", \"privacy\"]\n      },\n      \"name\": \"comp-293\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-294.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\", \"info\"]\n      },\n      \"name\": \"comp-294\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-295.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\"]\n      },\n      \"name\": \"comp-295\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-296.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"button\"]\n      },\n      \"name\": \"comp-296\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-297.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-toast.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"toast\", \"radix\"]\n      },\n      \"name\": \"comp-297\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/toast.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-298.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"toast\", \"success\", \"radix\"]\n      },\n      \"name\": \"comp-298\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/toast.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"sonner\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-299.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"toast\", \"sonner\", \"radix\"]\n      },\n      \"name\": \"comp-299\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"sonner\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-300.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"notification\", \"toast\", \"sonner\", \"success\", \"radix\"]\n      },\n      \"name\": \"comp-300\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-301.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\", \"cookies\", \"gdpr\", \"privacy\"]\n      },\n      \"name\": \"comp-301\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-302.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-302\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-303.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-303\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-304.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-304\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-305.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-305\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-306.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-306\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-307.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-307\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-308.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-308\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-309.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-309\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-310.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\", \"countdown\", \"sale\"]\n      },\n      \"name\": \"comp-310\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-311.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\", \"newsletter\", \"subscribe\"]\n      },\n      \"name\": \"comp-311\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-312.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"banner\"]\n      },\n      \"name\": \"comp-312\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-313.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"alert\", \"alert dialog\", \"radix\"]\n      },\n      \"name\": \"comp-313\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/alert-dialog.json\",\n        \"https://coss.com/origin/r/button.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-314.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"alert\", \"alert dialog\", \"radix\"]\n      },\n      \"name\": \"comp-314\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/alert-dialog.json\",\n        \"https://coss.com/origin/r/button.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-315.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"radix\"]\n      },\n      \"name\": \"comp-315\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-316.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"radix\"]\n      },\n      \"name\": \"comp-316\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/scroll-area.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-317.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"radix\"]\n      },\n      \"name\": \"comp-317\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-318.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"radix\"]\n      },\n      \"name\": \"comp-318\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-319.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"radix\"]\n      },\n      \"name\": \"comp-319\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-320.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"delete\", \"radix\"]\n      },\n      \"name\": \"comp-320\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-321.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"newsletter\", \"subscribe\", \"form\", \"radix\"]\n      },\n      \"name\": \"comp-321\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-322.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"feedback\", \"form\", \"radix\"]\n      },\n      \"name\": \"comp-322\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-323.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"rating\", \"feedback\", \"form\", \"radix\"]\n      },\n      \"name\": \"comp-323\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"input-otp\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-324.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"otp\", \"radix\"]\n      },\n      \"name\": \"comp-324\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-325.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"signup\", \"authentication\", \"form\", \"radix\"]\n      },\n      \"name\": \"comp-325\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-326.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"login\", \"authentication\", \"form\", \"radix\"]\n      },\n      \"name\": \"comp-326\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-327.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"form\", \"user\", \"team\", \"radix\"]\n      },\n      \"name\": \"comp-327\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-payment-inputs\"],\n      \"devDependencies\": [\"@types/react-payment-inputs\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-328.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\n          \"dialog\",\n          \"modal\",\n          \"checkout\",\n          \"payment\",\n          \"credit card\",\n          \"form\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-328\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-payment-inputs\"],\n      \"devDependencies\": [\"@types/react-payment-inputs\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-329.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\n          \"dialog\",\n          \"modal\",\n          \"checkout\",\n          \"payment\",\n          \"credit card\",\n          \"form\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-329\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-330.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"user\", \"radix\"]\n      },\n      \"name\": \"comp-330\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-331.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-character-limit.ts\",\n          \"type\": \"registry:hook\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\n          \"dialog\",\n          \"modal\",\n          \"user\",\n          \"profile\",\n          \"image\",\n          \"avatar\",\n          \"form\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-331\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-332.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dialog\", \"modal\", \"onboarding\", \"radix\"]\n      },\n      \"name\": \"comp-332\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dialog.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-333.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\n          \"dialog\",\n          \"modal\",\n          \"command\",\n          \"combobox\",\n          \"popover\",\n          \"search\",\n          \"radix\",\n          \"autocomplete\",\n          \"radix\"\n        ]\n      },\n      \"name\": \"comp-333\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/command.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-334.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-334\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-335.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-335\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-336.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-336\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-337.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-337\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-338.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-338\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-339.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-339\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-340.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-340\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-341.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-341\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-342.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-342\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-343.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-343\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-344.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-344\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-345.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-345\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-346.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-346\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-347.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-347\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-348.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-348\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-349.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-349\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-350.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-350\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-351.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"radix\"]\n      },\n      \"name\": \"comp-351\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/accordion.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-352.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"collapsible\", \"radix\"]\n      },\n      \"name\": \"comp-352\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/accordion.json\",\n        \"https://coss.com/origin/r/collapsible.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-353.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"accordion\", \"collapsible\", \"radix\"]\n      },\n      \"name\": \"comp-353\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/accordion.json\",\n        \"https://coss.com/origin/r/collapsible.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-354.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-354\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-355.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-355\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-356.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-356\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-357.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-357\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-358.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-358\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-359.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"image\", \"radix\"]\n      },\n      \"name\": \"comp-359\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-360.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"button\", \"kbd\", \"radix\"]\n      },\n      \"name\": \"comp-360\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-361.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-361\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-362.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"chart\", \"radix\"]\n      },\n      \"name\": \"comp-362\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-363.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"hover card\", \"user\", \"avatar\", \"profile\", \"radix\"]\n      },\n      \"name\": \"comp-363\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/hover-card.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-364.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"hover card\", \"user\", \"avatar\", \"profile\", \"radix\"]\n      },\n      \"name\": \"comp-364\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/hover-card.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-365.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"tooltip\", \"hover card\", \"image\", \"radix\"]\n      },\n      \"name\": \"comp-365\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/hover-card.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-366.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"radix\"]\n      },\n      \"name\": \"comp-366\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-367.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"radix\"]\n      },\n      \"name\": \"comp-367\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-368.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"radix\"]\n      },\n      \"name\": \"comp-368\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-369.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"radix\"]\n      },\n      \"name\": \"comp-369\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-370.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"radix\"]\n      },\n      \"name\": \"comp-370\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-371.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"checkbox\", \"radix\"]\n      },\n      \"name\": \"comp-371\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-372.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"radio\", \"radix\"]\n      },\n      \"name\": \"comp-372\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-373.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"kbd\", \"delete\", \"radix\"]\n      },\n      \"name\": \"comp-373\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-374.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"checkbox\", \"radio\", \"delete\", \"radix\"]\n      },\n      \"name\": \"comp-374\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-375.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"user\", \"profile\", \"radix\"]\n      },\n      \"name\": \"comp-375\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-376.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"user\", \"profile\", \"avatar\", \"radix\"]\n      },\n      \"name\": \"comp-376\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-377.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"user\", \"avatar\", \"profile\", \"radix\"]\n      },\n      \"name\": \"comp-377\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/avatar.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-378.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"info\", \"radix\"]\n      },\n      \"name\": \"comp-378\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-379.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"text editor\", \"radix\"]\n      },\n      \"name\": \"comp-379\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-380.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"dropdown\", \"darkmode\", \"radix\"]\n      },\n      \"name\": \"comp-380\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-381.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"filter\", \"radix\"]\n      },\n      \"name\": \"comp-381\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-382.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"notification\", \"radix\"]\n      },\n      \"name\": \"comp-382\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-383.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"notification\", \"user\", \"radix\"]\n      },\n      \"name\": \"comp-383\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-384.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-384\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-385.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-385\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-386.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"tooltip\", \"radix\"]\n      },\n      \"name\": \"comp-386\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-387.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"share\", \"social\", \"copy\", \"radix\"]\n      },\n      \"name\": \"comp-387\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-388.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"feedback\", \"form\", \"radix\"]\n      },\n      \"name\": \"comp-388\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/textarea.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-389.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"popover\", \"tour\", \"radix\"]\n      },\n      \"name\": \"comp-389\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-390.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\"]\n      },\n      \"name\": \"comp-390\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/avatar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-391.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\"]\n      },\n      \"name\": \"comp-391\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/avatar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-392.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\"]\n      },\n      \"name\": \"comp-392\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/avatar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-393.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\"]\n      },\n      \"name\": \"comp-393\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/avatar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-394.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\", \"status\"]\n      },\n      \"name\": \"comp-394\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/avatar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-395.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\", \"status\"]\n      },\n      \"name\": \"comp-395\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/avatar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-396.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\", \"status\"]\n      },\n      \"name\": \"comp-396\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/avatar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-397.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\", \"badge\", \"chip\"]\n      },\n      \"name\": \"comp-397\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/avatar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-398.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\", \"badge\", \"chip\"]\n      },\n      \"name\": \"comp-398\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/badge.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-399.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\", \"badge\", \"chip\"]\n      },\n      \"name\": \"comp-399\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/badge.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-400.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"user\", \"profile\"]\n      },\n      \"name\": \"comp-400\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-401.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-401\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-402.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-402\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-403.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-403\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-404.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-404\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-405.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-405\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-406.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-406\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-407.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-407\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-408.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-408\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-409.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-409\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-410.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-410\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-411.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-411\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-412.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"avatar\", \"avatar group\"]\n      },\n      \"name\": \"comp-412\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-413.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\"]\n      },\n      \"name\": \"comp-413\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-414.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\"]\n      },\n      \"name\": \"comp-414\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-415.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\"]\n      },\n      \"name\": \"comp-415\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-416.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\", \"counter\"]\n      },\n      \"name\": \"comp-416\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-417.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\"]\n      },\n      \"name\": \"comp-417\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-418.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\", \"counter\"]\n      },\n      \"name\": \"comp-418\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-419.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\", \"status\"]\n      },\n      \"name\": \"comp-419\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-420.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\", \"status\"]\n      },\n      \"name\": \"comp-420\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-421.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\", \"status\"]\n      },\n      \"name\": \"comp-421\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-422.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\", \"status\"]\n      },\n      \"name\": \"comp-422\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-423.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\", \"checkbox\"]\n      },\n      \"name\": \"comp-423\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/checkbox.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-424.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\"]\n      },\n      \"name\": \"comp-424\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-425.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"badge\", \"chip\", \"tag\"]\n      },\n      \"name\": \"comp-425\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/badge.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-426.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-426\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-427.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-427\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-428.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-428\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-429.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-429\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-430.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-430\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-431.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-431\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-432.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-432\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-433.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-433\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/scroll-area.json\",\n        \"https://coss.com/origin/r/tabs.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-434.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-434\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/scroll-area.json\",\n        \"https://coss.com/origin/r/tabs.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-435.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-435\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/scroll-area.json\",\n        \"https://coss.com/origin/r/tabs.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-436.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-436\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/scroll-area.json\",\n        \"https://coss.com/origin/r/tabs.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-437.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-437\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/scroll-area.json\",\n        \"https://coss.com/origin/r/tabs.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-438.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-438\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-439.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-439\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/tabs.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-440.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-440\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/tabs.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-441.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"radix\"]\n      },\n      \"name\": \"comp-441\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/tabs.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-442.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"vertical tabs\", \"radix\"]\n      },\n      \"name\": \"comp-442\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-443.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"vertical tabs\", \"radix\"]\n      },\n      \"name\": \"comp-443\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-444.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"vertical tabs\", \"radix\"]\n      },\n      \"name\": \"comp-444\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-445.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 2,\n        \"tags\": [\"tabs\", \"vertical tabs\", \"radix\"]\n      },\n      \"name\": \"comp-445\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tabs.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-446.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"breadcrumb\", \"radix\"]\n      },\n      \"name\": \"comp-446\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/breadcrumb.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-447.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"breadcrumb\", \"dropdown\", \"radix\"]\n      },\n      \"name\": \"comp-447\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/breadcrumb.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-448.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"breadcrumb\", \"radix\"]\n      },\n      \"name\": \"comp-448\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/breadcrumb.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-449.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"breadcrumb\", \"radix\"]\n      },\n      \"name\": \"comp-449\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/breadcrumb.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-450.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"breadcrumb\", \"radix\"]\n      },\n      \"name\": \"comp-450\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/breadcrumb.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-451.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"breadcrumb\", \"radix\"]\n      },\n      \"name\": \"comp-451\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/breadcrumb.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-452.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"breadcrumb\", \"radix\"]\n      },\n      \"name\": \"comp-452\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/breadcrumb.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-453.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"style\": 1,\n        \"tags\": [\"breadcrumb\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-453\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/breadcrumb.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-454.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-454\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/pagination.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-455.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-455\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/pagination.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-456.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-456\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/pagination.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-457.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-457\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/pagination.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-458.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-458\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/pagination.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-459.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-459\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/pagination.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-460.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-460\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/pagination.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-461.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-461\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/pagination.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-462.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\"]\n      },\n      \"name\": \"comp-462\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/pagination.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-463.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-463\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/pagination.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-464.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\", \"select\", \"radix\"]\n      },\n      \"name\": \"comp-464\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/pagination.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-465.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"pagination\", \"input\"]\n      },\n      \"name\": \"comp-465\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/pagination.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-466.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\"]\n      },\n      \"name\": \"comp-466\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-467.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"user\", \"avatar\"]\n      },\n      \"name\": \"comp-467\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-468.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\"]\n      },\n      \"name\": \"comp-468\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-469.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\"]\n      },\n      \"name\": \"comp-469\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-470.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\"]\n      },\n      \"name\": \"comp-470\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-471.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\"]\n      },\n      \"name\": \"comp-471\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-472.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"checkbox\"]\n      },\n      \"name\": \"comp-472\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-473.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"checkbox\", \"card\"]\n      },\n      \"name\": \"comp-473\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-474.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"vertical table\"]\n      },\n      \"name\": \"comp-474\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-475.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"sticky\"]\n      },\n      \"name\": \"comp-475\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-476.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\"]\n      },\n      \"name\": \"comp-476\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@tanstack/react-table\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-477.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"tanstack\", \"checkbox\", \"badge\", \"chip\", \"flag\"]\n      },\n      \"name\": \"comp-477\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@tanstack/react-table\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-478.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\n          \"table\",\n          \"tanstack\",\n          \"checkbox\",\n          \"search\",\n          \"select\",\n          \"range\",\n          \"input\",\n          \"filter\",\n          \"sort\"\n        ]\n      },\n      \"name\": \"comp-478\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@tanstack/react-table\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-479.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"tanstack\", \"flag\", \"sort\", \"resize\"]\n      },\n      \"name\": \"comp-479\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/table.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@tanstack/react-table\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-480.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"tanstack\", \"flag\", \"sticky\", \"resize\"]\n      },\n      \"name\": \"comp-480\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\n        \"@dnd-kit/core\",\n        \"@dnd-kit/modifiers\",\n        \"@dnd-kit/sortable\",\n        \"@dnd-kit/utilities\",\n        \"@tanstack/react-table\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-481.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"table\", \"tanstack\", \"flag\", \"sort\", \"drag and drop\"]\n      },\n      \"name\": \"comp-481\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@tanstack/react-table\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-482.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\n          \"table\",\n          \"tanstack\",\n          \"checkbox\",\n          \"collapsible\",\n          \"flag\",\n          \"badge\",\n          \"chip\"\n        ]\n      },\n      \"name\": \"comp-482\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@tanstack/react-table\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-483.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\n          \"table\",\n          \"tanstack\",\n          \"checkbox\",\n          \"sort\",\n          \"flag\",\n          \"badge\",\n          \"chip\",\n          \"pagination\"\n        ]\n      },\n      \"name\": \"comp-483\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/pagination.json\",\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@tanstack/react-table\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-484.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-pagination.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\n          \"table\",\n          \"tanstack\",\n          \"checkbox\",\n          \"sort\",\n          \"flag\",\n          \"badge\",\n          \"chip\",\n          \"pagination\"\n        ]\n      },\n      \"name\": \"comp-484\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/pagination.json\",\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"@tanstack/react-table\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-485.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\n          \"table\",\n          \"tanstack\",\n          \"checkbox\",\n          \"sort\",\n          \"flag\",\n          \"badge\",\n          \"chip\",\n          \"pagination\",\n          \"filter\",\n          \"select\"\n        ]\n      },\n      \"name\": \"comp-485\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/alert-dialog.json\",\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/pagination.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-486.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"input\", \"label\", \"range\"]\n      },\n      \"name\": \"comp-486\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-487.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"react aria\"]\n      },\n      \"name\": \"comp-487\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar-rac.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-488.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"range calendar\", \"date\", \"react aria\"]\n      },\n      \"name\": \"comp-488\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar-rac.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\"react-aria-components\"],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-489.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"range calendar\", \"date\", \"disabled\", \"react aria\"]\n      },\n      \"name\": \"comp-489\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar-rac.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-490.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-490\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-491.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"range calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-491\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-492.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\n          \"calendar\",\n          \"range calendar\",\n          \"date\",\n          \"disabled\",\n          \"react daypicker\"\n        ]\n      },\n      \"name\": \"comp-492\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-493.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-493\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-494.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-494\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-495.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"range calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-495\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-496.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-496\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-497.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-497\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-498.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-498\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-499.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"week\", \"react daypicker\"]\n      },\n      \"name\": \"comp-499\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-500.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"button\", \"react daypicker\"]\n      },\n      \"name\": \"comp-500\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-501.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"button\", \"react daypicker\"]\n      },\n      \"name\": \"comp-501\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-502.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"input\", \"react daypicker\"]\n      },\n      \"name\": \"comp-502\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-503.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"input\", \"time\", \"react daypicker\"]\n      },\n      \"name\": \"comp-503\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-504.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"collapsible\", \"react daypicker\", \"radix\"]\n      },\n      \"name\": \"comp-504\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/collapsible.json\",\n        \"https://coss.com/origin/r/scroll-area.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-505.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"time\", \"button\", \"react daypicker\"]\n      },\n      \"name\": \"comp-505\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/scroll-area.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-506.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"button\", \"react daypicker\"]\n      },\n      \"name\": \"comp-506\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-507.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"style\": 1,\n        \"tags\": [\n          \"calendar\",\n          \"range calendar\",\n          \"date\",\n          \"button\",\n          \"react daypicker\"\n        ]\n      },\n      \"name\": \"comp-507\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-508.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"range calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-508\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-509.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"range calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-509\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-510.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"style\": 1,\n        \"tags\": [\"calendar\", \"date\", \"react daypicker\"]\n      },\n      \"name\": \"comp-510\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/calendar.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-511.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"calendar\", \"date\", \"button\", \"picker\", \"react daypicker\"]\n      },\n      \"name\": \"comp-511\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-512.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"calendar\", \"date\", \"button\", \"picker\", \"react daypicker\"]\n      },\n      \"name\": \"comp-512\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-513.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-513\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-514.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-514\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-515.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-515\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-516.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-516\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/stepper.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-517.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-517\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/stepper.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-518.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-518\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-519.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-519\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-520.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-520\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/stepper.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-521.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-521\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/stepper.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-522.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-522\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-523.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-523\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-524.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-524\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-525.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"stepper\"]\n      },\n      \"name\": \"comp-525\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-526.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"stepper\", \"vertical stepper\"]\n      },\n      \"name\": \"comp-526\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-527.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"stepper\", \"vertical stepper\"]\n      },\n      \"name\": \"comp-527\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/stepper.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-528.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"stepper\", \"vertical stepper\"]\n      },\n      \"name\": \"comp-528\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-529.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"stepper\", \"vertical stepper\"]\n      },\n      \"name\": \"comp-529\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/stepper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-530.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-530\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-531.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-531\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-532.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-532\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-533.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-533\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-534.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-534\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-535.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-535\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-536.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-536\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-537.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-537\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-538.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-538\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-539.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"timeline\", \"vertical timeline\"]\n      },\n      \"name\": \"comp-539\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-540.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"timeline\"]\n      },\n      \"name\": \"comp-540\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-541.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"timeline\"]\n      },\n      \"name\": \"comp-541\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/timeline.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"dependencies\": [\n        \"date-fns\",\n        \"@dnd-kit/core\",\n        \"@dnd-kit/modifiers\",\n        \"@dnd-kit/utilities\",\n        \"@remixicon/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-542.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/agenda-view.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/calendar-dnd-context.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/constants.ts\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/day-view.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/draggable-event.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/droppable-cell.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/event-dialog.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/event-item.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/events-popup.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/event-calendar.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/index.ts\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/month-view.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/types.ts\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/utils.ts\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/week-view.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/hooks/use-current-time-indicator.ts\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/event-calendar/hooks/use-event-visibility.ts\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"calendar\"]\n      },\n      \"name\": \"comp-542\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/textarea.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/radio-group.json\",\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/sonner.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-543.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\", \"avatar\"]\n      },\n      \"name\": \"comp-543\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-544.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-544\",\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-545.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-545\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-546.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-546\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-547.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-547\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-548.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-548\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-549.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-549\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-550.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-550\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-551.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-551\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/table.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-552.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-552\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-553.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"upload\", \"file\", \"image\", \"drag and drop\"]\n      },\n      \"name\": \"comp-553\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/button.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-554.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/hooks/use-file-upload.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\n          \"upload\",\n          \"file\",\n          \"image\",\n          \"drag and drop\",\n          \"crop\",\n          \"dialog\",\n          \"slider\",\n          \"zoom\"\n        ]\n      },\n      \"name\": \"comp-554\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/cropper.json\",\n        \"https://coss.com/origin/r/dialog.json\",\n        \"https://coss.com/origin/r/slider.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-555.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-555\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/cropper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-556.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-556\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/cropper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-557.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-557\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/cropper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-558.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-558\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/cropper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-559.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-559\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/cropper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-560.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-560\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/cropper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-561.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\", \"slider\"]\n      },\n      \"name\": \"comp-561\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/cropper.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-562.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-562\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/cropper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-563.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-563\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/cropper.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-564.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2,\n        \"tags\": [\"image\", \"crop\", \"zoom\"]\n      },\n      \"name\": \"comp-564\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/cropper.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-565.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\"]\n      },\n      \"name\": \"comp-565\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-566.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\"]\n      },\n      \"name\": \"comp-566\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-567.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\"]\n      },\n      \"name\": \"comp-567\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-568.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\"]\n      },\n      \"name\": \"comp-568\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-569.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\"]\n      },\n      \"name\": \"comp-569\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-570.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\"]\n      },\n      \"name\": \"comp-570\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-571.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\", \"filter\", \"search\"]\n      },\n      \"name\": \"comp-571\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/tree.json\",\n        \"https://coss.com/origin/r/input.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-572.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\", \"filter\", \"search\"]\n      },\n      \"name\": \"comp-572\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/tree.json\",\n        \"https://coss.com/origin/r/input.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-573.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\"]\n      },\n      \"name\": \"comp-573\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-574.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\", \"button\"]\n      },\n      \"name\": \"comp-574\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/tree.json\",\n        \"https://coss.com/origin/r/button.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-575.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\"]\n      },\n      \"name\": \"comp-575\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-576.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\", \"menu\"]\n      },\n      \"name\": \"comp-576\",\n      \"registryDependencies\": [\"https://coss.com/origin/r/tree.json\"],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-577.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-577\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-578.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-578\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-579.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-579\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-580.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-580\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/input.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-581.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/info-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-581\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-582.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/theme-toggle.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-582\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/select.json\",\n        \"https://coss.com/origin/r/tooltip.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-583.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-583\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/breadcrumb.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-584.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-584\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-585.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-585\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-586.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/theme-toggle.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-586\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/input.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-587.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-587\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-588.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/logo.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-588\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-589.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/settings-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-589\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/breadcrumb.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-590.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/team-switcher.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-590\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-591.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/user-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-591\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/select.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-592.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/info-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/notification-menu.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/settings-menu.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-592\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/input.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/switch.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-593.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/date-picker.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/filters.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-593\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/breadcrumb.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/calendar.json\",\n        \"https://coss.com/origin/r/checkbox.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/popover.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-594.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/app-toggle.tsx\",\n          \"type\": \"registry:component\"\n        },\n        {\n          \"path\": \"registry/default/components/navbar-components/team-switcher.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-594\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/dropdown-menu.json\",\n        \"https://coss.com/origin/r/radio-group.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-595.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-595\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/avatar.json\",\n        \"https://coss.com/origin/r/button.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-596.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 3,\n        \"tags\": [\"navbar, navigation\"]\n      },\n      \"name\": \"comp-596\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/badge.json\",\n        \"https://coss.com/origin/r/button.json\",\n        \"https://coss.com/origin/r/label.json\",\n        \"https://coss.com/origin/r/navigation-menu.json\",\n        \"https://coss.com/origin/r/popover.json\",\n        \"https://coss.com/origin/r/switch.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-597.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\", \"checkbox\"]\n      },\n      \"name\": \"comp-597\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/tree.json\",\n        \"https://coss.com/origin/r/checkbox.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-598.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\", \"checkbox\"]\n      },\n      \"name\": \"comp-598\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/tree.json\",\n        \"https://coss.com/origin/r/checkbox.json\"\n      ],\n      \"type\": \"registry:component\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/components/comp-599.tsx\",\n          \"type\": \"registry:component\"\n        }\n      ],\n      \"meta\": {\n        \"tags\": [\"tree\", \"checkbox\"]\n      },\n      \"name\": \"comp-599\",\n      \"registryDependencies\": [\n        \"https://coss.com/origin/r/tree.json\",\n        \"https://coss.com/origin/r/checkbox.json\"\n      ],\n      \"type\": \"registry:component\"\n    }\n  ],\n  \"name\": \"originui\"\n}\n"
  },
  {
    "path": "apps/origin/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"esModuleInterop\": true,\n    \"incremental\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"noEmit\": true,\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    },\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ],\n    \"resolveJsonModule\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"target\": \"ES2017\"\n  },\n  \"exclude\": [\"node_modules\"],\n  \"include\": [\n    \"next-env.d.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\",\n    \".next/dev/types/**/*.ts\"\n  ]\n}\n"
  },
  {
    "path": "apps/origin/tsconfig.scripts.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"compilerOptions\": {\n    \"esModuleInterop\": true,\n    \"isolatedModules\": false,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"node\",\n    \"target\": \"es6\"\n  },\n  \"exclude\": [\"node_modules\"],\n  \"extends\": \"./tsconfig.json\",\n  \"include\": [\"scripts/**/*.ts\"]\n}\n"
  },
  {
    "path": "apps/origin/types/styled-jsx.d.ts",
    "content": "import \"react\";\n\ndeclare module \"react\" {\n  interface StyleHTMLAttributes<T>\n    // Allow styled-jsx props on <style> tags\n    extends React.HTMLAttributes<T> {\n    jsx?: boolean;\n    global?: boolean;\n  }\n}\n"
  },
  {
    "path": "apps/ui/.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\n.source"
  },
  {
    "path": "apps/ui/AGENTS.md",
    "content": "# Particle Component Development Guide for @coss/ui\n\nThis guide provides comprehensive instructions for creating new particle components that match the existing library's patterns and best practices. Use this when creating equivalents of origin components or building new particles from scratch.\n\n---\n\n## 1. File Structure and Naming\n\n**Location:** `apps/ui/registry/default/particles/`\n\n**Naming Convention:** `p-{component}-{N}.tsx`\n- `{component}`: The primary component name (e.g., `button`, `input`, `alert-dialog`, `input-group`)\n- `{N}`: Sequential number within the category (e.g., `1`, `2`, `3`)\n- Use hyphens for multi-word components (e.g., `alert-dialog`, `input-group`, `number-field`)\n\n**Examples:**\n- `p-button-1.tsx` (first button particle)\n- `p-input-group-15.tsx` (fifteenth input group particle)\n- `p-alert-dialog-2.tsx` (second alert dialog particle)\n\n**Important:**\n- Always name the default export function `Particle` (not `ParticleButton8` or similar)\n- If a particle uses multiple UI primitives, choose the primary category for the file name\n- Keep files minimal and focused on demonstrating one pattern or feature\n\n---\n\n## 2. Function Signature\n\n**Always use this exact signature:**\n\n```tsx\nexport default function Particle() {\n  return (\n    // JSX here\n  );\n}\n```\n\n**Never:**\n- Use named exports like `export function ParticleButton8()`\n- Add parameters to the Particle function\n- Export multiple components from one file\n\n---\n\n## 3. \"use client\" Directive\n\n**Only add `\"use client\";` at the top when the particle uses:**\n\n- React hooks (`useState`, `useEffect`, `useCallback`, `useMemo`, `useRef`, etc.)\n- Event handlers that modify state (`onClick`, `onChange`, etc. that call `setState`)\n- Browser APIs (`window`, `document`, `localStorage`, etc.)\n- Context providers/consumers that require client-side rendering\n- Form submissions or interactive state management\n\n**Do NOT add `\"use client\"` for:**\n- Stateless components\n- Components that only render UI without interactivity\n- Components using controlled props (state managed externally)\n- Simple compositions of UI primitives\n\n**Examples:**\n\n```tsx\n// ✅ Needs \"use client\" - uses useState\n\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  return <Button onClick={() => setLoading(true)}>Click</Button>;\n}\n```\n\n```tsx\n// ✅ Does NOT need \"use client\" - stateless\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button>Click me</Button>;\n}\n```\n\n---\n\n## 4. Import Patterns\n\n### Icons\n\n**Import specific icons from `lucide-react`:**\n\n```tsx\nimport { ChevronRightIcon, PlusIcon, XIcon } from \"lucide-react\";\n```\n\n**Never:**\n- Import entire icon libraries (`import * from \"lucide-react\"`)\n- Use icon components from other libraries (only use `lucide-react`)\n\n### Components\n\n**Import from `@/registry/default/ui/{component}`:**\n\n```tsx\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Dialog,\n  DialogPopup,\n  DialogTrigger,\n  DialogTitle,\n} from \"@/registry/default/ui/dialog\";\n```\n\n**Important:** Always use the `@/registry/default/ui/` path, never `@coss/ui/components/` in particles.\n\n### React\n\n**Always use named imports for React hooks:**\n\n```tsx\nimport { useState, useEffect, useId, useRef, useCallback, useMemo } from \"react\";\n```\n\n**Then use hooks directly:**\n\n```tsx\nconst id = useId();\nconst [state, setState] = useState(false);\nconst ref = useRef(null);\n```\n\n**Never:**\n- Import React namespace (`import * as React`) - always use named imports\n- Import React for stateless components (components without hooks or state)\n\n---\n\n## 5. Icon Handling and Accessibility\n\n### Icon Sizing\n\n**Never use numeric `size` props on icons:**\n\n```tsx\n// ❌ Never do this\n<Icon size={16} />\n<Icon size={20} />\n```\n\n**Icons use default sizing from their parent context (Button, Badge, etc.), or use Tailwind classes when explicit sizing is needed:**\n\n```tsx\n// ✅ Default sizing (no size prop needed)\n<Button>\n  <PlusIcon aria-hidden=\"true\" />\n  Add Item\n</Button>\n\n// ✅ Explicit sizing with Tailwind classes (when needed)\n<EllipsisIcon className=\"size-4\" />\n<UsersRoundIcon className=\"size-3 shrink-0\" />\n<ChevronDownIcon className=\"size-4\" />\n```\n\n**Common Tailwind size classes for icons:**\n- `size-3` - Small icons (12px)\n- `size-4` - Default icon size (16px) - most common\n- `size-3.5` - Between small and default (14px)\n\n**Components with and without built-in icon sizing:**\n\nSome components have built-in icon sizing via CSS selectors like `[&_svg:not([class*='size-'])]:size-4`. For components that don't have this (e.g., `BreadcrumbLink`), you must explicitly set the icon size using a `size-*` class:\n\n```tsx\n// ✅ Component with built-in icon sizing (e.g., Button) - no class needed\n<Button size=\"icon-sm\">\n  <PlusIcon aria-hidden=\"true\" />\n</Button>\n\n// ✅ Component without built-in icon sizing - add size class\n<BreadcrumbLink aria-label=\"Home\" render={<Link href=\"/\" />}>\n  <HomeIcon aria-hidden=\"true\" className=\"size-4\" />\n</BreadcrumbLink>\n```\n\n### Icon Opacity Patterns\n\n**Icons inside Buttons:**\n- **Do NOT add opacity classes to icons inside buttons** - the Button component automatically handles icon opacity\n- For decorative icons in buttons with text, use `aria-hidden=\"true\"` without any opacity class\n- For icon-only buttons, use `aria-label` on the button, `aria-hidden=\"true\"` on the icon\n\n```tsx\n// ✅ Icon-only button (no opacity needed)\n<Button aria-label=\"Close\" size=\"icon\" variant=\"ghost\">\n  <XIcon aria-hidden=\"true\" />\n</Button>\n\n// ✅ Button with icon and text (no opacity needed)\n<Button>\n  <PlusIcon aria-hidden=\"true\" />\n  Add Item\n</Button>\n\n// ❌ Don't add opacity to icons in buttons\n<Button>\n  <PlusIcon aria-hidden=\"true\" className=\"opacity-60\" />\n  Add Item\n</Button>\n```\n\n**Icons inside Badges:**\n- Icons in badges are decorative (the text label provides the meaning)\n- Use `aria-hidden=\"true\"` for decorative icons\n\n```tsx\n// ✅ Badge with icon\n<Badge variant=\"outline\">\n  <CheckIcon aria-hidden=\"true\" />\n  Verified\n</Badge>\n```\n\n**Icons inside Input Groups:**\n- Icons in `InputGroupAddon` are decorative (the input's aria-label or placeholder provides meaning)\n- Use `aria-hidden=\"true\"` for decorative icons\n\n```tsx\n// ✅ Input group with icon\n<InputGroup>\n  <InputGroupInput aria-label=\"Search\" placeholder=\"Search\" type=\"search\" />\n  <InputGroupAddon>\n    <SearchIcon aria-hidden=\"true\" />\n  </InputGroupAddon>\n</InputGroup>\n```\n\n**InputGroupAddon DOM Order:**\n\nWhen using `InputGroupAddon`, it must always come **after** an `InputGroupInput` or `InputGroupTextarea` in the DOM order. The addon's `onMouseDown` handler uses `querySelector` to find the input/textarea element to focus, so if the addon appears before the input element, it won't be able to find it.\n\n```tsx\n// ✅ Correct order\n<InputGroup>\n  <InputGroupTextarea placeholder=\"Enter code...\" />\n  <InputGroupAddon align=\"block-end\">\n    <Button>Submit</Button>\n  </InputGroupAddon>\n</InputGroup>\n\n// ❌ Incorrect - addon won't find the textarea\n<InputGroup>\n  <InputGroupAddon align=\"block-start\">\n    <Button>Submit</Button>\n  </InputGroupAddon>\n  <InputGroupTextarea placeholder=\"Enter code...\" />\n</InputGroup>\n```\n\nNote: The `align` prop controls visual positioning (e.g., `block-start` renders at top, `block-end` at bottom), but the DOM order must still have the input/textarea first for the focus behavior to work.\n\n**Icons inside Alerts:**\n- Icons in alerts are semantic (they convey the alert type/severity)\n- Do NOT use `aria-hidden` - screen readers should announce the icon's meaning\n\n```tsx\n// ✅ Alert with icon (semantic, no aria-hidden)\n<Alert>\n  <InfoIcon />\n  <AlertTitle>Heads up!</AlertTitle>\n  <AlertDescription>Description here.</AlertDescription>\n</Alert>\n```\n\n**Icons inside Menu Items:**\n- Icons in menu items are decorative (the text label provides the meaning)\n- Use `aria-hidden=\"true\"` for decorative icons\n\n```tsx\n// ✅ Menu item with icon\n<MenuItem>\n  <EditIcon aria-hidden=\"true\" />\n  Edit\n</MenuItem>\n```\n\n**Icons inside Command/Input with decorative overlays:**\n- For decorative icons positioned absolutely (like search icons in inputs), use `opacity-80` and `aria-hidden=\"true\"`\n\n```tsx\n// ✅ Decorative icon overlay\n<div\n  aria-hidden=\"true\"\n  className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-3 opacity-80\"\n>\n  <SearchIcon />\n</div>\n```\n\n### aria-label Usage\n\n**Use `aria-label` when:**\n- An interactive element has no visible text label (icon-only buttons, icon-only toggles)\n- An input has no visible label\n- The element's purpose isn't clear from visual context alone\n\n```tsx\n// ✅ Icon-only button\n<Button aria-label=\"Close\" size=\"icon\" variant=\"ghost\">\n  <XIcon aria-hidden=\"true\" />\n</Button>\n\n// ✅ Input without visible label\n<InputGroupInput aria-label=\"Search items\" placeholder=\"Search…\" type=\"search\" />\n\n// ✅ Toggle without visible label\n<Toggle aria-label=\"Toggle bold\" value=\"bold\">\n  <BoldIcon />\n</Toggle>\n```\n\n**Do NOT use `aria-label` when:**\n- The element has visible text that describes its purpose\n- The element is decorative (use `aria-hidden=\"true\"` instead)\n\n**Prefer `aria-label` over `sr-only` text:**\n\nFor consistency, always prefer `aria-label` over `sr-only` text for providing accessible names to icon-only elements:\n\n```tsx\n// ✅ Correct - use aria-label\n<BreadcrumbLink aria-label=\"Home\" render={<Link href=\"/\" />}>\n  <HomeIcon aria-hidden=\"true\" className=\"size-4\" />\n</BreadcrumbLink>\n\n// ❌ Incorrect - avoid sr-only text\n<BreadcrumbLink render={<Link href=\"/\" />}>\n  <HomeIcon aria-hidden=\"true\" />\n  <span className=\"sr-only\">Home</span>\n</BreadcrumbLink>\n```\n\n### aria-hidden Usage\n\n**Use `aria-hidden=\"true\"` when:**\n- An icon is decorative and doesn't add semantic meaning\n- The icon is redundant with visible text or labels\n- The icon is purely visual decoration\n- **Icon-only buttons**: Always use `aria-hidden=\"true\"` on the icon when the button has `aria-label`\n- **Buttons with text + icon**: Use `aria-hidden=\"true\"` on decorative icons (most common case)\n- **Badges with icons**: Use `aria-hidden=\"true\"` (text provides meaning)\n- **Input groups**: Use `aria-hidden=\"true\"` on icons in `InputGroupAddon` (input label/placeholder provides meaning)\n- **Menu items**: Use `aria-hidden=\"true\"` on icons (text provides meaning)\n\n```tsx\n// ✅ Icon-only button (button has aria-label, icon is decorative)\n<Button aria-label=\"Close\" size=\"icon\" variant=\"ghost\">\n  <XIcon aria-hidden=\"true\" />\n</Button>\n\n// ✅ Button with text + decorative icon\n<Button>\n  <PlusIcon aria-hidden=\"true\" />\n  Add Item\n</Button>\n\n// ✅ Badge with decorative icon\n<Badge>\n  <CheckIcon aria-hidden=\"true\" />\n  Verified\n</Badge>\n```\n\n**Do NOT use `aria-hidden` when:**\n- The icon conveys important semantic information (e.g., alert icons that indicate severity/type)\n- The icon is the only content AND the parent doesn't have `aria-label` (use `aria-label` on parent instead)\n\n---\n\n## 6. Accessibility Best Practices\n\n### Inputs Without Visible Labels\n\n**Always use `aria-label` for inputs without visible labels:**\n\n```tsx\n<InputGroupInput\n  aria-label=\"Subscribe to our newsletter\"\n  placeholder=\"Your email\"\n  type=\"email\"\n/>\n```\n\n### Input Type Attribute\n\n**Always specify the `type` attribute explicitly on Input and InputGroupInput components:**\n\n```tsx\n// ✅ Always specify type\n<Input type=\"text\" placeholder=\"Enter name\" />\n<Input type=\"email\" placeholder=\"your@email.com\" />\n<Input type=\"password\" placeholder=\"Enter password\" />\n<Input type=\"search\" placeholder=\"Search…\" />\n<Input type=\"file\" />\n\n// ❌ Never omit type\n<Input placeholder=\"Enter text\" />\n```\n\n**Common types:**\n- `type=\"text\"` - Default text input (always specify explicitly)\n- `type=\"email\"` - Email input with validation\n- `type=\"password\"` - Password input (hidden characters)\n- `type=\"search\"` - Search input\n- `type=\"file\"` - File upload input\n\n**Important:** Even for text inputs, always specify `type=\"text\"` explicitly for clarity and consistency.\n\n### Labeling Checkboxes, Radio Groups, and Switches\n\n**Pattern 1: Simple label (checkbox/radio/switch directly with label text)**\n\nWrap both the control and label text in a `<Label>` component:\n\n```tsx\n// ✅ Checkbox\n<Label>\n  <Checkbox />\n  Accept terms and conditions\n</Label>\n\n// ✅ Radio\n<Label>\n  <Radio value=\"next\" />\n  Next.js\n</Label>\n\n// ✅ Switch\n<Label>\n  <Switch />\n  Marketing emails\n</Label>\n```\n\n**Pattern 2: Label with additional content (description text)**\n\nWhen you have additional content like description text, use `id` and `htmlFor`:\n\n```tsx\nimport { useId } from \"react\";\n\nexport default function Particle() {\n  const id = useId();\n  \n  return (\n    <div className=\"flex items-start gap-2\">\n      <Checkbox id={id} />\n      <div className=\"flex flex-col gap-1\">\n        <Label htmlFor={id}>Accept terms and conditions</Label>\n        <p className=\"text-muted-foreground text-xs\">\n          By clicking this checkbox, you agree to the terms.\n        </p>\n      </div>\n    </div>\n  );\n}\n```\n\n**Pattern 3: Checkbox/Radio Groups**\n\nEach option in a group should be wrapped in its own `<Label>`:\n\n```tsx\n// ✅ Checkbox Group\n<CheckboxGroup aria-label=\"Select frameworks\" defaultValue={[\"next\"]}>\n  <Label>\n    <Checkbox value=\"next\" />\n    Next.js\n  </Label>\n  <Label>\n    <Checkbox value=\"vite\" />\n    Vite\n  </Label>\n  <Label>\n    <Checkbox value=\"astro\" />\n    Astro\n  </Label>\n</CheckboxGroup>\n\n// ✅ Radio Group\n<RadioGroup defaultValue=\"next\">\n  <Label>\n    <Radio value=\"next\" />\n    Next.js\n  </Label>\n  <Label>\n    <Radio value=\"vite\" />\n    Vite\n  </Label>\n</RadioGroup>\n```\n\n**Pattern 4: In Form Fields**\n\nWhen using Field components, place the checkbox/radio inside `FieldLabel`:\n\n```tsx\n<Field name=\"terms\">\n  <FieldLabel>\n    <Checkbox value=\"yes\" />\n    Accept terms and conditions\n  </FieldLabel>\n</Field>\n```\n\n**Important:**\n- Always wrap checkbox/radio/switch controls with their label text in a `<Label>` component\n- Only use `id`/`htmlFor` pattern when you have additional content (like description text) that needs to be outside the label\n- In groups, each option gets its own `<Label>` wrapper\n- Never use `aria-label` on checkboxes/radios/switches when they have visible labels - the `<Label>` component handles the association automatically\n\n### Form Fields\n\n**Use Field components for proper form structure:**\n\n```tsx\n<Field>\n  <FieldLabel>Password</FieldLabel>\n  <Input type=\"password\" required />\n  <FieldError>Please fill out this field.</FieldError>\n</Field>\n```\n\n---\n\n## 7. State Management\n\n### Static Data\n\n**Define static data outside the function:**\n\n```tsx\nconst items = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select items={items}>\n      {/* ... */}\n    </Select>\n  );\n}\n```\n\n### Stateful Particles\n\n**When state is needed, add `\"use client\"` and use React hooks:**\n\n```tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  \n  const handleClick = async () => {\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n  };\n\n  return (\n    <Button disabled={loading} onClick={handleClick}>\n      {loading ? \"Loading...\" : \"Submit\"}\n    </Button>\n  );\n}\n```\n\n**Prefer:**\n- Named imports from \"react\" (e.g., `import { useState } from \"react\"`)\n- Descriptive state variable names\n- Clear handler function names\n\n---\n\n## 8. Styling Patterns\n\n### Tailwind Classes\n\n**Use Tailwind classes directly. Common patterns:**\n\n- **Layout:** `flex`, `grid`, `gap-2`, `items-center`, `justify-between`\n- **Spacing:** `p-4`, `px-3`, `py-2`, `gap-4`\n- **Text:** `text-sm`, `text-muted-foreground`, `font-medium`\n- **Sizing:** `w-full`, `max-w-xs`, `h-auto!` (use `!` for important overrides)\n- **Custom overrides:** `className=\"pe-0\"`, `className=\"*:[input]:px-0!\"`\n\n### Semantic Color Tokens\n\n**Always use semantic color tokens, never raw colors:**\n\n```tsx\n// ✅ Good\nclassName=\"text-muted-foreground\"\nclassName=\"bg-destructive text-destructive-foreground\"\n\n// ❌ Bad\nclassName=\"text-gray-500\"\nclassName=\"bg-red-500 text-white\"\n```\n\n### Border Color\n\n**Never use `border-border` class - it's already set in globals.css by default:**\n\n```tsx\n// ❌ Bad - redundant class\nclassName=\"border-b border-border\"\n\n// ✅ Good - border-border is the default\nclassName=\"border-b\"\n```\n\n### Important Overrides\n\n**Use `!` suffix for important overrides when needed:**\n\n```tsx\nclassName=\"border-transparent! bg-transparent! shadow-none\"\nclassName=\"h-auto!\"\n```\n\n### Hover and State Styling with data-slot\n\n**Prefer `in-*` prefix with `data-slot` over the `group` class pattern:**\n\nEvery component has a `data-slot` attribute. Instead of using the `group` class on a parent and `group-hover:` on children, use the `in-*` prefix with `data-slot` selectors:\n\n```tsx\n// ❌ Avoid using group class\n<Button className=\"group\">\n  Get Started\n  <ArrowRightIcon className=\"transition-transform group-hover:translate-x-0.5\" />\n</Button>\n\n// ✅ Use in-* prefix with data-slot\n<Button>\n  Get Started\n  <ArrowRightIcon\n    aria-hidden=\"true\"\n    className=\"in-[[data-slot=button]:hover]:translate-x-0.5 transition-transform\"\n  />\n</Button>\n```\n\n**Common patterns:**\n- `in-[[data-slot=button]:hover]:` - Style when parent button is hovered\n- `in-[[data-slot=card]:hover]:` - Style when parent card is hovered\n- `in-data-[slot=input-group]:` - Style when inside an input group\n\n### Negative Margins\n\n**Avoid negative margins when possible, but use them sparingly when needed for visual balance:**\n\n- Negative margins are sometimes necessary to make elements look visually balanced inside buttons\n- Use conservative values (e.g., `-me-1` rather than `-me-1.5`)\n- The appropriate value depends on the button size - find the right balance without exaggerating\n- Apply negative margins to wrapper elements (like `KbdGroup`) rather than individual items\n\n```tsx\n// ✅ Negative margin on wrapper for visual balance\n<Button variant=\"outline\">\n  Print\n  <KbdGroup className=\"-me-1\">\n    <Kbd>⌘</Kbd>\n    <Kbd>P</Kbd>\n  </KbdGroup>\n</Button>\n\n// ✅ Negative margin on badge for alignment\n<Button variant=\"outline\">\n  Messages\n  <Badge className=\"-me-1\" variant=\"outline\">18</Badge>\n</Button>\n```\n\n---\n\n## 9. Composition Patterns\n\n### Simple Composition\n\n**Single component with props:**\n\n```tsx\nexport default function Particle() {\n  return <Button variant=\"outline\">Click me</Button>;\n}\n```\n\n### Nested Composition\n\n**Multiple components composed together:**\n\n```tsx\nexport default function Particle() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader>\n        <CardTitle>Title</CardTitle>\n      </CardHeader>\n      <CardPanel>\n        <Input placeholder=\"Enter text\" type=\"text\" />\n      </CardPanel>\n      <CardFooter>\n        <Button>Submit</Button>\n      </CardFooter>\n    </Card>\n  );\n}\n```\n\n### Trigger-Based Components\n\n**Menu/Dialog/Popover patterns:**\n\n```tsx\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>\n        Open Menu\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuItem>Edit</MenuItem>\n        <MenuItem>Delete</MenuItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n```\n\n**Important:** Always use `render` prop instead of `asChild` (Base UI pattern, not Radix).\n\n### Group Components\n\n**Use Group for connected button groups:**\n\n```tsx\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"File actions\">\n      <Button variant=\"outline\">\n        <FilesIcon />\n        Files\n      </Button>\n      <GroupSeparator />\n      <Button variant=\"outline\">\n        <FilmIcon />\n        Media\n      </Button>\n      <GroupSeparator />\n      <Menu>\n        <MenuTrigger render={<Button aria-label=\"Menu\" size=\"icon\" variant=\"outline\" />}>\n          <EllipsisIcon className=\"size-4\" />\n        </MenuTrigger>\n        <MenuPopup align=\"end\">\n          <MenuItem>Edit</MenuItem>\n        </MenuPopup>\n      </Menu>\n    </Group>\n  );\n}\n```\n\n**Important:** `GroupSeparator` is **always required** between controls in Group, including outline buttons.\n\n---\n\n## 10. Migration from Origin (shadcn/Radix) to coss (Base UI)\n\n### Understanding the Migration\n\nWhen creating a particle equivalent to an origin component:\n\n1. **Read the origin component** (`apps/origin/registry/default/ui/{component}.tsx`)\n2. **Check the migration guide** (`apps/ui/content/docs/(root)/radix-shadcn-migration.mdx`)\n3. **Compare the primitives:**\n   - Origin uses Radix UI primitives\n   - coss uses Base UI primitives\n   - Understand why certain classes were used in origin\n4. **Look at existing particles** in the same category for consistency\n5. **Understand the differences:**\n   - `asChild` → `render` prop\n   - `*Content` → `*Popup` or `*Panel`\n   - `onSelect` → `onClick` (Menu)\n   - `type=\"multiple\"` → `multiple={true}`\n   - Size differences (coss is more compact)\n\n### Key Migration Patterns\n\n**asChild → render:**\n\n```tsx\n// Origin (Radix)\n<DropdownMenuTrigger asChild>\n  <Button>Open</Button>\n</DropdownMenuTrigger>\n\n// coss (Base UI)\n<MenuTrigger render={<Button />}>Open</MenuTrigger>\n```\n\n**Component naming:**\n\n```tsx\n// Origin\n<DialogContent>\n  <DialogHeader>...</DialogHeader>\n</DialogContent>\n\n// coss\n<DialogPopup>\n  <DialogHeader>...</DialogHeader>\n  <DialogPanel>Content</DialogPanel>\n</DialogPopup>\n```\n\n**Menu items:**\n\n```tsx\n// Origin\n<DropdownMenuItem onSelect={() => console.log(\"clicked\")}>\n  Item\n</DropdownMenuItem>\n\n// coss\n<MenuItem onClick={() => console.log(\"clicked\")}>\n  Item\n</MenuItem>\n```\n\n**Select with items:**\n\n```tsx\n// Origin\n<Select>\n  <SelectTrigger>\n    <SelectValue placeholder=\"Select...\" />\n  </SelectTrigger>\n  <SelectContent>\n    <SelectItem value=\"next\">Next.js</SelectItem>\n  </SelectContent>\n</Select>\n\n// coss\n<Select items={[\n  { label: \"Select...\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n]}>\n  <SelectTrigger>\n    <SelectValue />\n  </SelectTrigger>\n  <SelectPopup>\n    {items.map((item) => (\n      <SelectItem key={item.value} value={item}>\n        {item.label}\n      </SelectItem>\n    ))}\n  </SelectPopup>\n</Select>\n```\n\n### Size Mapping\n\n**When migrating, map sizes to preserve visual appearance:**\n\n| Component | shadcn/ui Size | coss ui Size |\n|-----------|----------------|--------------|\n| Button    | `default` (36px) | `lg` (36px) |\n| Button    | `sm` (32px) | `default` (32px) |\n| Input     | `default` (36px) | `lg` (36px) |\n| Input     | `sm` (32px) | `default` (32px) |\n| Select    | `default` (36px) | `lg` (36px) |\n| Select    | `sm` (32px) | `default` (32px) |\n\n**coss ui is more compact by default, so use larger sizes to match shadcn/ui appearance.**\n\n### Understanding Class Overrides\n\n**When you see custom classes in origin components:**\n\n1. **Check what the class overrides** - look at the default styles in both libraries\n2. **Understand why it was needed** - was it a Radix limitation? A design choice?\n3. **Check if Base UI needs the same override** - Base UI might handle it differently\n4. **Look at existing coss particles** - see if similar patterns exist\n\n**Example:**\n\n```tsx\n// Origin might have:\nclassName=\"[&_svg]:size-4 [&_svg]:pointer-events-none\"\n\n// coss might handle this automatically, or need:\nclassName=\"[&_svg:not([class*='size-'])]:size-4\"\n```\n\n---\n\n## 11. Registry Metadata\n\n**Add entry to `apps/ui/registry/registry-particles.ts`:**\n\n```tsx\n{\n  name: \"p-button-25\",\n  description: \"Button with loading state\",\n  type: \"registry:block\",\n  categories: categories(\"button\", \"loading\"),\n  dependencies: [\"lucide-react\"],  // only if using icons\n  registryDependencies: [\"@coss/button\", \"@coss/spinner\"],\n  files: [{ path: \"particles/p-button-25.tsx\", type: \"registry:block\" }],\n  meta: {\n    className: \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n  },\n}\n```\n\n**Required fields:**\n- `name`: Must match filename without `.tsx` (e.g., `\"p-button-25\"`)\n- `description`: Brief description (≤ 15 words), focus on what it does, not implementation\n- `type`: Always `\"registry:block\"`\n- `categories`: Use `categories()` helper with valid categories from `registry-categories.ts`\n- `registryDependencies`: Array of `@coss/{component}` package names\n- `files`: Array with `path` and `type: \"registry:block\"`\n\n**Optional fields:**\n- `dependencies`: External npm packages (e.g., `[\"lucide-react\"]` for icons)\n- `meta.className`: Preview container styling (e.g., `\"**:data-[slot=preview]:w-full\"`)\n\n**Category names:**\n- Use spaces, not hyphens (e.g., `\"input group\"`, `\"alert dialog\"`, `\"empty state\"`)\n- All valid categories are typed in `registry-categories.ts`\n- The `categories()` helper ensures type safety\n\n---\n\n## 12. Valid Categories\n\n**Component categories:**\naccordion, alert, alert dialog, autocomplete, avatar, badge, breadcrumb, button, card, checkbox, checkbox group, collapsible, combobox, command, dialog, dropdown, empty state, field, fieldset, form, frame, group, input, input group, kbd, label, menu, meter, number field, pagination, popover, preview card, progress, radio group, scroll area, select, separator, sheet, skeleton, slider, spinner, switch, table, tabs, textarea, toast, toggle, toggle group, toolbar, tooltip\n\n**Tag categories:**\nasync, copy, disabled, error, file, filter, info, loading, multiselect, password, search, sort, success, tag, tanstack, text editor, time, upload, validation, warning, zod\n\n**Important:** All category names are typed in `registry-categories.ts`. Use the `categories()` helper function for type safety.\n\n**Menu components must include the \"dropdown\" category:** The \"dropdown\" category is an alias for \"menu\" since many users search for \"dropdown\" when looking for menu components. Every particle that uses the Menu component should include both \"dropdown\" and \"menu\" in its categories.\n\n**Adding New Categories:**\n\nIf you need a category that doesn't exist, you can add it to `apps/ui/registry/registry-categories.ts`. Categories are divided into:\n- **Component categories**: Main UI components (e.g., `\"input\"`, `\"button\"`) - add to `componentCategories` array\n- **Tag categories**: Additional tags/features (e.g., `\"loading\"`, `\"disabled\"`) - add to `tagCategories` array\n\nAfter adding a new category, it will be available for use with the `categories()` helper function.\n\n---\n\n## 13. React and Next.js Best Practices\n\n### React Patterns\n\n**Use modern React patterns:**\n\n```tsx\n// ✅ Prefer function components\nexport default function Particle() {\n  return <Button>Click</Button>;\n}\n\n// ✅ Use useId() for form associations\nconst id = useId();\n\n// ✅ Use descriptive variable names\nconst [isLoading, setIsLoading] = useState(false);\n\n// ✅ Extract complex logic to handlers\nconst handleSubmit = async () => {\n  setIsLoading(true);\n  // ...\n  setIsLoading(false);\n};\n```\n\n### Next.js Considerations\n\n**Particles should be framework-agnostic, but consider:**\n\n- Avoid Next.js-specific APIs (`next/link`, `next/image`) unless the particle specifically demonstrates Next.js integration\n- Use standard HTML elements and React patterns\n- For navigation, use standard `<a>` tags or demonstrate with `render` prop\n\n---\n\n## 14. Consistency with Existing Particles\n\n**Before creating a new particle:**\n\n1. **Search existing particles** in the same category\n2. **Review patterns** used in similar particles\n3. **Match the style** and composition approach\n4. **Use consistent naming** and structure\n5. **Follow the same icon/accessibility patterns**\n\n**Example workflow:**\n\n```bash\n# 1. Find existing particles in category\nls apps/ui/registry/default/particles/p-button-*.tsx\n\n# 2. Read a few examples\ncat apps/ui/registry/default/particles/p-button-1.tsx\ncat apps/ui/registry/default/particles/p-button-18.tsx\n\n# 3. Check registry for numbering\ngrep \"p-button\" apps/ui/registry/registry-particles.ts\n\n# 4. Create new particle following patterns\n```\n\n---\n\n## 15. Best Practices Summary\n\n### Code Quality\n\n- ✅ Keep particles focused on demonstrating one feature or pattern\n- ✅ Use realistic placeholder text and data\n- ✅ Prefer composition over complexity\n- ✅ Don't add comments unless explaining something non-obvious\n- ✅ Use semantic color tokens (`text-muted-foreground`) not raw colors\n- ✅ Test that the particle renders correctly before committing\n\n### Accessibility\n\n- ✅ Always provide `aria-label` for icon-only interactive elements\n- ✅ Use `aria-hidden=\"true\"` for decorative icons\n- ✅ Pair labels with inputs using `useId()`\n- ✅ Use Field components for proper form structure\n\n### Performance\n\n- ✅ Define static data outside the component function\n- ✅ Only add `\"use client\"` when actually needed\n- ✅ Avoid unnecessary re-renders\n- ✅ Use appropriate React patterns (hooks, memoization when needed)\n\n### Consistency\n\n- ✅ Follow existing patterns in the same category\n- ✅ Use consistent icon opacity and accessibility patterns\n- ✅ Match the styling approach of similar particles\n- ✅ Use the same import patterns\n\n---\n\n## 16. Building and Validating the Registry\n\nAfter creating a particle and adding it to the registry, you must build and validate:\n\n### Build Steps\n\n**From the `apps/ui` directory, run these commands in order:**\n\n```bash\ncd apps/ui\n\n# 1. Format code and sort imports\nbun run format:all\n\n# 2. Validate registry dependencies\nbun run registry:validate-deps\n\n# 3. Build registry JSON files\nbun run registry:build\n\n# 4. Copy UI components to packages folder (if needed)\nbun run ui:sync\n```\n\n### What Each Command Does\n\n**`bun run format:all`:**\n- Formats code with Prettier\n- Sorts imports automatically\n- Ensures consistent code style\n\n**`bun run registry:validate-deps`:**\n- Validates that all `registryDependencies` in `registry-particles.ts` are correct\n- Ensures dependencies match what's actually imported in particle files\n- Catches missing or incorrect dependency declarations\n- **Important:** Run this before `registry:build` to catch dependency errors early\n\n**`bun run registry:build`:**\n- Generates `registry/__index__.tsx` with all particles\n- Generates `registry.json` and `public/r/registry.json`\n- Builds individual JSON files for each particle in `public/r/`\n- **Note:** See `apps/ui/CONTRIBUTING.md` for more details on the build process\n\n**`bun run ui:sync`:**\n- Copies UI components from `apps/ui/registry/default/ui/` to `packages/ui/src/components/`\n- Only needed if you've modified UI primitives\n- Not needed for creating new particles (only for modifying base components)\n\n### Additional Resources\n\n- **Contributing Guide:** See `apps/ui/CONTRIBUTING.md` for detailed information about building the registry and contributing guidelines\n- **Category Management:** New categories can be added to `apps/ui/registry/registry-categories.ts` if needed (see section 12 for details)\n\n---\n\n## 17. Quick Checklist\n\nWhen creating a new particle:\n\n- [ ] Created `apps/ui/registry/default/particles/p-{component}-{N}.tsx`\n- [ ] Used `export default function Particle()` signature\n- [ ] Added `\"use client\"` only if using hooks/state/event handlers\n- [ ] Imported components from `@/registry/default/ui/{component}`\n- [ ] Imported specific icons from `lucide-react`\n- [ ] Used `aria-label` for icon-only interactive elements\n- [ ] Used `aria-hidden=\"true\"` for decorative icons\n- [ ] Applied appropriate icon opacity (or none) based on context\n- [ ] Specified `type` attribute explicitly on all Input and InputGroupInput components\n- [ ] Used semantic color tokens\n- [ ] Followed composition patterns from similar particles\n- [ ] Added entry to `apps/ui/registry/registry-particles.ts`\n- [ ] Used `categories()` helper with valid category names\n- [ ] Included all `@coss/*` dependencies in `registryDependencies`\n- [ ] Added `dependencies: [\"lucide-react\"]` if using icons\n- [ ] Set appropriate `meta.className` if needed\n- [ ] Formatted code: `bun run format:all`\n- [ ] Validated dependencies: `bun run registry:validate-deps` from `apps/ui`\n- [ ] Built registry: `bun run registry:build` from `apps/ui`\n- [ ] Copied UI components: `bun run ui:sync` from `apps/ui` (if needed)\n\n---\n\n## 18. Migration Workflow for Origin Components\n\nWhen asked to create an equivalent of an origin component:\n\n1. **Read the origin component:**\n   - `apps/origin/registry/default/ui/{component}.tsx`\n   - Understand its structure and patterns\n   - Note any custom classes or overrides\n\n2. **Check the migration guide:**\n   - `apps/ui/content/docs/(root)/radix-shadcn-migration.mdx`\n   - Find the component's migration section\n   - Understand prop mappings and API differences\n\n3. **Review existing particles:**\n   - Look at particles in the same category\n   - Understand common patterns\n   - See how similar features are implemented\n\n4. **Compare primitives:**\n   - Check what Radix primitive the origin uses\n   - Check what Base UI primitive coss uses\n   - Understand why classes were overridden in origin\n   - Determine if the same override is needed in coss\n\n5. **Create the particle:**\n   - Follow all patterns from this guide\n   - Use Base UI API (render prop, not asChild)\n   - Match the visual appearance\n   - Ensure accessibility is maintained\n\n6. **Test and verify:**\n   - Ensure it renders correctly\n   - Check accessibility\n   - Verify it matches the origin component's functionality\n   - Ensure it follows coss patterns\n\n---\n\n## 19. Common Patterns Reference\n\n### Button with Icon\n\n```tsx\n// Icon-only button\n<Button aria-label=\"Close\" size=\"icon\" variant=\"ghost\">\n  <XIcon aria-hidden=\"true\" />\n</Button>\n\n// Button with icon and text\n<Button>\n  <PlusIcon aria-hidden=\"true\" />\n  Add Item\n</Button>\n```\n\n### Button with Keyboard Shortcut (Kbd)\n\n**Each key needs its own `Kbd` component. Use `KbdGroup` when there are multiple keys:**\n\n```tsx\n// ✅ Multiple keys with KbdGroup\n<Button variant=\"outline\">\n  <PrinterIcon aria-hidden=\"true\" />\n  Print\n  <KbdGroup className=\"-me-1\">\n    <Kbd>⌘</Kbd>\n    <Kbd>P</Kbd>\n  </KbdGroup>\n</Button>\n\n// ✅ Single key\n<Button variant=\"outline\">\n  Save\n  <Kbd className=\"-me-1\">⌘S</Kbd>\n</Button>\n\n// ❌ Don't put multiple keys in one Kbd\n<Button variant=\"outline\">\n  Print\n  <Kbd className=\"-me-1\">⌘P</Kbd>\n</Button>\n```\n\n### Button with Badge\n\n**Match the badge variant with the button variant when appropriate:**\n\n```tsx\n// ✅ Outline badge in outline button\n<Button variant=\"outline\">\n  Messages\n  <Badge className=\"-me-1\" variant=\"outline\">18</Badge>\n</Button>\n\n// ✅ Default badge in default button\n<Button>\n  Notifications\n  <Badge className=\"-me-1\">5</Badge>\n</Button>\n```\n\n### Input with Label\n\n```tsx\n<Field>\n  <FieldLabel>Email</FieldLabel>\n  <Input type=\"email\" placeholder=\"your@email.com\" />\n  <FieldError>Invalid email</FieldError>\n</Field>\n```\n\n### Menu with Trigger\n\n```tsx\n<Menu>\n  <MenuTrigger render={<Button variant=\"outline\" />}>\n    Open Menu\n  </MenuTrigger>\n  <MenuPopup>\n    <MenuItem closeOnClick>Edit</MenuItem>\n    <MenuItem closeOnClick>Delete</MenuItem>\n  </MenuPopup>\n</Menu>\n```\n\n### Select with Items\n\n```tsx\nconst items = [\n  { label: \"Select...\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n];\n\n<Select items={items}>\n  <SelectTrigger>\n    <SelectValue />\n  </SelectTrigger>\n  <SelectPopup>\n    {items.map((item) => (\n      <SelectItem key={item.value} value={item}>\n        {item.label}\n      </SelectItem>\n    ))}\n  </SelectPopup>\n</Select>\n```\n\n### Dialog Pattern\n\n```tsx\n<Dialog>\n  <DialogTrigger render={<Button variant=\"outline\" />}>\n    Open Dialog\n  </DialogTrigger>\n  <DialogPopup>\n    <DialogHeader>\n      <DialogTitle>Title</DialogTitle>\n      <DialogDescription>Description</DialogDescription>\n    </DialogHeader>\n    <DialogPanel>Content here</DialogPanel>\n    <DialogFooter>\n      <DialogClose render={<Button variant=\"ghost\" />}>Cancel</DialogClose>\n      <DialogClose render={<Button />}>Confirm</DialogClose>\n    </DialogFooter>\n  </DialogPopup>\n</Dialog>\n```\n\n---\n\n## 20. Troubleshooting\n\n### Common Issues\n\n**Issue: Component doesn't render**\n- Check if `\"use client\"` is needed\n- Verify imports are correct\n- Ensure default export is `Particle`\n\n**Issue: Icons not showing**\n- Verify icon imports are specific (not `import *`)\n- Check if icon library is in dependencies\n\n**Issue: Styling doesn't match**\n- Check if using semantic tokens\n- Verify size mapping (shadcn → coss)\n- Compare with similar particles\n\n**Issue: Accessibility warnings**\n- Add `aria-label` for icon-only interactive elements\n- Add `aria-hidden=\"true\"` for decorative icons\n- Use `useId()` for label-input pairs\n\n**Issue: Registry build fails**\n- Check category names match `registry-categories.ts` exactly\n- Verify `registryDependencies` use `@coss/*` format\n- Ensure `name` matches filename without `.tsx`\n\n---\n\nThis guide should enable autonomous creation of particles that match the existing library's patterns, style, and best practices. Always refer to existing particles in the same category for consistency.\n"
  },
  {
    "path": "apps/ui/CONTRIBUTING.md",
    "content": "# Contributing to coss ui\n\nThank you for your interest in contributing to coss ui! This guide will help you understand how to contribute components and particles to our design system.\n\n## Overview\n\n**coss ui** consists of two main types of components:\n\n1. **UI Components** - Core reusable components (`Button`, `Input`, etc.)\n2. **Particles** - Composite components that use or combine multiple UI components\n\n## Adding New Particles\n\nParticles are composite components that use or combine multiple UI components. They appear in the documentation and on the particles page.\n\n### Naming Convention\n\nParticles use the format: `p-{component}-{N}.tsx`\n\n- **component**: The component name (e.g., `button`, `input`, `alert-dialog`, `input-group`)\n- **N**: Progressive number within the category (e.g., `1`, `2`, `3`)\n\n**Examples:**\n- `p-button-1.tsx` (first button particle)\n- `p-input-2.tsx` (second input particle)\n- `p-pagination-1.tsx` (first pagination particle)\n- `p-alert-dialog-1.tsx` (first alert dialog particle)\n- `p-input-group-3.tsx` (third input group particle)\n\n**Note:** Component names use hyphens for multi-word components (e.g., `alert-dialog`, `input-group`, `number-field`).\n\n### Step 1: Create the Particle Component\n\n1. Create a new file in `registry/default/particles/` with the correct naming:\n   ```bash\n   # Example: p-button-8.tsx (8th button particle)\n   touch registry/default/particles/p-button-8.tsx\n   ```\n\n2. Export a component named `Particle`:\n   ```tsx\n   // registry/default/particles/p-button-8.tsx\n   import { Button } from \"@/registry/default/ui/button\"\n\n   export default function Particle() {\n     return (\n       <div className=\"flex gap-2\">\n         <Button variant=\"outline\">Cancel</Button>\n         <Button>Save Changes</Button>\n       </div>\n     )\n   }\n   ```\n\n**Important notes:**\n- Always name the default export function `Particle` (not `ParticleBt8` or similar)\n- Use Base UI primitives from `@/registry/default/ui/` (e.g., `input`, `button`, `label`, etc.)\n- If a particle uses multiple UI primitives, choose the primary category for the file name\n- Keep files minimal and focused\n\n### Step 2: Add to Registry Particles\n\nAdd your particle to `registry/registry-particles.ts`:\n\n```tsx\n// registry/registry-particles.ts\n{\n  categories: categories(\"button\"),\n  description: \"Button group with cancel and save actions\",\n  files: [{ path: \"particles/p-button-8.tsx\", type: \"registry:block\" }],\n  name: \"p-button-8\",\n  registryDependencies: [\"@coss/button\"],\n  type: \"registry:block\",\n}\n```\n\n**Important fields:**\n- `name`: The particle id (e.g., `p-button-8`)\n- `description`: Concise but descriptive (displays on particles page)\n- `type`: Always `\"registry:block\"`\n- `registryDependencies`: Array of UI components used (e.g., `[\"@coss/button\"]`, `[\"@coss/input\", \"@coss/label\"]`)\n- `dependencies`: External npm package dependencies if needed (e.g., `[\"lucide-react\"]`)\n- `files`: Array with one file object:\n  - `path`: `\"particles/p-button-8.tsx\"`\n  - `type`: `\"registry:block\"`\n- `categories`: Array of categories using the `categories()` helper function (e.g., `categories(\"button\")`, `categories(\"input\", \"label\")`)\n  - **Important:** All valid category names are typed in `registry-categories.ts`. The `categories()` helper function ensures type safety and will show TypeScript errors if you use an invalid category name.\n  - Category names use spaces (e.g., `\"input group\"`, `\"alert dialog\"`) not hyphens, as defined in `registry-categories.ts`\n- `meta` (optional): Object with `className` property for wrapper styling:\n  ```tsx\n  meta: {\n    className: \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n  }\n  ```\n\n**meta.className Property:**\nThe `meta.className` property adds CSS classes to the particle preview wrapper. This is useful for:\n- Responsive sizing: `\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"`\n- Full width components: `\"**:data-[slot=preview]:w-full\"`\n- Custom layouts and spacing\n\n**Category Naming:**\n- All valid category names are typed in `registry-categories.ts`\n- Use category names that match exactly as defined in `registry-categories.ts` (e.g., `\"input group\"` not `\"input-group\"`, `\"alert dialog\"` not `\"alert-dialog\"`)\n- The `categories()` helper function provides type safety - TypeScript will error if you use an invalid category\n- For composite components, include all relevant categories\n- Categories are used for filtering on the particles page\n\n### Step 3: Add to Documentation (Optional)\n\nIf you want to showcase the particle in documentation:\n\n1. Find the relevant MDX file in `content/docs/components/`\n2. Add your particle with `<ComponentPreview />`:\n\n```mdx\n<ComponentPreview name=\"p-button-8\" />\n```\n\nYou can also pass a `className` prop to override the meta className:\n\n```mdx\n<ComponentPreview\n  name=\"p-button-8\"\n  className=\"[&_.preview>*]:w-full [&_.preview>*]:max-w-80\"\n/>\n```\n\n## Final Steps\n\nAfter adding your particle, run these scripts:\n\n```bash\ncd apps/ui\n\n# Format code and sort imports\nbun run format:all\n\n# Build registry JSON files\nbun run registry:build\n\n## Copy UI components to the packages folder\nbun run ui:sync\n```\n\nThe `registry:build` command will:\n- Generate `registry/__index__.tsx` with all particles\n- Generate `registry.json` and `public/r/registry.json`\n- Build individual JSON files for each particle in `public/r/`\n\n## Guidelines\n\n### Code Style\n- Use TypeScript\n- Follow existing naming conventions\n- Use meaningful, descriptive names\n- Keep components focused and single-purpose\n- Always export as `export default function Particle()`\n\n### Categories\n- All valid category names are typed in `registry-categories.ts`\n- Use categories that correspond to actual components\n- For composite components, include all relevant categories\n- Categories are used for filtering on the particles page\n- Category names must match exactly as defined in `registry-categories.ts` (use spaces, not hyphens)\n- The `categories()` helper function ensures type safety - TypeScript will error if you use an invalid category\n\n### Descriptions\n- Keep descriptions concise but informative (≤ 15 words recommended)\n- Focus on what the component does, not how it's implemented\n- Descriptions appear on the particles page\n\n### Dependencies\n- Be accurate with `dependencies` and `registryDependencies` - these are used for installation\n- `registryDependencies` should reference `@coss/*` package names\n- `dependencies` should list external npm packages (e.g., `[\"lucide-react\"]`)\n\n### Numbering\n- Particles are numbered sequentially within each category\n- If you're adding a new particle to a category, check the highest number and increment\n- For example, if `p-button-26.tsx` exists, the next button particle should be `p-button-27.tsx`\n\n## Getting Help\n\n- Check existing particles for patterns and conventions\n- Look at similar components for reference\n- Review `registry-categories.ts` for valid category names\n- Ask questions in our community channels\n\nThank you for contributing to coss ui! 🎉\n"
  },
  {
    "path": "apps/ui/README.md",
    "content": "# coss ui\n\n**coss ui** is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of [Base UI](https://base-ui.com/) and styled with [Tailwind CSS](https://tailwindcss.com/), it's designed for you to copy, paste, and own.\n\nWe think Base UI is the best foundation for modern web applications. We've taken its powerful, unstyled primitives and given them a design system that's ready to go, right out of the box.\n\nThis is the component library we'll be progressively adopting for [cal.com](https://cal.com). We're building it in the open for anyone who wants to create beautiful, reliable user interfaces.\n\n## Contributing\n\nWe're always looking for contributors to help improve our UI components. Whether it's a bug report, a new feature, or a documentation update, we appreciate your help.\n\nPlease see our [Contributing Guidelines](CONTRIBUTING.md) for more information on how to get involved.\n\n## Getting Started\n\nRun development server:\n\n```sh\nbun run dev\n```\n\nOpen http://localhost:4000 with your browser to see the result.\n\n## Development\n\n### Linting\n\nCheck for linting errors:\n\n```sh\nbun run lint\n```\n\n### Formatting\n\nFormat code automatically:\n\n```sh\nbun run format\n```\n\nFormat code and fix linting errors:\n\n```sh\nbun run format:all\n```\n\n### Type Checking\n\nRun TypeScript type checking:\n\n```sh\nbun run typecheck\n```\n\n## Resources\n\n- [Next.js](https://nextjs.org/)\n- [shadcn/ui](https://ui.shadcn.com/docs/registry)\n- [Fumadocs](https://fumadocs.dev/)\n\n### shadcn/ui Registry\n\nBuild shadcn/ui registry:\n\n```sh\nbun run registry:build\n```\n\nThis build script compiles all the registry items into a json file that is compatible with both v0 and the shadcn/ui cli. Read the [documentation](https://ui.shadcn.com/docs/registry) for further details.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](../../LICENSING.md) file for details.\n"
  },
  {
    "path": "apps/ui/app/api/raw/[...slug]/route.ts",
    "content": "import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { type NextRequest, NextResponse } from \"next/server\";\n\nexport async function GET(\n  _request: NextRequest,\n  { params }: { params: Promise<{ slug: string[] }> },\n) {\n  const { slug } = await params;\n\n  // Construct the file path from the slug\n  // If we have ['docs', 'filename'], look in (root) directory\n  let filePath: string;\n  if (slug.length === 2 && slug[0] === \"docs\") {\n    filePath = path.join(\n      process.cwd(),\n      \"content\",\n      \"docs\",\n      \"(root)\",\n      slug[1] || \"\",\n    );\n  } else {\n    filePath = path.join(process.cwd(), \"content\", ...slug);\n  }\n\n  // Check for both .mdx and .md extensions\n  const mdxPath = filePath.endsWith(\".mdx\") ? filePath : `${filePath}.mdx`;\n  const mdPath = filePath.endsWith(\".md\") ? filePath : `${filePath}.md`;\n\n  try {\n    let content: string;\n\n    // Try .mdx first, then .md\n    try {\n      content = await fs.readFile(mdxPath, \"utf-8\");\n    } catch {\n      content = await fs.readFile(mdPath, \"utf-8\");\n    }\n\n    // Return raw markdown with appropriate headers\n    return new NextResponse(content, {\n      headers: {\n        \"Cache-Control\": \"public, max-age=3600\",\n        \"Content-Type\": \"text/plain; charset=utf-8\",\n      },\n    });\n  } catch {\n    return NextResponse.json({ error: \"File not found\" }, { status: 404 });\n  }\n}\n"
  },
  {
    "path": "apps/ui/app/docs/[[...slug]]/page.tsx",
    "content": "import { LinkSquare02Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport Link from \"next/link\";\nimport { notFound } from \"next/navigation\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card, CardFrame, CardPanel } from \"@/registry/default/ui/card\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { DocsCopyPage } from \"@/components/docs-copy-page\";\nimport { DocsTableOfContents } from \"@/components/docs-toc\";\nimport { SiteFooter } from \"@/components/site-footer\";\nimport { source } from \"@/lib/source\";\nimport { mdxComponents } from \"@/mdx-components\";\n\nexport const revalidate = false;\nexport const dynamic = \"force-static\";\nexport const dynamicParams = false;\n\nexport function generateStaticParams() {\n  return source.generateParams();\n}\n\nexport async function generateMetadata(props: {\n  params: Promise<{ slug?: string[] }>;\n}) {\n  const params = await props.params;\n  const page = source.getPage(params.slug);\n\n  if (!page) {\n    notFound();\n  }\n\n  const doc = page.data;\n\n  if (!doc.title || !doc.description) {\n    notFound();\n  }\n\n  return {\n    description: doc.description,\n    title: `${doc.title} - coss ui`,\n  };\n}\n\nexport default async function Page(props: {\n  params: Promise<{ slug?: string[] }>;\n}) {\n  const params = await props.params;\n  const page = source.getPage(params.slug);\n  if (!page) {\n    notFound();\n  }\n\n  const doc = page.data;\n  const rawContent = await page.data.getText(\"raw\");\n  const MDX = doc.body;\n\n  const links = doc.links;\n\n  return (\n    <div className=\"flex items-stretch xl:w-full\" data-slot=\"docs\">\n      <div className=\"relative flex w-full min-w-0 flex-1 flex-col lg:mt-8 lg:mr-4 lg:mb-8\">\n        <CardFrame className=\"border-sidebar-border shadow-lg/5 max-lg:border-none dark:bg-background\">\n          <Card className=\"max-lg:rounded-none! dark:bg-background max-lg:[clip-path:none]!\">\n            <CardPanel className=\"px-4 py-6 sm:px-6 lg:p-8\">\n              <div className=\"mx-auto w-full max-w-3xl\">\n                <div className=\"flex min-w-0 flex-col gap-8\">\n                  <div className=\"flex flex-col gap-2\">\n                    <div className=\"flex flex-col gap-2\">\n                      <h1 className=\"scroll-m-20 font-heading font-semibold text-3xl xl:text-4xl\">\n                        {doc.title}\n                      </h1>\n                      {doc.description && (\n                        <p className=\"text-muted-foreground sm:text-lg\">\n                          {doc.description}\n                        </p>\n                      )}\n                    </div>\n                    <div className=\"flex items-center space-x-2 pt-4\">\n                      {links?.doc && (\n                        <Button\n                          render={\n                            <Link\n                              href={links.doc}\n                              rel=\"noreferrer\"\n                              target=\"_blank\"\n                            >\n                              <HugeiconsIcon\n                                icon={LinkSquare02Icon}\n                                strokeWidth={2.5}\n                              />\n                              API Reference\n                            </Link>\n                          }\n                          size=\"xs\"\n                          variant=\"outline\"\n                        />\n                      )}\n                      <DocsCopyPage page={rawContent} />\n                    </div>\n                  </div>\n                  <div className=\"w-full flex-1 *:data-[slot=alert]:first:mt-0\">\n                    <MDX components={mdxComponents} />\n                  </div>\n                </div>\n              </div>\n            </CardPanel>\n          </Card>\n          <div className=\"px-4 py-6 lg:rounded-b-2xl lg:px-8\">\n            <SiteFooter />\n          </div>\n        </CardFrame>\n      </div>\n      <div className=\"sticky top-(--header-height) z-30 ms-auto hidden h-[calc(100svh-var(--header-height))] w-72 flex-col overflow-hidden overscroll-none xl:flex\">\n        <ScrollArea\n          className=\"**:data-[slot=scroll-area-scrollbar]:hidden\"\n          scrollFade\n        >\n          <div className=\"flex min-h-0 flex-col gap-2 py-2\">\n            <div className=\"h-(--top-spacing) shrink-0\" />\n            {doc.toc?.length ? <DocsTableOfContents toc={doc.toc} /> : null}\n          </div>\n        </ScrollArea>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/docs/layout.tsx",
    "content": "import { SidebarProvider } from \"@/registry/default/ui/sidebar\";\nimport { DocsSidebar } from \"@/components/docs-sidebar\";\nimport { source } from \"@/lib/source\";\n\nexport default function DocsLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <main className=\"flex flex-1 flex-col\">\n      <SidebarProvider className=\"container min-h-min flex-1 items-start px-0 [--sidebar-width:220px] [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--sidebar-width:240px] lg:[--top-spacing:calc(var(--spacing)*4)]\">\n        <DocsSidebar tree={source.pageTree} />\n        <div className=\"h-full w-full\">{children}</div>\n      </SidebarProvider>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/globals.css",
    "content": "@import \"@coss/ui/globals.css\";\n\n@layer base {\n  @supports (font: -apple-system-body) and (-webkit-appearance: none) {\n    [data-wrapper] {\n      @apply min-[1800px]:border-t;\n    }\n  }\n\n  a:active,\n  button:active {\n    @apply opacity-72 md:opacity-100;\n  }\n}\n"
  },
  {
    "path": "apps/ui/app/layout.tsx",
    "content": "import \"./globals.css\";\n\nimport { fontHeading, fontMono, fontSans } from \"@coss/ui/fonts\";\nimport { ThemeProvider } from \"@coss/ui/shared/theme-provider\";\nimport type { Metadata } from \"next\";\nimport {\n  AnchoredToastProvider,\n  ToastProvider,\n} from \"@/registry/default/ui/toast\";\nimport { SiteHeader } from \"@/components/site-header\";\n\nexport const metadata: Metadata = {\n  description:\n    \"coss ui is a collection of accessible, and composable React components. Built on top of Base UI and styled with Tailwind CSS,\",\n  metadataBase: new URL(\"https://coss.com\"),\n  title:\n    \"coss ui - A new, modern UI component library built on top of Base UI. Built for developers and AI.\",\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={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}\n      >\n        <ThemeProvider>\n          <ToastProvider>\n            <AnchoredToastProvider>\n              <div className=\"relative isolate flex min-h-svh flex-col overflow-clip [--header-height:4rem]\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"container pointer-events-none absolute inset-0 z-45 before:absolute before:inset-y-0 before:-left-3 before:w-px before:bg-border/64 after:absolute after:inset-y-0 after:-right-3 after:w-px after:bg-border/64\"\n                />\n                <div\n                  aria-hidden=\"true\"\n                  className=\"container pointer-events-none fixed inset-0 z-45 before:absolute before:top-[calc(var(--header-height)-4.5px)] before:-left-[11.5px] before:z-1 before:-ml-1 before:size-2 before:rounded-[2px] before:border before:border-border before:bg-popover before:bg-clip-padding before:shadow-xs/5 after:absolute after:top-[calc(var(--header-height)-4.5px)] after:-right-[11.5px] after:z-1 after:-mr-1 after:size-2 after:rounded-[2px] after:border after:border-border after:bg-background after:bg-clip-padding after:shadow-xs/5 dark:after:bg-clip-border dark:before:bg-clip-border\"\n                />\n                <SiteHeader />\n                {children}\n              </div>\n            </AnchoredToastProvider>\n          </ToastProvider>\n        </ThemeProvider>\n      </body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/not-found.tsx",
    "content": "import {\n  PageHeader,\n  PageHeaderDescription,\n  PageHeaderHeading,\n} from \"@coss/ui/shared/page-header\";\nimport { RiArrowLeftLine } from \"@remixicon/react\";\nimport type { Metadata } from \"next\";\nimport Link from \"next/link\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport const metadata: Metadata = {\n  description:\n    \"The page you're looking for doesn't exist or may have been moved.\",\n  title: \"Page Not Found\",\n};\n\nexport default function NotFound() {\n  return (\n    <div className=\"container w-full\">\n      <PageHeader>\n        <PageHeaderHeading>Page Not Found</PageHeaderHeading>\n        <PageHeaderDescription>\n          The page you&apos;re looking for doesn&apos;t exist or may have been\n          moved.\n        </PageHeaderDescription>\n        <div className=\"mt-4\">\n          <Button\n            className=\"group\"\n            render={\n              <Link href=\"/\">\n                <RiArrowLeftLine\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5\"\n                />\n                Back to Home\n              </Link>\n            }\n            size=\"lg\"\n          />\n        </div>\n      </PageHeader>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/page.tsx",
    "content": "import {\n  PageHeader,\n  PageHeaderDescription,\n  PageHeaderHeading,\n} from \"@coss/ui/shared/page-header\";\nimport { SiteFooter } from \"@coss/ui/shared/site-footer\";\nimport type { Metadata } from \"next\";\nimport Link from \"next/link\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardFrame,\n  CardFrameDescription,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@/registry/default/ui/card\";\nimport { particles } from \"@/registry/registry-particles\";\nimport { getCategoryThumbnail } from \"@/components/category-thumbnails\";\nimport { categories } from \"@/config/categories\";\nimport { PAGES_NEW } from \"@/lib/docs\";\n\nconst description = \"Built for developers and AI.\";\nconst particleCount = particles.length;\n\nexport const metadata: Metadata = {\n  description,\n  title: \"A new, modern UI component library built on top of Base UI - coss ui\",\n};\n\nexport default function Page() {\n  return (\n    <>\n      <div className=\"container w-full\">\n        <PageHeader className=\"max-w-2xl *:items-start *:text-left\">\n          <PageHeaderHeading>\n            A new, modern UI component library built on top of Base UI.\n          </PageHeaderHeading>\n          <PageHeaderDescription>{description}</PageHeaderDescription>\n          <div className=\"mt-2 flex gap-2\">\n            <Button render={<Link href=\"/docs\" />} size=\"lg\">\n              Get started\n            </Button>\n            <Button\n              render={<Link href=\"/particles\" />}\n              size=\"lg\"\n              variant=\"outline\"\n            >\n              Browse {particleCount} particles\n            </Button>\n          </div>\n        </PageHeader>\n      </div>\n      <div className=\"relative before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64\">\n        <div\n          aria-hidden=\"true\"\n          className=\"container pointer-events-none absolute inset-0 z-50 before:absolute before:top-[-3.5px] before:-left-[11.5px] before:z-1 before:-ml-1 before:size-2 before:rounded-[2px] before:border before:border-border before:bg-popover before:bg-clip-padding before:shadow-xs after:absolute after:top-[-3.5px] after:-right-[11.5px] after:z-1 after:-mr-1 after:size-2 after:rounded-[2px] after:border after:border-border after:bg-background after:bg-clip-padding after:shadow-xs dark:after:bg-clip-border dark:before:bg-clip-border\"\n        />\n        <div className=\"container w-full\">\n          <div className=\"grid gap-6 pt-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 xl:grid-cols-4\">\n            {categories.map((category) => (\n              <CategoryCard\n                description={category.description}\n                key={category.slug}\n                name={category.name}\n                slug={category.slug}\n                thumbnail={getCategoryThumbnail(category.slug)}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n      <SiteFooter />\n    </>\n  );\n}\n\ntype CategoryCardProps = {\n  slug: string;\n  name: string;\n  description?: string;\n  thumbnail?: React.ReactNode;\n};\n\nfunction CategoryCard({\n  slug,\n  name,\n  description,\n  thumbnail,\n}: CategoryCardProps) {\n  const href = `/docs/components/${slug}`;\n  const isNew = PAGES_NEW.includes(href);\n\n  return (\n    <CardFrame className=\"w-full after:pointer-events-none after:absolute after:-inset-[5px] after:-z-1 after:rounded-[calc(var(--radius-xl)+4px)] after:border after:border-border/64\">\n      <CardFrameHeader className=\"static grid grid-rows-[auto_1fr]\">\n        <CardFrameTitle\n          className=\"font-heading text-base\"\n          render={\n            <h2>\n              <Link className=\"before:absolute before:inset-0\" href={href}>\n                {name}\n              </Link>\n            </h2>\n          }\n        />\n        <CardFrameDescription\n          className=\"line-clamp-2 sm:h-[2lh]\"\n          render={<p />}\n        >\n          {description || \"\\u00A0\"}\n        </CardFrameDescription>\n      </CardFrameHeader>\n      <Card className=\"pointer-events-none min-h-55 flex-1 flex-col flex-wrap overflow-x-auto bg-[color-mix(in_srgb,var(--color-card),var(--color-sidebar))] dark:bg-background\">\n        {isNew && (\n          <Badge className=\"absolute end-3 top-3\" variant=\"info\">\n            New\n          </Badge>\n        )}\n        <CardPanel className=\"flex flex-1 items-center justify-center px-8 [--border:--alpha(var(--color-black)/7%)] [--btn-from:--alpha(var(--color-primary)/90%)] [--btn-to:var(--color-primary)] in-[[data-slot=card-frame]:has(a:not(:hover))]:*:translate-y-0.5 *:transition-transform *:duration-200 dark:[--border:--alpha(var(--color-white)/3%)] dark:[--btn-from:var(--color-primary)] dark:[--btn-to:--alpha(var(--color-primary)/90%)]\">\n          {thumbnail}\n        </CardPanel>\n      </Card>\n    </CardFrame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/particles/page.tsx",
    "content": "import {\n  PageHeader,\n  PageHeaderDescription,\n  PageHeaderHeading,\n} from \"@coss/ui/shared/page-header\";\nimport type { Metadata } from \"next\";\nimport { Suspense } from \"react\";\nimport { isValidRegistryCategory } from \"@/registry/registry-categories\";\nimport { particles } from \"@/registry/registry-particles\";\nimport { ParticlesDisplay } from \"./particles-display\";\nimport SearchContainer from \"./search-container\";\n\nconst particleCount = particles.length;\n\nconst description = `Discover ${particleCount} ready-to-use particles, the building blocks of your design system. Filter by category to find the perfect component for your project.`;\n\nexport const metadata: Metadata = {\n  description,\n  title: \"Browse Particles - coss ui\",\n};\n\nasync function ParticlesDisplayServer({\n  searchParams,\n}: {\n  searchParams: Promise<{ tags?: string }>;\n}) {\n  const params = await searchParams;\n  const rawCategories = params.tags?.split(\",\").filter(Boolean) || [];\n\n  // Separate valid and invalid categories\n  const validCategories = rawCategories.filter((category) =>\n    isValidRegistryCategory(category),\n  );\n  const invalidCategories = rawCategories.filter(\n    (category) => !isValidRegistryCategory(category),\n  );\n\n  // If there are invalid categories, show \"no components found\" message\n  if (invalidCategories.length > 0) {\n    return (\n      <div className=\"text-center\">\n        <p className=\"text-muted-foreground\">\n          No particles found for the selected filters\n        </p>\n      </div>\n    );\n  }\n\n  // If no valid categories, don't render anything\n  if (validCategories.length === 0) return null;\n\n  return <ParticlesDisplay selectedCategories={validCategories} />;\n}\n\nexport default function Page({\n  searchParams,\n}: {\n  searchParams: Promise<{ tags?: string }>;\n}) {\n  return (\n    <div className=\"container w-full\">\n      <PageHeader className=\"*:pb-8!\">\n        <PageHeaderHeading>Browse Particles</PageHeaderHeading>\n        <PageHeaderDescription className=\"max-w-2xl\">\n          {description}\n        </PageHeaderDescription>\n      </PageHeader>\n      <Suspense>\n        <SearchContainer />\n      </Suspense>\n      <Suspense>\n        <ParticlesDisplayServer searchParams={searchParams} />\n      </Suspense>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/particles/particle-card-container.tsx",
    "content": "import {\n  Card,\n  CardFrame,\n  CardFrameFooter,\n  CardPanel,\n} from \"@/registry/default/ui/card\";\nimport { cn } from \"@/lib/utils\";\n\nexport function ParticleCardContainer({\n  children,\n  className,\n  colSpan,\n  footer,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  colSpan?: number;\n  footer: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative flex min-w-0\",\n        colSpan === 2 && \"lg:col-span-2\",\n        className,\n      )}\n    >\n      <CardFrame className=\"w-full after:pointer-events-none after:absolute after:-inset-[5px] after:-z-1 after:rounded-[calc(var(--radius-xl)+4px)] after:border after:border-border/64 dark:bg-background\">\n        <Card className=\"min-h-50 flex-1 flex-col flex-wrap overflow-x-auto dark:bg-background\">\n          <CardPanel className=\"flex flex-1 items-center justify-center lg:px-8 lg:py-12\">\n            {children}\n          </CardPanel>\n        </Card>\n        <CardFrameFooter className=\"flex items-center gap-3 p-2\">\n          {footer}\n        </CardFrameFooter>\n      </CardFrame>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/particles/particle-card.tsx",
    "content": "import { Icons } from \"@coss/ui/shared/icons\";\nimport { InformationCircleIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { cache } from \"react\";\nimport { Index } from \"@/registry/__index__\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerPopup,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\nimport { ParticleCardContainer } from \"./particle-card-container\";\nimport { CodeBlockCommand } from \"@/components/code-block-command\";\nimport { ComponentSource } from \"@/components/component-source\";\nimport { CopyRegistry } from \"@/components/copy-registry\";\nimport { getRegistryItem } from \"@/lib/registry\";\n\nconst getCachedRegistryItem = cache(async (name: string) => {\n  return await getRegistryItem(name);\n});\n\nfunction ParticleRenderer({ name }: { name: string }) {\n  const item = Index[name];\n  const Component = item?.component;\n\n  if (!Component) {\n    return (\n      <p className=\"text-muted-foreground text-sm\">\n        Component {name} not found\n      </p>\n    );\n  }\n\n  return <Component currentPage={1} totalPages={10} totalResults={100} />;\n}\n\nexport async function ParticleCard({\n  name,\n  className,\n  colSpan,\n}: {\n  name: string;\n  className?: string;\n  colSpan?: number;\n}) {\n  const cossuiUrl = process.env.NEXT_PUBLIC_APP_URL || \"https://coss.com/ui\";\n\n  const particle = await getCachedRegistryItem(name);\n\n  if (!particle) {\n    return null;\n  }\n\n  return (\n    <ParticleCardContainer\n      className={className}\n      colSpan={colSpan}\n      footer={\n        <>\n          <p className=\"flex flex-1 gap-1 truncate text-muted-foreground text-xs\">\n            <HugeiconsIcon\n              className=\"size-3 h-lh shrink-0\"\n              icon={InformationCircleIcon}\n              strokeWidth={2}\n            />\n            <span className=\"truncate\">{particle.description}</span>\n          </p>\n          <div className=\"flex items-center gap-1.5\">\n            {process.env.NODE_ENV === \"development\" && (\n              <Button\n                className=\"text-xs\"\n                disabled\n                size=\"sm\"\n                title=\"Particle name\"\n                variant=\"outline\"\n              >\n                {particle.name}\n              </Button>\n            )}\n            <CopyRegistry\n              value={`${cossuiUrl}/r/${name}.json`}\n              variant=\"outline\"\n            />\n            <Drawer position=\"right\">\n              <DrawerTrigger\n                render={\n                  <Button className=\"text-sm\" size=\"sm\" variant=\"outline\" />\n                }\n              >\n                View code\n              </DrawerTrigger>\n              <DrawerPopup\n                className=\"max-w-4xl\"\n                showBar\n                showCloseButton={false}\n                variant=\"straight\"\n              >\n                <DrawerContent className=\"flex flex-1 flex-col overflow-hidden p-6\">\n                  <div>\n                    <h2 className=\"mb-4 font-heading font-semibold text-xl\">\n                      Installation\n                    </h2>\n                    <figure data-rehype-pretty-code-figure>\n                      <CodeBlockCommand\n                        __bun__={`bunx --bun shadcn@latest add @coss/${name}`}\n                        __npm__={`npx shadcn@latest add @coss/${name}`}\n                        __pnpm__={`pnpm dlx shadcn@latest add @coss/${name}`}\n                        __yarn__={`yarn dlx shadcn@latest add @coss/${name}`}\n                      />\n                    </figure>\n                  </div>\n                  <div className=\"flex h-full flex-1 flex-col overflow-hidden\">\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <h2 className=\"mt-6 mb-4 font-heading font-semibold text-xl\">\n                        Code\n                      </h2>\n                      <Button\n                        render={\n                          <a\n                            href={`https://v0.dev/chat/api/open?url=${encodeURIComponent(`${cossuiUrl}/r/${name}.json`)}`}\n                            rel=\"noopener noreferrer\"\n                            target=\"_blank\"\n                          >\n                            Open in<span className=\"sr-only\">v0</span>\n                            <Icons.v0 className=\"size-5\" />\n                          </a>\n                        }\n                        variant=\"outline\"\n                      />\n                    </div>\n                    <ComponentSource\n                      className=\"flex min-h-0 flex-1 flex-col *:data-rehype-pretty-code-figure:mt-0\"\n                      collapsible={false}\n                      name={name}\n                    />\n                  </div>\n                </DrawerContent>\n              </DrawerPopup>\n            </Drawer>\n          </div>\n        </>\n      }\n    >\n      <div data-particle data-slot=\"preview\">\n        <ParticleRenderer name={name} />\n      </div>\n    </ParticleCardContainer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/particles/particles-display.tsx",
    "content": "import { cache, Suspense } from \"react\";\nimport { Index } from \"@/registry/__index__\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport type { RegistryCategory } from \"@/registry/registry-categories\";\nimport { ParticleCard } from \"./particle-card\";\nimport { ParticleCardContainer } from \"./particle-card-container\";\n\ntype Particle = {\n  name: string;\n  categories?: RegistryCategory[];\n  registryDependencies?: string[];\n  meta?: { className?: string; colSpan?: number };\n};\n\nfunction calculateRelevanceWeight(\n  particle: Particle,\n  searchTerms: RegistryCategory[],\n): number {\n  let weight = 0;\n\n  for (const term of searchTerms) {\n    const normalizedTerm = term.replace(/\\s+/g, \"-\");\n\n    if (particle.name.startsWith(`p-${normalizedTerm}-`)) {\n      weight += 30;\n    }\n\n    const deps = particle.registryDependencies ?? [];\n    if (deps.some((dep) => dep === `@coss/${normalizedTerm}`)) {\n      weight += 20;\n    }\n\n    const categories = particle.categories ?? [];\n    if (categories[0] === term) {\n      weight += 10;\n    }\n  }\n\n  return weight;\n}\n\nfunction ParticleCardSkeleton({ className }: { className?: string }) {\n  return (\n    <ParticleCardContainer\n      className={className}\n      footer={\n        <>\n          <div className=\"flex flex-1 gap-1\">\n            <Skeleton className=\"size-4 shrink-0\" />\n            <Skeleton className=\"h-4 w-32\" />\n          </div>\n          <div className=\"flex items-center gap-1.5\">\n            <Skeleton className=\"size-7\" />\n            <Skeleton className=\"h-7 w-20\" />\n          </div>\n        </>\n      }\n    >\n      <Skeleton className=\"h-7 w-64\" />\n    </ParticleCardContainer>\n  );\n}\n\n// Cache the particles array to avoid recomputing on every render\nconst getParticles = cache(() => {\n  return Object.values(Index).filter(\n    (item) => item.type === \"registry:block\",\n  ) as Particle[];\n});\n\nexport async function ParticlesDisplay({\n  selectedCategories,\n}: {\n  selectedCategories: RegistryCategory[];\n}) {\n  const particles = getParticles();\n\n  const filteredParticles = particles\n    .filter((particle) => {\n      const categories = particle.categories ?? [];\n      return selectedCategories.every((value) => categories.includes(value));\n    })\n    .sort((a, b) => {\n      const weightA = calculateRelevanceWeight(a, selectedCategories);\n      const weightB = calculateRelevanceWeight(b, selectedCategories);\n      return weightB - weightA;\n    });\n\n  if (filteredParticles.length === 0) {\n    return (\n      <div className=\"text-center\">\n        <p className=\"text-muted-foreground\">\n          No particles found for the selected filters\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"grid flex-1 items-stretch gap-9 pb-12 lg:grid-cols-2 lg:gap-6 xl:gap-9\">\n      {filteredParticles.map((particle) => {\n        const className = particle.meta?.className as string | undefined;\n        const colSpan = particle.meta?.colSpan as number | undefined;\n        return (\n          <Suspense\n            fallback={<ParticleCardSkeleton className={className} />}\n            key={particle.name}\n          >\n            <ParticleCard\n              className={className}\n              colSpan={colSpan}\n              name={particle.name}\n            />\n          </Suspense>\n        );\n      })}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/particles/search-container.tsx",
    "content": "\"use client\";\n\nimport { usePathname, useRouter, useSearchParams } from \"next/navigation\";\nimport { useCallback, useMemo, useTransition } from \"react\";\nimport { Index } from \"@/registry/__index__\";\nimport { getCategorySortOrder } from \"@/registry/registry-categories\";\nimport SearchField from \"./search-field\";\n\nconst particles = Object.values(Index).filter(\n  (item) => item.type === \"registry:block\",\n);\n\nconst uniqueCategories = Array.from(\n  new Set(particles.flatMap((particle) => particle.categories || [])),\n).sort((a, b) => getCategorySortOrder(a) - getCategorySortOrder(b));\n\nconst searchItems = uniqueCategories.map((category) => ({\n  label: category\n    .split(\" \")\n    .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\" \"),\n  value: category,\n}));\n\nexport default function SearchContainer() {\n  const router = useRouter();\n  const pathname = usePathname();\n  const searchParams = useSearchParams();\n  const [, startTransition] = useTransition();\n\n  const selectedItems = useMemo(() => {\n    const tags = searchParams?.get(\"tags\")?.split(\",\").filter(Boolean) || [];\n    return tags\n      .map((tag) => searchItems.find((item) => item.value === tag))\n      .filter((item): item is { label: string; value: string } => !!item);\n  }, [searchParams]);\n\n  const updateSelectedItems = useCallback(\n    (items: { label: string; value: string }[]) => {\n      startTransition(() => {\n        const tags =\n          items.length > 0 ? items.map((item) => item.value).join(\",\") : \"\";\n        const newUrl = tags\n          ? `${pathname}?tags=${encodeURIComponent(tags)}`\n          : pathname;\n        router.push(newUrl, { scroll: false });\n      });\n    },\n    [router, pathname],\n  );\n\n  return (\n    <div className=\"mb-8 md:mb-12 lg:mb-16\">\n      <SearchField\n        items={searchItems}\n        onItemsChange={updateSelectedItems}\n        selectedItems={selectedItems}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/particles/search-field.tsx",
    "content": "\"use client\";\n\nimport { LabelIcon, Search01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport * as React from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { Index } from \"@/registry/__index__\";\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxSeparator,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { getCategorySortOrder } from \"@/registry/registry-categories\";\n\ninterface SearchFieldProps {\n  selectedItems: { label: string; value: string }[];\n  onItemsChange: (items: { label: string; value: string }[]) => void;\n  items: { label: string; value: string }[];\n}\n\ninterface RegistryItem {\n  type?: string;\n  categories?: string[];\n}\n\n// Get all particles (registry:block type) from registry\nconst particles = Object.values(Index).filter(\n  (item: RegistryItem) => item.type === \"registry:block\",\n);\n\nexport default function SearchField({\n  selectedItems,\n  onItemsChange,\n  items,\n}: SearchFieldProps) {\n  const [open, setOpen] = useState(selectedItems.length === 0);\n\n  // Keep popup open when no selection is made\n  useEffect(() => {\n    if (selectedItems.length === 0) {\n      setOpen(true);\n    }\n  }, [selectedItems.length]);\n\n  const groupedItems = useMemo(() => {\n    const selectedValues = selectedItems.map((item) => item.value);\n\n    // Calculate which items would result in particles when combined with selected items\n    const availableItems = items.filter((item) => {\n      // Skip already selected items\n      if (selectedValues.includes(item.value)) {\n        return true;\n      }\n\n      // Check if adding this category would result in any particles\n      const testValues = [...selectedValues, item.value];\n      const hasMatches = particles.some((particle: RegistryItem) => {\n        const categories = particle.categories ?? [];\n        return testValues.every((value) => categories.includes(value));\n      });\n\n      return hasMatches;\n    });\n\n    // Separate items into enabled and disabled\n    const enabled: typeof items = [];\n    const disabled: typeof items = [];\n\n    items.forEach((item) => {\n      const isSelected = selectedValues.includes(item.value);\n      const isAvailable = availableItems.some(\n        (available) => available.value === item.value,\n      );\n\n      if (isSelected || isAvailable) {\n        enabled.push(item);\n      } else {\n        disabled.push(item);\n      }\n    });\n\n    // Sort enabled items: selected first, then available, then by custom order\n    const sortedEnabled = [...enabled].sort((a, b) => {\n      const aSelected = selectedValues.includes(a.value);\n      const bSelected = selectedValues.includes(b.value);\n\n      // Selected items first\n      if (aSelected && !bSelected) return -1;\n      if (!aSelected && bSelected) return 1;\n\n      // Then sort by custom category order\n      const aOrder = getCategorySortOrder(a.value);\n      const bOrder = getCategorySortOrder(b.value);\n      return aOrder - bOrder;\n    });\n\n    // Sort disabled items by custom category order\n    const sortedDisabled = [...disabled].sort((a, b) => {\n      const aOrder = getCategorySortOrder(a.value);\n      const bOrder = getCategorySortOrder(b.value);\n      return aOrder - bOrder;\n    });\n\n    // Return groups similar to the grouped example\n    const groups: Array<{ type: \"enabled\" | \"disabled\"; items: typeof items }> =\n      [];\n\n    if (sortedEnabled.length > 0) {\n      groups.push({ items: sortedEnabled, type: \"enabled\" });\n    }\n\n    if (sortedDisabled.length > 0) {\n      groups.push({ items: sortedDisabled, type: \"disabled\" });\n    }\n\n    return groups;\n  }, [selectedItems, items]);\n\n  const handleValueChange = (newItems: { label: string; value: string }[]) => {\n    onItemsChange(newItems);\n    setOpen(false);\n  };\n\n  return (\n    <div className=\"mx-auto max-w-2xl\">\n      <Combobox\n        aria-label=\"Filter particles\"\n        autoHighlight\n        items={groupedItems}\n        multiple\n        onOpenChange={setOpen}\n        onValueChange={handleValueChange}\n        open={open}\n        value={selectedItems}\n      >\n        <ComboboxChips\n          className=\"rounded-xl p-[calc(--spacing(2)-1px)] before:rounded-xl **:data-[slot=combobox-start-addon]:[&_svg]:-me-0.5\"\n          startAddon={\n            <HugeiconsIcon\n              className=\"size-5.5 sm:size-5\"\n              icon={Search01Icon}\n              strokeWidth={2}\n            />\n          }\n        >\n          <ComboboxValue>\n            {(value: { value: string; label: string }[]) => (\n              <>\n                {value?.map((item) => (\n                  <ComboboxChip aria-label={item.label} key={item.value}>\n                    <div className=\"flex items-center gap-1.5\">\n                      <HugeiconsIcon\n                        className=\"opacity-80\"\n                        icon={LabelIcon}\n                        strokeWidth={2}\n                      />\n                      <span>{item.label}</span>\n                    </div>\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput\n                  aria-label=\"Search components\"\n                  autoFocus\n                  size=\"lg\"\n                />\n              </>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxPopup>\n          <ComboboxEmpty>No filters found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group: (typeof groupedItems)[number]) => (\n              <React.Fragment key={group.type}>\n                {group.type === \"disabled\" && (\n                  <ComboboxSeparator className=\"my-2\" />\n                )}\n                <ComboboxGroup items={group.items}>\n                  <ComboboxGroupLabel>\n                    {group.type === \"enabled\"\n                      ? \"Filter particles\"\n                      : \"No matches\"}\n                  </ComboboxGroupLabel>\n                  <ComboboxCollection>\n                    {(item: (typeof group.items)[number]) => (\n                      <ComboboxItem\n                        disabled={group.type === \"disabled\"}\n                        key={item.value}\n                        value={item}\n                      >\n                        <div className=\"flex items-center gap-2\">\n                          <HugeiconsIcon\n                            className=\"opacity-80\"\n                            icon={LabelIcon}\n                            strokeWidth={2}\n                          />\n                          <span>{item.label}</span>\n                        </div>\n                      </ComboboxItem>\n                    )}\n                  </ComboboxCollection>\n                </ComboboxGroup>\n              </React.Fragment>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/app/sitemap.ts",
    "content": "import type { MetadataRoute } from \"next\";\nimport { source } from \"@/lib/source\";\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n  const pages = source.getPages();\n\n  return [\n    { url: \"https://coss.com/ui\" },\n    { url: \"https://coss.com/ui/particles\" },\n    ...pages.map((page) => ({\n      url: `https://coss.com/ui${page.url}`,\n    })),\n  ];\n}\n"
  },
  {
    "path": "apps/ui/components/category-thumbnails.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport type { LucideIcon } from \"lucide-react\";\nimport {\n  AlertCircleIcon,\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  EllipsisIcon,\n  InfoIcon,\n  MinusIcon,\n  PlusIcon,\n  SearchIcon,\n  TextCursorIcon,\n  UserRoundIcon,\n  XIcon,\n} from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\n// ============================================================================\n// Base Components\n// ============================================================================\n\nfunction Icon({\n  icon: IconComponent,\n  className,\n}: {\n  icon: LucideIcon;\n  className?: string;\n}) {\n  return (\n    <IconComponent\n      className={cn(\"size-4 text-muted-foreground/88\", className)}\n    />\n  );\n}\n\nfunction Text({\n  className,\n  variant = \"main\",\n}: {\n  className?: string;\n  variant?: \"main\" | \"secondary\";\n}) {\n  const bgColor =\n    variant === \"main\" ? \"bg-muted-foreground/40\" : \"bg-muted-foreground/20\";\n  return <div className={cn(\"h-1.5 rounded-full\", bgColor, className)} />;\n}\n\nfunction Button({\n  variant = \"secondary\",\n  className,\n}: {\n  variant?: \"primary\" | \"secondary\";\n  className?: string;\n}) {\n  const height = variant === \"primary\" ? \"h-4\" : \"h-1.5\";\n  const bgColor =\n    variant === \"primary\"\n      ? \"bg-linear-to-b from-(--btn-from) to-(--btn-to)\"\n      : \"bg-muted-foreground/20\";\n  return <div className={cn(height, \"w-7 rounded-sm\", bgColor, className)} />;\n}\n\n// Standalone Card component for thumbnails - independent from registry Card\nfunction Card({\n  children,\n  className,\n  withGradient = true,\n}: {\n  children: ReactNode;\n  className?: string;\n  withGradient?: boolean;\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative flex w-full max-w-72 flex-col rounded-2xl border not-dark:bg-clip-padding text-card-foreground shadow-md/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_-1px_--theme(--color-white/6%),0_1px_--theme(--color-black/6%)]\",\n        withGradient\n          ? \"bg-linear-to-b from-[color-mix(in_srgb,var(--card)_96%,var(--color-white))] to-[color-mix(in_srgb,var(--card)_99%,var(--color-black))] dark:to-[color-mix(in_srgb,var(--card)_98%,var(--color-white))]\"\n          : \"bg-card/99 dark:bg-card\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n// Standalone CardPanel component for thumbnails - independent from registry CardPanel\nfunction CardPanel({\n  children,\n  className,\n  ...props\n}: {\n  children?: ReactNode;\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(\"flex-1 p-6\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// Helper Components\n// ============================================================================\n\nfunction CheckboxItem({\n  checked = false,\n  className,\n}: {\n  checked?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <div\n        className={cn(\n          \"size-4 shrink-0 rounded\",\n          checked\n            ? \"bg-linear-to-b from-(--btn-from) to-(--btn-to)\"\n            : \"bg-muted-foreground/20\",\n        )}\n      />\n      <Text className=\"w-full\" variant=\"secondary\" />\n    </div>\n  );\n}\n\nfunction RadioItem({\n  checked = false,\n  className,\n}: {\n  checked?: boolean;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <div\n        className={cn(\n          \"size-4 shrink-0 rounded-full\",\n          checked\n            ? \"bg-linear-to-b from-(--btn-from) to-(--btn-to)\"\n            : \"bg-muted-foreground/20\",\n        )}\n      />\n      <Text className=\"w-full\" variant=\"secondary\" />\n    </div>\n  );\n}\n\nfunction FormField({\n  labelWidth = \"w-16\",\n  showError = false,\n}: {\n  labelWidth?: string;\n  showError?: boolean;\n}) {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Text className={labelWidth} />\n      <Card className=\"[--radius-2xl:10px]\" withGradient={false}>\n        <CardPanel className=\"py-3.5\" />\n      </Card>\n      {showError && <Text className=\"w-[80%]\" variant=\"secondary\" />}\n    </div>\n  );\n}\n\nfunction TableRow({ showCheckbox = true }: { showCheckbox?: boolean }) {\n  return (\n    <div className=\"flex items-center gap-2 p-3\">\n      {showCheckbox && <Text className=\"size-2.5 rounded-xs\" />}\n      <Text className=\"flex-1\" />\n      <Text className=\"flex-1\" variant=\"secondary\" />\n      <Text className=\"flex-1\" variant=\"secondary\" />\n      <Text className=\"flex-1\" variant=\"secondary\" />\n      <Text className=\"flex-1\" variant=\"secondary\" />\n    </div>\n  );\n}\n\nfunction CommandItem() {\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      <Text className=\"w-[65%]\" variant=\"secondary\" />\n      <Text className=\"w-4\" variant=\"secondary\" />\n    </div>\n  );\n}\n\n// ============================================================================\n// Thumbnail Implementations\n// ============================================================================\n\n// Accordion\nexport const accordionThumbnail = (\n  <Card className=\"max-w-50\">\n    <CardPanel className=\"divide-y divide-border p-0\">\n      <div className=\"p-3\">\n        <div className=\"flex items-center gap-2\">\n          <Icon icon={ChevronDownIcon} />\n          <Text className=\"w-[60%]\" />\n        </div>\n      </div>\n      <div className=\"p-3\">\n        <div className=\"flex items-center gap-2\">\n          <Icon className=\"rotate-180\" icon={ChevronDownIcon} />\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <Text className=\"w-[50%]\" variant=\"main\" />\n            <Text className=\"w-[90%]\" variant=\"secondary\" />\n          </div>\n        </div>\n      </div>\n      <div className=\"p-3\">\n        <div className=\"flex items-center gap-2\">\n          <Icon icon={ChevronDownIcon} />\n          <Text className=\"w-[60%]\" />\n        </div>\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Alert\nexport const alertThumbnail = (\n  <Card>\n    <CardPanel className=\"flex items-center gap-2 p-3\">\n      <Icon icon={AlertCircleIcon} />\n      <Text className=\"w-[70%]\" variant=\"secondary\" />\n    </CardPanel>\n  </Card>\n);\n\n// Alert Dialog\nexport const alertDialogThumbnail = (\n  <Card className=\"max-w-50\">\n    <CardPanel className=\"flex flex-col gap-5 p-4\">\n      <div className=\"flex flex-col gap-2\">\n        <Text className=\"w-[50%]\" variant=\"main\" />\n        <Text className=\"w-[90%]\" variant=\"secondary\" />\n      </div>\n      <div className=\"flex items-center justify-end gap-2\">\n        <Button variant=\"secondary\" />\n        <Button variant=\"primary\" />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Autocomplete\nexport const autocompleteThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col gap-2\">\n    <Card className=\"[--radius-2xl:12px]\" withGradient={false}>\n      <CardPanel className=\"flex items-center gap-2 px-4 py-2\">\n        <Text className=\"w-[40%]\" />\n        <Icon icon={TextCursorIcon} />\n      </CardPanel>\n    </Card>\n    <Card className=\"[--radius-2xl:10px]\">\n      <CardPanel className=\"flex flex-col gap-4 p-4\">\n        <Text variant=\"secondary\" />\n        <Text variant=\"secondary\" />\n        <Text variant=\"secondary\" />\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Avatar\nexport const avatarThumbnail = (\n  <Card className=\"size-12 [--radius-2xl:9999px]\">\n    <CardPanel className=\"flex items-center justify-center p-0\">\n      <div className=\"flex size-full items-center justify-center rounded-full\">\n        <Icon icon={UserRoundIcon} />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Badge\nexport const badgeThumbnail = (\n  <Card className=\"max-w-24 [--radius-2xl:9999px]\">\n    <CardPanel className=\"flex items-center gap-2 px-2.5 py-2\">\n      <div className=\"size-2 rounded-full bg-muted-foreground/88\" />\n      <Text className=\"flex-1\" />\n    </CardPanel>\n  </Card>\n);\n\n// Breadcrumb\nexport const breadcrumbThumbnail = (\n  <Card>\n    <CardPanel className=\"flex items-center gap-1 p-3\">\n      <Text className=\"flex-1\" />\n      <Icon icon={ChevronRightIcon} />\n      <Text className=\"flex-1\" variant=\"secondary\" />\n      <Icon icon={ChevronRightIcon} />\n      <Text className=\"flex-1\" variant=\"secondary\" />\n    </CardPanel>\n  </Card>\n);\n\n// Button\nexport const buttonThumbnail = (\n  <Card\n    className=\"max-w-24 border-none bg-linear-to-b from-(--btn-from) to-(--btn-to) [--radius-2xl:14px]\"\n    withGradient={false}\n  >\n    <CardPanel className=\"px-6 py-4\">\n      <Text className=\"bg-primary-foreground/40\" />\n    </CardPanel>\n  </Card>\n);\n\n// Calendar\nexport const calendarThumbnail = (\n  <Card className=\"max-w-36 [--radius-2xl:14px]\">\n    <CardPanel className=\"flex flex-col gap-4 p-4\">\n      <div className=\"flex items-center gap-2\">\n        <Icon icon={ChevronLeftIcon} />\n        <Text className=\"w-[60%]\" variant=\"secondary\" />\n        <Icon icon={ChevronRightIcon} />\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Text className=\"flex-1\" variant=\"secondary\" />\n        <Text className=\"flex-1\" variant=\"secondary\" />\n        <Text className=\"flex-1\" variant=\"main\" />\n        <Text className=\"flex-1 bg-transparent\" variant=\"main\" />\n        <Text className=\"flex-1\" variant=\"main\" />\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Text className=\"flex-1\" variant=\"main\" />\n        <Text className=\"flex-1 bg-transparent\" variant=\"main\" />\n        <Text className=\"flex-1\" variant=\"main\" />\n        <Text className=\"flex-1\" variant=\"main\" />\n        <Text className=\"flex-1\" variant=\"main\" />\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Text className=\"flex-1 bg-transparent\" variant=\"main\" />\n        <Text className=\"flex-1\" variant=\"main\" />\n        <Text className=\"flex-1 bg-primary\" variant=\"main\" />\n        <Text className=\"flex-1\" variant=\"main\" />\n        <Text className=\"flex-1 bg-transparent\" variant=\"main\" />\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <Text className=\"flex-1\" variant=\"main\" />\n        <Text className=\"flex-1\" variant=\"main\" />\n        <Text className=\"flex-1 bg-transparent\" variant=\"main\" />\n        <Text className=\"flex-1\" variant=\"secondary\" />\n        <Text className=\"flex-1\" variant=\"secondary\" />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Card\nexport const cardThumbnail = (\n  <Card className=\"max-w-36 [--radius-2xl:14px]\">\n    <CardPanel className=\"flex flex-col gap-4 p-4\">\n      <div className=\"flex flex-col gap-2\">\n        <Text className=\"w-[60%]\" variant=\"main\" />\n        <Text className=\"w-[90%]\" variant=\"secondary\" />\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"h-4 rounded-sm bg-muted-foreground/8\" />\n        <div className=\"h-4 rounded-sm bg-muted-foreground/8\" />\n        <Button className=\"w-full rounded-sm\" variant=\"primary\" />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Checkbox\nexport const checkboxThumbnail = (\n  <div className=\"flex max-w-28 flex-1 flex-col gap-3\">\n    <CheckboxItem />\n    <CheckboxItem checked />\n  </div>\n);\n\n// Checkbox Group\nexport const checkboxGroupThumbnail = (\n  <div className=\"flex max-w-28 flex-1 flex-col gap-3\">\n    <CheckboxItem checked />\n    <CheckboxItem className=\"ps-4\" />\n    <CheckboxItem checked className=\"ps-4\" />\n    <CheckboxItem />\n  </div>\n);\n\n// Collapsible\nexport const collapsibleThumbnail = (\n  <Card>\n    <CardPanel className=\"divide-y divide-border p-0\">\n      <div className=\"flex items-center justify-between px-4 py-3\">\n        <Text className=\"w-[60%]\" />\n        <Icon icon={ChevronDownIcon} />\n      </div>\n      <div className=\"flex flex-col gap-2 p-4\">\n        <Text className=\"w-[80%]\" variant=\"secondary\" />\n        <Text className=\"w-[70%]\" variant=\"secondary\" />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Combobox\nexport const comboboxThumbnail = (\n  <Card className=\"[--radius-2xl:14px]\" withGradient={false}>\n    <CardPanel className=\"flex items-center gap-2 px-3 py-[calc(--spacing(2.5)-1px)]\">\n      <div className=\"flex h-5 items-center gap-1 rounded-sm bg-muted-foreground/8 py-0.5 ps-2 pe-1\">\n        <Text className=\"w-6\" />\n        <Icon icon={XIcon} />\n      </div>\n      <div className=\"flex h-5 items-center gap-1 rounded-sm bg-muted-foreground/8 py-0.5 ps-2 pe-1\">\n        <Text className=\"w-6\" />\n        <Icon icon={XIcon} />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Command\nexport const commandThumbnail = (\n  <Card className=\"max-w-50\">\n    <CardPanel className=\"divide-y divide-border p-0\">\n      <div className=\"flex items-center gap-2 px-4 py-3\">\n        <Icon icon={SearchIcon} />\n        <Text className=\"w-[40%]\" />\n      </div>\n      <div className=\"flex flex-col gap-4 p-4\">\n        <CommandItem />\n        <CommandItem />\n        <CommandItem />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Date Picker\nexport const datePickerThumbnail = (\n  <Card className=\"[--radius-2xl:14px]\" withGradient={false}>\n    <CardPanel className=\"flex items-center gap-2 p-3\">\n      <Icon icon={CalendarIcon} />\n      <Text className=\"w-[60%]\" />\n    </CardPanel>\n  </Card>\n);\n\n// Drawer\nexport const drawerThumbnail = (\n  <div className=\"flex h-full w-full flex-1 flex-col justify-end gap-2\">\n    <div className=\"flex-1 rounded-xl border border-input border-dashed\" />\n    <Card className=\"max-w-none shrink-0 [--radius-2xl:14px]\">\n      <CardPanel className=\"pt-1 pb-12\">\n        <div className=\"flex justify-center py-2\">\n          <div className=\"h-1 w-12 rounded-full bg-muted-foreground/30\" />\n        </div>\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Dialog\nexport const dialogThumbnail = (\n  <Card className=\"max-w-36 [--radius-2xl:14px]\">\n    <CardPanel className=\"flex flex-col gap-4 p-4\">\n      <div className=\"flex flex-col gap-2\">\n        <Text className=\"w-[60%]\" variant=\"main\" />\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"h-4 rounded-sm bg-muted-foreground/8\" />\n        <div className=\"h-4 rounded-sm bg-muted-foreground/8\" />\n      </div>\n      <div className=\"flex items-center justify-end gap-2\">\n        <Button variant=\"secondary\" />\n        <Button variant=\"primary\" />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Empty\nexport const emptyThumbnail = (\n  <Card className=\"border-input border-dashed bg-none shadow-none before:hidden\">\n    <CardPanel className=\"flex flex-col items-center gap-2\">\n      <div className=\"size-8 rounded-full bg-muted-foreground/20\" />\n      <Text className=\"w-[60%]\" />\n      <Text className=\"w-[80%]\" variant=\"secondary\" />\n    </CardPanel>\n  </Card>\n);\n\n// Field\nexport const fieldThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col gap-3\">\n    <FormField showError />\n  </div>\n);\n\n// Fieldset\nexport const fieldsetThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col gap-4\">\n    <FormField />\n    <FormField />\n  </div>\n);\n\n// Form\nexport const formThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col gap-4\">\n    <FormField />\n    <Card\n      className=\"border-none bg-linear-to-b from-(--btn-from) to-(--btn-to) [--radius-2xl:10px]\"\n      withGradient={false}\n    >\n      <CardPanel className=\"py-3.5\" />\n    </Card>\n  </div>\n);\n\n// Frame\nexport const frameThumbnail = (\n  <div className=\"flex-1 rounded-[calc(var(--radius-2xl)+2px)] bg-muted/72 p-1\">\n    <div className=\"flex flex-col gap-2 p-4\">\n      <Text className=\"w-[70%]\" />\n    </div>\n    <Card className=\"max-w-none\">\n      <CardPanel className=\"p-5\">\n        <div className=\"flex flex-col gap-2\">\n          <Text className=\"w-[70%]\" />\n          <Text className=\"w-[90%]\" variant=\"secondary\" />\n        </div>\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Group\nexport const groupThumbnail = (\n  <Card className=\"max-w-48 flex-row divide-x [--radius-2xl:14px]\">\n    <CardPanel className=\"px-6 py-4\">\n      <Text />\n    </CardPanel>\n    <CardPanel className=\"px-6 py-4\">\n      <Text />\n    </CardPanel>\n  </Card>\n);\n\n// Input\nexport const inputThumbnail = (\n  <Card className=\"[--radius-2xl:14px]\" withGradient={false}>\n    <CardPanel className=\"px-6 py-4\">\n      <Text className=\"w-[60%]\" />\n    </CardPanel>\n  </Card>\n);\n\n// Input Group\nexport const inputGroupThumbnail = (\n  <Card className=\"[--radius-2xl:14px]\" withGradient={false}>\n    <CardPanel className=\"flex gap-2 p-0\">\n      <div className=\"flex flex-1 items-center gap-2 py-2.5 ps-4\">\n        <Icon icon={SearchIcon} />\n        <Text className=\"w-[60%]\" />\n      </div>\n      <div className=\"flex items-center py-2.5 pe-4\">\n        <div className=\"size-4 shrink-0 rounded bg-muted-foreground/20\" />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Input OTP\nexport const inputOtpThumbnail = (\n  <div className=\"flex max-w-50 flex-1 items-center gap-2\">\n    <Card className=\"size-10 [--radius-2xl:12px]\" withGradient={false}>\n      <CardPanel className=\"flex items-center justify-center p-0\">\n        <Text className=\"size-1.5\" />\n      </CardPanel>\n    </Card>\n    <Card className=\"size-10 [--radius-2xl:12px]\" withGradient={false}>\n      <CardPanel className=\"flex items-center justify-center p-0\">\n        <Text className=\"size-1.5\" />\n      </CardPanel>\n    </Card>\n    <Card className=\"size-10 [--radius-2xl:12px]\" withGradient={false}>\n      <CardPanel className=\"flex items-center justify-center p-0\">\n        <Text className=\"size-1.5\" />\n      </CardPanel>\n    </Card>\n    <Card className=\"size-10 [--radius-2xl:12px]\" withGradient={false}>\n      <CardPanel className=\"flex items-center justify-center p-0\">\n        <Icon icon={TextCursorIcon} />\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Kbd\nexport const kbdThumbnail = (\n  <div className=\"flex items-center justify-center gap-2\">\n    <Card className=\"size-10 [--radius-2xl:10px]\">\n      <CardPanel className=\"flex items-center justify-center p-0 text-muted-foreground/88 leading-none\">\n        ⌘\n      </CardPanel>\n    </Card>\n    <Card className=\"size-10 [--radius-2xl:10px]\">\n      <CardPanel className=\"flex items-center justify-center p-0 text-muted-foreground/88 leading-none\">\n        K\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Label\nexport const labelThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col gap-3\">\n    <Text className=\"w-16 bg-primary\" />\n    <Card className=\"[--radius-2xl:10px]\" withGradient={false}>\n      <CardPanel className=\"py-3.5\" />\n    </Card>\n  </div>\n);\n\n// Menu\nexport const menuThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col items-end gap-2\">\n    <Card className=\"w-fit [--radius-2xl:12px]\">\n      <CardPanel className=\"flex items-center gap-2 p-2\">\n        <Icon icon={EllipsisIcon} />\n      </CardPanel>\n    </Card>\n    <Card className=\"[--radius-2xl:10px]\">\n      <CardPanel className=\"flex flex-col gap-4 p-4\">\n        <div className=\"me-6\">\n          <Text className=\"w-full\" variant=\"secondary\" />\n        </div>\n        <div className=\"flex items-center gap-4\">\n          <div className=\"flex-1\">\n            <Text variant=\"secondary\" />\n          </div>\n          <Icon className=\"-m-1\" icon={ChevronRightIcon} />\n        </div>\n        <div className=\"me-6\">\n          <Text className=\"w-full\" variant=\"secondary\" />\n        </div>\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Meter\nexport const meterThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col gap-2\">\n    <div className=\"flex items-center justify-between\">\n      <Text className=\"w-[50%]\" />\n      <Text className=\"w-8\" />\n    </div>\n    <div className=\"h-2 w-full rounded-full bg-muted-foreground/20\">\n      <div className=\"h-2 w-[65%] rounded-s-full bg-linear-to-b from-(--btn-from) to-(--btn-to)\" />\n    </div>\n  </div>\n);\n\n// Number Field\nexport const numberFieldThumbnail = (\n  <Card className=\"[--radius-2xl:14px]\">\n    <CardPanel className=\"flex items-center gap-2 px-4 py-2.5\">\n      <Icon className=\"shrink-0\" icon={MinusIcon} />\n      <div className=\"flex flex-1 justify-center\">\n        <Text className=\"w-12\" />\n      </div>\n      <Icon className=\"shrink-0\" icon={PlusIcon} />\n    </CardPanel>\n  </Card>\n);\n\n// Pagination\nexport const paginationThumbnail = (\n  <div className=\"flex flex-1 items-center gap-4\">\n    <Card className=\"w-fit [--radius-2xl:12px]\">\n      <CardPanel className=\"flex items-center gap-2 p-2\">\n        <Icon icon={ChevronLeftIcon} />\n      </CardPanel>\n    </Card>\n    <div className=\"flex flex-1 gap-2\">\n      <Text className=\"flex-1\" variant=\"secondary\" />\n      <Text className=\"flex-1\" variant=\"secondary\" />\n      <Text className=\"flex-1\" variant=\"secondary\" />\n    </div>\n    <Card className=\"w-fit [--radius-2xl:12px]\">\n      <CardPanel className=\"flex items-center gap-2 p-2\">\n        <Icon icon={ChevronRightIcon} />\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Popover\nexport const popoverThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col items-center gap-2\">\n    <Card className=\"w-fit [--radius-2xl:12px]\">\n      <CardPanel className=\"flex items-center gap-2 px-4 py-3\">\n        <Text className=\"w-12\" variant=\"main\" />\n      </CardPanel>\n    </Card>\n    <Card className=\"[--radius-2xl:10px]\">\n      <CardPanel className=\"flex flex-col gap-3 p-4\">\n        <Text className=\"w-[70%]\" variant=\"main\" />\n        <div className=\"flex flex-col gap-1.5\">\n          <Text className=\"w-[80%]\" variant=\"secondary\" />\n          <Text className=\"w-[60%]\" variant=\"secondary\" />\n        </div>\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Preview Card\nexport const previewCardThumbnail = (\n  <Card className=\"max-w-50\">\n    <CardPanel className=\"flex items-center gap-3 p-4\">\n      <div className=\"size-9 shrink-0 rounded-full bg-muted-foreground/20\" />\n      <div className=\"flex flex-1 flex-col gap-2\">\n        <Text className=\"w-[70%]\" variant=\"main\" />\n        <Text variant=\"secondary\" />\n        <Text className=\"w-[90%]\" variant=\"secondary\" />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Progress\nexport const progressThumbnail = (\n  <div className=\"flex max-w-50 flex-1 flex-col gap-2\">\n    <div className=\"h-2 w-full rounded-full bg-muted-foreground/20\">\n      <div className=\"h-2 w-[45%] rounded-s-full bg-linear-to-b from-(--btn-from) to-(--btn-to)\" />\n    </div>\n  </div>\n);\n\n// Radio Group\nexport const radioGroupThumbnail = (\n  <div className=\"flex max-w-28 flex-1 flex-col gap-3\">\n    <RadioItem />\n    <RadioItem checked />\n  </div>\n);\n\n// Scroll Area\nexport const scrollAreaThumbnail = (\n  <Card className=\"max-w-36 [--radius-2xl:14px]\">\n    <CardPanel className=\"relative p-0\">\n      <div className=\"flex flex-col gap-2 p-3\">\n        <Text className=\"w-[80%]\" variant=\"secondary\" />\n        <Text className=\"w-[90%]\" variant=\"secondary\" />\n        <Text className=\"w-[70%]\" variant=\"secondary\" />\n        <Text className=\"w-[85%]\" variant=\"secondary\" />\n        <Text className=\"w-[90%]\" variant=\"secondary\" />\n        <Text className=\"w-[80%]\" variant=\"secondary\" />\n      </div>\n      <div className=\"absolute top-2 right-1 h-8 w-1 rounded-full bg-muted-foreground/40\" />\n    </CardPanel>\n  </Card>\n);\n\n// Select\nexport const selectThumbnail = (\n  <Card className=\"[--radius-2xl:14px]\" withGradient={false}>\n    <CardPanel className=\"flex gap-2 p-0\">\n      <div className=\"flex flex-1 items-center justify-between gap-2 py-2.5 ps-4 pe-2.5\">\n        <Text className=\"w-[60%]\" />\n        <Icon icon={ChevronDownIcon} />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Separator\nexport const separatorThumbnail = (\n  <div className=\"max-w-50 flex-1 divide-y\">\n    <div className=\"flex flex-col gap-2 py-3\">\n      <Text className=\"w-[60%]\" />\n      <Text variant=\"secondary\" />\n    </div>\n    <div className=\"flex items-center gap-2 divide-x py-3\">\n      <div className=\"-mx-2 flex-1 px-2 py-1\">\n        <Text variant=\"secondary\" />\n      </div>\n      <div className=\"flex-1 px-2 py-1\">\n        <Text variant=\"secondary\" />\n      </div>\n      <div className=\"-mx-2 flex-1 px-2 py-1\">\n        <Text variant=\"secondary\" />\n      </div>\n      <div className=\"flex-1 px-2 py-1\">\n        <Text variant=\"secondary\" />\n      </div>\n    </div>\n  </div>\n);\n\n// Sheet\nexport const sheetThumbnail = (\n  <div className=\"flex h-full flex-1 gap-2\">\n    <div className=\"flex-1 rounded-xl border border-input border-dashed\" />\n    <Card className=\"h-full max-w-1/3 [--radius-2xl:14px]\">\n      <CardPanel className=\"flex flex-col gap-4 p-3\">\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <Text className=\"w-[60%]\" variant=\"main\" />\n          <Text variant=\"secondary\" />\n        </div>\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"primary\" />\n        </div>\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Skeleton\nexport const skeletonThumbnail = (\n  <div className=\"mask-[linear-gradient(100deg,black_0%,rgba(0,0,0,0.2)_20%,rgba(0,0,0,0.2)_80%,rgba(0,0,0,0.6)_100%)] flex max-w-50 flex-1 items-center gap-3\">\n    <div className=\"size-8 rounded-full bg-muted-foreground/20\" />\n    <div className=\"flex flex-1 flex-col gap-2\">\n      <Text className=\"w-full\" variant=\"secondary\" />\n      <Text className=\"w-full\" variant=\"secondary\" />\n    </div>\n  </div>\n);\n\n// Slider\nexport const sliderThumbnail = (\n  <div className=\"flex w-full max-w-50 items-center gap-1\">\n    <Text\n      className=\"w-[35%] bg-linear-to-b from-(--btn-from) to-(--btn-to)\"\n      variant=\"secondary\"\n    />\n    <div className=\"size-4 rounded-full bg-linear-to-b from-(--btn-from) to-(--btn-to)\" />\n    <Text className=\"flex-1\" variant=\"secondary\" />\n  </div>\n);\n\n// Spinner\nexport const spinnerThumbnail = (\n  <div className=\"size-8 rotate-45 rounded-full border-3 border-muted-foreground/20 border-t-primary\" />\n);\n\n// Switch\nexport const switchThumbnail = (\n  <div className=\"h-6 w-10 rounded-full bg-muted-foreground/20 p-0.5\">\n    <div className=\"size-5 rounded-full bg-linear-to-b from-card to-card/90 shadow-xs/5 dark:from-background/90 dark:to-background\" />\n  </div>\n);\n\n// Table\nexport const tableThumbnail = (\n  <Card>\n    <CardPanel className=\"p-0\">\n      <div className=\"divide-y divide-border\">\n        <TableRow />\n        <TableRow />\n        <TableRow />\n      </div>\n    </CardPanel>\n  </Card>\n);\n\n// Tabs\nexport const tabsThumbnail = (\n  <div className=\"flex max-w-50 flex-col gap-4\">\n    <div className=\"flex rounded-lg bg-muted-foreground/12 p-0.5\">\n      <div className=\"rounded-[calc(var(--radius-lg)-1px)] bg-linear-to-b from-card to-card/90 p-3 shadow-xs/5 dark:from-background/90 dark:to-background\">\n        <Text className=\"w-6 bg-primary\" />\n      </div>\n      <div className=\"rounded-[calc(var(--radius-lg)-1px)] p-3\">\n        <Text className=\"w-6\" variant=\"secondary\" />\n      </div>\n      <div className=\"rounded-[calc(var(--radius-lg)-1px)] p-3\">\n        <Text className=\"w-6\" variant=\"secondary\" />\n      </div>\n    </div>\n    <div className=\"flex flex-col gap-2\">\n      <Text className=\"w-[70%]\" />\n      <Text variant=\"secondary\" />\n    </div>\n  </div>\n);\n\n// Textarea\nexport const textareaThumbnail = (\n  <Card className=\"[--radius-2xl:14px]\" withGradient={false}>\n    <CardPanel className=\"flex flex-col gap-2 px-6 py-4\">\n      <Text className=\"w-[60%]\" />\n      <Text className=\"opacity-0\" />\n      <Text className=\"opacity-0\" />\n    </CardPanel>\n  </Card>\n);\n\n// Toast\nexport const toastThumbnail = (\n  <div className=\"relative flex flex-1 justify-center\">\n    <Card className=\"absolute -top-6 scale-80\">\n      <CardPanel className=\"flex items-center gap-2 p-3\" />\n    </Card>\n    <Card className=\"absolute -top-3 scale-90\">\n      <CardPanel className=\"flex items-center gap-2 p-3\" />\n    </Card>\n    <Card>\n      <CardPanel className=\"flex items-start gap-2 p-3\">\n        <Icon icon={AlertCircleIcon} />\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <Text className=\"w-[40%]\" />\n          <Text className=\"w-[70%]\" variant=\"secondary\" />\n        </div>\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Toggle\nexport const toggleThumbnail = (\n  <div className=\"flex flex-1 flex-col items-center justify-center gap-2\">\n    <Card className=\"max-w-12 [--radius-2xl:14px]\">\n      <CardPanel className=\"rounded-[inherit] p-4\">\n        <Text />\n      </CardPanel>\n    </Card>\n    <Card className=\"max-w-12 shadow-none [--radius-2xl:14px] before:hidden\">\n      <CardPanel className=\"rounded-[inherit] bg-muted-foreground/8 p-4\">\n        <Text className=\"bg-primary\" />\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Toggle Group\nexport const toggleGroupThumbnail = (\n  <Card className=\"w-auto flex-row divide-x [--radius-2xl:14px]\">\n    <CardPanel className=\"bg-clip-padding p-4\">\n      <Text className=\"w-4\" />\n    </CardPanel>\n    <CardPanel className=\"bg-muted-foreground/8 bg-clip-padding p-4\">\n      <Text className=\"w-4 bg-foreground\" />\n    </CardPanel>\n    <CardPanel className=\"bg-clip-padding p-4\">\n      <Text className=\"w-4\" />\n    </CardPanel>\n  </Card>\n);\n\n// Toolbar\nexport const toolbarThumbnail = (\n  <div className=\"flex items-center gap-1 rounded-xl border p-1\">\n    <Card className=\"w-fit [--radius-2xl:12px]\">\n      <CardPanel className=\"p-3.5\">\n        <Text className=\"w-4\" />\n      </CardPanel>\n    </Card>\n    <Card className=\"w-fit [--radius-2xl:12px]\">\n      <CardPanel className=\"p-3.5\">\n        <Text className=\"w-4\" />\n      </CardPanel>\n    </Card>\n    <Card className=\"w-fit [--radius-2xl:12px]\">\n      <CardPanel className=\"p-3.5\">\n        <Text className=\"w-4\" />\n      </CardPanel>\n    </Card>\n  </div>\n);\n\n// Tooltip\nexport const tooltipThumbnail = (\n  <div className=\"flex max-w-32 flex-1 flex-col items-center gap-2\">\n    <Card className=\"[--radius-2xl:10px]\">\n      <CardPanel className=\"p-4\">\n        <Text />\n      </CardPanel>\n    </Card>\n    <Icon icon={InfoIcon} />\n  </div>\n);\n\n// ============================================================================\n// Category Thumbnails Map\n// ============================================================================\n\n/**\n * Map of category slugs to their thumbnail components.\n * Add new thumbnails here as they are created.\n */\nexport const categoryThumbnails: Record<string, ReactNode> = {\n  accordion: accordionThumbnail,\n  alert: alertThumbnail,\n  \"alert-dialog\": alertDialogThumbnail,\n  autocomplete: autocompleteThumbnail,\n  avatar: avatarThumbnail,\n  badge: badgeThumbnail,\n  breadcrumb: breadcrumbThumbnail,\n  button: buttonThumbnail,\n  calendar: calendarThumbnail,\n  card: cardThumbnail,\n  checkbox: checkboxThumbnail,\n  \"checkbox-group\": checkboxGroupThumbnail,\n  collapsible: collapsibleThumbnail,\n  combobox: comboboxThumbnail,\n  command: commandThumbnail,\n  \"date-picker\": datePickerThumbnail,\n  dialog: dialogThumbnail,\n  drawer: drawerThumbnail,\n  empty: emptyThumbnail,\n  field: fieldThumbnail,\n  fieldset: fieldsetThumbnail,\n  form: formThumbnail,\n  frame: frameThumbnail,\n  group: groupThumbnail,\n  input: inputThumbnail,\n  \"input-otp\": inputOtpThumbnail,\n  \"input-group\": inputGroupThumbnail,\n  kbd: kbdThumbnail,\n  label: labelThumbnail,\n  menu: menuThumbnail,\n  meter: meterThumbnail,\n  \"number-field\": numberFieldThumbnail,\n  pagination: paginationThumbnail,\n  popover: popoverThumbnail,\n  \"preview-card\": previewCardThumbnail,\n  progress: progressThumbnail,\n  \"radio-group\": radioGroupThumbnail,\n  \"scroll-area\": scrollAreaThumbnail,\n  select: selectThumbnail,\n  separator: separatorThumbnail,\n  sheet: sheetThumbnail,\n  skeleton: skeletonThumbnail,\n  slider: sliderThumbnail,\n  spinner: spinnerThumbnail,\n  switch: switchThumbnail,\n  table: tableThumbnail,\n  tabs: tabsThumbnail,\n  textarea: textareaThumbnail,\n  toast: toastThumbnail,\n  toggle: toggleThumbnail,\n  \"toggle-group\": toggleGroupThumbnail,\n  toolbar: toolbarThumbnail,\n  tooltip: tooltipThumbnail,\n};\n\n/**\n * Get the thumbnail for a category by slug.\n * Returns undefined if no thumbnail exists for the given slug.\n */\nexport function getCategoryThumbnail(slug: string): ReactNode | undefined {\n  return categoryThumbnails[slug];\n}\n"
  },
  {
    "path": "apps/ui/components/code-block-command.tsx",
    "content": "\"use client\";\n\nimport { useCopyToClipboard } from \"@coss/ui/hooks/use-copy-to-clipboard\";\nimport {\n  ComputerTerminal02Icon,\n  Copy01Icon,\n  Tick02Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\nimport { useConfig } from \"@/hooks/use-config\";\n\nexport function CodeBlockCommand({\n  __npm__,\n  __yarn__,\n  __pnpm__,\n  __bun__,\n}: React.ComponentProps<\"pre\"> & {\n  __npm__?: string;\n  __yarn__?: string;\n  __pnpm__?: string;\n  __bun__?: string;\n}) {\n  const [config, setConfig] = useConfig();\n  const { isCopied, copyToClipboard } = useCopyToClipboard();\n\n  const packageManager = config.packageManager || \"pnpm\";\n  const tabs = React.useMemo(() => {\n    return {\n      bun: __bun__,\n      npm: __npm__,\n      pnpm: __pnpm__,\n      yarn: __yarn__,\n    };\n  }, [__npm__, __pnpm__, __yarn__, __bun__]);\n\n  const copyCommand = React.useCallback(() => {\n    const command = tabs[packageManager];\n\n    if (!command) {\n      return;\n    }\n\n    copyToClipboard(command);\n  }, [packageManager, tabs, copyToClipboard]);\n\n  return (\n    <div>\n      <Tabs\n        className=\"gap-0\"\n        onValueChange={(value) => {\n          setConfig({\n            ...config,\n            packageManager: value as \"pnpm\" | \"npm\" | \"yarn\" | \"bun\",\n          });\n        }}\n        value={packageManager}\n      >\n        <div className=\"flex items-center gap-2 border-border/64 border-b px-4 py-1 font-mono\">\n          <HugeiconsIcon\n            className=\"size-5 text-code-foreground sm:size-4\"\n            icon={ComputerTerminal02Icon}\n            strokeWidth={2}\n          />\n          <TabsList className=\"bg-transparent p-0 *:data-[slot=tab-indicator]:rounded-lg *:data-[slot=tab-indicator]:bg-accent *:data-[slot=tab-indicator]:shadow-none\">\n            {Object.entries(tabs).map(([key]) => {\n              return (\n                <TabsTab className=\"rounded-lg\" key={key} value={key}>\n                  {key}\n                </TabsTab>\n              );\n            })}\n          </TabsList>\n        </div>\n        <ScrollArea className=\"**:data-[slot=scroll-area-scrollbar]:data-[orientation=horizontal]:mx-2 **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-2\">\n          {Object.entries(tabs).map(([key, value]) => {\n            return (\n              <TabsPanel\n                className=\"mt-0 w-max px-4 py-3.5\"\n                key={key}\n                value={key}\n              >\n                <pre>\n                  <code\n                    className=\"relative font-mono text-[.8125rem] leading-none\"\n                    data-language=\"bash\"\n                  >\n                    {value}\n                  </code>\n                </pre>\n              </TabsPanel>\n            );\n          })}\n        </ScrollArea>\n      </Tabs>\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <Button\n              className=\"absolute top-1.5 right-1.5 z-3 size-9 opacity-70 hover:opacity-100 focus-visible:opacity-100 sm:size-8\"\n              data-slot=\"copy-button\"\n              onClick={copyCommand}\n              size=\"icon\"\n              variant=\"ghost\"\n            >\n              <span className=\"sr-only\">Copy</span>\n              {isCopied ? (\n                <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />\n              ) : (\n                <HugeiconsIcon icon={Copy01Icon} strokeWidth={2} />\n              )}\n            </Button>\n          }\n        />\n        <TooltipPopup>{isCopied ? \"Copied\" : \"Copy to Clipboard\"}</TooltipPopup>\n      </Tooltip>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/code-collapsible-wrapper.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Collapsible,\n  CollapsiblePanel,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nexport function CodeCollapsibleWrapper({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Collapsible>) {\n  const [isOpened, setIsOpened] = React.useState(false);\n\n  return (\n    <Collapsible\n      className={cn(\"group/collapsible relative md:-mx-1\", className)}\n      onOpenChange={setIsOpened}\n      open={isOpened}\n      {...props}\n    >\n      <div className=\"absolute top-1.5 right-10 z-10 flex items-center\">\n        <CollapsibleTrigger\n          render={\n            <Button className=\"text-muted-foreground\" variant=\"ghost\">\n              {isOpened ? \"Collapse\" : \"Expand\"}\n            </Button>\n          }\n        />\n        <Separator className=\"mx-1.5 h-5\" orientation=\"vertical\" />\n      </div>\n      <CollapsiblePanel\n        className=\"[&>figure]:md:!mx-0 relative mt-6 h-full overflow-hidden data-closed:max-h-64 [&>figure]:mt-0\"\n        hidden={false}\n        keepMounted\n      >\n        {children}\n      </CollapsiblePanel>\n      <CollapsibleTrigger className=\"absolute inset-x-0 -bottom-2 flex h-20 cursor-pointer items-center justify-center rounded-b-lg bg-gradient-to-b from-transparent via-50% via-background to-background font-medium text-muted-foreground text-sm transition-colors hover:text-foreground group-data-open/collapsible:hidden\">\n        {isOpened ? \"Collapse\" : \"Expand\"}\n      </CollapsibleTrigger>\n    </Collapsible>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/code-tabs.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tabs } from \"@/registry/default/ui/tabs\";\nimport { useConfig } from \"@/hooks/use-config\";\n\nexport function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {\n  const [config, setConfig] = useConfig();\n\n  const installationType = React.useMemo(() => {\n    return config.installationType || \"cli\";\n  }, [config]);\n\n  return (\n    <Tabs\n      className=\"relative mt-6 w-full\"\n      onValueChange={(value) =>\n        setConfig({ ...config, installationType: value as \"cli\" | \"manual\" })\n      }\n      value={installationType}\n    >\n      {children}\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/command-menu.tsx",
    "content": "\"use client\";\n\nimport { CommandPanel } from \"@coss/ui/components/command\";\nimport {\n  ArrowTurnBackwardIcon,\n  Atom01Icon,\n  BookOpen02Icon,\n  Search01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport Link from \"next/link\";\nimport type { ComponentProps } from \"react\";\nimport * as React from \"react\";\nimport { useCopyToClipboard } from \"@/registry/default/hooks/use-copy-to-clipboard\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\nimport { useConfig } from \"@/hooks/use-config\";\nimport { useIsMac } from \"@/hooks/use-is-mac\";\nimport type { source } from \"@/lib/source\";\n\ninterface PageItem {\n  value: string;\n  label: string;\n  url: string;\n  isComponent: boolean;\n  keywords?: string[];\n}\n\ninterface PageGroup {\n  value: string;\n  items: PageItem[];\n}\n\nexport function CommandMenu({\n  tree,\n  navItems,\n  ...props\n}: ComponentProps<typeof CommandDialog> & {\n  tree: typeof source.pageTree;\n  navItems?: { href: string; label: string }[];\n}) {\n  const isMac = useIsMac();\n  const [config] = useConfig();\n  const { copyToClipboard } = useCopyToClipboard();\n  const [open, setOpen] = React.useState(false);\n  const [selectedType, setSelectedType] = React.useState<\n    \"page\" | \"component\" | null\n  >(null);\n  const [copyPayload, setCopyPayload] = React.useState(\"\");\n  const packageManager = config.packageManager || \"pnpm\";\n\n  // Convert tree structure to grouped items\n  const groupedItems = React.useMemo<PageGroup[]>(() => {\n    const groups: PageGroup[] = [];\n\n    // Add nav items group\n    if (navItems && navItems.length > 0) {\n      groups.push({\n        items: navItems.map((item) => ({\n          isComponent: false,\n          keywords: [\"nav\", \"navigation\", item.label.toLowerCase()],\n          label: item.label,\n          url: item.href,\n          value: `Navigation ${item.label}`,\n        })),\n        value: \"Pages\",\n      });\n    }\n\n    // Add tree groups\n    tree.children.forEach((group) => {\n      if (group.type === \"folder\") {\n        const items: PageItem[] = [];\n        group.children.forEach((item) => {\n          if (item.type === \"page\") {\n            const isComponent = item.url.includes(\"/components/\");\n            const itemName = item.name?.toString() || \"\";\n            items.push({\n              isComponent,\n              keywords: isComponent ? [\"component\"] : undefined,\n              label: itemName,\n              url: item.url,\n              value: itemName ? `${group.name} ${itemName}` : \"\",\n            });\n          }\n        });\n        if (items.length > 0) {\n          groups.push({\n            items,\n            value:\n              typeof group.name === \"string\" ? group.name : String(group.name),\n          });\n        }\n      }\n    });\n\n    return groups;\n  }, [tree, navItems]);\n\n  const handlePageHighlight = React.useCallback(\n    (item: PageItem) => {\n      if (item.isComponent) {\n        const componentName = item.url.split(\"/\").pop();\n        setSelectedType(\"component\");\n        const registryItem = `@coss/${componentName}`;\n        let cmd: string;\n        switch (packageManager) {\n          case \"pnpm\":\n            cmd = `pnpm dlx shadcn@latest add ${registryItem}`;\n            break;\n          case \"bun\":\n            cmd = `bunx --bun shadcn@latest add ${registryItem}`;\n            break;\n          case \"yarn\":\n            cmd = `yarn dlx shadcn@latest add ${registryItem}`;\n            break;\n          default:\n            cmd = `npx shadcn@latest add ${registryItem}`;\n        }\n\n        setCopyPayload(cmd);\n      } else {\n        setSelectedType(\"page\");\n        setCopyPayload(\"\");\n      }\n    },\n    [packageManager],\n  );\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if ((e.key === \"k\" && (e.metaKey || e.ctrlKey)) || e.key === \"/\") {\n        if (\n          (e.target instanceof HTMLElement && e.target.isContentEditable) ||\n          e.target instanceof HTMLInputElement ||\n          e.target instanceof HTMLTextAreaElement ||\n          e.target instanceof HTMLSelectElement\n        ) {\n          return;\n        }\n\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n\n      if (e.key === \"c\" && (e.metaKey || e.ctrlKey)) {\n        if (selectedType === \"page\" || selectedType === \"component\") {\n          copyToClipboard(copyPayload);\n        }\n      }\n    };\n\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, [copyPayload, selectedType, copyToClipboard]);\n\n  return (\n    <CommandDialog onOpenChange={setOpen} open={open} {...props}>\n      <CommandDialogTrigger render={<Button variant=\"outline\" />}>\n        <HugeiconsIcon icon={Search01Icon} strokeWidth={2} />\n        <KbdGroup className=\"gap-1\">\n          <Kbd>{isMac ? \"⌘\" : \"Ctrl\"}</Kbd>\n          <Kbd className=\"aspect-square\">K</Kbd>\n        </KbdGroup>\n      </CommandDialogTrigger>\n      <CommandDialogPopup>\n        <Command\n          items={groupedItems}\n          onItemHighlighted={(highlightedValue) => {\n            const item = highlightedValue as PageItem | null;\n            if (item) {\n              handlePageHighlight(item);\n            }\n          }}\n        >\n          <CommandInput placeholder=\"Search documentation…\" />\n          <CommandPanel>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandList>\n              {(group: PageGroup, _index: number) => (\n                <CommandGroup items={group.items} key={group.value}>\n                  <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                  <CommandCollection>\n                    {(item: PageItem) => (\n                      <CommandItem\n                        className=\"flex w-full items-center\"\n                        key={item.value}\n                        render={\n                          <Link\n                            href={item.url}\n                            onNavigate={() => setOpen(false)}\n                          />\n                        }\n                      >\n                        <HugeiconsIcon\n                          className=\"mr-2 h-4 w-4 opacity-80\"\n                          icon={item.isComponent ? Atom01Icon : BookOpen02Icon}\n                          strokeWidth={2}\n                        />\n                        <span className=\"flex-1\">{item.label}</span>\n                      </CommandItem>\n                    )}\n                  </CommandCollection>\n                </CommandGroup>\n              )}\n            </CommandList>\n          </CommandPanel>\n          <CommandFooter>\n            <div className=\"flex items-center gap-2\">\n              <span className=\"whitespace-nowrap\">Go to Page</span>\n              <Kbd>\n                <HugeiconsIcon icon={ArrowTurnBackwardIcon} strokeWidth={2} />\n              </Kbd>\n            </div>\n            {copyPayload && (\n              <div className=\"flex min-w-0 items-center gap-2\">\n                <span className=\"truncate font-mono\">{copyPayload}</span>\n                <KbdGroup>\n                  <Kbd>{isMac ? \"⌘\" : \"Ctrl\"}</Kbd>\n                  <Kbd>C</Kbd>\n                </KbdGroup>\n              </div>\n            )}\n          </CommandFooter>\n        </Command>\n      </CommandDialogPopup>\n    </CommandDialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/component-preview-tabs.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tabs, TabsList, TabsTab } from \"@/registry/default/ui/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nexport function ComponentPreviewTabs({\n  className,\n  align = \"center\",\n  hideCode = false,\n  component,\n  source,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  align?: \"center\" | \"start\" | \"end\";\n  hideCode?: boolean;\n  component: React.ReactNode;\n  source: React.ReactNode;\n}) {\n  const [tab, setTab] = React.useState(\"preview\");\n\n  return (\n    <div\n      className={cn(\"group relative mt-4 mb-12 flex flex-col gap-2\", className)}\n      {...props}\n    >\n      <Tabs onValueChange={setTab} value={tab}>\n        <div className=\"flex items-center justify-between\">\n          {!hideCode && (\n            <TabsList className=\"bg-transparent p-0 *:data-[slot=tab-indicator]:rounded-lg *:data-[slot=tab-indicator]:bg-accent *:data-[slot=tab-indicator]:shadow-none\">\n              <TabsTab className=\"rounded-lg\" value=\"preview\">\n                Preview\n              </TabsTab>\n              <TabsTab className=\"rounded-lg\" value=\"code\">\n                Code\n              </TabsTab>\n            </TabsList>\n          )}\n        </div>\n      </Tabs>\n      <div\n        className=\"relative rounded-xl border not-dark:bg-card\"\n        data-tab={tab}\n      >\n        <div\n          className=\"invisible data-[active=true]:visible\"\n          data-active={tab === \"preview\"}\n        >\n          <div\n            className={cn(\n              \"flex h-[450px] w-full justify-center overflow-y-auto p-10 data-[align=start]:items-start data-[align=end]:items-end data-[align=center]:items-center max-sm:px-6\",\n            )}\n            data-align={align}\n          >\n            <div data-slot=\"preview\">{component}</div>\n          </div>\n        </div>\n        <div\n          className=\"absolute inset-0 hidden overflow-hidden data-[active=true]:block **:[figure]:m-0! **:[pre]:h-[450px]\"\n          data-active={tab === \"code\"}\n          data-slot=\"code\"\n        >\n          {source}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/component-preview.tsx",
    "content": "import { Index } from \"@/registry/__index__\";\nimport { ComponentPreviewTabs } from \"@/components/component-preview-tabs\";\nimport { ComponentSource } from \"@/components/component-source\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ComponentPreviewProps\n  extends Omit<React.ComponentProps<\"div\">, \"ref\"> {\n  name: string;\n  align?: \"center\" | \"start\" | \"end\";\n  description?: string;\n  hideCode?: boolean;\n}\n\nexport function ComponentPreview({\n  name,\n  className,\n  align = \"center\",\n  hideCode = false,\n  ...props\n}: ComponentPreviewProps) {\n  const Component = Index[name]?.component;\n  const metaClassName = Index[name]?.meta?.className;\n\n  if (!Component) {\n    return (\n      <p className=\"text-muted-foreground text-sm\">\n        Component{\" \"}\n        <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-[.8125rem]\">\n          {name}\n        </code>{\" \"}\n        not found in registry.\n      </p>\n    );\n  }\n\n  return (\n    <ComponentPreviewTabs\n      align={align}\n      className={cn(metaClassName, className)}\n      component={<Component />}\n      hideCode={hideCode}\n      source={<ComponentSource collapsible={false} name={name} />}\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/component-source.tsx",
    "content": "import fs from \"node:fs/promises\";\nimport path from \"node:path\";\nimport { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type * as React from \"react\";\nimport { CodeCollapsibleWrapper } from \"@/components/code-collapsible-wrapper\";\nimport { getRegistryItem } from \"@/lib/registry\";\nimport { cn } from \"@/lib/utils\";\n\nexport async function ComponentSource({\n  name,\n  src,\n  title,\n  language,\n  collapsible = true,\n  className,\n}: React.ComponentProps<\"div\"> & {\n  name?: string;\n  src?: string;\n  title?: string;\n  language?: string;\n  collapsible?: boolean;\n}) {\n  if (!name && !src) {\n    return null;\n  }\n\n  let code: string | undefined;\n\n  if (name) {\n    const item = await getRegistryItem(name);\n    code = item?.files?.[0]?.content;\n  }\n\n  if (src) {\n    const file = await fs.readFile(path.join(process.cwd(), src), \"utf-8\");\n    code = file;\n  }\n\n  if (!code) {\n    return null;\n  }\n\n  const lang = language ?? title?.split(\".\").pop() ?? \"tsx\";\n\n  if (!collapsible) {\n    return (\n      <div className={cn(\"relative\", className)}>\n        <CodeBlock code={code} language={lang} title={title} />\n      </div>\n    );\n  }\n\n  return (\n    <CodeCollapsibleWrapper className={className}>\n      <CodeBlock code={code} language={lang} title={title} />\n    </CodeCollapsibleWrapper>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/copy-registry.tsx",
    "content": "\"use client\";\n\nimport { useCopyToClipboard } from \"@coss/ui/hooks/use-copy-to-clipboard\";\nimport { Icons } from \"@coss/ui/shared/icons\";\nimport { Tick02Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type * as React from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport function CopyRegistry({\n  value,\n  className,\n  variant = \"ghost\",\n  ...props\n}: React.ComponentProps<typeof Button> & {\n  value: string;\n  src?: string;\n}) {\n  const { isCopied, copyToClipboard } = useCopyToClipboard();\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <Button\n            className={cn(className)}\n            data-slot=\"copy-button\"\n            onClick={() => copyToClipboard(value)}\n            size=\"icon-sm\"\n            variant={variant}\n            {...props}\n          >\n            <span className=\"sr-only\">Copy</span>\n            {isCopied ? (\n              <HugeiconsIcon\n                className=\"size-3.5\"\n                icon={Tick02Icon}\n                strokeWidth={2}\n              />\n            ) : (\n              <Icons.mcp />\n            )}\n          </Button>\n        }\n      />\n      <TooltipPopup>{isCopied ? \"Copied\" : \"Copy Registry URL\"}</TooltipPopup>\n    </Tooltip>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/docs-copy-page.tsx",
    "content": "\"use client\";\n\nimport { useCopyToClipboard } from \"@coss/ui/hooks/use-copy-to-clipboard\";\nimport { Copy01Icon, Tick02Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport function DocsCopyPage({ page }: { page: string }) {\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\n\n  return (\n    <Button onClick={() => copyToClipboard(page)} size=\"xs\" variant=\"outline\">\n      {isCopied ? (\n        <HugeiconsIcon icon={Tick02Icon} strokeWidth={2.5} />\n      ) : (\n        <HugeiconsIcon icon={Copy01Icon} strokeWidth={2.5} />\n      )}\n      Copy Markdown\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/docs-sidebar.tsx",
    "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/default/ui/sidebar\";\nimport { PAGES_NEW } from \"@/lib/docs\";\nimport type { source } from \"@/lib/source\";\n\nexport function DocsSidebar({\n  tree,\n  ...props\n}: React.ComponentProps<typeof Sidebar> & { tree: typeof source.pageTree }) {\n  const pathname = usePathname();\n\n  return (\n    <Sidebar\n      className=\"sticky top-(--header-height) z-30 hidden h-[calc(100svh-var(--header-height))] bg-transparent lg:flex\"\n      collapsible=\"none\"\n      {...props}\n    >\n      <SidebarContent className=\"px-4 py-2\">\n        <div className=\"h-(--top-spacing) shrink-0\" />\n        {tree.children.map((item) => (\n          <SidebarGroup className=\"gap-1\" key={item.$id}>\n            <SidebarGroupLabel className=\"h-7 px-0 text-sidebar-accent-foreground\">\n              {item.name}\n            </SidebarGroupLabel>\n            <SidebarGroupContent>\n              {item.type === \"folder\" && (\n                <SidebarMenu className=\"gap-0.5\">\n                  {item.children.map((item) => {\n                    return (\n                      item.type === \"page\" && (\n                        <SidebarMenuItem key={item.url}>\n                          <SidebarMenuButton\n                            className=\"ps-3.5 hover:bg-transparent active:bg-transparent\"\n                            isActive={item.url === pathname}\n                            render={<Link href={item.url} />}\n                          >\n                            {item.name}\n                            {PAGES_NEW.length > 0 &&\n                              PAGES_NEW.includes(item.url as never) && (\n                                <Badge variant=\"info\">New</Badge>\n                              )}\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      )\n                    );\n                  })}\n                </SidebarMenu>\n              )}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        ))}\n      </SidebarContent>\n    </Sidebar>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/docs-toc.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction useActiveItem(itemIds: string[]) {\n  const [activeId, setActiveId] = React.useState<string | null>(null);\n\n  React.useEffect(() => {\n    // Default to first item on mount if nothing is active yet\n    if (!activeId && itemIds?.length) {\n      setActiveId(itemIds[0] ?? null);\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            setActiveId(entry.target.id);\n          }\n        }\n      },\n      { rootMargin: \"0% 0% -80% 0%\" },\n    );\n\n    for (const id of itemIds ?? []) {\n      const element = document.getElementById(id);\n      if (element) {\n        observer.observe(element);\n      }\n    }\n\n    return () => {\n      for (const id of itemIds ?? []) {\n        const element = document.getElementById(id);\n        if (element) {\n          observer.unobserve(element);\n        }\n      }\n    };\n  }, [itemIds, activeId]);\n\n  return activeId;\n}\n\nexport function DocsTableOfContents({\n  toc,\n  className,\n}: {\n  toc: {\n    title?: React.ReactNode;\n    url: string;\n    depth: number;\n  }[];\n  className?: string;\n}) {\n  const itemIds = React.useMemo(\n    () => toc.map((item) => item.url.replace(\"#\", \"\")),\n    [toc],\n  );\n  const activeHeading = useActiveItem(itemIds);\n\n  if (!toc?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"z-10 flex flex-col gap-1 py-2 ps-6 pe-4 text-sm\",\n        className,\n      )}\n    >\n      <p className=\"flex h-7 items-center font-medium text-xs\">On This Page</p>\n      <div className=\"relative ms-3.5 flex flex-col gap-0.5 before:absolute before:inset-y-0 before:-left-3.25 before:w-px before:bg-border\">\n        {toc.map((item) => (\n          <a\n            className=\"relative py-1 text-[.8125rem] text-sidebar-foreground leading-4.5 no-underline transition-colors before:absolute before:inset-y-px before:-left-3.25 before:w-px before:rounded-full hover:bg-transparent hover:text-foreground data-[active=true]:bg-transparent data-[depth=3]:ps-3.5 data-[depth=4]:ps-5.5 data-[active=true]:text-foreground data-[active=true]:before:w-0.5 data-[active=true]:before:bg-primary\"\n            data-active={item.url === `#${activeHeading}`}\n            data-depth={item.depth}\n            href={item.url}\n            key={item.url}\n          >\n            {item.title}\n          </a>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/main-nav.tsx",
    "content": "\"use client\";\n\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport function MainNav({\n  items,\n  className,\n  ...props\n}: React.ComponentProps<\"nav\"> & {\n  items: { href: string; label: string }[];\n}) {\n  const pathname = usePathname();\n\n  return (\n    <nav className={cn(\"items-center gap-2\", className)} {...props}>\n      {items.map((item) => (\n        <Button\n          data-pressed={pathname.includes(item.href) || undefined}\n          key={item.href}\n          render={\n            <Link\n              className={cn(pathname.includes(item.href) && \"text-primary\")}\n              href={item.href}\n            />\n          }\n          variant=\"ghost\"\n        >\n          {item.label}\n        </Button>\n      ))}\n    </nav>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/media-query-demo.tsx",
    "content": "\"use client\";\n\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nfunction Section({\n  title,\n  rows,\n}: {\n  title: string;\n  rows: { label: string; description?: string; value: boolean }[];\n}) {\n  return (\n    <div>\n      <h3 className=\"mb-2 font-medium text-sm\">{title}</h3>\n      <ul className=\"divide-y rounded-xl border\">\n        {rows.map((row) => (\n          <li\n            className=\"flex items-center justify-between gap-2 px-3 py-2.5\"\n            key={row.label}\n          >\n            <div className=\"min-w-0\">\n              <code className=\"relative break-all rounded-md bg-muted px-[0.3rem] py-[0.2rem] font-mono text-[.8125rem] text-muted-foreground outline-none\">\n                {row.label}\n              </code>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {row.description && (\n                <span className=\"ms-2 text-muted-foreground text-xs\">\n                  {row.description}\n                </span>\n              )}\n              <Badge\n                className={cn(\n                  \"min-w-11 shrink-0 rounded-full text-xs sm:h-6 sm:min-w-11\",\n                  !row.value && \"text-muted-foreground\",\n                )}\n                variant={row.value ? \"success\" : \"secondary\"}\n              >\n                {row.value ? \"true\" : \"false\"}\n              </Badge>\n            </div>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport function MediaQueryDemo() {\n  const sm = useMediaQuery(\"sm\");\n  const md = useMediaQuery(\"md\");\n  const lg = useMediaQuery(\"lg\");\n  const xl = useMediaQuery(\"xl\");\n  const xxl = useMediaQuery(\"2xl\");\n\n  const maxSm = useMediaQuery(\"max-sm\");\n  const maxMd = useMediaQuery(\"max-md\");\n  const maxLg = useMediaQuery(\"max-lg\");\n\n  const smToMd = useMediaQuery(\"sm:max-md\");\n  const mdToLg = useMediaQuery(\"md:max-lg\");\n  const lgToXl = useMediaQuery(\"lg:max-xl\");\n\n  const pointerCoarse = useMediaQuery({ pointer: \"coarse\" });\n  const pointerFine = useMediaQuery({ pointer: \"fine\" });\n  const darkMode = useMediaQuery(\"(prefers-color-scheme: dark)\");\n  const reducedMotion = useMediaQuery(\"(prefers-reduced-motion: reduce)\");\n\n  return (\n    <div className=\"my-8 flex flex-col gap-6\">\n      <Section\n        rows={[\n          { description: \"≥ 640px\", label: `useMediaQuery(\"sm\")`, value: sm },\n          { description: \"≥ 800px\", label: `useMediaQuery(\"md\")`, value: md },\n          { description: \"≥ 1024px\", label: `useMediaQuery(\"lg\")`, value: lg },\n          { description: \"≥ 1280px\", label: `useMediaQuery(\"xl\")`, value: xl },\n          {\n            description: \"≥ 1536px\",\n            label: `useMediaQuery(\"2xl\")`,\n            value: xxl,\n          },\n        ]}\n        title=\"Min-width (breakpoint and above)\"\n      />\n      <Section\n        rows={[\n          {\n            description: \"< 640px\",\n            label: `useMediaQuery(\"max-sm\")`,\n            value: maxSm,\n          },\n          {\n            description: \"< 800px\",\n            label: `useMediaQuery(\"max-md\")`,\n            value: maxMd,\n          },\n          {\n            description: \"< 1024px\",\n            label: `useMediaQuery(\"max-lg\")`,\n            value: maxLg,\n          },\n        ]}\n        title=\"Max-width (below breakpoint)\"\n      />\n      <Section\n        rows={[\n          {\n            description: \"640 - 799px\",\n            label: `useMediaQuery(\"sm:max-md\")`,\n            value: smToMd,\n          },\n          {\n            description: \"800 - 1023px\",\n            label: `useMediaQuery(\"md:max-lg\")`,\n            value: mdToLg,\n          },\n          {\n            description: \"1024 - 1279px\",\n            label: `useMediaQuery(\"lg:max-xl\")`,\n            value: lgToXl,\n          },\n        ]}\n        title=\"Ranges\"\n      />\n      <Section\n        rows={[\n          {\n            description: \"touch\",\n            label: `useMediaQuery({ pointer: \"coarse\" })`,\n            value: pointerCoarse,\n          },\n          {\n            description: \"mouse\",\n            label: `useMediaQuery({ pointer: \"fine\" })`,\n            value: pointerFine,\n          },\n          {\n            label: `useMediaQuery(\"(prefers-color-scheme: dark)\")`,\n            value: darkMode,\n          },\n          {\n            label: `useMediaQuery(\"(prefers-reduced-motion: reduce)\")`,\n            value: reducedMotion,\n          },\n        ]}\n        title=\"Device & preferences\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/mobile-nav.tsx",
    "content": "\"use client\";\n\nimport { Menu09Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport Link, { type LinkProps } from \"next/link\";\nimport { useRouter } from \"next/navigation\";\nimport * as React from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\nimport { PAGES_NEW } from \"@/lib/docs\";\nimport type { source } from \"@/lib/source\";\nimport { cn } from \"@/lib/utils\";\n\nexport function MobileNav({\n  tree,\n  items,\n  className,\n}: {\n  tree: typeof source.pageTree;\n  items: { href: string; label: string }[];\n  className?: string;\n}) {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Drawer onOpenChange={setOpen} open={open} position=\"left\">\n      <DrawerTrigger\n        render={\n          <Button\n            className={cn(\"relative -ms-1.5 size-8\", className)}\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <HugeiconsIcon\n              className=\"size-5\"\n              icon={Menu09Icon}\n              strokeWidth={2}\n            />\n            <span className=\"sr-only\">Toggle Menu</span>\n          </Button>\n        }\n      />\n      <DrawerPopup showCloseButton variant=\"straight\">\n        <DrawerPanel\n          className=\"flex flex-col gap-12 p-6 pt-8\"\n          scrollFade={false}\n        >\n          <div className=\"flex flex-col gap-3\">\n            <div className=\"font-medium text-sm\">Menu</div>\n            <div className=\"flex flex-col gap-1\">\n              <MobileLink href=\"/\" onOpenChange={setOpen}>\n                Home\n              </MobileLink>\n              {items.map((item) => (\n                <MobileLink\n                  href={item.href}\n                  key={item.label}\n                  onOpenChange={setOpen}\n                >\n                  {item.label}\n                </MobileLink>\n              ))}\n            </div>\n          </div>\n          <div className=\"flex flex-col gap-8\">\n            {tree?.children?.map((group, index) => {\n              if (group.type === \"folder\") {\n                return (\n                  <div className=\"flex flex-col gap-3\" key={group.$id}>\n                    <div className=\"font-medium text-sm\">{group.name}</div>\n                    <div className=\"flex flex-col gap-0.5\">\n                      {group.children.map((item) => {\n                        if (item.type === \"page\") {\n                          return (\n                            <MobileLink\n                              href={item.url}\n                              key={`${item.url}-${index}`}\n                              onOpenChange={setOpen}\n                            >\n                              {item.name}\n                              {PAGES_NEW.length > 0 &&\n                                PAGES_NEW.includes(item.url as never) && (\n                                  <Badge variant=\"info\">New</Badge>\n                                )}\n                            </MobileLink>\n                          );\n                        }\n                        return null;\n                      })}\n                    </div>\n                  </div>\n                );\n              }\n              return null;\n            })}\n          </div>\n        </DrawerPanel>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n\nfunction MobileLink({\n  href,\n  onOpenChange,\n  className,\n  children,\n  ...props\n}: LinkProps & {\n  onOpenChange?: (open: boolean) => void;\n  children: React.ReactNode;\n  className?: string;\n}) {\n  const router = useRouter();\n  return (\n    <Link\n      className={cn(\n        \"flex items-center gap-2 py-1.5 text-muted-foreground\",\n        className,\n      )}\n      href={href}\n      onClick={() => {\n        router.push(href.toString());\n        onOpenChange?.(false);\n      }}\n      {...props}\n    >\n      {children}\n    </Link>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/site-footer.tsx",
    "content": "import Link from \"next/link\";\n\nexport function SiteFooter() {\n  return (\n    <footer className=\"flex flex-col gap-0.5\">\n      <p>\n        <Link className=\"font-heading font-semibold text-lg\" href=\"/\">\n          coss.com <span className=\"text-muted-foreground/72\">ui</span>\n        </Link>\n      </p>\n      <p className=\"text-muted-foreground text-sm\">\n        Built by and for the team of{\" \"}\n        <a\n          className=\"font-medium underline-offset-4 hover:underline\"\n          href=\"https://cal.com\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          Cal.com\n        </a>\n        , Inc. — the leading commercial open source company\n        (&ldquo;coss&rdquo;).\n      </p>\n    </footer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/components/site-header.tsx",
    "content": "import { Separator } from \"@coss/ui/components/separator\";\nimport { SiteHeader as WorkspaceSiteHeader } from \"@coss/ui/shared/site-header\";\nimport { CommandMenu } from \"@/components/command-menu\";\nimport { MainNav } from \"@/components/main-nav\";\nimport { MobileNav } from \"@/components/mobile-nav\";\nimport { appConfig } from \"@/lib/config\";\nimport { source } from \"@/lib/source\";\n\nexport function SiteHeader() {\n  const pageTree = source.pageTree;\n\n  return (\n    <WorkspaceSiteHeader\n      currentProduct=\"ui\"\n      mobileNav={\n        <MobileNav\n          className=\"flex lg:hidden\"\n          items={appConfig.navItems}\n          tree={pageTree}\n        />\n      }\n    >\n      <MainNav className=\"hidden lg:flex\" items={appConfig.navItems} />\n      <div className=\"mx-2 hidden w-full flex-1 md:flex md:w-auto md:flex-none\">\n        <CommandMenu navItems={appConfig.navItems} tree={pageTree} />\n      </div>\n      <Separator className=\"h-5 max-md:hidden\" orientation=\"vertical\" />\n    </WorkspaceSiteHeader>\n  );\n}\n"
  },
  {
    "path": "apps/ui/config/categories.ts",
    "content": "import componentSlugs from \"@/content/docs/components/meta.json\";\nimport { source } from \"@/lib/source\";\n\nexport interface ComponentCategory {\n  slug: string;\n  name: string;\n  description?: string;\n}\n\nfunction slugToName(slug: string): string {\n  return slug\n    .split(\"-\")\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\" \");\n}\n\nexport const categories: ComponentCategory[] = (\n  componentSlugs.pages as string[]\n).map((slug) => {\n  const page = source.getPage([\"components\", slug]);\n  return {\n    description: page?.data.description,\n    name: slugToName(slug),\n    slug,\n  };\n});\n\nexport function getCategory(slug: string): ComponentCategory | undefined {\n  return categories.find((category) => category.slug === slug);\n}\n"
  },
  {
    "path": "apps/ui/content/docs/(root)/get-started.mdx",
    "content": "---\ntitle: Get Started\ndescription: A quick guide to adding your first component.\n---\n\nThis guide provides the essentials for adding **coss ui** components to your React application.\n\n## Prerequisites\n\nOur components are built with [Tailwind CSS v4](https://tailwindcss.com). Before you begin, make sure you have a React project set up with Tailwind CSS.\n\n## Adding Components\n\nYou can add components **automatically with the shadcn CLI** or **manually by copying the files**. Both methods work for primitives, particles, and atoms.\n\n### With the CLI\n\nEach component page provides a command to add it to your project automatically. The CLI will create the necessary files and install any dependencies for you.\n\n### New Project Setup (Recommended)\n\nFor new projects, use the **coss style** preset to initialize everything in one command:\n\n```bash\nnpx shadcn@latest init @coss/style\n```\n\nThis installs all UI components, the neutral color system, sidebar variables, font variables, and base styles. Components like Dialog and AlertDialog use `font-heading` for titles—the style preset provides sensible fallbacks, and you can customize fonts via `next/font` in your layout.\n\n### Existing Projects\n\nTo add components to an existing project:\n\n```bash\nnpx shadcn@latest add @coss/ui\n```\n\nThis adds all UI primitives (button, card, avatar, dialog, tabs, and more). For the full theme including colors, sidebar, and fonts:\n\n```bash\nnpx shadcn@latest add @coss/style\n```\n\nOr add only the color tokens:\n\n```bash\nnpx shadcn@latest add @coss/ui @coss/colors-neutral\n```\n\nSee the [Styling](/ui/docs/styling) guide for more details.\n\n### Manually\n\n1.  **Find a component** on the [Components](/ui/docs) or [Particles](/ui/particles) pages.\n2.  **Copy the code** from the **Code** tab.\n3.  **Create a new file** in your project (e.g., `components/ui/button.tsx`) and paste the code.\n4.  **Install any dependencies** listed on the component's page.\n5.  **Import and use** the component in your app.\n\n## Styling\n\nComponents are styled with the design token system we use at **Cal.com**, which is defined by CSS variables and implemented with Tailwind CSS.\n\nThe variables are the same as shadcn/ui, and are fully customizable. You can modify them in your global stylesheet (e.g., `app/globals.css`) to match your design system.\n\nWe've introduced a few additional tokens to provide more granular control:\n\n- `--destructive-foreground`: Used for destructive-outline buttons, destructive menu items, badges, and field errors\n- `--info` and `--info-foreground`: Commonly used for info-colored badges, toast types, and alerts\n- `--success` and `--success-foreground`: Used for success-colored badges, toast types, and alerts\n- `--warning` and `--warning-foreground`: Used for warning-colored badges, toast types, and alerts\n\n**Important**: If you manually import components, you must also import these additional tokens in your CSS file (e.g., `app/globals.css`). However, if you use the CLI to import components, these tokens will be automatically imported and configured for you.\n\n## Primitive exports\n\nComponents that wrap Base UI primitives re-export the underlying primitive. Use the styled component when our defaults work, or the primitive when you need different compositions or styling. In a monorepo with a shared UI package, apps import from that package—Base UI stays in one place, no need to add it to each app.\n\n```tsx\nimport { Slider, SliderValue, SliderPrimitive } from \"@coss/ui/components/slider\";\n```\n\n## Base UI Re-exports\n\nWhen you only need `useRender`, `mergeProps`, `CSPProvider`, or `DirectionProvider`, import them from `@coss/ui/base-ui/*` instead of adding `@base-ui/react` as a direct dependency:\n\n- `@coss/ui/base-ui/use-render`\n- `@coss/ui/base-ui/merge-props`\n- `@coss/ui/base-ui/csp-provider`\n- `@coss/ui/base-ui/direction-provider`\n\nThis is especially useful in **monorepos**: apps and packages that already depend on `@coss/ui` can use these utilities without adding `@base-ui/react` as another dependency. You avoid duplicate installs, keep versions in sync, and simplify your dependency tree—`@base-ui/react` lives in one place (`@coss/ui`), and everything else imports through it.\n\n## Migration from Radix UI\n\nFor developers migrating from **Radix UI**, many of our **UI primitives** include instructions and examples for translating equivalent Radix components to Base UI. This ensures a smooth transition while preserving accessibility, behaviors, and API patterns.\n\n## Working with LLMs\n\nWe structure the documentation to make the components **AI-friendly**, so language models can understand, reason about, and modify them. To support this, we include:\n\n- A [llms.txt](/ui/llms.txt) file that provides a map of the documentation and component structure for your AI agent.\n- A **Copy Markdown** button on every page, so you can easily share content or feed it to your AI workflows.\n"
  },
  {
    "path": "apps/ui/content/docs/(root)/index.mdx",
    "content": "---\ntitle: Introduction\ndescription: A new, modern UI component library built on top of Base UI. Built for developers and AI.\n---\n\n**coss ui** is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of [Base UI](https://base-ui.com/) and styled with [Tailwind CSS](https://tailwindcss.com/), it's designed for you to copy, paste, and own.\n\nWe think Base UI is the best foundation for modern web applications. We've taken its powerful, unstyled primitives and given them a design system that's ready to go, right out of the box.\n\nThis is the component library we'll be progressively adopting for [Cal.com](https://cal.com). We're building it in the open for anyone who wants to create beautiful, reliable user interfaces.\n\n<Alert className=\"bg-muted/24\">\n  <InfoIcon />\n  <AlertTitle>Early Access</AlertTitle>\n  <AlertDescription>\n    coss ui is currently in early development. We're building this library in\n    the open and actively working on new components and features. Base UI itself\n    is also in beta, so you may encounter breaking changes as both projects\n    evolve. We recommend using this in projects where you're comfortable\n    adapting to changes.\n  </AlertDescription>\n</Alert>\n\n## How It Works\n\nOur approach is simple: you should own your code. We're inspired by the copy-paste ethos of **shadcn/ui**.\n\nInstead of installing a package, you get the source code. This means:\n\n- **No abstractions:** You have full control over how components look and behave.\n- **Endless customization:** Need to change something? Just edit the file.\n- **Learn by doing:** See how components are built and adapt them to your needs.\n\n## Built on Base UI, Designed for Production\n\ncoss ui is built on **Base UI** from the ground up—not as an adaptation or port from Radix UI. We chose Base UI for its robust, accessible, and unopinionated primitives that handle the hard parts (accessibility, keyboard navigation, focus management) without imposing design decisions.\n\nWhile shadcn/ui is now available with Base UI, coss ui isn't about re-implementing shadcn. It's about creating a **coherent, opinionated UI system tailored to real production applications** like [Cal.com](https://cal.com) and [coss.com](https://coss.com). Our components, patterns, and evolutions go beyond base primitives, incorporating:\n\n- **Production-tested patterns** from real-world applications\n- **Extended component variants** for common use cases\n- **Thoughtful defaults** optimized for modern, dense UIs\n- **Consistent design system** across all components\n\nIf you're migrating from shadcn/ui or Radix UI, we provide a comprehensive [migration guide](/ui/docs/radix-shadcn-migration) to make the transition smooth.\n\n## Primitives, Particles and Atoms\n\nAt the core of coss ui are the **UI primitives**—unstyled, accessible building blocks powered by Base UI. These are the foundation: low-level components that handle accessibility, focus management, and keyboard interactions, without dictating design.\n\nOn top of these primitives, we introduce [particles](/ui/particles). Particles are **pre-assembled components**—like authentication forms, tables, or date pickers—that combine multiple primitives into ready-to-use solutions. They’re a bit more opinionated in design, but still easy to customize, extend, or break apart when needed.\n\nFinally, we go a step further with [atoms](https://cal.com/atoms). Atoms are **API-enhanced Particles**: components that don’t just manage UI state locally, but also integrate with external data and services. Think of them as smart components that connect UI to APIs, providing out-of-the-box behaviors for common patterns (authentication flows, scheduling, etc.).\n\nTogether, primitives, particles, and atoms give you a full spectrum:\n\n- **Primitives** → the foundation\n- **Particles** → the patterns\n- **Atoms** → the integrations\n\nThis layered approach lets you choose the right level of abstraction for your project—whether you need a barebone primitive, a polished UI pattern, or a complete API-ready solution.\n\n## Built for Humans and AI\n\nWe're building an infrastructure for both humans and AI. Our components are written to be clear, readable, and predictable, so that language models can understand, reason about, and modify them.\n\n## Open Source, Made Sustainable\n\nThis project is open source, and not just in name—it’s part of the **COSS** (Commercial Open Source Software) philosophy. We build in public, maintain transparency, and believe that open source works best when it's sustainable.\n\nAs part of [coss.com’s mission](https://coss.com), we support open source projects so they can grow, maintain long-term viability, and provide value not just for users, but contributors. We offer tools, docs, infrastructure, and community so your work doesn’t just survive—it thrives.\n\nWe’re excited to see what you build with it, and always welcome contributions, feedback, or improvements.\n\n## Get Involved\n\nWe're always looking for contributors. Whether it's a bug report, a new feature, or a documentation update, we appreciate your help.\n\nTo get started, check out our contribution guidelines on GitHub. You can find open issues and submit pull requests in our repository.\n"
  },
  {
    "path": "apps/ui/content/docs/(root)/meta.json",
    "content": "{\n  \"pages\": [\"index\", \"get-started\", \"styling\", \"radix-migration\", \"roadmap\"],\n  \"title\": \"Overview\"\n}\n"
  },
  {
    "path": "apps/ui/content/docs/(root)/radix-migration.mdx",
    "content": "---\ntitle: Migrating from Radix\nslug: radix-migration\ndescription: A comprehensive guide for migrating from Radix-based libraries to coss ui components.\n---\n\nThis guide is for developers who already have applications built on Radix-based libraries — frameworks that wrap Radix primitives — and **want to adopt coss ui**.\n\n**coss ui** is built on top of **[Base UI](https://base-ui.com/)**, using a custom abstraction that stays intentionally close to its mental model. The component API exposed by coss ui is intentionally similar to shadcn/ui, which is why this guide also highlights the main differences between shadcn/ui and coss ui.\n\n## Overview\n\n**coss ui** uses **Base UI** internally, not Radix. This means the architecture and API patterns are different by design. However, we've worked to make the migration path as clear as possible by:\n\n- Providing detailed component-by-component migration guides below\n- Maintaining similar component names and structures where it makes sense\n- Offering clear prop mappings and code examples\n\n**Tip:** This migration guide is structured to be LLM-friendly. You can provide this page to AI coding assistants (like Claude, ChatGPT, etc.) to help automate the conversion of your Radix components to coss ui.\n\n## General Migration Patterns\n\n### The asChild to render Pattern\n\nThe most common change across all components is replacing Radix UI's `asChild` prop with Base UI's `render` prop:\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"Radix\"\n// [!code word:asChild]\n<DropdownMenuTrigger asChild>\n  <Button>Edit profile</Button>\n</DropdownMenuTrigger>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n<MenuTrigger render={<Button />}>Edit profile</MenuTrigger>\n```\n</span>\n\n### Component Naming Conventions\n\nSome components have updated names for clarity and consistency:\n\n- `*Content` → `*Popup` or `*Panel` (e.g., `DialogContent` → `DialogPopup`)\n- Legacy names are often kept for backward compatibility\n\n## Component Migration Guides\n\n### Accordion\n\n**Quick Checklist:**\n- Replace `type=\"multiple\"` → `multiple={true}` on `Accordion`\n- Remove `type=\"single\"` from `Accordion`\n- Remove `collapsible` from `Accordion`\n- Always use arrays for `defaultValue`\n- Use `AccordionPanel` going forward; `AccordionContent` remains for legacy\n- If you used `asChild` on parts, switch to the `render` prop\n\n**Prop Mapping:**\n\n| Component   | Radix UI Prop                             | Base UI Prop                          |\n| ----------- | ----------------------------------------- | ------------------------------------- |\n| `Accordion` | `type` (enum, `\"single\"` or `\"multiple\"`) | `multiple` (boolean, default: `false`) |\n| `Accordion` | `collapsible`                             | _removed_                             |\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:type=\"multiple\"]\n// [!code word:collapsible]\n// [!code word:\"item-1\":1]\n<Accordion type=\"multiple\" collapsible defaultValue=\"item-1\">\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Title</AccordionTrigger>\n    <AccordionContent>Content</AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:multiple={true}]\n// [!code word:\\{\\[\"item-1\"\\]\\}]\n<Accordion multiple={true} defaultValue={[\"item-1\"]}>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Title</AccordionTrigger>\n    <AccordionPanel>Content</AccordionPanel>\n  </AccordionItem>\n</Accordion>\n```\n</span>\n\n### Alert\n\n**New Variants:**\n\nWe've added new colored variants for better semantic meaning:\n\n| Variant   | Description                       |\n| --------- | --------------------------------- |\n| `info`    | Displays an info alert (blue)     |\n| `success` | Displays a success alert (green)  |\n| `warning` | Displays a warning alert (yellow) |\n| `error`   | Displays an error alert (red)     |\n\nEnsure you have the following variables imported in your CSS file:\n\n- `--destructive-foreground`\n- `--info`\n- `--info-foreground`\n- `--success`\n- `--success-foreground`\n- `--warning`\n- `--warning-foreground`\n\n### Alert Dialog\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `AlertDialogTrigger` and closing buttons\n- Replace `AlertDialogAction` and `AlertDialogCancel` → `AlertDialogClose`\n- Prefer `AlertDialogPopup`; `AlertDialogContent` remains for legacy\n- Use `AlertDialogPanel` to wrap main content between `AlertDialogHeader` and `AlertDialogFooter`\n- If you used `asChild` on any other parts, switch to the `render` prop\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n// [!code word:AlertDialogCancel]\n// [!code word:AlertDialogAction]\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button variant=\"outline\">Show Alert Dialog</Button>\n  </AlertDialogTrigger>\n  <AlertDialogContent>\n    <AlertDialogHeader>\n      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n      <AlertDialogDescription>\n        This action cannot be undone.\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\n      <AlertDialogAction asChild>\n        <Button>Continue</Button>\n      </AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n// [!code word:AlertDialogClose]\n// [!code word:<AlertDialogPanel>Content</AlertDialogPanel>]\n<AlertDialog>\n  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n    Show Alert Dialog\n  </AlertDialogTrigger>\n  <AlertDialogPopup>\n    <AlertDialogHeader>\n      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n      <AlertDialogDescription>\n        This action cannot be undone.\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogPanel>Content</AlertDialogPanel>\n    <AlertDialogFooter>\n      <AlertDialogClose render={<Button variant=\"ghost\" />}>\n        Cancel\n      </AlertDialogClose>\n      <AlertDialogClose render={<Button variant=\"destructive\" />}>\n        Continue\n      </AlertDialogClose>\n    </AlertDialogFooter>\n  </AlertDialogPopup>\n</AlertDialog>\n```\n</span>\n\n### Avatar\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `Avatar`\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<Avatar asChild>\n  <Link href=\"/profile\">\n    <AvatarImage src=\"avatar.jpg\" alt=\"User\" />\n    <AvatarFallback>U</AvatarFallback>\n  </Link>\n</Avatar>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n<Avatar render={<Link href=\"/profile\" />}>\n  <AvatarImage src=\"avatar.jpg\" alt=\"User\" />\n  <AvatarFallback>U</AvatarFallback>\n</Avatar>\n```\n</span>\n\n### Badge\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `Badge`\n\n**Size Comparison:**\n\nCompared to shadcn/ui, our `Badge` component includes size variants for better density control. shadcn/ui badges have a fixed size, while our component offers flexible sizing with `sm`, `default`, and `lg` options.\n\nSo, if you want to preserve the original shadcn/ui badge size, you should use the `lg` size in coss ui.\n\n**New Variants:**\n\nWe've added new colored variants to the existing ones (`default`, `destructive`, `outline`, `secondary`) for better semantic meaning and visual communication:\n\n| Variant   | Description                        |\n| --------- | ---------------------------------- |\n| `info`    | Blue badge for information         |\n| `success` | Green badge for success states     |\n| `warning` | Yellow badge for warnings          |\n| `error`   | Red badge for errors               |\n\nEnsure you have the following variables imported in your CSS file:\n\n- `--destructive-foreground`\n- `--info`\n- `--info-foreground`\n- `--success`\n- `--success-foreground`\n- `--warning`\n- `--warning-foreground`\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<Badge asChild>\n  <Link href=\"/new\">New</Link>\n</Badge>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n<Badge render={<Link href=\"/new\" />}>New</Badge>\n```\n</span>\n\n### Button\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `Button`\n\n**Size Comparison:**\n\ncoss ui button sizes are more compact compared to shadcn/ui, making them better suited for dense applications. We also introduce new sizes (`xs`, `xl`, `icon-sm`, `icon-lg`) for more granular control:\n\n| Size      | Height (shadcn/ui) | Height (coss ui) |\n| --------- | ------------------ | ---------------- |\n| `xs`      | -                  | 24px             |\n| `sm`      | 32px               | 28px             |\n| `default` | 36px               | 32px             |\n| `lg`      | 40px               | 36px             |\n| `xl`      | -                  | 40px             |\n| `icon`    | 36px               | 32px             |\n| `icon-sm` | -                  | 28px             |\n| `icon-lg` | -                  | 36px             |\n\nSo, for example, if you were using the `default` size in shadcn/ui and you want to preserve the original height, you should use the `lg` size in coss ui.\n\n**New Variants:**\n\nWe've added a new `destructive-outline` variant for better UX patterns:\n\n- **Primary actions**: Use `destructive` (solid red) for the main destructive action\n- **Secondary triggers**: Use `destructive-outline` (outline red) to avoid alarming red buttons in the main interface\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<Button asChild>\n  <Link href=\"/login\">Login</Link>\n</Button>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n<Button render={<Link href=\"/login\" />}>Login</Button>\n```\n</span>\n\n### Card\n\n**Quick Checklist:**\n- Use `CardPanel` going forward; `CardContent` remains for legacy\n\n### Checkbox\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `Checkbox`\n\n\n### Collapsible\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `CollapsibleTrigger`\n- Prefer `CollapsiblePanel`; `CollapsibleContent` remains for legacy\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<Collapsible>\n  <CollapsibleTrigger asChild>\n    <Button>Toggle</Button>\n  </CollapsibleTrigger>\n  <CollapsibleContent>Content here</CollapsibleContent>\n</Collapsible>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n// [!code word:CollapsiblePanel]\n<Collapsible>\n  <CollapsibleTrigger render={<Button />}>Toggle</CollapsibleTrigger>\n  <CollapsiblePanel>Content here</CollapsiblePanel>\n</Collapsible>\n```\n</span>\n\n### Command\n\nThe API is significantly different from shadcn/ui (cmdk). Please review both docs before migrating: [cmdk Docs](https://cmdk.paco.me/) and [shadcn/ui Command](https://ui.shadcn.com/docs/components/command), and our Base UI Autocomplete docs.\n\n**Key Differences:**\n\n- No `cmdk` dependency - built entirely with Base UI's Autocomplete and Dialog components\n- Data-driven approach - pass an `items` array to `Command` and use render functions instead of manually composing `CommandItem` children\n- Use `CommandCollection` within `CommandGroup` when rendering grouped data with the items pattern\n- Use `CommandDialog`, `CommandDialogTrigger`, and `CommandDialogPopup` for dialog functionality instead of composing separate Dialog components\n- `CommandGroup` uses `<CommandGroupLabel>` as a child instead of a `heading` prop\n\n### Dialog\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `DialogTrigger` and closing buttons\n- Prefer `DialogPopup`; `DialogContent` remains for legacy\n- Use `DialogPanel` to wrap main content between `DialogHeader` and `DialogFooter`\n- If you used `asChild` on any other parts, switch to the `render` prop\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<Dialog>\n  <DialogTrigger asChild>\n    <Button variant=\"outline\">Show Dialog</Button>\n  </DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Dialog Title</DialogTitle>\n      <DialogDescription>Dialog Description</DialogDescription>\n    </DialogHeader>\n    <DialogFooter>\n      <DialogClose asChild>\n        <Button variant=\"ghost\">Cancel</Button>\n      </DialogClose>\n    </DialogFooter>\n  </DialogContent>\n</Dialog>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n// [!code word:<DialogPanel>Content</DialogPanel>]\n<Dialog>\n  <DialogTrigger render={<Button variant=\"outline\" />}>\n    Show Dialog\n  </DialogTrigger>\n  <DialogPopup>\n    <DialogHeader>\n      <DialogTitle>Dialog Title</DialogTitle>\n      <DialogDescription>Dialog Description</DialogDescription>\n    </DialogHeader>\n    <DialogPanel>Content</DialogPanel>\n    <DialogFooter>\n      <DialogClose render={<Button variant=\"ghost\" />}>Cancel</DialogClose>\n    </DialogFooter>\n  </DialogPopup>\n</Dialog>\n```\n</span>\n\n### Group (Button Group)\n\n**Quick Checklist:**\n- Prefer `Group*` component names; `ButtonGroup*` remain for compatibility\n- `GroupSeparator` is **always required** between controls, including outline buttons (unlike shadcn where separators are optional for outline buttons). This ensures consistent focus state handling and better accessibility\n- If you used `asChild` on `ButtonGroupText`, switch to the `render` prop for custom components\n\n### Input\n\nCompared to shadcn/ui, our `Input` component includes size variants for better density control. shadcn/ui inputs have a fixed height of 36px, while our component offers flexible sizing with `sm` (28px), `default` (32px), and `lg` (36px) options.\n\nSo, if you want to preserve the original shadcn/ui input height (36px), you should use the `lg` size in coss ui.\n\n### Input Group\n\n**Quick Checklist:**\n- No `InputGroupButton` component - use the regular `Button` component directly inside `InputGroupAddon` instead\n- To disable an input group, disable the `InputGroupInput` or `InputGroupTextarea` directly (and any Button inside it) - no need to add a `data-disabled` attribute on `InputGroup`.\n\n### Menu\n\n**Prop Mapping:**\n\n| Component  | Radix UI Prop | Base UI Prop |\n| ---------- | ------------- | ------------ |\n| `MenuItem` | `onSelect`    | `onClick`    |\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `MenuTrigger` and `MenuItem`\n- Replace `onSelect` → `onClick` on menu items\n- Update import path from `@/components/ui/dropdown-menu` → `@/components/ui/menu`\n- Prefer `Menu*` component names; `DropdownMenu*` remain for legacy\n- Prefer `MenuGroupLabel` instead of `DropdownMenuLabel`\n- Prefer `MenuPopup` instead of `DropdownMenuContent`\n- Prefer `MenuSubPopup` instead of `DropdownMenuSubContent`\n- If you used `asChild` on any other parts, switch to the `render` prop\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:onSelect]\n<DropdownMenu>\n  <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuItem\n      onSelect={() => {\n        console.log(\"Dashboard\")\n      }}\n    >\n      Dashboard\n    </DropdownMenuItem>\n    <DropdownMenuItem>Settings</DropdownMenuItem>\n    <DropdownMenuItem>Sign out</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:onClick]\n<Menu>\n  <MenuTrigger>Open menu</MenuTrigger>\n  <MenuPopup>\n    <MenuItem\n      onClick={() => {\n        console.log(\"Dashboard\")\n      }}\n    >\n      Dashboard\n    </MenuItem>\n    <MenuItem>Settings</MenuItem>\n    <MenuItem>Sign out</MenuItem>\n  </MenuPopup>\n</Menu>\n```\n</span>\n\n### Popover\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `PopoverTrigger` and closing buttons\n- Prefer `PopoverPopup`; `PopoverContent` remains for legacy\n- If you used `asChild` on any other parts, switch to the `render` prop\n\n**Additional Notes:**\n\nBase UI introduces `PopoverTitle` and `PopoverDescription` to structure headings and helper text inside the popup. Base UI also introduces a `PopoverClose` component for adding close buttons to the popup.\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<Popover>\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">Open Popover</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <h2>Popover Title</h2>\n    <p>Popover Description</p>\n  </PopoverContent>\n</Popover>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:PopoverTitle]\n// [!code word:PopoverDescription]\n// [!code word:PopoverClose]\n// [!code word:render:2]\n<Popover>\n  <PopoverTrigger render={<Button variant=\"outline\" />}>\n    Open Popover\n  </PopoverTrigger>\n  <PopoverPopup>\n    <PopoverTitle>Popover Title</PopoverTitle>\n    <PopoverDescription>Popover Description</PopoverDescription>\n    <PopoverClose render={<Button variant=\"ghost\" />}>Close</PopoverClose>\n  </PopoverPopup>\n</Popover>\n```\n</span>\n\n### Preview Card\n\n**Quick Checklist:**\n- Update import path from `@/components/ui/hover-card` → `@/components/ui/preview-card`\n- Prefer `PreviewCard*` component names; `HoverCard*` remain for legacy\n- Prefer `PreviewCardPopup` instead of `HoverCardContent`\n- If you used `asChild` on parts, switch to the `render` prop\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<HoverCard>\n  <HoverCardTrigger asChild>\n    <Button variant=\"outline\">Open Preview Card</Button>\n  </HoverCardTrigger>\n  <HoverCardContent>Preview Card Content</HoverCardContent>\n</HoverCard>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n<PreviewCard>\n  <PreviewCardTrigger render={<Button variant=\"outline\" />}>\n    Open Preview Card\n  </PreviewCardTrigger>\n  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>\n</PreviewCard>\n```\n</span>\n\n### Progress\n\n**Quick Checklist:**\n- Prefer `ProgressLabel` and `ProgressValue` for label/value instead of inline elements\n- If you render children inside `Progress`, you must include `ProgressTrack` and `ProgressIndicator` (otherwise the bar will not display). Without children, a default bar is rendered for you\n- If you used `asChild`, switch to the `render` prop\n\n**Additional Notes:**\n\nBase UI introduces separate parts — `ProgressLabel`, `ProgressValue`, `ProgressTrack`, and `ProgressIndicator` — which you compose inside `Progress` for greater flexibility.\n\n### Radio Group\n\n**Quick Checklist:**\n- Use `Radio` going forward; `RadioGroupItem` remains for legacy\n- Replace `asChild` → `render` on parts if used\n\n### Scroll Area\n\n**Quick Checklist:**\n- If you used `asChild` on parts, switch to the `render` prop\n\n### Select\n\n**Important:** Base UI changes how options are provided. Instead of deriving options from children only (Radix pattern), you should pass an `items` prop (array or record) so values and labels are known before hydration. This avoids SSR pitfalls and improves mount performance. Alternatively, provide a function child to `SelectValue` to format the label. See the [Base UI Select docs](https://base-ui.com/react/components/select).\n\n**Prop Mapping:**\n\n| Component     | Radix UI Prop          | Base UI Prop    |\n| ------------- | ---------------------- | --------------- |\n| `Select`      | `items`                | `items`         |\n| `SelectValue` | `placeholder`          | _removed_       |\n| `SelectPopup` | `alignItemWithTrigger` | _no equivalent_ |\n\n**Quick Checklist:**\n- Set `items` prop on `Select`\n- Remove `placeholder` from `Select`\n- Prefer `SelectPopup` instead of `SelectContent`\n- If you used `asChild` on parts, switch to the `render` prop\n\n**Size Comparison:**\n\ncoss ui select sizes are more compact compared to shadcn/ui, making them better suited for dense applications:\n\n| Size      | Height (shadcn/ui) | Height (coss ui) |\n| --------- | ------------------ | ---------------- |\n| `sm`      | 32px               | 28px             |\n| `default` | 36px               | 32px             |\n| `lg`      | -                  | 36px             |\n\nSo, for example, if you were using the `default` size in shadcn/ui and you want to preserve the original height, you should use the `lg` size in coss ui.\n\n**Additional Notes:**\n\nBase UI introduces the `alignItemWithTrigger` prop to control whether the `SelectContent` overlaps the `SelectTrigger` so the selected item's text is aligned with the trigger's value text.\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:placeholder=\"Select a framework\"]\n<Select>\n  <SelectTrigger>\n    <SelectValue placeholder=\"Select a framework\" />\n  </SelectTrigger>\n  <SelectContent>\n    <SelectItem value=\"next\">Next.js</SelectItem>\n    <SelectItem value=\"vite\">Vite</SelectItem>\n    <SelectItem value=\"astro\">Astro</SelectItem>\n  </SelectContent>\n</Select>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:alignItemWithTrigger={false}]\n// [!code word:items:2]\n<Select\n  items={[\n    { label: \"Select a framework\", value: null },\n    { label: \"Next.js\", value: \"next\" },\n    { label: \"Vite\", value: \"vite\" },\n    { label: \"Astro\", value: \"astro\" },\n  ]}\n>\n  <SelectTrigger>\n    <SelectValue />\n  </SelectTrigger>\n  <SelectPopup alignItemWithTrigger={false}>\n    {items.map((item) => (\n      <SelectItem key={item.value} value={item}>\n        {item.label}\n      </SelectItem>\n    ))}\n  </SelectPopup>\n</Select>\n```\n</span>\n\n### Sheet\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `SheetTrigger` and closing buttons\n- Prefer `SheetPopup`; `SheetContent` remains for legacy\n- Use `SheetPanel` to wrap main content\n- If you used `asChild` on any other parts, switch to the `render` prop\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<Sheet>\n  <SheetTrigger asChild>\n    <Button variant=\"outline\">Open Sheet</Button>\n  </SheetTrigger>\n  <SheetContent>\n    <SheetHeader>\n      <SheetTitle>Sheet Title</SheetTitle>\n    </SheetHeader>\n    Content here\n    <SheetFooter>\n      <SheetClose asChild>\n        <Button>Close</Button>\n      </SheetClose>\n    </SheetFooter>\n  </SheetContent>\n</Sheet>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n// [!code word:<SheetPanel>Content here</SheetPanel>]\n<Sheet>\n  <SheetTrigger render={<Button variant=\"outline\" />}>\n    Open Sheet\n  </SheetTrigger>\n  <SheetPopup>\n    <SheetHeader>\n      <SheetTitle>Sheet Title</SheetTitle>\n    </SheetHeader>\n    <SheetPanel>Content here</SheetPanel>\n    <SheetFooter>\n      <SheetClose render={<Button />}>Close</SheetClose>\n    </SheetFooter>\n  </SheetPopup>\n</Sheet>\n```\n</span>\n\n### Slider\n\n**Quick Checklist:**\n- coss ui `Slider` uses Base UI's multiple value approach\n- Always pass values as arrays (e.g., `value={[50]}` instead of `value={50}`)\n- `onValueChange` receives an array of numbers\n- Multiple thumbs are supported natively via array length\n- Replace `asChild` → `render` on parts if used\n\n### Switch\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `Switch` if used\n\n### Tabs\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on parts if used\n- Use `TabsTab` going forward; `TabsTrigger` remains for legacy\n- Prefer `TabsPanel`; `TabsContent` remains for legacy\n\n**Additional Notes:**\n\nCompared to shadcn/ui, our `TabsList` component adds `variant` prop, which allows you to choose between `default` and `underline` styles.\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:TabsContent]\n<Tabs defaultValue=\"tab-1\">\n  <TabsList>\n    <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n    <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n    <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n  </TabsList>\n  <TabsContent value=\"tab-1\">Tab 1 content</TabsContent>\n  <TabsContent value=\"tab-2\">Tab 2 content</TabsContent>\n  <TabsContent value=\"tab-3\">Tab 3 content</TabsContent>\n</Tabs>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:TabsPanel]\n<Tabs defaultValue=\"tab-1\">\n  <TabsList>\n    <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n    <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n    <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n  </TabsList>\n  <TabsPanel value=\"tab-1\">Tab 1 content</TabsPanel>\n  <TabsPanel value=\"tab-2\">Tab 2 content</TabsPanel>\n  <TabsPanel value=\"tab-3\">Tab 3 content</TabsPanel>\n</Tabs>\n```\n</span>\n\n### Textarea\n\nCompared to shadcn/ui, our `Textarea` component includes size variants (`sm`, `default`, `lg`) for better density control. For visual consistency, if you're using `size=\"lg\"` on other form elements like inputs, you should add the same size to textareas as well.\n\n### Toast\n\nThe API is significantly different from shadcn/ui (Sonner). Please review both docs before migrating: [Sonner Docs](https://sonner.emilkowal.ski/) and [shadcn/ui Sonner](https://ui.shadcn.com/docs/components/sonner), and our Base UI toast docs.\n\n**Quick Checklist:**\n- Replace `<Toaster />` component in layout → `<ToastProvider>` wrapper\n- Toast API calls differ significantly - see comparison below\n- Toast actions use different patterns\n\n**Comparison Examples:**\n\n**shadcn/ui (Sonner)**\n\n```tsx title=\"app/layout.tsx\"\nimport { Toaster } from \"@/components/ui/sonner\"\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <head />\n      <body>\n        <main>{children}</main>\n        <Toaster />\n      </body>\n    </html>\n  )\n}\n```\n\n```tsx\ntoast(\"Event has been created\", {\n  description: \"Sunday, December 03, 2023 at 9:00 AM\",\n  cancel: {\n    label: \"Undo\",\n  },\n})\n```\n\n**coss ui (Base UI)**\n\n```tsx title=\"app/layout.tsx\"\nimport { ToastProvider } from \"@/components/ui/toast\"\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <head />\n      <body>\n        <ToastProvider>\n          <main>{children}</main>\n        </ToastProvider>\n      </body>\n    </html>\n  )\n}\n```\n\n```tsx\nonClick={() => {\n  const id = toastManager.add({\n    title: \"Event has been created\",\n    description: \"Sunday, December 03, 2023 at 9:00 AM\",\n    type: \"success\",\n    actionProps: {\n      children: \"Undo\",\n      onClick: () => toastManager.close(id),\n    },\n  })\n}}\n```\n\n### Toggle\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `Toggle` if used\n\n### Toggle Group\n\n**Prop Mapping:**\n\n| Component     | Radix UI Prop                             | Base UI Prop                           |\n| ------------- | ----------------------------------------- | -------------------------------------- |\n| `ToggleGroup` | `type` (enum, `\"single\"` or `\"multiple\"`) | `multiple` (boolean, default: `false`) |\n\n**Quick Checklist:**\n- Replace `type=\"multiple\"` → `multiple` on `ToggleGroup`\n- Remove `type=\"single\"` from `ToggleGroup`\n- Always use arrays for `defaultValue`\n- Use `Toggle` going forward; `ToggleGroupItem` remains for legacy\n- Replace `asChild` → `render` on parts if used\n\n**Size Comparison:**\n\ncoss ui toggle group sizes are more compact compared to shadcn/ui, making them better suited for dense applications:\n\n| Size      | Height (shadcn/ui) | Height (coss ui) |\n| --------- | ------------------ | ---------------- |\n| `sm`      | 32px               | 28px             |\n| `default` | 36px               | 32px             |\n| `lg`      | -                  | 36px             |\n\nSo, for example, if you were using the `default` size in shadcn/ui and you want to preserve the original height, you should use the `lg` size in coss ui.\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:type=\"multiple\"]\n<ToggleGroup type=\"multiple\" defaultValue={[\"bold\"]}>\n  <ToggleGroupItem value=\"bold\">B</ToggleGroupItem>\n  <ToggleGroupItem value=\"italic\">I</ToggleGroupItem>\n  <ToggleGroupItem value=\"underline\">U</ToggleGroupItem>\n</ToggleGroup>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:multiple]\n<ToggleGroup multiple defaultValue={[\"bold\"]}>\n  <Toggle value=\"bold\">B</Toggle>\n  <Toggle value=\"italic\">I</Toggle>\n  <Toggle value=\"underline\">U</Toggle>\n</ToggleGroup>\n```\n</span>\n\n### Tooltip\n\n**Quick Checklist:**\n- Replace `asChild` → `render` on `TooltipTrigger`\n- Prefer `TooltipPopup`; `TooltipContent` remains for legacy\n\n**Comparison Example:**\n\n<span data-lib=\"radix-ui\">\n```tsx title=\"shadcn/ui\"\n// [!code word:asChild]\n<Tooltip>\n  <TooltipTrigger asChild>\n    <Button variant=\"outline\">Hover me</Button>\n  </TooltipTrigger>\n  <TooltipContent>Tooltip content</TooltipContent>\n</Tooltip>\n```\n</span>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"coss ui\"\n// [!code word:render]\n<Tooltip>\n  <TooltipTrigger render={<Button variant=\"outline\" />}>\n    Hover me\n  </TooltipTrigger>\n  <TooltipPopup>Tooltip content</TooltipPopup>\n</Tooltip>\n```\n</span>\n\n## Additional Resources\n\n- [Base UI Documentation](https://base-ui.com/) - Official Base UI docs\n- [Component Documentation](/ui/docs/components) - Individual component docs with examples\n- [Styling Guide](/ui/docs/styling) - Learn about our color system and theming\n\n## Need Help?\n\nIf you encounter issues during migration or have questions about specific components, please:\n\n- Check the individual component documentation pages\n- Review the Base UI documentation for deeper understanding\n- Open an issue on our GitHub repository\n"
  },
  {
    "path": "apps/ui/content/docs/(root)/roadmap.mdx",
    "content": "---\ntitle: Roadmap\ndescription: Current state of coss ui and where we’re headed next.\n---\n\n**coss ui** is the evolution of **Origin UI**, an open-source collection of React and Tailwind components created by Pasquale Vitiello and Davide Pacilio. It was recently **acquired by Cal.com** and grown into a broader, more ambitious ecosystem, with Pasquale contributing directly to the development of the new UI.\n\nOur goal is to **bring together the best parts of Origin UI** with a stronger foundation—Base UI primitives—so developers get not just components, but a layered system of **primitives**, **particles**, and **atoms**.\n\n## Origin UI\n\nOrigin UI offered a large collection of 600+ ready-to-use UI components. With the **transition to coss ui**:\n\n- The existing **Origin UI components** will evolve into **particles**—higher-level UI patterns composed of Base UI primitives.\n- The original Origin UI collection remains available on [this page](/origin), so developers can continue to access it during the transition.\n\n## Current Status\n\n- **40+ UI primitives** already available, with more on the way.\n- A **growing set of particles**, progressively expanding to match and surpass the current Origin UI collection.\n\n## What’s Next\n\n- Expand the **primitives set**, ensuring full coverage of common UI needs.\n- Add more **particles**, aligning with and eventually replacing the original Origin UI collection.\n- Introduce **atoms**, API-enhanced components that bring external integrations out of the box.\n"
  },
  {
    "path": "apps/ui/content/docs/(root)/styling.mdx",
    "content": "---\ntitle: Styling\ndescription: A guide to styling components with our color system.\n---\n\n## Overview\n\nThis UI library is optimized to work with specific color tokens that provide crisp, contrasted borders and enhanced visual depth. Our styling system builds upon [shadcn/ui's CSS variables approach](https://ui.shadcn.com/docs/theming) to ensure consistency and maintainability.\n\nOur components use opaque borders instead of solid ones to ensure crisp, contrasted borders even when backgrounds lack sufficient contrast. These opaque borders mix with bottom shadows to create enhanced contrast and visual depth.\n\nWhile this color system is optional, it's designed to provide optimal visual results. Using conventional color tokens may result in inconsistent borders and shadows that don't achieve the intended design quality.\n\n## Installation\n\nSee [Get Started](/ui/docs/get-started) for installing with the CLI. If you prefer to add the theme manually, paste the following into your `globals.css`:\n\n```css title=\"app/globals.css\"\n@theme inline {\n  --font-sans: var(--font-sans);\n  --font-heading: var(--font-heading);\n  --font-mono: var(--font-mono);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar: var(--sidebar);\n  --color-ring: var(--ring);\n  --color-input: var(--input);\n  --color-border: var(--border);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-info: var(--info);\n  --color-info-foreground: var(--info-foreground);\n  --color-success: var(--success);\n  --color-success-foreground: var(--success-foreground);\n  --color-warning: var(--warning);\n  --color-warning-foreground: var(--warning-foreground);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-accent: var(--accent);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-muted: var(--muted);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-secondary: var(--secondary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-primary: var(--primary);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-popover: var(--popover);\n  --color-card-foreground: var(--card-foreground);\n  --color-card: var(--card);\n  --animate-skeleton: skeleton 2s -1s infinite linear;\n  @keyframes skeleton {\n    to {\n      background-position: -200% 0;\n    }\n  }\n}\n\n:root {\n  --radius: 0.625rem;\n  --background: var(--color-white);\n  --foreground: var(--color-neutral-800);\n  --card: var(--color-white);\n  --card-foreground: var(--color-neutral-800);\n  --popover: var(--color-white);\n  --popover-foreground: var(--color-neutral-800);\n  --primary: var(--color-neutral-800);\n  --primary-foreground: var(--color-neutral-50);\n  --secondary: --alpha(var(--color-black) / 4%);\n  --secondary-foreground: var(--color-neutral-800);\n  --muted: --alpha(var(--color-black) / 4%);\n  --muted-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-500) 90%,\n    var(--color-black)\n  );\n  --accent: --alpha(var(--color-black) / 4%);\n  --accent-foreground: var(--color-neutral-800);\n  --destructive: var(--color-red-500);\n  --destructive-foreground: var(--color-red-700);\n  --info: var(--color-blue-500);\n  --info-foreground: var(--color-blue-700);\n  --success: var(--color-emerald-500);\n  --success-foreground: var(--color-emerald-700);\n  --warning: var(--color-amber-500);\n  --warning-foreground: var(--color-amber-700);\n  --border: --alpha(var(--color-black) / 8%);\n  --input: --alpha(var(--color-black) / 10%);\n  --ring: var(--color-neutral-400);\n  --sidebar: var(--color-neutral-50);\n  --sidebar-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-800) 64%,\n    var(--sidebar)\n  );\n  --sidebar-primary: var(--color-neutral-800);\n  --sidebar-primary-foreground: var(--color-neutral-50);\n  --sidebar-accent: --alpha(var(--color-black) / 4%);\n  --sidebar-accent-foreground: var(--color-neutral-800);\n  --sidebar-border: --alpha(var(--color-black) / 6%);\n  --sidebar-ring: var(--color-neutral-400);\n}\n\n.dark {\n  --background: color-mix(\n    in srgb,\n    var(--color-neutral-950) 95%,\n    var(--color-white)\n  );\n  --foreground: var(--color-neutral-100);\n  --card: color-mix(in srgb, var(--background) 98%, var(--color-white));\n  --card-foreground: var(--color-neutral-100);\n  --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));\n  --popover-foreground: var(--color-neutral-100);\n  --primary: var(--color-neutral-100);\n  --primary-foreground: var(--color-neutral-800);\n  --secondary: --alpha(var(--color-white) / 4%);\n  --secondary-foreground: var(--color-neutral-100);\n  --muted: --alpha(var(--color-white) / 4%);\n  --muted-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-500) 90%,\n    var(--color-white)\n  );\n  --accent: --alpha(var(--color-white) / 4%);\n  --accent-foreground: var(--color-neutral-100);\n  --destructive: color-mix(\n    in srgb,\n    var(--color-red-500) 90%,\n    var(--color-white)\n  );\n  --destructive-foreground: var(--color-red-400);\n  --info: var(--color-blue-500);\n  --info-foreground: var(--color-blue-400);\n  --success: var(--color-emerald-500);\n  --success-foreground: var(--color-emerald-400);\n  --warning: var(--color-amber-500);\n  --warning-foreground: var(--color-amber-400);\n  --border: --alpha(var(--color-white) / 6%);\n  --input: --alpha(var(--color-white) / 8%);\n  --ring: var(--color-neutral-500);\n  --sidebar: color-mix(\n    in srgb,\n    var(--color-neutral-950) 97%,\n    var(--color-white)\n  );\n  --sidebar-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-100) 64%,\n    var(--sidebar)\n  );\n  --sidebar-primary: var(--color-neutral-100);\n  --sidebar-primary-foreground: var(--color-neutral-800);\n  --sidebar-accent: --alpha(var(--color-white) / 4%);\n  --sidebar-accent-foreground: var(--color-neutral-100);\n  --sidebar-border: --alpha(var(--color-white) / 5%);\n  --sidebar-ring: var(--color-neutral-400);\n}\n```\n\n## Font Variables\n\nComponents like Dialog, AlertDialog, Sheet, and Empty use the `font-heading` class for titles. The coss style preset defines `--font-sans`, `--font-heading`, and `--font-mono` with system font fallbacks. To use custom fonts, define these variables in your layout using `next/font`:\n\n```tsx title=\"app/layout.tsx\"\nimport { Geist, Geist_Mono } from \"next/font/google\";\n\nconst fontSans = Geist({ variable: \"--font-sans\", subsets: [\"latin\"] });\nconst fontHeading = Geist({ variable: \"--font-heading\", subsets: [\"latin\"], weight: \"600\" });\nconst fontMono = Geist_Mono({ variable: \"--font-mono\", subsets: [\"latin\"] });\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <body className={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} font-sans`}>\n        {children}\n      </body>\n    </html>\n  );\n}\n```\n\nApply the variables to `html` or `body` so they cascade. The `font-sans` class sets the default body font.\n\n## Base UI Setup\n\nSince this library is built on Base UI, you need to configure CSS isolation to ensure portaled components (Dialogs, Popovers, Selects, etc.) render correctly above page content.\n\n### Application Root Isolation\n\nAdd `isolation: isolate` to your application's root wrapper div. This creates a separate stacking context so portaled components always appear above page contents without z-index conflicts.\n\n```tsx title=\"app/layout.tsx\"\n<body>\n  <div className=\"isolate relative flex min-h-svh flex-col\">\n    {children}\n  </div>\n</body>\n```\n\n### iOS Safari Compatibility\n\nFor iOS Safari 26+ compatibility, add `position: relative` to the body element. This ensures backdrops properly cover the visual viewport after page scrolling.\n\n```tsx title=\"app/layout.tsx\"\n<body className=\"relative\">\n  <div className=\"isolate relative flex min-h-svh flex-col\">\n    {children}\n  </div>\n</body>\n```\n\nThese styles ensure Base UI components maintain proper rendering hierarchy and visual layering throughout your application. Without isolation, you may experience z-index conflicts where page content appears above modal dialogs or popovers.\n"
  },
  {
    "path": "apps/ui/content/docs/components/accordion.mdx",
    "content": "---\ntitle: Accordion\ndescription: A set of collapsible panels with headings and content.\n\nlinks:\n  doc: https://base-ui.com/react/components/accordion#api-reference\n---\n\n<ComponentPreview name=\"p-accordion-1\" align=\"start\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/accordion\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"accordion\" title=\"components/ui/accordion.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\n```\n\n```tsx\n<Accordion>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\n    <AccordionPanel>\n      Yes. It adheres to the WAI-ARIA design pattern.\n    </AccordionPanel>\n  </AccordionItem>\n</Accordion>\n```\n\n## API Reference\n\n### Accordion\n\nRoot component. Alias for `Accordion.Root` from Base UI.\n\n### AccordionItem\n\nIndividual accordion item container. Styled wrapper for `Accordion.Item` from Base UI with bottom border styling.\n\n### AccordionTrigger\n\nTrigger button that toggles the accordion panel. Styled wrapper for `Accordion.Trigger` from Base UI. Includes a built-in chevron icon that rotates when expanded.\n\n### AccordionPanel\n\nCollapsible content panel. Styled wrapper for `Accordion.Panel` from Base UI with animated height transitions. Also exported as `AccordionContent`.\n\n## Examples\n\n### Single Accordion\n\n<ComponentPreview name=\"p-accordion-2\" align=\"start\" />\n\n### Multiple Accordion\n\n<ComponentPreview name=\"p-accordion-3\" align=\"start\" />\n\n### Controlled Accordion\n\n<ComponentPreview name=\"p-accordion-4\" align=\"start\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/alert-dialog.mdx",
    "content": "---\ntitle: Alert Dialog\ndescription: A dialog that requires user response to proceed.\n\nlinks:\n  doc: https://base-ui.com/react/components/alert-dialog#api-reference\n---\n\n<ComponentPreview name=\"p-alert-dialog-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/alert-dialog\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"alert-dialog\" title=\"components/ui/alert-dialog.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogPanel,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\n```\n\n```tsx\n<AlertDialog>\n  <AlertDialogTrigger>Delete Account</AlertDialogTrigger>\n  <AlertDialogPopup>\n    <AlertDialogHeader>\n      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n      <AlertDialogDescription>\n        This action cannot be undone. This will permanently delete your account\n        and remove your data from our servers.\n      </AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogPanel>Content</AlertDialogPanel>\n    <AlertDialogFooter>\n      <AlertDialogClose>Cancel</AlertDialogClose>\n      <AlertDialogClose>Delete Account</AlertDialogClose>\n    </AlertDialogFooter>\n  </AlertDialogPopup>\n</AlertDialog>\n```\n\n## API Reference\n\n### AlertDialog\n\nRoot component. Alias for `AlertDialog.Root` from Base UI.\n\n### AlertDialogTrigger\n\nTrigger button that opens the alert dialog. Alias for `AlertDialog.Trigger` from Base UI.\n\n### AlertDialogPopup\n\nPopup container that displays the alert dialog content. Also exported as `AlertDialogContent`.\n\n| Prop                  | Type      | Default | Description                                      |\n| --------------------- | --------- | ------- | ------------------------------------------------ |\n| `bottomStickOnMobile` | `boolean` | `true`  | When true, sticks to the bottom of the screen on mobile devices |\n\n### AlertDialogHeader\n\nContainer for the alert dialog title and description.\n\n### AlertDialogFooter\n\nFooter section for action buttons.\n\n| Prop        | Type                     | Default     | Description                                      |\n| ----------- | ------------------------ | ----------- | ------------------------------------------------ |\n| `variant`   | `\"default\" \\| \"bare\"`    | `\"default\"` | Controls the footer styling. `default` includes border and background, `bare` removes them |\n\n**Example:**\n\n```tsx\n// Default variant (with border and background)\n<AlertDialogFooter>\n  <AlertDialogClose>Cancel</AlertDialogClose>\n  <AlertDialogClose>Delete</AlertDialogClose>\n</AlertDialogFooter>\n\n// Bare variant (no border or background)\n<AlertDialogFooter variant=\"bare\">\n  <AlertDialogClose>Cancel</AlertDialogClose>\n  <AlertDialogClose>Delete</AlertDialogClose>\n</AlertDialogFooter>\n```\n\n### AlertDialogTitle\n\nTitle component. Alias for `AlertDialog.Title` from Base UI.\n\n### AlertDialogDescription\n\nDescription component. Alias for `AlertDialog.Description` from Base UI.\n\n### AlertDialogClose\n\nClose button component. Alias for `AlertDialog.Close` from Base UI.\n\n### AlertDialogPortal\n\nPortal component for rendering outside the DOM hierarchy. Alias for `AlertDialog.Portal` from Base UI.\n\n### AlertDialogBackdrop\n\nBackdrop/overlay component. Also exported as `AlertDialogOverlay`. Alias for `AlertDialog.Backdrop` from Base UI.\n\n### AlertDialogViewport\n\nViewport component for positioning. Alias for `AlertDialog.Viewport` from Base UI.\n\n## Examples\n\n### Alert Dialog with Bare Footer\n\n<ComponentPreview name=\"p-alert-dialog-2\" />\n\n### Close Confirmation\n\n<ComponentPreview name=\"p-dialog-4\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/alert.mdx",
    "content": "---\ntitle: Alert\ndescription: A callout for displaying important information.\n---\n\n<ComponentPreview name=\"p-alert-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/alert\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Import the following variables into your CSS file</Step>\n\n```css\n@theme inline {\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-info: var(--info);\n  --color-info-foreground: var(--info-foreground);\n  --color-success: var(--success);\n  --color-success-foreground: var(--success-foreground);\n  --color-warning: var(--warning);\n  --color-warning-foreground: var(--warning-foreground);\n}\n\n:root {\n  --destructive-foreground: var(--color-red-400);\n  --info: var(--color-blue-500);\n  --info-foreground: var(--color-blue-700);\n  --success: var(--color-emerald-500);\n  --success-foreground: var(--color-emerald-700);\n  --warning: var(--color-amber-500);\n  --warning-foreground: var(--color-amber-700);\n}\n\n.dark {\n  --destructive-foreground: var(--color-red-400);\n  --info: var(--color-blue-500);\n  --info-foreground: var(--color-blue-400);\n  --success: var(--color-emerald-500);\n  --success-foreground: var(--color-emerald-400);\n  --warning: var(--color-amber-500);\n  --warning-foreground: var(--color-amber-400);\n}\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"alert\" title=\"components/ui/alert.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\n```\n\n```tsx\n<Alert>\n  <AlertTitle>Heads up!</AlertTitle>\n  <AlertDescription>\n    You can add components and dependencies to your app using the cli.\n  </AlertDescription>\n</Alert>\n```\n\n## API Reference\n\nThis is a custom component, not a Base UI wrapper.\n\n### Alert\n\nRoot container for the alert.\n\n| Prop      | Type                                                        | Default     | Description                                      |\n| --------- | ----------------------------------------------------------- | ----------- | ------------------------------------------------ |\n| `variant` | `\"default\" \\| \"error\" \\| \"info\" \\| \"success\" \\| \"warning\"` | `\"default\"` | Controls the alert styling and color scheme      |\n\n### AlertTitle\n\nTitle text for the alert. Renders as a styled `div`.\n\n### AlertDescription\n\nDescription text for the alert. Renders as a styled `div` with muted foreground color.\n\n### AlertAction\n\nContainer for action buttons. Automatically positions to the right on larger screens.\n\n## Examples\n\n### With Icon\n\n<ComponentPreview name=\"p-alert-2\" />\n\n### With Icon and Action Buttons\n\n<ComponentPreview name=\"p-alert-3\" />\n\n### Info Alert\n\n<ComponentPreview name=\"p-alert-4\" />\n\n### Success Alert\n\n<ComponentPreview name=\"p-alert-5\" />\n\n### Warning Alert\n\n<ComponentPreview name=\"p-alert-6\" />\n\n### Error Alert\n\n<ComponentPreview name=\"p-alert-7\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/autocomplete.mdx",
    "content": "---\ntitle: Autocomplete\ndescription: An input that suggests options as you type.\n\nlinks:\n  doc: https://base-ui.com/react/components/autocomplete#api-reference\n---\n\n<ComponentPreview name=\"p-autocomplete-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/autocomplete\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"autocomplete\" title=\"components/ui/autocomplete.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/components/ui/autocomplete\"\n```\n\n```tsx\nconst items = [\n  { value: \"apple\", label: \"Apple\" },\n  { value: \"banana\", label: \"Banana\" },\n  { value: \"orange\", label: \"Orange\" },\n  { value: \"grape\", label: \"Grape\" },\n]\n\n<Autocomplete items={items}>\n  <AutocompleteInput placeholder=\"Search...\" />\n  <AutocompletePopup>\n    <AutocompleteEmpty>No results found.</AutocompleteEmpty>\n    <AutocompleteList>\n      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}\n    </AutocompleteList>\n  </AutocompletePopup>\n</Autocomplete>\n```\n\n## API Reference\n\n### Autocomplete\n\nThe root autocomplete component. Manages the autocomplete state and provides context to child components.\n\n| Prop       | Type                                      | Description                                         |\n| ---------- | ----------------------------------------- | --------------------------------------------------- |\n| `items`    | `readonly unknown[]`                      | The array of items to display in the autocomplete   |\n| `open`     | `boolean`                                 | Controls whether the popup is open                  |\n| `...props` | `React.ComponentProps<typeof Autocomplete>` | All Base UI Autocomplete props are supported        |\n\n### AutocompleteInput\n\nThe input field component with extended features for size variants and addon support.\n\n| Prop           | Type                              | Default     | Description                                                                                      |\n| -------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------ |\n| `size`         | `\"sm\" \\| \"default\" \\| \"lg\"`       | `\"default\"` | The size variant of the input field                                                              |\n| `startAddon`   | `React.ReactNode`                 | -           | Element to display at the start (left side) of the input, such as an icon                        |\n| `showTrigger`  | `boolean`                         | `false`     | Whether to display a trigger button (chevron icon) on the right side of the input                |\n| `showClear`    | `boolean`                         | `false`     | Whether to display a clear button (X icon) on the right side of the input when there is a value |\n| `triggerProps`  | `Autocomplete.Trigger.Props`     | -           | Props forwarded to the internal trigger button, useful for overriding `aria-label`               |\n| `clearProps`    | `Autocomplete.Clear.Props`       | -           | Props forwarded to the internal clear button, useful for overriding `aria-label`                 |\n| `className`    | `string`                          | -           | Additional CSS classes to apply to the component                                                 |\n| `...props`     | Base UI Autocomplete Input props  | -           | All standard autocomplete input attributes are supported                                         |\n\n### AutocompletePopup\n\nThe popup container that displays the autocomplete suggestions.\n\n| Prop        | Type                                          | Description                                      |\n| ----------- | --------------------------------------------- | ------------------------------------------------ |\n| `className` | `string`                                      | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Popup props              | All standard autocomplete popup attributes are supported |\n\n### AutocompleteList\n\nA scrollable container for autocomplete items.\n\n| Prop        | Type                                     | Description                                      |\n| ----------- | ---------------------------------------- | ------------------------------------------------ |\n| `className` | `string`                                 | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete List props          | All standard autocomplete list attributes are supported |\n\n### AutocompleteItem\n\nAn individual selectable autocomplete item.\n\n| Prop        | Type                                     | Description                                      |\n| ----------- | ---------------------------------------- | ------------------------------------------------ |\n| `value`     | `unknown`                                | The value of the item                            |\n| `className` | `string`                                 | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Item props          | All standard autocomplete item attributes are supported |\n\n### AutocompleteEmpty\n\nDisplays a message when no results are found.\n\n| Prop        | Type                                      | Description                                      |\n| ----------- | ----------------------------------------- | ------------------------------------------------ |\n| `className` | `string`                                  | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Empty props          | All standard autocomplete empty attributes are supported |\n\n### AutocompleteGroup\n\nGroups related autocomplete items together.\n\n| Prop        | Type                                      | Description                                      |\n| ----------- | ----------------------------------------- | ------------------------------------------------ |\n| `items`     | `readonly unknown[]`                      | The array of items in this group                 |\n| `className` | `string`                                  | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Group props          | All standard autocomplete group attributes are supported |\n\n### AutocompleteGroupLabel\n\nDisplays a label for an autocomplete group.\n\n| Prop        | Type                                           | Description                                      |\n| ----------- | ---------------------------------------------- | ------------------------------------------------ |\n| `className` | `string`                                       | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Group Label props         | All standard autocomplete group label attributes are supported |\n\n### AutocompleteCollection\n\nUsed to wrap items within a group for rendering.\n\n| Prop        | Type                                           | Description                                      |\n| ----------- | ---------------------------------------------- | ------------------------------------------------ |\n| `...props`  | Base UI Autocomplete Collection props          | All standard autocomplete collection attributes are supported |\n\n## Examples\n\n### Disabled\n\n<ComponentPreview name=\"p-autocomplete-2\" />\n\n### Small Size\n\n<ComponentPreview name=\"p-autocomplete-3\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-autocomplete-4\" />\n\n### With Label\n\n<ComponentPreview name=\"p-autocomplete-5\" />\n\n### Inline Autocomplete\n\nAutofill the input with the highlighted item while navigating with arrow keys.\n\n<ComponentPreview name=\"p-autocomplete-6\" />\n\n### Auto Highlight\n\nAutomatically highlight the first matching option.\n\n<ComponentPreview name=\"p-autocomplete-7\" />\n\n### With Clear Button\n\n<ComponentPreview name=\"p-autocomplete-8\" />\n\n### With Trigger and Clear Buttons\n\n<ComponentPreview name=\"p-autocomplete-9\" />\n\n### With Start Addon\n\nDisplay an icon or other element at the start of the input using the `startAddon` prop.\n\n<ComponentPreview name=\"p-autocomplete-14\" />\n\n### With Groups\n\n<ComponentPreview name=\"p-autocomplete-10\" />\n\n### With Limit Results\n\n<ComponentPreview name=\"p-autocomplete-11\" />\n\n### Async Search\n\n<ComponentPreview name=\"p-autocomplete-12\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-autocomplete-13\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/avatar.mdx",
    "content": "---\ntitle: Avatar\ndescription: An image element with a fallback for representing the user.\n\nlinks:\n  doc: https://base-ui.com/react/components/avatar#api-reference\n---\n\n<ComponentPreview name=\"p-avatar-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/avatar\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"avatar\" title=\"components/ui/avatar.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n```\n\n```tsx\n<Avatar>\n  <AvatarImage src=\"/avatars/01.png\" alt=\"User avatar\" />\n  <AvatarFallback>JD</AvatarFallback>\n</Avatar>\n```\n\n## API Reference\n\n### Avatar\n\nRoot component. Styled wrapper for `Avatar.Root` from Base UI with default size of 32px (8 units) and rounded-full styling.\n\n### AvatarImage\n\nImage element for the avatar. Styled wrapper for `Avatar.Image` from Base UI.\n\n### AvatarFallback\n\nFallback content displayed when the image fails to load. Styled wrapper for `Avatar.Fallback` from Base UI with muted background.\n\n## Examples\n\n### Fallback Only\n\n<ComponentPreview name=\"p-avatar-2\" />\n\n### Different Sizes\n\n<ComponentPreview name=\"p-avatar-3\" />\n\n### Different Radius\n\n<ComponentPreview name=\"p-avatar-4\" />\n\n### Group Avatars\n\n<ComponentPreview name=\"p-avatar-5\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/badge.mdx",
    "content": "---\ntitle: Badge\ndescription: A badge or a component that looks like a badge.\n---\n\n<ComponentPreview name=\"p-badge-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/badge\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Import the following variables into your CSS file</Step>\n\n```css\n@theme inline {\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-info: var(--info);\n  --color-info-foreground: var(--info-foreground);\n  --color-success: var(--success);\n  --color-success-foreground: var(--success-foreground);\n  --color-warning: var(--warning);\n  --color-warning-foreground: var(--warning-foreground);\n}\n\n:root {\n  --destructive-foreground: var(--color-red-700);\n  --info: var(--color-blue-500);\n  --info-foreground: var(--color-blue-700);\n  --success: var(--color-emerald-500);\n  --success-foreground: var(--color-emerald-700);\n  --warning: var(--color-amber-500);\n  --warning-foreground: var(--color-amber-700);\n}\n\n.dark {\n  --destructive-foreground: var(--color-red-400);\n  --info: var(--color-blue-500);\n  --info-foreground: var(--color-blue-400);\n  --success: var(--color-emerald-500);\n  --success-foreground: var(--color-emerald-400);\n  --warning: var(--color-amber-500);\n  --warning-foreground: var(--color-amber-400);\n}\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"badge\" title=\"components/ui/badge.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Badge } from \"@/components/ui/badge\"\n```\n\n```tsx\n<Badge>Badge</Badge>\n```\n\n## Link\n\nYou can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a badge. Here's an example of a link that looks like a badge.\n\n```tsx\nimport Link from \"next/link\"\n\nimport { Badge } from \"@/components/ui/badge\"\n\nexport function LinkAsBadge() {\n  return <Badge render={<Link href=\"/pricing\" />}>New</Badge>\n}\n```\n\n## API Reference\n\nThis is a custom component using Base UI's `useRender` hook, not a direct Base UI wrapper.\n\n### Badge\n\nA badge component with variant and size options.\n\n| Prop      | Type                                                                                                    | Default     | Description                                      |\n| --------- | ------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------ |\n| `variant` | `\"default\" \\| \"destructive\" \\| \"error\" \\| \"info\" \\| \"outline\" \\| \"secondary\" \\| \"success\" \\| \"warning\"` | `\"default\"` | Controls the badge styling and color scheme      |\n| `size`    | `\"default\" \\| \"sm\" \\| \"lg\"`                                                                             | `\"default\"` | Controls the badge size                          |\n| `render`  | `React.ReactElement`                                                                                    | -           | Render as a different element (e.g., Link)       |\n\n## Examples\n\n### Outline\n\n<ComponentPreview name=\"p-badge-2\" />\n\n### Secondary\n\n<ComponentPreview name=\"p-badge-3\" />\n\n### Destructive\n\n<ComponentPreview name=\"p-badge-4\" />\n\n### Info\n\n<ComponentPreview name=\"p-badge-5\" />\n\n### Success\n\n<ComponentPreview name=\"p-badge-6\" />\n\n### Warning\n\n<ComponentPreview name=\"p-badge-7\" />\n\n### Error\n\n<ComponentPreview name=\"p-badge-8\" />\n\n### Small\n\n<ComponentPreview name=\"p-badge-9\" />\n\n### Large\n\n<ComponentPreview name=\"p-badge-10\" />\n\n### With Icon\n\n<ComponentPreview name=\"p-badge-11\" />\n\n### With Link\n\n<ComponentPreview name=\"p-badge-12\" />\n\n### With Count\n\n<ComponentPreview name=\"p-badge-13\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/breadcrumb.mdx",
    "content": "---\ntitle: Breadcrumb\ndescription: Displays the path to the current resource using a hierarchy of links.\n---\n\n<ComponentPreview name=\"p-breadcrumb-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/breadcrumb\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"breadcrumb\" title=\"components/ui/breadcrumb.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\n```\n\n```tsx\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbItem>\n      <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API Reference\n\nThis is a custom component, not a Base UI wrapper.\n\n### Breadcrumb\n\nRoot navigation container with `aria-label=\"breadcrumb\"`.\n\n### BreadcrumbList\n\nOrdered list container for breadcrumb items.\n\n### BreadcrumbItem\n\nIndividual breadcrumb item container.\n\n### BreadcrumbLink\n\nLink element for navigable breadcrumb items. Supports the `render` prop to use custom link components (e.g., Next.js Link).\n\n| Prop     | Type                   | Default | Description                                      |\n| -------- | ---------------------- | ------- | ------------------------------------------------ |\n| `render` | `React.ReactElement`   | -       | Render as a different element (e.g., Next.js Link) |\n\n### BreadcrumbPage\n\nNon-interactive element representing the current page. Includes `aria-current=\"page\"`.\n\n### BreadcrumbSeparator\n\nSeparator between breadcrumb items. Defaults to a chevron icon but accepts custom children.\n\n### BreadcrumbEllipsis\n\nEllipsis indicator for collapsed breadcrumb items.\n\n## Examples\n\n### With custom separator\n\n<ComponentPreview name=\"p-breadcrumb-2\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/button.mdx",
    "content": "---\ntitle: Button\ndescription: A button or a component that looks like a button.\n---\n\n<ComponentPreview name=\"p-button-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/button\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Import the following variables into your CSS file</Step>\n\n```css\n@theme inline {\n  --color-destructive-foreground: var(--destructive-foreground);\n}\n\n:root {\n  --destructive-foreground: var(--color-red-700);\n}\n\n.dark {\n  --destructive-foreground: var(--color-red-400);\n}\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"button\" title=\"components/ui/button.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Button } from \"@/components/ui/button\"\n```\n\n```tsx\n<Button>Button</Button>\n```\n\n## Link\n\nYou can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a button. Here's an example of a link that looks like a button.\n\n```tsx\nimport Link from \"next/link\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport function LinkAsButton() {\n  return <Button render={<Link href=\"/login\" />}>Login</Button>\n}\n```\n\n## API Reference\n\nThis is a custom component using Base UI's `useRender` hook, not a direct Base UI wrapper.\n\n### Button\n\nA button component with variant, size, and loading states.\n\n| Prop      | Type                                                                                                              | Default     | Description                                                                 |\n| --------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------- |\n| `variant` | `\"default\" \\| \"destructive\" \\| \"destructive-outline\" \\| \"ghost\" \\| \"link\" \\| \"outline\" \\| \"secondary\"`         | `\"default\"` | Controls the button styling                                                 |\n| `size`    | `\"default\" \\| \"icon\" \\| \"icon-lg\" \\| \"icon-sm\" \\| \"icon-xl\" \\| \"icon-xs\" \\| \"lg\" \\| \"sm\" \\| \"xl\" \\| \"xs\"`     | `\"default\"` | Controls the button size                                                    |\n| `loading` | `boolean`                                                                                                         | `false`     | Shows a spinner and forces disabled button behavior while loading           |\n| `render`  | `React.ReactElement`                                                                                              | -           | Render as a different element (e.g., Link)                                  |\n\nWhen `loading` is `true`, the component:\n\n- Renders a spinner (`data-slot=\"button-loading-indicator\"`)\n- Adds `data-loading` on the button root\n- Forces the native `disabled` attribute\n- Sets `aria-disabled=\"true\"`\n- Preserves button width by hiding content visually instead of unmounting it\n\n## Examples\n\n### Default\n\n<ComponentPreview name=\"p-button-1\" />\n\n### Outline\n\n<ComponentPreview name=\"p-button-2\" />\n\n### Secondary\n\n<ComponentPreview name=\"p-button-3\" />\n\n### Destructive\n\n<ComponentPreview name=\"p-button-4\" />\n\n### Destructive Outline\n\n<ComponentPreview name=\"p-button-5\" />\n\n### Ghost\n\n<ComponentPreview name=\"p-button-6\" />\n\n### Link\n\n<ComponentPreview name=\"p-button-7\" />\n\n### Extra-small Size\n\n<ComponentPreview name=\"p-button-8\" />\n\n### Small Size\n\n<ComponentPreview name=\"p-button-9\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-button-10\" />\n\n### Extra-large Size\n\n<ComponentPreview name=\"p-button-11\" />\n\n### Disabled\n\n<ComponentPreview name=\"p-button-12\" />\n\n### Icon\n\n<ComponentPreview name=\"p-button-13\" />\n\n### Icon Small Size\n\n<ComponentPreview name=\"p-button-14\" />\n\n### Icon Large Size\n\n<ComponentPreview name=\"p-button-15\" />\n\n### With Icon\n\n<ComponentPreview name=\"p-button-16\" />\n\n### With Link\n\n<ComponentPreview name=\"p-button-17\" />\n\n### Loading (Built-in Prop)\n\n<ComponentPreview name=\"p-button-41\" />\n\n### Loading (Custom Composition)\n\n<ComponentPreview name=\"p-button-18\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/calendar.mdx",
    "content": "---\ntitle: Calendar\ndescription: A date picker component with range and multi-select support.\n\nlinks:\n  doc: https://daypicker.dev/\n---\n\n<ComponentPreview name=\"p-calendar-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/calendar\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install react-day-picker\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"calendar\" title=\"components/ui/calendar.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Calendar } from \"@/components/ui/calendar\"\n```\n\n```tsx\n<Calendar />\n```\n\n## API Reference\n\nThis component wraps [react-day-picker](https://daypicker.dev/) with custom styling.\n\n### Calendar\n\nA calendar component for date selection.\n\n| Prop              | Type                                                | Default    | Description                                      |\n| ----------------- | --------------------------------------------------- | ---------- | ------------------------------------------------ |\n| `mode`            | `\"single\" \\| \"multiple\" \\| \"range\"`                 | `\"single\"` | Selection mode for the calendar                  |\n| `captionLayout`   | `\"label\" \\| \"dropdown\" \\| \"dropdown-months\" \\| \"dropdown-years\"` | `\"label\"` | Caption layout - use `\"dropdown\"` for month/year dropdowns |\n| `selected`        | `Date \\| Date[] \\| DateRange`                       | -          | The selected date(s)                             |\n| `onSelect`        | `(date: Date \\| Date[] \\| DateRange) => void`       | -          | Callback when date selection changes             |\n| `showOutsideDays` | `boolean`                                           | `true`     | Show days from adjacent months                   |\n| `startMonth`      | `Date`                                              | -          | First month to show in dropdown navigation       |\n| `endMonth`        | `Date`                                              | -          | Last month to show in dropdown navigation        |\n| `buttonVariant`   | `\"ghost\" \\| \"outline\" \\| ...`                       | `\"ghost\"`  | Button variant for navigation buttons            |\n| `classNames`      | `object`                                            | -          | Custom class names for calendar parts            |\n| `components`      | `object`                                            | -          | Custom components to override defaults           |\n\nFor the full list of props, see the [react-day-picker documentation](https://daypicker.dev/).\n\n### Customizing Cell Size\n\nThe calendar uses CSS custom properties for cell sizing. By default, the cell size is `--spacing(9)` on mobile and `--spacing(8)` on larger screens:\n\n```css\n[--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]\n```\n\nYou can customize the cell size by passing a custom `className`:\n\n```tsx\n<Calendar className=\"[--cell-size:--spacing(11)]\" />\n```\n\nOr use responsive values:\n\n```tsx\n<Calendar className=\"[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]\" />\n```\n\n## Examples\n\n### Single Date Selection\n\n<ComponentPreview name=\"p-calendar-2\" />\n\n### Date Range Selection\n\n<ComponentPreview name=\"p-calendar-3\" />\n\n### Dropdown Navigation\n\nUse `captionLayout=\"dropdown\"` with `startMonth` and `endMonth` to enable month/year dropdown navigation:\n\n<ComponentPreview name=\"p-calendar-4\" />\n\n### Select Dropdown for Month/Year\n\nCalendar with a custom Select component for month and year navigation:\n\n<ComponentPreview name=\"p-calendar-5\" />\n\n### Combobox Dropdown for Month/Year\n\nCalendar with a searchable Combobox for month and year navigation:\n\n<ComponentPreview name=\"p-calendar-6\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/card.mdx",
    "content": "---\ntitle: Card\ndescription: A content container for grouping related information.\n---\n\n<ComponentPreview name=\"p-card-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/card\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"card\" title=\"components/ui/card.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/components/ui/card\"\n```\n\n```tsx\n<Card>\n  <CardHeader>\n    <CardTitle>Title</CardTitle>\n    <CardDescription>Description</CardDescription>\n  </CardHeader>\n  <CardPanel>Content</CardPanel>\n  <CardFooter>Footer</CardFooter>\n</Card>\n```\n\n### CardFrame with header action\n\nUse `CardFrame` when you need a framed layout with an action button in the header (e.g. \"Add\", \"Connect\"):\n\n```tsx\nimport {\n  CardFrame,\n  CardFrameAction,\n  CardFrameDescription,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@/components/ui/card\"\nimport { Button } from \"@/components/ui/button\"\nimport { PlusIcon } from \"lucide-react\"\n\n<CardFrame>\n  <CardFrameHeader>\n    <CardFrameTitle>Project</CardFrameTitle>\n    <CardFrameDescription>\n      Manage your project settings and configuration\n    </CardFrameDescription>\n    <CardFrameAction>\n      <Button variant=\"outline\">\n        <PlusIcon />\n        Add\n      </Button>\n    </CardFrameAction>\n  </CardFrameHeader>\n  <Card>\n    <CardPanel>Content</CardPanel>\n  </Card>\n</CardFrame>\n```\n\n## API Reference\n\nThis is a custom component using Base UI's `useRender` hook, not a direct Base UI wrapper.\n\n### Card\n\nRoot container for the card. Supports the `render` prop.\n\n| Prop     | Type                   | Default | Description                                      |\n| -------- | ---------------------- | ------- | ------------------------------------------------ |\n| `render` | `React.ReactElement`   | -       | Render as a different element                    |\n\n### CardHeader\n\nHeader section container. Supports the `render` prop.\n\n### CardTitle\n\nTitle text for the card. Supports the `render` prop.\n\n### CardDescription\n\nDescription text for the card. Supports the `render` prop.\n\n### CardAction\n\nContainer for action buttons in the header. Automatically positions to the right. Supports the `render` prop.\n\n### CardPanel\n\nMain content area of the card. Also exported as `CardContent`. Supports the `render` prop.\n\n### CardFooter\n\nFooter section for the card. Supports the `render` prop.\n\n## CardFrame API Reference\n\n`CardFrame` is an alternative layout for cards that groups a header, content, and footer with consistent styling and clipping. Use it when you need a framed card with optional header actions.\n\n### CardFrame\n\nRoot container for the framed card layout. Supports the `render` prop.\n\n### CardFrameHeader\n\nHeader section for the frame. Contains title, description, and optionally `CardFrameAction`. Supports the `render` prop.\n\n### CardFrameTitle\n\nTitle text for the frame. Supports the `render` prop.\n\n### CardFrameDescription\n\nDescription text for the frame. Supports the `render` prop.\n\n### CardFrameAction\n\nContainer for action buttons (e.g. \"Add\", \"Edit\") in the header. Place it as a sibling of `CardFrameTitle` and `CardFrameDescription` inside `CardFrameHeader`. It is positioned in the top-right via CSS grid (`col-start-2`, `row-span-2`, `self-center`, `justify-self-end`). Use it for primary actions that apply to the entire frame. Supports the `render` prop.\n\n### CardFrameFooter\n\nFooter section for the frame. Supports the `render` prop.\n"
  },
  {
    "path": "apps/ui/content/docs/components/checkbox-group.mdx",
    "content": "---\ntitle: Checkbox Group\ndescription: Provides shared state to a series of checkboxes.\n\nlinks:\n  doc: https://base-ui.com/react/components/checkbox-group#api-reference\n---\n\n<ComponentPreview name=\"p-checkbox-group-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/checkbox-group\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource\n  name=\"checkbox-group\"\n  title=\"components/ui/checkbox-group.tsx\"\n/>\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { CheckboxGroup } from \"@/components/ui/checkbox-group\"\n```\n\n```tsx\n<CheckboxGroup>\n  <Label>\n    <Checkbox defaultChecked />\n    Next.js\n  </Label>\n  <Label>\n    <Checkbox />\n    Vite\n  </Label>\n  <Label>\n    <Checkbox />\n    Astro\n  </Label>\n</CheckboxGroup>\n```\n\n## API Reference\n\n### CheckboxGroup\n\nStyled wrapper for `CheckboxGroup` from Base UI. Provides shared state management for a group of checkboxes with flex column layout.\n\n## Examples\n\nFor accessible group labelling and validation, prefer wrapping checkbox groups with `Field` and `Fieldset`. See the related example: [Checkbox group field](/ui/docs/components/field#checkbox-group-field).\n\n### With Disabled Item\n\n<ComponentPreview name=\"p-checkbox-group-2\" />\n\n### Parent Checkbox\n\n<ComponentPreview name=\"p-checkbox-group-3\" />\n\n### Nested Parent Checkbox\n\n<ComponentPreview name=\"p-checkbox-group-4\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-checkbox-group-5\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/checkbox.mdx",
    "content": "---\ntitle: Checkbox\ndescription: A control allowing the user to toggle between checked and not checked.\n\nlinks:\n  doc: https://base-ui.com/react/components/checkbox#api-reference\n---\n\n<ComponentPreview name=\"p-checkbox-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/checkbox\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"checkbox\" title=\"components/ui/checkbox.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Checkbox } from \"@/components/ui/checkbox\"\n```\n\n```tsx\n<Checkbox />\n```\n\n## API Reference\n\n### Checkbox\n\nStyled wrapper for `Checkbox.Root` from Base UI. Includes a built-in indicator with checkmark and indeterminate icons.\n\n## Examples\n\nFor accessible labelling and validation, prefer using the `Field` component to wrap checkboxes. See the related example: [Checkbox field](/ui/docs/components/field#checkbox-field).\n\n### Disabled\n\n<ComponentPreview name=\"p-checkbox-2\" />\n\n### With Description\n\n<ComponentPreview name=\"p-checkbox-3\" />\n\n### Card Style\n\n<ComponentPreview name=\"p-checkbox-4\" />\n\n### Form Integration\n\nField provides accessible labelling and validation primitives for form controls. Use it with `Form` to submit values.\n\n<ComponentPreview name=\"p-checkbox-5\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/collapsible.mdx",
    "content": "---\ntitle: Collapsible\ndescription: A collapsible panel controlled by a button trigger.\n\nlinks:\n  doc: https://base-ui.com/react/components/collapsible#api-reference\n---\n\n<ComponentPreview name=\"p-collapsible-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/collapsible\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"collapsible\" title=\"components/ui/collapsible.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Collapsible,\n  CollapsiblePanel,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\n```\n\n```tsx\n<Collapsible>\n  <CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>\n  <CollapsiblePanel>\n    Yes, you can access the file in the cloud.\n  </CollapsiblePanel>\n</Collapsible>\n```\n\n## API Reference\n\n### Collapsible\n\nRoot component. Alias for `Collapsible.Root` from Base UI.\n\n### CollapsibleTrigger\n\nTrigger button that toggles the collapsible panel. Styled wrapper for `Collapsible.Trigger` from Base UI.\n\n### CollapsiblePanel\n\nCollapsible content panel. Styled wrapper for `Collapsible.Panel` from Base UI with animated height transitions. Also exported as `CollapsibleContent`.\n"
  },
  {
    "path": "apps/ui/content/docs/components/combobox.mdx",
    "content": "---\ntitle: Combobox\ndescription: An input combined with a list of predefined items to select.\n\nlinks:\n  doc: https://base-ui.com/react/components/combobox#api-reference\n---\n\n<ComponentPreview name=\"p-combobox-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/combobox\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"combobox\" title=\"components/ui/combobox.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n### Single Selection\n\n```tsx\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/components/ui/combobox\"\n```\n\n```tsx\nconst items = [\n  { value: \"apple\", label: \"Apple\" },\n  { value: \"banana\", label: \"Banana\" },\n  { value: \"orange\", label: \"Orange\" },\n  { value: \"grape\", label: \"Grape\" },\n]\n\n<Combobox items={items}>\n  <ComboboxInput placeholder=\"Select an item...\" />\n  <ComboboxPopup>\n    <ComboboxEmpty>No results found.</ComboboxEmpty>\n    <ComboboxList>\n      {(item) => <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>}\n    </ComboboxList>\n  </ComboboxPopup>\n</Combobox>\n```\n\n### Multiple Selection\n\n```tsx\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxValue,\n} from \"@/components/ui/combobox\"\n```\n\n```tsx\nconst items = [\n  { value: \"apple\", label: \"Apple\" },\n  { value: \"banana\", label: \"Banana\" },\n  { value: \"orange\", label: \"Orange\" },\n  { value: \"grape\", label: \"Grape\" },\n]\n\n<Combobox items={items} multiple>\n  <ComboboxChips>\n    <ComboboxValue>\n      {(value: { value: string; label: string }[]) => (\n        <>\n          {value?.map((item) => (\n            <ComboboxChip key={item.value} aria-label={item.value}>\n              {item.label}\n            </ComboboxChip>\n          ))}\n          <ComboboxChipsInput\n            placeholder={value.length > 0 ? undefined : \"Select an item...\"}\n            aria-label=\"Select an item\"\n          />\n        </>\n      )}\n    </ComboboxValue>\n  </ComboboxChips>\n  <ComboboxPopup>\n    <ComboboxEmpty>No results found.</ComboboxEmpty>\n    <ComboboxList>\n      {(item) => <ComboboxItem value={item}>{item.label}</ComboboxItem>}\n    </ComboboxList>\n  </ComboboxPopup>\n</Combobox>\n```\n\n## API Reference\n\n### Combobox\n\nThe root combobox component. Manages the combobox state and provides context to child components.\n\n| Prop       | Type                                    | Description                                       |\n| ---------- | --------------------------------------- | ------------------------------------------------- |\n| `items`    | `readonly unknown[]`                    | The array of items to display in the combobox     |\n| `multiple` | `boolean`                               | Whether to allow multiple selection               |\n| `open`     | `boolean`                               | Controls whether the popup is open                |\n| `...props` | `React.ComponentProps<typeof Combobox>` | All Base UI Combobox props are supported          |\n\n### ComboboxInput\n\nThe input field component for single selection mode with extended features for size variants and addon support.\n\n| Prop           | Type                         | Default     | Description                                                                                      |\n| -------------- | ---------------------------- | ----------- | ------------------------------------------------------------------------------------------------ |\n| `size`         | `\"sm\" \\| \"default\" \\| \"lg\"`  | `\"default\"` | The size variant of the input field                                                              |\n| `startAddon`   | `React.ReactNode`            | -           | Element to display at the start (left side) of the input, such as an icon                        |\n| `showTrigger`  | `boolean`                    | `true`      | Whether to display a trigger button (chevron icon) on the right side of the input                |\n| `showClear`    | `boolean`                    | `false`     | Whether to display a clear button (X icon) on the right side of the input when there is a value |\n| `triggerProps`  | `Combobox.Trigger.Props`    | -           | Props forwarded to the internal trigger button, useful for overriding `aria-label`               |\n| `clearProps`    | `Combobox.Clear.Props`      | -           | Props forwarded to the internal clear button, useful for overriding `aria-label`                 |\n| `className`    | `string`                     | -           | Additional CSS classes to apply to the component                                                 |\n| `...props`     | Base UI Combobox Input props | -           | All standard combobox input attributes are supported                                             |\n\n### ComboboxPopup\n\nThe popup container that displays the combobox options.\n\n| Prop        | Type                               | Description                                      |\n| ----------- | ---------------------------------- | ------------------------------------------------ |\n| `className` | `string`                           | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Combobox Popup props       | All standard combobox popup attributes are supported |\n\n### ComboboxList\n\nA scrollable container for combobox items.\n\n| Prop        | Type                          | Description                                      |\n| ----------- | ----------------------------- | ------------------------------------------------ |\n| `className` | `string`                      | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Combobox List props   | All standard combobox list attributes are supported |\n\n### ComboboxItem\n\nAn individual selectable combobox item.\n\n| Prop        | Type                          | Description                                      |\n| ----------- | ----------------------------- | ------------------------------------------------ |\n| `value`     | `unknown`                     | The value of the item                            |\n| `className` | `string`                      | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Combobox Item props   | All standard combobox item attributes are supported |\n\n### ComboboxEmpty\n\nDisplays a message when no results are found.\n\n| Prop        | Type                           | Description                                      |\n| ----------- | ------------------------------ | ------------------------------------------------ |\n| `className` | `string`                       | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Combobox Empty props   | All standard combobox empty attributes are supported |\n\n### ComboboxGroup\n\nGroups related combobox items together.\n\n| Prop        | Type                           | Description                                      |\n| ----------- | ------------------------------ | ------------------------------------------------ |\n| `items`     | `readonly unknown[]`           | The array of items in this group                 |\n| `className` | `string`                       | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Combobox Group props   | All standard combobox group attributes are supported |\n\n### ComboboxGroupLabel\n\nDisplays a label for a combobox group.\n\n| Prop        | Type                                | Description                                      |\n| ----------- | ----------------------------------- | ------------------------------------------------ |\n| `className` | `string`                            | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Combobox Group Label props  | All standard combobox group label attributes are supported |\n\n### ComboboxCollection\n\nUsed to wrap items within a group for rendering.\n\n| Prop        | Type                                 | Description                                      |\n| ----------- | ------------------------------------ | ------------------------------------------------ |\n| `...props`  | Base UI Combobox Collection props    | All standard combobox collection attributes are supported |\n\n### ComboboxChips\n\nContainer for displaying selected chips in multiple selection mode.\n\n| Prop          | Type                          | Description                                                    |\n| ------------- | ----------------------------- | -------------------------------------------------------------- |\n| `startAddon`  | `React.ReactNode`             | Element to display at the start (left side) of the chips area  |\n| `className`   | `string`                      | Additional CSS classes to apply to the component               |\n| `...props`    | `React.ComponentProps<'div'>` | All standard div attributes are supported                      |\n\n### ComboboxChipsInput\n\nThe input field component for use inside `ComboboxChips` in multiple selection mode. This is a minimal input without the wrapper, trigger, or clear button.\n\n| Prop          | Type                        | Default     | Description                                                                                      |\n| ------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------ |\n| `size`        | `\"sm\" \\| \"default\" \\| \"lg\"` | `\"default\"` | The size variant of the input field                                                              |\n| `className`   | `string`                    | -           | Additional CSS classes to apply to the component                                                 |\n| `...props`    | Base UI Combobox Input props | -          | All standard combobox input attributes are supported                                             |\n\n### ComboboxChip\n\nAn individual chip representing a selected item in multiple selection mode.\n\n| Prop           | Type                              | Description                                                                       |\n| -------------- | --------------------------------- | --------------------------------------------------------------------------------- |\n| `removeProps`  | `Combobox.ChipRemove.Props`       | Props forwarded to the internal remove button, useful for overriding `aria-label` |\n| `className`    | `string`                          | Additional CSS classes to apply to the component                                  |\n| `...props`     | Base UI Combobox Chip props       | All standard combobox chip attributes are supported                               |\n\n### ComboboxValue\n\nProvides access to the current value for custom rendering.\n\n| Prop        | Type                           | Description                                      |\n| ----------- | ------------------------------ | ------------------------------------------------ |\n| `...props`  | Base UI Combobox Value props   | All standard combobox value attributes are supported |\n\n## Examples\n\n### Disabled\n\n<ComponentPreview name=\"p-combobox-2\" />\n\n### Small Size\n\n<ComponentPreview name=\"p-combobox-3\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-combobox-4\" />\n\n### With Label\n\n<ComponentPreview name=\"p-combobox-5\" />\n\n### Auto Highlight\n\nAutomatically highlight the first matching option.\n\n<ComponentPreview name=\"p-combobox-6\" />\n\n### With Clear Button\n\n<ComponentPreview name=\"p-combobox-7\" />\n\n### With Groups\n\n<ComponentPreview name=\"p-combobox-8\" />\n\n### With Multiple Selection\n\n<ComponentPreview name=\"p-combobox-9\" />\n\n### With Start Addon\n\nDisplay an icon or other element at the start of the input using the `startAddon` prop.\n\n<ComponentPreview name=\"p-combobox-13\" />\n\n### With Start Addon - Multiple\n\nUse the `startAddon` prop on `ComboboxChips` to display an icon at the start when using multiple selection.\n\n<ComponentPreview name=\"p-combobox-14\" />\n\n### With Input Inside Popup\n\n<ComponentPreview name=\"p-combobox-10\" />\n\n### With Select-like Button\n\nUse `SelectButton` as a `render` prop on `ComboboxTrigger` to make the combobox trigger look like a select.\n\n<ComponentPreview name=\"p-combobox-18\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-combobox-11\" />\n\n### Form Integration - Multiple\n\n<ComponentPreview name=\"p-combobox-12\" />\n\n"
  },
  {
    "path": "apps/ui/content/docs/components/command.mdx",
    "content": "---\ntitle: Command\ndescription: A command palette component built with Dialog and Autocomplete for searching and executing commands.\n\nlinks:\n  doc: https://base-ui.com/react/components/autocomplete#api-reference\n---\n\n<ComponentPreview name=\"p-command-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/command\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"command\" title=\"components/ui/command.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/components/ui/command\"\nimport { Button } from \"@/components/ui/button\"\n```\n\n```tsx\nconst items = [\n  { value: \"linear\", label: \"Linear\" },\n  { value: \"figma\", label: \"Figma\" },\n  { value: \"slack\", label: \"Slack\" },\n]\n\n<CommandDialog>\n  <CommandDialogTrigger render={<Button variant=\"outline\" />}>\n    Open Command Palette\n  </CommandDialogTrigger>\n\n  <CommandDialogPopup>\n    <Command items={items}>\n      <CommandInput placeholder=\"Search...\" />\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandList>\n        {(item) => (\n          <CommandItem key={item.value} value={item.value}>\n            {item.label}\n          </CommandItem>\n        )}\n      </CommandList>\n    </Command>\n  </CommandDialogPopup>\n</CommandDialog>\n```\n\n## API Reference\n\n### Command\n\nThe root component that wraps the autocomplete functionality. It's an alias for `Autocomplete.Root` with sensible defaults for command palette behavior: `autoHighlight=\"always\"`, `keepHighlight={true}`, and `open={true}`.\n\n| Prop            | Type                                   | Default     | Description                                      |\n| --------------- | -------------------------------------- | ----------- | ------------------------------------------------ |\n| `items`         | `readonly unknown[]`                   | -           | The array of items to display in the command     |\n| `open`          | `boolean`                              | `true`      | Controls whether the command is open             |\n| `autoHighlight` | `boolean \\| \"always\"`                  | `\"always\"`  | Controls automatic highlighting of items         |\n| `keepHighlight` | `boolean`                              | `true`      | Whether to maintain highlight state              |\n| `...props`      | `React.ComponentProps<typeof Command>` | -           | All Base UI Autocomplete props are supported     |\n\n### CommandDialog\n\nA wrapper component that provides the dialog root functionality. It's an alias for `Dialog.Root` from Base UI.\n\n| Prop           | Type       | Description                                 |\n| -------------- | ---------- | ------------------------------------------- |\n| `open`         | `boolean`  | Controls whether the dialog is open         |\n| `onOpenChange` | `function` | Callback fired when the open state changes  |\n| `...props`     | Base UI Dialog props | All standard dialog attributes are supported |\n\n### CommandDialogTrigger\n\nThe trigger button that opens the command dialog. Renders as a button by default.\n\n| Prop        | Type                                        | Description                                      |\n| ----------- | ------------------------------------------- | ------------------------------------------------ |\n| `render`    | `React.ReactElement`                        | Element to render as the trigger                 |\n| `className` | `string`                                    | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Dialog Trigger props                | All standard dialog trigger attributes are supported |\n\n### CommandDialogPopup\n\nThe popup content container that displays the command palette inside a dialog.\n\n| Prop        | Type                         | Description                                      |\n| ----------- | ---------------------------- | ------------------------------------------------ |\n| `className` | `string`                     | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Dialog Popup props   | All standard dialog popup attributes are supported |\n\n### CommandInput\n\nThe search input field with an integrated search icon. Automatically includes a search icon via `startAddon` and is sized to `lg` by default.\n\n| Prop          | Type                              | Description                                      |\n| ------------- | --------------------------------- | ------------------------------------------------ |\n| `placeholder` | `string`                          | The placeholder text for the input               |\n| `className`   | `string`                          | Additional CSS classes to apply to the component |\n| `...props`    | Base UI Autocomplete Input props  | All standard autocomplete input attributes are supported |\n\n### CommandList\n\nA scrollable container for command items. It wraps `AutocompleteList` with scroll functionality.\n\n| Prop        | Type                              | Description                                      |\n| ----------- | --------------------------------- | ------------------------------------------------ |\n| `className` | `string`                          | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete List props   | All standard autocomplete list attributes are supported |\n\n### CommandPanel\n\nA container component that provides styling for command content outside of dialogs. Useful when building standalone command interfaces with a bordered, elevated appearance.\n\n| Prop        | Type                          | Description                                      |\n| ----------- | ----------------------------- | ------------------------------------------------ |\n| `className` | `string`                      | Additional CSS classes to apply to the component |\n| `...props`  | `React.ComponentProps<'div'>` | All standard div attributes are supported        |\n\n### CommandEmpty\n\nDisplays a message when no results are found.\n\n| Prop        | Type                              | Description                                      |\n| ----------- | --------------------------------- | ------------------------------------------------ |\n| `className` | `string`                          | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Empty props  | All standard autocomplete empty attributes are supported |\n\n### CommandGroup\n\nGroups related command items together. Wraps `AutocompleteGroup`.\n\n| Prop        | Type                              | Description                                      |\n| ----------- | --------------------------------- | ------------------------------------------------ |\n| `items`     | `readonly unknown[]`              | The array of items in this group                 |\n| `className` | `string`                          | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Group props  | All standard autocomplete group attributes are supported |\n\n### CommandGroupLabel\n\nDisplays a label for a command group.\n\n| Prop        | Type                                   | Description                                      |\n| ----------- | -------------------------------------- | ------------------------------------------------ |\n| `className` | `string`                               | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Group Label props | All standard autocomplete group label attributes are supported |\n\n### CommandItem\n\nAn individual selectable command item. Extends `AutocompleteItem`.\n\n| Prop        | Type                              | Description                                      |\n| ----------- | --------------------------------- | ------------------------------------------------ |\n| `value`     | `unknown`                         | The value of the item                            |\n| `className` | `string`                          | Additional CSS classes to apply to the component |\n| `...props`  | Base UI Autocomplete Item props   | All standard autocomplete item attributes are supported |\n\n### CommandSeparator\n\nA visual separator between command groups or items. Includes default vertical spacing with `my-2` className.\n\n| Prop        | Type                                   | Description                                      |\n| ----------- | -------------------------------------- | ------------------------------------------------ |\n| `className` | `string`                               | Additional CSS classes to apply to the component (default includes `my-2`) |\n| `...props`  | Base UI Autocomplete Separator props   | All standard autocomplete separator attributes are supported |\n\n### CommandShortcut\n\nDisplays keyboard shortcuts in a styled span element.\n\n| Prop        | Type                           | Description                                      |\n| ----------- | ------------------------------ | ------------------------------------------------ |\n| `className` | `string`                       | Additional CSS classes to apply to the component |\n| `...props`  | `React.ComponentProps<'span'>` | All standard span attributes are supported       |\n\n### CommandFooter\n\nA footer section for displaying hints or additional keyboard shortcuts. Renders as a styled `div` with padding and border.\n\n| Prop        | Type                          | Description                                      |\n| ----------- | ----------------------------- | ------------------------------------------------ |\n| `className` | `string`                      | Additional CSS classes to apply to the component |\n| `...props`  | `React.ComponentProps<'div'>` | All standard div attributes are supported        |\n\n### CommandCollection\n\nUsed within `CommandGroup` to wrap items when using grouped data. It's an alias for `AutocompleteCollection` from the Autocomplete component.\n\n| Prop        | Type                                    | Description                                      |\n| ----------- | --------------------------------------- | ------------------------------------------------ |\n| `...props`  | Base UI Autocomplete Collection props   | All standard autocomplete collection attributes are supported |\n\n## Examples\n\n### With Keyboard Shortcut\n\nYou can add a keyboard shortcut to open the command palette:\n\n```tsx\nReact.useEffect(() => {\n  const down = (e: KeyboardEvent) => {\n    if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault()\n      setOpen((open) => !open)\n    }\n  }\n\n  document.addEventListener(\"keydown\", down)\n  return () => document.removeEventListener(\"keydown\", down)\n}, [])\n```\n\n### With Grouped Items\n\n```tsx\nconst groupedItems = [\n  {\n    value: \"Suggestions\",\n    items: [\n      { value: \"linear\", label: \"Linear\" },\n      { value: \"figma\", label: \"Figma\" },\n    ]\n  },\n  {\n    value: \"Commands\",\n    items: [\n      { value: \"clipboard\", label: \"Clipboard History\" },\n      { value: \"settings\", label: \"System Preferences\" },\n    ]\n  },\n]\n\n<Command items={groupedItems}>\n  <CommandInput placeholder=\"Search...\" />\n  <CommandEmpty>No results found.</CommandEmpty>\n  <CommandList>\n    {(group, index) => (\n      <React.Fragment key={group.value}>\n        <CommandGroup items={group.items}>\n          <CommandGroupLabel>{group.value}</CommandGroupLabel>\n          <CommandCollection>\n            {(item) => (\n              <CommandItem key={item.value} value={item.value}>\n                {item.label}\n              </CommandItem>\n            )}\n          </CommandCollection>\n        </CommandGroup>\n        {index < groupedItems.length - 1 && <CommandSeparator />}\n      </React.Fragment>\n    )}\n  </CommandList>\n</Command>\n```\n\n### Standalone Command (Without Dialog)\n\nYou can use the Command component without a dialog wrapper:\n\n```tsx\n<Command open items={items}>\n  <CommandInput placeholder=\"Type a command...\" />\n  <CommandEmpty>No results found.</CommandEmpty>\n  <CommandList>\n    {(item) => (\n      <CommandItem key={item.value} value={item.value}>\n        {item.label}\n      </CommandItem>\n    )}\n  </CommandList>\n</Command>\n```\n"
  },
  {
    "path": "apps/ui/content/docs/components/date-picker.mdx",
    "content": "---\ntitle: Date Picker\ndescription: A date picker component built with Calendar and Popover.\n---\n\n<ComponentPreview name=\"p-date-picker-1\" />\n\n## About\n\nThe Date Picker is built using a composition of the `<Calendar>` and `<Popover>` components.\n\n## Installation\n\nThe Date Picker is a composition pattern, not a standalone component. Install the required components:\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/calendar @coss/popover @coss/button\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install react-day-picker date-fns lucide-react @base-ui/react\n```\n\n<Step>Copy the Calendar, Popover, and Button components to your project.</Step>\n\nSee the [Calendar](/ui/docs/components/calendar), [Popover](/ui/docs/components/popover), and [Button](/ui/docs/components/button) documentation for installation instructions.\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n```\n\n```tsx\nconst [date, setDate] = useState<Date>()\n\nreturn (\n  <Popover>\n    <PopoverTrigger\n      render={\n        <Button\n          className=\"w-[280px] justify-start text-left font-normal\"\n          variant=\"outline\"\n        />\n      }\n    >\n      <CalendarIcon />\n      {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n    </PopoverTrigger>\n    <PopoverPopup align=\"start\" className=\"w-auto p-0\">\n      <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n    </PopoverPopup>\n  </Popover>\n)\n```\n\n## Examples\n\n### Date Range Picker\n\n<ComponentPreview name=\"p-date-picker-2\" />\n\n### With Dropdown Navigation\n\nUse `captionLayout=\"dropdown\"` for date of birth or historical date selection:\n\n<ComponentPreview name=\"p-date-picker-3\" />\n\n### With Presets\n\n<ComponentPreview name=\"p-date-picker-4\" />\n\n### With Input\n\n<ComponentPreview name=\"p-date-picker-5\" />\n\n### Close on Select\n\nControl the popover state to close it when a date is selected:\n\n<ComponentPreview name=\"p-date-picker-6\" />\n\n"
  },
  {
    "path": "apps/ui/content/docs/components/dialog.mdx",
    "content": "---\ntitle: Dialog\ndescription: A popup that opens on top of the entire page.\n\nlinks:\n  doc: https://base-ui.com/react/components/dialog#api-reference\n---\n\n<ComponentPreview name=\"p-dialog-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/dialog\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"dialog\" title=\"components/ui/dialog.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Dialog,\n  DialogDescription,\n  DialogPanel,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\n```\n\n```tsx\n<Dialog>\n  <DialogTrigger>Open Dialog</DialogTrigger>\n  <DialogPopup>\n    <DialogHeader>\n      <DialogTitle>Dialog Title</DialogTitle>\n      <DialogDescription>Dialog Description</DialogDescription>\n    </DialogHeader>\n    <DialogPanel>Content</DialogPanel>\n    <DialogFooter>\n      <DialogClose>Close</DialogClose>\n    </DialogFooter>\n  </DialogPopup>\n</Dialog>\n```\n\n## API Reference\n\n### Dialog\n\nRoot component. Alias for `Dialog.Root` from Base UI.\n\n### DialogTrigger\n\nTrigger button that opens the dialog. Alias for `Dialog.Trigger` from Base UI.\n\n### DialogPopup\n\nPopup container that displays the dialog content. Also exported as `DialogContent`.\n\n| Prop                  | Type                        | Default | Description                                      |\n| --------------------- | --------------------------- | ------- | ------------------------------------------------ |\n| `showCloseButton`     | `boolean`                   | `true`  | When true, displays a close button in the top-right corner |\n| `bottomStickOnMobile` | `boolean`                   | `true`  | When true, sticks to the bottom of the screen on mobile devices |\n| `closeProps`          | `Dialog.Close.Props`        | -       | Props forwarded to the internal close button, useful for overriding `aria-label` |\n\n### DialogHeader\n\nContainer for the dialog title and description. Supports the `render` prop for polymorphic composition (e.g. `render={<Link href=\"/\" />}`).\n\n### DialogFooter\n\nFooter section for action buttons. Supports the `render` prop for polymorphic composition.\n\n| Prop        | Type                     | Default     | Description                                      |\n| ----------- | ------------------------ | ----------- | ------------------------------------------------ |\n| `variant`   | `\"default\" \\| \"bare\"`    | `\"default\"` | Controls the footer styling. `default` includes border and background, `bare` removes them |\n\n**Example:**\n\n```tsx\n// Default variant (with border and background)\n<DialogFooter>\n  <DialogClose>Cancel</DialogClose>\n  <Button>Save</Button>\n</DialogFooter>\n\n// Bare variant (no border or background)\n<DialogFooter variant=\"bare\">\n  <DialogClose>Cancel</DialogClose>\n  <Button>Save</Button>\n</DialogFooter>\n```\n\n### DialogTitle\n\nTitle component. Alias for `Dialog.Title` from Base UI.\n\n### DialogDescription\n\nDescription component. Alias for `Dialog.Description` from Base UI.\n\n### DialogPanel\n\nScrollable content container. Automatically wraps content in a `ScrollArea` component. Supports the `render` prop for polymorphic composition.\n\n| Prop         | Type      | Default | Description                                      |\n| ------------ | --------- | ------- | ------------------------------------------------ |\n| `scrollFade` | `boolean` | `true`  | When true, shows a fade effect at scroll edges   |\n\n**Example:**\n\n```tsx\n<DialogPanel>\n  {/* Long content that will scroll if it exceeds the dialog height */}\n  <div>...</div>\n</DialogPanel>\n```\n\n### DialogClose\n\nClose button component. Alias for `Dialog.Close` from Base UI.\n\n### DialogPortal\n\nPortal component for rendering outside the DOM hierarchy. Alias for `Dialog.Portal` from Base UI.\n\n### DialogBackdrop\n\nBackdrop/overlay component. Also exported as `DialogOverlay`. Alias for `Dialog.Backdrop` from Base UI.\n\n### DialogViewport\n\nViewport component for positioning. Alias for `Dialog.Viewport` from Base UI.\n\n## Examples\n\n### Open from a Menu\n\n<ComponentPreview name=\"p-dialog-2\" />\n\n### Dialog with Bare Footer\n\n<ComponentPreview name=\"p-dialog-6\" />\n\n### Dialog with scroll inside\n\n<ComponentPreview name=\"p-dialog-5\" />\n\n### Nested Dialogs\n\n<ComponentPreview name=\"p-dialog-3\" />\n\n### Close Confirmation\n\n<ComponentPreview name=\"p-dialog-4\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/drawer.mdx",
    "content": "---\ntitle: Drawer\ndescription: A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.\n\nlinks:\n  doc: https://base-ui.com/react/components/drawer\n---\n\n<ComponentPreview name=\"p-drawer-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/drawer\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"drawer\" title=\"components/ui/drawer.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerMenu,\n  DrawerMenuCheckboxItem,\n  DrawerMenuGroup,\n  DrawerMenuGroupLabel,\n  DrawerMenuItem,\n  DrawerMenuRadioGroup,\n  DrawerMenuRadioItem,\n  DrawerMenuSeparator,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerMenuTrigger,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/components/ui/drawer\"\n```\n\n```tsx\n<Drawer>\n  <DrawerTrigger>Open</DrawerTrigger>\n  <DrawerPopup>\n    <DrawerHeader>\n      <DrawerTitle>Drawer Title</DrawerTitle>\n      <DrawerDescription>Drawer Description</DrawerDescription>\n    </DrawerHeader>\n    <DrawerPanel>Content</DrawerPanel>\n    <DrawerFooter>\n      <DrawerClose>Close</DrawerClose>\n    </DrawerFooter>\n  </DrawerPopup>\n</Drawer>\n```\n\n## API Reference\n\n### Drawer\n\nRoot component. Wraps `Drawer.Root` from Base UI with automatic `swipeDirection` mapping based on `position`.\n\n| Prop             | Type                                     | Default   | Description                                      |\n| ---------------- | ---------------------------------------- | --------- | ------------------------------------------------ |\n| `position`       | `\"right\" \\| \"left\" \\| \"top\" \\| \"bottom\"` | `\"bottom\"` | Controls which edge the drawer opens from. Sets the swipe direction automatically and flows to child components via context |\n| `swipeDirection` | `\"up\" \\| \"down\" \\| \"left\" \\| \"right\"`   | derived   | Overrides the swipe direction derived from `position`. Use when you need different swipe behavior |\n\nAll other props from `Drawer.Root` are supported, including `open`, `onOpenChange`, `modal`, `snapPoints`, `snapPoint`, `onSnapPointChange`, and `snapToSequentialPoints`. Note: Snap points only work for bottom drawers.\n\n### DrawerTrigger\n\nTrigger button that opens the drawer. Alias for `Drawer.Trigger` from Base UI.\n\n### DrawerPopup\n\nPopup container that displays the drawer content.\n\n| Prop              | Type                                      | Default     | Description                                      |\n| ----------------- | ----------------------------------------- | ----------- | ------------------------------------------------ |\n| `variant`         | `\"default\" \\| \"straight\" \\| \"inset\"`     | `\"default\"` | Controls the drawer style. `straight` removes rounded corners, `inset` adds spacing around the drawer on desktop screens |\n| `showCloseButton` | `boolean`                                 | `false`     | When true, displays a close button in the top-right corner |\n| `showBar`         | `boolean`                                 | `false`     | When true, displays a drag bar indicator |\n\n**Example:**\n\n```tsx\n// Bottom drawer (default)\n<Drawer>\n  <DrawerPopup>...</DrawerPopup>\n</Drawer>\n\n// Right side drawer\n<Drawer position=\"right\">\n  <DrawerPopup>...</DrawerPopup>\n</Drawer>\n\n// Left side drawer\n<Drawer position=\"left\">\n  <DrawerPopup>...</DrawerPopup>\n</Drawer>\n\n// Drawer with inset variant\n<Drawer position=\"right\">\n  <DrawerPopup variant=\"inset\">...</DrawerPopup>\n</Drawer>\n```\n\n### DrawerHeader\n\nContainer for the drawer title and description. Supports the `render` prop for polymorphic composition (e.g. `render={<header />}`).\n\n| Prop           | Type      | Default | Description                                      |\n| -------------- | --------- | ------- | ------------------------------------------------ |\n| `allowSelection` | `boolean` | `false` | When true, wraps the header in `DrawerContent` to reduce swipe interference during mouse text selection |\n\n### DrawerFooter\n\nFooter section for action buttons. Supports the `render` prop for polymorphic composition.\n\n| Prop           | Type                     | Default     | Description                                      |\n| -------------- | ------------------------ | ----------- | ------------------------------------------------ |\n| `variant`      | `\"default\" \\| \"bare\"`    | `\"default\"` | Controls the footer styling. `default` includes border and background, `bare` removes them |\n| `allowSelection` | `boolean`              | `true`      | When true, wraps the footer in `DrawerContent` to reduce swipe interference during mouse text selection |\n\n### DrawerTitle\n\nTitle component. Alias for `Drawer.Title` from Base UI.\n\n### DrawerDescription\n\nDescription component. Alias for `Drawer.Description` from Base UI.\n\n### DrawerPanel\n\nContent container. When `scrollable` is true (default), wraps content in a `ScrollArea` component. Supports the `render` prop for polymorphic composition.\n\n| Prop           | Type      | Default | Description                                      |\n| -------------- | --------- | ------- | ------------------------------------------------ |\n| `scrollable`   | `boolean` | `true`  | When true, wraps content in a `ScrollArea`. Set to false for non-scrollable content |\n| `scrollFade`   | `boolean` | `true`  | When true, shows a fade effect at scroll edges (only applies when `scrollable` is true) |\n| `allowSelection` | `boolean` | `true` | When true, wraps the panel in `DrawerContent` to reduce swipe interference during mouse text selection |\n\n### DrawerMenu\n\nContainer for drawer menu items. Use with `DrawerMenuItem`, `DrawerMenuSeparator`, `DrawerMenuGroup`, `DrawerMenuGroupLabel`, `DrawerMenuCheckboxItem`, `DrawerMenuRadioGroup`, `DrawerMenuRadioItem`, and `DrawerMenuTrigger` to build menus that mirror the Menu component API. Supports the `render` prop for polymorphic composition.\n\n### DrawerMenuItem\n\nStyled menu item that matches `MenuItem` appearance. Does not close the drawer — wrap with `DrawerClose` when close-on-click is needed. Supports the `render` prop for polymorphic composition.\n\n| Prop      | Type                                | Default     | Description                                      |\n| --------- | ----------------------------------- | ----------- | ------------------------------------------------ |\n| `variant` | `\"default\" \\| \"destructive\"`        | `\"default\"` | When `destructive`, uses destructive text color  |\n| `disabled`| `boolean`                           | —           | When true, disables the item                     |\n\n**Example:** Use with `DrawerClose` for close-on-click: `<DrawerClose render={<DrawerMenuItem />}>Edit</DrawerClose>`\n\n### DrawerMenuSeparator\n\nHorizontal separator between menu items or groups. Supports the `render` prop for polymorphic composition.\n\n### DrawerMenuGroup\n\nContainer for grouping related menu items. Use with `DrawerMenuGroupLabel` for labeled sections. Supports the `render` prop for polymorphic composition.\n\n### DrawerMenuGroupLabel\n\nLabel for a `DrawerMenuGroup` section. Renders muted, smaller text above a group of items. In nested drawers, use as a section title at the top of the menu (no back button needed — swipe to go back). Supports the `render` prop for polymorphic composition.\n\n### DrawerMenuTrigger\n\nTrigger that opens a nested drawer. Styled like a menu item with a trailing chevron. Use for menu items that open nested drawers (e.g. \"Add to Playlist\" → nested drawer with playlist options). Wraps `DrawerTrigger` internally.\n\n**Example:** `<DrawerMenuTrigger>Add to Playlist</DrawerMenuTrigger>` opens a nested drawer when tapped.\n\n### DrawerMenuCheckboxItem\n\nCheckbox menu item for independent toggles. Supports `variant=\"switch\"` for toggle-style switches. For selection groups, use `DrawerMenuRadioGroup` with `DrawerMenuRadioItem`.\n\n### DrawerMenuRadioGroup\n\nContainer for radio menu items. Use with `DrawerMenuRadioItem` for mutually exclusive options (e.g. \"Sort by\" with Artist, Album, Title).\n\n### DrawerMenuRadioItem\n\nRadio menu item. Must be used inside `DrawerMenuRadioGroup` with a `value` prop.\n\n### DrawerClose\n\nClose button component. Alias for `Drawer.Close` from Base UI.\n\n### DrawerPortal\n\nPortal component for rendering outside the DOM hierarchy. Alias for `Drawer.Portal` from Base UI.\n\n### DrawerBackdrop\n\nBackdrop/overlay component. Alias for `Drawer.Backdrop` from Base UI.\n\n### DrawerViewport\n\nViewport component for positioning. Alias for `Drawer.Viewport` from Base UI. Typically not used directly — `DrawerPopup` renders it internally.\n\n### DrawerBar\n\nDrag handle indicator shown when `showBar` is true on `DrawerPopup`. Typically not used directly.\n\n### DrawerContent\n\nPrimitive content wrapper used for polymorphic composition with the `render` prop. Alias for `Drawer.Content` from Base UI.\n\n## Examples\n\n### Inset variant\n\n<ComponentPreview name=\"p-drawer-4\" />\n\n### Straight variant\n\n<ComponentPreview name=\"p-drawer-5\" />\n\n### Scrollable content\n\n<ComponentPreview name=\"p-drawer-6\" />\n\n### Nested drawers\n\n<ComponentPreview name=\"p-drawer-7\" />\n\n### Snap points\n\n<ComponentPreview name=\"p-drawer-9\" />\n\n### Mobile menu\n\n<ComponentPreview name=\"p-drawer-11\" />\n\n### Responsive dialog\n\nUse `Drawer` on small screens and `Dialog` on larger ones to show the same content in a modal on desktop and a bottom sheet on mobile.\n\n<ComponentPreview name=\"p-drawer-12\" />\n\n### Responsive menu\n\nPair `Drawer` with `Menu` so actions appear in a dropdown on desktop and a swipe-up sheet on mobile. Use `DrawerMenuTrigger` for items that open nested drawers on mobile. Nested drawers use `DrawerMenuGroupLabel` as section titles; swipe to go back.\n\n<ComponentPreview name=\"p-drawer-13\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/empty.mdx",
    "content": "---\ntitle: Empty\ndescription: A container for displaying empty state information.\n---\n\n<ComponentPreview name=\"p-empty-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/empty\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"empty\" title=\"components/ui/empty.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\"\n```\n\n```tsx\n<Empty>\n  <EmptyHeader>\n    <EmptyMedia variant=\"icon\">\n      <Icon />\n    </EmptyMedia>\n    <EmptyTitle>No data</EmptyTitle>\n    <EmptyDescription>No data found</EmptyDescription>\n  </EmptyHeader>\n  <EmptyContent>\n    <Button>Add data</Button>\n  </EmptyContent>\n</Empty>\n```\n\n## API Reference\n\nThe API design of this component is modeled after [shadcn/ui's empty component](https://ui.shadcn.com/docs/components/empty) to ensure familiarity and consistency for developers already using shadcn. This standardization makes it easier to adopt **coss ui** while maintaining API parity with the patterns developers already know and love.\n\n### Empty\n\nThe main component of the empty state. Wraps the `EmptyHeader` and `EmptyContent` components.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<Empty>\n  <EmptyHeader />\n  <EmptyContent />\n</Empty>\n```\n\n### EmptyHeader\n\nThe `EmptyHeader` component wraps the empty media, title, and description.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<EmptyHeader>\n  <EmptyMedia />\n  <EmptyTitle />\n  <EmptyDescription />\n</EmptyHeader>\n```\n\n### EmptyMedia\n\nUse the `EmptyMedia` component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.\n\n| Prop        | Type                  | Default   |\n| ----------- | --------------------- | --------- |\n| `variant`   | `\"default\" \\| \"icon\"` | `default` |\n| `className` | `string`              |           |\n\n```tsx\n<EmptyMedia variant=\"icon\">\n  <Icon />\n</EmptyMedia>\n```\n\n```tsx\n<EmptyMedia>\n  <Avatar>\n    <AvatarImage src=\"...\" />\n    <AvatarFallback>JD</AvatarFallback>\n  </Avatar>\n</EmptyMedia>\n```\n\n### EmptyTitle\n\nUse the `EmptyTitle` component to display the title of the empty state.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<EmptyTitle>No data</EmptyTitle>\n```\n\n### EmptyDescription\n\nUse the `EmptyDescription` component to display the description of the empty state.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<EmptyDescription>You do not have any notifications.</EmptyDescription>\n```\n\n### EmptyContent\n\nUse the `EmptyContent` component to display the content of the empty state such as a button, input or a link.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<EmptyContent>\n  <Button>Add Project</Button>\n</EmptyContent>\n```\n"
  },
  {
    "path": "apps/ui/content/docs/components/field.mdx",
    "content": "---\ntitle: Field\ndescription: A component that provides labelling and validation for form controls.\n\nlinks:\n  doc: https://base-ui.com/react/components/field#api-reference\n---\n\n<ComponentPreview name=\"p-field-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/field\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Import the following variables into your CSS file</Step>\n\n```css\n@theme inline {\n  --color-destructive-foreground: var(--destructive-foreground);\n}\n\n:root {\n  --destructive-foreground: var(--color-red-700);\n}\n\n.dark {\n  --destructive-foreground: var(--color-red-400);\n}\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource\n  name=\"field\"\n  title=\"components/ui/field.tsx\"\n/>\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  FieldValidity,\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\n```\n\n```tsx\n<Field>\n  <FieldLabel>Name</FieldLabel>\n  <Input type=\"text\" placeholder=\"Enter your name\" />\n  <FieldDescription>Visible on your profile</FieldDescription>\n  <FieldError>Please enter a valid name</FieldError>\n  <FieldValidity>\n    {(validity) => (\n      {validity.error && <p>{validity.error}</p>}\n    )}\n  </FieldValidity>\n</Field>\n```\n\n## API Reference\n\n### Field\n\nRoot component. Styled wrapper for `Field.Root` from Base UI with flex column layout.\n\n### FieldLabel\n\nLabel for the field. Styled wrapper for `Field.Label` from Base UI.\n\n### FieldItem\n\nContainer for field items. Styled wrapper for `Field.Item` from Base UI.\n\n### FieldDescription\n\nDescription text for the field. Styled wrapper for `Field.Description` from Base UI with muted foreground color.\n\n### FieldError\n\nError message for the field. Styled wrapper for `Field.Error` from Base UI with destructive foreground color.\n\n### FieldControl\n\nAlias for `Field.Control` from Base UI. Use this to register a custom or third-party control with the field context so it participates in labelling, validation, and error state.\n\nNote that `Textarea` does not require `FieldControl` — it wraps `Field.Control` internally and integrates with `Field` the same way `Input` and other built-in controls do.\n\n### FieldValidity\n\nAlias for `Field.Validity` from Base UI.\n\n## Examples\n\n### Required Field\n\n<ComponentPreview name=\"p-field-2\" />\n\n### Disabled Field\n\n<ComponentPreview name=\"p-field-3\" />\n\n### With Error\n\nEnter an invalid email address and press enter to see the error.\n\n<ComponentPreview name=\"p-field-4\" />\n\n### With Validity\n\n<ComponentPreview name=\"p-field-5\"\n  className=\"[& .preview>*]:w-full [&_.preview>*]:max-w-80\"\n/>\n\n### Input Group\n\n<ComponentPreview name=\"p-field-6\" />\n\n### Autocomplete Field\n\n<ComponentPreview name=\"p-field-7\" />\n\n### Combobox Field\n\n<ComponentPreview name=\"p-field-8\" />\n\n### Combobox Multiple Field\n\n<ComponentPreview name=\"p-field-9\" />\n\n### Textarea Field\n\n<ComponentPreview name=\"p-field-10\" />\n\n### Select Field\n\n<ComponentPreview name=\"p-field-11\" />\n\n### Checkbox Field\n\n<ComponentPreview name=\"p-field-12\" />\n\n### Checkbox Group Field\n\n<ComponentPreview name=\"p-field-13\" />\n\n### Radio Group Field\n\n<ComponentPreview name=\"p-field-14\" />\n\n### Switch Field\n\n<ComponentPreview name=\"p-field-15\" />\n\n### Slider Field\n\n<ComponentPreview name=\"p-field-16\" />\n\n### Number Field\n\n<ComponentPreview name=\"p-field-17\" />\n\n### Complete Form Example\n\n<ComponentPreview name=\"p-field-18\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/fieldset.mdx",
    "content": "---\ntitle: Fieldset\ndescription: A native fieldset element with a legend.\n\nlinks:\n  doc: https://base-ui.com/react/components/fieldset#api-reference\n---\n\n<ComponentPreview name=\"p-fieldset-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/fieldset\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"fieldset\" title=\"components/ui/fieldset.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Fieldset, FieldsetLegend } from \"@/components/ui/fieldset\"\n```\n\n```tsx\n<Fieldset>\n  <FieldsetLegend>Fieldset legend</FieldsetLegend>\n</Fieldset>\n```\n\n## API Reference\n\n### Fieldset\n\nRoot component. Styled wrapper for `Fieldset.Root` from Base UI with flex column layout.\n\n### FieldsetLegend\n\nLegend for the fieldset. Styled wrapper for `Fieldset.Legend` from Base UI with semibold font weight.\n"
  },
  {
    "path": "apps/ui/content/docs/components/form.mdx",
    "content": "---\ntitle: Form\ndescription: A form wrapper component that simplifies validation and submission.\n\nlinks:\n  doc: https://base-ui.com/react/components/form#api-reference\n---\n\n<ComponentPreview name=\"p-form-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/form\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react zod\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"form\" title=\"components/ui/form.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Field,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\"\nimport { Form } from \"@/components/ui/form\"\nimport { Input } from \"@/components/ui/input\"\n```\n\n```tsx\n<Form\n  onSubmit={(e) => {\n    /* handle submit */\n  }}\n>\n  <Field>\n    <FieldLabel>Email</FieldLabel>\n    <Input name=\"email\" type=\"email\" required />\n    <FieldError>Please enter a valid email.</FieldError>\n  </Field>\n</Form>\n```\n\n## API Reference\n\n### Form\n\nStyled wrapper for `Form` from Base UI with flex column layout and gap between fields.\n\n## Examples\n\n### Using with Zod\n\n<ComponentPreview name=\"p-form-2\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/frame.mdx",
    "content": "---\ntitle: Frame\ndescription: A framed container for grouping related information.\n---\n\n<ComponentPreview name=\"p-frame-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/frame\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"frame\" title=\"components/ui/frame.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Frame,\n  FrameDescription,\n  FrameFooter,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/components/ui/frame\"\n```\n\n```tsx\n<Frame>\n  <FrameHeader>\n    <FrameTitle>Title</FrameTitle>\n    <FrameDescription>Description</FrameDescription>\n  </FrameHeader>\n  <FramePanel>Content</FramePanel>\n  <FrameFooter>Footer</FrameFooter>\n</Frame>\n```\n\n## API Reference\n\n### Frame\n\nThe main container component for grouping related information.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n### FramePanel\n\nA panel container for frame content.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<FramePanel>Content</FramePanel>\n```\n\n### FrameHeader\n\nHeader section for the frame.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<FrameHeader>\n  <FrameTitle>Title</FrameTitle>\n  <FrameDescription>Description</FrameDescription>\n</FrameHeader>\n```\n\n### FrameTitle\n\nTitle text for the frame header.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<FrameTitle>Title</FrameTitle>\n```\n\n### FrameDescription\n\nDescription text for the frame header.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<FrameDescription>Description</FrameDescription>\n```\n\n### FrameFooter\n\nFooter section for the frame.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<FrameFooter>Footer</FrameFooter>\n```\n\n## Examples\n\n### Separated Panels\n\nBy default, multiple panels are separated with spacing between them.\n\n<ComponentPreview name=\"p-frame-3\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/group.mdx",
    "content": "---\ntitle: Group\ndescription: A component for visually grouping a series of controls.\n---\n\n<ComponentPreview name=\"p-group-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/group\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"group\" title=\"components/ui/group.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Button } from \"@/components/ui/button\"\nimport { Group, GroupSeparator } from \"@/components/ui/group\"\n```\n\n```tsx\n<Group>\n  <Button>Button</Button>\n  <GroupSeparator />\n  <Button>Button</Button>\n</Group>\n```\n\n## Accessibility\n\n- The `Group` component has the `role` attribute set to `group`.\n- Use `Tab` to navigate between the controls in the group.\n- Use `aria-label` or `aria-labelledby` to label the group.\n\n```tsx showLineNumbers\n<Group aria-label=\"Media controls\">\n  <Button variant=\"outline\">Play</Button>\n  <GroupSeparator />\n  <Button variant=\"outline\">Pause</Button>\n</Group>\n```\n\n### Group vs ToggleGroup\n\n- Use the `Group` component when you want to group controls that perform an action.\n- Use the `ToggleGroup` component when you want to group controls that toggle a state.\n\n## API Reference\n\n### Group\n\nThe `Group` component is a container that visually groups a series of related controls together with consistent styling.\n\n| Prop          | Type                         | Default        |\n| ------------- | ---------------------------- | -------------- |\n| `orientation` | `\"horizontal\" \\| \"vertical\"` | `\"horizontal\"` |\n\n```tsx\n<Group>\n  <Button>Button 1</Button>\n  <GroupSeparator />\n  <Button>Button 2</Button>\n</Group>\n```\n\nNest multiple groups to create complex layouts with spacing. See the [nested groups](#nested-groups) example for more details.\n\n```tsx\n<Group>\n  <Group>\n    <Button>1</Button>\n    <GroupSeparator />\n    <Button>2</Button>\n  </Group>\n  <Group>\n    <Button>Previous</Button>\n    <GroupSeparator />\n    <Button>Next</Button>\n  </Group>\n</Group>\n```\n\n### GroupSeparator\n\nThe `GroupSeparator` component visually divides controls within a group.\n\n| Prop          | Type                         | Default      |\n| ------------- | ---------------------------- | ------------ |\n| `orientation` | `\"horizontal\" \\| \"vertical\"` | `\"vertical\"` |\n\n```tsx\n<Group>\n  <Button>Button 1</Button>\n  <GroupSeparator />\n  <Button>Button 2</Button>\n</Group>\n```\n\n**Note:** Unlike shadcn's ButtonGroup, `GroupSeparator` is required between all controls, including outline buttons. This ensures consistent visual hierarchy and focus states.\n\n### GroupText\n\nUse this component to display text within a group, such as labels or prefixes.\n\n| Prop     | Type                       | Default |\n| -------- | -------------------------- | ------- |\n| `render` | `React.ReactNode \\| null` | `null`  |\n\n```tsx\n<Group>\n  <GroupText>https://</GroupText>\n  <GroupSeparator />\n  <Input placeholder=\"example.com\" />\n</Group>\n```\n\nUse the `render` prop to render a custom component as the text, for example a label.\n\n```tsx\n<Group>\n  <GroupText render={<Label htmlFor=\"domain\" aria-label=\"Domain\" />}>\n    https://\n  </GroupText>\n  <GroupSeparator />\n  <Input id=\"domain\" placeholder=\"example.com\" />\n</Group>\n```\n\n## Examples\n\n### With Input\n\n<ComponentPreview name=\"p-group-2\" />\n\n### Small Size\n\n<ComponentPreview name=\"p-group-3\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-group-4\" />\n\n### With Disabled Button\n\n<ComponentPreview name=\"p-group-5\" />\n\n### With Default Buttons\n\n<ComponentPreview name=\"p-group-6\" />\n\n### With Start Labeled Text\n\n<ComponentPreview name=\"p-group-7\" />\n\n### With End Text\n\n<ComponentPreview name=\"p-group-8\" />\n\n### Vertical\n\n<ComponentPreview name=\"p-group-9\" />\n\n### Nested Groups\n\n<ComponentPreview name=\"p-group-10\" />\n\n### With Popup\n\n<ComponentPreview name=\"p-group-11\" />\n\n### With Input Group\n\n<ComponentPreview name=\"p-group-12\" />\n\n### With Menu\n\n<ComponentPreview name=\"p-group-13\" />\n\n### With Select\n\n<ComponentPreview name=\"p-group-14\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/input-group.mdx",
    "content": "---\ntitle: Input Group\ndescription: A flexible component for grouping inputs with addons, buttons, and other elements.\n---\n\n<ComponentPreview name=\"p-input-group-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/input-group\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"input-group\" title=\"components/ui/input-group.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Input } from \"@/components/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/components/ui/input-group\"\n```\n\n```tsx\n<InputGroup>\n  <InputGroupInput type=\"email\" placeholder=\"Email\" />\n  <InputGroupAddon>\n    <MailIcon />\n  </InputGroupAddon>\n</InputGroup>\n```\n\n## API Reference\n\n### InputGroup\n\nThe main component that wraps inputs and addons.\n\n| Prop        | Type                          | Description                                      |\n| ----------- | ----------------------------- | ------------------------------------------------ |\n| `className` | `string`                      | Additional CSS classes to apply to the component |\n| `...props`  | `React.ComponentProps<'div'>` | All standard div attributes are supported        |\n\n### InputGroupAddon\n\nA container for addons like icons, text, buttons, and other elements. Can be positioned at the start or end (inline), or top or bottom (block) of the input.\n\n| Prop        | Type                                                              | Default          | Description                                                                                                                        |\n| ----------- | ----------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| `align`     | `'inline-start' \\| 'inline-end' \\| 'block-start' \\| 'block-end'` | `'inline-start'` | The position of the addon relative to the input. Use `inline-start` or `inline-end` for inputs, and `block-start` or `block-end` for textareas |\n| `className` | `string`                                                          |                  | Additional CSS classes to apply to the component                                                                                   |\n| `...props`  | `React.ComponentProps<'div'>`                                     |                  | All standard div attributes are supported                                                                                          |\n\n<Alert className=\"bg-muted/24\">\n  <InfoIcon />\n  <AlertDescription>\n    For proper focus navigation, the `InputGroupAddon` component should be placed\n    after the input in the DOM order.\n  </AlertDescription>\n</Alert>\n\n### InputGroupText\n\nA text container component for displaying text content within an `InputGroupAddon`. Automatically styles text with muted foreground color and handles icon sizing.\n\n| Prop        | Type                           | Description                                      |\n| ----------- | ------------------------------ | ------------------------------------------------ |\n| `className` | `string`                       | Additional CSS classes to apply to the component |\n| `...props`  | `React.ComponentProps<'span'>` | All standard span attributes are supported       |\n\n### InputGroupInput\n\nA specialized input component for use within InputGroup. It's essentially an unstyled Input component that inherits styling from the parent InputGroup.\n\n| Prop        | Type         | Description                                                                                           |\n| ----------- | ------------ | ----------------------------------------------------------------------------------------------------- |\n| `className` | `string`     | Additional CSS classes to apply to the component                                                      |\n| `...props`  | `InputProps` | All props from the Input component are supported, including `type`, `placeholder`, `disabled`, etc. |\n\n### InputGroupTextarea\n\nA specialized textarea component for use within InputGroup. It's essentially an unstyled Textarea component that inherits styling from the parent InputGroup.\n\n| Prop        | Type            | Description                                                                                              |\n| ----------- | --------------- | -------------------------------------------------------------------------------------------------------- |\n| `className` | `string`        | Additional CSS classes to apply to the component                                                         |\n| `...props`  | `TextareaProps` | All props from the Textarea component are supported, including `placeholder`, `disabled`, `rows`, etc. |\n\n## Examples\n\n### With End Icon\n\n<ComponentPreview name=\"p-input-group-2\" />\n\n### With Start Text\n\n<ComponentPreview name=\"p-input-group-3\" />\n\n### With End Text\n\n<ComponentPreview name=\"p-input-group-4\" />\n\n### With Start and End Text\n\n<ComponentPreview name=\"p-input-group-5\" />\n\n### With Tooltip\n\n<ComponentPreview name=\"p-input-group-7\" />\n\n### With Icon Button\n\n<ComponentPreview name=\"p-input-group-8\" />\n\n### With Button\n\n<ComponentPreview name=\"p-input-group-9\" />\n\n### With Badge\n\n<ComponentPreview name=\"p-input-group-10\" />\n\n### With Keyboard Shortcut\n\n<ComponentPreview name=\"p-input-group-11\" />\n\n### With Inner Label\n\n<ComponentPreview name=\"p-input-group-12\" />\n\n### Small Size\n\n<ComponentPreview name=\"p-input-group-13\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-input-group-14\" />\n\n### Disabled\n\n<ComponentPreview name=\"p-input-group-15\" />\n\n### Loading\n\n<ComponentPreview name=\"p-input-group-16\" />\n\n### With Number Field\n\n<ComponentPreview name=\"p-input-group-6\" />\n\n### With Textarea\n\n<ComponentPreview name=\"p-input-group-17\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/input-otp.mdx",
    "content": "---\ntitle: Input OTP\ndescription: A segmented input for one-time passwords and verification codes.\n\nlinks:\n  doc: https://github.com/guilhermerodz/input-otp\n---\n\n<ComponentPreview name=\"p-input-otp-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/input-otp\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react input-otp lucide-react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"input-otp\" title=\"components/ui/input-otp.tsx\" />\n<ComponentSource name=\"separator\" title=\"components/ui/separator.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/components/ui/input-otp\"\n```\n\n```tsx\n<InputOTP aria-label=\"Verification code\" maxLength={6}>\n  <InputOTPGroup>\n    <InputOTPSlot index={0} />\n    <InputOTPSlot index={1} />\n    <InputOTPSlot index={2} />\n  </InputOTPGroup>\n  <InputOTPSeparator />\n  <InputOTPGroup>\n    <InputOTPSlot index={3} />\n    <InputOTPSlot index={4} />\n    <InputOTPSlot index={5} />\n  </InputOTPGroup>\n</InputOTP>\n```\n\n## API Reference\n\nThis component is built on top of [input-otp](https://github.com/guilhermerodz/input-otp).\n\n### InputOTP\n\nRoot component for the OTP input. Accepts all props from `OTPInput` plus the following:\n\n| Prop                 | Type       | Default | Description                                      |\n| -------------------- | ---------- | ------- | ------------------------------------------------ |\n| `containerClassName` | `string`   | -       | Class name applied to the outer OTP container    |\n\nFor the full list of props, see the [`input-otp` documentation](https://github.com/guilhermerodz/input-otp).\n\n### InputOTPGroup\n\nContainer for one or more OTP slots.\n\n| Prop   | Type                  | Default   | Description                      |\n| ------ | --------------------- | --------- | -------------------------------- |\n| `size` | `\"default\" \\| \"lg\"` | `\"default\"` | Size applied to the group's slots |\n\n### InputOTPSlot\n\nRenders a single OTP slot for the provided `index`.\n\n| Prop    | Type     | Default | Description                                      |\n| ------- | -------- | ------- | ------------------------------------------------ |\n| `index` | `number` | -       | Zero-based slot index within the parent `InputOTP` |\n\n### InputOTPSeparator\n\nVisual separator between slot groups.\n\n## Examples\n\n### Large\n\n<ComponentPreview name=\"p-input-otp-2\" />\n\n### With Separator\n\n<ComponentPreview name=\"p-input-otp-3\" />\n\n### With Label\n\n<ComponentPreview name=\"p-input-otp-4\" />\n\n### Digits Only\n\n<ComponentPreview name=\"p-input-otp-5\" />\n\n### Invalid\n\n<ComponentPreview name=\"p-input-otp-6\" />\n\n### Auto Validation\n\n<ComponentPreview name=\"p-input-otp-7\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/input.mdx",
    "content": "---\ntitle: Input\ndescription: A native input element.\n\nlinks:\n  doc: https://base-ui.com/react/components/input#api-reference\n---\n\n<ComponentPreview name=\"p-input-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/input\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"input\" title=\"components/ui/input.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Input } from \"@/components/ui/input\"\n```\n\n```tsx\n<Input />\n```\n\n## API Reference\n\n### Input\n\nStyled wrapper for `Input` from Base UI with custom size options.\n\n| Prop       | Type                                  | Default     | Description                                      |\n| ---------- | ------------------------------------- | ----------- | ------------------------------------------------ |\n| `size`     | `\"sm\" \\| \"default\" \\| \"lg\" \\| number` | `\"default\"` | Controls the input height. Number values are passed to the native `size` attribute |\n| `unstyled` | `boolean`                             | `false`     | When true, removes the wrapper styling (border, shadow, etc.) |\n\n## Examples\n\nFor accessible labelling and validation, prefer using the `Field` component to wrap inputs, or the `FieldControl` component. See some [related examples](/ui/docs/components/field).\n\n### Small Size\n\n<ComponentPreview name=\"p-input-2\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-input-3\" />\n\n### Disabled\n\n<ComponentPreview name=\"p-input-4\" />\n\n### File\n\n<ComponentPreview name=\"p-input-5\" />\n\n### With Label\n\n<ComponentPreview name=\"p-input-6\" />\n\n### With Button\n\n<ComponentPreview name=\"p-input-7\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-form-1\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/kbd.mdx",
    "content": "---\ntitle: Kbd\ndescription: A component for displaying keyboard keys and shortcuts.\n---\n\n<ComponentPreview name=\"p-kbd-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/kbd\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"kbd\" title=\"components/ui/kbd.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\"\n```\n\nSingle key:\n\n```tsx\n<Kbd>K</Kbd>\n```\n\nMultiple keys (key combination):\n\n```tsx\n<KbdGroup>\n  <Kbd>⌘</Kbd>\n  <Kbd>K</Kbd>\n</KbdGroup>\n```\n\n## API Reference\n\n### Kbd\n\nDisplays a single keyboard key.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n### KbdGroup\n\nGroups multiple keyboard keys for key combinations.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n## Examples\n\n### Input Group\n\n<ComponentPreview name=\"p-input-group-11\" className=\"[&_.preview>*]:w-full [&_.preview>*]:max-w-64\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/label.mdx",
    "content": "---\ntitle: Label\ndescription: Renders an accessible label associated with controls.\n---\n\n<ComponentPreview name=\"p-input-6\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/label\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"label\" title=\"components/ui/label.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Label } from \"@/components/ui/label\"\n```\n\n```tsx\n<Label htmlFor=\"email\">Email</Label>\n```\n\n## API Reference\n\nThis is a custom component using Base UI's `useRender` hook, not a direct Base UI wrapper.\n\n### Label\n\nA label component that can be rendered as different elements.\n\n| Prop     | Type                   | Default | Description                                      |\n| -------- | ---------------------- | ------- | ------------------------------------------------ |\n| `render` | `React.ReactElement`   | -       | Render as a different element                    |\n\n## Examples\n\nFor accessible labelling and validation, prefer using the `FieldLabel` component. See some [related examples](/ui/docs/components/field).\n\n### With Checkbox\n\n<ComponentPreview name=\"checkbox-demo\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/menu.mdx",
    "content": "---\ntitle: Menu\ndescription: A list of actions in a dropdown, enhanced with keyboard navigation.\n\nlinks:\n  doc: https://base-ui.com/react/components/menu#api-reference\n---\n\n<ComponentPreview name=\"p-menu-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/menu\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Import the following variables into your CSS file</Step>\n\n```css\n@theme inline {\n  --color-destructive-foreground: var(--destructive-foreground);\n}\n\n:root {\n  --destructive-foreground: var(--color-red-700);\n}\n\n.dark {\n  --destructive-foreground: var(--color-red-400);\n}\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"menu\" title=\"components/ui/menu.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuTrigger,\n} from \"@/components/ui/menu\"\n```\n\n```tsx\n<Menu>\n  <MenuTrigger>Open</MenuTrigger>\n  <MenuPopup align=\"start\" sideOffset={4}>\n    <MenuItem>Profile</MenuItem>\n    <MenuSeparator />\n\n    <MenuGroup>\n      <MenuGroupLabel>Playback</MenuGroupLabel>\n      <MenuItem>Play</MenuItem>\n      <MenuItem>Pause</MenuItem>\n    </MenuGroup>\n\n    <MenuSeparator />\n\n    <MenuCheckboxItem>Shuffle</MenuCheckboxItem>\n    <MenuCheckboxItem>Repeat</MenuCheckboxItem>\n    <MenuCheckboxItem variant=\"switch\">Auto save</MenuCheckboxItem>\n\n    <MenuSeparator />\n\n    <MenuGroup>\n      <MenuGroupLabel>Sort by</MenuGroupLabel>\n      <MenuRadioGroup>\n        <MenuRadioItem>Artist</MenuRadioItem>\n        <MenuRadioItem>Album</MenuRadioItem>\n        <MenuRadioItem>Title</MenuRadioItem>\n      </MenuRadioGroup>\n    </MenuGroup>\n\n    <MenuSeparator />\n\n    <MenuSub>\n      <MenuSubTrigger>Add to playlist</MenuSubTrigger>\n      <MenuSubPopup>\n        <MenuItem>Jazz</MenuItem>\n        <MenuItem>Rock</MenuItem>\n      </MenuSubPopup>\n    </MenuSub>\n  </MenuPopup>\n</Menu>\n```\n\n## API Reference\n\n### Menu\n\nRoot component. Alias for `Menu.Root` from Base UI. Also exported as `DropdownMenu`.\n\n### MenuTrigger\n\nTrigger button that opens the menu. Alias for `Menu.Trigger` from Base UI. Also exported as `DropdownMenuTrigger`.\n\n### MenuPopup\n\nPopup container that displays the menu content. Also exported as `DropdownMenuContent`.\n\n| Prop          | Type                                           | Default    | Description                                      |\n| ------------- | ---------------------------------------------- | ---------- | ------------------------------------------------ |\n| `side`        | `\"top\" \\| \"bottom\" \\| \"left\" \\| \"right\"`       | `\"bottom\"` | Side of the trigger to position the popup        |\n| `align`       | `\"start\" \\| \"center\" \\| \"end\"`                 | `\"center\"` | Alignment relative to the trigger                |\n| `sideOffset`  | `number`                                       | `4`        | Distance from the trigger in pixels              |\n| `alignOffset` | `number`                                       | -          | Offset along the alignment axis                  |\n\n### MenuGroup\n\nGroups related menu items. Alias for `Menu.Group` from Base UI. Also exported as `DropdownMenuGroup`.\n\n### MenuItem\n\nIndividual menu item. Also exported as `DropdownMenuItem`.\n\n| Prop      | Type                          | Default     | Description                                      |\n| --------- | ----------------------------- | ----------- | ------------------------------------------------ |\n| `inset`   | `boolean`                     | -           | Adds left padding to align with items that have icons |\n| `variant` | `\"default\" \\| \"destructive\"`  | `\"default\"` | Controls the item styling                        |\n\n**Using `inset`:** When mixing items with and without icons, use `inset` on icon-less items to maintain alignment:\n\n```tsx\n<MenuItem><PencilIcon /> Edit</MenuItem>\n<MenuItem><TrashIcon /> Delete</MenuItem>\n<MenuItem inset>Profile</MenuItem>  {/* Aligns with icon items above */}\n```\n\n### MenuCheckboxItem\n\nCheckbox menu item. Also exported as `DropdownMenuCheckboxItem`.\n\n| Prop      | Type                       | Default     | Description                                      |\n| --------- | -------------------------- | ----------- | ------------------------------------------------ |\n| `variant` | `\"default\" \\| \"switch\"`    | `\"default\"` | Display style - `switch` shows a toggle switch indicator |\n\n### MenuRadioGroup\n\nGroups radio menu items. Alias for `Menu.RadioGroup` from Base UI. Also exported as `DropdownMenuRadioGroup`.\n\n### MenuRadioItem\n\nRadio menu item. Styled wrapper for `Menu.RadioItem` from Base UI. Also exported as `DropdownMenuRadioItem`.\n\n### MenuGroupLabel\n\nLabel for a menu group. Also exported as `DropdownMenuLabel`.\n\n| Prop    | Type      | Default | Description                                      |\n| ------- | --------- | ------- | ------------------------------------------------ |\n| `inset` | `boolean` | -       | Adds left padding to align with items that have icons |\n\n### MenuSeparator\n\nVisual separator between menu items. Styled wrapper for `Menu.Separator` from Base UI. Also exported as `DropdownMenuSeparator`.\n\n### MenuShortcut\n\nDisplays keyboard shortcut text. Custom component (not a Base UI wrapper). Also exported as `DropdownMenuShortcut`.\n\n### MenuSub\n\nSubmenu container. Alias for `Menu.SubmenuRoot` from Base UI. Also exported as `DropdownMenuSub`.\n\n### MenuSubTrigger\n\nTrigger for opening a submenu. Also exported as `DropdownMenuSubTrigger`.\n\n| Prop    | Type      | Default | Description                                      |\n| ------- | --------- | ------- | ------------------------------------------------ |\n| `inset` | `boolean` | -       | Adds left padding to align with items that have icons |\n\n### MenuSubPopup\n\nPopup for submenu content. Also exported as `DropdownMenuSubContent`.\n\n| Prop          | Type                           | Default   | Description                                      |\n| ------------- | ------------------------------ | --------- | ------------------------------------------------ |\n| `align`       | `\"start\" \\| \"center\" \\| \"end\"` | `\"start\"` | Alignment relative to the trigger                |\n| `sideOffset`  | `number`                       | `0`       | Distance from the trigger in pixels              |\n| `alignOffset` | `number`                       | `-5`      | Offset along the alignment axis. Defaults to `-5` when `align` is not `\"center\"` |\n\n## Examples\n\n### Open on Hover\n\n<ComponentPreview name=\"p-menu-2\" />\n\n### With Checkbox\n\n<ComponentPreview name=\"p-menu-3\" />\n\n### With Switch\n\n`MenuCheckboxItem` supports a `variant=\"switch\"` prop that displays a decorative switch indicator instead of a checkmark. This is a purely visual variant - the component remains a checkbox item with the same functionality.\n\n<ComponentPreview name=\"p-menu-9\" />\n\n### With Radio Group\n\n<ComponentPreview name=\"p-menu-4\" />\n\n### With Link\n\n<ComponentPreview name=\"p-menu-5\" />\n\n### With Group Label\n\n<ComponentPreview name=\"p-menu-6\" />\n\n### Nested Menu\n\n<ComponentPreview name=\"p-menu-7\" />\n\n### Close on Click\n\n<ComponentPreview name=\"p-menu-8\" />\n\n### Open a Dialog\n\n<ComponentPreview name=\"p-dialog-2\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/meta.json",
    "content": "{\n  \"pages\": [\n    \"accordion\",\n    \"alert\",\n    \"alert-dialog\",\n    \"autocomplete\",\n    \"avatar\",\n    \"badge\",\n    \"breadcrumb\",\n    \"button\",\n    \"calendar\",\n    \"card\",\n    \"checkbox\",\n    \"checkbox-group\",\n    \"collapsible\",\n    \"combobox\",\n    \"command\",\n    \"date-picker\",\n    \"dialog\",\n    \"drawer\",\n    \"empty\",\n    \"field\",\n    \"fieldset\",\n    \"form\",\n    \"frame\",\n    \"group\",\n    \"input\",\n    \"input-group\",\n    \"input-otp\",\n    \"kbd\",\n    \"label\",\n    \"menu\",\n    \"meter\",\n    \"number-field\",\n    \"pagination\",\n    \"popover\",\n    \"preview-card\",\n    \"progress\",\n    \"radio-group\",\n    \"scroll-area\",\n    \"select\",\n    \"separator\",\n    \"sheet\",\n    \"skeleton\",\n    \"slider\",\n    \"spinner\",\n    \"switch\",\n    \"table\",\n    \"tabs\",\n    \"textarea\",\n    \"toast\",\n    \"toggle\",\n    \"toggle-group\",\n    \"toolbar\",\n    \"tooltip\"\n  ],\n  \"title\": \"Components\"\n}\n"
  },
  {
    "path": "apps/ui/content/docs/components/meter.mdx",
    "content": "---\ntitle: Meter\ndescription: A graphical display of a numeric value within a range.\n\nlinks:\n  doc: https://base-ui.com/react/components/meter#api-reference\n---\n\n<ComponentPreview name=\"p-meter-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/meter\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"meter\" title=\"components/ui/meter.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Meter, MeterLabel, MeterValue } from \"@/components/ui/meter\"\n```\n\n```tsx\n<Meter value={40}>\n  <MeterLabel>Progress</MeterLabel>\n  <MeterValue />\n</Meter>\n```\n\n## API Reference\n\n### Meter\n\nRoot component. Styled wrapper for `Meter.Root` from Base UI with flex column layout.\n\n### MeterTrack\n\nTrack container for the meter indicator. Styled wrapper for `Meter.Track` from Base UI.\n\n### MeterIndicator\n\nVisual indicator showing the current value. Styled wrapper for `Meter.Indicator` from Base UI.\n\n### MeterLabel\n\nLabel text for the meter. Styled wrapper for `Meter.Label` from Base UI.\n\n### MeterValue\n\nDisplays the current value. Styled wrapper for `Meter.Value` from Base UI.\n\n## Examples\n\n### Without Label and Value\n\n<ComponentPreview name=\"p-meter-2\" />\n\n### With Formatted Value\n\n<ComponentPreview name=\"p-meter-3\" />\n\n### With Range\n\n<ComponentPreview name=\"p-meter-4\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/number-field.mdx",
    "content": "---\ntitle: Number Field\ndescription: A numeric input element with increment and decrement buttons, and a scrub area.\n\nlinks:\n  doc: https://base-ui.com/react/components/number-field#api-reference\n---\n\n<ComponentPreview name=\"p-number-field-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/number-field\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource\n  name=\"number-field\"\n  title=\"components/ui/number-field.tsx\"\n/>\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/components/ui/number-field\"\n```\n\n```tsx\n<NumberField defaultValue={0}>\n  <NumberFieldScrubArea label=\"Quantity\" />\n  <NumberFieldGroup>\n    <NumberFieldDecrement />\n    <NumberFieldInput />\n    <NumberFieldIncrement />\n  </NumberFieldGroup>\n</NumberField>\n```\n\n## API Reference\n\n### NumberField\n\nRoot component. Styled wrapper for `NumberField.Root` from Base UI.\n\n| Prop   | Type                        | Default     | Description                                      |\n| ------ | --------------------------- | ----------- | ------------------------------------------------ |\n| `size` | `\"sm\" \\| \"default\" \\| \"lg\"` | `\"default\"` | Controls the size of all child components via context |\n\n### NumberFieldGroup\n\nContainer for the input and buttons. Styled wrapper for `NumberField.Group` from Base UI.\n\n### NumberFieldInput\n\nInput element for the number value. Styled wrapper for `NumberField.Input` from Base UI.\n\n### NumberFieldIncrement\n\nButton to increment the value. Styled wrapper for `NumberField.Increment` from Base UI with plus icon.\n\n### NumberFieldDecrement\n\nButton to decrement the value. Styled wrapper for `NumberField.Decrement` from Base UI with minus icon.\n\n### NumberFieldScrubArea\n\nDraggable area for scrubbing the value. Styled wrapper for `NumberField.ScrubArea` from Base UI.\n\n| Prop    | Type     | Default | Description                                      |\n| ------- | -------- | ------- | ------------------------------------------------ |\n| `label` | `string` | -       | Label text displayed in the scrub area           |\n\n## Examples\n\nFor accessible labelling and validation, prefer using the `Field` component to wrap number fields. See the related example: [Number field](/ui/docs/components/field#number-field).\n\n### Small Size\n\n<ComponentPreview name=\"p-number-field-2\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-number-field-3\" />\n\n### Disabled\n\n<ComponentPreview name=\"p-number-field-4\" />\n\n### With External Label\n\n<ComponentPreview name=\"p-number-field-5\" />\n\n### With Scrub\n\n<ComponentPreview name=\"p-number-field-6\" />\n\n### With Range\n\n<ComponentPreview name=\"p-number-field-7\" />\n\n### With Formatted Value\n\n<ComponentPreview name=\"p-number-field-8\" />\n\n### With Step\n\n<ComponentPreview name=\"p-number-field-9\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-number-field-10\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/pagination.mdx",
    "content": "---\ntitle: Pagination\ndescription: A pagination with page navigation, next and previous links.\n---\n\n<ComponentPreview name=\"p-pagination-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/pagination\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"pagination\" title=\"components/ui/pagination.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/components/ui/pagination\"\n```\n\n```tsx\n<Pagination>\n  <PaginationContent>\n    <PaginationItem>\n      <PaginationPrevious href=\"#\" />\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href=\"#\">1</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationEllipsis />\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationNext href=\"#\" />\n    </PaginationItem>\n  </PaginationContent>\n</Pagination>\n```\n\n## API Reference\n\nThis is a custom component, not a Base UI wrapper.\n\n### Pagination\n\nRoot navigation container with `role=\"navigation\"` and `aria-label=\"pagination\"`.\n\n### PaginationContent\n\nUnordered list container for pagination items.\n\n### PaginationItem\n\nIndividual list item container.\n\n### PaginationLink\n\nLink element for page numbers. Supports the `render` prop.\n\n| Prop       | Type                                  | Default     | Description                                      |\n| ---------- | ------------------------------------- | ----------- | ------------------------------------------------ |\n| `isActive` | `boolean`                             | -           | Highlights the link as the current page          |\n| `size`     | `\"default\" \\| \"icon\"`                 | `\"icon\"`    | Controls the link size                           |\n| `render`   | `React.ReactElement`                  | -           | Render as a different element (e.g., Next.js Link) |\n\n### PaginationPrevious\n\nLink to the previous page. Includes a chevron left icon and \"Previous\" text.\n\n### PaginationNext\n\nLink to the next page. Includes \"Next\" text and a chevron right icon.\n\n### PaginationEllipsis\n\nEllipsis indicator for skipped pages. Displays \"...\" with screen reader text \"More pages\".\n"
  },
  {
    "path": "apps/ui/content/docs/components/popover.mdx",
    "content": "---\ntitle: Popover\ndescription: An accessible popup anchored to a button.\n\nlinks:\n  doc: https://base-ui.com/react/components/popover#api-reference\n---\n\n<ComponentPreview name=\"p-popover-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/popover\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"popover\" title=\"components/ui/popover.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Popover,\n  PopoverClose,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n```\n\n```tsx\n<Popover>\n  <PopoverTrigger>Open Popover</PopoverTrigger>\n  <PopoverPopup>\n    <PopoverTitle>Popover Title</PopoverTitle>\n    <PopoverDescription>Popover Description</PopoverDescription>\n    <PopoverClose>Close</PopoverClose>\n  </PopoverPopup>\n</Popover>\n```\n\n## API Reference\n\n### Popover\n\nRoot component. Alias for `Popover.Root` from Base UI.\n\n### PopoverTrigger\n\nTrigger button that opens the popover. Alias for `Popover.Trigger` from Base UI.\n\n### PopoverPopup\n\nPopup container that displays the popover content. Also exported as `PopoverContent`.\n\n| Prop           | Type                                     | Default    | Description                                      |\n| -------------- | ---------------------------------------- | ---------- | ------------------------------------------------ |\n| `tooltipStyle` | `boolean`                                | `false`    | When true, applies tooltip-like styling (smaller padding, arrow) |\n| `side`         | `\"top\" \\| \"bottom\" \\| \"left\" \\| \"right\"` | `\"bottom\"` | Side of the trigger to position the popup        |\n| `align`        | `\"start\" \\| \"center\" \\| \"end\"`           | `\"center\"` | Alignment relative to the trigger                |\n| `sideOffset`   | `number`                                 | `4`        | Distance from the trigger in pixels              |\n| `alignOffset`  | `number`                                 | `0`        | Offset along the alignment axis                  |\n\n### PopoverTitle\n\nTitle text for the popover. Styled wrapper for `Popover.Title` from Base UI.\n\n### PopoverDescription\n\nDescription text for the popover. Styled wrapper for `Popover.Description` from Base UI.\n\n### PopoverClose\n\nClose button for the popover. Alias for `Popover.Close` from Base UI.\n\n### PopoverCreateHandle\n\nCreates a handle for detached popover triggers. Returns a handle object to attach to multiple triggers.\n\n## Examples\n\n### With Close Button\n\n<ComponentPreview name=\"p-popover-2\" />\n\n### Tooltip Style\n\nUse the `tooltipStyle` prop to make a popover look like a tooltip. This is recommended when you have an info icon button whose only purpose is to show additional information. See the [tooltip accessibility guidelines](https://base-ui.com/react/components/tooltip#accessibility-guidelines) for best practices.\n\n<ComponentPreview name=\"p-input-group-7\" />\n\n### Animated Popovers\n\nYou can create animated popovers that smoothly transition between different triggers using detached triggers. This pattern allows multiple triggers to share a single popover popup, with automatic animations for position, size, and content changes.\n\nTo create detached triggers:\n\n1. Create a handle using `PopoverCreateHandle`\n2. Attach the same handle to multiple `PopoverTrigger` components\n3. Each trigger provides a `payload` prop containing the content component\n4. Use a single `Popover` component with the handle to render the popup\n\n<ComponentPreview name=\"p-popover-3\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/preview-card.mdx",
    "content": "---\ntitle: Preview Card\ndescription: A popup that appears when a link is hovered, showing a preview for sighted users.\n\nlinks:\n  doc: https://base-ui.com/react/components/preview-card#api-reference\n---\n\n<ComponentPreview name=\"p-preview-card-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/preview-card\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"preview-card\" title=\"components/ui/preview-card.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Button } from \"@/components/ui/button\"\nimport {\n  PreviewCard,\n  PreviewCardPopup,\n  PreviewCardTrigger,\n} from \"@/components/ui/preview-card\"\n```\n\n```tsx\n<PreviewCard>\n  <PreviewCardTrigger>Open Preview Card</PreviewCardTrigger>\n  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>\n</PreviewCard>\n```\n\n## API Reference\n\n### PreviewCard\n\nRoot component. Alias for `PreviewCard.Root` from Base UI.\n\n### PreviewCardTrigger\n\nTrigger element that shows the preview card on hover. Alias for `PreviewCard.Trigger` from Base UI.\n\n### PreviewCardPopup\n\nPopup container that displays the preview content. Also exported as `HoverCardContent`.\n\n| Prop         | Type                           | Default    | Description                                      |\n| ------------ | ------------------------------ | ---------- | ------------------------------------------------ |\n| `align`      | `\"start\" \\| \"center\" \\| \"end\"` | `\"center\"` | Alignment relative to the trigger                |\n| `sideOffset` | `number`                       | `4`        | Distance from the trigger in pixels              |\n"
  },
  {
    "path": "apps/ui/content/docs/components/progress.mdx",
    "content": "---\ntitle: Progress\ndescription: Displays the status of a task that takes a long time.\n\nlinks:\n  doc: https://base-ui.com/react/components/progress#api-reference\n---\n\n<ComponentPreview name=\"p-progress-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/progress\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"progress\" title=\"components/ui/progress.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/components/ui/progress\"\n```\n\n```tsx\n<Progress value={40} />\n```\n\nNote: If you render children inside `Progress`, you must also include `ProgressTrack` and `ProgressIndicator` inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.\n\n## API Reference\n\n### Progress\n\nRoot component. Styled wrapper for `Progress.Root` from Base UI. When no children are provided, automatically renders a track and indicator.\n\n### ProgressTrack\n\nTrack container for the progress indicator. Styled wrapper for `Progress.Track` from Base UI.\n\n### ProgressIndicator\n\nVisual indicator showing the current progress. Styled wrapper for `Progress.Indicator` from Base UI.\n\n### ProgressLabel\n\nLabel text for the progress bar. Styled wrapper for `Progress.Label` from Base UI.\n\n### ProgressValue\n\nDisplays the current value. Styled wrapper for `Progress.Value` from Base UI.\n\n## Examples\n\n### With Label and Value\n\n<ComponentPreview name=\"p-progress-2\" />\n\n### With Formatted Value\n\n<ComponentPreview name=\"p-progress-3\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/radio-group.mdx",
    "content": "---\ntitle: Radio Group\ndescription: A set of checkable buttons where no more than one of the buttons can be checked at a time.\n\nlinks:\n  doc: https://base-ui.com/react/components/radio-group#api-reference\n---\n\n<ComponentPreview name=\"p-radio-group-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/radio-group\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"radio-group\" title=\"components/ui/radio-group.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Label } from \"@/components/ui/label\"\nimport { Radio, RadioGroup } from \"@/components/ui/radio-group\"\n```\n\n```tsx\n<RadioGroup defaultValue=\"next\">\n  <Label>\n    <Radio value=\"next\" /> Next.js\n  </Label>\n  <Label>\n    <Radio value=\"vite\" /> Vite\n  </Label>\n  <Label>\n    <Radio value=\"astro\" /> Astro\n  </Label>\n</RadioGroup>\n```\n\n## API Reference\n\n### RadioGroup\n\nRoot component. Styled wrapper for `RadioGroup.Root` from Base UI with flex column layout.\n\n### Radio\n\nIndividual radio button. Styled wrapper for `Radio.Root` from Base UI with built-in indicator. Also exported as `RadioGroupItem`.\n\n## Examples\n\nFor accessible labelling and validation, prefer using the `Field` component to wrap radio buttons. See the related example: [Radio Group field](/ui/docs/components/field#radio-group-field).\n\n### Disabled\n\n<ComponentPreview name=\"p-radio-group-2\" />\n\n### With Description\n\n<ComponentPreview name=\"p-radio-group-3\" />\n\n### Card Style\n\n<ComponentPreview name=\"p-radio-group-4\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-radio-group-5\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/scroll-area.mdx",
    "content": "---\ntitle: Scroll Area\ndescription: A native scroll container with custom scrollbars.\n\nlinks:\n  doc: https://base-ui.com/react/components/scroll-area#api-reference\n---\n\n<ComponentPreview name=\"p-scroll-area-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/scroll-area\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"scroll-area\" title=\"components/ui/scroll-area.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\n```\n\n```tsx\n<ScrollArea className=\"h-64 rounded-md border\">\n  <div className=\"p-4\">\n    Just as suddenly as it had begun, the sensation stopped, leaving Alice\n    feeling slightly disoriented. She looked around and realized that the room\n    hadn't changed at all - it was she who had grown smaller, shrinking down to\n    a fraction of her previous size. Alice felt herself growing larger and\n    larger, filling up the entire room until she feared she might burst. The\n    sensation was both thrilling and terrifying, as if she were expanding beyond\n    the confines of her own body. She wondered if this was what it felt like to\n    be a balloon, swelling with air until it could hold no more.\n  </div>\n</ScrollArea>\n```\n\n## API Reference\n\n### ScrollArea\n\nRoot component. Styled wrapper for `ScrollArea.Root` from Base UI with custom scrollbar styling.\n\n| Prop             | Type      | Default | Description                                      |\n| ---------------- | --------- | ------- | ------------------------------------------------ |\n| `scrollFade`     | `boolean` | `false` | Masks viewport edges so content fades in/out as you scroll |\n| `scrollbarGutter`| `boolean` | `false` | Reserves space for the scrollbar to prevent layout shifts |\n\n### ScrollAreaViewport\n\nScrollable viewport container. Styled wrapper for `ScrollArea.Viewport` from Base UI.\n\n### ScrollAreaScrollbar\n\nScrollbar track. Styled wrapper for `ScrollArea.Scrollbar` from Base UI.\n\n### ScrollAreaThumb\n\nScrollbar thumb. Styled wrapper for `ScrollArea.Thumb` from Base UI.\n\n### ScrollAreaCorner\n\nCorner element when both scrollbars are visible. Alias for `ScrollArea.Corner` from Base UI.\n\n## Examples\n\n### Scroll Fade\n\nUse `scrollFade` to mask the viewport edges so content subtly fades in and out as you scroll, hinting that more content is available without adding extra UI chrome.\n\n<ComponentPreview name=\"p-scroll-area-4\" />\n\n### Horizontal Scroll\n\n<ComponentPreview name=\"p-scroll-area-2\" />\n\n### Scrollbar Gutter\n\nEnable `scrollbarGutter` to reserve space for the scrollbar when overflow appears, preventing layout shifts as the bar shows or hides.\n\n<ComponentPreview name=\"p-scroll-area-5\" />\n\n### Both Scrollbars\n\n<ComponentPreview name=\"p-scroll-area-3\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/select.mdx",
    "content": "---\ntitle: Select\ndescription: A common form component for choosing a predefined value in a dropdown menu.\n\nlinks:\n  doc: https://base-ui.com/react/components/select#api-reference\n---\n\n<ComponentPreview name=\"p-select-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/select\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"select\" title=\"components/ui/select.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\n```\n\n```tsx\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\n<Select items={items}>\n  <SelectTrigger>\n    <SelectValue />\n  </SelectTrigger>\n  <SelectPopup>\n    <SelectLabel>Frameworks</SelectLabel>\n    {items.map((item) => (\n      <SelectItem key={item.value} value={item}>\n        {item.label}\n      </SelectItem>\n    ))}\n  </SelectPopup>\n  </Select>\n```\n\n## API Reference\n\n### Select\n\nRoot component. Alias for `Select.Root` from Base UI.\n\n### SelectTrigger\n\nTrigger button that opens the select dropdown. Styled wrapper for `Select.Trigger` from Base UI.\n\n| Prop   | Type                        | Default     | Description                                      |\n| ------ | --------------------------- | ----------- | ------------------------------------------------ |\n| `size` | `\"sm\" \\| \"default\" \\| \"lg\"` | `\"default\"` | Controls the size of the trigger                 |\n\n### SelectValue\n\nDisplays the selected value. Styled wrapper for `Select.Value` from Base UI.\n\n### SelectPopup\n\nPopup container for select options. Also exported as `SelectContent`.\n\n| Prop                   | Type      | Default | Description                                      |\n| ---------------------- | --------- | ------- | ------------------------------------------------ |\n| `alignItemWithTrigger` | `boolean` | `true`  | Aligns the selected item with the trigger        |\n| `sideOffset`           | `number`  | `4`     | Distance from the trigger in pixels              |\n\n### SelectItem\n\nIndividual select option. Styled wrapper for `Select.Item` from Base UI with built-in indicator.\n\n### SelectGroup\n\nGroups related select items. Alias for `Select.Group` from Base UI.\n\n### SelectLabel\n\nLabel for all options in the popup. Styled wrapper for `Select.Label` from Base UI. Clicking it focuses the select trigger without opening the popup.\n\n### SelectGroupLabel\n\nLabel for a select group. Styled wrapper for `Select.GroupLabel` from Base UI.\n\n### SelectSeparator\n\nVisual separator between items. Styled wrapper for `Select.Separator` from Base UI.\n\n### SelectButton\n\nA standalone button styled like a `SelectTrigger`. Use it as a `render` prop on other trigger components (e.g., `ComboboxTrigger`, `MenuTrigger`) to give them select-like appearance.\n\n| Prop   | Type                        | Default     | Description                                      |\n| ------ | --------------------------- | ----------- | ------------------------------------------------ |\n| `size` | `\"sm\" \\| \"default\" \\| \"lg\"` | `\"default\"` | Controls the size of the button                 |\n\n```tsx\nimport { SelectButton } from \"@/components/ui/select\"\n```\n\n```tsx\n<ComboboxTrigger render={<SelectButton />}>\n  <ComboboxValue placeholder=\"Select a fruit\" />\n</ComboboxTrigger>\n```\n\n## Examples\n\nFor accessible labelling and validation, prefer using the `Field` component to wrap selects. See the related example: [Select field](/ui/docs/components/field#select-field).\n\n### Small Size\n\n<ComponentPreview name=\"p-select-2\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-select-3\" />\n\n### Disabled\n\n<ComponentPreview name=\"p-select-4\" />\n\n### Without Item Alignment\n\n<ComponentPreview name=\"p-select-5\" />\n\n### With Groups\n\n<ComponentPreview name=\"p-select-6\" />\n\n### With Label\n\n<ComponentPreview name=\"p-select-23\" />\n\n### Multiple Selection\n\n<ComponentPreview name=\"p-select-7\" />\n\n### With Icon\n\n<ComponentPreview name=\"p-select-8\" />\n\n### Options with Icon\n\n<ComponentPreview name=\"p-select-9\" />\n\n### With Object Values\n\n<ComponentPreview name=\"p-select-10\" />\n\n### SelectButton with Combobox\n\nUse `SelectButton` as a `render` prop on `ComboboxTrigger` to create a combobox that looks like a select.\n\n<ComponentPreview name=\"p-combobox-18\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-select-11\" />\n\n"
  },
  {
    "path": "apps/ui/content/docs/components/separator.mdx",
    "content": "---\ntitle: Separator\ndescription: A separator element accessible to screen readers.\n\nlinks:\n  doc: https://base-ui.com/react/components/separator#api-reference\n---\n\n<ComponentPreview name=\"p-separator-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/separator\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"separator\" title=\"components/ui/separator.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Separator } from \"@/components/ui/separator\"\n```\n\n```tsx\n<Separator />\n```\n\n## API Reference\n\n### Separator\n\nStyled wrapper for `Separator` from Base UI. Renders as a horizontal line by default with muted background color.\n"
  },
  {
    "path": "apps/ui/content/docs/components/sheet.mdx",
    "content": "---\ntitle: Sheet\ndescription: A flyout that opens from the side of the screen, based on the dialog component.\n\nlinks:\n  doc: https://base-ui.com/react/components/dialog#api-reference\n---\n\n<ComponentPreview name=\"p-sheet-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/sheet\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"sheet\" title=\"components/ui/sheet.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetPanel,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n```\n\n```tsx\n<Sheet>\n  <SheetTrigger>Open</SheetTrigger>\n  <SheetPopup>\n    <SheetHeader>\n      <SheetTitle>Are you absolutely sure?</SheetTitle>\n      <SheetDescription>\n        This action cannot be undone. This will permanently delete your account\n        and remove your data from our servers.\n      </SheetDescription>\n    </SheetHeader>\n    <SheetPanel>Content</SheetPanel>\n    <SheetFooter>\n      <SheetClose>Close</SheetClose>\n    </SheetFooter>\n  </SheetPopup>\n</Sheet>\n```\n\n## API Reference\n\n### Sheet\n\nRoot component. Alias for `Dialog.Root` from Base UI.\n\n### SheetTrigger\n\nTrigger button that opens the sheet. Alias for `Dialog.Trigger` from Base UI.\n\n### SheetPopup\n\nPopup container that displays the sheet content. Also exported as `SheetContent`.\n\n| Prop              | Type                                      | Default     | Description                                      |\n| ----------------- | ----------------------------------------- | ----------- | ------------------------------------------------ |\n| `side`            | `\"right\" \\| \"left\" \\| \"top\" \\| \"bottom\"`  | `\"right\"`   | Controls which side of the screen the sheet opens from |\n| `variant`         | `\"default\" \\| \"inset\"`                    | `\"default\"` | Controls the sheet style. `inset` adds spacing around the sheet on desktop screens |\n| `showCloseButton` | `boolean`                                 | `true`      | When true, displays a close button in the top-right corner |\n| `closeProps`      | `Dialog.Close.Props`                      | -           | Props forwarded to the internal close button, useful for overriding `aria-label` |\n\n**Example:**\n\n```tsx\n// Right side sheet (default)\n<SheetPopup side=\"right\">\n  ...\n</SheetPopup>\n\n// Left side sheet\n<SheetPopup side=\"left\">\n  ...\n</SheetPopup>\n\n// Top sheet\n<SheetPopup side=\"top\">\n  ...\n</SheetPopup>\n\n// Bottom sheet\n<SheetPopup side=\"bottom\">\n  ...\n</SheetPopup>\n\n// Sheet with inset variant\n<SheetPopup side=\"right\" variant=\"inset\">\n  ...\n</SheetPopup>\n```\n\n### SheetHeader\n\nContainer for the sheet title and description. Supports the `render` prop for polymorphic composition (e.g. `render={<Link href=\"/\" />}`).\n\n### SheetFooter\n\nFooter section for action buttons. Supports the `render` prop for polymorphic composition.\n\n| Prop        | Type                     | Default     | Description                                      |\n| ----------- | ------------------------ | ----------- | ------------------------------------------------ |\n| `variant`   | `\"default\" \\| \"bare\"`    | `\"default\"` | Controls the footer styling. `default` includes border and background, `bare` removes them |\n\n### SheetTitle\n\nTitle component. Alias for `Dialog.Title` from Base UI.\n\n### SheetDescription\n\nDescription component. Alias for `Dialog.Description` from Base UI.\n\n### SheetPanel\n\nScrollable content container. Automatically wraps content in a `ScrollArea` component. Supports the `render` prop for polymorphic composition.\n\n| Prop         | Type      | Default | Description                                      |\n| ------------ | --------- | ------- | ------------------------------------------------ |\n| `scrollFade` | `boolean` | `true`  | When true, shows a fade effect at scroll edges   |\n\n**Example:**\n\n```tsx\n<SheetPanel>\n  {/* Long content that will scroll if it exceeds the sheet height */}\n  <div>...</div>\n</SheetPanel>\n```\n\n### SheetClose\n\nClose button component. Alias for `Dialog.Close` from Base UI.\n\n### SheetPortal\n\nPortal component for rendering outside the DOM hierarchy. Alias for `Dialog.Portal` from Base UI.\n\n### SheetBackdrop\n\nBackdrop/overlay component. Also exported as `SheetOverlay`. Alias for `Dialog.Backdrop` from Base UI.\n\n## Examples\n\n### Sheet with Inset\n\n<ComponentPreview name=\"p-sheet-2\" />\n\n### Side sheets\n\n<ComponentPreview name=\"p-sheet-3\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/skeleton.mdx",
    "content": "---\ntitle: Skeleton\ndescription: A loading state skeleton for your components.\n---\n\n<ComponentPreview name=\"p-skeleton-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/skeleton\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"skeleton\" title=\"components/ui/skeleton.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Skeleton } from \"@/components/ui/skeleton\"\n```\n\n```tsx\n<Skeleton className=\"size-10 rounded-full\" />\n```\n\n## API Reference\n\nThis is a custom component, not a Base UI wrapper.\n\n### Skeleton\n\nA simple div with animated pulse effect for loading states. Apply sizing and shape via className.\n\n## Examples\n\n### Skeleton Only\n\n<ComponentPreview name=\"p-skeleton-2\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/slider.mdx",
    "content": "---\ntitle: Slider\ndescription: An input where the user selects a value from within a given range.\n\nlinks:\n  doc: https://base-ui.com/react/components/slider#api-reference\n---\n\n<ComponentPreview name=\"p-slider-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/slider\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"slider\" title=\"components/ui/slider.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Slider, SliderValue } from \"@/components/ui/slider\"\n```\n\n```tsx\n<Slider />\n```\n\n## API Reference\n\n### Slider\n\nRoot component. Styled wrapper for `Slider.Root` from Base UI with default min/max values and edge-aligned thumbs.\n\n| Prop  | Type     | Default | Description                                      |\n| ----- | -------- | ------- | ------------------------------------------------ |\n| `min` | `number` | `0`     | Minimum value of the slider                      |\n| `max` | `number` | `100`   | Maximum value of the slider                      |\n\nNote: The component sets `thumbAlignment=\"edge\"` by default, which aligns thumbs to the edge of the track rather than centering them.\n\n### SliderValue\n\nDisplays the current value. Styled wrapper for `Slider.Value` from Base UI.\n\n## Examples\n\nFor accessible labelling and validation, prefer using the `Field` component to wrap checkboxes. See the related example: [Slider field](/ui/docs/components/field#slider-field).\n\n### With Label and Value\n\n<ComponentPreview name=\"p-slider-2\" />\n\n### Range Slider\n\n<ComponentPreview name=\"p-slider-3\" />\n\n### Vertical\n\n<ComponentPreview name=\"p-slider-4\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-slider-5\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/spinner.mdx",
    "content": "---\ntitle: Spinner\ndescription: An indicator that can be used to show a loading state.\n---\n\n<ComponentPreview name=\"p-spinner-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/spinner\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"spinner\" title=\"components/ui/spinner.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Spinner } from \"@/components/ui/spinner\"\n```\n\n```tsx\n<Spinner />\n```\n\n## API Reference\n\n### Spinner\n\nUse the `Spinner` component to display a loading indicator.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n## Examples\n\n### Input Group\n\n<ComponentPreview name=\"p-input-12\" />\n\n### Button\n\n<ComponentPreview name=\"p-button-18\" />\n\n"
  },
  {
    "path": "apps/ui/content/docs/components/switch.mdx",
    "content": "---\ntitle: Switch\ndescription: A control that indicates whether a setting is on or off.\n\nlinks:\n  doc: https://base-ui.com/react/components/switch#api-reference\n---\n\n<ComponentPreview name=\"p-switch-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/switch\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"switch\" title=\"components/ui/switch.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Switch } from \"@/components/ui/switch\"\n```\n\n```tsx\n<Switch />\n```\n\n## API Reference\n\n### Switch\n\nStyled wrapper for `Switch.Root` from Base UI with built-in thumb. Size is controlled via the `--thumb-size` CSS variable.\n\n## Examples\n\nFor accessible labelling and validation, prefer using the `Field` component to wrap checkboxes. See the related example: [Switch field](/ui/docs/components/field#switch-field).\n\n### Disabled\n\n<ComponentPreview name=\"p-switch-2\" />\n\n### With Description\n\n<ComponentPreview name=\"p-switch-3\" />\n\n### Customizing Size\n\nThe switch size is controlled by the `--thumb-size` CSS variable. By default, the switch uses responsive sizing with `[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]` classes, making it slightly larger on mobile devices (like other interactive elements).\n\nYou can customize the size by overriding these CSS variable classes on the component. The `--thumb-size` value can be expressed using:\n- The spacing scale: `--spacing(3)`, `--spacing(4)`, `--spacing(5)`, etc.\n- Fixed units: `1rem`, `16px`, etc.\n\n<ComponentPreview name=\"p-switch-6\" />\n\n### Card Style\n\n<ComponentPreview name=\"p-switch-4\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-switch-5\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/table.mdx",
    "content": "---\ntitle: Table\ndescription: A simple table component for displaying tabular data.\n---\n\n<ComponentPreview name=\"p-table-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/table\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"table\" title=\"components/ui/table.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\n```\n\n```tsx\n<Table>\n  <TableCaption>Caption</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Header</TableHead>\n      <TableHead>Header</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>Cell</TableCell>\n      <TableCell>Cell</TableCell>\n    </TableRow>\n  </TableBody>\n</Table>\n```\n\n## API Reference\n\n### Table\n\nThe main table container component.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<Table>\n  <TableHeader>...</TableHeader>\n  <TableBody>...</TableBody>\n</Table>\n```\n\n### TableHeader\n\nHeader section of the table containing column headers.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<TableHeader>\n  <TableRow>\n    <TableHead>Header</TableHead>\n  </TableRow>\n</TableHeader>\n```\n\n### TableBody\n\nBody section of the table containing table rows and data.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<TableBody>\n  <TableRow>\n    <TableCell>Cell</TableCell>\n  </TableRow>\n</TableBody>\n```\n\n### TableFooter\n\nFooter section of the table.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<TableFooter>\n  <TableRow>\n    <TableCell>Footer</TableCell>\n  </TableRow>\n</TableFooter>\n```\n\n### TableRow\n\nA row in the table.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<TableRow>\n  <TableCell>Cell</TableCell>\n</TableRow>\n```\n\n### TableHead\n\nA header cell in the table.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<TableHead>Header</TableHead>\n```\n\n### TableCell\n\nA data cell in the table.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<TableCell>Cell</TableCell>\n```\n\n### TableCaption\n\nA caption for the table.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `className` | `string` |         |\n\n```tsx\n<TableCaption>Caption</TableCaption>\n```\n\n## Examples\n\n### Framed Table\n\nTo achieve this framed look, simply wrap the table in a [Frame](/ui/docs/components/frame) component.\n\n<ComponentPreview name=\"p-table-2\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/tabs.mdx",
    "content": "---\ntitle: Tabs\ndescription: A component for toggling between related panels on the same page.\n\nlinks:\n  doc: https://base-ui.com/react/components/tabs#api-reference\n---\n\n<ComponentPreview name=\"p-tabs-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/tabs\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"tabs\" title=\"components/ui/tabs.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/components/ui/tabs\"\n```\n\n```tsx\n<Tabs defaultValue=\"tab-1\">\n  <TabsList>\n    <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n    <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n    <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n  </TabsList>\n  <TabsPanel value=\"tab-1\">Tab 1 content</TabsPanel>\n  <TabsPanel value=\"tab-2\">Tab 2 content</TabsPanel>\n  <TabsPanel value=\"tab-3\">Tab 3 content</TabsPanel>\n</Tabs>\n```\n\n## API Reference\n\n### Tabs\n\nRoot component. Styled wrapper for `Tabs.Root` from Base UI.\n\n| Prop      | Type                         | Default     | Description                                      |\n| --------- | ---------------------------- | ----------- | ------------------------------------------------ |\n| `variant` | `\"default\" \\| \"underline\"`   | `\"default\"` | Controls the tabs styling                        |\n\n### TabsList\n\nContainer for tab triggers. Styled wrapper for `Tabs.List` from Base UI.\n\n### TabsTab\n\nIndividual tab trigger. Styled wrapper for `Tabs.Tab` from Base UI.\n\n### TabsPanel\n\nContent panel for each tab. Styled wrapper for `Tabs.Panel` from Base UI.\n\n### TabsIndicator\n\nVisual indicator for the active tab. Styled wrapper for `Tabs.Indicator` from Base UI.\n\n## Examples\n\n### Underline Variant\n\n<ComponentPreview name=\"p-tabs-2\" />\n\n### Vertical Orientation\n\n<ComponentPreview name=\"p-tabs-3\" />\n\n### Underline with Vertical Orientation\n\n<ComponentPreview name=\"p-tabs-4\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/textarea.mdx",
    "content": "---\ntitle: Textarea\ndescription: A native textarea element.\n---\n\n<ComponentPreview name=\"p-textarea-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/textarea\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"textarea\" title=\"components/ui/textarea.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Textarea } from \"@/components/ui/textarea\"\n```\n\n```tsx\n<Textarea />\n```\n\n## Field Integration\n\nUnlike Base UI's built-in form controls, Base UI does not provide a native Textarea primitive. This component wraps the native `<textarea>` element in `Field.Control` internally, so it integrates with `Field` out of the box — no need to wrap it in a `FieldControl` manually.\n\n```tsx\n<Field>\n  <FieldLabel>Bio</FieldLabel>\n  <Textarea placeholder=\"Tell us about yourself…\" />\n  <FieldDescription>Write a short bio.</FieldDescription>\n  <FieldError>This field is required.</FieldError>\n</Field>\n```\n\n## API Reference\n\n### Textarea\n\nStyled native textarea element with custom size options.\n\n| Prop       | Type                                  | Default     | Description                                      |\n| ---------- | ------------------------------------- | ----------- | ------------------------------------------------ |\n| `size`     | `\"sm\" \\| \"default\" \\| \"lg\" \\| number` | `\"default\"` | Controls the textarea padding. Number values are passed to the native `rows` attribute |\n| `unstyled` | `boolean`                             | `false`     | When true, removes all default styling           |\n\n## Examples\n\n### Small Size\n\n<ComponentPreview name=\"p-textarea-2\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-textarea-3\" />\n\n### Disabled\n\n<ComponentPreview name=\"p-textarea-4\" />\n\n### With Label\n\n<ComponentPreview name=\"p-textarea-5\" />\n\n### Form Integration\n\n<ComponentPreview name=\"p-textarea-6\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/toast.mdx",
    "content": "---\ntitle: Toast\ndescription: A temporary notification that appears on screen to inform users.\n\nlinks:\n  doc: https://base-ui.com/react/components/toast#api-reference\n---\n\n<ComponentPreview name=\"p-toast-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/toast\n```\n\n<Step>Add the `ToastProvider` and `AnchoredToastProvider` to your app.</Step>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"app/layout.tsx\"\n// [!code word:import { AnchoredToastProvider, ToastProvider } from \"@/components/ui/toast\"]\n// [!code word:<ToastProvider>]\n// [!code word:<AnchoredToastProvider>]\n// [!code word:</AnchoredToastProvider>]\n// [!code word:</ToastProvider>]\nimport { AnchoredToastProvider, ToastProvider } from \"@/components/ui/toast\"\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <head />\n      <body>\n        <ToastProvider>\n          <AnchoredToastProvider>\n            <main>{children}</main>\n          </AnchoredToastProvider>\n        </ToastProvider>\n      </body>\n    </html>\n  )\n}\n```\n</span>\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"toast\" title=\"components/ui/toast.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n<Step>Add the `ToastProvider` and `AnchoredToastProvider` to your app.</Step>\n\n<span data-lib=\"base-ui\">\n```tsx title=\"app/layout.tsx\"\n// [!code word:import { AnchoredToastProvider, ToastProvider } from \"@/components/ui/toast\"]\n// [!code word:<ToastProvider>]\n// [!code word:<AnchoredToastProvider>]\n// [!code word:</AnchoredToastProvider>]\n// [!code word:</ToastProvider>]\nimport { AnchoredToastProvider, ToastProvider } from \"@/components/ui/toast\"\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <head />\n      <body>\n        <ToastProvider>\n          <AnchoredToastProvider>\n            <main>{children}</main>\n          </AnchoredToastProvider>\n        </ToastProvider>\n      </body>\n    </html>\n  )\n}\n```\n</span>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n### Stacked Toasts\n\n```tsx\nimport { toastManager } from \"@/components/ui/toast\"\n```\n\n```tsx\ntoastManager.add({\n  title: \"Event has been created\",\n  description: \"Monday, January 3rd at 6:00pm\",\n})\n```\n\nBy default, toasts appear in the **bottom-right** corner. You can change this by setting the `position` prop on the `ToastProvider`.\n\nAllowed values: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. For example:\n\n```tsx\n<ToastProvider position=\"top-center\">{children}</ToastProvider>\n```\n\n### Anchored Toasts\n\nFor toasts positioned relative to a specific element, use `anchoredToastManager`. The `AnchoredToastProvider` is typically added to your app layout (alongside `ToastProvider`), so you can use `anchoredToastManager` directly in your components:\n\n```tsx\nanchoredToastManager.add({\n  title: \"Copied!\",\n  positionerProps: {\n    anchor: buttonRef.current,\n  },\n})\n```\n\nYou can also style anchored toasts like tooltips by passing `data: { tooltipStyle: true }`. When using tooltip style, only the `title` is displayed (description and other content are ignored):\n\n```tsx\nanchoredToastManager.add({\n  title: \"Copied!\",\n  positionerProps: {\n    anchor: buttonRef.current,\n  },\n  data: {\n    tooltipStyle: true,\n  },\n})\n```\n\n## API Reference\n\n### ToastProvider\n\nProvider component for stacked toasts. Wraps `Toast.Provider` from Base UI.\n\n| Prop       | Type                                                                                     | Default        | Description                                      |\n| ---------- | ---------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------ |\n| `position` | `\"top-left\" \\| \"top-center\" \\| \"top-right\" \\| \"bottom-left\" \\| \"bottom-center\" \\| \"bottom-right\"` | `\"bottom-right\"` | Position of the toast viewport                   |\n\n### AnchoredToastProvider\n\nProvider component for toasts anchored to specific elements. Use with `anchoredToastManager`.\n\n### toastManager\n\nManager object for creating stacked toasts. Use `toastManager.add()` to show a toast.\n\n### anchoredToastManager\n\nManager object for creating anchored toasts. Use `anchoredToastManager.add()` with `positionerProps.anchor` to show a toast anchored to an element.\n\n### ToastViewport\n\nViewport container for toasts. Styled wrapper for `Toast.Viewport` from Base UI.\n\n### Toast\n\nIndividual toast container. Styled wrapper for `Toast.Root` from Base UI.\n\n### ToastTitle\n\nTitle text for the toast. Styled wrapper for `Toast.Title` from Base UI.\n\n### ToastDescription\n\nDescription text for the toast. Styled wrapper for `Toast.Description` from Base UI.\n\n### ToastAction\n\nAction button for the toast. Styled wrapper for `Toast.Action` from Base UI.\n\n### ToastClose\n\nClose button for the toast. Styled wrapper for `Toast.Close` from Base UI.\n\n## Examples\n\n### With Status\n\n<ComponentPreview name=\"p-toast-2\" />\n\n### Loading\n\n<ComponentPreview name=\"p-toast-3\" />\n\n### With Action\n\n<ComponentPreview name=\"p-toast-4\" />\n\n### Promise\n\n<ComponentPreview name=\"p-toast-5\" />\n\n### With Varying Heights\n\n<ComponentPreview name=\"p-toast-6\" />\n\n### Copy Button with Anchored Toast\n\n<ComponentPreview name=\"p-toast-7\" />\n\n### Submit Button with Error Toast\n\n<ComponentPreview name=\"p-toast-8\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/toggle-group.mdx",
    "content": "---\ntitle: Toggle Group\ndescription: Provides a shared state to a series of toggle buttons.\n---\n\n<ComponentPreview name=\"p-toggle-group-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/toggle-group\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"toggle-group\" title=\"components/ui/toggle-group.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Toggle, ToggleGroup } from \"@/components/ui/toggle-group\"\n```\n\n```tsx\n<ToggleGroup>\n  <Toggle>Bold</Toggle>\n  <Toggle>Italic</Toggle>\n  <Toggle>Underline</Toggle>\n</ToggleGroup>\n```\n\n## API Reference\n\n### ToggleGroup\n\nRoot component. Styled wrapper for `ToggleGroup.Root` from Base UI. Provides shared variant and size to child toggles via context.\n\n| Prop      | Type                          | Default     | Description                                      |\n| --------- | ----------------------------- | ----------- | ------------------------------------------------ |\n| `variant` | `\"default\" \\| \"outline\"`      | `\"default\"` | Controls the styling of all child toggles        |\n| `size`    | `\"default\" \\| \"sm\" \\| \"lg\"`   | `\"default\"` | Controls the size of all child toggles           |\n\n### Toggle\n\nIndividual toggle button within the group. Styled wrapper for `ToggleGroup.Item` from Base UI. Inherits variant and size from parent ToggleGroup context. Also exported as `ToggleGroupItem`.\n\n### ToggleGroupSeparator\n\nVisual separator between toggle buttons.\n\n## Examples\n\n### Small Toggles\n\n<ComponentPreview name=\"p-toggle-group-2\" />\n\n### Large Toggles\n\n<ComponentPreview name=\"p-toggle-group-3\" />\n\n### With Outline Toggles\n\n<ComponentPreview name=\"p-toggle-group-4\" />\n\n### Vertical\n\n<ComponentPreview name=\"p-toggle-group-5\" />\n\n### Disabled\n\n<ComponentPreview name=\"p-toggle-group-6\" />\n\n### With Disabled Toggle\n\n<ComponentPreview name=\"p-toggle-group-7\" />\n\n### Multiple selection\n\n<ComponentPreview name=\"p-toggle-group-8\" />\n\n### With Tooltips\n\n<ComponentPreview name=\"p-toggle-group-9\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/toggle.mdx",
    "content": "---\ntitle: Toggle\ndescription: A two-state button that can be toggled on or off.\n\nlinks:\n  doc: https://base-ui.com/react/components/toggle#api-reference\n---\n\n<ComponentPreview name=\"p-toggle-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/toggle\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"toggle\" title=\"components/ui/toggle.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Toggle } from \"@/components/ui/toggle\"\n```\n\n```tsx\n<Toggle>Toggle</Toggle>\n```\n\n## API Reference\n\n### Toggle\n\nStyled wrapper for `Toggle.Root` from Base UI with variant and size options.\n\n| Prop      | Type                          | Default     | Description                                      |\n| --------- | ----------------------------- | ----------- | ------------------------------------------------ |\n| `variant` | `\"default\" \\| \"outline\"`      | `\"default\"` | Controls the toggle styling                      |\n| `size`    | `\"default\" \\| \"sm\" \\| \"lg\"`   | `\"default\"` | Controls the toggle size                         |\n\n## Examples\n\n### Outline\n\n<ComponentPreview name=\"p-toggle-2\" />\n\n### With Icon\n\n<ComponentPreview name=\"p-toggle-3\" />\n\n### Small Size\n\n<ComponentPreview name=\"p-toggle-4\" />\n\n### Large Size\n\n<ComponentPreview name=\"p-toggle-5\" />\n\n### Disabled\n\n<ComponentPreview name=\"p-toggle-6\" />\n\n### Icon Group\n\n<ComponentPreview name=\"p-toggle-7\" />\n"
  },
  {
    "path": "apps/ui/content/docs/components/toolbar.mdx",
    "content": "---\ntitle: Toolbar\ndescription: A container for grouping a set of buttons and controls.\n\nlinks:\n  doc: https://base-ui.com/react/components/toolbar#api-reference\n---\n\n<ComponentPreview name=\"p-toolbar-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/toolbar\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"toolbar\" title=\"components/ui/toolbar.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Toggle } from \"@/registry/default/ui/toggle\"\nimport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarGroup,\n  ToolbarSeparator,\n} from \"@/registry/default/ui/toolbar\"\n```\n\n```tsx\n<Toolbar>\n  <ToolbarGroup>\n    <ToolbarButton render={<Toggle />}>Bold</ToolbarButton>\n    <ToolbarButton render={<Toggle />}>Underline</ToolbarButton>\n  </ToolbarGroup>\n  <ToolbarSeparator />\n  <ToolbarButton render={<Button />}>Save</ToolbarButton>\n</Toolbar>\n```\n\n## API Reference\n\n### Toolbar\n\nRoot component. Styled wrapper for `Toolbar.Root` from Base UI with flex layout.\n\n### ToolbarGroup\n\nGroups related toolbar items. Styled wrapper for `Toolbar.Group` from Base UI.\n\n### ToolbarButton\n\nButton within the toolbar. Alias for `Toolbar.Button` from Base UI. Use with `render` prop to render as Toggle or Button.\n\n### ToolbarSeparator\n\nVisual separator between toolbar items. Styled wrapper for `Toolbar.Separator` from Base UI.\n\n### ToolbarLink\n\nLink within the toolbar. Alias for `Toolbar.Link` from Base UI.\n"
  },
  {
    "path": "apps/ui/content/docs/components/tooltip.mdx",
    "content": "---\ntitle: Tooltip\ndescription: A popup that appears when an element is hovered or focused, showing a hint for sighted users.\n\nlinks:\n  doc: https://base-ui.com/react/components/tooltip#api-reference\n---\n\n<ComponentPreview name=\"p-tooltip-1\" />\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/tooltip\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Install the following dependencies:</Step>\n\n```bash\nnpm install @base-ui/react\n```\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"tooltip\" title=\"components/ui/tooltip.tsx\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n```tsx\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n```\n\n```tsx\n<Tooltip>\n  <TooltipTrigger render={<Button variant=\"outline\" />}>\n    Hover me\n  </TooltipTrigger>\n  <TooltipPopup>Helpful hint</TooltipPopup>\n</Tooltip>\n```\n\n## API Reference\n\n### Tooltip\n\nRoot component. Alias for `Tooltip.Root` from Base UI.\n\n### TooltipTrigger\n\nTrigger element that shows the tooltip on hover/focus. Alias for `Tooltip.Trigger` from Base UI.\n\n### TooltipPopup\n\nPopup container that displays the tooltip content. Also exported as `TooltipContent`.\n\n| Prop         | Type                                     | Default    | Description                                      |\n| ------------ | ---------------------------------------- | ---------- | ------------------------------------------------ |\n| `side`       | `\"top\" \\| \"bottom\" \\| \"left\" \\| \"right\"` | `\"top\"`    | Side of the trigger to position the tooltip      |\n| `align`      | `\"start\" \\| \"center\" \\| \"end\"`           | `\"center\"` | Alignment relative to the trigger                |\n| `sideOffset` | `number`                                 | `4`        | Distance from the trigger in pixels              |\n\n### TooltipProvider\n\nProvider for grouping tooltips. Alias for `Tooltip.Provider` from Base UI.\n\n### TooltipCreateHandle\n\nCreates a handle for detached tooltip triggers. Returns a handle object to attach to multiple triggers for animated transitions.\n\n## Examples\n\n### Grouped Tooltips\n\nTo group multiple tooltips so they appear instantly after the first one is opened, wrap them in `TooltipProvider`. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.\n\n<ComponentPreview name=\"p-tooltip-2\" />\n\n### Animated Tooltips\n\nYou can create animated tooltips that smoothly transition between different triggers using detached triggers. This pattern allows multiple triggers to share a single tooltip popup, with automatic animations for position, size, and content changes.\n\nTo create detached triggers:\n\n1. Create a handle using `TooltipCreateHandle`\n2. Attach the same handle to multiple `TooltipTrigger` components\n3. Each trigger provides a `payload` prop containing the content component\n4. Use a single `Tooltip` component with the handle to render the popup\n\n<ComponentPreview name=\"p-tooltip-3\" />\n"
  },
  {
    "path": "apps/ui/content/docs/hooks/meta.json",
    "content": "{\n  \"pages\": [\"use-media-query\", \"use-copy-to-clipboard\"],\n  \"title\": \"Hooks\"\n}\n"
  },
  {
    "path": "apps/ui/content/docs/hooks/use-copy-to-clipboard.mdx",
    "content": "---\ntitle: useCopyToClipboard\ndescription: Copy text to clipboard with a temporary \"copied\" state.\n---\n\nA React hook that wraps the Clipboard API with a built-in timeout to reset the copied state. Useful for copy buttons that show brief confirmation feedback.\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/use-copy-to-clipboard\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"use-copy-to-clipboard\" title=\"hooks/use-copy-to-clipboard.ts\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n### Basic\n\n```tsx\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\";\n\nfunction CopyButton({ text }: { text: string }) {\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\n\n  return (\n    <button onClick={() => copyToClipboard(text)}>\n      {isCopied ? \"Copied!\" : \"Copy\"}\n    </button>\n  );\n}\n```\n\n### Custom timeout\n\nThe `isCopied` state resets after 2 seconds by default. You can change this:\n\n```tsx\nconst { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 3000 });\n```\n\nSet `timeout` to `0` to keep `isCopied` as `true` indefinitely (until the component unmounts).\n\n### Callback on copy\n\nRun a side effect when a copy succeeds:\n\n```tsx\nconst { copyToClipboard, isCopied } = useCopyToClipboard({\n  onCopy: () => console.log(\"Copied to clipboard\"),\n});\n```\n\n### With icon swap\n\nA common pattern — swap the icon briefly to confirm the copy:\n\n```tsx\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\";\nimport { Button } from \"@/components/ui/button\";\n\nfunction CopyButton({ value }: { value: string }) {\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\n\n  return (\n    <Button\n      aria-label=\"Copy to clipboard\"\n      onClick={() => copyToClipboard(value)}\n      size=\"icon\"\n      variant=\"outline\"\n    >\n      {isCopied ? (\n        <CheckIcon aria-hidden=\"true\" />\n      ) : (\n        <CopyIcon aria-hidden=\"true\" />\n      )}\n    </Button>\n  );\n}\n```\n\n## API\n\n```tsx\nfunction useCopyToClipboard(options?: {\n  timeout?: number;\n  onCopy?: () => void;\n}): {\n  copyToClipboard: (value: string) => void;\n  isCopied: boolean;\n};\n```\n\n### Options\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `timeout` | `number` | `2000` | Milliseconds before `isCopied` resets to `false`. Set to `0` to keep it `true`. |\n| `onCopy` | `() => void` | — | Callback fired after a successful copy. |\n\n### Return value\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `copyToClipboard` | `(value: string) => void` | Call with the text to copy. No-op if `value` is empty or clipboard API is unavailable. |\n| `isCopied` | `boolean` | `true` for `timeout` ms after a successful copy, then resets. |\n"
  },
  {
    "path": "apps/ui/content/docs/hooks/use-media-query.mdx",
    "content": "---\ntitle: useMediaQuery\ndescription: Reactive media query hook with Tailwind-like syntax.\n---\n\nA React hook that subscribes to a CSS media query and returns whether it matches. Built on `useSyncExternalStore` for SSR safety and concurrent mode compatibility.\n\n## Installation\n\n<CodeTabs>\n\n<TabsList>\n  <TabsTab value=\"cli\">CLI</TabsTab>\n  <TabsTab value=\"manual\">Manual</TabsTab>\n</TabsList>\n<TabsPanel value=\"cli\">\n\n```bash\nnpx shadcn@latest add @coss/use-media-query\n```\n\n</TabsPanel>\n\n<TabsPanel value=\"manual\">\n\n<Steps>\n\n<Step>Copy and paste the following code into your project.</Step>\n\n<ComponentSource name=\"use-media-query\" title=\"hooks/use-media-query.ts\" />\n\n<Step>Update the import paths to match your project setup.</Step>\n\n</Steps>\n\n</TabsPanel>\n\n</CodeTabs>\n\n## Usage\n\n### Breakpoint shorthand\n\nUse Tailwind variant syntax to match breakpoints. TypeScript provides full autocomplete.\n\n```tsx\nimport { useMediaQuery } from \"@/hooks/use-media-query\";\n\n// Min-width (breakpoint and above) — like md:\nconst isDesktop = useMediaQuery(\"md\");\n\n// Max-width (below breakpoint) — like max-md:\nconst isMobile = useMediaQuery(\"max-md\");\n\n// Range (between two breakpoints) — like md:max-lg:\nconst isTablet = useMediaQuery(\"md:max-lg\");\n```\n\n### Object API\n\nUse the object form when you need pointer detection or custom pixel values.\n\n```tsx\n// Touch device detection\nconst isTouch = useMediaQuery({ pointer: \"coarse\" });\n\n// Breakpoint + pointer combined\nconst isMobileTouch = useMediaQuery({ max: \"md\", pointer: \"coarse\" });\n\n// Custom pixel values\nconst isNarrow = useMediaQuery({ max: 600 });\n```\n\n### Raw media query\n\nPass any valid CSS media query string as an escape hatch.\n\n```tsx\nconst prefersDark = useMediaQuery(\"(prefers-color-scheme: dark)\");\nconst prefersReducedMotion = useMediaQuery(\"(prefers-reduced-motion: reduce)\");\n```\n\n### Conditional rendering\n\nThe primary use case — mount one component instead of another based on viewport.\n\n```tsx\nfunction Layout() {\n  const isDesktop = useMediaQuery(\"lg\");\n\n  return isDesktop ? <DesktopNav /> : <MobileNav />;\n}\n```\n\n## Breakpoints\n\nThe hook includes a static breakpoint map that must match your Tailwind config. Default values:\n\n| Name   | Value    |\n|--------|----------|\n| `sm`   | 640px    |\n| `md`   | 800px    |\n| `lg`   | 1024px   |\n| `xl`   | 1280px   |\n| `2xl`  | 1536px   |\n| `3xl`  | 1600px   |\n| `4xl`  | 2000px   |\n\nIf you override breakpoints in your Tailwind CSS `@theme`, update the `BREAKPOINTS` constant in the hook to match.\n\n## API\n\n```tsx\nfunction useMediaQuery(\n  query: BreakpointQuery | MediaQueryInput | string\n): boolean;\n```\n\n### String queries\n\n| Pattern | Example | Matches |\n|---------|---------|---------|\n| `\"{bp}\"` | `\"md\"` | Viewport ≥ breakpoint |\n| `\"max-{bp}\"` | `\"max-md\"` | Viewport < breakpoint |\n| `\"{bp}:max-{bp}\"` | `\"md:max-lg\"` | Between two breakpoints |\n| `\"(...)\"` | `\"(prefers-color-scheme: dark)\"` | Raw CSS media query |\n\n### Object queries\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `min` | `Breakpoint \\| number` | Min-width breakpoint name or px value |\n| `max` | `Breakpoint \\| number` | Max-width breakpoint name or px value |\n| `pointer` | `\"coarse\" \\| \"fine\"` | Pointer type (`coarse` for touch, `fine` for mouse) |\n\n### Return value\n\nReturns `boolean` — `true` when the media query matches, `false` otherwise. Returns `false` during SSR.\n\n## Examples\n\nResize the viewport to see values update in real time.\n\n<MediaQueryDemo />\n\n## Convenience export\n\nThe hook also exports `useIsMobile` for backward compatibility with shadcn's `use-mobile` pattern:\n\n```tsx\nimport { useIsMobile } from \"@/hooks/use-media-query\";\n\nconst isMobile = useIsMobile(); // equivalent to useMediaQuery(\"max-md\")\n```\n"
  },
  {
    "path": "apps/ui/content/docs/meta.json",
    "content": "{\n  \"pages\": [\"(root)\", \"components\", \"hooks\", \"resources\"],\n  \"root\": true\n}\n"
  },
  {
    "path": "apps/ui/content/docs/resources/meta.json",
    "content": "{\n  \"pages\": [\n    \"[llms.txt](/llms.txt)\",\n    \"[coss.com origin](https://coss.com/origin)\"\n  ],\n  \"title\": \"Resources\"\n}\n"
  },
  {
    "path": "apps/ui/hooks/use-config.ts",
    "content": "import { useAtom } from \"jotai\";\nimport { atomWithStorage } from \"jotai/utils\";\n\ntype Config = {\n  packageManager: \"npm\" | \"yarn\" | \"pnpm\" | \"bun\";\n  installationType: \"cli\" | \"manual\";\n};\n\nconst configAtom = atomWithStorage<Config>(\"config\", {\n  installationType: \"cli\",\n  packageManager: \"pnpm\",\n});\n\nexport function useConfig() {\n  return useAtom(configAtom);\n}\n"
  },
  {
    "path": "apps/ui/hooks/use-is-mac.ts",
    "content": "import { useEffect, useState } from \"react\";\n\nexport function useIsMac() {\n  const [isMac, setIsMac] = useState(true);\n\n  useEffect(() => {\n    setIsMac(navigator.platform.toUpperCase().includes(\"MAC\"));\n  }, []);\n\n  return isMac;\n}\n"
  },
  {
    "path": "apps/ui/hooks/use-mutation-observer.ts",
    "content": "import * as React from \"react\";\n\nexport const useMutationObserver = (\n  ref: React.RefObject<HTMLElement | null>,\n  callback: MutationCallback,\n  options: MutationObserverInit = {\n    attributes: true,\n    characterData: true,\n    childList: true,\n    subtree: true,\n  },\n) => {\n  React.useEffect(() => {\n    if (ref.current) {\n      const observer = new MutationObserver(callback);\n      observer.observe(ref.current, options);\n      return () => observer.disconnect();\n    }\n  }, [ref, callback, options]);\n};\n"
  },
  {
    "path": "apps/ui/lib/config.ts",
    "content": "export const appConfig = {\n  description:\n    \"A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.\",\n  name: \"coss ui\",\n  navItems: [\n    {\n      href: \"/docs\",\n      label: \"Docs\",\n    },\n    {\n      href: \"/particles\",\n      label: \"Particles\",\n    },\n  ],\n  ogImage: \"https://coss.com/og.jpg\",\n  url: \"https://coss.com/ui\",\n};\n"
  },
  {
    "path": "apps/ui/lib/docs.ts",
    "content": "export const PAGES_NEW = [\n  // \"/docs/components/{component-name}\",\n  \"/docs/components/drawer\",\n  \"/docs/components/input-otp\",\n];\n"
  },
  {
    "path": "apps/ui/lib/registry.ts",
    "content": "import { promises as fs } from \"node:fs\";\nimport { tmpdir } from \"node:os\";\nimport path from \"node:path\";\nimport type { RegistryItem } from \"shadcn/schema\";\nimport { Project, ScriptKind } from \"ts-morph\";\nimport { Index } from \"@/registry/__index__\";\n\nexport function getRegistryComponent(name: string) {\n  return Index[name]?.component;\n}\n\nexport async function getRegistryItem(name: string) {\n  const item = Index[name];\n\n  if (!item) {\n    return null;\n  }\n\n  // Convert all file paths to object.\n  // TODO: remove when we migrate to new registry.\n  item.files = item.files.map((file: unknown) =>\n    typeof file === \"string\" ? { path: file } : file,\n  );\n\n  // Type assertion for now - TODO: implement proper validation\n  const typedItem = item as RegistryItem;\n\n  const files = typedItem.files || [];\n  const processedFiles = [];\n\n  for (const file of files) {\n    const content = await getFileContent(file);\n    const relativePath = path.relative(process.cwd(), file.path);\n\n    processedFiles.push({\n      ...file,\n      content,\n      path: relativePath,\n    });\n  }\n\n  // Fix file paths.\n  const finalFiles = fixFilePaths(processedFiles);\n\n  return {\n    ...typedItem,\n    files: finalFiles,\n  };\n}\n\nasync function getFileContent(file: { path: string; type?: string }) {\n  const raw = await fs.readFile(file.path, \"utf-8\");\n\n  const project = new Project({\n    compilerOptions: {},\n  });\n\n  const tempFile = await createTempSourceFile(file.path);\n  const sourceFile = project.createSourceFile(tempFile, raw, {\n    scriptKind: ScriptKind.TSX,\n  });\n\n  // Remove meta variables.\n  // removeVariable(sourceFile, \"iframeHeight\")\n  // removeVariable(sourceFile, \"containerClassName\")\n  // removeVariable(sourceFile, \"description\")\n\n  let code = sourceFile.getFullText();\n\n  // Some registry items uses default export.\n  // We want to use named export instead.\n  // TODO: do we really need this? - @shadcn.\n  // if (file.type !== \"registry:page\") {\n  //   code = code.replaceAll(\"export default\", \"export\")\n  // }\n\n  // Fix imports.\n  code = fixImport(code);\n\n  return code;\n}\n\nfunction getFileTarget(file: { path: string; type?: string; target?: string }) {\n  let target = file.target;\n\n  if (!target || target === \"\") {\n    const fileName = file.path.split(\"/\").pop();\n    if (\n      file.type === \"registry:block\" ||\n      file.type === \"registry:component\" ||\n      file.type === \"registry:example\"\n    ) {\n      target = `components/${fileName}`;\n    }\n\n    if (file.type === \"registry:ui\") {\n      target = `components/ui/${fileName}`;\n    }\n\n    if (file.type === \"registry:hook\") {\n      target = `hooks/${fileName}`;\n    }\n\n    if (file.type === \"registry:lib\") {\n      target = file.path.includes(\"base-ui/\")\n        ? `base-ui/${fileName}`\n        : `lib/${fileName}`;\n    }\n  }\n\n  return target ?? \"\";\n}\n\nasync function createTempSourceFile(filename: string) {\n  const dir = await fs.mkdtemp(path.join(tmpdir(), \"shadcn-\"));\n  return path.join(dir, filename);\n}\n\nfunction fixFilePaths(\n  files: Array<{\n    path: string;\n    type?: string;\n    target?: string;\n    content?: string;\n  }>,\n) {\n  if (!files) {\n    return [];\n  }\n\n  // Resolve all paths relative to the first file's directory.\n  const firstFilePath = files[0]?.path;\n  if (!firstFilePath) {\n    return [];\n  }\n  const firstFilePathDir = path.dirname(firstFilePath);\n\n  return files.map((file) => {\n    return {\n      ...file,\n      path: path.relative(firstFilePathDir, file.path),\n      target: getFileTarget(file),\n    };\n  });\n}\n\nexport function fixImport(content: string) {\n  const regex = /@\\/(.+?)\\/((?:.*?\\/)?(?:components|ui|hooks|lib))\\/([\\w-]+)/g;\n\n  const replacement = (\n    match: string,\n    _path: string,\n    type: string,\n    component: string,\n  ) => {\n    if (type.endsWith(\"components\")) {\n      return `@/components/${component}`;\n    }\n    if (type.endsWith(\"ui\")) {\n      return `@/components/ui/${component}`;\n    }\n    if (type.endsWith(\"hooks\")) {\n      return `@/hooks/${component}`;\n    }\n    if (type.endsWith(\"lib\")) {\n      return `@/lib/${component}`;\n    }\n\n    return match;\n  };\n\n  return content.replace(regex, replacement);\n}\n\nexport type FileTree = {\n  name: string;\n  path?: string;\n  children?: FileTree[];\n};\n\nexport function createFileTreeForRegistryItemFiles(\n  files: Array<{ path: string; target?: string }>,\n) {\n  const root: FileTree[] = [];\n\n  for (const file of files) {\n    const path = file.target ?? file.path;\n    const parts = path.split(\"/\");\n    let currentLevel = root;\n\n    for (let i = 0; i < parts.length; i++) {\n      const part = parts[i];\n      const isFile = i === parts.length - 1;\n      const existingNode = currentLevel.find((node) => node.name === part);\n\n      if (existingNode) {\n        if (isFile) {\n          // Update existing file node with full path\n          existingNode.path = path;\n        } else if (existingNode.children) {\n          // Move to next level in the tree\n          currentLevel = existingNode.children;\n        }\n      } else if (part) {\n        const newNode: FileTree = isFile\n          ? { name: part, path }\n          : { children: [], name: part };\n\n        currentLevel.push(newNode);\n\n        if (!isFile && newNode.children) {\n          currentLevel = newNode.children;\n        }\n      }\n    }\n  }\n\n  return root;\n}\n"
  },
  {
    "path": "apps/ui/lib/source.ts",
    "content": "import { loader } from \"fumadocs-core/source\";\nimport { docs } from \"@/.source/server\";\n\nexport const source = loader({\n  baseUrl: \"/docs\",\n  source: docs.toFumadocsSource(),\n});\n"
  },
  {
    "path": "apps/ui/lib/utils.ts",
    "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
  },
  {
    "path": "apps/ui/mdx-components.tsx",
    "content": "import { CopyButton } from \"@coss/ui/shared/copy-button\";\nimport { getIconForLanguageExtension } from \"@coss/ui/shared/icons\";\nimport { InfoIcon } from \"lucide-react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport type * as React from \"react\";\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\nimport { CodeBlockCommand } from \"@/components/code-block-command\";\nimport { CodeCollapsibleWrapper } from \"@/components/code-collapsible-wrapper\";\nimport { CodeTabs } from \"@/components/code-tabs\";\nimport { ComponentPreview } from \"@/components/component-preview\";\nimport { ComponentSource } from \"@/components/component-source\";\nimport { MediaQueryDemo } from \"@/components/media-query-demo\";\nimport { cn } from \"@/lib/utils\";\n\nexport const mdxComponents = {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n  Alert: ({ className, ...props }: React.ComponentProps<typeof Alert>) => (\n    <Alert className={cn(\"my-6\", className)} {...props} />\n  ),\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n  a: ({ className, ...props }: React.ComponentProps<\"a\">) => (\n    <a\n      className={cn(\n        \"font-medium text-foreground underline underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  Button,\n  blockquote: ({ className, ...props }: React.ComponentProps<\"blockquote\">) => (\n    <blockquote\n      className={cn(\"mt-6 border-l-2 ps-6 italic\", className)}\n      {...props}\n    />\n  ),\n  CodeCollapsibleWrapper,\n  CodeTabs,\n  ComponentPreview,\n  ComponentSource,\n  code: ({\n    className,\n    __raw__,\n    __src__,\n    __npm__,\n    __yarn__,\n    __pnpm__,\n    __bun__,\n    ...props\n  }: React.ComponentProps<\"code\"> & {\n    __raw__?: string;\n    __src__?: string;\n    __npm__?: string;\n    __yarn__?: string;\n    __pnpm__?: string;\n    __bun__?: string;\n  }) => {\n    // Inline Code.\n    if (typeof props.children === \"string\") {\n      return (\n        <code\n          className={cn(\n            \"relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] font-mono text-[.8125rem] text-muted-foreground outline-none\",\n            className,\n          )}\n          {...props}\n        />\n      );\n    }\n\n    // npm command.\n    const isNpmCommand = __npm__ && __yarn__ && __pnpm__ && __bun__;\n    if (isNpmCommand) {\n      return (\n        <CodeBlockCommand\n          __bun__={__bun__}\n          __npm__={__npm__}\n          __pnpm__={__pnpm__}\n          __yarn__={__yarn__}\n        />\n      );\n    }\n\n    // Default codeblock.\n    return (\n      <>\n        {__raw__ && <CopyButton src={__src__} value={__raw__} />}\n        <code {...props} />\n      </>\n    );\n  },\n  figcaption: ({\n    className,\n    children,\n    ...props\n  }: React.ComponentProps<\"figcaption\">) => {\n    const iconExtension =\n      \"data-language\" in props && typeof props[\"data-language\"] === \"string\"\n        ? getIconForLanguageExtension(props[\"data-language\"])\n        : null;\n\n    return (\n      <figcaption\n        className={cn(\n          \"flex items-center gap-2 text-[.8125rem] text-code-foreground [&_svg]:size-4.5 [&_svg]:text-code-foreground [&_svg]:opacity-70 sm:[&_svg]:size-4\",\n          className,\n        )}\n        {...props}\n      >\n        {iconExtension}\n        {children}\n      </figcaption>\n    );\n  },\n  figure: ({ className, ...props }: React.ComponentProps<\"figure\">) => {\n    return <figure className={cn(className)} {...props} />;\n  },\n  h1: ({ className, ...props }: React.ComponentProps<\"h1\">) => (\n    <h1\n      className={cn(\n        \"mt-2 scroll-m-20 font-heading font-semibold text-3xl\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  h2: ({ className, children, ...props }: React.ComponentProps<\"h2\">) => {\n    const id =\n      (props as { id?: string }).id ||\n      children\n        ?.toString()\n        .replace(/ /g, \"-\")\n        .replace(/'/g, \"\")\n        .replace(/\\?/g, \"\")\n        .toLowerCase();\n\n    return (\n      <h2\n        {...props}\n        className={cn(\n          \"mt-12 scroll-m-20 font-heading font-semibold text-2xl first:mt-0 lg:mt-16 [&+p]:mt-4! *:[code]:text-2xl\",\n          className,\n        )}\n        id={id}\n      >\n        <a\n          className=\"no-underline underline-offset-4 hover:underline\"\n          href={`#${id}`}\n        >\n          {children}\n        </a>\n      </h2>\n    );\n  },\n  h3: ({ className, children, ...props }: React.ComponentProps<\"h3\">) => {\n    const id =\n      (props as { id?: string }).id ||\n      children\n        ?.toString()\n        .replace(/ /g, \"-\")\n        .replace(/'/g, \"\")\n        .replace(/\\?/g, \"\")\n        .toLowerCase();\n\n    return (\n      <h3\n        {...props}\n        className={cn(\n          \"mt-8 scroll-m-20 font-semibold text-lg *:[code]:text-lg\",\n          className,\n        )}\n        id={id}\n      >\n        <a\n          className=\"no-underline underline-offset-4 hover:underline\"\n          href={`#${id}`}\n        >\n          {children}\n        </a>\n      </h3>\n    );\n  },\n  h4: ({ className, ...props }: React.ComponentProps<\"h4\">) => (\n    <h4\n      className={cn(\"mt-8 scroll-m-20 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  ),\n  h5: ({ className, ...props }: React.ComponentProps<\"h5\">) => (\n    <h5\n      className={cn(\n        \"mt-8 scroll-m-20 font-medium text-lg tracking-tight\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  h6: ({ className, ...props }: React.ComponentProps<\"h6\">) => (\n    <h6\n      className={cn(\n        \"mt-8 scroll-m-20 font-medium text-base tracking-tight\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  hr: ({ ...props }: React.ComponentProps<\"hr\">) => (\n    <hr className=\"my-4 md:my-8\" {...props} />\n  ),\n  Image: ({\n    src,\n    className,\n    width,\n    height,\n    alt,\n    ...props\n  }: React.ComponentProps<\"img\">) => (\n    <Image\n      alt={alt || \"\"}\n      className={cn(\"mt-6 rounded-md border\", className)}\n      height={Number(height)}\n      src={typeof src === \"string\" ? src : \"\"}\n      width={Number(width)}\n      {...props}\n    />\n  ),\n  InfoIcon,\n  img: ({ className, alt, ...props }: React.ComponentProps<\"img\">) => (\n    <img alt={alt} className={cn(\"rounded-md\", className)} {...props} />\n  ),\n  Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (\n    <Link\n      className={cn(\"font-medium underline underline-offset-4\", className)}\n      {...props}\n    />\n  ),\n  li: ({ className, ...props }: React.ComponentProps<\"li\">) => (\n    <li className={cn(\"mt-2\", className)} {...props} />\n  ),\n  MediaQueryDemo,\n  ol: ({ className, ...props }: React.ComponentProps<\"ol\">) => (\n    <ol\n      className={cn(\"my-6 ms-6 list-decimal text-muted-foreground\", className)}\n      {...props}\n    />\n  ),\n  p: ({ className, ...props }: React.ComponentProps<\"p\">) => (\n    <p\n      className={cn(\n        \"not-first:mt-6 text-muted-foreground leading-relaxed\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  pre: ({ className, children, ...props }: React.ComponentProps<\"pre\">) => {\n    return (\n      <ScrollArea className=\"**:data-[slot=scroll-area-scrollbar]:data-[orientation=horizontal]:mx-2 **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-2\">\n        <pre\n          className={cn(\n            \"w-max min-w-full px-4 py-3.5 text-[.8125rem] outline-none has-data-[slot=tabs]:p-0 has-data-highlighted-line:px-0 has-data-line-numbers:px-0\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </pre>\n      </ScrollArea>\n    );\n  },\n  Step: ({ className, ...props }: React.ComponentProps<\"h3\">) => (\n    <h3\n      className={cn(\"mt-8 scroll-m-32 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  ),\n  Steps: ({ ...props }) => (\n    <div\n      className=\"steps [&>h3]:step mb-12 [counter-reset:step] *:[h3]:first:mt-0!\"\n      {...props}\n    />\n  ),\n  strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (\n    <strong\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  ),\n  Tab: ({ className, ...props }: React.ComponentProps<\"div\">) => (\n    <div className={cn(className)} {...props} />\n  ),\n  Tabs: ({ className, ...props }: React.ComponentProps<typeof Tabs>) => {\n    return <Tabs className={cn(className)} {...props} />;\n  },\n  TabsList: ({\n    className,\n    ...props\n  }: React.ComponentProps<typeof TabsList>) => (\n    <TabsList\n      className={cn(\n        \"bg-transparent p-0 *:data-[slot=tab-indicator]:rounded-lg *:data-[slot=tab-indicator]:bg-accent *:data-[slot=tab-indicator]:shadow-none\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  TabsPanel: ({\n    className,\n    ...props\n  }: React.ComponentProps<typeof TabsPanel>) => (\n    <TabsPanel\n      className={cn(\n        \"relative [&>.steps]:mt-6 [&_h3]:font-medium [&_h3]:text-base *:[figure]:first:mt-0\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  TabsTab: ({ className, ...props }: React.ComponentProps<typeof TabsTab>) => (\n    <TabsTab className={cn(\"rounded-lg\", className)} {...props} />\n  ),\n  table: ({ className, ...props }: React.ComponentProps<\"table\">) => (\n    <ScrollArea className=\"my-6\" scrollbarGutter>\n      <table\n        className={cn(\"relative w-full border-none text-sm\", className)}\n        {...props}\n      />\n    </ScrollArea>\n  ),\n  td: ({ className, ...props }: React.ComponentProps<\"td\">) => (\n    <td\n      className={cn(\n        \"whitespace-nowrap px-4 py-2 text-left [[align=center]]:text-center [[align=right]]:text-right\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  th: ({ className, ...props }: React.ComponentProps<\"th\">) => (\n    <th\n      className={cn(\n        \"px-4 py-2 text-left font-medium [[align=center]]:text-center [[align=right]]:text-right\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n  tr: ({ className, ...props }: React.ComponentProps<\"tr\">) => (\n    <tr\n      className={cn(\"m-0 border-b last:border-b-none\", className)}\n      {...props}\n    />\n  ),\n  ul: ({ className, ...props }: React.ComponentProps<\"ul\">) => (\n    <ul\n      className={cn(\"my-6 ms-6 list-disc text-muted-foreground\", className)}\n      {...props}\n    />\n  ),\n};\n"
  },
  {
    "path": "apps/ui/next.config.ts",
    "content": "import { createMDX } from \"fumadocs-mdx/next\";\nimport type { NextConfig } from \"next\";\n\nconst withMDX = createMDX();\n\nconst nextConfig: NextConfig = {\n  basePath: process.env.NEXT_PUBLIC_BASE_PATH || \"/ui\",\n  async redirects() {\n    return [\n      {\n        destination: \"/docs/radix-migration\",\n        permanent: true,\n        source: \"/docs/radix-shadcn-migration\",\n      },\n    ];\n  },\n  async rewrites() {\n    return [\n      {\n        destination: \"/api/raw/docs/:path*\",\n        source: \"/docs/:path*.md\",\n      },\n    ];\n  },\n  transpilePackages: [\"@coss/ui\"],\n};\n\nexport default withMDX(nextConfig);\n"
  },
  {
    "path": "apps/ui/package.json",
    "content": "{\n  \"dependencies\": {\n    \"@base-ui/react\": \"^1.3.0\",\n    \"@coss/ui\": \"workspace:*\",\n    \"@hugeicons/core-free-icons\": \"^2.0.0\",\n    \"@hugeicons/react\": \"^1.1.1\",\n    \"@remixicon/react\": \"^4.7.0\",\n    \"@tanstack/react-table\": \"^8.21.3\",\n    \"class-variance-authority\": \"^0.7.1\",\n    \"clsx\": \"^2.1.1\",\n    \"date-fns\": \"^4.1.0\",\n    \"fumadocs-core\": \"^16.0.14\",\n    \"fumadocs-mdx\": \"^14.0.3\",\n    \"input-otp\": \"^1.4.2\",\n    \"jotai\": \"^2.15.1\",\n    \"lucide-react\": \"^0.555.0\",\n    \"next\": \"16.0.9\",\n    \"react\": \"^19.2.3\",\n    \"react-day-picker\": \"^9.13.0\",\n    \"react-dom\": \"^19.2.3\",\n    \"shadcn\": \"^3.5.0\",\n    \"tailwind-merge\": \"^3.4.0\",\n    \"ts-morph\": \"^27.0.2\",\n    \"zod\": \"^4.1.12\"\n  },\n  \"devDependencies\": {\n    \"@coss/typescript-config\": \"workspace:*\",\n    \"@shikijs/transformers\": \"^3.15.0\",\n    \"@tailwindcss/postcss\": \"^4.1.17\",\n    \"@types/mdx\": \"^2.0.13\",\n    \"@types/node\": \"^24.10.1\",\n    \"@types/react\": \"^19.2.6\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"rehype-pretty-code\": \"^0.14.1\",\n    \"rimraf\": \"^6.1.0\",\n    \"shiki\": \"^3.15.0\",\n    \"tailwindcss\": \"^4.1.17\",\n    \"tsx\": \"^4.20.6\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"license\": \"MIT\",\n  \"name\": \"ui\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"next build\",\n    \"clean\": \"rm -rf node_modules && rm -rf .turbo && rm -rf .next && rm -rf .source\",\n    \"dev\": \"next dev --port 4000\",\n    \"format\": \"biome format --write .\",\n    \"format:all\": \"biome check --write --unsafe --no-errors-on-unmatched\",\n    \"lint\": \"biome lint .\",\n    \"postinstall\": \"fumadocs-mdx\",\n    \"registry:build\": \"tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts\",\n    \"registry:validate-deps\": \"tsx --tsconfig ./tsconfig.scripts.json ./scripts/validate-registry-deps.mts\",\n    \"start\": \"next start --port 4000\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"ui:sync\": \"tsx --tsconfig ./tsconfig.scripts.json ./scripts/sync-ui.mts && bun run ui:sync:imports\",\n    \"ui:sync:imports\": \"cd ../.. && bunx biome check --write --assist-enabled=true --linter-enabled=false --formatter-enabled=false --indent-style=space --indent-width=2 --config-path .biome-packages-sync/packages-sync.json packages/ui/src/hooks packages/ui/src/lib packages/ui/src/components > /dev/null 2>&1 || true\"\n  },\n  \"type\": \"module\",\n  \"version\": \"0.1.0\"\n}\n"
  },
  {
    "path": "apps/ui/postcss.config.mjs",
    "content": "import { postcssConfig } from \"@coss/ui/postcss.config\";\n\nexport default postcssConfig;\n"
  },
  {
    "path": "apps/ui/public/llms.txt",
    "content": "# coss ui\n\n**coss ui** is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of [Base UI](https://base-ui.com/) and styled with [Tailwind CSS](https://tailwindcss.com/), it’s designed for you to copy, paste, and own.\n\n## Overview\n\n- [Introduction](https://coss.com/ui/docs/index.md)\n- [Get Started](https://coss.com/ui/docs/get-started.md)\n- [Roadmap](https://coss.com/ui/docs/roadmap.md)\n- [Radix / shadcn Migration](https://coss.com/ui/docs/radix-shadcn-migration.md): A comprehensive guide for migrating from shadcn/ui and Radix UI to coss ui components.\n\n## Components\n\n- [Accordion](https://coss.com/ui/docs/components/accordion.md): A set of collapsible panels with headings.\n- [Alert](https://coss.com/ui/docs/components/alert.md): A callout for displaying important information.\n- [Alert Dialog](https://coss.com/ui/docs/components/alert-dialog.md): A modal dialog that interrupts the user workflow for critical confirmations.\n- [Autocomplete](https://coss.com/ui/docs/components/autocomplete.md): An input that suggests options as you type.\n- [Avatar](https://coss.com/ui/docs/components/avatar.md): A visual representation of a user or entity.\n- [Badge](https://coss.com/ui/docs/components/badge.md): A small status indicator or label component.\n- [Breadcrumb](https://coss.com/ui/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.\n- [Button](https://coss.com/ui/docs/components/button.md): A button or a component that looks like a button.\n- [Calendar](https://coss.com/ui/docs/components/calendar.md): A date picker for selecting single dates, ranges, or multiple dates.\n- [Card](https://coss.com/ui/docs/components/card.md): A content container for grouping related information.\n- [Checkbox](https://coss.com/ui/docs/components/checkbox.md): A binary toggle input for selecting one or multiple options.\n- [Checkbox Group](https://coss.com/ui/docs/components/checkbox-group.md): A collection of related checkboxes with group-level control.\n- [Collapsible](https://coss.com/ui/docs/components/collapsible.md): A component that toggles visibility of content sections.\n- [Combobox](https://coss.com/ui/docs/components/combobox.md): An input combined with a list of predefined items to select.\n- [Command](https://coss.com/ui/docs/components/command.md): A command palette component built with Dialog and Autocomplete for searching and executing commands.\n- [Date Picker](https://coss.com/ui/docs/components/date-picker.md): A date selection component, often combined with a calendar in a popover or input.\n- [Dialog](https://coss.com/ui/docs/components/dialog.md): A modal overlay for displaying content that requires user interaction.\n- [Drawer](https://coss.com/ui/docs/components/drawer.md): A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.\n- [Empty](https://coss.com/ui/docs/components/empty.md): A container for displaying empty state information.\n- [Field](https://coss.com/ui/docs/components/field.md): A wrapper component for form inputs with labels and validation.\n- [Fieldset](https://coss.com/ui/docs/components/fieldset.md): A group of related form fields with a common label.\n- [Form](https://coss.com/ui/docs/components/form.md): A complete form implementation with validation and submission handling.\n- [Frame](https://coss.com/ui/docs/components/frame.md): A container component for displaying content in a frame.\n- [Group](https://coss.com/ui/docs/components/group.md): A container component for grouping related content with consistent styling.\n- [Input](https://coss.com/ui/docs/components/input.md): A native input element.\n- [Input OTP](https://coss.com/ui/docs/components/input-otp.md): A segmented input for one-time passwords and verification codes.\n- [Input Group](https://coss.com/ui/docs/components/input-group.md): A flexible component for grouping inputs with addons, buttons, and other elements.\n- [Kbd](https://coss.com/ui/docs/components/kbd.md): A component for displaying keyboard keys and shortcuts.\n- [Label](https://coss.com/ui/docs/components/label.md): Renders an accessible label associated with controls.\n- [Menu](https://coss.com/ui/docs/components/menu.md): A list of actions or options revealed on demand.\n- [Meter](https://coss.com/ui/docs/components/meter.md): A visual representation of a value within a known range.\n- [Number Field](https://coss.com/ui/docs/components/number-field.md): A specialized input for numeric values with increment/decrement controls.\n- [Pagination](https://coss.com/ui/docs/components/pagination.md): A pagination with page navigation, next and previous links.\n- [Popover](https://coss.com/ui/docs/components/popover.md): A floating container that appears near a trigger element.\n- [Preview Card](https://coss.com/ui/docs/components/preview-card.md): A rich preview component for displaying linked content.\n- [Progress](https://coss.com/ui/docs/components/progress.md): A visual indicator showing the completion status of a task.\n- [Radio Group](https://coss.com/ui/docs/components/radio-group.md): A set of mutually exclusive options presented as radio buttons.\n- [Scroll Area](https://coss.com/ui/docs/components/scroll-area.md): A container with custom scrollbars for overflow content.\n- [Select](https://coss.com/ui/docs/components/select.md): A common form component for choosing a predefined value in a dropdown menu.\n- [Separator](https://coss.com/ui/docs/components/separator.md): A visual divider for separating content sections.\n- [Sheet](https://coss.com/ui/docs/components/sheet.md): A flyout that opens from the side of the screen, based on the dialog component.\n- [Sidebar](https://coss.com/ui/docs/components/sidebar.md): A collapsible side panel for navigation and secondary content.\n- [Skeleton](https://coss.com/ui/docs/components/skeleton.md): A placeholder for loading content.\n- [Slider](https://coss.com/ui/docs/components/slider.md): A draggable control for selecting values from a continuous range.\n- [Spinner](https://coss.com/ui/docs/components/spinner.md): An indicator that can be used to show a loading state.\n- [Switch](https://coss.com/ui/docs/components/switch.md): A toggle control for binary on/off states.\n- [Table](https://coss.com/ui/docs/components/table.md): A structured data display component with rows and columns.\n- [Tabs](https://coss.com/ui/docs/components/tabs.md): A navigation component for switching between different views or content panels.\n- [Textarea](https://coss.com/ui/docs/components/textarea.md): A multi-line text input for longer content.\n- [Toast](https://coss.com/ui/docs/components/toast.md): A temporary notification message that appears and disappears automatically.\n- [Toggle](https://coss.com/ui/docs/components/toggle.md): A button that switches between two states.\n- [Toggle Group](https://coss.com/ui/docs/components/toggle-group.md): A group of toggle buttons where one or multiple can be selected.\n- [Toolbar](https://coss.com/ui/docs/components/toolbar.md): A container for grouping related actions or controls.\n- [Tooltip](https://coss.com/ui/docs/components/tooltip.md): A small overlay that provides contextual information on hover or focus.\n\n## Hooks\n\n- [useMediaQuery](https://coss.com/ui/docs/hooks/use-media-query.md): Reactive media query hook with Tailwind-like syntax for conditional rendering based on breakpoints, pointer type, or any CSS media query.\n- [useCopyToClipboard](https://coss.com/ui/docs/hooks/use-copy-to-clipboard.md): Copy text to clipboard with a temporary \"copied\" state and optional callback.\n"
  },
  {
    "path": "apps/ui/public/r/accordion.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"accordion\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/accordion.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Accordion as AccordionPrimitive } from \\\"@base-ui/react/accordion\\\";\\nimport { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Accordion(\\n  props: AccordionPrimitive.Root.Props,\\n): React.ReactElement {\\n  return <AccordionPrimitive.Root data-slot=\\\"accordion\\\" {...props} />;\\n}\\n\\nexport function AccordionItem({\\n  className,\\n  ...props\\n}: AccordionPrimitive.Item.Props): React.ReactElement {\\n  return (\\n    <AccordionPrimitive.Item\\n      className={cn(\\\"border-b last:border-b-0\\\", className)}\\n      data-slot=\\\"accordion-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AccordionTrigger({\\n  className,\\n  children,\\n  ...props\\n}: AccordionPrimitive.Trigger.Props): React.ReactElement {\\n  return (\\n    <AccordionPrimitive.Header className=\\\"flex\\\">\\n      <AccordionPrimitive.Trigger\\n        className={cn(\\n          \\\"flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180\\\",\\n          className,\\n        )}\\n        data-slot=\\\"accordion-trigger\\\"\\n        {...props}\\n      >\\n        {children}\\n        <ChevronDownIcon\\n          className=\\\"pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out\\\"\\n          data-slot=\\\"accordion-indicator\\\"\\n        />\\n      </AccordionPrimitive.Trigger>\\n    </AccordionPrimitive.Header>\\n  );\\n}\\n\\nexport function AccordionPanel({\\n  className,\\n  children,\\n  ...props\\n}: AccordionPrimitive.Panel.Props): React.ReactElement {\\n  return (\\n    <AccordionPrimitive.Panel\\n      className=\\\"h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0\\\"\\n      data-slot=\\\"accordion-panel\\\"\\n      {...props}\\n    >\\n      <div className={cn(\\\"pt-0 pb-4\\\", className)}>{children}</div>\\n    </AccordionPrimitive.Panel>\\n  );\\n}\\n\\nexport { AccordionPrimitive, AccordionPanel as AccordionContent };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/alert-dialog.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"alert-dialog\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/alert-dialog.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { AlertDialog as AlertDialogPrimitive } from \\\"@base-ui/react/alert-dialog\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport const AlertDialogCreateHandle: typeof AlertDialogPrimitive.createHandle =\\n  AlertDialogPrimitive.createHandle;\\n\\nexport const AlertDialog: typeof AlertDialogPrimitive.Root =\\n  AlertDialogPrimitive.Root;\\n\\nexport const AlertDialogPortal: typeof AlertDialogPrimitive.Portal =\\n  AlertDialogPrimitive.Portal;\\n\\nexport function AlertDialogTrigger(\\n  props: AlertDialogPrimitive.Trigger.Props,\\n): React.ReactElement {\\n  return (\\n    <AlertDialogPrimitive.Trigger data-slot=\\\"alert-dialog-trigger\\\" {...props} />\\n  );\\n}\\n\\nexport function AlertDialogBackdrop({\\n  className,\\n  ...props\\n}: AlertDialogPrimitive.Backdrop.Props): React.ReactElement {\\n  return (\\n    <AlertDialogPrimitive.Backdrop\\n      className={cn(\\n        \\\"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-dialog-backdrop\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertDialogViewport({\\n  className,\\n  ...props\\n}: AlertDialogPrimitive.Viewport.Props): React.ReactElement {\\n  return (\\n    <AlertDialogPrimitive.Viewport\\n      className={cn(\\n        \\\"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-dialog-viewport\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertDialogPopup({\\n  className,\\n  bottomStickOnMobile = true,\\n  ...props\\n}: AlertDialogPrimitive.Popup.Props & {\\n  bottomStickOnMobile?: boolean;\\n}): React.ReactElement {\\n  return (\\n    <AlertDialogPortal>\\n      <AlertDialogBackdrop />\\n      <AlertDialogViewport\\n        className={cn(\\n          bottomStickOnMobile &&\\n            \\\"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\\\",\\n        )}\\n      >\\n        <AlertDialogPrimitive.Popup\\n          className={cn(\\n            \\\"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            bottomStickOnMobile &&\\n              \\\"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\\\",\\n            className,\\n          )}\\n          data-slot=\\\"alert-dialog-popup\\\"\\n          {...props}\\n        />\\n      </AlertDialogViewport>\\n    </AlertDialogPortal>\\n  );\\n}\\n\\nexport function AlertDialogHeader({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-dialog-header\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertDialogFooter({\\n  className,\\n  variant = \\\"default\\\",\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> & {\\n  variant?: \\\"default\\\" | \\\"bare\\\";\\n}): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\\\",\\n        variant === \\\"default\\\" && \\\"border-t bg-muted/72 py-4\\\",\\n        variant === \\\"bare\\\" && \\\"pb-6\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-dialog-footer\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertDialogTitle({\\n  className,\\n  ...props\\n}: AlertDialogPrimitive.Title.Props): React.ReactElement {\\n  return (\\n    <AlertDialogPrimitive.Title\\n      className={cn(\\n        \\\"font-heading font-semibold text-xl leading-none\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-dialog-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertDialogDescription({\\n  className,\\n  ...props\\n}: AlertDialogPrimitive.Description.Props): React.ReactElement {\\n  return (\\n    <AlertDialogPrimitive.Description\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"alert-dialog-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertDialogClose(\\n  props: AlertDialogPrimitive.Close.Props,\\n): React.ReactElement {\\n  return (\\n    <AlertDialogPrimitive.Close data-slot=\\\"alert-dialog-close\\\" {...props} />\\n  );\\n}\\n\\nexport {\\n  AlertDialogPrimitive,\\n  AlertDialogBackdrop as AlertDialogOverlay,\\n  AlertDialogPopup as AlertDialogContent,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/alert.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"alert\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/alert.tsx\",\n      \"content\": \"import { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nconst alertVariants = cva(\\n  \\\"relative grid w-full items-start gap-x-2 gap-y-0.5 rounded-xl border px-3.5 py-3 text-card-foreground text-sm has-[>svg]:has-data-[slot=alert-action]:grid-cols-[calc(var(--spacing)*4)_1fr_auto] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-[>svg]:gap-x-2 [&>svg]:h-lh [&>svg]:w-4\\\",\\n  {\\n    defaultVariants: {\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      variant: {\\n        default:\\n          \\\"bg-transparent dark:bg-input/32 [&>svg]:text-muted-foreground\\\",\\n        error:\\n          \\\"border-destructive/32 bg-destructive/4 [&>svg]:text-destructive\\\",\\n        info: \\\"border-info/32 bg-info/4 [&>svg]:text-info\\\",\\n        success: \\\"border-success/32 bg-success/4 [&>svg]:text-success\\\",\\n        warning: \\\"border-warning/32 bg-warning/4 [&>svg]:text-warning\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport function Alert({\\n  className,\\n  variant,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> &\\n  VariantProps<typeof alertVariants>): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(alertVariants({ variant }), className)}\\n      data-slot=\\\"alert\\\"\\n      role=\\\"alert\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertTitle({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"font-medium [svg~&]:col-start-2\\\", className)}\\n      data-slot=\\\"alert-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertDescription({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex flex-col gap-2.5 text-muted-foreground [svg~&]:col-start-2\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AlertAction({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex gap-1 max-sm:col-start-2 max-sm:mt-2 sm:row-start-1 sm:row-end-3 sm:self-center sm:[[data-slot=alert-description]~&]:col-start-2 sm:[[data-slot=alert-title]~&]:col-start-2 sm:[svg~&]:col-start-2 sm:[svg~[data-slot=alert-description]~&]:col-start-3 sm:[svg~[data-slot=alert-title]~&]:col-start-3\\\",\\n        className,\\n      )}\\n      data-slot=\\\"alert-action\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ],\n  \"cssVars\": {\n    \"light\": {\n      \"destructive-foreground\": \"var(--color-red-700)\",\n      \"info\": \"var(--color-blue-500)\",\n      \"info-foreground\": \"var(--color-blue-700)\",\n      \"success\": \"var(--color-emerald-500)\",\n      \"success-foreground\": \"var(--color-emerald-700)\",\n      \"warning\": \"var(--color-amber-500)\",\n      \"warning-foreground\": \"var(--color-amber-700)\"\n    },\n    \"dark\": {\n      \"destructive-foreground\": \"var(--color-red-400)\",\n      \"info\": \"var(--color-blue-500)\",\n      \"info-foreground\": \"var(--color-blue-400)\",\n      \"success\": \"var(--color-emerald-500)\",\n      \"success-foreground\": \"var(--color-emerald-400)\",\n      \"warning\": \"var(--color-amber-500)\",\n      \"warning-foreground\": \"var(--color-amber-400)\"\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/autocomplete.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"autocomplete\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/input\",\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/autocomplete.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Autocomplete as AutocompletePrimitive } from \\\"@base-ui/react/autocomplete\\\";\\nimport { ChevronsUpDownIcon, XIcon } from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\\n  AutocompletePrimitive.Root;\\n\\nexport function AutocompleteInput({\\n  className,\\n  showTrigger = false,\\n  showClear = false,\\n  startAddon,\\n  size,\\n  triggerProps,\\n  clearProps,\\n  ...props\\n}: Omit<AutocompletePrimitive.Input.Props, \\\"size\\\"> & {\\n  showTrigger?: boolean;\\n  showClear?: boolean;\\n  startAddon?: React.ReactNode;\\n  size?: \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\" | number;\\n  ref?: React.Ref<HTMLInputElement>;\\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\\n  clearProps?: AutocompletePrimitive.Clear.Props;\\n}): React.ReactElement {\\n  const sizeValue = (size ?? \\\"default\\\") as \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\" | number;\\n\\n  return (\\n    <AutocompletePrimitive.InputGroup\\n      className=\\\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\\\"\\n      data-slot=\\\"autocomplete-input-group\\\"\\n    >\\n      {startAddon && (\\n        <div\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\\\"\\n          data-slot=\\\"autocomplete-start-addon\\\"\\n        >\\n          {startAddon}\\n        </div>\\n      )}\\n      <AutocompletePrimitive.Input\\n        className={cn(\\n          startAddon &&\\n            \\\"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\\\",\\n          sizeValue === \\\"sm\\\"\\n            ? \\\"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\\\"\\n            : \\\"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\\\",\\n          className,\\n        )}\\n        data-slot=\\\"autocomplete-input\\\"\\n        render={<Input nativeInput size={sizeValue} />}\\n        {...props}\\n      />\\n      {showTrigger && (\\n        <AutocompleteTrigger\\n          className={cn(\\n            \\\"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n            sizeValue === \\\"sm\\\" ? \\\"end-0\\\" : \\\"end-0.5\\\",\\n          )}\\n          {...triggerProps}\\n        >\\n          <AutocompletePrimitive.Icon data-slot=\\\"autocomplete-icon\\\">\\n            <ChevronsUpDownIcon />\\n          </AutocompletePrimitive.Icon>\\n        </AutocompleteTrigger>\\n      )}\\n      {showClear && (\\n        <AutocompleteClear\\n          className={cn(\\n            \\\"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n            sizeValue === \\\"sm\\\" ? \\\"end-0\\\" : \\\"end-0.5\\\",\\n          )}\\n          {...clearProps}\\n        >\\n          <XIcon />\\n        </AutocompleteClear>\\n      )}\\n    </AutocompletePrimitive.InputGroup>\\n  );\\n}\\n\\nexport function AutocompletePopup({\\n  className,\\n  children,\\n  side = \\\"bottom\\\",\\n  sideOffset = 4,\\n  alignOffset,\\n  align = \\\"start\\\",\\n  anchor,\\n  ...props\\n}: AutocompletePrimitive.Popup.Props & {\\n  align?: AutocompletePrimitive.Positioner.Props[\\\"align\\\"];\\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\\\"sideOffset\\\"];\\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\\\"alignOffset\\\"];\\n  side?: AutocompletePrimitive.Positioner.Props[\\\"side\\\"];\\n  anchor?: AutocompletePrimitive.Positioner.Props[\\\"anchor\\\"];\\n}): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Portal>\\n      <AutocompletePrimitive.Positioner\\n        align={align}\\n        alignOffset={alignOffset}\\n        anchor={anchor}\\n        className=\\\"z-50 select-none\\\"\\n        data-slot=\\\"autocomplete-positioner\\\"\\n        side={side}\\n        sideOffset={sideOffset}\\n      >\\n        <span\\n          className={cn(\\n            \\\"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            className,\\n          )}\\n        >\\n          <AutocompletePrimitive.Popup\\n            className=\\\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\\\"\\n            data-slot=\\\"autocomplete-popup\\\"\\n            {...props}\\n          >\\n            {children}\\n          </AutocompletePrimitive.Popup>\\n        </span>\\n      </AutocompletePrimitive.Positioner>\\n    </AutocompletePrimitive.Portal>\\n  );\\n}\\n\\nexport function AutocompleteItem({\\n  className,\\n  children,\\n  ...props\\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Item\\n      className={cn(\\n        \\\"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\\\",\\n        className,\\n      )}\\n      data-slot=\\\"autocomplete-item\\\"\\n      {...props}\\n    >\\n      {children}\\n    </AutocompletePrimitive.Item>\\n  );\\n}\\n\\nexport function AutocompleteSeparator({\\n  className,\\n  ...props\\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Separator\\n      className={cn(\\\"mx-2 my-1 h-px bg-border last:hidden\\\", className)}\\n      data-slot=\\\"autocomplete-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AutocompleteGroup({\\n  className,\\n  ...props\\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Group\\n      className={cn(\\\"[[role=group]+&]:mt-1.5\\\", className)}\\n      data-slot=\\\"autocomplete-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AutocompleteGroupLabel({\\n  className,\\n  ...props\\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.GroupLabel\\n      className={cn(\\n        \\\"px-2 py-1.5 font-medium text-muted-foreground text-xs\\\",\\n        className,\\n      )}\\n      data-slot=\\\"autocomplete-group-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AutocompleteEmpty({\\n  className,\\n  ...props\\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Empty\\n      className={cn(\\n        \\\"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\\\",\\n        className,\\n      )}\\n      data-slot=\\\"autocomplete-empty\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AutocompleteRow({\\n  className,\\n  ...props\\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Row\\n      className={className}\\n      data-slot=\\\"autocomplete-row\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AutocompleteValue({\\n  ...props\\n}: AutocompletePrimitive.Value.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Value data-slot=\\\"autocomplete-value\\\" {...props} />\\n  );\\n}\\n\\nexport function AutocompleteList({\\n  className,\\n  ...props\\n}: AutocompletePrimitive.List.Props): React.ReactElement {\\n  return (\\n    <ScrollArea scrollbarGutter scrollFade>\\n      <AutocompletePrimitive.List\\n        className={cn(\\n          \\\"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\\\",\\n          className,\\n        )}\\n        data-slot=\\\"autocomplete-list\\\"\\n        {...props}\\n      />\\n    </ScrollArea>\\n  );\\n}\\n\\nexport function AutocompleteClear({\\n  className,\\n  ...props\\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Clear\\n      className={cn(\\n        \\\"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"autocomplete-clear\\\"\\n      {...props}\\n    >\\n      <XIcon />\\n    </AutocompletePrimitive.Clear>\\n  );\\n}\\n\\nexport function AutocompleteStatus({\\n  className,\\n  ...props\\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Status\\n      className={cn(\\n        \\\"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"autocomplete-status\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AutocompleteCollection({\\n  ...props\\n}: AutocompletePrimitive.Collection.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Collection\\n      data-slot=\\\"autocomplete-collection\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AutocompleteTrigger({\\n  className,\\n  children,\\n  ...props\\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\\n  return (\\n    <AutocompletePrimitive.Trigger\\n      className={className}\\n      data-slot=\\\"autocomplete-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n    </AutocompletePrimitive.Trigger>\\n  );\\n}\\n\\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\\n  AutocompletePrimitive.useFilter;\\n\\nexport { AutocompletePrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/avatar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"avatar\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/avatar.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Avatar as AvatarPrimitive } from \\\"@base-ui/react/avatar\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Avatar({\\n  className,\\n  ...props\\n}: AvatarPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <AvatarPrimitive.Root\\n      className={cn(\\n        \\\"inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs\\\",\\n        className,\\n      )}\\n      data-slot=\\\"avatar\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AvatarImage({\\n  className,\\n  ...props\\n}: AvatarPrimitive.Image.Props): React.ReactElement {\\n  return (\\n    <AvatarPrimitive.Image\\n      className={cn(\\\"size-full object-cover\\\", className)}\\n      data-slot=\\\"avatar-image\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function AvatarFallback({\\n  className,\\n  ...props\\n}: AvatarPrimitive.Fallback.Props): React.ReactElement {\\n  return (\\n    <AvatarPrimitive.Fallback\\n      className={cn(\\n        \\\"flex size-full items-center justify-center rounded-full bg-muted\\\",\\n        className,\\n      )}\\n      data-slot=\\\"avatar-fallback\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { AvatarPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/badge.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"badge\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/badge.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport const badgeVariants = cva(\\n  \\\"relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11\\\",\\n  {\\n    defaultVariants: {\\n      size: \\\"default\\\",\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      size: {\\n        default:\\n          \\\"h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs\\\",\\n        lg: \\\"h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm\\\",\\n        sm: \\\"h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]\\\",\\n      },\\n      variant: {\\n        default:\\n          \\\"bg-primary text-primary-foreground [button&,a&]:hover:bg-primary/90\\\",\\n        destructive:\\n          \\\"bg-destructive text-white [button&,a&]:hover:bg-destructive/90\\\",\\n        error:\\n          \\\"bg-destructive/8 text-destructive-foreground dark:bg-destructive/16\\\",\\n        info: \\\"bg-info/8 text-info-foreground dark:bg-info/16\\\",\\n        outline:\\n          \\\"border-input bg-background text-foreground dark:bg-input/32 [button&,a&]:hover:bg-accent/50 dark:[button&,a&]:hover:bg-input/48\\\",\\n        secondary:\\n          \\\"bg-secondary text-secondary-foreground [button&,a&]:hover:bg-secondary/90\\\",\\n        success: \\\"bg-success/8 text-success-foreground dark:bg-success/16\\\",\\n        warning: \\\"bg-warning/8 text-warning-foreground dark:bg-warning/16\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport interface BadgeProps extends useRender.ComponentProps<\\\"span\\\"> {\\n  variant?: VariantProps<typeof badgeVariants>[\\\"variant\\\"];\\n  size?: VariantProps<typeof badgeVariants>[\\\"size\\\"];\\n}\\n\\nexport function Badge({\\n  className,\\n  variant,\\n  size,\\n  render,\\n  ...props\\n}: BadgeProps): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(badgeVariants({ className, size, variant })),\\n    \\\"data-slot\\\": \\\"badge\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"span\\\",\\n    props: mergeProps<\\\"span\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ],\n  \"cssVars\": {\n    \"light\": {\n      \"destructive-foreground\": \"var(--color-red-700)\",\n      \"info\": \"var(--color-blue-500)\",\n      \"info-foreground\": \"var(--color-blue-700)\",\n      \"success\": \"var(--color-emerald-500)\",\n      \"success-foreground\": \"var(--color-emerald-700)\",\n      \"warning\": \"var(--color-amber-500)\",\n      \"warning-foreground\": \"var(--color-amber-700)\"\n    },\n    \"dark\": {\n      \"destructive-foreground\": \"var(--color-red-400)\",\n      \"info\": \"var(--color-blue-500)\",\n      \"info-foreground\": \"var(--color-blue-400)\",\n      \"success\": \"var(--color-emerald-500)\",\n      \"success-foreground\": \"var(--color-emerald-400)\",\n      \"warning\": \"var(--color-amber-500)\",\n      \"warning-foreground\": \"var(--color-amber-400)\"\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/breadcrumb.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"breadcrumb\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/breadcrumb.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { ChevronRight, MoreHorizontal } from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Breadcrumb({\\n  ...props\\n}: React.ComponentProps<\\\"nav\\\">): React.ReactElement {\\n  return <nav aria-label=\\\"breadcrumb\\\" data-slot=\\\"breadcrumb\\\" {...props} />;\\n}\\n\\nexport function BreadcrumbList({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"ol\\\">): React.ReactElement {\\n  return (\\n    <ol\\n      className={cn(\\n        \\\"wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5\\\",\\n        className,\\n      )}\\n      data-slot=\\\"breadcrumb-list\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function BreadcrumbItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"li\\\">): React.ReactElement {\\n  return (\\n    <li\\n      className={cn(\\\"inline-flex items-center gap-1.5\\\", className)}\\n      data-slot=\\\"breadcrumb-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function BreadcrumbLink({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"a\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"transition-colors hover:text-foreground\\\", className),\\n    \\\"data-slot\\\": \\\"breadcrumb-link\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"a\\\",\\n    props: mergeProps<\\\"a\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function BreadcrumbPage({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">): React.ReactElement {\\n  return (\\n    <span\\n      aria-current=\\\"page\\\"\\n      className={cn(\\\"font-normal text-foreground\\\", className)}\\n      data-slot=\\\"breadcrumb-page\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function BreadcrumbSeparator({\\n  children,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"li\\\">): React.ReactElement {\\n  return (\\n    <li\\n      aria-hidden=\\\"true\\\"\\n      className={cn(\\\"opacity-80 [&>svg]:size-4\\\", className)}\\n      data-slot=\\\"breadcrumb-separator\\\"\\n      role=\\\"presentation\\\"\\n      {...props}\\n    >\\n      {children ?? <ChevronRight />}\\n    </li>\\n  );\\n}\\n\\nexport function BreadcrumbEllipsis({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">): React.ReactElement {\\n  return (\\n    <span\\n      aria-hidden=\\\"true\\\"\\n      className={className}\\n      data-slot=\\\"breadcrumb-ellipsis\\\"\\n      role=\\\"presentation\\\"\\n      {...props}\\n    >\\n      <MoreHorizontal className=\\\"size-4\\\" />\\n      <span className=\\\"sr-only\\\">More</span>\\n    </span>\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/button.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"button\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/spinner\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/button.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\n\\nexport const buttonVariants = cva(\\n  \\\"relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-loading:select-none data-loading:text-transparent sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n  {\\n    defaultVariants: {\\n      size: \\\"default\\\",\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      size: {\\n        default: \\\"h-9 px-[calc(--spacing(3)-1px)] sm:h-8\\\",\\n        icon: \\\"size-9 sm:size-8\\\",\\n        \\\"icon-lg\\\": \\\"size-10 sm:size-9\\\",\\n        \\\"icon-sm\\\": \\\"size-8 sm:size-7\\\",\\n        \\\"icon-xl\\\":\\n          \\\"size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5\\\",\\n        \\\"icon-xs\\\":\\n          \\\"size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5\\\",\\n        lg: \\\"h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9\\\",\\n        sm: \\\"h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7\\\",\\n        xl: \\\"h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5\\\",\\n        xs: \\\"h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\\\",\\n      },\\n      variant: {\\n        default:\\n          \\\"not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 data-pressed:bg-primary/90 *:data-[slot=button-loading-indicator]:text-primary-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none\\\",\\n        destructive:\\n          \\\"not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 data-pressed:bg-destructive/90 *:data-[slot=button-loading-indicator]:text-white [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none\\\",\\n        \\\"destructive-outline\\\":\\n          \\\"border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:border-destructive/32 hover:bg-destructive/4 data-pressed:border-destructive/32 data-pressed:bg-destructive/4 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none\\\",\\n        ghost:\\n          \\\"border-transparent text-foreground hover:bg-accent data-pressed:bg-accent *:data-[slot=button-loading-indicator]:text-foreground\\\",\\n        link: \\\"border-transparent text-foreground underline-offset-4 hover:underline data-pressed:underline *:data-[slot=button-loading-indicator]:text-foreground\\\",\\n        outline:\\n          \\\"border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:data-pressed:bg-input/64 dark:hover:bg-input/64 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none\\\",\\n        secondary:\\n          \\\"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 *:data-[slot=button-loading-indicator]:text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport interface ButtonProps extends useRender.ComponentProps<\\\"button\\\"> {\\n  variant?: VariantProps<typeof buttonVariants>[\\\"variant\\\"];\\n  size?: VariantProps<typeof buttonVariants>[\\\"size\\\"];\\n  loading?: boolean;\\n}\\n\\nexport function Button({\\n  className,\\n  variant,\\n  size,\\n  render,\\n  children,\\n  loading = false,\\n  disabled: disabledProp,\\n  ...props\\n}: ButtonProps): React.ReactElement {\\n  const isDisabled: boolean = Boolean(loading || disabledProp);\\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\\\"type\\\"] =\\n    render ? undefined : \\\"button\\\";\\n\\n  const defaultProps = {\\n    children: (\\n      <>\\n        {children}\\n        {loading && (\\n          <Spinner\\n            className=\\\"pointer-events-none absolute\\\"\\n            data-slot=\\\"button-loading-indicator\\\"\\n          />\\n        )}\\n      </>\\n    ),\\n    className: cn(buttonVariants({ className, size, variant })),\\n    \\\"aria-disabled\\\": loading || undefined,\\n    \\\"data-loading\\\": loading ? \\\"\\\" : undefined,\\n    \\\"data-slot\\\": \\\"button\\\",\\n    disabled: isDisabled,\\n    type: typeValue,\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"button\\\",\\n    props: mergeProps<\\\"button\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ],\n  \"cssVars\": {\n    \"light\": {\n      \"destructive-foreground\": \"var(--color-red-700)\"\n    },\n    \"dark\": {\n      \"destructive-foreground\": \"var(--color-red-400)\"\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/calendar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"calendar\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"react-day-picker\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/calendar.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  ChevronsUpDownIcon,\\n} from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\nimport { DayPicker } from \\\"react-day-picker\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nconst buttonClassNames =\\n  \\\"relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\";\\n\\nexport function Calendar({\\n  className,\\n  classNames,\\n  showOutsideDays = true,\\n  components: userComponents,\\n  mode = \\\"single\\\",\\n  ...props\\n}: React.ComponentProps<typeof DayPicker>): React.ReactElement {\\n  const defaultClassNames = {\\n    button_next: buttonClassNames,\\n    button_previous: buttonClassNames,\\n    caption_label:\\n      \\\"text-base sm:text-sm font-medium flex items-center gap-2 h-full\\\",\\n    day: \\\"size-(--cell-size) text-sm py-px\\\",\\n    day_button: cn(\\n      buttonClassNames,\\n      \\\"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50\\\",\\n    ),\\n    dropdown: \\\"absolute bg-popover inset-0 opacity-0\\\",\\n    dropdown_root:\\n      \\\"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1\\\",\\n    dropdowns:\\n      \\\"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium\\\",\\n    hidden: \\\"invisible\\\",\\n    month: \\\"w-full\\\",\\n    month_caption:\\n      \\\"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2\\\",\\n    months: \\\"relative flex flex-col sm:flex-row gap-2\\\",\\n    nav: \\\"absolute top-0 flex w-full justify-between z-1\\\",\\n    outside:\\n      \\\"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\\\",\\n    range_end: \\\"range-end\\\",\\n    range_middle: \\\"range-middle\\\",\\n    range_start: \\\"range-start\\\",\\n    today:\\n      \\\"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors\\\",\\n    week_number:\\n      \\\"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\\\",\\n    weekday:\\n      \\\"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\\\",\\n  };\\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\\n    defaultClassNames,\\n  ).reduce(\\n    (acc, key) => {\\n      const userClass = classNames?.[key as keyof typeof classNames];\\n      const baseClass =\\n        defaultClassNames[key as keyof typeof defaultClassNames];\\n\\n      acc[key as keyof typeof defaultClassNames] = userClass\\n        ? cn(baseClass, userClass)\\n        : baseClass;\\n\\n      return acc;\\n    },\\n    { ...defaultClassNames } as typeof defaultClassNames,\\n  );\\n\\n  const defaultComponents = {\\n    Chevron: ({\\n      className,\\n      orientation,\\n      ...props\\n    }: {\\n      className?: string;\\n      orientation?: \\\"left\\\" | \\\"right\\\" | \\\"up\\\" | \\\"down\\\";\\n    }): React.ReactElement => {\\n      if (orientation === \\\"left\\\") {\\n        return (\\n          <ChevronLeftIcon\\n            className={cn(className, \\\"rtl:rotate-180\\\")}\\n            {...props}\\n            aria-hidden=\\\"true\\\"\\n          />\\n        );\\n      }\\n\\n      if (orientation === \\\"right\\\") {\\n        return (\\n          <ChevronRightIcon\\n            className={cn(className, \\\"rtl:rotate-180\\\")}\\n            {...props}\\n            aria-hidden=\\\"true\\\"\\n          />\\n        );\\n      }\\n\\n      return (\\n        <ChevronsUpDownIcon\\n          className={className}\\n          {...props}\\n          aria-hidden=\\\"true\\\"\\n        />\\n      );\\n    },\\n  };\\n\\n  const mergedComponents = {\\n    ...defaultComponents,\\n    ...userComponents,\\n  };\\n\\n  const dayPickerProps = {\\n    className: cn(\\n      \\\"w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]\\\",\\n      className,\\n    ),\\n    classNames: mergedClassNames,\\n    components: mergedComponents,\\n    \\\"data-slot\\\": \\\"calendar\\\",\\n    formatters: {\\n      formatMonthDropdown: (date: Date) =>\\n        date.toLocaleString(\\\"default\\\", { month: \\\"short\\\" }),\\n    } as React.ComponentProps<typeof DayPicker>[\\\"formatters\\\"],\\n    mode,\\n    showOutsideDays,\\n    ...props,\\n  };\\n\\n  return (\\n    <DayPicker\\n      {...(dayPickerProps as React.ComponentProps<typeof DayPicker>)}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/card.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"card\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/card.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Card({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"card\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardFrame({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] *:data-[slot=card]:-m-px *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"card-frame\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardFrameHeader({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"card-frame-header\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardFrameTitle({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"font-semibold text-sm\\\", className),\\n    \\\"data-slot\\\": \\\"card-frame-title\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardFrameDescription({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"text-muted-foreground text-sm\\\", className),\\n    \\\"data-slot\\\": \\\"card-frame-description\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardFrameAction({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"col-start-2 row-span-2 row-start-1 inline-flex self-center justify-self-end\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"card-frame-action\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardFrameFooter({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"px-6 py-4\\\", className),\\n    \\\"data-slot\\\": \\\"card-frame-footer\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardHeader({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"card-header\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardTitle({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"font-semibold text-lg leading-none\\\", className),\\n    \\\"data-slot\\\": \\\"card-title\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardDescription({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"text-muted-foreground text-sm\\\", className),\\n    \\\"data-slot\\\": \\\"card-description\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardAction({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"card-action\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardPanel({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"card-panel\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function CardFooter({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"card-footer\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport { CardPanel as CardContent };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/checkbox-group.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"checkbox-group\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/checkbox-group.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \\\"@base-ui/react/checkbox-group\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function CheckboxGroup({\\n  className,\\n  ...props\\n}: CheckboxGroupPrimitive.Props): React.ReactElement {\\n  return (\\n    <CheckboxGroupPrimitive\\n      className={cn(\\\"flex flex-col items-start gap-3\\\", className)}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { CheckboxGroupPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/checkbox.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"checkbox\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/checkbox.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Checkbox as CheckboxPrimitive } from \\\"@base-ui/react/checkbox\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Checkbox({\\n  className,\\n  ...props\\n}: CheckboxPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <CheckboxPrimitive.Root\\n      className={cn(\\n        \\\"relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[.25rem] border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none\\\",\\n        className,\\n      )}\\n      data-slot=\\\"checkbox\\\"\\n      {...props}\\n    >\\n      <CheckboxPrimitive.Indicator\\n        className=\\\"absolute -inset-px flex items-center justify-center rounded-[.25rem] text-primary-foreground data-unchecked:hidden data-checked:bg-primary data-indeterminate:text-foreground\\\"\\n        data-slot=\\\"checkbox-indicator\\\"\\n        render={(\\n          props: React.ComponentProps<\\\"span\\\">,\\n          state: CheckboxPrimitive.Indicator.State,\\n        ) => (\\n          <span {...props}>\\n            {state.indeterminate ? (\\n              <svg\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-3.5 sm:size-3\\\"\\n                fill=\\\"none\\\"\\n                height=\\\"24\\\"\\n                stroke=\\\"currentColor\\\"\\n                strokeLinecap=\\\"round\\\"\\n                strokeLinejoin=\\\"round\\\"\\n                strokeWidth=\\\"3\\\"\\n                viewBox=\\\"0 0 24 24\\\"\\n                width=\\\"24\\\"\\n                xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n              >\\n                <path d=\\\"M5.252 12h13.496\\\" />\\n              </svg>\\n            ) : (\\n              <svg\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-3.5 sm:size-3\\\"\\n                fill=\\\"none\\\"\\n                height=\\\"24\\\"\\n                stroke=\\\"currentColor\\\"\\n                strokeLinecap=\\\"round\\\"\\n                strokeLinejoin=\\\"round\\\"\\n                strokeWidth=\\\"3\\\"\\n                viewBox=\\\"0 0 24 24\\\"\\n                width=\\\"24\\\"\\n                xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n              >\\n                <path d=\\\"M5.252 12.7 10.2 18.63 18.748 5.37\\\" />\\n              </svg>\\n            )}\\n          </span>\\n        )}\\n      />\\n    </CheckboxPrimitive.Root>\\n  );\\n}\\n\\nexport { CheckboxPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/collapsible.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"collapsible\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/collapsible.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Collapsible as CollapsiblePrimitive } from \\\"@base-ui/react/collapsible\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Collapsible({\\n  ...props\\n}: CollapsiblePrimitive.Root.Props): React.ReactElement {\\n  return <CollapsiblePrimitive.Root data-slot=\\\"collapsible\\\" {...props} />;\\n}\\n\\nexport function CollapsibleTrigger({\\n  className,\\n  ...props\\n}: CollapsiblePrimitive.Trigger.Props): React.ReactElement {\\n  return (\\n    <CollapsiblePrimitive.Trigger\\n      className={cn(\\\"cursor-pointer\\\", className)}\\n      data-slot=\\\"collapsible-trigger\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CollapsiblePanel({\\n  className,\\n  ...props\\n}: CollapsiblePrimitive.Panel.Props): React.ReactElement {\\n  return (\\n    <CollapsiblePrimitive.Panel\\n      className={cn(\\n        \\\"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"collapsible-panel\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { CollapsiblePrimitive, CollapsiblePanel as CollapsibleContent };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/colors-neutral.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"colors-neutral\",\n  \"type\": \"registry:style\",\n  \"cssVars\": {\n    \"light\": {\n      \"accent\": \"--alpha(var(--color-black) / 4%)\",\n      \"accent-foreground\": \"var(--color-neutral-800)\",\n      \"background\": \"var(--color-white)\",\n      \"border\": \"--alpha(var(--color-black) / 8%)\",\n      \"card\": \"var(--color-white)\",\n      \"card-foreground\": \"var(--color-neutral-800)\",\n      \"destructive\": \"var(--color-red-500)\",\n      \"destructive-foreground\": \"var(--color-red-700)\",\n      \"foreground\": \"var(--color-neutral-800)\",\n      \"info\": \"var(--color-blue-500)\",\n      \"info-foreground\": \"var(--color-blue-700)\",\n      \"input\": \"--alpha(var(--color-black) / 10%)\",\n      \"muted\": \"--alpha(var(--color-black) / 4%)\",\n      \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black))\",\n      \"popover\": \"var(--color-white)\",\n      \"popover-foreground\": \"var(--color-neutral-800)\",\n      \"primary\": \"var(--color-neutral-800)\",\n      \"primary-foreground\": \"var(--color-neutral-50)\",\n      \"ring\": \"var(--color-neutral-400)\",\n      \"secondary\": \"--alpha(var(--color-black) / 4%)\",\n      \"secondary-foreground\": \"var(--color-neutral-800)\",\n      \"success\": \"var(--color-emerald-500)\",\n      \"success-foreground\": \"var(--color-emerald-700)\",\n      \"warning\": \"var(--color-amber-500)\",\n      \"warning-foreground\": \"var(--color-amber-700)\"\n    },\n    \"dark\": {\n      \"accent\": \"--alpha(var(--color-white) / 4%)\",\n      \"accent-foreground\": \"var(--color-neutral-100)\",\n      \"background\": \"color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white))\",\n      \"border\": \"--alpha(var(--color-white) / 6%)\",\n      \"card\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n      \"card-foreground\": \"var(--color-neutral-100)\",\n      \"destructive\": \"color-mix(in srgb, var(--color-red-500) 90%, var(--color-white))\",\n      \"destructive-foreground\": \"var(--color-red-400)\",\n      \"foreground\": \"var(--color-neutral-100)\",\n      \"info\": \"var(--color-blue-500)\",\n      \"info-foreground\": \"var(--color-blue-400)\",\n      \"input\": \"--alpha(var(--color-white) / 8%)\",\n      \"muted\": \"--alpha(var(--color-white) / 4%)\",\n      \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white))\",\n      \"popover\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n      \"popover-foreground\": \"var(--color-neutral-100)\",\n      \"primary\": \"var(--color-neutral-100)\",\n      \"primary-foreground\": \"var(--color-neutral-800)\",\n      \"ring\": \"var(--color-neutral-500)\",\n      \"secondary\": \"--alpha(var(--color-white) / 4%)\",\n      \"secondary-foreground\": \"var(--color-neutral-100)\",\n      \"success\": \"var(--color-emerald-500)\",\n      \"success-foreground\": \"var(--color-emerald-400)\",\n      \"warning\": \"var(--color-amber-500)\",\n      \"warning-foreground\": \"var(--color-amber-400)\"\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/combobox.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"combobox\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/input\",\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/combobox.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Combobox as ComboboxPrimitive } from \\\"@base-ui/react/combobox\\\";\\nimport { ChevronsUpDownIcon, XIcon } from \\\"lucide-react\\\";\\nimport * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport const ComboboxContext: React.Context<{\\n  chipsRef: React.RefObject<Element | null> | null;\\n  multiple: boolean;\\n}> = React.createContext<{\\n  chipsRef: React.RefObject<Element | null> | null;\\n  multiple: boolean;\\n}>({\\n  chipsRef: null,\\n  multiple: false,\\n});\\n\\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\\n): React.ReactElement {\\n  const chipsRef = React.useRef<Element | null>(null);\\n  return (\\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\\n      <ComboboxPrimitive.Root {...props} />\\n    </ComboboxContext.Provider>\\n  );\\n}\\n\\nexport function ComboboxChipsInput({\\n  className,\\n  size,\\n  ...props\\n}: Omit<ComboboxPrimitive.Input.Props, \\\"size\\\"> & {\\n  size?: \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\" | number;\\n  ref?: React.Ref<HTMLInputElement>;\\n}): React.ReactElement {\\n  const sizeValue = (size ?? \\\"default\\\") as \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\" | number;\\n\\n  return (\\n    <ComboboxPrimitive.Input\\n      className={cn(\\n        \\\"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\\\",\\n        sizeValue === \\\"sm\\\" ? \\\"ps-1.5\\\" : \\\"ps-2\\\",\\n        className,\\n      )}\\n      data-size={typeof sizeValue === \\\"string\\\" ? sizeValue : undefined}\\n      data-slot=\\\"combobox-chips-input\\\"\\n      size={typeof sizeValue === \\\"number\\\" ? sizeValue : undefined}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ComboboxInput({\\n  className,\\n  showTrigger = true,\\n  showClear = false,\\n  startAddon,\\n  size,\\n  triggerProps,\\n  clearProps,\\n  ...props\\n}: Omit<ComboboxPrimitive.Input.Props, \\\"size\\\"> & {\\n  showTrigger?: boolean;\\n  showClear?: boolean;\\n  startAddon?: React.ReactNode;\\n  size?: \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\" | number;\\n  ref?: React.Ref<HTMLInputElement>;\\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\\n  clearProps?: ComboboxPrimitive.Clear.Props;\\n}): React.ReactElement {\\n  const sizeValue = (size ?? \\\"default\\\") as \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\" | number;\\n\\n  return (\\n    <ComboboxPrimitive.InputGroup\\n      className=\\\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\\\"\\n      data-slot=\\\"combobox-input-group\\\"\\n    >\\n      {startAddon && (\\n        <div\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\\\"\\n          data-slot=\\\"combobox-start-addon\\\"\\n        >\\n          {startAddon}\\n        </div>\\n      )}\\n      <ComboboxPrimitive.Input\\n        className={cn(\\n          startAddon &&\\n            \\\"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\\\",\\n          sizeValue === \\\"sm\\\"\\n            ? \\\"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\\\"\\n            : \\\"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\\\",\\n          className,\\n        )}\\n        data-slot=\\\"combobox-input\\\"\\n        render={\\n          <Input\\n            className=\\\"has-disabled:opacity-100\\\"\\n            nativeInput\\n            size={sizeValue}\\n          />\\n        }\\n        {...props}\\n      />\\n      {showTrigger && (\\n        <ComboboxTrigger\\n          className={cn(\\n            \\\"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n            sizeValue === \\\"sm\\\" ? \\\"end-0\\\" : \\\"end-0.5\\\",\\n          )}\\n          {...triggerProps}\\n        >\\n          <ComboboxPrimitive.Icon data-slot=\\\"combobox-icon\\\">\\n            <ChevronsUpDownIcon />\\n          </ComboboxPrimitive.Icon>\\n        </ComboboxTrigger>\\n      )}\\n      {showClear && (\\n        <ComboboxClear\\n          className={cn(\\n            \\\"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n            sizeValue === \\\"sm\\\" ? \\\"end-0\\\" : \\\"end-0.5\\\",\\n          )}\\n          {...clearProps}\\n        >\\n          <XIcon />\\n        </ComboboxClear>\\n      )}\\n    </ComboboxPrimitive.InputGroup>\\n  );\\n}\\n\\nexport function ComboboxTrigger({\\n  className,\\n  children,\\n  ...props\\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Trigger\\n      className={className}\\n      data-slot=\\\"combobox-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n    </ComboboxPrimitive.Trigger>\\n  );\\n}\\n\\nexport function ComboboxPopup({\\n  className,\\n  children,\\n  side = \\\"bottom\\\",\\n  sideOffset = 4,\\n  alignOffset,\\n  align = \\\"start\\\",\\n  anchor: anchorProp,\\n  ...props\\n}: ComboboxPrimitive.Popup.Props & {\\n  align?: ComboboxPrimitive.Positioner.Props[\\\"align\\\"];\\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\\\"sideOffset\\\"];\\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\\\"alignOffset\\\"];\\n  side?: ComboboxPrimitive.Positioner.Props[\\\"side\\\"];\\n  anchor?: ComboboxPrimitive.Positioner.Props[\\\"anchor\\\"];\\n}): React.ReactElement {\\n  const { chipsRef } = React.useContext(ComboboxContext);\\n  const anchor = anchorProp ?? chipsRef;\\n\\n  return (\\n    <ComboboxPrimitive.Portal>\\n      <ComboboxPrimitive.Positioner\\n        align={align}\\n        alignOffset={alignOffset}\\n        anchor={anchor}\\n        className=\\\"z-50 select-none\\\"\\n        data-slot=\\\"combobox-positioner\\\"\\n        side={side}\\n        sideOffset={sideOffset}\\n      >\\n        <span\\n          className={cn(\\n            \\\"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            className,\\n          )}\\n        >\\n          <ComboboxPrimitive.Popup\\n            className=\\\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\\\"\\n            data-slot=\\\"combobox-popup\\\"\\n            {...props}\\n          >\\n            {children}\\n          </ComboboxPrimitive.Popup>\\n        </span>\\n      </ComboboxPrimitive.Positioner>\\n    </ComboboxPrimitive.Portal>\\n  );\\n}\\n\\nexport function ComboboxItem({\\n  className,\\n  children,\\n  ...props\\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Item\\n      className={cn(\\n        \\\"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"combobox-item\\\"\\n      {...props}\\n    >\\n      <ComboboxPrimitive.ItemIndicator className=\\\"col-start-1\\\">\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          fill=\\\"none\\\"\\n          height=\\\"24\\\"\\n          stroke=\\\"currentColor\\\"\\n          strokeLinecap=\\\"round\\\"\\n          strokeLinejoin=\\\"round\\\"\\n          strokeWidth=\\\"2\\\"\\n          viewBox=\\\"0 0 24 24\\\"\\n          width=\\\"24\\\"\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <path d=\\\"M5.252 12.7 10.2 18.63 18.748 5.37\\\" />\\n        </svg>\\n      </ComboboxPrimitive.ItemIndicator>\\n      <div className=\\\"col-start-2\\\">{children}</div>\\n    </ComboboxPrimitive.Item>\\n  );\\n}\\n\\nexport function ComboboxSeparator({\\n  className,\\n  ...props\\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Separator\\n      className={cn(\\\"mx-2 my-1 h-px bg-border last:hidden\\\", className)}\\n      data-slot=\\\"combobox-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ComboboxGroup({\\n  className,\\n  ...props\\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Group\\n      className={cn(\\\"[[role=group]+&]:mt-1.5\\\", className)}\\n      data-slot=\\\"combobox-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ComboboxGroupLabel({\\n  className,\\n  ...props\\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.GroupLabel\\n      className={cn(\\n        \\\"px-2 py-1.5 font-medium text-muted-foreground text-xs\\\",\\n        className,\\n      )}\\n      data-slot=\\\"combobox-group-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ComboboxEmpty({\\n  className,\\n  ...props\\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Empty\\n      className={cn(\\n        \\\"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\\\",\\n        className,\\n      )}\\n      data-slot=\\\"combobox-empty\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ComboboxRow({\\n  className,\\n  ...props\\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Row\\n      className={className}\\n      data-slot=\\\"combobox-row\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ComboboxValue({\\n  ...props\\n}: ComboboxPrimitive.Value.Props): React.ReactElement {\\n  return <ComboboxPrimitive.Value data-slot=\\\"combobox-value\\\" {...props} />;\\n}\\n\\nexport function ComboboxList({\\n  className,\\n  ...props\\n}: ComboboxPrimitive.List.Props): React.ReactElement {\\n  return (\\n    <ScrollArea scrollbarGutter scrollFade>\\n      <ComboboxPrimitive.List\\n        className={cn(\\n          \\\"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\\\",\\n          className,\\n        )}\\n        data-slot=\\\"combobox-list\\\"\\n        {...props}\\n      />\\n    </ScrollArea>\\n  );\\n}\\n\\nexport function ComboboxClear({\\n  className,\\n  ...props\\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Clear\\n      className={className}\\n      data-slot=\\\"combobox-clear\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ComboboxStatus({\\n  className,\\n  ...props\\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Status\\n      className={cn(\\n        \\\"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"combobox-status\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ComboboxCollection(\\n  props: ComboboxPrimitive.Collection.Props,\\n): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Collection data-slot=\\\"combobox-collection\\\" {...props} />\\n  );\\n}\\n\\nexport function ComboboxChips({\\n  className,\\n  children,\\n  startAddon,\\n  ...props\\n}: ComboboxPrimitive.Chips.Props & {\\n  startAddon?: React.ReactNode;\\n}): React.ReactElement {\\n  const { chipsRef } = React.useContext(ComboboxContext);\\n\\n  return (\\n    <ComboboxPrimitive.Chips\\n      className={cn(\\n        \\\"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n        className,\\n      )}\\n      data-slot=\\\"combobox-chips\\\"\\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\\n      {...props}\\n    >\\n      {startAddon && (\\n        <div\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\\\"\\n          data-slot=\\\"combobox-start-addon\\\"\\n        >\\n          {startAddon}\\n        </div>\\n      )}\\n      {children}\\n    </ComboboxPrimitive.Chips>\\n  );\\n}\\n\\nexport function ComboboxChip({\\n  children,\\n  removeProps,\\n  ...props\\n}: ComboboxPrimitive.Chip.Props & {\\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\\n}): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.Chip\\n      className=\\\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\\\"\\n      data-slot=\\\"combobox-chip\\\"\\n      {...props}\\n    >\\n      {children}\\n      <ComboboxChipRemove {...removeProps} />\\n    </ComboboxPrimitive.Chip>\\n  );\\n}\\n\\nexport function ComboboxChipRemove(\\n  props: ComboboxPrimitive.ChipRemove.Props,\\n): React.ReactElement {\\n  return (\\n    <ComboboxPrimitive.ChipRemove\\n      aria-label=\\\"Remove\\\"\\n      className=\\\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\\\"\\n      data-slot=\\\"combobox-chip-remove\\\"\\n      {...props}\\n    >\\n      <XIcon />\\n    </ComboboxPrimitive.ChipRemove>\\n  );\\n}\\n\\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\\n  ComboboxPrimitive.useFilter;\\n\\nexport { ComboboxPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/command.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"command\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/command.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Dialog as CommandDialogPrimitive } from \\\"@base-ui/react/dialog\\\";\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport {\\n  Autocomplete,\\n  AutocompleteCollection,\\n  AutocompleteEmpty,\\n  AutocompleteGroup,\\n  AutocompleteGroupLabel,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompleteSeparator,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\\n  CommandDialogPrimitive.Root;\\n\\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\\n  CommandDialogPrimitive.Portal;\\n\\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\\n  CommandDialogPrimitive.createHandle;\\n\\nexport function CommandDialogTrigger(\\n  props: CommandDialogPrimitive.Trigger.Props,\\n): React.ReactElement {\\n  return (\\n    <CommandDialogPrimitive.Trigger\\n      data-slot=\\\"command-dialog-trigger\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandDialogBackdrop({\\n  className,\\n  ...props\\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\\n  return (\\n    <CommandDialogPrimitive.Backdrop\\n      className={cn(\\n        \\\"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command-dialog-backdrop\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandDialogViewport({\\n  className,\\n  ...props\\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\\n  return (\\n    <CommandDialogPrimitive.Viewport\\n      className={cn(\\n        \\\"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command-dialog-viewport\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandDialogPopup({\\n  className,\\n  children,\\n  ...props\\n}: CommandDialogPrimitive.Popup.Props): React.ReactElement {\\n  return (\\n    <CommandDialogPortal>\\n      <CommandDialogBackdrop />\\n      <CommandDialogViewport>\\n        <CommandDialogPrimitive.Popup\\n          className={cn(\\n            \\\"relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            className,\\n          )}\\n          data-slot=\\\"command-dialog-popup\\\"\\n          {...props}\\n        >\\n          {children}\\n        </CommandDialogPrimitive.Popup>\\n      </CommandDialogViewport>\\n    </CommandDialogPortal>\\n  );\\n}\\n\\nexport function Command({\\n  autoHighlight = \\\"always\\\",\\n  keepHighlight = true,\\n  ...props\\n}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {\\n  return (\\n    <Autocomplete\\n      autoHighlight={autoHighlight}\\n      inline\\n      keepHighlight={keepHighlight}\\n      open\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandInput({\\n  className,\\n  placeholder = undefined,\\n  ...props\\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\\n  return (\\n    <div className=\\\"px-2.5 py-1.5\\\">\\n      <AutocompleteInput\\n        autoFocus\\n        className={cn(\\n          \\\"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\\\",\\n          className,\\n        )}\\n        placeholder={placeholder}\\n        size=\\\"lg\\\"\\n        startAddon={<SearchIcon />}\\n        {...props}\\n      />\\n    </div>\\n  );\\n}\\n\\nexport function CommandList({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\\n  return (\\n    <AutocompleteList\\n      className={cn(\\\"not-empty:scroll-py-2 not-empty:p-2\\\", className)}\\n      data-slot=\\\"command-list\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandEmpty({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\\n  return (\\n    <AutocompleteEmpty\\n      className={cn(\\\"not-empty:py-6\\\", className)}\\n      data-slot=\\\"command-empty\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandPanel({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className=\\\"relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandGroup({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\\n  return (\\n    <AutocompleteGroup\\n      className={className}\\n      data-slot=\\\"command-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandGroupLabel({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\\n  return (\\n    <AutocompleteGroupLabel\\n      className={className}\\n      data-slot=\\\"command-group-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandCollection({\\n  ...props\\n}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {\\n  return <AutocompleteCollection data-slot=\\\"command-collection\\\" {...props} />;\\n}\\n\\nexport function CommandItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\\n  return (\\n    <AutocompleteItem\\n      className={cn(\\\"py-1.5\\\", className)}\\n      data-slot=\\\"command-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\\n  return (\\n    <AutocompleteSeparator\\n      className={cn(\\\"my-2\\\", className)}\\n      data-slot=\\\"command-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandShortcut({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"kbd\\\">): React.ReactElement {\\n  return (\\n    <kbd\\n      className={cn(\\n        \\\"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command-shortcut\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function CommandFooter({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs\\\",\\n        className,\\n      )}\\n      data-slot=\\\"command-footer\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { CommandDialogPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/csp-provider.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"csp-provider\",\n  \"type\": \"registry:lib\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/base-ui/csp-provider.ts\",\n      \"content\": \"export { CSPProvider } from \\\"@base-ui/react/csp-provider\\\";\\n\",\n      \"type\": \"registry:lib\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/dialog.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"dialog\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/dialog.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Dialog as DialogPrimitive } from \\\"@base-ui/react/dialog\\\";\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\\n  DialogPrimitive.createHandle;\\n\\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\\n\\nexport const DialogPortal: typeof DialogPrimitive.Portal =\\n  DialogPrimitive.Portal;\\n\\nexport function DialogTrigger(\\n  props: DialogPrimitive.Trigger.Props,\\n): React.ReactElement {\\n  return <DialogPrimitive.Trigger data-slot=\\\"dialog-trigger\\\" {...props} />;\\n}\\n\\nexport function DialogClose(\\n  props: DialogPrimitive.Close.Props,\\n): React.ReactElement {\\n  return <DialogPrimitive.Close data-slot=\\\"dialog-close\\\" {...props} />;\\n}\\n\\nexport function DialogBackdrop({\\n  className,\\n  ...props\\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\\n  return (\\n    <DialogPrimitive.Backdrop\\n      className={cn(\\n        \\\"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"dialog-backdrop\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DialogViewport({\\n  className,\\n  ...props\\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\\n  return (\\n    <DialogPrimitive.Viewport\\n      className={cn(\\n        \\\"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\\\",\\n        className,\\n      )}\\n      data-slot=\\\"dialog-viewport\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DialogPopup({\\n  className,\\n  children,\\n  showCloseButton = true,\\n  bottomStickOnMobile = true,\\n  closeProps,\\n  ...props\\n}: DialogPrimitive.Popup.Props & {\\n  showCloseButton?: boolean;\\n  bottomStickOnMobile?: boolean;\\n  closeProps?: DialogPrimitive.Close.Props;\\n}): React.ReactElement {\\n  return (\\n    <DialogPortal>\\n      <DialogBackdrop />\\n      <DialogViewport\\n        className={cn(\\n          bottomStickOnMobile &&\\n            \\\"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\\\",\\n        )}\\n      >\\n        <DialogPrimitive.Popup\\n          className={cn(\\n            \\\"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            bottomStickOnMobile &&\\n              \\\"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\\\",\\n            className,\\n          )}\\n          data-slot=\\\"dialog-popup\\\"\\n          {...props}\\n        >\\n          {children}\\n          {showCloseButton && (\\n            <DialogPrimitive.Close\\n              aria-label=\\\"Close\\\"\\n              className=\\\"absolute end-2 top-2\\\"\\n              render={<Button size=\\\"icon\\\" variant=\\\"ghost\\\" />}\\n              {...closeProps}\\n            >\\n              <XIcon />\\n            </DialogPrimitive.Close>\\n          )}\\n        </DialogPrimitive.Popup>\\n      </DialogViewport>\\n    </DialogPortal>\\n  );\\n}\\n\\nexport function DialogHeader({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"dialog-header\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function DialogFooter({\\n  className,\\n  variant = \\\"default\\\",\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\"> & {\\n  variant?: \\\"default\\\" | \\\"bare\\\";\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\\\",\\n      variant === \\\"default\\\" && \\\"border-t bg-muted/72 py-4\\\",\\n      variant === \\\"bare\\\" &&\\n        \\\"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"dialog-footer\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function DialogTitle({\\n  className,\\n  ...props\\n}: DialogPrimitive.Title.Props): React.ReactElement {\\n  return (\\n    <DialogPrimitive.Title\\n      className={cn(\\n        \\\"font-heading font-semibold text-xl leading-none\\\",\\n        className,\\n      )}\\n      data-slot=\\\"dialog-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DialogDescription({\\n  className,\\n  ...props\\n}: DialogPrimitive.Description.Props): React.ReactElement {\\n  return (\\n    <DialogPrimitive.Description\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"dialog-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DialogPanel({\\n  className,\\n  scrollFade = true,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\"> & {\\n  scrollFade?: boolean;\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"dialog-panel\\\",\\n  };\\n\\n  return (\\n    <ScrollArea scrollFade={scrollFade}>\\n      {useRender({\\n        defaultTagName: \\\"div\\\",\\n        props: mergeProps<\\\"div\\\">(defaultProps, props),\\n        render,\\n      })}\\n    </ScrollArea>\\n  );\\n}\\n\\nexport {\\n  DialogPrimitive,\\n  DialogBackdrop as DialogOverlay,\\n  DialogPopup as DialogContent,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/direction-provider.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"direction-provider\",\n  \"type\": \"registry:lib\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/base-ui/direction-provider.ts\",\n      \"content\": \"export {\\n  DirectionProvider,\\n  useDirection,\\n} from \\\"@base-ui/react/direction-provider\\\";\\n\",\n      \"type\": \"registry:lib\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/drawer.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"drawer\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/drawer.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Checkbox as CheckboxPrimitive } from \\\"@base-ui/react/checkbox\\\";\\nimport { Drawer as DrawerPrimitive } from \\\"@base-ui/react/drawer\\\";\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { Radio as RadioPrimitive } from \\\"@base-ui/react/radio\\\";\\nimport { RadioGroup as RadioGroupPrimitive } from \\\"@base-ui/react/radio-group\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { ChevronRightIcon, XIcon } from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { createContext, useContext } from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\ntype DrawerPosition = \\\"right\\\" | \\\"left\\\" | \\\"top\\\" | \\\"bottom\\\";\\n\\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\\n  createContext<{ position: DrawerPosition }>({\\n    position: \\\"bottom\\\",\\n  });\\n\\nconst directionMap: Record<\\n  DrawerPosition,\\n  DrawerPrimitive.Root.Props[\\\"swipeDirection\\\"]\\n> = {\\n  bottom: \\\"down\\\",\\n  left: \\\"left\\\",\\n  right: \\\"right\\\",\\n  top: \\\"up\\\",\\n};\\n\\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\\n  DrawerPrimitive.createHandle;\\n\\nexport function Drawer({\\n  swipeDirection,\\n  position = \\\"bottom\\\",\\n  ...props\\n}: DrawerPrimitive.Root.Props & {\\n  position?: DrawerPosition;\\n}): React.ReactElement {\\n  return (\\n    <DrawerContext.Provider value={{ position }}>\\n      <DrawerPrimitive.Root\\n        swipeDirection={swipeDirection ?? directionMap[position]}\\n        {...props}\\n      />\\n    </DrawerContext.Provider>\\n  );\\n}\\n\\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\\n  DrawerPrimitive.Portal;\\n\\nexport function DrawerTrigger(\\n  props: DrawerPrimitive.Trigger.Props,\\n): React.ReactElement {\\n  return <DrawerPrimitive.Trigger data-slot=\\\"drawer-trigger\\\" {...props} />;\\n}\\n\\nexport function DrawerClose(\\n  props: DrawerPrimitive.Close.Props,\\n): React.ReactElement {\\n  return <DrawerPrimitive.Close data-slot=\\\"drawer-close\\\" {...props} />;\\n}\\n\\nexport function DrawerSwipeArea({\\n  className,\\n  position: positionProp,\\n  ...props\\n}: DrawerPrimitive.SwipeArea.Props & {\\n  position?: DrawerPosition;\\n}): React.ReactElement {\\n  const { position: contextPosition } = useContext(DrawerContext);\\n  const position = positionProp ?? contextPosition;\\n\\n  return (\\n    <DrawerPrimitive.SwipeArea\\n      className={cn(\\n        \\\"fixed z-50 touch-none\\\",\\n        position === \\\"bottom\\\" && \\\"inset-x-0 bottom-0 h-8\\\",\\n        position === \\\"top\\\" && \\\"inset-x-0 top-0 h-8\\\",\\n        position === \\\"left\\\" && \\\"inset-y-0 left-0 w-8\\\",\\n        position === \\\"right\\\" && \\\"inset-y-0 right-0 w-8\\\",\\n        className,\\n      )}\\n      data-slot=\\\"drawer-swipe-area\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DrawerBackdrop({\\n  className,\\n  ...props\\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\\n  return (\\n    <DrawerPrimitive.Backdrop\\n      className={cn(\\n        \\\"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\\\",\\n        className,\\n      )}\\n      data-slot=\\\"drawer-backdrop\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DrawerViewport({\\n  className,\\n  position,\\n  variant = \\\"default\\\",\\n  ...props\\n}: DrawerPrimitive.Viewport.Props & {\\n  position?: DrawerPosition;\\n  variant?: \\\"default\\\" | \\\"straight\\\" | \\\"inset\\\";\\n}): React.ReactElement {\\n  return (\\n    <DrawerPrimitive.Viewport\\n      className={cn(\\n        \\\"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]\\\",\\n        \\\"touch-none\\\",\\n        position === \\\"bottom\\\" && \\\"grid grid-rows-[1fr_auto] pt-12\\\",\\n        position === \\\"top\\\" && \\\"grid grid-rows-[auto_1fr] pb-12\\\",\\n        position === \\\"left\\\" && \\\"flex justify-start\\\",\\n        position === \\\"right\\\" && \\\"flex justify-end\\\",\\n        variant === \\\"inset\\\" && \\\"px-(--inset) sm:[--inset:--spacing(4)]\\\",\\n        variant === \\\"inset\\\" && position !== \\\"bottom\\\" && \\\"pt-(--inset)\\\",\\n        variant === \\\"inset\\\" && position !== \\\"top\\\" && \\\"pb-(--inset)\\\",\\n      )}\\n      data-slot=\\\"drawer-viewport\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DrawerPopup({\\n  className,\\n  children,\\n  showCloseButton = false,\\n  position: positionProp,\\n  variant = \\\"default\\\",\\n  showBar = false,\\n  ...props\\n}: DrawerPrimitive.Popup.Props & {\\n  showCloseButton?: boolean;\\n  position?: DrawerPosition;\\n  variant?: \\\"default\\\" | \\\"straight\\\" | \\\"inset\\\";\\n  showBar?: boolean;\\n}): React.ReactElement {\\n  const { position: contextPosition } = useContext(DrawerContext);\\n  const position = positionProp ?? contextPosition;\\n\\n  return (\\n    <DrawerPortal>\\n      <DrawerBackdrop />\\n      <DrawerViewport position={position} variant={variant}>\\n        <DrawerPrimitive.Popup\\n          className={cn(\\n            \\\"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            \\\"touch-none\\\",\\n            position === \\\"bottom\\\" &&\\n              \\\"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\\\",\\n            position === \\\"top\\\" &&\\n              \\\"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\\\",\\n            position === \\\"left\\\" &&\\n              \\\"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\\\",\\n            position === \\\"right\\\" &&\\n              \\\"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\\\",\\n            variant !== \\\"straight\\\" &&\\n              cn(\\n                position === \\\"bottom\\\" && \\\"rounded-t-2xl\\\",\\n                position === \\\"top\\\" &&\\n                  \\\"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\\\",\\n                position === \\\"left\\\" &&\\n                  \\\"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\\\",\\n                position === \\\"right\\\" &&\\n                  \\\"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\\\",\\n              ),\\n            variant === \\\"default\\\" &&\\n              cn(\\n                position === \\\"bottom\\\" &&\\n                  \\\"before:rounded-t-[calc(var(--radius-2xl)-1px)]\\\",\\n                position === \\\"top\\\" &&\\n                  \\\"before:rounded-b-[calc(var(--radius-2xl)-1px)]\\\",\\n                position === \\\"left\\\" &&\\n                  \\\"before:rounded-e-[calc(var(--radius-2xl)-1px)]\\\",\\n                position === \\\"right\\\" &&\\n                  \\\"before:rounded-s-[calc(var(--radius-2xl)-1px)]\\\",\\n              ),\\n            variant === \\\"inset\\\" &&\\n              \\\"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\\\",\\n            variant === \\\"straight\\\" && \\\"[--stack-step:0]\\\",\\n            (position === \\\"bottom\\\" || position === \\\"top\\\") &&\\n              \\\"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\\\",\\n            position === \\\"bottom\\\" &&\\n              \\\"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\\\",\\n            position === \\\"top\\\" &&\\n              \\\"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\\\",\\n            position === \\\"left\\\" &&\\n              \\\"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\\\",\\n            position === \\\"right\\\" &&\\n              \\\"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\\\",\\n            className,\\n          )}\\n          data-slot=\\\"drawer-popup\\\"\\n          {...props}\\n        >\\n          {children}\\n          {showCloseButton && (\\n            <DrawerPrimitive.Close\\n              aria-label=\\\"Close\\\"\\n              className=\\\"absolute end-2 top-2\\\"\\n              render={<Button size=\\\"icon\\\" variant=\\\"ghost\\\" />}\\n            >\\n              <XIcon />\\n            </DrawerPrimitive.Close>\\n          )}\\n          {showBar && <DrawerBar />}\\n        </DrawerPrimitive.Popup>\\n      </DrawerViewport>\\n    </DrawerPortal>\\n  );\\n}\\n\\nexport function DrawerHeader({\\n  className,\\n  allowSelection = false,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\"> & {\\n  allowSelection?: boolean;\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\\\",\\n      !allowSelection && \\\"cursor-default\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"drawer-header\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render: allowSelection ? <DrawerContent render={render} /> : render,\\n  });\\n}\\n\\nexport function DrawerFooter({\\n  className,\\n  variant = \\\"default\\\",\\n  allowSelection = true,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\"> & {\\n  variant?: \\\"default\\\" | \\\"bare\\\";\\n  allowSelection?: boolean;\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\\\",\\n      !allowSelection && \\\"cursor-default\\\",\\n      variant === \\\"default\\\" &&\\n        \\\"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\\\",\\n      variant === \\\"bare\\\" &&\\n        \\\"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"drawer-footer\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render: allowSelection ? <DrawerContent render={render} /> : render,\\n  });\\n}\\n\\nexport function DrawerTitle({\\n  className,\\n  ...props\\n}: DrawerPrimitive.Title.Props): React.ReactElement {\\n  return (\\n    <DrawerPrimitive.Title\\n      className={cn(\\n        \\\"font-heading font-semibold text-xl leading-none\\\",\\n        className,\\n      )}\\n      data-slot=\\\"drawer-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DrawerDescription({\\n  className,\\n  ...props\\n}: DrawerPrimitive.Description.Props): React.ReactElement {\\n  return (\\n    <DrawerPrimitive.Description\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"drawer-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DrawerPanel({\\n  className,\\n  scrollFade = true,\\n  scrollable = true,\\n  allowSelection = true,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\"> & {\\n  scrollFade?: boolean;\\n  scrollable?: boolean;\\n  allowSelection?: boolean;\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\\\",\\n      !allowSelection && \\\"cursor-default\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"drawer-panel\\\",\\n  };\\n\\n  const content = useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render: allowSelection ? <DrawerContent render={render} /> : render,\\n  });\\n\\n  if (scrollable) {\\n    return (\\n      <ScrollArea className=\\\"touch-auto\\\" scrollFade={scrollFade}>\\n        {content}\\n      </ScrollArea>\\n    );\\n  }\\n\\n  return content;\\n}\\n\\nexport function DrawerBar({\\n  className,\\n  position: positionProp,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\"> & {\\n  position?: DrawerPosition;\\n}): React.ReactElement {\\n  const { position: contextPosition } = useContext(DrawerContext);\\n  const position = positionProp ?? contextPosition;\\n  const horizontal = position === \\\"left\\\" || position === \\\"right\\\";\\n  const defaultProps = {\\n    \\\"aria-hidden\\\": true as const,\\n    className: cn(\\n      \\\"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\\\",\\n      horizontal\\n        ? \\\"inset-y-0 before:h-12 before:w-1\\\"\\n        : \\\"inset-x-0 before:h-1 before:w-12\\\",\\n      position === \\\"top\\\" && \\\"bottom-0\\\",\\n      position === \\\"bottom\\\" && \\\"top-0\\\",\\n      position === \\\"left\\\" && \\\"right-0\\\",\\n      position === \\\"right\\\" && \\\"left-0\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"drawer-bar\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport const DrawerContent: typeof DrawerPrimitive.Content =\\n  DrawerPrimitive.Content;\\n\\nexport function DrawerMenu({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"nav\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"-m-2 flex flex-col\\\", className),\\n    \\\"data-slot\\\": \\\"drawer-menu\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"nav\\\",\\n    props: mergeProps<\\\"nav\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function DrawerMenuItem({\\n  className,\\n  variant = \\\"default\\\",\\n  render,\\n  disabled,\\n  ...props\\n}: useRender.ComponentProps<\\\"button\\\"> & {\\n  variant?: \\\"default\\\" | \\\"destructive\\\";\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"drawer-menu-item\\\",\\n    \\\"data-variant\\\": variant,\\n    disabled,\\n    type: \\\"button\\\" as const,\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"button\\\",\\n    props: mergeProps<\\\"button\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function DrawerMenuSeparator({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"mx-2 my-1 h-px bg-border\\\", className),\\n    \\\"data-slot\\\": \\\"drawer-menu-separator\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function DrawerMenuGroup({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\\"flex flex-col\\\", className),\\n    \\\"data-slot\\\": \\\"drawer-menu-group\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function DrawerMenuGroupLabel({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"px-2 py-1.5 font-medium text-muted-foreground text-xs\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"drawer-menu-group-label\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function DrawerMenuTrigger({\\n  className,\\n  children,\\n  ...props\\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\\n  return (\\n    <DrawerTrigger\\n      className={cn(\\n        \\\"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"drawer-menu-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n      <ChevronRightIcon className=\\\"ms-auto -me-0.5 opacity-80\\\" />\\n    </DrawerTrigger>\\n  );\\n}\\n\\nexport function DrawerMenuCheckboxItem({\\n  className,\\n  children,\\n  checked,\\n  defaultChecked,\\n  onCheckedChange,\\n  variant = \\\"default\\\",\\n  disabled,\\n  render,\\n  ...props\\n}: CheckboxPrimitive.Root.Props & {\\n  variant?: \\\"default\\\" | \\\"switch\\\";\\n  render?: React.ReactElement;\\n}): React.ReactElement {\\n  return (\\n    <CheckboxPrimitive.Root\\n      checked={checked}\\n      className={cn(\\n        \\\"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\\\",\\n        variant === \\\"switch\\\"\\n          ? \\\"grid-cols-[1fr_auto] gap-4 pe-1.5\\\"\\n          : \\\"grid-cols-[1rem_1fr] pe-4\\\",\\n        className,\\n      )}\\n      data-slot=\\\"drawer-menu-checkbox-item\\\"\\n      defaultChecked={defaultChecked}\\n      disabled={disabled}\\n      onCheckedChange={onCheckedChange}\\n      render={render}\\n      {...props}\\n    >\\n      {variant === \\\"switch\\\" ? (\\n        <>\\n          <span className=\\\"col-start-1\\\">{children}</span>\\n          <CheckboxPrimitive.Indicator\\n            className=\\\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\\\"\\n            keepMounted\\n          >\\n            <span className=\\\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\\\" />\\n          </CheckboxPrimitive.Indicator>\\n        </>\\n      ) : (\\n        <>\\n          <CheckboxPrimitive.Indicator className=\\\"col-start-1\\\">\\n            <svg\\n              fill=\\\"none\\\"\\n              height=\\\"24\\\"\\n              stroke=\\\"currentColor\\\"\\n              strokeLinecap=\\\"round\\\"\\n              strokeLinejoin=\\\"round\\\"\\n              strokeWidth=\\\"2\\\"\\n              viewBox=\\\"0 0 24 24\\\"\\n              width=\\\"24\\\"\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n            >\\n              <path d=\\\"M5.252 12.7 10.2 18.63 18.748 5.37\\\" />\\n            </svg>\\n          </CheckboxPrimitive.Indicator>\\n          <span className=\\\"col-start-2\\\">{children}</span>\\n        </>\\n      )}\\n    </CheckboxPrimitive.Root>\\n  );\\n}\\n\\nexport function DrawerMenuRadioGroup({\\n  className,\\n  ...props\\n}: RadioGroupPrimitive.Props): React.ReactElement {\\n  return (\\n    <RadioGroupPrimitive\\n      className={cn(\\\"flex flex-col\\\", className)}\\n      data-slot=\\\"drawer-menu-radio-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function DrawerMenuRadioItem({\\n  className,\\n  children,\\n  value,\\n  disabled,\\n  render,\\n  ...props\\n}: RadioPrimitive.Root.Props & {\\n  value: string;\\n  render?: React.ReactElement;\\n}): React.ReactElement {\\n  return (\\n    <RadioPrimitive.Root\\n      className={cn(\\n        \\\"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\\\",\\n        \\\"grid-cols-[1rem_1fr] items-center pe-4\\\",\\n        className,\\n      )}\\n      data-slot=\\\"drawer-menu-radio-item\\\"\\n      disabled={disabled}\\n      render={render}\\n      value={value}\\n      {...props}\\n    >\\n      <RadioPrimitive.Indicator className=\\\"col-start-1\\\">\\n        <svg\\n          fill=\\\"none\\\"\\n          height=\\\"24\\\"\\n          stroke=\\\"currentColor\\\"\\n          strokeLinecap=\\\"round\\\"\\n          strokeLinejoin=\\\"round\\\"\\n          strokeWidth=\\\"2\\\"\\n          viewBox=\\\"0 0 24 24\\\"\\n          width=\\\"24\\\"\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <path d=\\\"M5.252 12.7 10.2 18.63 18.748 5.37\\\" />\\n        </svg>\\n      </RadioPrimitive.Indicator>\\n      <span className=\\\"col-start-2\\\">{children}</span>\\n    </RadioPrimitive.Root>\\n  );\\n}\\n\\nexport { DrawerPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/empty.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"empty\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/empty.tsx\",\n      \"content\": \"import { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nconst emptyMediaVariants = cva(\\n  \\\"flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n  {\\n    defaultVariants: {\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      variant: {\\n        default: \\\"bg-transparent\\\",\\n        icon: \\\"relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card not-dark:bg-clip-padding text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport function Empty({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance px-6 py-12 text-center md:py-20\\\",\\n        className,\\n      )}\\n      data-slot=\\\"empty\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function EmptyHeader({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex max-w-sm flex-col items-center text-center\\\",\\n        className,\\n      )}\\n      data-slot=\\\"empty-header\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function EmptyMedia({\\n  className,\\n  variant = \\\"default\\\",\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> &\\n  VariantProps<typeof emptyMediaVariants>): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"relative mb-6\\\", className)}\\n      data-slot=\\\"empty-media\\\"\\n      data-variant={variant}\\n      {...props}\\n    >\\n      {variant === \\\"icon\\\" && (\\n        <>\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className={cn(\\n              emptyMediaVariants({ className, variant }),\\n              \\\"pointer-events-none absolute bottom-px origin-bottom-left -translate-x-0.5 -rotate-10 scale-84 shadow-none\\\",\\n            )}\\n          />\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className={cn(\\n              emptyMediaVariants({ className, variant }),\\n              \\\"pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none\\\",\\n            )}\\n          />\\n        </>\\n      )}\\n      <div\\n        className={cn(emptyMediaVariants({ className, variant }))}\\n        {...props}\\n      />\\n    </div>\\n  );\\n}\\n\\nexport function EmptyTitle({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"font-heading font-semibold text-xl\\\", className)}\\n      data-slot=\\\"empty-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function EmptyDescription({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"p\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1\\\",\\n        className,\\n      )}\\n      data-slot=\\\"empty-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function EmptyContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm\\\",\\n        className,\\n      )}\\n      data-slot=\\\"empty-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/field.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"field\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/field.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Field as FieldPrimitive } from \\\"@base-ui/react/field\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Field({\\n  className,\\n  ...props\\n}: FieldPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <FieldPrimitive.Root\\n      className={cn(\\\"flex flex-col items-start gap-2\\\", className)}\\n      data-slot=\\\"field\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FieldLabel({\\n  className,\\n  ...props\\n}: FieldPrimitive.Label.Props): React.ReactElement {\\n  return (\\n    <FieldPrimitive.Label\\n      className={cn(\\n        \\\"inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\\\",\\n        className,\\n      )}\\n      data-slot=\\\"field-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FieldItem({\\n  className,\\n  ...props\\n}: FieldPrimitive.Item.Props): React.ReactElement {\\n  return (\\n    <FieldPrimitive.Item\\n      className={cn(\\\"flex\\\", className)}\\n      data-slot=\\\"field-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FieldDescription({\\n  className,\\n  ...props\\n}: FieldPrimitive.Description.Props): React.ReactElement {\\n  return (\\n    <FieldPrimitive.Description\\n      className={cn(\\\"text-muted-foreground text-xs\\\", className)}\\n      data-slot=\\\"field-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FieldError({\\n  className,\\n  ...props\\n}: FieldPrimitive.Error.Props): React.ReactElement {\\n  return (\\n    <FieldPrimitive.Error\\n      className={cn(\\\"text-destructive-foreground text-xs\\\", className)}\\n      data-slot=\\\"field-error\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport const FieldControl: typeof FieldPrimitive.Control =\\n  FieldPrimitive.Control;\\nexport const FieldValidity: typeof FieldPrimitive.Validity =\\n  FieldPrimitive.Validity;\\n\\nexport { FieldPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ],\n  \"cssVars\": {\n    \"light\": {\n      \"destructive-foreground\": \"var(--color-red-700)\"\n    },\n    \"dark\": {\n      \"destructive-foreground\": \"var(--color-red-400)\"\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/fieldset.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"fieldset\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/fieldset.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Fieldset as FieldsetPrimitive } from \\\"@base-ui/react/fieldset\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Fieldset({\\n  className,\\n  ...props\\n}: FieldsetPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <FieldsetPrimitive.Root\\n      className={cn(\\\"flex w-full max-w-64 flex-col gap-6\\\", className)}\\n      data-slot=\\\"fieldset\\\"\\n      {...props}\\n    />\\n  );\\n}\\nexport function FieldsetLegend({\\n  className,\\n  ...props\\n}: FieldsetPrimitive.Legend.Props): React.ReactElement {\\n  return (\\n    <FieldsetPrimitive.Legend\\n      className={cn(\\\"font-semibold text-foreground\\\", className)}\\n      data-slot=\\\"fieldset-legend\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { FieldsetPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/form.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"form\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/form.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Form as FormPrimitive } from \\\"@base-ui/react/form\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Form({\\n  className,\\n  ...props\\n}: FormPrimitive.Props): React.ReactElement {\\n  return (\\n    <FormPrimitive\\n      className={cn(\\\"flex w-full flex-col gap-4\\\", className)}\\n      data-slot=\\\"form\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { FormPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/frame.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"frame\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/frame.tsx\",\n      \"content\": \"import type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Frame({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"relative flex flex-col rounded-2xl bg-muted/72 p-1\\\",\\n        \\\"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1\\\",\\n        className,\\n      )}\\n      data-slot=\\\"frame\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FramePanel({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n        className,\\n      )}\\n      data-slot=\\\"frame-panel\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FrameHeader({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"header\\\">): React.ReactElement {\\n  return (\\n    <header\\n      className={cn(\\\"flex flex-col px-5 py-4\\\", className)}\\n      data-slot=\\\"frame-panel-header\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FrameTitle({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"font-semibold text-sm\\\", className)}\\n      data-slot=\\\"frame-panel-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FrameDescription({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"frame-panel-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function FrameFooter({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"footer\\\">): React.ReactElement {\\n  return (\\n    <footer\\n      className={cn(\\\"px-5 py-4\\\", className)}\\n      data-slot=\\\"frame-panel-footer\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/group.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"group\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/separator\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/group.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport type * as React from \\\"react\\\";\\nimport { Separator } from \\\"@/registry/default/ui/separator\\\";\\nimport { cn } from \\\"@/lib/utils\\\";\\n\\nexport const groupVariants = cva(\\n  \\\"flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64 dark:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64\\\",\\n  {\\n    defaultVariants: {\\n      orientation: \\\"horizontal\\\",\\n    },\\n    variants: {\\n      orientation: {\\n        horizontal:\\n          \\\"*:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none\\\",\\n        vertical:\\n          \\\"flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport function Group({\\n  className,\\n  orientation,\\n  children,\\n  ...props\\n}: {\\n  className?: string;\\n  orientation?: VariantProps<typeof groupVariants>[\\\"orientation\\\"];\\n  children: React.ReactNode;\\n} & React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(groupVariants({ orientation }), className)}\\n      data-orientation={orientation}\\n      data-slot=\\\"group\\\"\\n      role=\\\"group\\\"\\n      {...props}\\n    >\\n      {children}\\n    </div>\\n  );\\n}\\n\\nexport function GroupText({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"relative inline-flex items-center gap-2 whitespace-nowrap rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-base text-muted-foreground shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 [&_svg]:shrink-0\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"group-text\\\",\\n  };\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function GroupSeparator({\\n  className,\\n  orientation = \\\"vertical\\\",\\n  ...props\\n}: {\\n  className?: string;\\n} & React.ComponentProps<typeof Separator>): React.ReactElement {\\n  return (\\n    <Separator\\n      className={cn(\\n        \\\"pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px\\\",\\n        className,\\n      )}\\n      orientation={orientation}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  Group as ButtonGroup,\\n  GroupText as ButtonGroupText,\\n  GroupSeparator as ButtonGroupSeparator,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/input-group.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input-group\",\n  \"type\": \"registry:ui\",\n  \"registryDependencies\": [\n    \"@coss/input\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/input-group.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Input, type InputProps } from \\\"@/registry/default/ui/input\\\";\\nimport { Textarea, type TextareaProps } from \\\"@/registry/default/ui/textarea\\\";\\n\\nconst inputGroupAddonVariants = cva(\\n  \\\"flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\\\",\\n  {\\n    defaultVariants: {\\n      align: \\\"inline-start\\\",\\n    },\\n    variants: {\\n      align: {\\n        \\\"block-end\\\":\\n          \\\"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\\\",\\n        \\\"block-start\\\":\\n          \\\"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\\\",\\n        \\\"inline-end\\\":\\n          \\\"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\\\",\\n        \\\"inline-start\\\":\\n          \\\"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport function InputGroup({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\\\",\\n        className,\\n      )}\\n      data-slot=\\\"input-group\\\"\\n      role=\\\"group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function InputGroupAddon({\\n  className,\\n  align = \\\"inline-start\\\",\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> &\\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(inputGroupAddonVariants({ align }), className)}\\n      data-align={align}\\n      data-slot=\\\"input-group-addon\\\"\\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\\n        const target = e.target as HTMLElement;\\n        const isInteractive = target.closest(\\n          \\\"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\\\",\\n        );\\n        if (isInteractive) return;\\n        e.preventDefault();\\n        const parent = e.currentTarget.parentElement;\\n        const input = parent?.querySelector<\\n          HTMLInputElement | HTMLTextAreaElement\\n        >(\\\"input, textarea\\\");\\n        if (input && !parent?.querySelector(\\\"input:focus, textarea:focus\\\")) {\\n          input.focus();\\n        }\\n      }}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function InputGroupText({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">): React.ReactElement {\\n  return (\\n    <span\\n      className={cn(\\n        \\\"line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function InputGroupInput({\\n  className,\\n  ...props\\n}: InputProps): React.ReactElement {\\n  return <Input className={className} unstyled {...props} />;\\n}\\n\\nexport function InputGroupTextarea({\\n  className,\\n  ...props\\n}: TextareaProps): React.ReactElement {\\n  return <Textarea className={className} unstyled {...props} />;\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/input-otp.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input-otp\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"input-otp\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/separator\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/input-otp.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { OTPInput, OTPInputContext } from \\\"input-otp\\\";\\nimport type * as React from \\\"react\\\";\\nimport { useContext } from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Separator } from \\\"@/registry/default/ui/separator\\\";\\n\\ntype InputOTPSize = \\\"default\\\" | \\\"lg\\\";\\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown\\n  ? Omit<T, K>\\n  : never;\\n\\nexport type InputOTPProps = DistributiveOmit<\\n  React.ComponentProps<typeof OTPInput>,\\n  \\\"size\\\" | \\\"data-size\\\"\\n> & {\\n  containerClassName?: string;\\n};\\n\\nexport function InputOTP({\\n  className,\\n  containerClassName,\\n  ...props\\n}: InputOTPProps): React.ReactElement {\\n  return (\\n    <OTPInput\\n      className={className}\\n      containerClassName={cn(\\n        \\\"flex items-center gap-2 has-disabled:opacity-64 has-disabled:**:data-[slot=input-otp-slot]:shadow-none has-disabled:**:data-[slot=input-otp-slot]:before:shadow-none!\\\",\\n        containerClassName,\\n      )}\\n      data-slot=\\\"input-otp\\\"\\n      spellCheck={false}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function InputOTPGroup({\\n  className,\\n  size = \\\"default\\\",\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> & {\\n  size?: InputOTPSize;\\n}): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"flex items-center gap-2\\\", className)}\\n      data-size={size}\\n      data-slot=\\\"input-otp-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function InputOTPSlot({\\n  index,\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> & {\\n  index: number;\\n}): React.ReactElement {\\n  const inputOTPContext = useContext(OTPInputContext);\\n  const slot = inputOTPContext?.slots[index];\\n  const { char, hasFakeCaret, isActive } = slot ?? {};\\n\\n  return (\\n    <div\\n      className={cn(\\n        \\\"relative inline-flex in-[[data-slot=input-otp-group][data-size=lg]]:size-10 size-9 items-center justify-center rounded-lg border border-input bg-background not-dark:bg-clip-padding in-[[data-slot=input-otp-group][data-size=lg]]:text-lg text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-[active=true]:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] aria-invalid:border-destructive/36 data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/24 data-[active=true]:aria-invalid:border-destructive/64 data-[active=true]:aria-invalid:ring-destructive/16 sm:in-[[data-slot=input-otp-group][data-size=lg]]:size-9 sm:size-8 sm:in-[[data-slot=input-otp-group][data-size=lg]]:text-base sm:text-sm dark:bg-input/32 dark:data-[active=true]:aria-invalid:ring-destructive/24 dark:not-data-[active=true]:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-active=true],[aria-invalid]]:shadow-none\\\",\\n        className,\\n      )}\\n      data-active={isActive ? true : undefined}\\n      data-slot=\\\"input-otp-slot\\\"\\n      {...props}\\n    >\\n      {char}\\n      {hasFakeCaret && (\\n        <div className=\\\"pointer-events-none absolute inset-0 flex items-center justify-center\\\">\\n          <div className=\\\"h-4 w-px animate-caret-blink bg-foreground\\\" />\\n        </div>\\n      )}\\n    </div>\\n  );\\n}\\n\\nexport function InputOTPSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <Separator\\n      className={cn(\\n        \\\"rounded-full bg-input data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-3\\\",\\n        className,\\n      )}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { OTPInput as InputOTPPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"--animate-caret-blink\": \"1s ease-out infinite caret-blink\"\n    }\n  },\n  \"css\": {\n    \"@keyframes caret-blink\": {\n      \"0%, 70%, to\": {\n        \"opacity\": \"1\"\n      },\n      \"20%, 50%\": {\n        \"opacity\": \"0\"\n      }\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/input.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"input\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/input.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Input as InputPrimitive } from \\\"@base-ui/react/input\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport type InputProps = Omit<\\n  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,\\n  \\\"size\\\"\\n> & {\\n  size?: \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\" | number;\\n  unstyled?: boolean;\\n  nativeInput?: boolean;\\n};\\n\\nexport function Input({\\n  className,\\n  size = \\\"default\\\",\\n  unstyled = false,\\n  nativeInput = false,\\n  ...props\\n}: InputProps): React.ReactElement {\\n  const inputClassName = cn(\\n    \\\"h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5\\\",\\n    size === \\\"sm\\\" &&\\n      \\\"h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5\\\",\\n    size === \\\"lg\\\" && \\\"h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5\\\",\\n    props.type === \\\"search\\\" &&\\n      \\\"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\\\",\\n    props.type === \\\"file\\\" &&\\n      \\\"text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm\\\",\\n  );\\n\\n  return (\\n    <span\\n      className={\\n        cn(\\n          !unstyled &&\\n            \\\"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n          className,\\n        ) || undefined\\n      }\\n      data-size={size}\\n      data-slot=\\\"input-control\\\"\\n    >\\n      {nativeInput ? (\\n        <input\\n          className={inputClassName}\\n          data-slot=\\\"input\\\"\\n          size={typeof size === \\\"number\\\" ? size : undefined}\\n          {...props}\\n        />\\n      ) : (\\n        <InputPrimitive\\n          className={inputClassName}\\n          data-slot=\\\"input\\\"\\n          size={typeof size === \\\"number\\\" ? size : undefined}\\n          {...props}\\n        />\\n      )}\\n    </span>\\n  );\\n}\\n\\nexport { InputPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/kbd.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"kbd\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/kbd.tsx\",\n      \"content\": \"import type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Kbd({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"kbd\\\">): React.ReactElement {\\n  return (\\n    <kbd\\n      className={cn(\\n        \\\"pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded bg-muted px-1 font-medium font-sans text-muted-foreground text-xs [&_svg:not([class*='size-'])]:size-3\\\",\\n        className,\\n      )}\\n      data-slot=\\\"kbd\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function KbdGroup({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"kbd\\\">): React.ReactElement {\\n  return (\\n    <kbd\\n      className={cn(\\\"inline-flex items-center gap-1\\\", className)}\\n      data-slot=\\\"kbd-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/label.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"label\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/label.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Label({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"label\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"label\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"label\\\",\\n    props: mergeProps<\\\"label\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/menu.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"menu\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/menu.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Menu as MenuPrimitive } from \\\"@base-ui/react/menu\\\";\\nimport { ChevronRightIcon } from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport const MenuCreateHandle: typeof MenuPrimitive.createHandle =\\n  MenuPrimitive.createHandle;\\n\\nexport const Menu: typeof MenuPrimitive.Root = MenuPrimitive.Root;\\n\\nexport const MenuPortal: typeof MenuPrimitive.Portal = MenuPrimitive.Portal;\\n\\nexport function MenuTrigger({\\n  className,\\n  children,\\n  ...props\\n}: MenuPrimitive.Trigger.Props): React.ReactElement {\\n  return (\\n    <MenuPrimitive.Trigger\\n      className={className}\\n      data-slot=\\\"menu-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n    </MenuPrimitive.Trigger>\\n  );\\n}\\n\\nexport function MenuPopup({\\n  children,\\n  className,\\n  sideOffset = 4,\\n  align = \\\"center\\\",\\n  alignOffset,\\n  side = \\\"bottom\\\",\\n  anchor,\\n  ...props\\n}: MenuPrimitive.Popup.Props & {\\n  align?: MenuPrimitive.Positioner.Props[\\\"align\\\"];\\n  sideOffset?: MenuPrimitive.Positioner.Props[\\\"sideOffset\\\"];\\n  alignOffset?: MenuPrimitive.Positioner.Props[\\\"alignOffset\\\"];\\n  side?: MenuPrimitive.Positioner.Props[\\\"side\\\"];\\n  anchor?: MenuPrimitive.Positioner.Props[\\\"anchor\\\"];\\n}): React.ReactElement {\\n  return (\\n    <MenuPrimitive.Portal>\\n      <MenuPrimitive.Positioner\\n        align={align}\\n        alignOffset={alignOffset}\\n        anchor={anchor}\\n        className=\\\"z-50\\\"\\n        data-slot=\\\"menu-positioner\\\"\\n        side={side}\\n        sideOffset={sideOffset}\\n      >\\n        <MenuPrimitive.Popup\\n          className={cn(\\n            \\\"relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            className,\\n          )}\\n          data-slot=\\\"menu-popup\\\"\\n          {...props}\\n        >\\n          <div className=\\\"max-h-(--available-height) w-full overflow-y-auto p-1\\\">\\n            {children}\\n          </div>\\n        </MenuPrimitive.Popup>\\n      </MenuPrimitive.Positioner>\\n    </MenuPrimitive.Portal>\\n  );\\n}\\n\\nexport function MenuGroup(\\n  props: MenuPrimitive.Group.Props,\\n): React.ReactElement {\\n  return <MenuPrimitive.Group data-slot=\\\"menu-group\\\" {...props} />;\\n}\\n\\nexport function MenuItem({\\n  className,\\n  inset,\\n  variant = \\\"default\\\",\\n  ...props\\n}: MenuPrimitive.Item.Props & {\\n  inset?: boolean;\\n  variant?: \\\"default\\\" | \\\"destructive\\\";\\n}): React.ReactElement {\\n  return (\\n    <MenuPrimitive.Item\\n      className={cn(\\n        \\\"flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-inset={inset}\\n      data-slot=\\\"menu-item\\\"\\n      data-variant={variant}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function MenuCheckboxItem({\\n  className,\\n  children,\\n  checked,\\n  variant = \\\"default\\\",\\n  ...props\\n}: MenuPrimitive.CheckboxItem.Props & {\\n  variant?: \\\"default\\\" | \\\"switch\\\";\\n}): React.ReactElement {\\n  return (\\n    <MenuPrimitive.CheckboxItem\\n      checked={checked}\\n      className={cn(\\n        \\\"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        variant === \\\"switch\\\"\\n          ? \\\"grid-cols-[1fr_auto] gap-4 pe-1.5\\\"\\n          : \\\"grid-cols-[.75rem_1fr] pe-4\\\",\\n        className,\\n      )}\\n      data-slot=\\\"menu-checkbox-item\\\"\\n      {...props}\\n    >\\n      {variant === \\\"switch\\\" ? (\\n        <>\\n          <span className=\\\"col-start-1\\\">{children}</span>\\n          <MenuPrimitive.CheckboxItemIndicator\\n            className=\\\"inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\\\"\\n            keepMounted\\n          >\\n            <span className=\\\"pointer-events-none block aspect-square h-full in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\\\" />\\n          </MenuPrimitive.CheckboxItemIndicator>\\n        </>\\n      ) : (\\n        <>\\n          <MenuPrimitive.CheckboxItemIndicator className=\\\"col-start-1 -ms-0.5\\\">\\n            <svg\\n              aria-hidden=\\\"true\\\"\\n              fill=\\\"none\\\"\\n              height=\\\"24\\\"\\n              stroke=\\\"currentColor\\\"\\n              strokeLinecap=\\\"round\\\"\\n              strokeLinejoin=\\\"round\\\"\\n              strokeWidth=\\\"2\\\"\\n              viewBox=\\\"0 0 24 24\\\"\\n              width=\\\"24\\\"\\n              xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n            >\\n              <path d=\\\"M5.252 12.7 10.2 18.63 18.748 5.37\\\" />\\n            </svg>\\n          </MenuPrimitive.CheckboxItemIndicator>\\n          <span className=\\\"col-start-2\\\">{children}</span>\\n        </>\\n      )}\\n    </MenuPrimitive.CheckboxItem>\\n  );\\n}\\n\\nexport function MenuRadioGroup(\\n  props: MenuPrimitive.RadioGroup.Props,\\n): React.ReactElement {\\n  return <MenuPrimitive.RadioGroup data-slot=\\\"menu-radio-group\\\" {...props} />;\\n}\\n\\nexport function MenuRadioItem({\\n  className,\\n  children,\\n  ...props\\n}: MenuPrimitive.RadioItem.Props): React.ReactElement {\\n  return (\\n    <MenuPrimitive.RadioItem\\n      className={cn(\\n        \\\"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[.75rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"menu-radio-item\\\"\\n      {...props}\\n    >\\n      <MenuPrimitive.RadioItemIndicator className=\\\"col-start-1 -ms-0.5\\\">\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          fill=\\\"none\\\"\\n          height=\\\"24\\\"\\n          stroke=\\\"currentColor\\\"\\n          strokeLinecap=\\\"round\\\"\\n          strokeLinejoin=\\\"round\\\"\\n          strokeWidth=\\\"2\\\"\\n          viewBox=\\\"0 0 24 24\\\"\\n          width=\\\"24\\\"\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <path d=\\\"M5.252 12.7 10.2 18.63 18.748 5.37\\\" />\\n        </svg>\\n      </MenuPrimitive.RadioItemIndicator>\\n      <span className=\\\"col-start-2\\\">{children}</span>\\n    </MenuPrimitive.RadioItem>\\n  );\\n}\\n\\nexport function MenuGroupLabel({\\n  className,\\n  inset,\\n  ...props\\n}: MenuPrimitive.GroupLabel.Props & {\\n  inset?: boolean;\\n}): React.ReactElement {\\n  return (\\n    <MenuPrimitive.GroupLabel\\n      className={cn(\\n        \\\"px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8\\\",\\n        className,\\n      )}\\n      data-inset={inset}\\n      data-slot=\\\"menu-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function MenuSeparator({\\n  className,\\n  ...props\\n}: MenuPrimitive.Separator.Props): React.ReactElement {\\n  return (\\n    <MenuPrimitive.Separator\\n      className={cn(\\\"mx-2 my-1 h-px bg-border\\\", className)}\\n      data-slot=\\\"menu-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function MenuShortcut({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"kbd\\\">): React.ReactElement {\\n  return (\\n    <kbd\\n      className={cn(\\n        \\\"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\\\",\\n        className,\\n      )}\\n      data-slot=\\\"menu-shortcut\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function MenuSub(\\n  props: MenuPrimitive.SubmenuRoot.Props,\\n): React.ReactElement {\\n  return <MenuPrimitive.SubmenuRoot data-slot=\\\"menu-sub\\\" {...props} />;\\n}\\n\\nexport function MenuSubTrigger({\\n  className,\\n  inset,\\n  children,\\n  ...props\\n}: MenuPrimitive.SubmenuTrigger.Props & {\\n  inset?: boolean;\\n}): React.ReactElement {\\n  return (\\n    <MenuPrimitive.SubmenuTrigger\\n      className={cn(\\n        \\\"flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\\\",\\n        className,\\n      )}\\n      data-inset={inset}\\n      data-slot=\\\"menu-sub-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n      <ChevronRightIcon className=\\\"ms-auto -me-0.5 opacity-80\\\" />\\n    </MenuPrimitive.SubmenuTrigger>\\n  );\\n}\\n\\nexport function MenuSubPopup({\\n  className,\\n  sideOffset = 0,\\n  alignOffset,\\n  align = \\\"start\\\",\\n  ...props\\n}: MenuPrimitive.Popup.Props & {\\n  align?: MenuPrimitive.Positioner.Props[\\\"align\\\"];\\n  sideOffset?: MenuPrimitive.Positioner.Props[\\\"sideOffset\\\"];\\n  alignOffset?: MenuPrimitive.Positioner.Props[\\\"alignOffset\\\"];\\n}): React.ReactElement {\\n  const defaultAlignOffset = align !== \\\"center\\\" ? -5 : undefined;\\n\\n  return (\\n    <MenuPopup\\n      align={align}\\n      alignOffset={alignOffset ?? defaultAlignOffset}\\n      className={className}\\n      data-slot=\\\"menu-sub-content\\\"\\n      side=\\\"inline-end\\\"\\n      sideOffset={sideOffset}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport {\\n  MenuPrimitive,\\n  MenuCreateHandle as DropdownMenuCreateHandle,\\n  Menu as DropdownMenu,\\n  MenuPortal as DropdownMenuPortal,\\n  MenuTrigger as DropdownMenuTrigger,\\n  MenuPopup as DropdownMenuContent,\\n  MenuGroup as DropdownMenuGroup,\\n  MenuItem as DropdownMenuItem,\\n  MenuCheckboxItem as DropdownMenuCheckboxItem,\\n  MenuRadioGroup as DropdownMenuRadioGroup,\\n  MenuRadioItem as DropdownMenuRadioItem,\\n  MenuGroupLabel as DropdownMenuLabel,\\n  MenuSeparator as DropdownMenuSeparator,\\n  MenuShortcut as DropdownMenuShortcut,\\n  MenuSub as DropdownMenuSub,\\n  MenuSubTrigger as DropdownMenuSubTrigger,\\n  MenuSubPopup as DropdownMenuSubContent,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ],\n  \"cssVars\": {\n    \"light\": {\n      \"destructive-foreground\": \"var(--color-red-700)\"\n    },\n    \"dark\": {\n      \"destructive-foreground\": \"var(--color-red-400)\"\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/merge-props.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"merge-props\",\n  \"type\": \"registry:lib\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/base-ui/merge-props.ts\",\n      \"content\": \"export { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\n\",\n      \"type\": \"registry:lib\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/meter.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"meter\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/meter.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Meter as MeterPrimitive } from \\\"@base-ui/react/meter\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Meter({\\n  className,\\n  children,\\n  ...props\\n}: MeterPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <MeterPrimitive.Root\\n      className={cn(\\\"flex w-full flex-col gap-2\\\", className)}\\n      {...props}\\n    >\\n      {children ? (\\n        children\\n      ) : (\\n        <MeterTrack>\\n          <MeterIndicator />\\n        </MeterTrack>\\n      )}\\n    </MeterPrimitive.Root>\\n  );\\n}\\n\\nexport function MeterLabel({\\n  className,\\n  ...props\\n}: MeterPrimitive.Label.Props): React.ReactElement {\\n  return (\\n    <MeterPrimitive.Label\\n      className={cn(\\\"font-medium text-foreground text-sm\\\", className)}\\n      data-slot=\\\"meter-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function MeterTrack({\\n  className,\\n  ...props\\n}: MeterPrimitive.Track.Props): React.ReactElement {\\n  return (\\n    <MeterPrimitive.Track\\n      className={cn(\\\"block h-2 w-full overflow-hidden bg-input\\\", className)}\\n      data-slot=\\\"meter-track\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function MeterIndicator({\\n  className,\\n  ...props\\n}: MeterPrimitive.Indicator.Props): React.ReactElement {\\n  return (\\n    <MeterPrimitive.Indicator\\n      className={cn(\\\"bg-primary transition-all duration-500\\\", className)}\\n      data-slot=\\\"meter-indicator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function MeterValue({\\n  className,\\n  ...props\\n}: MeterPrimitive.Value.Props): React.ReactElement {\\n  return (\\n    <MeterPrimitive.Value\\n      className={cn(\\\"text-foreground text-sm tabular-nums\\\", className)}\\n      data-slot=\\\"meter-value\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { MeterPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/number-field.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"number-field\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/number-field.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { NumberField as NumberFieldPrimitive } from \\\"@base-ui/react/number-field\\\";\\nimport { MinusIcon, PlusIcon } from \\\"lucide-react\\\";\\nimport * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport const NumberFieldContext: React.Context<{\\n  fieldId: string;\\n} | null> = React.createContext<{\\n  fieldId: string;\\n} | null>(null);\\n\\nexport function NumberField({\\n  id,\\n  className,\\n  size = \\\"default\\\",\\n  ...props\\n}: NumberFieldPrimitive.Root.Props & {\\n  size?: \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\";\\n}): React.ReactElement {\\n  const generatedId = React.useId();\\n  const fieldId = id ?? generatedId;\\n\\n  return (\\n    <NumberFieldContext.Provider value={{ fieldId }}>\\n      <NumberFieldPrimitive.Root\\n        className={cn(\\\"flex w-full flex-col items-start gap-2\\\", className)}\\n        data-size={size}\\n        data-slot=\\\"number-field\\\"\\n        id={fieldId}\\n        {...props}\\n      />\\n    </NumberFieldContext.Provider>\\n  );\\n}\\n\\nexport function NumberFieldGroup({\\n  className,\\n  ...props\\n}: NumberFieldPrimitive.Group.Props): React.ReactElement {\\n  return (\\n    <NumberFieldPrimitive.Group\\n      className={cn(\\n        \\\"relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/48 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none\\\",\\n        className,\\n      )}\\n      data-slot=\\\"number-field-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function NumberFieldDecrement({\\n  className,\\n  ...props\\n}: NumberFieldPrimitive.Decrement.Props): React.ReactElement {\\n  return (\\n    <NumberFieldPrimitive.Decrement\\n      className={cn(\\n        \\\"relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\\\",\\n        className,\\n      )}\\n      data-slot=\\\"number-field-decrement\\\"\\n      {...props}\\n    >\\n      <MinusIcon />\\n    </NumberFieldPrimitive.Decrement>\\n  );\\n}\\n\\nexport function NumberFieldIncrement({\\n  className,\\n  ...props\\n}: NumberFieldPrimitive.Increment.Props): React.ReactElement {\\n  return (\\n    <NumberFieldPrimitive.Increment\\n      className={cn(\\n        \\\"relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\\\",\\n        className,\\n      )}\\n      data-slot=\\\"number-field-increment\\\"\\n      {...props}\\n    >\\n      <PlusIcon />\\n    </NumberFieldPrimitive.Increment>\\n  );\\n}\\n\\nexport function NumberFieldInput({\\n  className,\\n  ...props\\n}: NumberFieldPrimitive.Input.Props): React.ReactElement {\\n  return (\\n    <NumberFieldPrimitive.Input\\n      className={cn(\\n        \\\"h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5\\\",\\n        className,\\n      )}\\n      data-slot=\\\"number-field-input\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function NumberFieldScrubArea({\\n  className,\\n  label,\\n  ...props\\n}: NumberFieldPrimitive.ScrubArea.Props & {\\n  label: string;\\n}): React.ReactElement {\\n  const context = React.useContext(NumberFieldContext);\\n\\n  if (!context) {\\n    throw new Error(\\n      \\\"NumberFieldScrubArea must be used within a NumberField component for accessibility.\\\",\\n    );\\n  }\\n\\n  return (\\n    <NumberFieldPrimitive.ScrubArea\\n      className={cn(\\\"flex cursor-ew-resize\\\", className)}\\n      data-slot=\\\"number-field-scrub-area\\\"\\n      {...props}\\n    >\\n      <Label className=\\\"cursor-ew-resize\\\" htmlFor={context.fieldId}>\\n        {label}\\n      </Label>\\n      <NumberFieldPrimitive.ScrubAreaCursor className=\\\"drop-shadow-[0_1px_1px_#0008] filter\\\">\\n        <CursorGrowIcon />\\n      </NumberFieldPrimitive.ScrubAreaCursor>\\n    </NumberFieldPrimitive.ScrubArea>\\n  );\\n}\\n\\nexport function CursorGrowIcon(\\n  props: React.ComponentProps<\\\"svg\\\">,\\n): React.ReactElement {\\n  return (\\n    <svg\\n      aria-hidden=\\\"true\\\"\\n      fill=\\\"black\\\"\\n      height=\\\"14\\\"\\n      stroke=\\\"white\\\"\\n      viewBox=\\\"0 0 24 14\\\"\\n      width=\\\"26\\\"\\n      xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n      {...props}\\n    >\\n      <path d=\\\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\\\" />\\n    </svg>\\n  );\\n}\\n\\nexport { NumberFieldPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-accordion-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-accordion-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic accordion\",\n  \"registryDependencies\": [\n    \"@coss/accordion\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-accordion-1.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionItem,\\n  AccordionPanel,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nexport default function Particle() {\\n  const items = [\\n    {\\n      content:\\n        \\\"Base UI is a library of high-quality unstyled React components for design systems and web apps.\\\",\\n      id: \\\"1\\\",\\n      title: \\\"What is Base UI?\\\",\\n    },\\n    {\\n      content:\\n        \\\"Head to the \\\\\\\"Quick start\\\\\\\" guide in the docs. If you've used unstyled libraries before, you'll feel at home.\\\",\\n      id: \\\"2\\\",\\n      title: \\\"How do I get started?\\\",\\n    },\\n    {\\n      content: \\\"Of course! Base UI is free and open source.\\\",\\n      id: \\\"3\\\",\\n      title: \\\"Can I use it for my project?\\\",\\n    },\\n  ];\\n\\n  return (\\n    <Accordion className=\\\"w-full\\\" defaultValue={[\\\"3\\\"]}>\\n      {items.map((item) => (\\n        <AccordionItem key={item.id} value={item.id}>\\n          <AccordionTrigger>{item.title}</AccordionTrigger>\\n          <AccordionPanel>{item.content}</AccordionPanel>\\n        </AccordionItem>\\n      ))}\\n    </Accordion>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n  },\n  \"categories\": [\n    \"accordion\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-accordion-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-accordion-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Accordion with one panel open\",\n  \"registryDependencies\": [\n    \"@coss/accordion\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-accordion-2.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionItem,\\n  AccordionPanel,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Accordion className=\\\"w-full\\\">\\n      <AccordionItem value=\\\"item-1\\\">\\n        <AccordionTrigger>What is Base UI?</AccordionTrigger>\\n        <AccordionPanel>\\n          Base UI is a library of high-quality unstyled React components for\\n          design systems and web apps.\\n        </AccordionPanel>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-2\\\">\\n        <AccordionTrigger>How do I get started?</AccordionTrigger>\\n        <AccordionPanel>\\n          Head to the \\\"Quick start\\\" guide in the docs. If you've used unstyled\\n          libraries before, you'll feel at home.\\n        </AccordionPanel>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-3\\\">\\n        <AccordionTrigger>Can I use it for my project?</AccordionTrigger>\\n        <AccordionPanel>\\n          Of course! Base UI is free and open source.\\n        </AccordionPanel>\\n      </AccordionItem>\\n    </Accordion>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n  },\n  \"categories\": [\n    \"accordion\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-accordion-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-accordion-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Accordion allowing multiple panels open\",\n  \"registryDependencies\": [\n    \"@coss/accordion\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-accordion-3.tsx\",\n      \"content\": \"import {\\n  Accordion,\\n  AccordionItem,\\n  AccordionPanel,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Accordion className=\\\"w-full\\\" multiple>\\n      <AccordionItem value=\\\"item-1\\\">\\n        <AccordionTrigger>What is Base UI?</AccordionTrigger>\\n        <AccordionPanel>\\n          Base UI is a library of high-quality unstyled React components for\\n          design systems and web apps.\\n        </AccordionPanel>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-2\\\">\\n        <AccordionTrigger>How do I get started?</AccordionTrigger>\\n        <AccordionPanel>\\n          Head to the \\\"Quick start\\\" guide in the docs. If you've used unstyled\\n          libraries before, you'll feel at home.\\n        </AccordionPanel>\\n      </AccordionItem>\\n      <AccordionItem value=\\\"item-3\\\">\\n        <AccordionTrigger>Can I use it for my project?</AccordionTrigger>\\n        <AccordionPanel>\\n          Of course! Base UI is free and open source.\\n        </AccordionPanel>\\n      </AccordionItem>\\n    </Accordion>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n  },\n  \"categories\": [\n    \"accordion\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-accordion-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-accordion-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Controlled accordion\",\n  \"registryDependencies\": [\n    \"@coss/accordion\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-accordion-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport {\\n  Accordion,\\n  AccordionItem,\\n  AccordionPanel,\\n  AccordionTrigger,\\n} from \\\"@/registry/default/ui/accordion\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState<string[]>([]);\\n\\n  return (\\n    <div className=\\\"flex w-full flex-col gap-4\\\">\\n      <Accordion className=\\\"w-full\\\" onValueChange={setValue} value={value}>\\n        <AccordionItem value=\\\"item-1\\\">\\n          <AccordionTrigger>What is Base UI?</AccordionTrigger>\\n          <AccordionPanel>\\n            Base UI is a library of high-quality unstyled React components for\\n            design systems and web apps.\\n          </AccordionPanel>\\n        </AccordionItem>\\n        <AccordionItem value=\\\"item-2\\\">\\n          <AccordionTrigger>How do I get started?</AccordionTrigger>\\n          <AccordionPanel>\\n            Head to the \\\"Quick start\\\" guide in the docs. If you've used unstyled\\n            libraries before, you'll feel at home.\\n          </AccordionPanel>\\n        </AccordionItem>\\n        <AccordionItem value=\\\"item-3\\\">\\n          <AccordionTrigger>Can I use it for my project?</AccordionTrigger>\\n          <AccordionPanel>\\n            Of course! Base UI is free and open source.\\n          </AccordionPanel>\\n        </AccordionItem>\\n      </Accordion>\\n\\n      <div className=\\\"flex flex-col items-start gap-4\\\">\\n        <Button\\n          onClick={() => setValue([\\\"item-1\\\", \\\"item-2\\\"])}\\n          variant=\\\"outline\\\"\\n        >\\n          Open First Two\\n        </Button>\\n        <p className=\\\"text-muted-foreground text-sm\\\">\\n          Open items: {value.length > 0 ? value.join(\\\", \\\") : \\\"None\\\"}\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n  },\n  \"categories\": [\n    \"accordion\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic alert\",\n  \"registryDependencies\": [\n    \"@coss/alert\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-1.tsx\",\n      \"content\": \"import {\\n  Alert,\\n  AlertDescription,\\n  AlertTitle,\\n} from \\\"@/registry/default/ui/alert\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Alert>\\n      <AlertTitle>Heads up!</AlertTitle>\\n      <AlertDescription>\\n        <p>Describe what can be done about it here.</p>\\n      </AlertDescription>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"alert\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Alert with icon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/alert\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-2.tsx\",\n      \"content\": \"import { InfoIcon } from \\\"lucide-react\\\";\\nimport {\\n  Alert,\\n  AlertDescription,\\n  AlertTitle,\\n} from \\\"@/registry/default/ui/alert\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Alert>\\n      <InfoIcon />\\n      <AlertTitle>Heads up!</AlertTitle>\\n      <AlertDescription>\\n        Describe what can be done about it here.\\n      </AlertDescription>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"alert\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Alert with icon and action buttons\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/alert\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-3.tsx\",\n      \"content\": \"import { InfoIcon } from \\\"lucide-react\\\";\\nimport {\\n  Alert,\\n  AlertAction,\\n  AlertDescription,\\n  AlertTitle,\\n} from \\\"@/registry/default/ui/alert\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Alert>\\n      <InfoIcon />\\n      <AlertTitle>Heads up!</AlertTitle>\\n      <AlertDescription>\\n        Describe what can be done about it here.\\n      </AlertDescription>\\n      <AlertAction>\\n        <Button size=\\\"xs\\\" variant=\\\"ghost\\\">\\n          Dismiss\\n        </Button>\\n        <Button size=\\\"xs\\\">Ok</Button>\\n      </AlertAction>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"alert\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Info alert\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/alert\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-4.tsx\",\n      \"content\": \"import { InfoIcon } from \\\"lucide-react\\\";\\nimport {\\n  Alert,\\n  AlertDescription,\\n  AlertTitle,\\n} from \\\"@/registry/default/ui/alert\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Alert variant=\\\"info\\\">\\n      <InfoIcon />\\n      <AlertTitle>Heads up!</AlertTitle>\\n      <AlertDescription>\\n        Describe what can be done about it here.\\n      </AlertDescription>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"alert\",\n    \"info\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Success alert\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/alert\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-5.tsx\",\n      \"content\": \"import { CircleCheckIcon } from \\\"lucide-react\\\";\\nimport {\\n  Alert,\\n  AlertDescription,\\n  AlertTitle,\\n} from \\\"@/registry/default/ui/alert\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Alert variant=\\\"success\\\">\\n      <CircleCheckIcon />\\n      <AlertTitle>Heads up!</AlertTitle>\\n      <AlertDescription>\\n        Describe what can be done about it here.\\n      </AlertDescription>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"alert\",\n    \"success\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Warning alert\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/alert\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-6.tsx\",\n      \"content\": \"import { TriangleAlertIcon } from \\\"lucide-react\\\";\\nimport {\\n  Alert,\\n  AlertDescription,\\n  AlertTitle,\\n} from \\\"@/registry/default/ui/alert\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Alert variant=\\\"warning\\\">\\n      <TriangleAlertIcon />\\n      <AlertTitle>Heads up!</AlertTitle>\\n      <AlertDescription>\\n        Describe what can be done about it here.\\n      </AlertDescription>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"alert\",\n    \"warning\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Error alert\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/alert\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-7.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\nimport {\\n  Alert,\\n  AlertDescription,\\n  AlertTitle,\\n} from \\\"@/registry/default/ui/alert\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Alert variant=\\\"error\\\">\\n      <CircleAlertIcon />\\n      <AlertTitle>Heads up!</AlertTitle>\\n      <AlertDescription>\\n        Describe what can be done about it here.\\n      </AlertDescription>\\n    </Alert>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"alert\",\n    \"error\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-dialog-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-dialog-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Alert dialog\",\n  \"registryDependencies\": [\n    \"@coss/alert-dialog\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-dialog-1.tsx\",\n      \"content\": \"import {\\n  AlertDialog,\\n  AlertDialogClose,\\n  AlertDialogDescription,\\n  AlertDialogFooter,\\n  AlertDialogHeader,\\n  AlertDialogPopup,\\n  AlertDialogTitle,\\n  AlertDialogTrigger,\\n} from \\\"@/registry/default/ui/alert-dialog\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <AlertDialog>\\n      <AlertDialogTrigger render={<Button variant=\\\"destructive-outline\\\" />}>\\n        Delete Account\\n      </AlertDialogTrigger>\\n      <AlertDialogPopup>\\n        <AlertDialogHeader>\\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\\n          <AlertDialogDescription>\\n            This action cannot be undone. This will permanently delete your\\n            account and remove your data from our servers.\\n          </AlertDialogDescription>\\n        </AlertDialogHeader>\\n        <AlertDialogFooter>\\n          <AlertDialogClose render={<Button variant=\\\"ghost\\\" />}>\\n            Cancel\\n          </AlertDialogClose>\\n          <AlertDialogClose render={<Button variant=\\\"destructive\\\" />}>\\n            Delete Account\\n          </AlertDialogClose>\\n        </AlertDialogFooter>\\n      </AlertDialogPopup>\\n    </AlertDialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"alert dialog\",\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-alert-dialog-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-alert-dialog-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Alert dialog with bare footer\",\n  \"registryDependencies\": [\n    \"@coss/alert-dialog\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-alert-dialog-2.tsx\",\n      \"content\": \"import {\\n  AlertDialog,\\n  AlertDialogClose,\\n  AlertDialogDescription,\\n  AlertDialogFooter,\\n  AlertDialogHeader,\\n  AlertDialogPopup,\\n  AlertDialogTitle,\\n  AlertDialogTrigger,\\n} from \\\"@/registry/default/ui/alert-dialog\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <AlertDialog>\\n      <AlertDialogTrigger render={<Button variant=\\\"destructive-outline\\\" />}>\\n        Delete Account\\n      </AlertDialogTrigger>\\n      <AlertDialogPopup>\\n        <AlertDialogHeader>\\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\\n          <AlertDialogDescription>\\n            This action cannot be undone. This will permanently delete your\\n            account and remove your data from our servers.\\n          </AlertDialogDescription>\\n        </AlertDialogHeader>\\n        <AlertDialogFooter variant=\\\"bare\\\">\\n          <AlertDialogClose render={<Button variant=\\\"ghost\\\" />}>\\n            Cancel\\n          </AlertDialogClose>\\n          <AlertDialogClose render={<Button variant=\\\"destructive\\\" />}>\\n            Delete Account\\n          </AlertDialogClose>\\n        </AlertDialogFooter>\\n      </AlertDialogPopup>\\n    </AlertDialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"alert dialog\",\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic autocomplete\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete with grouped items\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-10.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Fragment } from \\\"react\\\";\\nimport {\\n  Autocomplete,\\n  AutocompleteCollection,\\n  AutocompleteEmpty,\\n  AutocompleteGroup,\\n  AutocompleteGroupLabel,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n  AutocompleteSeparator,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\n// Grouped items demo\\ntype Tag = { id: string; label: string; group: \\\"Status\\\" | \\\"Priority\\\" | \\\"Team\\\" };\\ntype TagGroup = { value: string; items: Tag[] };\\n\\nconst tagsData: Tag[] = [\\n  // Status\\n  { group: \\\"Status\\\", id: \\\"s-open\\\", label: \\\"Open\\\" },\\n  { group: \\\"Status\\\", id: \\\"s-in-progress\\\", label: \\\"In progress\\\" },\\n  { group: \\\"Status\\\", id: \\\"s-blocked\\\", label: \\\"Blocked\\\" },\\n  { group: \\\"Status\\\", id: \\\"s-resolved\\\", label: \\\"Resolved\\\" },\\n  { group: \\\"Status\\\", id: \\\"s-closed\\\", label: \\\"Closed\\\" },\\n  // Priority\\n  { group: \\\"Priority\\\", id: \\\"p-low\\\", label: \\\"Low\\\" },\\n  { group: \\\"Priority\\\", id: \\\"p-medium\\\", label: \\\"Medium\\\" },\\n  { group: \\\"Priority\\\", id: \\\"p-high\\\", label: \\\"High\\\" },\\n  { group: \\\"Priority\\\", id: \\\"p-urgent\\\", label: \\\"Urgent\\\" },\\n  // Team\\n  { group: \\\"Team\\\", id: \\\"t-design\\\", label: \\\"Design\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-frontend\\\", label: \\\"Frontend\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-backend\\\", label: \\\"Backend\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-devops\\\", label: \\\"DevOps\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-qa\\\", label: \\\"QA\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-mobile\\\", label: \\\"Mobile\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-data\\\", label: \\\"Data\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-security\\\", label: \\\"Security\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-platform\\\", label: \\\"Platform\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-infra\\\", label: \\\"Infrastructure\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-product\\\", label: \\\"Product\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-marketing\\\", label: \\\"Marketing\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-sales\\\", label: \\\"Sales\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-support\\\", label: \\\"Support\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-research\\\", label: \\\"Research\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-content\\\", label: \\\"Content\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-analytics\\\", label: \\\"Analytics\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-operations\\\", label: \\\"Operations\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-finance\\\", label: \\\"Finance\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-hr\\\", label: \\\"HR\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-legal\\\", label: \\\"Legal\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-growth\\\", label: \\\"Growth\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-partner\\\", label: \\\"Partner\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-community\\\", label: \\\"Community\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-docs\\\", label: \\\"Docs\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-l10n\\\", label: \\\"Localization\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-a11y\\\", label: \\\"Accessibility\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-sre\\\", label: \\\"SRE\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-release\\\", label: \\\"Release\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-architecture\\\", label: \\\"Architecture\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-ux\\\", label: \\\"UX\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-ui\\\", label: \\\"UI\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-management\\\", label: \\\"Management\\\" },\\n];\\n\\nfunction groupTags(tags: Tag[]): TagGroup[] {\\n  const groups: Record<string, Tag[]> = {};\\n  for (const tag of tags) {\\n    if (!groups[tag.group]) {\\n      groups[tag.group] = [];\\n    }\\n    groups[tag.group]?.push(tag);\\n  }\\n\\n  const order: Array<TagGroup[\\\"value\\\"]> = [\\\"Status\\\", \\\"Priority\\\", \\\"Team\\\"];\\n  return order.map((value) => ({ items: groups[value] ?? [], value }));\\n}\\n\\nconst groupedTags: TagGroup[] = groupTags(tagsData);\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={groupedTags}>\\n      <div className=\\\"flex flex-col items-start gap-2\\\">\\n        <AutocompleteInput\\n          aria-label=\\\"Search tags\\\"\\n          placeholder=\\\"e.g. feature\\\"\\n        />\\n      </div>\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No tags found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(group: TagGroup) => (\\n            <Fragment key={group.value}>\\n              <AutocompleteGroup items={group.items}>\\n                <AutocompleteGroupLabel>{group.value}</AutocompleteGroupLabel>\\n                <AutocompleteCollection>\\n                  {(tag: Tag) => (\\n                    <AutocompleteItem key={tag.id} value={tag}>\\n                      {tag.label}\\n                    </AutocompleteItem>\\n                  )}\\n                </AutocompleteCollection>\\n              </AutocompleteGroup>\\n              {group.value !== \\\"Team\\\" && <AutocompleteSeparator />}\\n            </Fragment>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete with limited number of results\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-11.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useMemo, useState } from \\\"react\\\";\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n  AutocompleteStatus,\\n  useAutocompleteFilter,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\n// Limit results demo\\nconst limit = 7;\\ntype SimpleTag = { id: string; value: string };\\nconst manyTags: SimpleTag[] = [\\n  { id: \\\"lang-js\\\", value: \\\"JavaScript\\\" },\\n  { id: \\\"lang-ts\\\", value: \\\"TypeScript\\\" },\\n  { id: \\\"lang-py\\\", value: \\\"Python\\\" },\\n  { id: \\\"lang-java\\\", value: \\\"Java\\\" },\\n  { id: \\\"lang-csharp\\\", value: \\\"C#\\\" },\\n  { id: \\\"lang-cpp\\\", value: \\\"C++\\\" },\\n  { id: \\\"lang-c\\\", value: \\\"C\\\" },\\n  { id: \\\"lang-go\\\", value: \\\"Go\\\" },\\n  { id: \\\"lang-rust\\\", value: \\\"Rust\\\" },\\n  { id: \\\"lang-rb\\\", value: \\\"Ruby\\\" },\\n  { id: \\\"lang-php\\\", value: \\\"PHP\\\" },\\n  { id: \\\"lang-swift\\\", value: \\\"Swift\\\" },\\n  { id: \\\"lang-kotlin\\\", value: \\\"Kotlin\\\" },\\n  { id: \\\"lang-scala\\\", value: \\\"Scala\\\" },\\n  { id: \\\"lang-elixir\\\", value: \\\"Elixir\\\" },\\n  { id: \\\"lang-hs\\\", value: \\\"Haskell\\\" },\\n  { id: \\\"lang-dart\\\", value: \\\"Dart\\\" },\\n  { id: \\\"lang-objc\\\", value: \\\"Objective-C\\\" },\\n  { id: \\\"lang-julia\\\", value: \\\"Julia\\\" },\\n  { id: \\\"lang-r\\\", value: \\\"R\\\" },\\n  { id: \\\"lang-perl\\\", value: \\\"Perl\\\" },\\n  { id: \\\"lang-lua\\\", value: \\\"Lua\\\" },\\n  { id: \\\"lang-ocaml\\\", value: \\\"OCaml\\\" },\\n  { id: \\\"lang-fsharp\\\", value: \\\"F#\\\" },\\n];\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState(\\\"\\\");\\n  const { contains } = useAutocompleteFilter({ sensitivity: \\\"base\\\" });\\n\\n  const totalMatches = useMemo(() => {\\n    const trimmed = value.trim();\\n    if (!trimmed) return manyTags.length;\\n    return manyTags.filter((t) => contains(t.value, trimmed)).length;\\n  }, [value, contains]);\\n\\n  const moreCount = Math.max(0, totalMatches - limit);\\n\\n  return (\\n    <Autocomplete\\n      items={manyTags}\\n      limit={limit}\\n      onValueChange={setValue}\\n      value={value}\\n    >\\n      <AutocompleteInput placeholder=\\\"e.g. feature\\\" />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No tags found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(tag: SimpleTag) => (\\n            <AutocompleteItem key={tag.id} value={tag}>\\n              {tag.value}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n        {moreCount > 0 && (\\n          <AutocompleteStatus>\\n            +{moreCount} more (keep typing to narrow down)\\n          </AutocompleteStatus>\\n        )}\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete with async items loading\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\",\n    \"@coss/spinner\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-12.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { ReactNode } from \\\"react\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\nimport {\\n  Autocomplete,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n  AutocompleteStatus,\\n  useAutocompleteFilter,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\n\\ntype Movie = { id: string; title: string; year: number };\\nconst top100Movies: Movie[] = [\\n  { id: \\\"1\\\", title: \\\"The Shawshank Redemption\\\", year: 1994 },\\n  { id: \\\"2\\\", title: \\\"The Godfather\\\", year: 1972 },\\n  { id: \\\"3\\\", title: \\\"The Dark Knight\\\", year: 2008 },\\n  { id: \\\"4\\\", title: \\\"The Godfather Part II\\\", year: 1974 },\\n  { id: \\\"5\\\", title: \\\"12 Angry Men\\\", year: 1957 },\\n  { id: \\\"8\\\", title: \\\"Pulp Fiction\\\", year: 1994 },\\n  { id: \\\"11\\\", title: \\\"Forrest Gump\\\", year: 1994 },\\n  { id: \\\"14\\\", title: \\\"Inception\\\", year: 2010 },\\n];\\n\\nasync function searchMovies(\\n  query: string,\\n  filter: (item: string, query: string) => boolean,\\n): Promise<Movie[]> {\\n  await new Promise((resolve) =>\\n    setTimeout(resolve, Math.random() * 500 + 100),\\n  );\\n  if (Math.random() < 0.01 || query === \\\"will_error\\\") {\\n    throw new Error(\\\"Network error\\\");\\n  }\\n  return top100Movies.filter(\\n    (movie) =>\\n      filter(movie.title, query) || filter(movie.year.toString(), query),\\n  );\\n}\\n\\nexport default function Particle() {\\n  const [searchValue, setSearchValue] = useState(\\\"\\\");\\n  const [isLoading, setIsLoading] = useState(false);\\n  const [searchResults, setSearchResults] = useState<Movie[]>([]);\\n  const [error, setError] = useState<string | null>(null);\\n\\n  const { contains } = useAutocompleteFilter({ sensitivity: \\\"base\\\" });\\n\\n  useEffect(() => {\\n    if (!searchValue) {\\n      setSearchResults([]);\\n      setIsLoading(false);\\n      return;\\n    }\\n\\n    setIsLoading(true);\\n    setError(null);\\n    let ignore = false;\\n\\n    const timeoutId = setTimeout(async () => {\\n      try {\\n        const results = await searchMovies(searchValue, contains);\\n        if (!ignore) setSearchResults(results);\\n      } catch {\\n        if (!ignore) {\\n          setError(\\\"Failed to fetch movies. Please try again.\\\");\\n          setSearchResults([]);\\n        }\\n      } finally {\\n        if (!ignore) setIsLoading(false);\\n      }\\n    }, 300);\\n\\n    return () => {\\n      clearTimeout(timeoutId);\\n      ignore = true;\\n    };\\n  }, [searchValue, contains]);\\n\\n  let status: ReactNode = `${searchResults.length} result${searchResults.length === 1 ? \\\"\\\" : \\\"s\\\"} found`;\\n  if (isLoading) {\\n    status = (\\n      <span className=\\\"flex items-center justify-between gap-2 text-muted-foreground\\\">\\n        Searching...\\n        <Spinner className=\\\"size-4.5 sm:size-4\\\" />\\n      </span>\\n    );\\n  } else if (error) {\\n    status = (\\n      <span className=\\\"font-normal text-destructive text-sm\\\">{error}</span>\\n    );\\n  } else if (searchResults.length === 0 && searchValue) {\\n    status = (\\n      <span className=\\\"font-normal text-muted-foreground text-sm\\\">\\n        Movie or year \\\"{searchValue}\\\" does not exist in the Top 100 IMDb movies\\n      </span>\\n    );\\n  }\\n\\n  const shouldRenderPopup = searchValue !== \\\"\\\";\\n\\n  return (\\n    <Autocomplete\\n      filter={null}\\n      items={searchResults}\\n      itemToStringValue={(item: unknown) => (item as Movie).title}\\n      onValueChange={setSearchValue}\\n      value={searchValue}\\n    >\\n      <AutocompleteInput placeholder=\\\"e.g. Pulp Fiction or 1994\\\" />\\n      {shouldRenderPopup && (\\n        <AutocompletePopup aria-busy={isLoading || undefined}>\\n          <AutocompleteStatus className=\\\"text-muted-foreground\\\">\\n            {status}\\n          </AutocompleteStatus>\\n          <AutocompleteList>\\n            {(movie: Movie) => (\\n              <AutocompleteItem key={movie.id} value={movie}>\\n                <div className=\\\"flex w-full flex-col gap-1\\\">\\n                  <div className=\\\"font-medium\\\">{movie.title}</div>\\n                  <div className=\\\"text-muted-foreground text-xs\\\">\\n                    {movie.year}\\n                  </div>\\n                </div>\\n              </AutocompleteItem>\\n            )}\\n          </AutocompleteList>\\n        </AutocompletePopup>\\n      )}\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\",\n    \"async\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete form\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\",\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-13.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    const selectedItem = formData.get(\\\"item\\\");\\n    // Base UI extracts the 'label' property from objects, so we need to find the corresponding value\\n    const itemValue =\\n      items.find((item) => item.label === selectedItem)?.value || selectedItem;\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    alert(`Favorite item: ${itemValue || \\\"\\\"}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-64\\\" onSubmit={onSubmit}>\\n      <Field name=\\\"item\\\">\\n        <FieldLabel>Favorite item</FieldLabel>\\n        <Autocomplete items={items} required>\\n          <AutocompleteInput placeholder=\\\"Search items…\\\" />\\n          <AutocompletePopup>\\n            <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n            <AutocompleteList>\\n              {(item) => (\\n                <AutocompleteItem key={item.value} value={item}>\\n                  {item.label}\\n                </AutocompleteItem>\\n              )}\\n            </AutocompleteList>\\n          </AutocompletePopup>\\n        </Autocomplete>\\n        <FieldError>Please select a item.</FieldError>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"form\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete form\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-14.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n        startAddon={<SearchIcon />}\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pill-shaped autocomplete\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-15.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        className=\\\"[--radius-lg:9999px] [--radius:9999px]\\\"\\n        placeholder=\\\"Search items...\\\"\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled autocomplete\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete disabled items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\",\n    \"disabled\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small autocomplete\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n        size=\\\"sm\\\"\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large autocomplete\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n        size=\\\"lg\\\"\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete with label\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <Autocomplete items={items}>\\n      <div className=\\\"flex flex-col items-start gap-2\\\">\\n        <Label htmlFor={id}>Fruits</Label>\\n        <AutocompleteInput\\n          aria-label=\\\"Search items\\\"\\n          id={id}\\n          placeholder=\\\"Search items…\\\"\\n        />\\n      </div>\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete autofilling the input with the highlighted item\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-6.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={items} mode=\\\"both\\\">\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete auto highlighting the first option\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete autoHighlight items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete with clear button\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-8.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n        showClear\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-autocomplete-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-autocomplete-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Autocomplete with trigger and clear buttons\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-autocomplete-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Autocomplete items={items}>\\n      <AutocompleteInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n        showClear\\n        showTrigger\\n      />\\n      <AutocompletePopup>\\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n        <AutocompleteList>\\n          {(item) => (\\n            <AutocompleteItem key={item.value} value={item}>\\n              {item.label}\\n            </AutocompleteItem>\\n          )}\\n        </AutocompleteList>\\n      </AutocompletePopup>\\n    </Autocomplete>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Avatar with image and fallback\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-1.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Avatar>\\n      <AvatarImage\\n        alt=\\\"Luke Tracy\\\"\\n        src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n      />\\n      <AvatarFallback>LT</AvatarFallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Avatar with notification badge\",\n  \"registryDependencies\": [\n    \"@coss/avatar\",\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-10.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar>\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>LT</AvatarFallback>\\n      </Avatar>\\n      <Badge\\n        className=\\\"absolute -end-1 -top-1 rounded-full outline-2 outline-background outline-solid\\\"\\n        size=\\\"sm\\\"\\n      >\\n        6\\n      </Badge>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Rounded avatar with notification badge\",\n  \"registryDependencies\": [\n    \"@coss/avatar\",\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-11.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar className=\\\"rounded-lg\\\">\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback className=\\\"rounded-lg\\\">LT</AvatarFallback>\\n      </Avatar>\\n      <Badge\\n        className=\\\"absolute -end-1.5 -top-1.5 rounded-full outline-2 outline-background outline-solid\\\"\\n        size=\\\"sm\\\"\\n      >\\n        6\\n      </Badge>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Avatar with verified badge\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-12.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar>\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>LT</AvatarFallback>\\n      </Avatar>\\n      <span className=\\\"absolute -end-1.5 -top-1.5\\\">\\n        <span className=\\\"sr-only\\\">Verified</span>\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          height=\\\"20\\\"\\n          viewBox=\\\"0 0 24 24\\\"\\n          width=\\\"20\\\"\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <path\\n            className=\\\"fill-background\\\"\\n            d=\\\"M3.046 8.277A4.402 4.402 0 0 1 8.303 3.03a4.4 4.4 0 0 1 7.411 0 4.397 4.397 0 0 1 5.19 3.068c.207.713.23 1.466.067 2.19a4.4 4.4 0 0 1 0 7.415 4.403 4.403 0 0 1-3.06 5.187 4.398 4.398 0 0 1-2.186.072 4.398 4.398 0 0 1-7.422 0 4.398 4.398 0 0 1-5.257-5.248 4.4 4.4 0 0 1 0-7.437Z\\\"\\n          />\\n          <path\\n            className=\\\"fill-primary\\\"\\n            d=\\\"M4.674 8.954a3.602 3.602 0 0 1 4.301-4.293 3.6 3.6 0 0 1 6.064 0 3.598 3.598 0 0 1 4.3 4.302 3.6 3.6 0 0 1 0 6.067 3.6 3.6 0 0 1-4.29 4.302 3.6 3.6 0 0 1-6.074 0 3.598 3.598 0 0 1-4.3-4.293 3.6 3.6 0 0 1 0-6.085Z\\\"\\n          />\\n          <path\\n            className=\\\"fill-background\\\"\\n            d=\\\"M15.707 9.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z\\\"\\n          />\\n        </svg>\\n      </span>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small overlapping avatar group\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-13.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex -space-x-1.5\\\">\\n      <Avatar className=\\\"size-6 ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U1\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U1</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"size-6 ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U2\\\"\\n          src=\\\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U2</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"size-6 ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U3\\\"\\n          src=\\\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U3</AvatarFallback>\\n      </Avatar>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large overlapping avatar group\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-14.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex -space-x-3\\\">\\n      <Avatar className=\\\"size-12 ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U1\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U1</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"size-12 ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U2\\\"\\n          src=\\\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=144&h=144&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U2</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"size-12 ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U3\\\"\\n          src=\\\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=144&h=144&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U3</AvatarFallback>\\n      </Avatar>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Fallback-only avatar\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-2.tsx\",\n      \"content\": \"import { Avatar, AvatarFallback } from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Avatar>\\n      <AvatarFallback>LT</AvatarFallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Avatars with different sizes\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-3.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex items-center gap-4\\\">\\n      <Avatar>\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>AV</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"size-12\\\">\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>AV</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"size-16\\\">\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=192&h=192&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>AV</AvatarFallback>\\n      </Avatar>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Avatars with different radii\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-4.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex items-center gap-4\\\">\\n      <Avatar className=\\\"rounded-md\\\">\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>AV</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"rounded-xl\\\">\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>AV</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"rounded-full\\\">\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>AV</AvatarFallback>\\n      </Avatar>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Overlapping avatar group\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-5.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex -space-x-[0.6rem]\\\">\\n      <Avatar className=\\\"ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U1\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U1</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U2\\\"\\n          src=\\\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U2</AvatarFallback>\\n      </Avatar>\\n      <Avatar className=\\\"ring-2 ring-background\\\">\\n        <AvatarImage\\n          alt=\\\"U3\\\"\\n          src=\\\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>U3</AvatarFallback>\\n      </Avatar>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Avatar with user icon fallback\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-6.tsx\",\n      \"content\": \"import { UserIcon } from \\\"lucide-react\\\";\\nimport { Avatar, AvatarFallback } from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Avatar>\\n      <AvatarFallback>\\n        <UserIcon className=\\\"size-4\\\" />\\n      </AvatarFallback>\\n    </Avatar>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Avatar with emerald status dot\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-7.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar>\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>LT</AvatarFallback>\\n      </Avatar>\\n      <span\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"absolute end-0 bottom-0 size-2 rounded-full bg-emerald-500 outline-2 outline-background\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Avatar with muted status dot\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-8.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar>\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>LT</AvatarFallback>\\n      </Avatar>\\n      <span\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"absolute end-0 bottom-0 size-2 rounded-full bg-muted-foreground outline-2 outline-background\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-avatar-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-avatar-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Rounded avatar with top-right emerald status\",\n  \"registryDependencies\": [\n    \"@coss/avatar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-avatar-9.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"relative\\\">\\n      <Avatar className=\\\"rounded-lg\\\">\\n        <AvatarImage\\n          alt=\\\"User\\\"\\n          src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback className=\\\"rounded-lg\\\">LT</AvatarFallback>\\n      </Avatar>\\n      <span\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"absolute -end-0.5 -top-0.5 size-2 rounded-full bg-emerald-500 outline-2 outline-background\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-1.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge>Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-10.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge size=\\\"lg\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Badge with icon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-11.tsx\",\n      \"content\": \"import { CheckIcon } from \\\"lucide-react\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Badge variant=\\\"outline\\\">\\n      <CheckIcon aria-hidden=\\\"true\\\" />\\n      Verified\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Badge with link\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-12.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge render={<Link href=\\\"/\\\" />}>Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Badge with count\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-13.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge className=\\\"rounded-full\\\">7</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Full rounded badge (pill)\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-14.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge className=\\\"rounded-full\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Badge with number after text\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-15.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Badge variant=\\\"outline\\\">\\n      Notifications\\n      <span className=\\\"ms-1 font-semibold text-primary\\\">5</span>\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Status badge - Paid\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-16.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Badge variant=\\\"outline\\\">\\n      <span\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n      />\\n      Paid\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Status badge - Pending\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-17.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Badge variant=\\\"outline\\\">\\n      <span aria-hidden=\\\"true\\\" className=\\\"size-1.5 rounded-full bg-amber-500\\\" />\\n      Pending\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Status badge - Failed\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-18.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Badge variant=\\\"outline\\\">\\n      <span aria-hidden=\\\"true\\\" className=\\\"size-1.5 rounded-full bg-red-500\\\" />\\n      Failed\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-19\",\n  \"type\": \"registry:block\",\n  \"description\": \"Selectable badge with checkbox\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/checkbox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-19.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon } from \\\"lucide-react\\\";\\nimport { useId } from \\\"react\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <Badge className=\\\"relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\\\">\\n      <Checkbox\\n        className=\\\"peer sr-only after:absolute after:inset-0\\\"\\n        defaultChecked\\n        id={id}\\n      />\\n      <CheckIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"hidden peer-data-[state=checked]:block\\\"\\n      />\\n      <label\\n        className=\\\"cursor-pointer select-none after:absolute after:inset-0\\\"\\n        htmlFor={id}\\n      >\\n        Selectable\\n      </label>\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\",\n    \"checkbox\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Outline badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-2.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge variant=\\\"outline\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-20.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-20\",\n  \"type\": \"registry:block\",\n  \"description\": \"Removable badge\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-20.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  const [isActive, setIsActive] = useState(true);\\n\\n  if (!isActive) return null;\\n\\n  return (\\n    <Badge className=\\\"gap-0\\\">\\n      Removable\\n      <button\\n        className=\\\"-my-px -ms-px -me-1.5 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-primary-foreground/60 outline-none transition-[color,box-shadow] hover:text-primary-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\\\"\\n        onClick={() => setIsActive(false)}\\n        type=\\\"button\\\"\\n      >\\n        <XIcon aria-hidden=\\\"true\\\" />\\n      </button>\\n    </Badge>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Secondary badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-3.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge variant=\\\"secondary\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Destructive badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-4.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge variant=\\\"destructive\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\",\n    \"error\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Info badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-5.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge variant=\\\"info\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\",\n    \"info\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Success badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-6.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge variant=\\\"success\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\",\n    \"success\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Warning badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-7.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge variant=\\\"warning\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\",\n    \"warning\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Error badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-8.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge variant=\\\"error\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\",\n    \"error\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-badge-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-badge-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-badge-9.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\n\\nexport default function Particle() {\\n  return <Badge size=\\\"sm\\\">Badge</Badge>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-breadcrumb-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-breadcrumb-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Breadcrumb with menu example\",\n  \"registryDependencies\": [\n    \"@coss/breadcrumb\",\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-breadcrumb-1.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbEllipsis,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/\\\" />}>Home</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <Menu>\\n            <MenuTrigger\\n              render={\\n                <Button\\n                  className=\\\"-m-1.5 text-muted-foreground\\\"\\n                  size=\\\"icon-sm\\\"\\n                  variant=\\\"ghost\\\"\\n                />\\n              }\\n            >\\n              <BreadcrumbEllipsis />\\n            </MenuTrigger>\\n            <MenuPopup align=\\\"start\\\">\\n              <MenuItem render={<Link href=\\\"/docs\\\" />}>Docs</MenuItem>\\n              <MenuItem render={<Link href=\\\"/particles\\\" />}>Particles</MenuItem>\\n            </MenuPopup>\\n          </Menu>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/docs/\\\" />}>\\n            Components\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"breadcrumb\",\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-breadcrumb-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-breadcrumb-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Breadcrumb with custom separator\",\n  \"registryDependencies\": [\n    \"@coss/breadcrumb\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-breadcrumb-2.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/\\\" />}>Home</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/docs/\\\" />}>\\n            Components\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"breadcrumb\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-breadcrumb-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-breadcrumb-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Breadcrumb with home icon for home link only\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/breadcrumb\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-breadcrumb-3.tsx\",\n      \"content\": \"import { HomeIcon } from \\\"lucide-react\\\";\\nimport Link from \\\"next/link\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink aria-label=\\\"Home\\\" render={<Link href=\\\"/\\\" />}>\\n            <HomeIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/docs/\\\" />}>\\n            Components\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"breadcrumb\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-breadcrumb-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-breadcrumb-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Breadcrumb with folders icon menu\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/breadcrumb\",\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-breadcrumb-4.tsx\",\n      \"content\": \"import { FoldersIcon } from \\\"lucide-react\\\";\\nimport Link from \\\"next/link\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/\\\" />}>Home</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <Menu>\\n            <MenuTrigger\\n              aria-label=\\\"More pages\\\"\\n              render={\\n                <Button\\n                  className=\\\"-m-1.5 text-muted-foreground\\\"\\n                  size=\\\"icon-sm\\\"\\n                  variant=\\\"ghost\\\"\\n                />\\n              }\\n            >\\n              <FoldersIcon aria-hidden=\\\"true\\\" />\\n            </MenuTrigger>\\n            <MenuPopup align=\\\"start\\\">\\n              <MenuItem render={<Link href=\\\"/docs\\\" />}>Docs</MenuItem>\\n              <MenuItem render={<Link href=\\\"/particles\\\" />}>Particles</MenuItem>\\n            </MenuPopup>\\n          </Menu>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/docs/\\\" />}>\\n            Components\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"breadcrumb\",\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-breadcrumb-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-breadcrumb-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Breadcrumb with icons before text\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/breadcrumb\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-breadcrumb-5.tsx\",\n      \"content\": \"import { ComponentIcon, HomeIcon } from \\\"lucide-react\\\";\\nimport Link from \\\"next/link\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink\\n            className=\\\"inline-flex items-center gap-1.5\\\"\\n            render={<Link href=\\\"/\\\" />}\\n          >\\n            <HomeIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n            Home\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbLink\\n            className=\\\"inline-flex items-center gap-1.5\\\"\\n            render={<Link href=\\\"/docs/\\\" />}\\n          >\\n            <ComponentIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n            Components\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"breadcrumb\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-breadcrumb-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-breadcrumb-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Breadcrumb with dot separators\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/breadcrumb\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-breadcrumb-6.tsx\",\n      \"content\": \"import { HomeIcon } from \\\"lucide-react\\\";\\nimport Link from \\\"next/link\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbPage,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink aria-label=\\\"Home\\\" render={<Link href=\\\"/\\\" />}>\\n            <HomeIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/docs/\\\" />}>\\n            Components\\n          </BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\\n        <BreadcrumbItem>\\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"breadcrumb\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-breadcrumb-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-breadcrumb-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Breadcrumb with select dropdown\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/breadcrumb\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-breadcrumb-7.tsx\",\n      \"content\": \"import { DatabaseIcon } from \\\"lucide-react\\\";\\nimport Link from \\\"next/link\\\";\\nimport {\\n  Breadcrumb,\\n  BreadcrumbItem,\\n  BreadcrumbLink,\\n  BreadcrumbList,\\n  BreadcrumbSeparator,\\n} from \\\"@/registry/default/ui/breadcrumb\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Orion\\\", value: \\\"orion\\\" },\\n  { label: \\\"Sigma\\\", value: \\\"sigma\\\" },\\n  { label: \\\"Dorado\\\", value: \\\"dorado\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Breadcrumb>\\n      <BreadcrumbList>\\n        <BreadcrumbItem>\\n          <BreadcrumbLink render={<Link href=\\\"/\\\" />}>Databases</BreadcrumbLink>\\n        </BreadcrumbItem>\\n        <BreadcrumbSeparator />\\n        <BreadcrumbItem>\\n          <Select\\n            aria-label=\\\"Select database\\\"\\n            defaultValue=\\\"orion\\\"\\n            items={items}\\n          >\\n            <SelectTrigger size=\\\"sm\\\">\\n              <DatabaseIcon />\\n              <SelectValue />\\n            </SelectTrigger>\\n            <SelectPopup>\\n              {items.map(({ label, value }) => (\\n                <SelectItem key={value} value={value}>\\n                  {label}\\n                </SelectItem>\\n              ))}\\n            </SelectPopup>\\n          </Select>\\n        </BreadcrumbItem>\\n      </BreadcrumbList>\\n    </Breadcrumb>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"breadcrumb\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Default button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-1.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button>Button</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-10.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button size=\\\"lg\\\">Button</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Extra-large button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-11.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button size=\\\"xl\\\">Button</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-12.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button disabled>Button</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"disabled\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Icon button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-13.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button aria-label=\\\"Add\\\" size=\\\"icon\\\">\\n      <PlusIcon aria-hidden=\\\"true\\\" />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small icon button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-14.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button aria-label=\\\"Add\\\" size=\\\"icon-sm\\\">\\n      <PlusIcon aria-hidden=\\\"true\\\" />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large icon button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-15.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button aria-label=\\\"Add\\\" size=\\\"icon-lg\\\">\\n      <PlusIcon aria-hidden=\\\"true\\\" />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Button with icon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-16.tsx\",\n      \"content\": \"import { DownloadIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button>\\n      <DownloadIcon aria-hidden=\\\"true\\\" />\\n      Download\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Link rendered as button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-17.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button render={<Link href=\\\"/\\\" />}>Link</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Custom loading button with manual Spinner\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/spinner\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-18.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button disabled>\\n      <Spinner />\\n      Loading...\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"loading\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-19\",\n  \"type\": \"registry:block\",\n  \"description\": \"Expandable show more/less toggle button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-19.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronDownIcon, ChevronUpIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\\n\\n  const toggleExpand = () => {\\n    setIsExpanded((prevState) => !prevState);\\n  };\\n\\n  return (\\n    <Button\\n      aria-controls=\\\"expandable-content\\\"\\n      aria-expanded={isExpanded}\\n      className=\\\"gap-1\\\"\\n      onClick={toggleExpand}\\n      variant=\\\"ghost\\\" // Use this ID on the element that this button controls\\n    >\\n      {isExpanded ? \\\"Show less\\\" : \\\"Show more\\\"}\\n      {isExpanded ? (\\n        <ChevronUpIcon aria-hidden=\\\"true\\\" className=\\\"-me-1\\\" />\\n      ) : (\\n        <ChevronDownIcon aria-hidden=\\\"true\\\" className=\\\"-me-1\\\" />\\n      )}\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Outline button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-2.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button variant=\\\"outline\\\">Outline</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-20.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-20\",\n  \"type\": \"registry:block\",\n  \"description\": \"Back link button with chevron\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-20.tsx\",\n      \"content\": \"import { ChevronLeftIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button variant=\\\"link\\\">\\n      <ChevronLeftIcon aria-hidden=\\\"true\\\" />\\n      Go back\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-21.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-21\",\n  \"type\": \"registry:block\",\n  \"description\": \"Card-style button with heading and description\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-21.tsx\",\n      \"content\": \"import { ChevronRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button className=\\\"h-auto! gap-4 px-4 py-3 text-left\\\" variant=\\\"outline\\\">\\n      <div className=\\\"flex flex-col gap-0.5\\\">\\n        <h3>Talent Agency</h3>\\n        <p className=\\\"whitespace-break-spaces font-normal text-muted-foreground\\\">\\n          Matches for your roster\\n        </p>\\n      </div>\\n      <ChevronRightIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"in-[[data-slot=button]:hover]:translate-x-0.5 transition-transform\\\"\\n      />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-22.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-22\",\n  \"type\": \"registry:block\",\n  \"description\": \"Directional pad control buttons\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-22.tsx\",\n      \"content\": \"import {\\n  ChevronDownIcon,\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  ChevronUpIcon,\\n  CircleIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"inline-grid w-fit grid-cols-3 gap-1\\\">\\n      <Button\\n        aria-label=\\\"Pan camera up\\\"\\n        className=\\\"col-start-2\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <ChevronUpIcon aria-hidden=\\\"true\\\" />\\n      </Button>\\n      <Button\\n        aria-label=\\\"Pan camera left\\\"\\n        className=\\\"col-start-1\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <ChevronLeftIcon aria-hidden=\\\"true\\\" />\\n      </Button>\\n      <div aria-hidden=\\\"true\\\" className=\\\"flex items-center justify-center\\\">\\n        <CircleIcon className=\\\"size-4 opacity-80\\\" />\\n      </div>\\n      <Button aria-label=\\\"Pan camera right\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <ChevronRightIcon aria-hidden=\\\"true\\\" />\\n      </Button>\\n      <Button\\n        aria-label=\\\"Pan camera down\\\"\\n        className=\\\"col-start-2\\\"\\n        size=\\\"icon\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <ChevronDownIcon aria-hidden=\\\"true\\\" />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-23.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-23\",\n  \"type\": \"registry:block\",\n  \"description\": \"Outline like button with count\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-23.tsx\",\n      \"content\": \"import { ThumbsUpIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button className=\\\"pe-0\\\" variant=\\\"outline\\\">\\n      <ThumbsUpIcon aria-hidden=\\\"true\\\" />\\n      Like\\n      <span className=\\\"relative ms-1 px-3 font-medium text-muted-foreground text-xs before:absolute before:inset-0 before:left-0 before:w-px before:bg-input\\\">\\n        86\\n      </span>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-24.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-24\",\n  \"type\": \"registry:block\",\n  \"description\": \"Social login icon buttons\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-24.tsx\",\n      \"content\": \"import {\\n  RiFacebookFill,\\n  RiGithubFill,\\n  RiGoogleFill,\\n  RiTwitterXFill,\\n} from \\\"@remixicon/react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"inline-flex flex-wrap gap-2\\\">\\n      <Button aria-label=\\\"Login with Google\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <RiGoogleFill aria-hidden=\\\"true\\\" />\\n      </Button>\\n      <Button aria-label=\\\"Login with Facebook\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <RiFacebookFill aria-hidden=\\\"true\\\" />\\n      </Button>\\n      <Button aria-label=\\\"Login with X\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <RiTwitterXFill aria-hidden=\\\"true\\\" />\\n      </Button>\\n      <Button aria-label=\\\"Login with GitHub\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <RiGithubFill aria-hidden=\\\"true\\\" />\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-26.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-26\",\n  \"type\": \"registry:block\",\n  \"description\": \"Star button with count badge\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-26.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { StarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  const [isStarred, setIsStarred] = useState(false);\\n  const count = isStarred ? 730 : 729;\\n\\n  return (\\n    <Button onClick={() => setIsStarred(!isStarred)}>\\n      <StarIcon\\n        aria-hidden=\\\"true\\\"\\n        className={`${isStarred ? \\\"fill-yellow-500 text-yellow-500\\\" : undefined}`}\\n      />\\n      <span className=\\\"flex items-baseline gap-2\\\">\\n        {isStarred ? \\\"Starred\\\" : \\\"Star\\\"}\\n        <span className=\\\"text-primary-foreground/60 text-xs\\\">{count}</span>\\n      </span>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-27.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-27\",\n  \"type\": \"registry:block\",\n  \"description\": \"Button group with QR code icon and sign in\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-27.tsx\",\n      \"content\": \"import { QrCodeIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group>\\n      <Button aria-label=\\\"QR code\\\" size=\\\"icon\\\">\\n        <QrCodeIcon aria-hidden=\\\"true\\\" />\\n      </Button>\\n      <GroupSeparator className=\\\"bg-primary/72\\\" />\\n      <Button>Sign in</Button>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-28.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-28\",\n  \"type\": \"registry:block\",\n  \"description\": \"Button with avatar\",\n  \"registryDependencies\": [\n    \"@coss/avatar\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-28.tsx\",\n      \"content\": \"import {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button className=\\\"rounded-full ps-1\\\">\\n      <Avatar className=\\\"size-6\\\">\\n        <AvatarImage\\n          alt=\\\"Luke Tracy\\\"\\n          src=\\\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=128&h=128&dpr=2&q=80\\\"\\n        />\\n        <AvatarFallback>LT</AvatarFallback>\\n      </Avatar>\\n      @georgelucas\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-29.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-29\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pill-shaped button with rounded-full styling\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-29.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button className=\\\"rounded-full\\\">Pill Button</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Secondary button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-3.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button variant=\\\"secondary\\\">Secondary</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-30.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-30\",\n  \"type\": \"registry:block\",\n  \"description\": \"Button with animated arrow on hover\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-30.tsx\",\n      \"content\": \"import { ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button>\\n      Get Started\\n      <ArrowRightIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"in-[[data-slot=button]:hover]:translate-x-0.5 transition-transform\\\"\\n      />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-31.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-31\",\n  \"type\": \"registry:block\",\n  \"description\": \"Button with keyboard shortcut indicator\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/kbd\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-31.tsx\",\n      \"content\": \"import { PrinterIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Kbd, KbdGroup } from \\\"@/registry/default/ui/kbd\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button variant=\\\"outline\\\">\\n      <PrinterIcon aria-hidden=\\\"true\\\" />\\n      Print\\n      <KbdGroup className=\\\"-me-1\\\">\\n        <Kbd>&#8984;</Kbd>\\n        <Kbd>P</Kbd>\\n      </KbdGroup>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"kbd\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-32.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-32\",\n  \"type\": \"registry:block\",\n  \"description\": \"Button with notification badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-32.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button variant=\\\"outline\\\">\\n      Messages\\n      <Badge className=\\\"-me-1\\\" variant=\\\"outline\\\">\\n        18\\n      </Badge>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-33.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-33\",\n  \"type\": \"registry:block\",\n  \"description\": \"Paired buttons (Cancel/Save)\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-33.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"inline-flex items-center gap-2\\\">\\n      <Button variant=\\\"ghost\\\">Cancel</Button>\\n      <Button>Save</Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-34.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-34\",\n  \"type\": \"registry:block\",\n  \"description\": \"Button with animated status dot\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-34.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button variant=\\\"outline\\\">\\n      <span\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"relative size-2 rounded-full bg-emerald-500 before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-emerald-400 before:opacity-75\\\"\\n      />\\n      Online\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-35.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-35\",\n  \"type\": \"registry:block\",\n  \"description\": \"Icon-only copy button with feedback\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-35.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  const [copied, setCopied] = useState(false);\\n\\n  const handleCopy = () => {\\n    navigator.clipboard.writeText(\\\"Text copied!\\\");\\n    setCopied(true);\\n    setTimeout(() => setCopied(false), 2000);\\n  };\\n\\n  return (\\n    <Button\\n      aria-label={copied ? \\\"Copied\\\" : \\\"Copy to clipboard\\\"}\\n      onClick={handleCopy}\\n      size=\\\"icon\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      {copied ? (\\n        <CheckIcon aria-hidden=\\\"true\\\" />\\n      ) : (\\n        <CopyIcon aria-hidden=\\\"true\\\" />\\n      )}\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-36.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-36\",\n  \"type\": \"registry:block\",\n  \"description\": \"Copy button with feedback\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-36.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  const [copied, setCopied] = useState(false);\\n\\n  const handleCopy = () => {\\n    navigator.clipboard.writeText(\\\"Text copied!\\\");\\n    setCopied(true);\\n    setTimeout(() => setCopied(false), 2000);\\n  };\\n\\n  return (\\n    <Button onClick={handleCopy} variant=\\\"outline\\\">\\n      {copied ? (\\n        <>\\n          <CheckIcon aria-hidden=\\\"true\\\" />\\n          Copied\\n        </>\\n      ) : (\\n        <>\\n          <CopyIcon aria-hidden=\\\"true\\\" />\\n          Copy\\n        </>\\n      )}\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-37.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-37\",\n  \"type\": \"registry:block\",\n  \"description\": \"Rotating icon button (FAB-style toggle)\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-37.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { PlusIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  const [open, setOpen] = useState(false);\\n\\n  return (\\n    <Button\\n      aria-expanded={open}\\n      aria-label={open ? \\\"Close menu\\\" : \\\"Open menu\\\"}\\n      className=\\\"rounded-full before:rounded-full\\\"\\n      onClick={() => setOpen((prevState) => !prevState)}\\n      size=\\\"icon\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      <PlusIcon\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"in-[[aria-expanded=true]]:rotate-[135deg] transition-transform duration-500 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)]\\\"\\n      />\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-38.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-38\",\n  \"type\": \"registry:block\",\n  \"description\": \"Social login buttons (Google, X, GitHub)\",\n  \"dependencies\": [\n    \"@remixicon/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-38.tsx\",\n      \"content\": \"import { RiGithubFill, RiGoogleFill, RiTwitterXFill } from \\\"@remixicon/react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Button variant=\\\"outline\\\">\\n        <RiGoogleFill aria-hidden=\\\"true\\\" />\\n        <span className=\\\"flex-1\\\">Login with Google</span>\\n      </Button>\\n      <Button variant=\\\"outline\\\">\\n        <RiTwitterXFill aria-hidden=\\\"true\\\" />\\n        <span className=\\\"flex-1\\\">Login with X</span>\\n      </Button>\\n      <Button variant=\\\"outline\\\">\\n        <RiGithubFill aria-hidden=\\\"true\\\" />\\n        <span className=\\\"flex-1\\\">Login with GitHub</span>\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-39.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-39\",\n  \"type\": \"registry:block\",\n  \"description\": \"Hamburger menu button with animated icon\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-39.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  const [open, setOpen] = useState(false);\\n\\n  return (\\n    <Button\\n      aria-expanded={open}\\n      aria-label={open ? \\\"Close menu\\\" : \\\"Open menu\\\"}\\n      onClick={() => setOpen((prevState) => !prevState)}\\n      size=\\\"icon\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      <svg\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"pointer-events-none\\\"\\n        fill=\\\"none\\\"\\n        height={16}\\n        stroke=\\\"currentColor\\\"\\n        strokeLinecap=\\\"round\\\"\\n        strokeLinejoin=\\\"round\\\"\\n        strokeWidth=\\\"2\\\"\\n        viewBox=\\\"0 0 24 24\\\"\\n        width={16}\\n        xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n      >\\n        <path\\n          className=\\\"origin-center in-[[data-slot=button][aria-expanded=true]]:translate-x-0 -translate-y-[7px] in-[[data-slot=button][aria-expanded=true]]:translate-y-0 in-[[data-slot=button][aria-expanded=true]]:rotate-315 transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)]\\\"\\n          d=\\\"M4 12L20 12\\\"\\n        />\\n        <path\\n          className=\\\"origin-center in-[[data-slot=button][aria-expanded=true]]:rotate-45 transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)]\\\"\\n          d=\\\"M4 12H20\\\"\\n        />\\n        <path\\n          className=\\\"origin-center in-[[data-slot=button][aria-expanded=true]]:translate-y-0 translate-y-[7px] in-[[data-slot=button][aria-expanded=true]]:rotate-135 transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)]\\\"\\n          d=\\\"M4 12H20\\\"\\n        />\\n      </svg>\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Destructive button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-4.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button variant=\\\"destructive\\\">Delete</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-40.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-40\",\n  \"type\": \"registry:block\",\n  \"description\": \"Download button with progress and cancel action\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/spinner\",\n    \"@coss/toast\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-40.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { DownloadIcon, XIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useRef, useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator, GroupText } from \\\"@/registry/default/ui/group\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\nimport { toastManager } from \\\"@/registry/default/ui/toast\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  const [isDownloading, setIsDownloading] = useState(false);\\n  const [progress, setProgress] = useState(0);\\n  const abortControllerRef = useRef<AbortController | null>(null);\\n  const infoToastIdRef = useRef<string | null>(null);\\n\\n  useEffect(() => {\\n    if (!isDownloading) return;\\n\\n    const interval = setInterval(() => {\\n      setProgress((prev) =>\\n        Math.min(99, prev + Math.round(Math.random() * 8 + 2)),\\n      );\\n    }, 300);\\n\\n    return () => clearInterval(interval);\\n  }, [isDownloading]);\\n\\n  async function handleDownload() {\\n    if (isDownloading) return;\\n\\n    setIsDownloading(true);\\n    setProgress(0);\\n    abortControllerRef.current = new AbortController();\\n\\n    infoToastIdRef.current = toastManager.add({\\n      description: \\\"Your download will begin once ready.\\\",\\n      title: \\\"Generating report…\\\",\\n      type: \\\"info\\\",\\n    });\\n\\n    try {\\n      await new Promise<string>((resolve, reject) => {\\n        const shouldSucceed = Math.random() > 0.2;\\n        const timeoutId = setTimeout(() => {\\n          if (shouldSucceed) {\\n            resolve(\\\"Download complete\\\");\\n          } else {\\n            reject(new Error(\\\"Download failed\\\"));\\n          }\\n        }, 4000);\\n\\n        abortControllerRef.current?.signal.addEventListener(\\\"abort\\\", () => {\\n          clearTimeout(timeoutId);\\n          reject(new DOMException(\\\"Cancelled\\\", \\\"AbortError\\\"));\\n        });\\n      });\\n    } catch (err) {\\n      // Close info toast before showing error\\n      if (infoToastIdRef.current) {\\n        toastManager.close(infoToastIdRef.current);\\n        infoToastIdRef.current = null;\\n      }\\n\\n      if (err instanceof DOMException && err.name === \\\"AbortError\\\") {\\n        // Cancelled\\n        toastManager.add({\\n          description: \\\"Report generation was cancelled.\\\",\\n          title: \\\"Cancelled\\\",\\n          type: \\\"error\\\",\\n        });\\n      } else {\\n        // Other errors\\n        toastManager.add({\\n          description: \\\"Please try again later.\\\",\\n          title: \\\"Failed to generate report\\\",\\n          type: \\\"error\\\",\\n        });\\n      }\\n    } finally {\\n      setIsDownloading(false);\\n      setProgress(0);\\n      abortControllerRef.current = null;\\n      infoToastIdRef.current = null;\\n    }\\n  }\\n\\n  function handleCancel() {\\n    abortControllerRef.current?.abort();\\n  }\\n\\n  return (\\n    <TooltipProvider delay={0}>\\n      {isDownloading ? (\\n        <Group>\\n          <GroupText\\n            aria-live=\\\"polite\\\"\\n            className=\\\"cursor-default gap-2\\\"\\n            role=\\\"status\\\"\\n          >\\n            <Spinner />\\n            <span\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"font-medium text-foreground tabular-nums\\\"\\n            >\\n              {progress.toString().padStart(2, \\\"\\\\u2007\\\")}%\\n            </span>\\n            <span className=\\\"sr-only\\\">\\n              Generating report, {progress}% complete\\n            </span>\\n          </GroupText>\\n          <GroupSeparator />\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={\\n                <Button\\n                  aria-label=\\\"Cancel download\\\"\\n                  onClick={handleCancel}\\n                  size=\\\"icon\\\"\\n                  variant=\\\"outline\\\"\\n                />\\n              }\\n            >\\n              <XIcon aria-hidden=\\\"true\\\" />\\n            </TooltipTrigger>\\n            <TooltipPopup>Cancel</TooltipPopup>\\n          </Tooltip>\\n        </Group>\\n      ) : (\\n        <Button onClick={handleDownload} variant=\\\"outline\\\">\\n          <DownloadIcon aria-hidden=\\\"true\\\" />\\n          Download\\n        </Button>\\n      )}\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"group\",\n    \"tooltip\",\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-41.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-41\",\n  \"type\": \"registry:block\",\n  \"description\": \"Button using the built-in loading prop\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-41.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  const [isLoading, setIsLoading] = useState(false);\\n\\n  const handleClick = () => {\\n    setIsLoading(true);\\n\\n    window.setTimeout(() => {\\n      setIsLoading(false);\\n    }, 1000);\\n  };\\n\\n  return (\\n    <Button loading={isLoading} onClick={handleClick}>\\n      Submit\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"loading\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Destructive outline button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-5.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button variant=\\\"destructive-outline\\\">Delete</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Ghost button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-6.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button variant=\\\"ghost\\\">Ghost</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Link button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-7.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button variant=\\\"link\\\">Link</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Extra-small button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-8.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button size=\\\"xs\\\">Button</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-button-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-button-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small button\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-button-9.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\n\\nexport default function Particle() {\\n  return <Button size=\\\"sm\\\">Button</Button>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic calendar\",\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\\n\\n  return <Calendar mode=\\\"single\\\" onSelect={setDate} selected={date} />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with rounded range selection style\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-10.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const [date, setDate] = useState<DateRange | undefined>({\\n    from: today,\\n    to: addDays(today, 3),\\n  });\\n\\n  return (\\n    <Calendar\\n      classNames={{\\n        day: \\\"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-end before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-start\\\",\\n        day_button:\\n          \\\"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\\\",\\n      }}\\n      mode=\\\"range\\\"\\n      onSelect={setDate}\\n      selected={date}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with right-aligned navigation\",\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-11.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  return (\\n    <Calendar\\n      classNames={{\\n        month_caption: \\\"ms-0 me-[calc(var(--cell-size)*2)] justify-start\\\",\\n        nav: \\\"justify-end\\\",\\n      }}\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with week numbers\",\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-12.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport type { WeekNumberProps } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  return (\\n    <Calendar\\n      components={{\\n        WeekNumber: ({ week, ...props }: WeekNumberProps) => {\\n          return (\\n            <th {...props}>\\n              <span className=\\\"inline-flex size-(--cell-size) items-center justify-center\\\">\\n                {week.weekNumber}\\n              </span>\\n            </th>\\n          );\\n        },\\n      }}\\n      fixedWeeks\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n      showWeekNumber\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with year-only combobox dropdown\",\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-13.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport type { DropdownProps } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\ninterface DropdownItem {\\n  disabled?: boolean;\\n  label: string;\\n  value: string;\\n}\\n\\nfunction YearDropdown(props: DropdownProps) {\\n  const { options, value, onChange, \\\"aria-label\\\": ariaLabel } = props;\\n\\n  const items: DropdownItem[] =\\n    options?.map((option) => ({\\n      disabled: option.disabled,\\n      label: option.label,\\n      value: option.value.toString(),\\n    })) ?? [];\\n\\n  const selectedItem = items.find((item) => item.value === value?.toString());\\n\\n  const handleValueChange = (newValue: DropdownItem | null) => {\\n    if (onChange && newValue) {\\n      const syntheticEvent = {\\n        target: { value: newValue.value },\\n      } as React.ChangeEvent<HTMLSelectElement>;\\n      onChange(syntheticEvent);\\n    }\\n  };\\n\\n  return (\\n    <Combobox\\n      aria-label={ariaLabel}\\n      autoHighlight\\n      items={items}\\n      onValueChange={handleValueChange}\\n      value={selectedItem}\\n    >\\n      <ComboboxInput\\n        className=\\\"**:[input]:w-0 **:[input]:flex-1\\\"\\n        onFocus={(e) => e.currentTarget.select()}\\n      />\\n      <ComboboxPopup aria-label={ariaLabel}>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item: DropdownItem) => (\\n            <ComboboxItem\\n              disabled={item.disabled}\\n              key={item.value}\\n              value={item}\\n            >\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\\nexport default function Particle() {\\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\\n  return (\\n    <Calendar\\n      captionLayout=\\\"dropdown-years\\\"\\n      classNames={{\\n        dropdowns: \\\"*:flex-1 *:[span]:text-center\\\",\\n      }}\\n      components={{ Dropdown: YearDropdown }}\\n      endMonth={new Date(2030, 11)}\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n      startMonth={new Date(1930, 0)}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"combobox\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar without arrow navigation (dropdown only)\",\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-14.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport type { DropdownNavProps, DropdownProps } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  const handleCalendarChange = (\\n    _value: string | number,\\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\\n  ) => {\\n    const _event = {\\n      target: {\\n        value: String(_value),\\n      },\\n    } as React.ChangeEvent<HTMLSelectElement>;\\n    _e(_event);\\n  };\\n\\n  return (\\n    <Calendar\\n      captionLayout=\\\"dropdown\\\"\\n      classNames={{\\n        month_caption: \\\"mx-0\\\",\\n      }}\\n      components={{\\n        Dropdown: (props: DropdownProps) => {\\n          const items =\\n            props.options?.map((option) => ({\\n              label: option.label,\\n              value: String(option.value),\\n            })) ?? [];\\n\\n          return (\\n            <Select\\n              items={items}\\n              onValueChange={(value) => {\\n                if (props.onChange && value !== null) {\\n                  handleCalendarChange(value, props.onChange);\\n                }\\n              }}\\n              value={String(props.value)}\\n            >\\n              <SelectTrigger className=\\\"min-w-none\\\">\\n                <SelectValue />\\n              </SelectTrigger>\\n              <SelectPopup>\\n                {items.map((item) => (\\n                  <SelectItem key={item.value} value={item.value}>\\n                    {item.label}\\n                  </SelectItem>\\n                ))}\\n              </SelectPopup>\\n            </Select>\\n          );\\n        },\\n        DropdownNav: (props: DropdownNavProps) => {\\n          return (\\n            <div className=\\\"flex w-full items-center gap-2\\\">\\n              {props.children}\\n            </div>\\n          );\\n        },\\n      }}\\n      defaultMonth={new Date()}\\n      hideNavigation\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n      startMonth={new Date(1980, 6)}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with current month button\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-15.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const selectedDay = addDays(today, -28);\\n  const [month, setMonth] = useState(selectedDay);\\n  const [date, setDate] = useState<Date | undefined>(selectedDay);\\n\\n  return (\\n    <div className=\\\"flex flex-col items-start gap-2\\\">\\n      <Calendar\\n        mode=\\\"single\\\"\\n        month={month}\\n        onMonthChange={setMonth}\\n        onSelect={setDate}\\n        selected={date}\\n      />\\n      <Button onClick={() => setMonth(today)} size=\\\"sm\\\" variant=\\\"outline\\\">\\n        Current month\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with today button\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-16.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const selectedDay = addDays(today, -28);\\n  const [month, setMonth] = useState(selectedDay);\\n  const [date, setDate] = useState<Date | undefined>(selectedDay);\\n\\n  return (\\n    <div className=\\\"flex flex-col items-start gap-2\\\">\\n      <Calendar\\n        mode=\\\"single\\\"\\n        month={month}\\n        onMonthChange={setMonth}\\n        onSelect={setDate}\\n        selected={date}\\n      />\\n      <Button\\n        onClick={() => {\\n          setDate(today);\\n          setMonth(today);\\n        }}\\n        size=\\\"sm\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        Today\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with date input\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/field\",\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-17.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format, isValid, parse } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>(() => new Date());\\n  const [month, setMonth] = useState<Date>(() => new Date());\\n  const [inputValue, setInputValue] = useState(() =>\\n    format(new Date(), \\\"yyyy-MM-dd\\\"),\\n  );\\n\\n  const handleDayPickerSelect = (selectedDate: Date | undefined) => {\\n    if (!selectedDate) {\\n      setInputValue(\\\"\\\");\\n      setDate(undefined);\\n    } else {\\n      setDate(selectedDate);\\n      setMonth(selectedDate);\\n      setInputValue(format(selectedDate, \\\"yyyy-MM-dd\\\"));\\n    }\\n  };\\n\\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\\n    const value = e.target.value;\\n    setInputValue(value);\\n\\n    if (value) {\\n      const parsedDate = parse(value, \\\"yyyy-MM-dd\\\", new Date());\\n      if (isValid(parsedDate)) {\\n        setDate(parsedDate);\\n        setMonth(parsedDate);\\n      }\\n    } else {\\n      setDate(undefined);\\n    }\\n  };\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Calendar\\n        mode=\\\"single\\\"\\n        month={month}\\n        onMonthChange={setMonth}\\n        onSelect={handleDayPickerSelect}\\n        selected={date}\\n      />\\n      <Field className=\\\"flex-row items-center gap-4\\\">\\n        <FieldLabel className=\\\"whitespace-nowrap\\\">Enter date</FieldLabel>\\n        <InputGroup>\\n          <InputGroupInput\\n            aria-label=\\\"Select date\\\"\\n            className=\\\"*:[input]:[&::-webkit-calendar-picker-indicator]:hidden *:[input]:[&::-webkit-calendar-picker-indicator]:appearance-none\\\"\\n            onChange={handleInputChange}\\n            type=\\\"date\\\"\\n            value={inputValue}\\n          />\\n          <InputGroupAddon>\\n            <CalendarIcon aria-hidden=\\\"true\\\" />\\n          </InputGroupAddon>\\n        </InputGroup>\\n      </Field>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"input\",\n    \"field\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with time input\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/field\",\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-18.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ClockIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>(() => new Date());\\n  const [month, setMonth] = useState<Date>(() => new Date());\\n  const [timeValue, setTimeValue] = useState(\\\"12:00:00\\\");\\n\\n  const handleDayPickerSelect = (selectedDate: Date | undefined) => {\\n    setDate(selectedDate);\\n    if (selectedDate) {\\n      setMonth(selectedDate);\\n    }\\n  };\\n\\n  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {\\n    setTimeValue(e.target.value);\\n  };\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Calendar\\n        mode=\\\"single\\\"\\n        month={month}\\n        onMonthChange={setMonth}\\n        onSelect={handleDayPickerSelect}\\n        selected={date}\\n      />\\n      <Field className=\\\"flex-row items-center gap-3\\\">\\n        <FieldLabel className=\\\"whitespace-nowrap text-xs\\\">\\n          Enter time\\n        </FieldLabel>\\n        <InputGroup className=\\\"grow\\\">\\n          <InputGroupInput\\n            aria-label=\\\"Select time\\\"\\n            className=\\\"*:[input]:[&::-webkit-calendar-picker-indicator]:hidden *:[input]:[&::-webkit-calendar-picker-indicator]:appearance-none\\\"\\n            onChange={handleTimeChange}\\n            step=\\\"1\\\"\\n            type=\\\"time\\\"\\n            value={timeValue}\\n          />\\n          <InputGroupAddon>\\n            <ClockIcon aria-hidden=\\\"true\\\" />\\n          </InputGroupAddon>\\n        </InputGroup>\\n      </Field>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"input\",\n    \"field\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-19\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with time slots (appointment picker)\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/scroll-area\",\n    \"@coss/toggle\",\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-19.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\nimport { ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const [date, setDate] = useState<Date>(today);\\n  const [time, setTime] = useState<string | null>(null);\\n\\n  const timeSlots = [\\n    { available: false, time: \\\"09:00\\\" },\\n    { available: false, time: \\\"09:30\\\" },\\n    { available: true, time: \\\"10:00\\\" },\\n    { available: true, time: \\\"10:30\\\" },\\n    { available: true, time: \\\"11:00\\\" },\\n    { available: true, time: \\\"11:30\\\" },\\n    { available: false, time: \\\"12:00\\\" },\\n    { available: true, time: \\\"12:30\\\" },\\n    { available: true, time: \\\"13:00\\\" },\\n    { available: true, time: \\\"13:30\\\" },\\n    { available: true, time: \\\"14:00\\\" },\\n    { available: false, time: \\\"14:30\\\" },\\n    { available: false, time: \\\"15:00\\\" },\\n    { available: true, time: \\\"15:30\\\" },\\n    { available: true, time: \\\"16:00\\\" },\\n    { available: true, time: \\\"16:30\\\" },\\n    { available: true, time: \\\"17:00\\\" },\\n    { available: true, time: \\\"17:30\\\" },\\n  ];\\n\\n  return (\\n    <div className=\\\"flex max-sm:flex-col\\\">\\n      <Calendar\\n        className=\\\"max-sm:pb-3 sm:pe-5\\\"\\n        disabled={[{ before: today }]}\\n        mode=\\\"single\\\"\\n        onSelect={(newDate) => {\\n          if (newDate) {\\n            setDate(newDate);\\n            setTime(null);\\n          }\\n        }}\\n        selected={date}\\n      />\\n      <div className=\\\"relative w-full max-sm:h-48 sm:w-40\\\">\\n        <div className=\\\"absolute inset-0 max-sm:border-t\\\">\\n          <ScrollArea className=\\\"h-full sm:border-s\\\" scrollbarGutter scrollFade>\\n            <div className=\\\"flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2\\\">\\n              <div className=\\\"flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5\\\">\\n                {format(date, \\\"EEEE, d\\\")}\\n              </div>\\n              <ToggleGroup\\n                className=\\\"grid w-full gap-1.5 max-sm:grid-cols-2 sm:px-5\\\"\\n                onValueChange={(values) => setTime(values[0] || null)}\\n                value={time ? [time] : []}\\n              >\\n                {timeSlots.map(({ time: timeSlot, available }) => (\\n                  <Toggle\\n                    disabled={!available}\\n                    key={timeSlot}\\n                    size=\\\"sm\\\"\\n                    value={timeSlot}\\n                    variant=\\\"outline\\\"\\n                  >\\n                    {timeSlot}\\n                  </Toggle>\\n                ))}\\n              </ToggleGroup>\\n            </div>\\n          </ScrollArea>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"toggle\",\n    \"toggle group\",\n    \"scroll area\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with custom cell size\",\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\nimport * as React from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\\n  return (\\n    <Calendar\\n      className=\\\"[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]\\\"\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-20.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-20\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with date presets\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-20.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { subDays, subMonths, subYears } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const yesterday = subDays(today, 1);\\n  const lastWeek = subDays(today, 7);\\n  const lastMonth = subMonths(today, 1);\\n  const lastYear = subYears(today, 1);\\n  const [month, setMonth] = useState(today);\\n  const [date, setDate] = useState<Date>(today);\\n\\n  return (\\n    <div className=\\\"flex max-sm:flex-col\\\">\\n      <div className=\\\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\\\">\\n        <div className=\\\"flex h-full flex-col sm:border-e sm:pe-3\\\">\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(today);\\n              setMonth(today);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Today\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(yesterday);\\n              setMonth(yesterday);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Yesterday\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(lastWeek);\\n              setMonth(lastWeek);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Last week\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(lastMonth);\\n              setMonth(lastMonth);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Last month\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(lastYear);\\n              setMonth(lastYear);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Last year\\n          </Button>\\n        </div>\\n      </div>\\n      <Calendar\\n        className=\\\"max-sm:pb-3 sm:ps-5\\\"\\n        disabled={[{ after: today }]}\\n        mode=\\\"single\\\"\\n        month={month}\\n        onMonthChange={setMonth}\\n        onSelect={(newDate) => {\\n          if (newDate) {\\n            setDate(newDate);\\n          }\\n        }}\\n        selected={date}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-21.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-21\",\n  \"type\": \"registry:block\",\n  \"description\": \"Range calendar with date presets\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-21.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  endOfMonth,\\n  endOfYear,\\n  startOfMonth,\\n  startOfYear,\\n  subDays,\\n  subMonths,\\n  subYears,\\n} from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const yesterday = {\\n    from: subDays(today, 1),\\n    to: subDays(today, 1),\\n  };\\n  const last7Days = {\\n    from: subDays(today, 6),\\n    to: today,\\n  };\\n  const last30Days = {\\n    from: subDays(today, 29),\\n    to: today,\\n  };\\n  const monthToDate = {\\n    from: startOfMonth(today),\\n    to: today,\\n  };\\n  const lastMonth = {\\n    from: startOfMonth(subMonths(today, 1)),\\n    to: endOfMonth(subMonths(today, 1)),\\n  };\\n  const yearToDate = {\\n    from: startOfYear(today),\\n    to: today,\\n  };\\n  const lastYear = {\\n    from: startOfYear(subYears(today, 1)),\\n    to: endOfYear(subYears(today, 1)),\\n  };\\n  const [month, setMonth] = useState(today);\\n  const [date, setDate] = useState<DateRange | undefined>(last7Days);\\n\\n  return (\\n    <div className=\\\"flex max-sm:flex-col\\\">\\n      <div className=\\\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\\\">\\n        <div className=\\\"flex h-full flex-col sm:border-e sm:pe-3\\\">\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate({\\n                from: today,\\n                to: today,\\n              });\\n              setMonth(today);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Today\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(yesterday);\\n              setMonth(yesterday.to);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Yesterday\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(last7Days);\\n              setMonth(last7Days.to);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Last 7 days\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(last30Days);\\n              setMonth(last30Days.to);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Last 30 days\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(monthToDate);\\n              setMonth(monthToDate.to);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Month to date\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(lastMonth);\\n              setMonth(lastMonth.to);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Last month\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(yearToDate);\\n              setMonth(yearToDate.to);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Year to date\\n          </Button>\\n          <Button\\n            className=\\\"w-full justify-start\\\"\\n            onClick={() => {\\n              setDate(lastYear);\\n              setMonth(lastYear.to);\\n            }}\\n            size=\\\"sm\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            Last year\\n          </Button>\\n        </div>\\n      </div>\\n      <Calendar\\n        className=\\\"max-sm:pb-3 sm:ps-5\\\"\\n        disabled={[{ after: today }]}\\n        mode=\\\"range\\\"\\n        month={month}\\n        onMonthChange={setMonth}\\n        onSelect={(newDate) => {\\n          if (newDate) {\\n            setDate(newDate);\\n          }\\n        }}\\n        selected={date}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-22.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-22\",\n  \"type\": \"registry:block\",\n  \"description\": \"Two months calendar\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-22.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const [date, setDate] = useState<DateRange | undefined>({\\n    from: today,\\n    to: addDays(today, 25),\\n  });\\n\\n  return (\\n    <Calendar\\n      classNames={{\\n        month:\\n          \\\"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\\\",\\n        months: \\\"gap-8\\\",\\n      }}\\n      mode=\\\"range\\\"\\n      numberOfMonths={2}\\n      onSelect={setDate}\\n      pagedNavigation\\n      selected={date}\\n      showOutsideDays={false}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2\n  },\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-23.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-23\",\n  \"type\": \"registry:block\",\n  \"description\": \"Three months calendar\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-23.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const [date, setDate] = useState<DateRange | undefined>({\\n    from: today,\\n    to: addDays(today, 48),\\n  });\\n\\n  return (\\n    <Calendar\\n      classNames={{\\n        month:\\n          \\\"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\\\",\\n        months: \\\"sm:flex-col md:flex-row gap-8\\\",\\n      }}\\n      mode=\\\"range\\\"\\n      numberOfMonths={3}\\n      onSelect={setDate}\\n      pagedNavigation\\n      selected={date}\\n      showOutsideDays={false}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2\n  },\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-24.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-24\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pricing calendar with custom day buttons\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-24.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\nimport type { DayButtonProps } from \\\"react-day-picker\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nconst GOOD_PRICE_THRESHOLD = 100;\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const [date, setDate] = useState<Date | undefined>(today);\\n\\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\\n    {},\\n  );\\n  useEffect(() => {\\n    const generateMockPriceData = () => {\\n      const data: Record<string, number> = {};\\n      const todayDate = new Date();\\n\\n      for (let i = 0; i < 180; i++) {\\n        const date = new Date(todayDate);\\n        date.setDate(todayDate.getDate() + i);\\n        const dateKey = format(date, \\\"yyyy-MM-dd\\\");\\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\\n        data[dateKey] = randomPrice;\\n      }\\n      return data;\\n    };\\n    setMockPriceData(generateMockPriceData());\\n  }, []);\\n\\n  const isDateDisabled = (date: Date) => {\\n    return !mockPriceData[format(date, \\\"yyyy-MM-dd\\\")];\\n  };\\n\\n  return (\\n    <Calendar\\n      classNames={{\\n        day_button: \\\"size-12\\\",\\n        month:\\n          \\\"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\\\",\\n        months: \\\"sm:flex-col md:flex-row gap-8\\\",\\n        today: \\\"*:after:hidden\\\",\\n        weekday: \\\"w-12\\\",\\n      }}\\n      components={{\\n        DayButton: (props: DayButtonProps) => (\\n          <DayButton {...props} prices={mockPriceData} />\\n        ),\\n      }}\\n      disabled={isDateDisabled}\\n      mode=\\\"single\\\"\\n      numberOfMonths={2}\\n      onSelect={setDate}\\n      pagedNavigation\\n      selected={date}\\n      showOutsideDays={false}\\n    />\\n  );\\n}\\n\\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\\n  const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\\n  const price = prices[format(day.date, \\\"yyyy-MM-dd\\\")];\\n  const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\\n\\n  return (\\n    <button {...buttonProps}>\\n      <span className=\\\"flex flex-col\\\">\\n        {props.children}\\n        {price && (\\n          <span\\n            className={cn(\\n              \\\"font-normal text-xs\\\",\\n              isGoodPrice\\n                ? \\\"text-emerald-500\\\"\\n                : \\\"in-data-selected:text-primary-foreground/70 text-muted-foreground\\\",\\n            )}\\n          >\\n            ${price}\\n          </span>\\n        )}\\n      </span>\\n    </button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"colSpan\": 2\n  },\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with date range selection\",\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const [range, setRange] = React.useState<DateRange | undefined>({\\n    from: new Date(),\\n    to: new Date(new Date().setDate(new Date().getDate() + 7)),\\n  });\\n\\n  return <Calendar mode=\\\"range\\\" onSelect={setRange} selected={range} />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with month/year dropdown navigation\",\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\nimport * as React from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\\n  return (\\n    <Calendar\\n      captionLayout=\\\"dropdown\\\"\\n      endMonth={new Date(2030, 11)}\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n      startMonth={new Date(1930, 0)}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with custom Select dropdown for month/year\",\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\nimport * as React from \\\"react\\\";\\nimport type { DropdownProps } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nfunction CalendarDropdown(props: DropdownProps) {\\n  const { options, value, onChange, \\\"aria-label\\\": ariaLabel } = props;\\n\\n  const handleValueChange = (newValue: string | null) => {\\n    if (onChange && newValue) {\\n      const syntheticEvent = {\\n        target: { value: newValue },\\n      } as React.ChangeEvent<HTMLSelectElement>;\\n      onChange(syntheticEvent);\\n    }\\n  };\\n\\n  const items =\\n    options?.map((option) => ({\\n      disabled: option.disabled,\\n      label: option.label,\\n      value: option.value.toString(),\\n    })) ?? [];\\n\\n  return (\\n    <Select\\n      aria-label={ariaLabel}\\n      items={items}\\n      onValueChange={handleValueChange}\\n      value={value?.toString()}\\n    >\\n      <SelectTrigger className=\\\"min-w-none\\\">\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map((item) => (\\n          <SelectItem\\n            disabled={item.disabled}\\n            key={item.value}\\n            value={item.value}\\n          >\\n            {item.label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\\nexport default function Particle() {\\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\\n  return (\\n    <Calendar\\n      captionLayout=\\\"dropdown\\\"\\n      components={{ Dropdown: CalendarDropdown }}\\n      endMonth={new Date(2030, 11)}\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n      startMonth={new Date(1930, 0)}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with Combobox dropdown for month/year\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-6.tsx\",\n      \"content\": \"\\\"use client\\\";\\nimport * as React from \\\"react\\\";\\nimport type { DropdownProps } from \\\"react-day-picker\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\ninterface DropdownItem {\\n  disabled?: boolean;\\n  label: string;\\n  value: string;\\n}\\n\\nfunction CalendarDropdown(props: DropdownProps) {\\n  const { options, value, onChange, \\\"aria-label\\\": ariaLabel } = props;\\n\\n  const items: DropdownItem[] =\\n    options?.map((option) => ({\\n      disabled: option.disabled,\\n      label: option.label,\\n      value: option.value.toString(),\\n    })) ?? [];\\n\\n  const selectedItem = items.find((item) => item.value === value?.toString());\\n\\n  const handleValueChange = (newValue: DropdownItem | null) => {\\n    if (onChange && newValue) {\\n      const syntheticEvent = {\\n        target: { value: newValue.value },\\n      } as React.ChangeEvent<HTMLSelectElement>;\\n      onChange(syntheticEvent);\\n    }\\n  };\\n\\n  return (\\n    <Combobox\\n      aria-label={ariaLabel}\\n      autoHighlight\\n      items={items}\\n      onValueChange={handleValueChange}\\n      value={selectedItem}\\n    >\\n      <ComboboxInput\\n        className=\\\"**:[input]:w-0 **:[input]:flex-1\\\"\\n        onFocus={(e) => e.currentTarget.select()}\\n      />\\n      <ComboboxPopup aria-label={ariaLabel}>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item: DropdownItem) => (\\n            <ComboboxItem\\n              disabled={item.disabled}\\n              key={item.value}\\n              value={item}\\n            >\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\\nexport default function Particle() {\\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\\n  return (\\n    <Calendar\\n      captionLayout=\\\"dropdown\\\"\\n      components={{ Dropdown: CalendarDropdown }}\\n      endMonth={new Date(2030, 11)}\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n      startMonth={new Date(1930, 0)}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\",\n    \"combobox\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with disabled dates\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays } from \\\"date-fns\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n\\n  return (\\n    <Calendar\\n      disabled={[\\n        { before: new Date() },\\n        new Date(),\\n        { dayOfWeek: [0, 6] },\\n        {\\n          from: addDays(today, 14),\\n          to: addDays(today, 16),\\n        },\\n        {\\n          from: addDays(today, 23),\\n          to: addDays(today, 24),\\n        },\\n      ]}\\n      excludeDisabled\\n      mode=\\\"range\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with multiple date selection\",\n  \"dependencies\": [\n    \"date-fns\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-8.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays, subDays } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const [date, setDate] = useState<Date[] | undefined>([\\n    subDays(today, 17),\\n    addDays(today, 2),\\n    addDays(today, 6),\\n    addDays(today, 8),\\n  ]);\\n\\n  return <Calendar mode=\\\"multiple\\\" onSelect={setDate} selected={date} />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-calendar-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-calendar-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Calendar with rounded day buttons\",\n  \"registryDependencies\": [\n    \"@coss/calendar\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-calendar-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>(new Date());\\n\\n  return (\\n    <Calendar\\n      classNames={{\\n        day_button: \\\"rounded-full\\\",\\n      }}\\n      mode=\\\"single\\\"\\n      onSelect={setDate}\\n      selected={date}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"calendar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"A basic card with header and footer\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-1.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardDescription,\\n  CardFooter,\\n  CardHeader,\\n  CardPanel,\\n  CardTitle,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst frameworkOptions = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Remix\\\", value: \\\"remix\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Card className=\\\"w-full max-w-xs\\\">\\n      <CardHeader>\\n        <CardTitle>Create project</CardTitle>\\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\\n      </CardHeader>\\n      <CardPanel>\\n        <Form>\\n          <Field>\\n            <FieldLabel>Name</FieldLabel>\\n            <Input placeholder=\\\"Name of your project\\\" type=\\\"text\\\" />\\n          </Field>\\n          <Field>\\n            <FieldLabel>Framework</FieldLabel>\\n            <Select defaultValue=\\\"next\\\" items={frameworkOptions}>\\n              <SelectTrigger>\\n                <SelectValue />\\n              </SelectTrigger>\\n              <SelectPopup>\\n                {frameworkOptions.map(({ label, value }) => (\\n                  <SelectItem key={value} value={value}>\\n                    {label}\\n                  </SelectItem>\\n                ))}\\n              </SelectPopup>\\n            </Select>\\n          </Field>\\n          <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n            Deploy\\n          </Button>\\n        </Form>\\n      </CardPanel>\\n      <CardFooter>\\n        <div className=\\\"flex gap-1 text-muted-foreground text-xs\\\">\\n          <CircleAlertIcon className=\\\"size-3 h-lh shrink-0\\\" />\\n          <p>This will take a few seconds to complete.</p>\\n        </div>\\n      </CardFooter>\\n    </Card>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Card within a frame with header and footer\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/frame\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-10.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Card, CardPanel } from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport {\\n  Frame,\\n  FrameDescription,\\n  FrameFooter,\\n  FrameHeader,\\n  FrameTitle,\\n} from \\\"@/registry/default/ui/frame\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst frameworkOptions = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Remix\\\", value: \\\"remix\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Frame className=\\\"w-full max-w-xs\\\">\\n      <FrameHeader>\\n        <FrameTitle>Create project</FrameTitle>\\n        <FrameDescription>\\n          Deploy your new project in one-click.\\n        </FrameDescription>\\n      </FrameHeader>\\n      <Card>\\n        <CardPanel>\\n          <Form>\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input placeholder=\\\"Name of your project\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Framework</FieldLabel>\\n              <Select defaultValue=\\\"next\\\" items={frameworkOptions}>\\n                <SelectTrigger>\\n                  <SelectValue />\\n                </SelectTrigger>\\n                <SelectPopup>\\n                  {frameworkOptions.map(({ label, value }) => (\\n                    <SelectItem key={value} value={value}>\\n                      {label}\\n                    </SelectItem>\\n                  ))}\\n                </SelectPopup>\\n              </Select>\\n            </Field>\\n            <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n              Deploy\\n            </Button>\\n          </Form>\\n        </CardPanel>\\n      </Card>\\n      <FrameFooter>\\n        <div className=\\\"flex gap-1 text-muted-foreground text-xs\\\">\\n          <CircleAlertIcon className=\\\"size-3 h-lh shrink-0\\\" />\\n          <p>This will take a few seconds to complete.</p>\\n        </div>\\n      </FrameFooter>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\",\n    \"frame\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"CardFrame with header action\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/empty\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-11.tsx\",\n      \"content\": \"import { FolderIcon, PlusIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardFrame,\\n  CardFrameAction,\\n  CardFrameDescription,\\n  CardFrameHeader,\\n  CardFrameTitle,\\n  CardPanel,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport {\\n  Empty,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyMedia,\\n  EmptyTitle,\\n} from \\\"@/registry/default/ui/empty\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <CardFrame className=\\\"w-full\\\">\\n      <CardFrameHeader>\\n        <CardFrameTitle>Project</CardFrameTitle>\\n        <CardFrameDescription>Manage your projects</CardFrameDescription>\\n        <CardFrameAction>\\n          <Button variant=\\\"outline\\\">\\n            <PlusIcon />\\n            Add\\n          </Button>\\n        </CardFrameAction>\\n      </CardFrameHeader>\\n      <Card>\\n        <CardPanel>\\n          <Empty>\\n            <EmptyHeader>\\n              <EmptyMedia variant=\\\"icon\\\">\\n                <FolderIcon />\\n              </EmptyMedia>\\n              <EmptyTitle>No projects yet</EmptyTitle>\\n              <EmptyDescription>\\n                Get started by adding your first project.\\n              </EmptyDescription>\\n            </EmptyHeader>\\n          </Empty>\\n        </CardPanel>\\n      </Card>\\n    </CardFrame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"frame\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Authentication card with actions\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-2.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardAction,\\n  CardHeader,\\n  CardPanel,\\n  CardTitle,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Card className=\\\"w-full max-w-xs\\\">\\n      <CardHeader>\\n        <CardTitle>Login to your account</CardTitle>\\n        <CardAction>\\n          <Link\\n            className=\\\"text-muted-foreground text-sm leading-4.5 hover:underline\\\"\\n            href=\\\"#\\\"\\n          >\\n            Sign up\\n          </Link>\\n        </CardAction>\\n      </CardHeader>\\n      <CardPanel>\\n        <Form>\\n          <Field>\\n            <FieldLabel>Email</FieldLabel>\\n            <Input placeholder=\\\"Enter your email\\\" type=\\\"email\\\" />\\n          </Field>\\n          <Field>\\n            <FieldLabel>Password</FieldLabel>\\n            <Input placeholder=\\\"Enter your password\\\" type=\\\"password\\\" />\\n          </Field>\\n          <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n            Login\\n          </Button>\\n        </Form>\\n      </CardPanel>\\n    </Card>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Authentication card with separators\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-3.tsx\",\n      \"content\": \"import { ShieldAlertIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardDescription,\\n  CardFooter,\\n  CardHeader,\\n  CardPanel,\\n  CardTitle,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Card className=\\\"w-full max-w-xs\\\">\\n      <CardHeader className=\\\"border-b\\\">\\n        <CardTitle>Login to your account</CardTitle>\\n        <CardDescription>Enter email and password to login</CardDescription>\\n      </CardHeader>\\n      <CardPanel>\\n        <Form>\\n          <Field>\\n            <FieldLabel>Email</FieldLabel>\\n            <Input placeholder=\\\"Enter your email\\\" type=\\\"email\\\" />\\n          </Field>\\n          <Field>\\n            <FieldLabel>Password</FieldLabel>\\n            <Input placeholder=\\\"Enter your password\\\" type=\\\"password\\\" />\\n          </Field>\\n          <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n            Login\\n          </Button>\\n        </Form>\\n      </CardPanel>\\n      <CardFooter className=\\\"border-t\\\">\\n        <div className=\\\"flex gap-1 text-muted-foreground text-xs\\\">\\n          <ShieldAlertIcon className=\\\"size-3 h-lh shrink-0\\\" />\\n          <p>The information you enter is encrypted and stored securely.</p>\\n        </div>\\n      </CardFooter>\\n    </Card>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Framed card with footer\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-4.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardDescription,\\n  CardFrame,\\n  CardFrameFooter,\\n  CardHeader,\\n  CardPanel,\\n  CardTitle,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst frameworkOptions = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Remix\\\", value: \\\"remix\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <CardFrame className=\\\"w-full max-w-xs\\\">\\n      <Card>\\n        <CardHeader>\\n          <CardTitle>Create project</CardTitle>\\n          <CardDescription>\\n            Deploy your new project in one-click.\\n          </CardDescription>\\n        </CardHeader>\\n        <CardPanel>\\n          <Form>\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input placeholder=\\\"Name of your project\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Framework</FieldLabel>\\n              <Select defaultValue=\\\"next\\\" items={frameworkOptions}>\\n                <SelectTrigger>\\n                  <SelectValue />\\n                </SelectTrigger>\\n                <SelectPopup>\\n                  {frameworkOptions.map(({ label, value }) => (\\n                    <SelectItem key={value} value={value}>\\n                      {label}\\n                    </SelectItem>\\n                  ))}\\n                </SelectPopup>\\n              </Select>\\n            </Field>\\n            <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n              Deploy\\n            </Button>\\n          </Form>\\n        </CardPanel>\\n      </Card>\\n      <CardFrameFooter>\\n        <div className=\\\"flex gap-1 text-muted-foreground text-xs\\\">\\n          <CircleAlertIcon className=\\\"size-3 h-lh shrink-0\\\" />\\n          <p>This will take a few seconds to complete.</p>\\n        </div>\\n      </CardFrameFooter>\\n    </CardFrame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Framed card with header\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-5.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardFooter,\\n  CardFrame,\\n  CardFrameDescription,\\n  CardFrameHeader,\\n  CardFrameTitle,\\n  CardPanel,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst frameworkOptions = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Remix\\\", value: \\\"remix\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <CardFrame className=\\\"w-full max-w-xs\\\">\\n      <CardFrameHeader>\\n        <CardFrameTitle>Create project</CardFrameTitle>\\n        <CardFrameDescription>\\n          Deploy your new project in one-click.\\n        </CardFrameDescription>\\n      </CardFrameHeader>\\n      <Card>\\n        <Form className=\\\"contents\\\">\\n          <CardPanel>\\n            <div className=\\\"flex flex-col gap-4\\\">\\n              <Field>\\n                <FieldLabel>Name</FieldLabel>\\n                <Input placeholder=\\\"Name of your project\\\" type=\\\"text\\\" />\\n              </Field>\\n              <Field>\\n                <FieldLabel>Framework</FieldLabel>\\n                <Select defaultValue=\\\"next\\\" items={frameworkOptions}>\\n                  <SelectTrigger>\\n                    <SelectValue />\\n                  </SelectTrigger>\\n                  <SelectPopup>\\n                    {frameworkOptions.map(({ label, value }) => (\\n                      <SelectItem key={value} value={value}>\\n                        {label}\\n                      </SelectItem>\\n                    ))}\\n                  </SelectPopup>\\n                </Select>\\n              </Field>\\n            </div>\\n          </CardPanel>\\n          <CardFooter>\\n            <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n              Deploy\\n            </Button>\\n          </CardFooter>\\n        </Form>\\n      </Card>\\n    </CardFrame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Framed card with header and footer\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-6.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardFrame,\\n  CardFrameDescription,\\n  CardFrameFooter,\\n  CardFrameHeader,\\n  CardFrameTitle,\\n  CardPanel,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst frameworkOptions = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Remix\\\", value: \\\"remix\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <CardFrame className=\\\"w-full max-w-xs\\\">\\n      <CardFrameHeader>\\n        <CardFrameTitle>Create project</CardFrameTitle>\\n        <CardFrameDescription>\\n          Deploy your new project in one-click.\\n        </CardFrameDescription>\\n      </CardFrameHeader>\\n      <Card>\\n        <CardPanel>\\n          <Form>\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input placeholder=\\\"Name of your project\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Framework</FieldLabel>\\n              <Select defaultValue=\\\"next\\\" items={frameworkOptions}>\\n                <SelectTrigger>\\n                  <SelectValue />\\n                </SelectTrigger>\\n                <SelectPopup>\\n                  {frameworkOptions.map(({ label, value }) => (\\n                    <SelectItem key={value} value={value}>\\n                      {label}\\n                    </SelectItem>\\n                  ))}\\n                </SelectPopup>\\n              </Select>\\n            </Field>\\n            <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n              Deploy\\n            </Button>\\n          </Form>\\n        </CardPanel>\\n      </Card>\\n      <CardFrameFooter>\\n        <div className=\\\"flex gap-1 text-muted-foreground text-xs\\\">\\n          <CircleAlertIcon className=\\\"size-3 h-lh shrink-0\\\" />\\n          <p>This will take a few seconds to complete.</p>\\n        </div>\\n      </CardFrameFooter>\\n    </CardFrame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Framed card with no rounded bottom\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-7.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardFrame,\\n  CardFrameDescription,\\n  CardFrameFooter,\\n  CardFrameHeader,\\n  CardFrameTitle,\\n  CardPanel,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst frameworkOptions = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Remix\\\", value: \\\"remix\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <CardFrame className=\\\"w-full max-w-xs\\\">\\n      <CardFrameHeader>\\n        <CardFrameTitle>Create project</CardFrameTitle>\\n        <CardFrameDescription>\\n          Deploy your new project in one-click.\\n        </CardFrameDescription>\\n      </CardFrameHeader>\\n      <Card className=\\\"rounded-b-none!\\\">\\n        <CardPanel>\\n          <Form>\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input placeholder=\\\"Name of your project\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Framework</FieldLabel>\\n              <Select defaultValue=\\\"next\\\" items={frameworkOptions}>\\n                <SelectTrigger>\\n                  <SelectValue />\\n                </SelectTrigger>\\n                <SelectPopup>\\n                  {frameworkOptions.map(({ label, value }) => (\\n                    <SelectItem key={value} value={value}>\\n                      {label}\\n                    </SelectItem>\\n                  ))}\\n                </SelectPopup>\\n              </Select>\\n            </Field>\\n            <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n              Deploy\\n            </Button>\\n          </Form>\\n        </CardPanel>\\n      </Card>\\n      <CardFrameFooter>\\n        <div className=\\\"flex gap-1 text-muted-foreground text-xs\\\">\\n          <CircleAlertIcon className=\\\"size-3 h-lh shrink-0\\\" />\\n          <p>This will take a few seconds to complete.</p>\\n        </div>\\n      </CardFrameFooter>\\n    </CardFrame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Card within a frame and footer\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/frame\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-8.tsx\",\n      \"content\": \"import { CircleAlertIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Card,\\n  CardDescription,\\n  CardHeader,\\n  CardPanel,\\n  CardTitle,\\n} from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Frame, FrameFooter } from \\\"@/registry/default/ui/frame\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst frameworkOptions = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Remix\\\", value: \\\"remix\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Frame className=\\\"w-full max-w-xs\\\">\\n      <Card>\\n        <CardHeader>\\n          <CardTitle>Create project</CardTitle>\\n          <CardDescription>\\n            Deploy your new project in one-click.\\n          </CardDescription>\\n        </CardHeader>\\n        <CardPanel>\\n          <Form>\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input placeholder=\\\"Name of your project\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Framework</FieldLabel>\\n              <Select defaultValue=\\\"next\\\" items={frameworkOptions}>\\n                <SelectTrigger>\\n                  <SelectValue />\\n                </SelectTrigger>\\n                <SelectPopup>\\n                  {frameworkOptions.map(({ label, value }) => (\\n                    <SelectItem key={value} value={value}>\\n                      {label}\\n                    </SelectItem>\\n                  ))}\\n                </SelectPopup>\\n              </Select>\\n            </Field>\\n            <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n              Deploy\\n            </Button>\\n          </Form>\\n        </CardPanel>\\n      </Card>\\n      <FrameFooter>\\n        <div className=\\\"flex gap-1 text-muted-foreground text-xs\\\">\\n          <CircleAlertIcon className=\\\"size-3 h-lh shrink-0\\\" />\\n          <p>This will take a few seconds to complete.</p>\\n        </div>\\n      </FrameFooter>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\",\n    \"frame\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-card-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-card-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Card within a frame and footer\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/card\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/frame\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-card-9.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Card, CardPanel } from \\\"@/registry/default/ui/card\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport {\\n  Frame,\\n  FrameDescription,\\n  FrameHeader,\\n  FrameTitle,\\n} from \\\"@/registry/default/ui/frame\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst frameworkOptions = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Remix\\\", value: \\\"remix\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Frame className=\\\"w-full max-w-xs\\\">\\n      <FrameHeader>\\n        <FrameTitle>Create project</FrameTitle>\\n        <FrameDescription>\\n          Deploy your new project in one-click.\\n        </FrameDescription>\\n      </FrameHeader>\\n      <Card>\\n        <CardPanel>\\n          <Form>\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input placeholder=\\\"Name of your project\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Framework</FieldLabel>\\n              <Select defaultValue=\\\"next\\\" items={frameworkOptions}>\\n                <SelectTrigger>\\n                  <SelectValue />\\n                </SelectTrigger>\\n                <SelectPopup>\\n                  {frameworkOptions.map(({ label, value }) => (\\n                    <SelectItem key={value} value={value}>\\n                      {label}\\n                    </SelectItem>\\n                  ))}\\n                </SelectPopup>\\n              </Select>\\n            </Field>\\n            <Button className=\\\"w-full\\\" type=\\\"submit\\\">\\n              Deploy\\n            </Button>\\n          </Form>\\n        </CardPanel>\\n      </Card>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"card\",\n    \"form\",\n    \"frame\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic checkbox\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-1.tsx\",\n      \"content\": \"import { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Label>\\n      <Checkbox />\\n      Accept terms and conditions\\n    </Label>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled checkbox\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-2.tsx\",\n      \"content\": \"import { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Label>\\n      <Checkbox defaultChecked disabled />\\n      Accept terms and conditions\\n    </Label>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\",\n    \"disabled\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Checkbox with description\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-3.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n\\n  return (\\n    <div className=\\\"flex items-start gap-2\\\">\\n      <Checkbox defaultChecked id={id} />\\n      <div className=\\\"flex flex-col gap-1\\\">\\n        <Label htmlFor={id}>Accept terms and conditions</Label>\\n        <p className=\\\"text-muted-foreground text-xs\\\">\\n          By clicking this checkbox, you agree to the terms and conditions.\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Card-style checkbox\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-4.tsx\",\n      \"content\": \"import { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Label className=\\\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\\\">\\n      <Checkbox defaultChecked />\\n      <div className=\\\"flex flex-col gap-1\\\">\\n        <p>Enable notifications</p>\\n        <p className=\\\"text-muted-foreground text-xs\\\">\\n          You can enable or disable notifications at any time.\\n        </p>\\n      </div>\\n    </Label>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Checkbox form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/checkbox\",\n    \"@coss/field\",\n    \"@coss/form\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    const accepted = formData.get(\\\"terms\\\");\\n    alert(`Terms: ${accepted}`);\\n  };\\n  return (\\n    <Form className=\\\"w-auto\\\" onSubmit={onSubmit}>\\n      <Field name=\\\"terms\\\">\\n        <FieldLabel>\\n          <Checkbox defaultChecked value=\\\"yes\\\" />\\n          Accept terms and conditions\\n        </FieldLabel>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-group-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-group-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic checkbox group\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/checkbox-group\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-group-1.tsx\",\n      \"content\": \"import { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { CheckboxGroup } from \\\"@/registry/default/ui/checkbox-group\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <CheckboxGroup aria-label=\\\"Select frameworks\\\" defaultValue={[\\\"next\\\"]}>\\n      <Label>\\n        <Checkbox value=\\\"next\\\" />\\n        Next.js\\n      </Label>\\n      <Label>\\n        <Checkbox value=\\\"vite\\\" />\\n        Vite\\n      </Label>\\n      <Label>\\n        <Checkbox value=\\\"astro\\\" />\\n        Astro\\n      </Label>\\n    </CheckboxGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\",\n    \"checkbox group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-group-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-group-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Checkbox group with disabled items\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/checkbox-group\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-group-2.tsx\",\n      \"content\": \"import { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { CheckboxGroup } from \\\"@/registry/default/ui/checkbox-group\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <CheckboxGroup aria-label=\\\"Select frameworks\\\" defaultValue={[\\\"next\\\"]}>\\n      <Label>\\n        <Checkbox value=\\\"next\\\" />\\n        Next.js\\n      </Label>\\n      <Label>\\n        <Checkbox disabled value=\\\"vite\\\" />\\n        Vite\\n      </Label>\\n      <Label>\\n        <Checkbox value=\\\"astro\\\" />\\n        Astro\\n      </Label>\\n    </CheckboxGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\",\n    \"checkbox group\",\n    \"disabled\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-group-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-group-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Checkbox group with parent checkbox\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/checkbox-group\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-group-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { CheckboxGroup } from \\\"@/registry/default/ui/checkbox-group\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nconst frameworks = [\\n  { id: \\\"next\\\", name: \\\"Next.js\\\" },\\n  { id: \\\"vite\\\", name: \\\"Vite\\\" },\\n  { id: \\\"astro\\\", name: \\\"Astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState<string[]>([]);\\n\\n  return (\\n    <CheckboxGroup\\n      allValues={frameworks.map((framework) => framework.id)}\\n      aria-labelledby=\\\"frameworks-caption\\\"\\n      onValueChange={setValue}\\n      value={value}\\n    >\\n      <Label id=\\\"frameworks-caption\\\">\\n        <Checkbox name=\\\"frameworks\\\" parent />\\n        Frameworks\\n      </Label>\\n\\n      {frameworks.map((framework) => (\\n        <Label className=\\\"ms-4\\\" key={framework.id}>\\n          <Checkbox value={framework.id} />\\n          {framework.name}\\n        </Label>\\n      ))}\\n    </CheckboxGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\",\n    \"checkbox group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-group-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-group-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Nested checkbox group with parent\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/checkbox-group\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-group-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { CheckboxGroup } from \\\"@/registry/default/ui/checkbox-group\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nconst mainPermissions = [\\n  { id: \\\"view-dashboard\\\", name: \\\"View Dashboard\\\" },\\n  { id: \\\"manage-users\\\", name: \\\"Manage Users\\\" },\\n  { id: \\\"access-reports\\\", name: \\\"Access Reports\\\" },\\n];\\n\\nconst userManagementPermissions = [\\n  { id: \\\"create-user\\\", name: \\\"Create User\\\" },\\n  { id: \\\"edit-user\\\", name: \\\"Edit User\\\" },\\n  { id: \\\"delete-user\\\", name: \\\"Delete User\\\" },\\n  { id: \\\"assign-roles\\\", name: \\\"Assign Roles\\\" },\\n];\\n\\nexport default function Particle() {\\n  const [mainValue, setMainValue] = useState<string[]>([]);\\n  const [managementValue, setManagementValue] = useState<string[]>([]);\\n\\n  const managementIsPartial =\\n    managementValue.length > 0 &&\\n    managementValue.length !== userManagementPermissions.length;\\n\\n  return (\\n    <CheckboxGroup\\n      allValues={mainPermissions.map((p) => p.id)}\\n      aria-labelledby=\\\"user-permissions-caption\\\"\\n      onValueChange={(value) => {\\n        if (value.includes(\\\"manage-users\\\")) {\\n          setManagementValue(userManagementPermissions.map((p) => p.id));\\n        } else if (\\n          managementValue.length === userManagementPermissions.length\\n        ) {\\n          setManagementValue([]);\\n        }\\n        setMainValue(value);\\n      }}\\n      value={mainValue}\\n    >\\n      <Label id=\\\"user-permissions-caption\\\">\\n        <Checkbox indeterminate={managementIsPartial} parent />\\n        User Permissions\\n      </Label>\\n\\n      {mainPermissions\\n        .filter((p) => p.id !== \\\"manage-users\\\")\\n        .map((p) => (\\n          <Label className=\\\"ms-4\\\" key={p.id}>\\n            <Checkbox value={p.id} />\\n            {p.name}\\n          </Label>\\n        ))}\\n\\n      <CheckboxGroup\\n        allValues={userManagementPermissions.map((p) => p.id)}\\n        aria-labelledby=\\\"manage-users-caption\\\"\\n        className=\\\"ms-4\\\"\\n        onValueChange={(value) => {\\n          if (value.length === userManagementPermissions.length) {\\n            setMainValue((prev) =>\\n              Array.from(new Set([...prev, \\\"manage-users\\\"])),\\n            );\\n          } else {\\n            setMainValue((prev) => prev.filter((v) => v !== \\\"manage-users\\\"));\\n          }\\n          setManagementValue(value);\\n        }}\\n        value={managementValue}\\n      >\\n        <Label id=\\\"manage-users-caption\\\">\\n          <Checkbox parent />\\n          Manage Users\\n        </Label>\\n\\n        {userManagementPermissions.map((p) => (\\n          <Label className=\\\"ms-4\\\" key={p.id}>\\n            <Checkbox value={p.id} />\\n            {p.name}\\n          </Label>\\n        ))}\\n      </CheckboxGroup>\\n    </CheckboxGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\",\n    \"checkbox group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-checkbox-group-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-checkbox-group-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Checkbox group form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/checkbox\",\n    \"@coss/checkbox-group\",\n    \"@coss/field\",\n    \"@coss/fieldset\",\n    \"@coss/form\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-checkbox-group-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { CheckboxGroup } from \\\"@/registry/default/ui/checkbox-group\\\";\\nimport { Field, FieldItem, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Fieldset, FieldsetLegend } from \\\"@/registry/default/ui/fieldset\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    const frameworks = formData.getAll(\\\"frameworks\\\") as string[];\\n    alert(`Selected: ${frameworks.join(\\\", \\\") || \\\"none\\\"}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-[160px]\\\" onSubmit={onSubmit}>\\n      <Field\\n        className=\\\"gap-4\\\"\\n        name=\\\"frameworks\\\"\\n        render={(props) => <Fieldset {...props} />}\\n      >\\n        <FieldsetLegend>Frameworks</FieldsetLegend>\\n        <CheckboxGroup defaultValue={[\\\"next\\\"]}>\\n          <FieldItem>\\n            <FieldLabel>\\n              <Checkbox value=\\\"next\\\" />\\n              Next.js\\n            </FieldLabel>\\n          </FieldItem>\\n          <FieldItem>\\n            <FieldLabel>\\n              <Checkbox value=\\\"vite\\\" />\\n              Vite\\n            </FieldLabel>\\n          </FieldItem>\\n          <FieldItem>\\n            <FieldLabel>\\n              <Checkbox value=\\\"astro\\\" />\\n              Astro\\n            </FieldLabel>\\n          </FieldItem>\\n        </CheckboxGroup>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"checkbox\",\n    \"checkbox group\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-collapsible-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-collapsible-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic collapsible\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/collapsible\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-collapsible-1.tsx\",\n      \"content\": \"import { ChevronDownIcon } from \\\"lucide-react\\\";\\nimport {\\n  Collapsible,\\n  CollapsiblePanel,\\n  CollapsibleTrigger,\\n} from \\\"@/registry/default/ui/collapsible\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Collapsible>\\n      <CollapsibleTrigger className=\\\"inline-flex items-center gap-2 font-medium text-sm data-panel-open:[&_svg]:rotate-180\\\">\\n        Show recovery keys\\n        <ChevronDownIcon className=\\\"size-4\\\" />\\n      </CollapsibleTrigger>\\n      <CollapsiblePanel>\\n        <ul className=\\\"flex flex-col gap-1 py-2 text-muted-foreground text-sm\\\">\\n          <li className=\\\"rounded-sm bg-muted px-2 py-1 font-mono\\\">\\n            4829-1735-6621\\n          </li>\\n          <li className=\\\"rounded-sm bg-muted px-2 py-1 font-mono\\\">\\n            9182-6407-5532\\n          </li>\\n          <li className=\\\"rounded-sm bg-muted px-2 py-1 font-mono\\\">\\n            3051-7924-9018\\n          </li>\\n        </ul>\\n      </CollapsiblePanel>\\n    </Collapsible>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"collapsible\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic combobox\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox items={items}>\\n      <ComboboxInput aria-label=\\\"Select a item\\\" placeholder=\\\"Select a item…\\\" />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox with input inside popup\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-10.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ChevronsUpDownIcon, SearchIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxTrigger,\\n  ComboboxValue,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\ninterface Country {\\n  code: string;\\n  value: string | null;\\n  continent: string;\\n  label: string;\\n}\\n\\nconst countries: Country[] = [\\n  { code: \\\"\\\", continent: \\\"\\\", label: \\\"Select country\\\", value: null },\\n  { code: \\\"af\\\", continent: \\\"Asia\\\", label: \\\"Afghanistan\\\", value: \\\"afghanistan\\\" },\\n  { code: \\\"al\\\", continent: \\\"Europe\\\", label: \\\"Albania\\\", value: \\\"albania\\\" },\\n  { code: \\\"dz\\\", continent: \\\"Africa\\\", label: \\\"Algeria\\\", value: \\\"algeria\\\" },\\n  { code: \\\"ad\\\", continent: \\\"Europe\\\", label: \\\"Andorra\\\", value: \\\"andorra\\\" },\\n  { code: \\\"ao\\\", continent: \\\"Africa\\\", label: \\\"Angola\\\", value: \\\"angola\\\" },\\n  {\\n    code: \\\"ar\\\",\\n    continent: \\\"South America\\\",\\n    label: \\\"Argentina\\\",\\n    value: \\\"argentina\\\",\\n  },\\n  { code: \\\"am\\\", continent: \\\"Asia\\\", label: \\\"Armenia\\\", value: \\\"armenia\\\" },\\n  { code: \\\"au\\\", continent: \\\"Oceania\\\", label: \\\"Australia\\\", value: \\\"australia\\\" },\\n  { code: \\\"at\\\", continent: \\\"Europe\\\", label: \\\"Austria\\\", value: \\\"austria\\\" },\\n  { code: \\\"az\\\", continent: \\\"Asia\\\", label: \\\"Azerbaijan\\\", value: \\\"azerbaijan\\\" },\\n  {\\n    code: \\\"bs\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Bahamas\\\",\\n    value: \\\"bahamas\\\",\\n  },\\n  { code: \\\"bh\\\", continent: \\\"Asia\\\", label: \\\"Bahrain\\\", value: \\\"bahrain\\\" },\\n  { code: \\\"bd\\\", continent: \\\"Asia\\\", label: \\\"Bangladesh\\\", value: \\\"bangladesh\\\" },\\n  {\\n    code: \\\"bb\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Barbados\\\",\\n    value: \\\"barbados\\\",\\n  },\\n  { code: \\\"by\\\", continent: \\\"Europe\\\", label: \\\"Belarus\\\", value: \\\"belarus\\\" },\\n  { code: \\\"be\\\", continent: \\\"Europe\\\", label: \\\"Belgium\\\", value: \\\"belgium\\\" },\\n  { code: \\\"bz\\\", continent: \\\"North America\\\", label: \\\"Belize\\\", value: \\\"belize\\\" },\\n  { code: \\\"bj\\\", continent: \\\"Africa\\\", label: \\\"Benin\\\", value: \\\"benin\\\" },\\n  { code: \\\"bt\\\", continent: \\\"Asia\\\", label: \\\"Bhutan\\\", value: \\\"bhutan\\\" },\\n  {\\n    code: \\\"bo\\\",\\n    continent: \\\"South America\\\",\\n    label: \\\"Bolivia\\\",\\n    value: \\\"bolivia\\\",\\n  },\\n  {\\n    code: \\\"ba\\\",\\n    continent: \\\"Europe\\\",\\n    label: \\\"Bosnia and Herzegovina\\\",\\n    value: \\\"bosnia-and-herzegovina\\\",\\n  },\\n  { code: \\\"bw\\\", continent: \\\"Africa\\\", label: \\\"Botswana\\\", value: \\\"botswana\\\" },\\n  { code: \\\"br\\\", continent: \\\"South America\\\", label: \\\"Brazil\\\", value: \\\"brazil\\\" },\\n  { code: \\\"bn\\\", continent: \\\"Asia\\\", label: \\\"Brunei\\\", value: \\\"brunei\\\" },\\n  { code: \\\"bg\\\", continent: \\\"Europe\\\", label: \\\"Bulgaria\\\", value: \\\"bulgaria\\\" },\\n  {\\n    code: \\\"bf\\\",\\n    continent: \\\"Africa\\\",\\n    label: \\\"Burkina Faso\\\",\\n    value: \\\"burkina-faso\\\",\\n  },\\n  { code: \\\"bi\\\", continent: \\\"Africa\\\", label: \\\"Burundi\\\", value: \\\"burundi\\\" },\\n  { code: \\\"kh\\\", continent: \\\"Asia\\\", label: \\\"Cambodia\\\", value: \\\"cambodia\\\" },\\n  { code: \\\"cm\\\", continent: \\\"Africa\\\", label: \\\"Cameroon\\\", value: \\\"cameroon\\\" },\\n  { code: \\\"ca\\\", continent: \\\"North America\\\", label: \\\"Canada\\\", value: \\\"canada\\\" },\\n  { code: \\\"cv\\\", continent: \\\"Africa\\\", label: \\\"Cape Verde\\\", value: \\\"cape-verde\\\" },\\n  {\\n    code: \\\"cf\\\",\\n    continent: \\\"Africa\\\",\\n    label: \\\"Central African Republic\\\",\\n    value: \\\"central-african-republic\\\",\\n  },\\n  { code: \\\"td\\\", continent: \\\"Africa\\\", label: \\\"Chad\\\", value: \\\"chad\\\" },\\n  { code: \\\"cl\\\", continent: \\\"South America\\\", label: \\\"Chile\\\", value: \\\"chile\\\" },\\n  { code: \\\"cn\\\", continent: \\\"Asia\\\", label: \\\"China\\\", value: \\\"china\\\" },\\n  {\\n    code: \\\"co\\\",\\n    continent: \\\"South America\\\",\\n    label: \\\"Colombia\\\",\\n    value: \\\"colombia\\\",\\n  },\\n  { code: \\\"km\\\", continent: \\\"Africa\\\", label: \\\"Comoros\\\", value: \\\"comoros\\\" },\\n  { code: \\\"cg\\\", continent: \\\"Africa\\\", label: \\\"Congo\\\", value: \\\"congo\\\" },\\n  {\\n    code: \\\"cr\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Costa Rica\\\",\\n    value: \\\"costa-rica\\\",\\n  },\\n  { code: \\\"hr\\\", continent: \\\"Europe\\\", label: \\\"Croatia\\\", value: \\\"croatia\\\" },\\n  { code: \\\"cu\\\", continent: \\\"North America\\\", label: \\\"Cuba\\\", value: \\\"cuba\\\" },\\n  { code: \\\"cy\\\", continent: \\\"Asia\\\", label: \\\"Cyprus\\\", value: \\\"cyprus\\\" },\\n  {\\n    code: \\\"cz\\\",\\n    continent: \\\"Europe\\\",\\n    label: \\\"Czech Republic\\\",\\n    value: \\\"czech-republic\\\",\\n  },\\n  { code: \\\"dk\\\", continent: \\\"Europe\\\", label: \\\"Denmark\\\", value: \\\"denmark\\\" },\\n  { code: \\\"dj\\\", continent: \\\"Africa\\\", label: \\\"Djibouti\\\", value: \\\"djibouti\\\" },\\n  {\\n    code: \\\"dm\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Dominica\\\",\\n    value: \\\"dominica\\\",\\n  },\\n  {\\n    code: \\\"do\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Dominican Republic\\\",\\n    value: \\\"dominican-republic\\\",\\n  },\\n  {\\n    code: \\\"ec\\\",\\n    continent: \\\"South America\\\",\\n    label: \\\"Ecuador\\\",\\n    value: \\\"ecuador\\\",\\n  },\\n  { code: \\\"eg\\\", continent: \\\"Africa\\\", label: \\\"Egypt\\\", value: \\\"egypt\\\" },\\n  {\\n    code: \\\"sv\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"El Salvador\\\",\\n    value: \\\"el-salvador\\\",\\n  },\\n  {\\n    code: \\\"gq\\\",\\n    continent: \\\"Africa\\\",\\n    label: \\\"Equatorial Guinea\\\",\\n    value: \\\"equatorial-guinea\\\",\\n  },\\n  { code: \\\"er\\\", continent: \\\"Africa\\\", label: \\\"Eritrea\\\", value: \\\"eritrea\\\" },\\n  { code: \\\"ee\\\", continent: \\\"Europe\\\", label: \\\"Estonia\\\", value: \\\"estonia\\\" },\\n  { code: \\\"et\\\", continent: \\\"Africa\\\", label: \\\"Ethiopia\\\", value: \\\"ethiopia\\\" },\\n  { code: \\\"fj\\\", continent: \\\"Oceania\\\", label: \\\"Fiji\\\", value: \\\"fiji\\\" },\\n  { code: \\\"fi\\\", continent: \\\"Europe\\\", label: \\\"Finland\\\", value: \\\"finland\\\" },\\n  { code: \\\"fr\\\", continent: \\\"Europe\\\", label: \\\"France\\\", value: \\\"france\\\" },\\n  { code: \\\"ga\\\", continent: \\\"Africa\\\", label: \\\"Gabon\\\", value: \\\"gabon\\\" },\\n  { code: \\\"gm\\\", continent: \\\"Africa\\\", label: \\\"Gambia\\\", value: \\\"gambia\\\" },\\n  { code: \\\"ge\\\", continent: \\\"Asia\\\", label: \\\"Georgia\\\", value: \\\"georgia\\\" },\\n  { code: \\\"de\\\", continent: \\\"Europe\\\", label: \\\"Germany\\\", value: \\\"germany\\\" },\\n  { code: \\\"gh\\\", continent: \\\"Africa\\\", label: \\\"Ghana\\\", value: \\\"ghana\\\" },\\n  { code: \\\"gr\\\", continent: \\\"Europe\\\", label: \\\"Greece\\\", value: \\\"greece\\\" },\\n  {\\n    code: \\\"gd\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Grenada\\\",\\n    value: \\\"grenada\\\",\\n  },\\n  {\\n    code: \\\"gt\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Guatemala\\\",\\n    value: \\\"guatemala\\\",\\n  },\\n  { code: \\\"gn\\\", continent: \\\"Africa\\\", label: \\\"Guinea\\\", value: \\\"guinea\\\" },\\n  {\\n    code: \\\"gw\\\",\\n    continent: \\\"Africa\\\",\\n    label: \\\"Guinea-Bissau\\\",\\n    value: \\\"guinea-bissau\\\",\\n  },\\n  { code: \\\"gy\\\", continent: \\\"South America\\\", label: \\\"Guyana\\\", value: \\\"guyana\\\" },\\n  { code: \\\"ht\\\", continent: \\\"North America\\\", label: \\\"Haiti\\\", value: \\\"haiti\\\" },\\n  {\\n    code: \\\"hn\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Honduras\\\",\\n    value: \\\"honduras\\\",\\n  },\\n  { code: \\\"hu\\\", continent: \\\"Europe\\\", label: \\\"Hungary\\\", value: \\\"hungary\\\" },\\n  { code: \\\"is\\\", continent: \\\"Europe\\\", label: \\\"Iceland\\\", value: \\\"iceland\\\" },\\n  { code: \\\"in\\\", continent: \\\"Asia\\\", label: \\\"India\\\", value: \\\"india\\\" },\\n  { code: \\\"id\\\", continent: \\\"Asia\\\", label: \\\"Indonesia\\\", value: \\\"indonesia\\\" },\\n  { code: \\\"ir\\\", continent: \\\"Asia\\\", label: \\\"Iran\\\", value: \\\"iran\\\" },\\n  { code: \\\"iq\\\", continent: \\\"Asia\\\", label: \\\"Iraq\\\", value: \\\"iraq\\\" },\\n  { code: \\\"ie\\\", continent: \\\"Europe\\\", label: \\\"Ireland\\\", value: \\\"ireland\\\" },\\n  { code: \\\"il\\\", continent: \\\"Asia\\\", label: \\\"Israel\\\", value: \\\"israel\\\" },\\n  { code: \\\"it\\\", continent: \\\"Europe\\\", label: \\\"Italy\\\", value: \\\"italy\\\" },\\n  {\\n    code: \\\"jm\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Jamaica\\\",\\n    value: \\\"jamaica\\\",\\n  },\\n  { code: \\\"jp\\\", continent: \\\"Asia\\\", label: \\\"Japan\\\", value: \\\"japan\\\" },\\n  { code: \\\"jo\\\", continent: \\\"Asia\\\", label: \\\"Jordan\\\", value: \\\"jordan\\\" },\\n  { code: \\\"kz\\\", continent: \\\"Asia\\\", label: \\\"Kazakhstan\\\", value: \\\"kazakhstan\\\" },\\n  { code: \\\"ke\\\", continent: \\\"Africa\\\", label: \\\"Kenya\\\", value: \\\"kenya\\\" },\\n  { code: \\\"kw\\\", continent: \\\"Asia\\\", label: \\\"Kuwait\\\", value: \\\"kuwait\\\" },\\n  { code: \\\"kg\\\", continent: \\\"Asia\\\", label: \\\"Kyrgyzstan\\\", value: \\\"kyrgyzstan\\\" },\\n  { code: \\\"la\\\", continent: \\\"Asia\\\", label: \\\"Laos\\\", value: \\\"laos\\\" },\\n  { code: \\\"lv\\\", continent: \\\"Europe\\\", label: \\\"Latvia\\\", value: \\\"latvia\\\" },\\n  { code: \\\"lb\\\", continent: \\\"Asia\\\", label: \\\"Lebanon\\\", value: \\\"lebanon\\\" },\\n  { code: \\\"ls\\\", continent: \\\"Africa\\\", label: \\\"Lesotho\\\", value: \\\"lesotho\\\" },\\n  { code: \\\"lr\\\", continent: \\\"Africa\\\", label: \\\"Liberia\\\", value: \\\"liberia\\\" },\\n  { code: \\\"ly\\\", continent: \\\"Africa\\\", label: \\\"Libya\\\", value: \\\"libya\\\" },\\n  {\\n    code: \\\"li\\\",\\n    continent: \\\"Europe\\\",\\n    label: \\\"Liechtenstein\\\",\\n    value: \\\"liechtenstein\\\",\\n  },\\n  { code: \\\"lt\\\", continent: \\\"Europe\\\", label: \\\"Lithuania\\\", value: \\\"lithuania\\\" },\\n  { code: \\\"lu\\\", continent: \\\"Europe\\\", label: \\\"Luxembourg\\\", value: \\\"luxembourg\\\" },\\n  { code: \\\"mg\\\", continent: \\\"Africa\\\", label: \\\"Madagascar\\\", value: \\\"madagascar\\\" },\\n  { code: \\\"mw\\\", continent: \\\"Africa\\\", label: \\\"Malawi\\\", value: \\\"malawi\\\" },\\n  { code: \\\"my\\\", continent: \\\"Asia\\\", label: \\\"Malaysia\\\", value: \\\"malaysia\\\" },\\n  { code: \\\"mv\\\", continent: \\\"Asia\\\", label: \\\"Maldives\\\", value: \\\"maldives\\\" },\\n  { code: \\\"ml\\\", continent: \\\"Africa\\\", label: \\\"Mali\\\", value: \\\"mali\\\" },\\n  { code: \\\"mt\\\", continent: \\\"Europe\\\", label: \\\"Malta\\\", value: \\\"malta\\\" },\\n  {\\n    code: \\\"mh\\\",\\n    continent: \\\"Oceania\\\",\\n    label: \\\"Marshall Islands\\\",\\n    value: \\\"marshall-islands\\\",\\n  },\\n  { code: \\\"mr\\\", continent: \\\"Africa\\\", label: \\\"Mauritania\\\", value: \\\"mauritania\\\" },\\n  { code: \\\"mu\\\", continent: \\\"Africa\\\", label: \\\"Mauritius\\\", value: \\\"mauritius\\\" },\\n  { code: \\\"mx\\\", continent: \\\"North America\\\", label: \\\"Mexico\\\", value: \\\"mexico\\\" },\\n  {\\n    code: \\\"fm\\\",\\n    continent: \\\"Oceania\\\",\\n    label: \\\"Micronesia\\\",\\n    value: \\\"micronesia\\\",\\n  },\\n  { code: \\\"md\\\", continent: \\\"Europe\\\", label: \\\"Moldova\\\", value: \\\"moldova\\\" },\\n  { code: \\\"mc\\\", continent: \\\"Europe\\\", label: \\\"Monaco\\\", value: \\\"monaco\\\" },\\n  { code: \\\"mn\\\", continent: \\\"Asia\\\", label: \\\"Mongolia\\\", value: \\\"mongolia\\\" },\\n  { code: \\\"me\\\", continent: \\\"Europe\\\", label: \\\"Montenegro\\\", value: \\\"montenegro\\\" },\\n  { code: \\\"ma\\\", continent: \\\"Africa\\\", label: \\\"Morocco\\\", value: \\\"morocco\\\" },\\n  { code: \\\"mz\\\", continent: \\\"Africa\\\", label: \\\"Mozambique\\\", value: \\\"mozambique\\\" },\\n  { code: \\\"mm\\\", continent: \\\"Asia\\\", label: \\\"Myanmar\\\", value: \\\"myanmar\\\" },\\n  { code: \\\"na\\\", continent: \\\"Africa\\\", label: \\\"Namibia\\\", value: \\\"namibia\\\" },\\n  { code: \\\"nr\\\", continent: \\\"Oceania\\\", label: \\\"Nauru\\\", value: \\\"nauru\\\" },\\n  { code: \\\"np\\\", continent: \\\"Asia\\\", label: \\\"Nepal\\\", value: \\\"nepal\\\" },\\n  {\\n    code: \\\"nl\\\",\\n    continent: \\\"Europe\\\",\\n    label: \\\"Netherlands\\\",\\n    value: \\\"netherlands\\\",\\n  },\\n  {\\n    code: \\\"nz\\\",\\n    continent: \\\"Oceania\\\",\\n    label: \\\"New Zealand\\\",\\n    value: \\\"new-zealand\\\",\\n  },\\n  {\\n    code: \\\"ni\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Nicaragua\\\",\\n    value: \\\"nicaragua\\\",\\n  },\\n  { code: \\\"ne\\\", continent: \\\"Africa\\\", label: \\\"Niger\\\", value: \\\"niger\\\" },\\n  { code: \\\"ng\\\", continent: \\\"Africa\\\", label: \\\"Nigeria\\\", value: \\\"nigeria\\\" },\\n  { code: \\\"kp\\\", continent: \\\"Asia\\\", label: \\\"North Korea\\\", value: \\\"north-korea\\\" },\\n  {\\n    code: \\\"mk\\\",\\n    continent: \\\"Europe\\\",\\n    label: \\\"North Macedonia\\\",\\n    value: \\\"north-macedonia\\\",\\n  },\\n  { code: \\\"no\\\", continent: \\\"Europe\\\", label: \\\"Norway\\\", value: \\\"norway\\\" },\\n  { code: \\\"om\\\", continent: \\\"Asia\\\", label: \\\"Oman\\\", value: \\\"oman\\\" },\\n  { code: \\\"pk\\\", continent: \\\"Asia\\\", label: \\\"Pakistan\\\", value: \\\"pakistan\\\" },\\n  { code: \\\"pw\\\", continent: \\\"Oceania\\\", label: \\\"Palau\\\", value: \\\"palau\\\" },\\n  { code: \\\"ps\\\", continent: \\\"Asia\\\", label: \\\"Palestine\\\", value: \\\"palestine\\\" },\\n  { code: \\\"pa\\\", continent: \\\"North America\\\", label: \\\"Panama\\\", value: \\\"panama\\\" },\\n  {\\n    code: \\\"pg\\\",\\n    continent: \\\"Oceania\\\",\\n    label: \\\"Papua New Guinea\\\",\\n    value: \\\"papua-new-guinea\\\",\\n  },\\n  {\\n    code: \\\"py\\\",\\n    continent: \\\"South America\\\",\\n    label: \\\"Paraguay\\\",\\n    value: \\\"paraguay\\\",\\n  },\\n  { code: \\\"pe\\\", continent: \\\"South America\\\", label: \\\"Peru\\\", value: \\\"peru\\\" },\\n  { code: \\\"ph\\\", continent: \\\"Asia\\\", label: \\\"Philippines\\\", value: \\\"philippines\\\" },\\n  { code: \\\"pl\\\", continent: \\\"Europe\\\", label: \\\"Poland\\\", value: \\\"poland\\\" },\\n  { code: \\\"pt\\\", continent: \\\"Europe\\\", label: \\\"Portugal\\\", value: \\\"portugal\\\" },\\n  { code: \\\"qa\\\", continent: \\\"Asia\\\", label: \\\"Qatar\\\", value: \\\"qatar\\\" },\\n  { code: \\\"ro\\\", continent: \\\"Europe\\\", label: \\\"Romania\\\", value: \\\"romania\\\" },\\n  { code: \\\"ru\\\", continent: \\\"Europe\\\", label: \\\"Russia\\\", value: \\\"russia\\\" },\\n  { code: \\\"rw\\\", continent: \\\"Africa\\\", label: \\\"Rwanda\\\", value: \\\"rwanda\\\" },\\n  { code: \\\"ws\\\", continent: \\\"Oceania\\\", label: \\\"Samoa\\\", value: \\\"samoa\\\" },\\n  { code: \\\"sm\\\", continent: \\\"Europe\\\", label: \\\"San Marino\\\", value: \\\"san-marino\\\" },\\n  {\\n    code: \\\"sa\\\",\\n    continent: \\\"Asia\\\",\\n    label: \\\"Saudi Arabia\\\",\\n    value: \\\"saudi-arabia\\\",\\n  },\\n  { code: \\\"sn\\\", continent: \\\"Africa\\\", label: \\\"Senegal\\\", value: \\\"senegal\\\" },\\n  { code: \\\"rs\\\", continent: \\\"Europe\\\", label: \\\"Serbia\\\", value: \\\"serbia\\\" },\\n  { code: \\\"sc\\\", continent: \\\"Africa\\\", label: \\\"Seychelles\\\", value: \\\"seychelles\\\" },\\n  {\\n    code: \\\"sl\\\",\\n    continent: \\\"Africa\\\",\\n    label: \\\"Sierra Leone\\\",\\n    value: \\\"sierra-leone\\\",\\n  },\\n  { code: \\\"sg\\\", continent: \\\"Asia\\\", label: \\\"Singapore\\\", value: \\\"singapore\\\" },\\n  { code: \\\"sk\\\", continent: \\\"Europe\\\", label: \\\"Slovakia\\\", value: \\\"slovakia\\\" },\\n  { code: \\\"si\\\", continent: \\\"Europe\\\", label: \\\"Slovenia\\\", value: \\\"slovenia\\\" },\\n  {\\n    code: \\\"sb\\\",\\n    continent: \\\"Oceania\\\",\\n    label: \\\"Solomon Islands\\\",\\n    value: \\\"solomon-islands\\\",\\n  },\\n  { code: \\\"so\\\", continent: \\\"Africa\\\", label: \\\"Somalia\\\", value: \\\"somalia\\\" },\\n  {\\n    code: \\\"za\\\",\\n    continent: \\\"Africa\\\",\\n    label: \\\"South Africa\\\",\\n    value: \\\"south-africa\\\",\\n  },\\n  { code: \\\"kr\\\", continent: \\\"Asia\\\", label: \\\"South Korea\\\", value: \\\"south-korea\\\" },\\n  {\\n    code: \\\"ss\\\",\\n    continent: \\\"Africa\\\",\\n    label: \\\"South Sudan\\\",\\n    value: \\\"south-sudan\\\",\\n  },\\n  { code: \\\"es\\\", continent: \\\"Europe\\\", label: \\\"Spain\\\", value: \\\"spain\\\" },\\n  { code: \\\"lk\\\", continent: \\\"Asia\\\", label: \\\"Sri Lanka\\\", value: \\\"sri-lanka\\\" },\\n  { code: \\\"sd\\\", continent: \\\"Africa\\\", label: \\\"Sudan\\\", value: \\\"sudan\\\" },\\n  {\\n    code: \\\"sr\\\",\\n    continent: \\\"South America\\\",\\n    label: \\\"Suriname\\\",\\n    value: \\\"suriname\\\",\\n  },\\n  { code: \\\"se\\\", continent: \\\"Europe\\\", label: \\\"Sweden\\\", value: \\\"sweden\\\" },\\n  {\\n    code: \\\"ch\\\",\\n    continent: \\\"Europe\\\",\\n    label: \\\"Switzerland\\\",\\n    value: \\\"switzerland\\\",\\n  },\\n  { code: \\\"sy\\\", continent: \\\"Asia\\\", label: \\\"Syria\\\", value: \\\"syria\\\" },\\n  { code: \\\"tw\\\", continent: \\\"Asia\\\", label: \\\"Taiwan\\\", value: \\\"taiwan\\\" },\\n  { code: \\\"tj\\\", continent: \\\"Asia\\\", label: \\\"Tajikistan\\\", value: \\\"tajikistan\\\" },\\n  { code: \\\"tz\\\", continent: \\\"Africa\\\", label: \\\"Tanzania\\\", value: \\\"tanzania\\\" },\\n  { code: \\\"th\\\", continent: \\\"Asia\\\", label: \\\"Thailand\\\", value: \\\"thailand\\\" },\\n  { code: \\\"tl\\\", continent: \\\"Asia\\\", label: \\\"Timor-Leste\\\", value: \\\"timor-leste\\\" },\\n  { code: \\\"tg\\\", continent: \\\"Africa\\\", label: \\\"Togo\\\", value: \\\"togo\\\" },\\n  { code: \\\"to\\\", continent: \\\"Oceania\\\", label: \\\"Tonga\\\", value: \\\"tonga\\\" },\\n  {\\n    code: \\\"tt\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"Trinidad and Tobago\\\",\\n    value: \\\"trinidad-and-tobago\\\",\\n  },\\n  { code: \\\"tn\\\", continent: \\\"Africa\\\", label: \\\"Tunisia\\\", value: \\\"tunisia\\\" },\\n  { code: \\\"tr\\\", continent: \\\"Asia\\\", label: \\\"Turkey\\\", value: \\\"turkey\\\" },\\n  {\\n    code: \\\"tm\\\",\\n    continent: \\\"Asia\\\",\\n    label: \\\"Turkmenistan\\\",\\n    value: \\\"turkmenistan\\\",\\n  },\\n  { code: \\\"tv\\\", continent: \\\"Oceania\\\", label: \\\"Tuvalu\\\", value: \\\"tuvalu\\\" },\\n  { code: \\\"ug\\\", continent: \\\"Africa\\\", label: \\\"Uganda\\\", value: \\\"uganda\\\" },\\n  { code: \\\"ua\\\", continent: \\\"Europe\\\", label: \\\"Ukraine\\\", value: \\\"ukraine\\\" },\\n  {\\n    code: \\\"ae\\\",\\n    continent: \\\"Asia\\\",\\n    label: \\\"United Arab Emirates\\\",\\n    value: \\\"united-arab-emirates\\\",\\n  },\\n  {\\n    code: \\\"gb\\\",\\n    continent: \\\"Europe\\\",\\n    label: \\\"United Kingdom\\\",\\n    value: \\\"united-kingdom\\\",\\n  },\\n  {\\n    code: \\\"us\\\",\\n    continent: \\\"North America\\\",\\n    label: \\\"United States\\\",\\n    value: \\\"united-states\\\",\\n  },\\n  {\\n    code: \\\"uy\\\",\\n    continent: \\\"South America\\\",\\n    label: \\\"Uruguay\\\",\\n    value: \\\"uruguay\\\",\\n  },\\n  { code: \\\"uz\\\", continent: \\\"Asia\\\", label: \\\"Uzbekistan\\\", value: \\\"uzbekistan\\\" },\\n  { code: \\\"vu\\\", continent: \\\"Oceania\\\", label: \\\"Vanuatu\\\", value: \\\"vanuatu\\\" },\\n  {\\n    code: \\\"va\\\",\\n    continent: \\\"Europe\\\",\\n    label: \\\"Vatican City\\\",\\n    value: \\\"vatican-city\\\",\\n  },\\n  {\\n    code: \\\"ve\\\",\\n    continent: \\\"South America\\\",\\n    label: \\\"Venezuela\\\",\\n    value: \\\"venezuela\\\",\\n  },\\n  { code: \\\"vn\\\", continent: \\\"Asia\\\", label: \\\"Vietnam\\\", value: \\\"vietnam\\\" },\\n  { code: \\\"ye\\\", continent: \\\"Asia\\\", label: \\\"Yemen\\\", value: \\\"yemen\\\" },\\n  { code: \\\"zm\\\", continent: \\\"Africa\\\", label: \\\"Zambia\\\", value: \\\"zambia\\\" },\\n  { code: \\\"zw\\\", continent: \\\"Africa\\\", label: \\\"Zimbabwe\\\", value: \\\"zimbabwe\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox defaultValue={countries[0]} items={countries}>\\n      <ComboboxTrigger\\n        render={\\n          <Button\\n            className=\\\"w-full justify-between font-normal\\\"\\n            variant=\\\"outline\\\"\\n          />\\n        }\\n      >\\n        <ComboboxValue />\\n        <ChevronsUpDownIcon className=\\\"-me-1!\\\" />\\n      </ComboboxTrigger>\\n      <ComboboxPopup aria-label=\\\"Select country\\\">\\n        <div className=\\\"border-b p-2\\\">\\n          <ComboboxInput\\n            className=\\\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\\\"\\n            placeholder=\\\"e.g. United Kingdom\\\"\\n            showTrigger={false}\\n            startAddon={<SearchIcon />}\\n          />\\n        </div>\\n        <ComboboxEmpty>No countries found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(country: Country) => (\\n            <ComboboxItem key={country.code} value={country}>\\n              {country.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/combobox\",\n    \"@coss/field\",\n    \"@coss/form\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-11.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    const selectedItem = formData.get(\\\"item\\\");\\n    const itemValue =\\n      items.find((item) => item.label === selectedItem)?.value || selectedItem;\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    alert(`Favorite item: ${itemValue || \\\"\\\"}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-64\\\" onSubmit={onSubmit}>\\n      <Field name=\\\"item\\\">\\n        <FieldLabel>Favorite item</FieldLabel>\\n        <Combobox items={items} required>\\n          <ComboboxInput placeholder=\\\"Select an item...\\\" />\\n          <ComboboxPopup>\\n            <ComboboxEmpty>No results found.</ComboboxEmpty>\\n            <ComboboxList>\\n              {(item) => (\\n                <ComboboxItem key={item.value} value={item}>\\n                  {item.label}\\n                </ComboboxItem>\\n              )}\\n            </ComboboxList>\\n          </ComboboxPopup>\\n        </Combobox>\\n        <FieldError>Please select a item.</FieldError>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"form\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox multiple form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/combobox\",\n    \"@coss/field\",\n    \"@coss/form\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-12.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Combobox,\\n  ComboboxChip,\\n  ComboboxChips,\\n  ComboboxChipsInput,\\n  ComboboxEmpty,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxValue,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    const selectedItems = formData.getAll(\\\"items\\\");\\n    const itemValues = selectedItems.map(\\n      (selectedItem) =>\\n        items.find((item) => item.label === selectedItem)?.value ||\\n        selectedItem,\\n    );\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    alert(`Favorite items: ${itemValues.join(\\\", \\\") || \\\"\\\"}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-64\\\" onSubmit={onSubmit}>\\n      <Field name=\\\"items\\\">\\n        <FieldLabel>Favorite items</FieldLabel>\\n        <Combobox items={items} multiple required>\\n          <ComboboxChips>\\n            <ComboboxValue>\\n              {(value: { value: string; label: string }[]) => (\\n                <>\\n                  {value?.map((item) => (\\n                    <ComboboxChip aria-label={item.label} key={item.value}>\\n                      {item.label}\\n                    </ComboboxChip>\\n                  ))}\\n                  <ComboboxChipsInput\\n                    placeholder={value.length > 0 ? undefined : \\\"Select items…\\\"}\\n                  />\\n                </>\\n              )}\\n            </ComboboxValue>\\n          </ComboboxChips>\\n          <ComboboxPopup>\\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\\n            <ComboboxList>\\n              {(item) => (\\n                <ComboboxItem key={item.value} value={item}>\\n                  {item.label}\\n                </ComboboxItem>\\n              )}\\n            </ComboboxList>\\n          </ComboboxPopup>\\n        </Combobox>\\n        <FieldError>Please select at least one item.</FieldError>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"form\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox with start addon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-13.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox items={items}>\\n      <ComboboxInput\\n        aria-label=\\\"Search items\\\"\\n        placeholder=\\\"Search items…\\\"\\n        startAddon={<SearchIcon />}\\n      />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox multiple with start addon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-14.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  Combobox,\\n  ComboboxChip,\\n  ComboboxChips,\\n  ComboboxChipsInput,\\n  ComboboxEmpty,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxValue,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox defaultValue={[items[0], items[3]]} items={items} multiple>\\n      <ComboboxChips startAddon={<SearchIcon />}>\\n        <ComboboxValue>\\n          {(value: { value: string; label: string }[]) => (\\n            <>\\n              {value?.map((item) => (\\n                <ComboboxChip aria-label={item.label} key={item.value}>\\n                  {item.label}\\n                </ComboboxChip>\\n              ))}\\n              <ComboboxChipsInput\\n                aria-label=\\\"Select a item\\\"\\n                placeholder={value.length > 0 ? undefined : \\\"Select a item...\\\"}\\n              />\\n            </>\\n          )}\\n        </ComboboxValue>\\n      </ComboboxChips>\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pill-shaped combobox\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-15.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox items={items}>\\n      <ComboboxInput\\n        aria-label=\\\"Select a item\\\"\\n        className=\\\"[--radius-lg:9999px] [--radius:9999px]\\\"\\n        placeholder=\\\"Select a item...\\\"\\n      />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Timezone combobox\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-16.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useMemo } from \\\"react\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nexport default function Particle() {\\n  const timezones = Intl.supportedValuesOf(\\\"timeZone\\\");\\n\\n  const formattedTimezones = useMemo(() => {\\n    return timezones\\n      .map((timezone) => {\\n        const formatter = new Intl.DateTimeFormat(\\\"en\\\", {\\n          timeZone: timezone,\\n          timeZoneName: \\\"shortOffset\\\",\\n        });\\n        const parts = formatter.formatToParts(new Date());\\n        const offset =\\n          parts.find((part) => part.type === \\\"timeZoneName\\\")?.value || \\\"\\\";\\n        const modifiedOffset = offset === \\\"GMT\\\" ? \\\"GMT+0\\\" : offset;\\n\\n        const offsetMatch = offset.match(/GMT([+-]?)(\\\\d+)(?::(\\\\d+))?/);\\n        const sign = offsetMatch?.[1] === \\\"-\\\" ? -1 : 1;\\n        const hours = Number.parseInt(offsetMatch?.[2] || \\\"0\\\", 10);\\n        const minutes = Number.parseInt(offsetMatch?.[3] || \\\"0\\\", 10);\\n        const totalMinutes = sign * (hours * 60 + minutes);\\n\\n        return {\\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \\\" \\\")}`,\\n          numericOffset: totalMinutes,\\n          value: timezone,\\n        };\\n      })\\n      .sort((a, b) => a.numericOffset - b.numericOffset);\\n  }, [timezones]);\\n\\n  const defaultTimezone = formattedTimezones.find(\\n    (tz) => tz.value === \\\"Europe/London\\\",\\n  );\\n\\n  return (\\n    <Combobox\\n      autoHighlight\\n      defaultValue={defaultTimezone}\\n      items={formattedTimezones}\\n    >\\n      <ComboboxInput\\n        aria-label=\\\"Select timezone\\\"\\n        placeholder=\\\"Select timezone...\\\"\\n      />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No timezones found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\",\n    \"timezone\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Timezone combobox with search input\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/combobox\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-17.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport { useMemo } from \\\"react\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxTrigger,\\n  ComboboxValue,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport { SelectButton } from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Particle() {\\n  const timezones = Intl.supportedValuesOf(\\\"timeZone\\\");\\n\\n  const formattedTimezones = useMemo(() => {\\n    return timezones\\n      .map((timezone) => {\\n        const formatter = new Intl.DateTimeFormat(\\\"en\\\", {\\n          timeZone: timezone,\\n          timeZoneName: \\\"shortOffset\\\",\\n        });\\n        const parts = formatter.formatToParts(new Date());\\n        const offset =\\n          parts.find((part) => part.type === \\\"timeZoneName\\\")?.value || \\\"\\\";\\n        const modifiedOffset = offset === \\\"GMT\\\" ? \\\"GMT+0\\\" : offset;\\n\\n        const offsetMatch = offset.match(/GMT([+-]?)(\\\\d+)(?::(\\\\d+))?/);\\n        const sign = offsetMatch?.[1] === \\\"-\\\" ? -1 : 1;\\n        const hours = Number.parseInt(offsetMatch?.[2] || \\\"0\\\", 10);\\n        const minutes = Number.parseInt(offsetMatch?.[3] || \\\"0\\\", 10);\\n        const totalMinutes = sign * (hours * 60 + minutes);\\n\\n        return {\\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \\\" \\\")}`,\\n          numericOffset: totalMinutes,\\n          value: timezone,\\n        };\\n      })\\n      .sort((a, b) => a.numericOffset - b.numericOffset);\\n  }, [timezones]);\\n\\n  const _defaultTimezone = formattedTimezones.find(\\n    (tz) => tz.value === \\\"Europe/London\\\",\\n  );\\n\\n  return (\\n    <Combobox autoHighlight items={formattedTimezones}>\\n      <ComboboxTrigger render={<SelectButton />}>\\n        <ComboboxValue placeholder=\\\"Select timezone\\\" />\\n      </ComboboxTrigger>\\n      <ComboboxPopup aria-label=\\\"Select timezone\\\">\\n        <div className=\\\"border-b p-2\\\">\\n          <ComboboxInput\\n            className=\\\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\\\"\\n            placeholder=\\\"e.g. Europe/London\\\"\\n            showTrigger={false}\\n            startAddon={<SearchIcon />}\\n          />\\n        </div>\\n        <ComboboxEmpty>No timezones found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\",\n    \"timezone\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox with select trigger\",\n  \"registryDependencies\": [\n    \"@coss/combobox\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-18.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxTrigger,\\n  ComboboxValue,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport { SelectButton } from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox items={items}>\\n      <ComboboxTrigger render={<SelectButton />}>\\n        <ComboboxValue placeholder=\\\"Select a fruit\\\" />\\n      </ComboboxTrigger>\\n      <ComboboxPopup aria-label=\\\"Select a fruit\\\">\\n        <div className=\\\"border-b p-2\\\">\\n          <ComboboxInput\\n            className=\\\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\\\"\\n            placeholder=\\\"Search fruits...\\\"\\n            showTrigger={false}\\n            startAddon={<SearchIcon />}\\n          />\\n        </div>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled combobox\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox defaultValue={items[2]} disabled items={items}>\\n      <ComboboxInput\\n        aria-label=\\\"Select an item\\\"\\n        placeholder=\\\"Select an item…\\\"\\n      />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\",\n    \"disabled\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small combobox\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox items={items}>\\n      <ComboboxInput\\n        aria-label=\\\"Select an item\\\"\\n        placeholder=\\\"Select an item...\\\"\\n        size=\\\"sm\\\"\\n      />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No results found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large combobox\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox items={items}>\\n      <ComboboxInput\\n        aria-label=\\\"Select an item\\\"\\n        placeholder=\\\"Select an item...\\\"\\n        size=\\\"lg\\\"\\n      />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No results found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox with label\",\n  \"registryDependencies\": [\n    \"@coss/combobox\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId } from \\\"react\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <Combobox items={items}>\\n      <div className=\\\"flex flex-col items-start gap-2\\\">\\n        <Label htmlFor={id}>Fruits</Label>\\n        <ComboboxInput\\n          aria-label=\\\"Select an item\\\"\\n          id={id}\\n          placeholder=\\\"Select an item...\\\"\\n        />\\n      </div>\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No results found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox auto highlighting the first option\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-6.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox autoHighlight items={items}>\\n      <ComboboxInput\\n        aria-label=\\\"Select an item\\\"\\n        placeholder=\\\"Select an item...\\\"\\n      />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No results found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox with clear button\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox items={items}>\\n      <ComboboxInput\\n        aria-label=\\\"Select a item\\\"\\n        placeholder=\\\"Select a item…\\\"\\n        showClear\\n      />\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox with grouped items\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-8.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Fragment } from \\\"react\\\";\\nimport {\\n  Combobox,\\n  ComboboxCollection,\\n  ComboboxEmpty,\\n  ComboboxGroup,\\n  ComboboxGroupLabel,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxSeparator,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\n// Grouped items demo\\ntype Tag = { id: string; label: string; group: \\\"Status\\\" | \\\"Priority\\\" | \\\"Team\\\" };\\ntype TagGroup = { value: string; items: Tag[] };\\n\\nconst tagsData: Tag[] = [\\n  // Status\\n  { group: \\\"Status\\\", id: \\\"s-open\\\", label: \\\"Open\\\" },\\n  { group: \\\"Status\\\", id: \\\"s-in-progress\\\", label: \\\"In progress\\\" },\\n  { group: \\\"Status\\\", id: \\\"s-blocked\\\", label: \\\"Blocked\\\" },\\n  { group: \\\"Status\\\", id: \\\"s-resolved\\\", label: \\\"Resolved\\\" },\\n  { group: \\\"Status\\\", id: \\\"s-closed\\\", label: \\\"Closed\\\" },\\n  // Priority\\n  { group: \\\"Priority\\\", id: \\\"p-low\\\", label: \\\"Low\\\" },\\n  { group: \\\"Priority\\\", id: \\\"p-medium\\\", label: \\\"Medium\\\" },\\n  { group: \\\"Priority\\\", id: \\\"p-high\\\", label: \\\"High\\\" },\\n  { group: \\\"Priority\\\", id: \\\"p-urgent\\\", label: \\\"Urgent\\\" },\\n  // Team\\n  { group: \\\"Team\\\", id: \\\"t-design\\\", label: \\\"Design\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-frontend\\\", label: \\\"Frontend\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-backend\\\", label: \\\"Backend\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-devops\\\", label: \\\"DevOps\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-qa\\\", label: \\\"QA\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-mobile\\\", label: \\\"Mobile\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-data\\\", label: \\\"Data\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-security\\\", label: \\\"Security\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-platform\\\", label: \\\"Platform\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-infra\\\", label: \\\"Infrastructure\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-product\\\", label: \\\"Product\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-marketing\\\", label: \\\"Marketing\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-sales\\\", label: \\\"Sales\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-support\\\", label: \\\"Support\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-research\\\", label: \\\"Research\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-content\\\", label: \\\"Content\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-analytics\\\", label: \\\"Analytics\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-operations\\\", label: \\\"Operations\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-finance\\\", label: \\\"Finance\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-hr\\\", label: \\\"HR\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-legal\\\", label: \\\"Legal\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-growth\\\", label: \\\"Growth\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-partner\\\", label: \\\"Partner\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-community\\\", label: \\\"Community\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-docs\\\", label: \\\"Docs\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-l10n\\\", label: \\\"Localization\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-a11y\\\", label: \\\"Accessibility\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-sre\\\", label: \\\"SRE\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-release\\\", label: \\\"Release\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-architecture\\\", label: \\\"Architecture\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-ux\\\", label: \\\"UX\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-ui\\\", label: \\\"UI\\\" },\\n  { group: \\\"Team\\\", id: \\\"t-management\\\", label: \\\"Management\\\" },\\n];\\n\\nfunction groupTags(tags: Tag[]): TagGroup[] {\\n  const groups: Record<string, Tag[]> = {};\\n  for (const tag of tags) {\\n    if (!groups[tag.group]) {\\n      groups[tag.group] = [];\\n    }\\n    groups[tag.group]?.push(tag);\\n  }\\n\\n  const order: Array<TagGroup[\\\"value\\\"]> = [\\\"Status\\\", \\\"Priority\\\", \\\"Team\\\"];\\n  return order.map((value) => ({ items: groups[value] ?? [], value }));\\n}\\n\\nconst groupedTags: TagGroup[] = groupTags(tagsData);\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox items={groupedTags}>\\n      <div className=\\\"flex flex-col items-start gap-2\\\">\\n        <ComboboxInput aria-label=\\\"Search tags\\\" placeholder=\\\"e.g. feature\\\" />\\n      </div>\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No tags found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(group: TagGroup) => (\\n            <Fragment key={group.value}>\\n              <ComboboxGroup items={group.items}>\\n                <ComboboxGroupLabel>{group.value}</ComboboxGroupLabel>\\n                <ComboboxCollection>\\n                  {(tag: Tag) => (\\n                    <ComboboxItem key={tag.id} value={tag}>\\n                      {tag.label}\\n                    </ComboboxItem>\\n                  )}\\n                </ComboboxCollection>\\n              </ComboboxGroup>\\n              {group.value !== \\\"Team\\\" && <ComboboxSeparator />}\\n            </Fragment>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-combobox-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-combobox-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Combobox with multiple selection\",\n  \"registryDependencies\": [\n    \"@coss/combobox\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-combobox-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxChip,\\n  ComboboxChips,\\n  ComboboxChipsInput,\\n  ComboboxEmpty,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxValue,\\n} from \\\"@/registry/default/ui/combobox\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Combobox defaultValue={[items[0], items[4]]} items={items} multiple>\\n      <ComboboxChips>\\n        <ComboboxValue>\\n          {(value: { value: string; label: string }[]) => (\\n            <>\\n              {value?.map((item) => (\\n                <ComboboxChip aria-label={item.label} key={item.value}>\\n                  {item.label}\\n                </ComboboxChip>\\n              ))}\\n              <ComboboxChipsInput\\n                aria-label=\\\"Select a item\\\"\\n                placeholder={value.length > 0 ? undefined : \\\"Select a item...\\\"}\\n              />\\n            </>\\n          )}\\n        </ComboboxValue>\\n      </ComboboxChips>\\n      <ComboboxPopup>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item) => (\\n            <ComboboxItem key={item.value} value={item}>\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-command-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-command-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Command palette with dialog\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/command\",\n    \"@coss/kbd\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-command-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ArrowDownIcon, ArrowUpIcon, CornerDownLeftIcon } from \\\"lucide-react\\\";\\nimport { Fragment, useEffect, useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Command,\\n  CommandCollection,\\n  CommandDialog,\\n  CommandDialogPopup,\\n  CommandDialogTrigger,\\n  CommandEmpty,\\n  CommandFooter,\\n  CommandGroup,\\n  CommandGroupLabel,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n  CommandPanel,\\n  CommandSeparator,\\n  CommandShortcut,\\n} from \\\"@/registry/default/ui/command\\\";\\nimport { Kbd, KbdGroup } from \\\"@/registry/default/ui/kbd\\\";\\n\\nexport interface Item {\\n  value: string;\\n  label: string;\\n  shortcut?: string;\\n}\\n\\nexport interface Group {\\n  value: string;\\n  items: Item[];\\n}\\n\\nexport const suggestions: Item[] = [\\n  { label: \\\"Linear\\\", shortcut: \\\"⌘L\\\", value: \\\"linear\\\" },\\n  { label: \\\"Figma\\\", shortcut: \\\"⌘F\\\", value: \\\"figma\\\" },\\n  { label: \\\"Slack\\\", shortcut: \\\"⌘S\\\", value: \\\"slack\\\" },\\n  { label: \\\"YouTube\\\", shortcut: \\\"⌘Y\\\", value: \\\"youtube\\\" },\\n  { label: \\\"Raycast\\\", shortcut: \\\"⌘R\\\", value: \\\"raycast\\\" },\\n];\\n\\nexport const commands: Item[] = [\\n  { label: \\\"Clipboard History\\\", shortcut: \\\"⌘⇧C\\\", value: \\\"clipboard-history\\\" },\\n  { label: \\\"Import Extension\\\", shortcut: \\\"⌘I\\\", value: \\\"import-extension\\\" },\\n  { label: \\\"Create Snippet\\\", shortcut: \\\"⌘N\\\", value: \\\"create-snippet\\\" },\\n  { label: \\\"System Preferences\\\", shortcut: \\\"⌘,\\\", value: \\\"system-preferences\\\" },\\n  { label: \\\"Window Management\\\", shortcut: \\\"⌘⇧W\\\", value: \\\"window-management\\\" },\\n];\\n\\nexport const groupedItems: Group[] = [\\n  { items: suggestions, value: \\\"Suggestions\\\" },\\n  { items: commands, value: \\\"Commands\\\" },\\n];\\n\\nexport default function Particle() {\\n  const [open, setOpen] = useState(false);\\n\\n  function handleItemClick(_item: Item) {\\n    setOpen(false);\\n  }\\n\\n  useEffect(() => {\\n    const down = (e: KeyboardEvent) => {\\n      if (e.key === \\\"j\\\" && (e.metaKey || e.ctrlKey)) {\\n        e.preventDefault();\\n        setOpen((open) => !open);\\n      }\\n    };\\n\\n    document.addEventListener(\\\"keydown\\\", down);\\n    return () => document.removeEventListener(\\\"keydown\\\", down);\\n  }, []);\\n\\n  return (\\n    <CommandDialog onOpenChange={setOpen} open={open}>\\n      <CommandDialogTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open Command Palette\\n        <KbdGroup>\\n          <Kbd>⌘</Kbd>\\n          <Kbd>J</Kbd>\\n        </KbdGroup>\\n      </CommandDialogTrigger>\\n      <CommandDialogPopup>\\n        <Command items={groupedItems}>\\n          <CommandInput placeholder=\\\"Search for apps and commands...\\\" />\\n          <CommandPanel>\\n            <CommandEmpty>No results found.</CommandEmpty>\\n            <CommandList>\\n              {(group: Group, _index: number) => (\\n                <Fragment key={group.value}>\\n                  <CommandGroup items={group.items}>\\n                    <CommandGroupLabel>{group.value}</CommandGroupLabel>\\n                    <CommandCollection>\\n                      {(item: Item) => (\\n                        <CommandItem\\n                          key={item.value}\\n                          onClick={() => handleItemClick(item)}\\n                          value={item.value}\\n                        >\\n                          <span className=\\\"flex-1\\\">{item.label}</span>\\n                          {item.shortcut && (\\n                            <CommandShortcut>{item.shortcut}</CommandShortcut>\\n                          )}\\n                        </CommandItem>\\n                      )}\\n                    </CommandCollection>\\n                  </CommandGroup>\\n                  <CommandSeparator />\\n                </Fragment>\\n              )}\\n            </CommandList>\\n          </CommandPanel>\\n          <CommandFooter>\\n            <div className=\\\"flex items-center gap-4\\\">\\n              <div className=\\\"flex items-center gap-2\\\">\\n                <KbdGroup>\\n                  <Kbd>\\n                    <ArrowUpIcon />\\n                  </Kbd>\\n                  <Kbd>\\n                    <ArrowDownIcon />\\n                  </Kbd>\\n                </KbdGroup>\\n                <span>Navigate</span>\\n              </div>\\n              <div className=\\\"flex items-center gap-2\\\">\\n                <Kbd>\\n                  <CornerDownLeftIcon />\\n                </Kbd>\\n                <span>Open</span>\\n              </div>\\n            </div>\\n            <div className=\\\"flex items-center gap-2\\\">\\n              <Kbd>Esc</Kbd>\\n              <span>Close</span>\\n            </div>\\n          </CommandFooter>\\n        </Command>\\n      </CommandDialogPopup>\\n    </CommandDialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"command\",\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-command-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-command-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Command palette with AI assistant\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/autocomplete\",\n    \"@coss/button\",\n    \"@coss/command\",\n    \"@coss/empty\",\n    \"@coss/input\",\n    \"@coss/kbd\",\n    \"@coss/scroll-area\",\n    \"@coss/skeleton\",\n    \"@coss/spinner\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-command-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  ArrowDownIcon,\\n  ArrowLeftIcon,\\n  ArrowUpIcon,\\n  CircleQuestionMarkIcon,\\n  CornerDownLeftIcon,\\n  SearchIcon,\\n  SparklesIcon,\\n} from \\\"lucide-react\\\";\\nimport Link from \\\"next/link\\\";\\nimport {\\n  Fragment,\\n  useCallback,\\n  useEffect,\\n  useMemo,\\n  useRef,\\n  useState,\\n} from \\\"react\\\";\\nimport { useAutocompleteFilter } from \\\"@/registry/default/ui/autocomplete\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Command,\\n  CommandCollection,\\n  CommandCreateHandle,\\n  CommandDialog,\\n  CommandDialogPopup,\\n  CommandEmpty,\\n  CommandFooter,\\n  CommandGroup,\\n  CommandGroupLabel,\\n  CommandInput,\\n  CommandItem,\\n  CommandList,\\n  CommandPanel,\\n  CommandSeparator,\\n  CommandShortcut,\\n} from \\\"@/registry/default/ui/command\\\";\\nimport { EmptyMedia } from \\\"@/registry/default/ui/empty\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Kbd, KbdGroup } from \\\"@/registry/default/ui/kbd\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\nimport { Skeleton } from \\\"@/registry/default/ui/skeleton\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\n\\ninterface Item {\\n  value: string;\\n  label: string;\\n  shortcut?: string;\\n  keywords?: string[];\\n}\\n\\ninterface Group {\\n  value: string;\\n  items: Item[];\\n}\\n\\nconst commandGroups: Group[] = [\\n  {\\n    items: [\\n      {\\n        keywords: [\\\"dash\\\"],\\n        label: \\\"Dashboard\\\",\\n        shortcut: \\\"d\\\",\\n        value: \\\"dashboard\\\",\\n      },\\n      {\\n        keywords: [\\\"proj\\\"],\\n        label: \\\"Projects\\\",\\n        shortcut: \\\"p\\\",\\n        value: \\\"projects\\\",\\n      },\\n      { keywords: [\\\"team\\\"], label: \\\"Team\\\", shortcut: \\\"t\\\", value: \\\"team\\\" },\\n    ],\\n    value: \\\"Pages\\\",\\n  },\\n  {\\n    items: [\\n      {\\n        keywords: [\\\"prof\\\"],\\n        label: \\\"Profile\\\",\\n        shortcut: \\\"p s\\\",\\n        value: \\\"profile\\\",\\n      },\\n      {\\n        keywords: [\\\"acc\\\"],\\n        label: \\\"Account\\\",\\n        shortcut: \\\"a s\\\",\\n        value: \\\"account\\\",\\n      },\\n      {\\n        keywords: [\\\"pref\\\"],\\n        label: \\\"Preferences\\\",\\n        shortcut: \\\"p r\\\",\\n        value: \\\"preferences\\\",\\n      },\\n    ],\\n    value: \\\"Settings\\\",\\n  },\\n  {\\n    items: [\\n      {\\n        keywords: [\\\"docs\\\"],\\n        label: \\\"Documentation\\\",\\n        shortcut: \\\"d o\\\",\\n        value: \\\"docs\\\",\\n      },\\n      {\\n        keywords: [\\\"sup\\\"],\\n        label: \\\"Support\\\",\\n        shortcut: \\\"s u\\\",\\n        value: \\\"support\\\",\\n      },\\n      {\\n        keywords: [\\\"feed\\\"],\\n        label: \\\"Feedback\\\",\\n        shortcut: \\\"f b\\\",\\n        value: \\\"feedback\\\",\\n      },\\n    ],\\n    value: \\\"Help\\\",\\n  },\\n];\\n\\nconst MOCK_AI_RESPONSE = `To create a new project, navigate to the Projects page and click the \\\"New Project\\\" button in the top right corner. You'll be prompted to enter a project name and description.\\n\\nOnce created, you can invite team members by clicking the \\\"Share\\\" button and entering their email addresses. Team members will receive an invitation link via email or you can add them manually by clicking the \\\"Add Team Member\\\" button in the project settings.\\n\\nYou can customize project settings at any time by clicking the settings icon in the project header. For more information, see the Project Settings documentation.`;\\n\\nconst MOCK_REFERENCE_LINKS = [\\n  { title: \\\"Creating Projects\\\", url: \\\"/docs/projects/create\\\" },\\n  { title: \\\"Team Collaboration\\\", url: \\\"/docs/team/collaborate\\\" },\\n  { title: \\\"Project Settings\\\", url: \\\"/docs/projects/settings\\\" },\\n];\\n\\nexport const commandHandle: ReturnType<typeof CommandCreateHandle> =\\n  CommandCreateHandle();\\n\\ninterface AIState {\\n  mode: boolean;\\n  query: string;\\n  submittedQuery: string;\\n  response: string;\\n  referenceLinks: Array<{ title: string; url: string }>;\\n  isGenerating: boolean;\\n  error: string | null;\\n}\\n\\nconst initialAIState: AIState = {\\n  error: null,\\n  isGenerating: false,\\n  mode: false,\\n  query: \\\"\\\",\\n  referenceLinks: [],\\n  response: \\\"\\\",\\n  submittedQuery: \\\"\\\",\\n};\\n\\nfunction markdownToSafeHTML(markdown: string): string {\\n  // Simple markdown to HTML converter for demo purposes\\n  return markdown\\n    .split(\\\"\\\\n\\\\n\\\")\\n    .map((para) => `<p>${para}</p>`)\\n    .join(\\\"\\\");\\n}\\n\\nexport default function PCommand2() {\\n  const [open, setOpen] = useState(false);\\n  const [aiState, setAIState] = useState<AIState>(initialAIState);\\n  const [searchQuery, setSearchQuery] = useState(\\\"\\\");\\n  const aiInputRef = useRef<HTMLInputElement>(null);\\n  const searchInputRef = useRef<HTMLInputElement>(null);\\n  const abortControllerRef = useRef<AbortController | null>(null);\\n  const commandResetKeyRef = useRef(0);\\n\\n  // Cleanup on unmount\\n  useEffect(() => {\\n    return () => {\\n      abortControllerRef.current?.abort();\\n    };\\n  }, []);\\n\\n  const resetAIState = useCallback(() => {\\n    abortControllerRef.current?.abort();\\n    setAIState(initialAIState);\\n  }, []);\\n\\n  const handleItemClick = useCallback(() => {\\n    setOpen(false);\\n  }, []);\\n\\n  const handleBackToSearch = useCallback(() => {\\n    resetAIState();\\n    setSearchQuery(\\\"\\\");\\n    commandResetKeyRef.current += 1;\\n    searchInputRef.current?.focus();\\n  }, [resetAIState]);\\n\\n  const handleGenerateAI = useCallback(\\n    async (queryOverride?: string) => {\\n      const query = queryOverride || aiState.query;\\n      if (!query.trim()) return;\\n\\n      abortControllerRef.current?.abort();\\n      const controller = new AbortController();\\n      abortControllerRef.current = controller;\\n\\n      setAIState((prev) => ({\\n        ...prev,\\n        error: null,\\n        isGenerating: true,\\n        query: \\\"\\\",\\n        referenceLinks: [],\\n        response: \\\"\\\",\\n        submittedQuery: query,\\n      }));\\n\\n      try {\\n        await new Promise<void>((resolve, reject) => {\\n          const timeout = setTimeout(resolve, 1500);\\n          controller.signal.addEventListener(\\\"abort\\\", () => {\\n            clearTimeout(timeout);\\n            reject(new Error(\\\"aborted\\\"));\\n          });\\n        });\\n\\n        if (controller.signal.aborted) return;\\n\\n        setAIState((prev) => ({\\n          ...prev,\\n          isGenerating: false,\\n          referenceLinks: MOCK_REFERENCE_LINKS,\\n          response: MOCK_AI_RESPONSE,\\n        }));\\n      } catch (error) {\\n        if (error instanceof Error && error.message === \\\"aborted\\\") {\\n          return;\\n        }\\n\\n        if (controller.signal.aborted) return;\\n\\n        setAIState((prev) => ({\\n          ...prev,\\n          error: \\\"Failed to generate response. Please try again.\\\",\\n          isGenerating: false,\\n        }));\\n      }\\n    },\\n    [aiState.query],\\n  );\\n\\n  const handleAskAI = useCallback(() => {\\n    const currentQuery = searchQuery;\\n    setSearchQuery(\\\"\\\");\\n\\n    if (currentQuery.trim()) {\\n      setAIState((prev) => ({ ...prev, mode: true }));\\n      handleGenerateAI(currentQuery);\\n    } else {\\n      setAIState((prev) => ({ ...prev, mode: true, query: \\\"\\\" }));\\n      aiInputRef.current?.focus();\\n    }\\n  }, [searchQuery, handleGenerateAI]);\\n\\n  const { contains } = useAutocompleteFilter({ sensitivity: \\\"base\\\" });\\n\\n  const filterItem = useCallback(\\n    (itemValue: unknown, query: string): boolean => {\\n      if (typeof itemValue !== \\\"object\\\" || itemValue === null) {\\n        return false;\\n      }\\n\\n      const item = itemValue as Item;\\n\\n      if (contains(item.label, query)) {\\n        return true;\\n      }\\n\\n      if (contains(item.value, query)) {\\n        return true;\\n      }\\n\\n      if (item.keywords?.some((keyword) => contains(keyword, query))) {\\n        return true;\\n      }\\n\\n      return false;\\n    },\\n    [contains],\\n  );\\n\\n  useEffect(() => {\\n    if (!open || !aiState.mode) return;\\n\\n    const handleEscape = (e: KeyboardEvent) => {\\n      if (e.key === \\\"Escape\\\") {\\n        e.preventDefault();\\n        e.stopPropagation();\\n        handleBackToSearch();\\n      }\\n    };\\n\\n    document.addEventListener(\\\"keydown\\\", handleEscape, true);\\n    return () => document.removeEventListener(\\\"keydown\\\", handleEscape, true);\\n  }, [open, aiState.mode, handleBackToSearch]);\\n\\n  useEffect(() => {\\n    if (aiState.mode && !aiState.isGenerating) {\\n      aiInputRef.current?.focus();\\n    }\\n  }, [aiState.mode, aiState.isGenerating]);\\n\\n  const hasResults = useMemo(\\n    () =>\\n      !searchQuery.trim() ||\\n      commandGroups.some((group) =>\\n        group.items.some((item) => filterItem(item, searchQuery)),\\n      ),\\n    [searchQuery, filterItem],\\n  );\\n\\n  const handleOpenChange = useCallback(\\n    (newOpen: boolean) => {\\n      setOpen(newOpen);\\n      if (!newOpen) {\\n        setSearchQuery(\\\"\\\");\\n        resetAIState();\\n      }\\n    },\\n    [resetAIState],\\n  );\\n\\n  return (\\n    <>\\n      <Button onClick={() => setOpen(true)} variant=\\\"outline\\\">\\n        Cmdk with AI\\n      </Button>\\n      <CommandDialog\\n        handle={commandHandle}\\n        onOpenChange={handleOpenChange}\\n        open={open}\\n      >\\n        <CommandDialogPopup>\\n          {!aiState.mode ? (\\n            <Command\\n              filter={filterItem}\\n              items={commandGroups}\\n              key={commandResetKeyRef.current}\\n            >\\n              <div className=\\\"relative flex items-center *:first:flex-1\\\">\\n                <CommandInput\\n                  onChange={(e) => setSearchQuery(e.target.value)}\\n                  onKeyDown={(e) => {\\n                    if (e.key === \\\"Tab\\\") {\\n                      e.preventDefault();\\n                      handleAskAI();\\n                    }\\n                    if (\\n                      e.key === \\\"Enter\\\" &&\\n                      !hasResults &&\\n                      searchQuery.trim()\\n                    ) {\\n                      e.preventDefault();\\n                      handleAskAI();\\n                    }\\n                  }}\\n                  placeholder=\\\"Type a command or search...\\\"\\n                  ref={searchInputRef}\\n                  value={searchQuery}\\n                />\\n                <Button\\n                  className=\\\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\\\"\\n                  onClick={handleAskAI}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  <SparklesIcon className=\\\"size-4 sm:size-3.5\\\" />\\n                  Ask AI\\n                  <Kbd className=\\\"ms-0.5 -me-1.5\\\">Tab</Kbd>\\n                </Button>\\n              </div>\\n              <CommandPanel>\\n                <CommandEmpty className=\\\"not-empty:py-12\\\">\\n                  {searchQuery.trim() && (\\n                    <div className=\\\"wrap-break-word flex flex-col flex-wrap items-center gap-2\\\">\\n                      <EmptyMedia variant=\\\"icon\\\">\\n                        <SearchIcon />\\n                      </EmptyMedia>\\n                      <p>No results found.</p>\\n                      <p>\\n                        Press <Kbd>Enter</Kbd> to ask AI about:\\n                        <br />{\\\" \\\"}\\n                        <strong className=\\\"font-medium text-foreground\\\">\\n                          {searchQuery}\\n                        </strong>\\n                      </p>\\n                    </div>\\n                  )}\\n                </CommandEmpty>\\n                <CommandList>\\n                  {(group: Group) => (\\n                    <Fragment key={group.value}>\\n                      <CommandGroup items={group.items}>\\n                        <CommandGroupLabel>{group.value}</CommandGroupLabel>\\n                        <CommandCollection>\\n                          {(item: Item) => (\\n                            <CommandItem\\n                              key={item.value}\\n                              onClick={handleItemClick}\\n                              value={item}\\n                            >\\n                              <span className=\\\"flex-1\\\">{item.label}</span>\\n                              {item.shortcut && (\\n                                <CommandShortcut>\\n                                  {item.shortcut}\\n                                </CommandShortcut>\\n                              )}\\n                            </CommandItem>\\n                          )}\\n                        </CommandCollection>\\n                      </CommandGroup>\\n                      <CommandSeparator />\\n                    </Fragment>\\n                  )}\\n                </CommandList>\\n              </CommandPanel>\\n              <CommandFooter>\\n                {hasResults ? (\\n                  <>\\n                    <div className=\\\"flex items-center gap-4\\\">\\n                      <div className=\\\"flex items-center gap-2\\\">\\n                        <KbdGroup>\\n                          <Kbd>\\n                            <ArrowUpIcon />\\n                          </Kbd>\\n                          <Kbd>\\n                            <ArrowDownIcon />\\n                          </Kbd>\\n                        </KbdGroup>\\n                        <span>Navigate</span>\\n                      </div>\\n                      <div className=\\\"flex items-center gap-2\\\">\\n                        <Kbd>\\n                          <CornerDownLeftIcon />\\n                        </Kbd>\\n                        <span>Open</span>\\n                      </div>\\n                    </div>\\n                    <div className=\\\"flex items-center gap-2\\\">\\n                      <Kbd>Esc</Kbd>\\n                      <span>Close</span>\\n                    </div>\\n                  </>\\n                ) : (\\n                  <div className=\\\"ms-auto flex items-center gap-2\\\">\\n                    <Kbd>Esc</Kbd>\\n                    <span>Close</span>\\n                  </div>\\n                )}\\n              </CommandFooter>\\n            </Command>\\n          ) : (\\n            <Command>\\n              <div className=\\\"flex items-center *:first:flex-1\\\">\\n                <div className=\\\"px-2.5 py-1.5\\\">\\n                  <div className=\\\"relative w-full\\\">\\n                    <div\\n                      aria-hidden=\\\"true\\\"\\n                      className=\\\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\\\"\\n                      data-slot=\\\"autocomplete-start-addon\\\"\\n                    >\\n                      <SparklesIcon />\\n                    </div>\\n                    <Input\\n                      aria-label=\\\"AI query input\\\"\\n                      className=\\\"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 *:data-[slot=input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=input]:ps-[calc(--spacing(8)-1px)]\\\"\\n                      disabled={aiState.isGenerating}\\n                      onChange={(e) =>\\n                        setAIState((prev) => ({\\n                          ...prev,\\n                          query: e.target.value,\\n                        }))\\n                      }\\n                      onKeyDown={(e) => {\\n                        if (e.key === \\\"Enter\\\" && !aiState.isGenerating) {\\n                          handleGenerateAI();\\n                        }\\n                        if (e.key === \\\"Escape\\\") {\\n                          e.preventDefault();\\n                          handleBackToSearch();\\n                        }\\n                      }}\\n                      placeholder=\\\"Ask AI anything…\\\"\\n                      ref={aiInputRef}\\n                      size=\\\"lg\\\"\\n                      value={aiState.query}\\n                    />\\n                  </div>\\n                </div>\\n                <Button\\n                  className=\\\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\\\"\\n                  onClick={handleBackToSearch}\\n                  size=\\\"sm\\\"\\n                  variant=\\\"ghost\\\"\\n                >\\n                  <ArrowLeftIcon className=\\\"size-4 sm:size-3.5\\\" />\\n                  Back to search\\n                  <Kbd className=\\\"ms-0.5 -me-1.5\\\">Esc</Kbd>\\n                </Button>\\n              </div>\\n              <CommandPanel>\\n                <ScrollArea scrollbarGutter scrollFade>\\n                  <div className=\\\"p-5\\\">\\n                    {!aiState.isGenerating &&\\n                      !aiState.response &&\\n                      !aiState.error && (\\n                        <div className=\\\"flex items-center justify-center py-12\\\">\\n                          <p className=\\\"text-muted-foreground text-sm\\\">\\n                            Ask AI anything and press <Kbd>Enter</Kbd> to get\\n                            started.\\n                          </p>\\n                        </div>\\n                      )}\\n\\n                    {aiState.error && (\\n                      <div\\n                        aria-live=\\\"polite\\\"\\n                        className=\\\"text-destructive text-sm\\\"\\n                        role=\\\"alert\\\"\\n                      >\\n                        {aiState.error}\\n                      </div>\\n                    )}\\n\\n                    {aiState.isGenerating && (\\n                      <div className=\\\"flex flex-col gap-4\\\">\\n                        <div className=\\\"flex flex-col gap-2\\\">\\n                          <Skeleton className=\\\"h-4 w-full\\\" />\\n                          <Skeleton className=\\\"h-4 w-full\\\" />\\n                          <Skeleton className=\\\"h-4 w-full\\\" />\\n                          <Skeleton className=\\\"h-4 w-1/2\\\" />\\n                        </div>\\n                        <div className=\\\"flex flex-col gap-2\\\">\\n                          <Skeleton className=\\\"h-4 w-full\\\" />\\n                          <Skeleton className=\\\"h-4 w-full\\\" />\\n                          <Skeleton className=\\\"h-4 w-3/4\\\" />\\n                        </div>\\n                        <div className=\\\"flex flex-col gap-2\\\">\\n                          <Skeleton className=\\\"h-4 w-full\\\" />\\n                          <Skeleton className=\\\"h-4 w-full\\\" />\\n                          <Skeleton className=\\\"h-4 w-full\\\" />\\n                          <Skeleton className=\\\"h-4 w-3/5\\\" />\\n                        </div>\\n                      </div>\\n                    )}\\n\\n                    {aiState.response && !aiState.isGenerating && (\\n                      <>\\n                        <div\\n                          aria-live=\\\"polite\\\"\\n                          className=\\\"text-muted-foreground text-sm **:[a]:underline **:[a]:underline-offset-4 **:[code]:rounded-md **:[code]:bg-muted **:[code]:px-[0.3rem] **:[code]:py-[0.2rem] **:[code]:font-mono **:[p]:not-first:mt-3 **:[p]:leading-relaxed **:[strong,a]:font-medium **:[strong,a]:text-foreground\\\"\\n                          dangerouslySetInnerHTML={{\\n                            __html: markdownToSafeHTML(aiState.response),\\n                          }}\\n                        />\\n                        {aiState.referenceLinks.length > 0 && (\\n                          <div className=\\\"mt-4 flex flex-wrap gap-2\\\">\\n                            {aiState.referenceLinks.map((link, index) => (\\n                              <Button\\n                                key={`${link.url}-${index}`}\\n                                render={<Link href={link.url} />}\\n                                size=\\\"sm\\\"\\n                                variant=\\\"secondary\\\"\\n                              >\\n                                {link.title}\\n                              </Button>\\n                            ))}\\n                          </div>\\n                        )}\\n                      </>\\n                    )}\\n                  </div>\\n                </ScrollArea>\\n              </CommandPanel>\\n\\n              <CommandFooter>\\n                {aiState.isGenerating ? (\\n                  <div aria-live=\\\"polite\\\" className=\\\"flex items-center gap-2\\\">\\n                    <div className=\\\"flex h-5 items-center justify-center\\\">\\n                      <Spinner className=\\\"size-3\\\" />\\n                    </div>\\n                    <span className=\\\"animate-pulse\\\">Generating response…</span>\\n                  </div>\\n                ) : aiState.response ? (\\n                  <div className=\\\"flex items-center gap-2\\\">\\n                    <div className=\\\"flex h-5 items-center justify-center\\\">\\n                      <CircleQuestionMarkIcon className=\\\"size-3\\\" />\\n                    </div>\\n                    You asked: <span>&quot;{aiState.submittedQuery}&quot;</span>\\n                  </div>\\n                ) : (\\n                  <div className=\\\"flex items-center gap-2\\\">\\n                    <Kbd>\\n                      <CornerDownLeftIcon />\\n                    </Kbd>\\n                    <span>Ask AI</span>\\n                  </div>\\n                )}\\n              </CommandFooter>\\n            </Command>\\n          )}\\n        </CommandDialogPopup>\\n      </CommandDialog>\\n    </>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"command\",\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic date picker\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/popover\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>();\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger\\n        render={<Button className=\\\"w-full justify-start\\\" variant=\\\"outline\\\" />}\\n      >\\n        <CalendarIcon aria-hidden=\\\"true\\\" />\\n        {date ? format(date, \\\"PPP\\\") : \\\"Pick a date\\\"}\\n      </PopoverTrigger>\\n      <PopoverPopup>\\n        <Calendar\\n          defaultMonth={date}\\n          mode=\\\"single\\\"\\n          onSelect={setDate}\\n          selected={date}\\n        />\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Date range picker\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/popover\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<DateRange | undefined>();\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger\\n        render={<Button className=\\\"w-full justify-start\\\" variant=\\\"outline\\\" />}\\n      >\\n        <CalendarIcon aria-hidden=\\\"true\\\" />\\n        {date?.from ? (\\n          date.to ? (\\n            <>\\n              {format(date.from, \\\"LLL dd, y\\\")} - {format(date.to, \\\"LLL dd, y\\\")}\\n            </>\\n          ) : (\\n            format(date.from, \\\"LLL dd, y\\\")\\n          )\\n        ) : (\\n          <span>Pick a date range</span>\\n        )}\\n      </PopoverTrigger>\\n      <PopoverPopup>\\n        <Calendar\\n          defaultMonth={date?.from}\\n          mode=\\\"range\\\"\\n          onSelect={setDate}\\n          selected={date}\\n        />\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Date picker with field and dropdown navigation\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/calendar\",\n    \"@coss/combobox\",\n    \"@coss/field\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport * as React from \\\"react\\\";\\nimport type { DropdownProps } from \\\"react-day-picker\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\ninterface DropdownItem {\\n  disabled?: boolean;\\n  label: string;\\n  value: string;\\n}\\n\\nfunction CalendarDropdown(props: DropdownProps) {\\n  const { options, value, onChange, \\\"aria-label\\\": ariaLabel } = props;\\n\\n  const items: DropdownItem[] =\\n    options?.map((option) => ({\\n      disabled: option.disabled,\\n      label: option.label,\\n      value: option.value.toString(),\\n    })) ?? [];\\n\\n  const selectedItem = items.find((item) => item.value === value?.toString());\\n\\n  const handleValueChange = (newValue: DropdownItem | null) => {\\n    if (onChange && newValue) {\\n      const syntheticEvent = {\\n        target: { value: newValue.value },\\n      } as React.ChangeEvent<HTMLSelectElement>;\\n      onChange(syntheticEvent);\\n    }\\n  };\\n\\n  return (\\n    <Combobox\\n      aria-label={ariaLabel}\\n      autoHighlight\\n      items={items}\\n      onValueChange={handleValueChange}\\n      value={selectedItem}\\n    >\\n      <ComboboxInput\\n        className=\\\"**:[input]:w-0 **:[input]:flex-1\\\"\\n        onFocus={(e) => e.currentTarget.select()}\\n      />\\n      <ComboboxPopup aria-label={ariaLabel}>\\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\\n        <ComboboxList>\\n          {(item: DropdownItem) => (\\n            <ComboboxItem\\n              disabled={item.disabled}\\n              key={item.value}\\n              value={item}\\n            >\\n              {item.label}\\n            </ComboboxItem>\\n          )}\\n        </ComboboxList>\\n      </ComboboxPopup>\\n    </Combobox>\\n  );\\n}\\n\\nexport default function Particle() {\\n  const [date, setDate] = React.useState<Date | undefined>();\\n  const id = React.useId();\\n  return (\\n    <Field>\\n      <FieldLabel htmlFor={id}>Start date</FieldLabel>\\n      <Popover>\\n        <PopoverTrigger\\n          id={id}\\n          render={<Button className=\\\"w-full justify-start\\\" variant=\\\"outline\\\" />}\\n        >\\n          <CalendarIcon aria-hidden=\\\"true\\\" />\\n          {date ? format(date, \\\"PPP\\\") : \\\"Pick a date\\\"}\\n        </PopoverTrigger>\\n        <PopoverPopup>\\n          <Calendar\\n            captionLayout=\\\"dropdown\\\"\\n            components={{ Dropdown: CalendarDropdown }}\\n            defaultMonth={date}\\n            endMonth={new Date()}\\n            mode=\\\"single\\\"\\n            onSelect={setDate}\\n            selected={date}\\n            startMonth={new Date(1900, 0)}\\n          />\\n        </PopoverPopup>\\n      </Popover>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\",\n    \"field\",\n    \"combobox\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Date picker with presets\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/calendar\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { addDays, format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  const today = new Date();\\n  const [month, setMonth] = useState(today);\\n  const [date, setDate] = useState<Date | undefined>(today);\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger\\n        render={<Button className=\\\"w-full justify-start\\\" variant=\\\"outline\\\" />}\\n      >\\n        <CalendarIcon aria-hidden=\\\"true\\\" />\\n        {date ? format(date, \\\"PPP\\\") : \\\"Pick a date\\\"}\\n      </PopoverTrigger>\\n      <PopoverPopup>\\n        <div className=\\\"flex max-sm:flex-col\\\">\\n          <div className=\\\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\\\">\\n            <div className=\\\"flex h-full flex-col sm:border-e sm:pe-3\\\">\\n              <Button\\n                className=\\\"w-full justify-start\\\"\\n                onClick={() => {\\n                  setDate(today);\\n                  setMonth(today);\\n                }}\\n                size=\\\"sm\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                Today\\n              </Button>\\n              <Button\\n                className=\\\"w-full justify-start\\\"\\n                onClick={() => {\\n                  const tomorrow = addDays(today, 1);\\n                  setDate(tomorrow);\\n                  setMonth(tomorrow);\\n                }}\\n                size=\\\"sm\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                Tomorrow\\n              </Button>\\n              <Button\\n                className=\\\"w-full justify-start\\\"\\n                onClick={() => {\\n                  const in3Days = addDays(today, 3);\\n                  setDate(in3Days);\\n                  setMonth(in3Days);\\n                }}\\n                size=\\\"sm\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                In 3 days\\n              </Button>\\n              <Button\\n                className=\\\"w-full justify-start\\\"\\n                onClick={() => {\\n                  const inAWeek = addDays(today, 7);\\n                  setDate(inAWeek);\\n                  setMonth(inAWeek);\\n                }}\\n                size=\\\"sm\\\"\\n                variant=\\\"ghost\\\"\\n              >\\n                In a week\\n              </Button>\\n            </div>\\n          </div>\\n          <Calendar\\n            className=\\\"max-sm:pb-3 sm:ps-2\\\"\\n            mode=\\\"single\\\"\\n            month={month}\\n            onMonthChange={setMonth}\\n            onSelect={setDate}\\n            selected={date}\\n          />\\n        </div>\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Date picker with input\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/calendar\",\n    \"@coss/input-group\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format, isValid, parse } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>();\\n  const [inputValue, setInputValue] = useState(\\\"\\\");\\n  const [month, setMonth] = useState<Date>(() => new Date());\\n\\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\\n    const value = e.target.value;\\n    setInputValue(value);\\n\\n    if (value) {\\n      const parsedDate = parse(value, \\\"yyyy-MM-dd\\\", new Date());\\n      if (isValid(parsedDate)) {\\n        setDate(parsedDate);\\n        setMonth(parsedDate);\\n      }\\n    } else {\\n      setDate(undefined);\\n    }\\n  };\\n\\n  const handleSelect = (selectedDate: Date | undefined) => {\\n    setDate(selectedDate);\\n    if (selectedDate) {\\n      setInputValue(format(selectedDate, \\\"yyyy-MM-dd\\\"));\\n      setMonth(selectedDate);\\n    } else {\\n      setInputValue(\\\"\\\");\\n    }\\n  };\\n\\n  return (\\n    <Popover>\\n      <InputGroup>\\n        <InputGroupInput\\n          aria-label=\\\"Select date\\\"\\n          className=\\\"*:[input]:[&::-webkit-calendar-picker-indicator]:hidden *:[input]:[&::-webkit-calendar-picker-indicator]:appearance-none\\\"\\n          onChange={handleInputChange}\\n          onClick={(e) => e.stopPropagation()}\\n          type=\\\"date\\\"\\n          value={inputValue}\\n        />\\n        <InputGroupAddon>\\n          <PopoverTrigger\\n            aria-label=\\\"Select date\\\"\\n            render={\\n              <Button aria-label=\\\"Select date\\\" size=\\\"icon-xs\\\" variant=\\\"ghost\\\" />\\n            }\\n          >\\n            <CalendarIcon aria-hidden=\\\"true\\\" />\\n          </PopoverTrigger>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <PopoverPopup align=\\\"start\\\" alignOffset={-4} sideOffset={8}>\\n        <Calendar\\n          mode=\\\"single\\\"\\n          month={month}\\n          onMonthChange={setMonth}\\n          onSelect={handleSelect}\\n          selected={date}\\n        />\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Date picker that closes on select\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/popover\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-6.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>();\\n  const [open, setOpen] = useState(false);\\n\\n  const handleSelect = (selectedDate: Date | undefined) => {\\n    setDate(selectedDate);\\n    setOpen(false);\\n  };\\n\\n  return (\\n    <Popover onOpenChange={setOpen} open={open}>\\n      <PopoverTrigger\\n        render={<Button className=\\\"w-full justify-start\\\" variant=\\\"outline\\\" />}\\n      >\\n        <CalendarIcon />\\n        {date ? format(date, \\\"PPP\\\") : \\\"Pick a date\\\"}\\n      </PopoverTrigger>\\n      <PopoverPopup>\\n        <Calendar mode=\\\"single\\\" onSelect={handleSelect} selected={date} />\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Multiple dates picker\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/button\",\n    \"@coss/calendar\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  const [dates, setDates] = useState<Date[] | undefined>();\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger\\n        render={<Button className=\\\"w-full justify-start\\\" variant=\\\"outline\\\" />}\\n      >\\n        <CalendarIcon className=\\\"shrink-0\\\" />\\n        <span className=\\\"flex flex-wrap gap-1\\\">\\n          {dates && dates.length > 0 ? (\\n            <>\\n              {dates.slice(0, 3).map((date) => (\\n                <Badge key={date.toISOString()} variant=\\\"secondary\\\">\\n                  {format(date, \\\"MMM d\\\")}\\n                </Badge>\\n              ))}\\n              {dates.length > 3 && (\\n                <Badge variant=\\\"secondary\\\">+{dates.length - 3}</Badge>\\n              )}\\n            </>\\n          ) : (\\n            <span>Pick dates</span>\\n          )}\\n        </span>\\n      </PopoverTrigger>\\n      <PopoverPopup>\\n        <Calendar mode=\\\"multiple\\\" onSelect={setDates} selected={dates} />\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\",\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Date picker with select-like trigger\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/popover\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-8.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport { SelectButton } from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<Date | undefined>();\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger\\n        render={<SelectButton data-placeholder={!date ? \\\"\\\" : undefined} />}\\n      >\\n        {date ? format(date, \\\"PPP\\\") : \\\"Pick a date\\\"}\\n      </PopoverTrigger>\\n      <PopoverPopup>\\n        <Calendar\\n          defaultMonth={date}\\n          mode=\\\"single\\\"\\n          onSelect={setDate}\\n          selected={date}\\n        />\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-date-picker-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-date-picker-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Two months calendar with range date\",\n  \"dependencies\": [\n    \"date-fns\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/calendar\",\n    \"@coss/popover\",\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-date-picker-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { format } from \\\"date-fns\\\";\\nimport { CalendarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport type { DateRange } from \\\"react-day-picker\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Calendar } from \\\"@/registry/default/ui/calendar\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  const [date, setDate] = useState<DateRange | undefined>();\\n\\n  return (\\n    <Popover>\\n      <PopoverTrigger\\n        render={<Button className=\\\"w-full justify-start\\\" variant=\\\"outline\\\" />}\\n      >\\n        <CalendarIcon aria-hidden=\\\"true\\\" />\\n        {date?.from ? (\\n          date.to ? (\\n            <>\\n              {format(date.from, \\\"LLL dd, y\\\")} - {format(date.to, \\\"LLL dd, y\\\")}\\n            </>\\n          ) : (\\n            format(date.from, \\\"LLL dd, y\\\")\\n          )\\n        ) : (\\n          <span>Pick a date range</span>\\n        )}\\n      </PopoverTrigger>\\n      <PopoverPopup>\\n        <Calendar\\n          defaultMonth={date?.from}\\n          mode=\\\"range\\\"\\n          numberOfMonths={2}\\n          onSelect={setDate}\\n          selected={date}\\n        />\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"date picker\",\n    \"calendar\",\n    \"popover\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-dialog-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-dialog-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Dialog with form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/dialog\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-dialog-1.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogPanel,\\n  DialogPopup,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open Dialog\\n      </DialogTrigger>\\n      <DialogPopup className=\\\"sm:max-w-sm\\\">\\n        <Form className=\\\"contents\\\">\\n          <DialogHeader>\\n            <DialogTitle>Edit profile</DialogTitle>\\n            <DialogDescription>\\n              Make changes to your profile here. Click save when you&apos;re\\n              done.\\n            </DialogDescription>\\n          </DialogHeader>\\n          <DialogPanel className=\\\"grid gap-4\\\">\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input defaultValue=\\\"Margaret Welsh\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Username</FieldLabel>\\n              <Input defaultValue=\\\"@maggie.welsh\\\" type=\\\"text\\\" />\\n            </Field>\\n          </DialogPanel>\\n          <DialogFooter>\\n            <DialogClose render={<Button variant=\\\"ghost\\\" />}>\\n              Cancel\\n            </DialogClose>\\n            <Button type=\\\"submit\\\">Save</Button>\\n          </DialogFooter>\\n        </Form>\\n      </DialogPopup>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-dialog-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-dialog-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Dialog opened from menu\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/dialog\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-dialog-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogPopup,\\n  DialogTitle,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  const [dialogOpen, setDialogOpen] = useState(false);\\n  return (\\n    <>\\n      <Menu>\\n        <MenuTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Open menu\\n        </MenuTrigger>\\n        <MenuPopup align=\\\"start\\\">\\n          <MenuItem onClick={() => setDialogOpen(true)}>Open dialog</MenuItem>\\n        </MenuPopup>\\n      </Menu>\\n      <Dialog onOpenChange={setDialogOpen} open={dialogOpen}>\\n        <DialogPopup>\\n          <DialogHeader>\\n            <DialogTitle>Settings</DialogTitle>\\n            <DialogDescription>Change your preferences</DialogDescription>\\n          </DialogHeader>\\n          <DialogFooter>\\n            <DialogClose render={<Button variant=\\\"ghost\\\" />}>Close</DialogClose>\\n          </DialogFooter>\\n        </DialogPopup>\\n      </Dialog>\\n    </>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dialog\",\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-dialog-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-dialog-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Nested dialogs\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/dialog\",\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-dialog-3.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogPanel,\\n  DialogPopup,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open parent\\n      </DialogTrigger>\\n      <DialogPopup showCloseButton={false}>\\n        <DialogHeader>\\n          <DialogTitle>Manage team member</DialogTitle>\\n          <DialogDescription>\\n            View and manage a user in your team.\\n          </DialogDescription>\\n        </DialogHeader>\\n        <DialogPanel className=\\\"grid gap-4\\\">\\n          <div className=\\\"grid gap-1\\\">\\n            <p className=\\\"text-muted-foreground text-sm\\\">Name</p>\\n            <p className=\\\"font-medium text-sm\\\">Bora Baloglu</p>\\n          </div>\\n          <div className=\\\"grid gap-1\\\">\\n            <p className=\\\"text-muted-foreground text-sm\\\">Email</p>\\n            <p className=\\\"font-medium text-sm\\\">bora@example.com</p>\\n          </div>\\n        </DialogPanel>\\n        <DialogFooter>\\n          <Dialog>\\n            <DialogTrigger render={<Button variant=\\\"outline\\\" />}>\\n              Edit details\\n            </DialogTrigger>\\n            <DialogPopup showCloseButton={false}>\\n              <DialogHeader>\\n                <DialogTitle>Edit details</DialogTitle>\\n                <DialogDescription>\\n                  Make changes to the member&apos;s information.\\n                </DialogDescription>\\n              </DialogHeader>\\n              <DialogPanel className=\\\"grid gap-4\\\">\\n                <Field>\\n                  <FieldLabel>Name</FieldLabel>\\n                  <Input defaultValue=\\\"Bora Baloglu\\\" type=\\\"text\\\" />\\n                </Field>\\n                <Field>\\n                  <FieldLabel>Email</FieldLabel>\\n                  <Input defaultValue=\\\"bora@example.com\\\" type=\\\"text\\\" />\\n                </Field>\\n              </DialogPanel>\\n              <DialogFooter>\\n                <DialogClose render={<Button variant=\\\"ghost\\\" />}>\\n                  Cancel\\n                </DialogClose>\\n                <Button type=\\\"submit\\\">Save changes</Button>\\n              </DialogFooter>\\n            </DialogPopup>\\n          </Dialog>\\n        </DialogFooter>\\n      </DialogPopup>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-dialog-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-dialog-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Dialog with close confirmation\",\n  \"registryDependencies\": [\n    \"@coss/alert-dialog\",\n    \"@coss/button\",\n    \"@coss/dialog\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-dialog-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport {\\n  AlertDialog,\\n  AlertDialogClose,\\n  AlertDialogDescription,\\n  AlertDialogFooter,\\n  AlertDialogHeader,\\n  AlertDialogPopup,\\n  AlertDialogTitle,\\n} from \\\"@/registry/default/ui/alert-dialog\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogPanel,\\n  DialogPopup,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Field } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  const [dialogOpen, setDialogOpen] = useState(false);\\n  const [confirmOpen, setConfirmOpen] = useState(false);\\n  const [value, setValue] = useState(\\\"\\\");\\n\\n  return (\\n    <Dialog\\n      onOpenChange={(o) => {\\n        if (!o && value) {\\n          setConfirmOpen(true);\\n        } else {\\n          setDialogOpen(o);\\n        }\\n      }}\\n      open={dialogOpen}\\n    >\\n      <DialogTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Compose\\n      </DialogTrigger>\\n      <DialogPopup showCloseButton={false}>\\n        <DialogHeader>\\n          <DialogTitle>New message</DialogTitle>\\n          <DialogDescription>Type something and try closing.</DialogDescription>\\n        </DialogHeader>\\n        <Form\\n          className=\\\"contents\\\"\\n          onSubmit={(event) => {\\n            event.preventDefault();\\n            // Close the dialog when submitting\\n            setDialogOpen(false);\\n          }}\\n        >\\n          <DialogPanel>\\n            <Field>\\n              <Textarea\\n                onChange={(e) => setValue(e.target.value)}\\n                value={value}\\n              />\\n            </Field>\\n          </DialogPanel>\\n          <DialogFooter>\\n            <DialogClose render={<Button variant=\\\"ghost\\\" />}>\\n              Cancel\\n            </DialogClose>\\n            <Button\\n              onClick={() => {\\n                setValue(\\\"\\\");\\n                setDialogOpen(false);\\n              }}\\n            >\\n              Send\\n            </Button>\\n          </DialogFooter>\\n        </Form>\\n      </DialogPopup>\\n\\n      {/* Confirmation dialog */}\\n      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>\\n        <AlertDialogPopup>\\n          <AlertDialogHeader>\\n            <AlertDialogTitle>Discard changes?</AlertDialogTitle>\\n            <AlertDialogDescription>\\n              Your message will be lost.\\n            </AlertDialogDescription>\\n          </AlertDialogHeader>\\n          <AlertDialogFooter>\\n            <AlertDialogClose render={<Button variant=\\\"ghost\\\" />}>\\n              Go back\\n            </AlertDialogClose>\\n            <Button\\n              onClick={() => {\\n                setConfirmOpen(false);\\n                setValue(\\\"\\\");\\n                setDialogOpen(false);\\n              }}\\n            >\\n              Discard\\n            </Button>\\n          </AlertDialogFooter>\\n        </AlertDialogPopup>\\n      </AlertDialog>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"alert dialog\",\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-dialog-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-dialog-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Dialog with long content\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/dialog\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-dialog-5.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogPanel,\\n  DialogPopup,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Terms & Conditions\\n      </DialogTrigger>\\n      <DialogPopup className=\\\"sm:max-w-md\\\" showCloseButton={false}>\\n        <DialogHeader>\\n          <DialogTitle>Terms & Conditions</DialogTitle>\\n        </DialogHeader>\\n        <DialogPanel>\\n          <div className=\\\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\\\">\\n            <div className=\\\"space-y-4\\\">\\n              <div className=\\\"space-y-1\\\">\\n                <p>\\n                  <strong>Acceptance of Terms</strong>\\n                </p>\\n                <p>\\n                  By accessing and using this website, users agree to comply\\n                  with and be bound by these Terms of Service. Users who do not\\n                  agree with these terms should discontinue use of the website\\n                  immediately.\\n                </p>\\n              </div>\\n              <div className=\\\"space-y-1\\\">\\n                <p>\\n                  <strong>User Account Responsibilities</strong>\\n                </p>\\n                <p>\\n                  Users are responsible for maintaining the confidentiality of\\n                  their account credentials. Any activities occurring under a\\n                  user&apos;s account are the sole responsibility of the account\\n                  holder. Users must notify the website administrators\\n                  immediately of any unauthorized account access.\\n                </p>\\n              </div>\\n              <div className=\\\"space-y-1\\\">\\n                <p>\\n                  <strong>Content Usage and Restrictions</strong>\\n                </p>\\n                <p>\\n                  The website and its original content are protected by\\n                  intellectual property laws. Users may not reproduce,\\n                  distribute, modify, create derivative works, or commercially\\n                  exploit any content without explicit written permission from\\n                  the website owners.\\n                </p>\\n              </div>\\n              <div className=\\\"space-y-1\\\">\\n                <p>\\n                  <strong>Limitation of Liability</strong>\\n                </p>\\n                <p>\\n                  The website provides content &ldquo;as is&rdquo; without any\\n                  warranties. The website owners shall not be liable for direct,\\n                  indirect, incidental, consequential, or punitive damages\\n                  arising from user interactions with the platform.\\n                </p>\\n              </div>\\n              <div className=\\\"space-y-1\\\">\\n                <p>\\n                  <strong>User Conduct Guidelines</strong>\\n                </p>\\n                <ul className=\\\"list-disc pl-6\\\">\\n                  <li>Not upload harmful or malicious content</li>\\n                  <li>Respect the rights of other users</li>\\n                  <li>\\n                    Avoid activities that could disrupt website functionality\\n                  </li>\\n                  <li>Comply with applicable local and international laws</li>\\n                </ul>\\n              </div>\\n              <div className=\\\"space-y-1\\\">\\n                <p>\\n                  <strong>Modifications to Terms</strong>\\n                </p>\\n                <p>\\n                  The website reserves the right to modify these terms at any\\n                  time. Continued use of the website after changes constitutes\\n                  acceptance of the new terms.\\n                </p>\\n              </div>\\n              <div className=\\\"space-y-1\\\">\\n                <p>\\n                  <strong>Termination Clause</strong>\\n                </p>\\n                <p>\\n                  The website may terminate or suspend user access without prior\\n                  notice for violations of these terms or for any other reason\\n                  deemed appropriate by the administration.\\n                </p>\\n              </div>\\n              <div className=\\\"space-y-1\\\">\\n                <p>\\n                  <strong>Governing Law</strong>\\n                </p>\\n                <p>\\n                  These terms are governed by the laws of the jurisdiction where\\n                  the website is primarily operated, without regard to conflict\\n                  of law principles.\\n                </p>\\n              </div>\\n            </div>\\n          </div>\\n        </DialogPanel>\\n        <DialogFooter>\\n          <DialogClose render={<Button variant=\\\"ghost\\\" />}>Cancel</DialogClose>\\n          <Button type=\\\"button\\\">I agree</Button>\\n        </DialogFooter>\\n      </DialogPopup>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-dialog-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-dialog-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Dialog with bare footer\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/dialog\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-dialog-6.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogPanel,\\n  DialogPopup,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Dialog>\\n      <DialogTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open Dialog\\n      </DialogTrigger>\\n      <DialogPopup className=\\\"sm:max-w-sm\\\">\\n        <Form className=\\\"contents\\\">\\n          <DialogHeader>\\n            <DialogTitle>Edit profile</DialogTitle>\\n            <DialogDescription>\\n              Make changes to your profile here. Click save when you&apos;re\\n              done.\\n            </DialogDescription>\\n          </DialogHeader>\\n          <DialogPanel className=\\\"grid gap-4\\\">\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input defaultValue=\\\"Margaret Welsh\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Username</FieldLabel>\\n              <Input defaultValue=\\\"@maggie.welsh\\\" type=\\\"text\\\" />\\n            </Field>\\n          </DialogPanel>\\n          <DialogFooter variant=\\\"bare\\\">\\n            <DialogClose render={<Button variant=\\\"ghost\\\" />}>\\n              Cancel\\n            </DialogClose>\\n            <Button type=\\\"submit\\\">Save</Button>\\n          </DialogFooter>\\n        </Form>\\n      </DialogPopup>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Simple bottom drawer with close button\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-1.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Drawer>\\n      <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open drawer\\n      </DrawerTrigger>\\n      <DrawerPopup showBar>\\n        <DrawerHeader className=\\\"text-center\\\">\\n          <DrawerTitle>Notifications</DrawerTitle>\\n          <DrawerDescription>\\n            This is the description of the drawer.\\n          </DrawerDescription>\\n        </DrawerHeader>\\n        <DrawerFooter\\n          className=\\\"justify-center sm:justify-center\\\"\\n          variant=\\\"bare\\\"\\n        >\\n          <DrawerClose render={<Button variant=\\\"outline\\\" />}>Close</DrawerClose>\\n        </DrawerFooter>\\n      </DrawerPopup>\\n    </Drawer>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Edit profile form with default and bare footer variants\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-10.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-2\\\">\\n      <Drawer position=\\\"right\\\">\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Default footer\\n        </DrawerTrigger>\\n        <DrawerPopup variant=\\\"inset\\\">\\n          <Form className=\\\"contents\\\">\\n            <DrawerHeader>\\n              <DrawerTitle>Edit profile</DrawerTitle>\\n              <DrawerDescription>\\n                Make changes to your profile here. Click save when you&apos;re\\n                done.\\n              </DrawerDescription>\\n            </DrawerHeader>\\n            <DrawerPanel className=\\\"grid gap-4\\\">\\n              <Field>\\n                <FieldLabel>Name</FieldLabel>\\n                <Input defaultValue=\\\"Margaret Welsh\\\" type=\\\"text\\\" />\\n              </Field>\\n              <Field>\\n                <FieldLabel>Username</FieldLabel>\\n                <Input defaultValue=\\\"@maggie.welsh\\\" type=\\\"text\\\" />\\n              </Field>\\n            </DrawerPanel>\\n            <DrawerFooter>\\n              <DrawerClose render={<Button variant=\\\"ghost\\\" />}>\\n                Cancel\\n              </DrawerClose>\\n              <Button>Save</Button>\\n            </DrawerFooter>\\n          </Form>\\n        </DrawerPopup>\\n      </Drawer>\\n      <Drawer position=\\\"right\\\">\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Bare footer\\n        </DrawerTrigger>\\n        <DrawerPopup variant=\\\"inset\\\">\\n          <Form className=\\\"contents\\\">\\n            <DrawerHeader>\\n              <DrawerTitle>Edit profile</DrawerTitle>\\n              <DrawerDescription>\\n                Make changes to your profile here. Click save when you&apos;re\\n                done.\\n              </DrawerDescription>\\n            </DrawerHeader>\\n            <DrawerPanel className=\\\"grid gap-4\\\">\\n              <Field>\\n                <FieldLabel>Name</FieldLabel>\\n                <Input defaultValue=\\\"Margaret Welsh\\\" type=\\\"text\\\" />\\n              </Field>\\n              <Field>\\n                <FieldLabel>Username</FieldLabel>\\n                <Input defaultValue=\\\"@maggie.welsh\\\" type=\\\"text\\\" />\\n              </Field>\\n            </DrawerPanel>\\n            <DrawerFooter variant=\\\"bare\\\">\\n              <DrawerClose render={<Button variant=\\\"ghost\\\" />}>\\n                Cancel\\n              </DrawerClose>\\n              <Button>Save</Button>\\n            </DrawerFooter>\\n          </Form>\\n        </DrawerPopup>\\n      </Drawer>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Mobile menu drawer from the left\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-11.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Drawer position=\\\"left\\\">\\n      <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open menu\\n      </DrawerTrigger>\\n      <DrawerPopup showCloseButton variant=\\\"straight\\\">\\n        <DrawerHeader>\\n          <DrawerTitle>Menu</DrawerTitle>\\n        </DrawerHeader>\\n        <DrawerPanel>\\n          <nav className=\\\"-mx-[calc(--spacing(3)-1px)] flex flex-col gap-0.5\\\">\\n            <DrawerClose\\n              nativeButton={false}\\n              render={\\n                <Button\\n                  className=\\\"justify-start\\\"\\n                  render={<Link href=\\\"#\\\" />}\\n                  variant=\\\"ghost\\\"\\n                />\\n              }\\n            >\\n              Home\\n            </DrawerClose>\\n            <DrawerClose\\n              nativeButton={false}\\n              render={\\n                <Button\\n                  className=\\\"justify-start\\\"\\n                  render={<Link href=\\\"#\\\" />}\\n                  variant=\\\"ghost\\\"\\n                />\\n              }\\n            >\\n              Profile\\n            </DrawerClose>\\n            <DrawerClose\\n              nativeButton={false}\\n              render={\\n                <Button\\n                  className=\\\"justify-start\\\"\\n                  render={<Link href=\\\"#\\\" />}\\n                  variant=\\\"ghost\\\"\\n                />\\n              }\\n            >\\n              Settings\\n            </DrawerClose>\\n            <DrawerClose\\n              nativeButton={false}\\n              render={\\n                <Button\\n                  className=\\\"justify-start\\\"\\n                  render={<Link href=\\\"#\\\" />}\\n                  variant=\\\"ghost\\\"\\n                />\\n              }\\n            >\\n              Sign out\\n            </DrawerClose>\\n          </nav>\\n        </DrawerPanel>\\n      </DrawerPopup>\\n    </Drawer>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Responsive edit profile: dialog on desktop, drawer on mobile\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/dialog\",\n    \"@coss/drawer\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/use-media-query\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-12.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useMediaQuery } from \\\"@/registry/default/hooks/use-media-query\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Dialog,\\n  DialogClose,\\n  DialogDescription,\\n  DialogFooter,\\n  DialogHeader,\\n  DialogPanel,\\n  DialogPopup,\\n  DialogTitle,\\n  DialogTrigger,\\n} from \\\"@/registry/default/ui/dialog\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nconst FORM_TITLE = \\\"Edit profile\\\";\\nconst FORM_DESCRIPTION =\\n  \\\"Make changes to your profile here. Click save when you're done.\\\";\\nconst TRIGGER_LABEL = \\\"Open\\\";\\nconst CANCEL_LABEL = \\\"Cancel\\\";\\nconst SAVE_LABEL = \\\"Save\\\";\\n\\nconst formFields = (\\n  <>\\n    <Field>\\n      <FieldLabel>Name</FieldLabel>\\n      <Input defaultValue=\\\"Margaret Welsh\\\" type=\\\"text\\\" />\\n    </Field>\\n    <Field>\\n      <FieldLabel>Username</FieldLabel>\\n      <Input defaultValue=\\\"@maggie.welsh\\\" type=\\\"text\\\" />\\n    </Field>\\n  </>\\n);\\n\\nexport default function Particle() {\\n  const isMobile = useMediaQuery(\\\"max-md\\\");\\n\\n  if (isMobile) {\\n    return (\\n      <Drawer>\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          {TRIGGER_LABEL}\\n        </DrawerTrigger>\\n        <DrawerPopup showBar>\\n          <Form className=\\\"contents\\\">\\n            <DrawerHeader>\\n              <DrawerTitle>{FORM_TITLE}</DrawerTitle>\\n              <DrawerDescription>{FORM_DESCRIPTION}</DrawerDescription>\\n            </DrawerHeader>\\n            <DrawerPanel className=\\\"grid gap-4\\\" scrollable={false}>\\n              {formFields}\\n            </DrawerPanel>\\n            <DrawerFooter>\\n              <DrawerClose render={<Button variant=\\\"ghost\\\" />}>\\n                {CANCEL_LABEL}\\n              </DrawerClose>\\n              <Button type=\\\"submit\\\">{SAVE_LABEL}</Button>\\n            </DrawerFooter>\\n          </Form>\\n        </DrawerPopup>\\n      </Drawer>\\n    );\\n  }\\n\\n  return (\\n    <Dialog>\\n      <DialogTrigger render={<Button variant=\\\"outline\\\" />}>\\n        {TRIGGER_LABEL}\\n      </DialogTrigger>\\n      <DialogPopup className=\\\"sm:max-w-sm\\\">\\n        <Form className=\\\"contents\\\">\\n          <DialogHeader>\\n            <DialogTitle>{FORM_TITLE}</DialogTitle>\\n            <DialogDescription>{FORM_DESCRIPTION}</DialogDescription>\\n          </DialogHeader>\\n          <DialogPanel className=\\\"grid gap-4\\\">{formFields}</DialogPanel>\\n          <DialogFooter>\\n            <DialogClose render={<Button variant=\\\"ghost\\\" />}>\\n              {CANCEL_LABEL}\\n            </DialogClose>\\n            <Button type=\\\"submit\\\">{SAVE_LABEL}</Button>\\n          </DialogFooter>\\n        </Form>\\n      </DialogPopup>\\n    </Dialog>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\",\n    \"dialog\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Responsive actions menu: menu on desktop, drawer on mobile\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\",\n    \"@coss/menu\",\n    \"@coss/use-media-query\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-13.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  CopyIcon,\\n  EllipsisIcon,\\n  PencilIcon,\\n  ShareIcon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { useMediaQuery } from \\\"@/registry/default/hooks/use-media-query\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerMenu,\\n  DrawerMenuCheckboxItem,\\n  DrawerMenuGroup,\\n  DrawerMenuGroupLabel,\\n  DrawerMenuItem,\\n  DrawerMenuRadioGroup,\\n  DrawerMenuRadioItem,\\n  DrawerMenuSeparator,\\n  DrawerMenuTrigger,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\nimport {\\n  Menu,\\n  MenuCheckboxItem,\\n  MenuGroup,\\n  MenuGroupLabel,\\n  MenuItem,\\n  MenuPopup,\\n  MenuRadioGroup,\\n  MenuRadioItem,\\n  MenuSeparator,\\n  MenuSub,\\n  MenuSubPopup,\\n  MenuSubTrigger,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nconst TRIGGER_ARIA_LABEL = \\\"Open menu\\\";\\n\\nexport default function Particle() {\\n  const isMobile = useMediaQuery(\\\"max-md\\\");\\n\\n  if (isMobile) {\\n    return (\\n      <Drawer>\\n        <DrawerTrigger\\n          render={\\n            <Button\\n              aria-label={TRIGGER_ARIA_LABEL}\\n              size=\\\"icon\\\"\\n              variant=\\\"outline\\\"\\n            />\\n          }\\n        >\\n          <EllipsisIcon aria-hidden />\\n        </DrawerTrigger>\\n        <DrawerPopup showBar>\\n          <DrawerPanel>\\n            <DrawerMenu>\\n              <DrawerMenuGroup>\\n                <DrawerMenuGroupLabel>Actions</DrawerMenuGroupLabel>\\n                <DrawerClose render={<DrawerMenuItem />}>\\n                  <PencilIcon aria-hidden />\\n                  Edit\\n                </DrawerClose>\\n                <DrawerClose render={<DrawerMenuItem />}>\\n                  <CopyIcon aria-hidden />\\n                  Duplicate\\n                </DrawerClose>\\n                <DrawerClose render={<DrawerMenuItem />}>\\n                  <ShareIcon aria-hidden />\\n                  Share\\n                </DrawerClose>\\n              </DrawerMenuGroup>\\n              <DrawerMenuSeparator />\\n              <DrawerMenuCheckboxItem>Shuffle</DrawerMenuCheckboxItem>\\n              <DrawerMenuCheckboxItem>Repeat</DrawerMenuCheckboxItem>\\n              <DrawerMenuCheckboxItem disabled>\\n                Enhanced Audio\\n              </DrawerMenuCheckboxItem>\\n              <DrawerMenuSeparator />\\n              <DrawerMenuGroup>\\n                <DrawerMenuGroupLabel>Sort by</DrawerMenuGroupLabel>\\n                <DrawerMenuRadioGroup defaultValue=\\\"artist\\\">\\n                  <DrawerMenuRadioItem value=\\\"artist\\\">\\n                    Artist\\n                  </DrawerMenuRadioItem>\\n                  <DrawerMenuRadioItem value=\\\"album\\\">Album</DrawerMenuRadioItem>\\n                  <DrawerMenuRadioItem value=\\\"title\\\">Title</DrawerMenuRadioItem>\\n                </DrawerMenuRadioGroup>\\n              </DrawerMenuGroup>\\n              <DrawerMenuSeparator />\\n              <DrawerMenuCheckboxItem variant=\\\"switch\\\">\\n                Auto save\\n              </DrawerMenuCheckboxItem>\\n              <DrawerMenuSeparator />\\n              <Drawer>\\n                <DrawerMenuTrigger>Add to Playlist</DrawerMenuTrigger>\\n                <DrawerPopup showBar>\\n                  <DrawerPanel>\\n                    <DrawerMenu>\\n                      <DrawerMenuGroup>\\n                        <DrawerMenuGroupLabel>\\n                          Add to Playlist\\n                        </DrawerMenuGroupLabel>\\n                      </DrawerMenuGroup>\\n                      <DrawerClose render={<DrawerMenuItem />}>\\n                        Jazz\\n                      </DrawerClose>\\n                      <Drawer>\\n                        <DrawerMenuTrigger>Rock</DrawerMenuTrigger>\\n                        <DrawerPopup showBar>\\n                          <DrawerPanel>\\n                            <DrawerMenu>\\n                              <DrawerMenuGroup>\\n                                <DrawerMenuGroupLabel>\\n                                  Rock\\n                                </DrawerMenuGroupLabel>\\n                              </DrawerMenuGroup>\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Hard Rock\\n                              </DrawerClose>\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Soft Rock\\n                              </DrawerClose>\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Classic Rock\\n                              </DrawerClose>\\n                              <DrawerMenuSeparator />\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Metal\\n                              </DrawerClose>\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Punk\\n                              </DrawerClose>\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Grunge\\n                              </DrawerClose>\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Alternative\\n                              </DrawerClose>\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Indie\\n                              </DrawerClose>\\n                              <DrawerClose render={<DrawerMenuItem />}>\\n                                Electronic\\n                              </DrawerClose>\\n                            </DrawerMenu>\\n                          </DrawerPanel>\\n                        </DrawerPopup>\\n                      </Drawer>\\n                      <DrawerClose render={<DrawerMenuItem />}>Pop</DrawerClose>\\n                    </DrawerMenu>\\n                  </DrawerPanel>\\n                </DrawerPopup>\\n              </Drawer>\\n              <DrawerMenuSeparator />\\n              <DrawerMenuGroup>\\n                <DrawerMenuGroupLabel>Danger zone</DrawerMenuGroupLabel>\\n                <DrawerClose render={<DrawerMenuItem variant=\\\"destructive\\\" />}>\\n                  <TrashIcon aria-hidden />\\n                  Delete\\n                </DrawerClose>\\n              </DrawerMenuGroup>\\n            </DrawerMenu>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n    );\\n  }\\n\\n  return (\\n    <Menu>\\n      <MenuTrigger\\n        render={\\n          <Button\\n            aria-label={TRIGGER_ARIA_LABEL}\\n            size=\\\"icon\\\"\\n            variant=\\\"outline\\\"\\n          />\\n        }\\n      >\\n        <EllipsisIcon aria-hidden />\\n      </MenuTrigger>\\n      <MenuPopup>\\n        <MenuGroup>\\n          <MenuGroupLabel>Actions</MenuGroupLabel>\\n          <MenuItem>\\n            <PencilIcon aria-hidden />\\n            Edit\\n          </MenuItem>\\n          <MenuItem>\\n            <CopyIcon aria-hidden />\\n            Duplicate\\n          </MenuItem>\\n          <MenuItem>\\n            <ShareIcon aria-hidden />\\n            Share\\n          </MenuItem>\\n        </MenuGroup>\\n        <MenuSeparator />\\n        <MenuCheckboxItem>Shuffle</MenuCheckboxItem>\\n        <MenuCheckboxItem>Repeat</MenuCheckboxItem>\\n        <MenuCheckboxItem disabled>Enhanced Audio</MenuCheckboxItem>\\n        <MenuSeparator />\\n        <MenuGroup>\\n          <MenuGroupLabel>Sort by</MenuGroupLabel>\\n          <MenuRadioGroup defaultValue=\\\"artist\\\">\\n            <MenuRadioItem value=\\\"artist\\\">Artist</MenuRadioItem>\\n            <MenuRadioItem value=\\\"album\\\">Album</MenuRadioItem>\\n            <MenuRadioItem value=\\\"title\\\">Title</MenuRadioItem>\\n          </MenuRadioGroup>\\n        </MenuGroup>\\n        <MenuSeparator />\\n        <MenuCheckboxItem variant=\\\"switch\\\">Auto save</MenuCheckboxItem>\\n        <MenuSeparator />\\n        <MenuSub>\\n          <MenuSubTrigger>Add to Playlist</MenuSubTrigger>\\n          <MenuSubPopup>\\n            <MenuItem>Jazz</MenuItem>\\n            <MenuSub>\\n              <MenuSubTrigger>Rock</MenuSubTrigger>\\n              <MenuSubPopup>\\n                <MenuItem>Hard Rock</MenuItem>\\n                <MenuItem>Soft Rock</MenuItem>\\n                <MenuItem>Classic Rock</MenuItem>\\n                <MenuSeparator />\\n                <MenuItem>Metal</MenuItem>\\n                <MenuItem>Punk</MenuItem>\\n                <MenuItem>Grunge</MenuItem>\\n                <MenuItem>Alternative</MenuItem>\\n                <MenuItem>Indie</MenuItem>\\n                <MenuItem>Electronic</MenuItem>\\n              </MenuSubPopup>\\n            </MenuSub>\\n            <MenuItem>Pop</MenuItem>\\n          </MenuSubPopup>\\n        </MenuSub>\\n        <MenuSeparator />\\n        <MenuGroup>\\n          <MenuGroupLabel>Danger zone</MenuGroupLabel>\\n          <MenuItem variant=\\\"destructive\\\">\\n            <TrashIcon aria-hidden />\\n            Delete\\n          </MenuItem>\\n        </MenuGroup>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Left drawer with swipe area\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-14.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerSwipeArea,\\n  DrawerTitle,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"relative min-h-80 w-full overflow-hidden rounded-xl border\\\">\\n      <Drawer modal={false} position=\\\"left\\\">\\n        <DrawerSwipeArea className=\\\"absolute border-input border-e border-dashed bg-muted\\\">\\n          <span className=\\\"pointer-events-none absolute top-1/2 left-0 ms-2 -translate-y-1/2 rotate-90 whitespace-nowrap font-medium text-muted-foreground text-xs uppercase\\\">\\n            Swipe area\\n          </span>\\n        </DrawerSwipeArea>\\n\\n        <div className=\\\"flex min-h-80 items-center justify-center p-6 ps-14 text-center\\\">\\n          <p className=\\\"max-w-56 text-balance text-muted-foreground text-sm\\\">\\n            Swipe from the left edge to open the menu.\\n          </p>\\n        </div>\\n\\n        <DrawerPopup position=\\\"left\\\" showCloseButton variant=\\\"straight\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Menu</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <nav className=\\\"-mx-[calc(--spacing(3)-1px)] flex flex-col gap-0.5\\\">\\n              <Button\\n                className=\\\"justify-start\\\"\\n                render={<Link href=\\\"#\\\" />}\\n                variant=\\\"ghost\\\"\\n              >\\n                Home\\n              </Button>\\n              <Button\\n                className=\\\"justify-start\\\"\\n                render={<Link href=\\\"#\\\" />}\\n                variant=\\\"ghost\\\"\\n              >\\n                Profile\\n              </Button>\\n              <Button\\n                className=\\\"justify-start\\\"\\n                render={<Link href=\\\"#\\\" />}\\n                variant=\\\"ghost\\\"\\n              >\\n                Settings\\n              </Button>\\n              <Button\\n                className=\\\"justify-start\\\"\\n                render={<Link href=\\\"#\\\" />}\\n                variant=\\\"ghost\\\"\\n              >\\n                Sign out\\n              </Button>\\n            </nav>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md\"\n  },\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Bottom drawer without drag bar\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-2.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Drawer>\\n      <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open drawer\\n      </DrawerTrigger>\\n      <DrawerPopup>\\n        <DrawerHeader className=\\\"text-center\\\">\\n          <DrawerTitle>Notifications</DrawerTitle>\\n          <DrawerDescription>\\n            This is the description of the drawer.\\n          </DrawerDescription>\\n        </DrawerHeader>\\n        <DrawerFooter\\n          className=\\\"justify-center sm:justify-center\\\"\\n          variant=\\\"bare\\\"\\n        >\\n          <DrawerClose render={<Button variant=\\\"outline\\\" />}>Close</DrawerClose>\\n        </DrawerFooter>\\n      </DrawerPopup>\\n    </Drawer>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Drawer with close button\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-3.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerDescription,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Drawer position=\\\"right\\\">\\n      <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open drawer\\n      </DrawerTrigger>\\n      <DrawerPopup showCloseButton variant=\\\"straight\\\">\\n        <DrawerHeader>\\n          <DrawerTitle>Notifications</DrawerTitle>\\n          <DrawerDescription>\\n            This is the description of the drawer.\\n          </DrawerDescription>\\n        </DrawerHeader>\\n        <DrawerPanel>\\n          <p className=\\\"text-muted-foreground text-sm\\\">\\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\\n            ad minim veniam, quis nostrud exercitation ullamco laboris.\\n          </p>\\n        </DrawerPanel>\\n      </DrawerPopup>\\n    </Drawer>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Inset variant drawers for all four positions\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-4.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-2\\\">\\n      <Drawer position=\\\"right\\\">\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Right\\n        </DrawerTrigger>\\n        <DrawerPopup variant=\\\"inset\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Right</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Content from the right.\\n            </p>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n      <Drawer position=\\\"left\\\">\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Left\\n        </DrawerTrigger>\\n        <DrawerPopup variant=\\\"inset\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Left</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Content from the left.\\n            </p>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n      <Drawer position=\\\"top\\\">\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>Top</DrawerTrigger>\\n        <DrawerPopup variant=\\\"inset\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Top</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Content from the top.\\n            </p>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n      <Drawer>\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Bottom\\n        </DrawerTrigger>\\n        <DrawerPopup variant=\\\"inset\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Bottom</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Content from the bottom.\\n            </p>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Straight variant drawers for all four positions\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-5.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-2\\\">\\n      <Drawer position=\\\"right\\\">\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Right\\n        </DrawerTrigger>\\n        <DrawerPopup variant=\\\"straight\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Right</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Content from the right.\\n            </p>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n      <Drawer position=\\\"left\\\">\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Left\\n        </DrawerTrigger>\\n        <DrawerPopup variant=\\\"straight\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Left</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Content from the left.\\n            </p>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n      <Drawer position=\\\"top\\\">\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>Top</DrawerTrigger>\\n        <DrawerPopup variant=\\\"straight\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Top</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Content from the top.\\n            </p>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n      <Drawer>\\n        <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Bottom\\n        </DrawerTrigger>\\n        <DrawerPopup variant=\\\"straight\\\">\\n          <DrawerHeader>\\n            <DrawerTitle>Bottom</DrawerTitle>\\n          </DrawerHeader>\\n          <DrawerPanel>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Content from the bottom.\\n            </p>\\n          </DrawerPanel>\\n        </DrawerPopup>\\n      </Drawer>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Scrollable content with terms and conditions\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-6.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Drawer>\\n      <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Scrollable content\\n      </DrawerTrigger>\\n      <DrawerPopup showBar>\\n        <DrawerHeader>\\n          <DrawerTitle>Scrollable content</DrawerTitle>\\n        </DrawerHeader>\\n        <DrawerPanel>\\n          <div className=\\\"flex flex-col gap-2\\\">\\n            {Array.from({ length: 48 }, (_, i) => `box-${i}`).map((key) => (\\n              <div\\n                className=\\\"h-12 shrink-0 rounded-xl border bg-muted\\\"\\n                key={key}\\n              />\\n            ))}\\n          </div>\\n        </DrawerPanel>\\n        <DrawerFooter>\\n          <DrawerClose render={<Button variant=\\\"outline\\\" />}>Close</DrawerClose>\\n        </DrawerFooter>\\n      </DrawerPopup>\\n    </Drawer>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Nested bottom drawers with centered content\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-7.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Drawer>\\n      <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Nested drawers\\n      </DrawerTrigger>\\n      <DrawerPopup showBar>\\n        <DrawerHeader className=\\\"text-center\\\">\\n          <DrawerTitle>First step</DrawerTitle>\\n          <DrawerDescription>\\n            This is the first step. Tap the button below to continue to the next\\n            screen.\\n          </DrawerDescription>\\n        </DrawerHeader>\\n        <DrawerFooter\\n          className=\\\"justify-center sm:justify-center\\\"\\n          variant=\\\"bare\\\"\\n        >\\n          <DrawerClose render={<Button variant=\\\"ghost\\\" />}>Cancel</DrawerClose>\\n          <Drawer>\\n            <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n              Continue\\n            </DrawerTrigger>\\n            <DrawerPopup showBar>\\n              <DrawerHeader className=\\\"text-center\\\">\\n                <DrawerTitle>Second step</DrawerTitle>\\n                <DrawerDescription>\\n                  You&apos;ve reached the second step. Tap the button below to\\n                  continue to the next screen.\\n                </DrawerDescription>\\n              </DrawerHeader>\\n              <DrawerPanel>\\n                <div className=\\\"flex justify-center\\\">\\n                  <div className=\\\"size-48 shrink-0 rounded-xl border bg-muted\\\" />\\n                </div>\\n              </DrawerPanel>\\n              <DrawerFooter\\n                className=\\\"justify-center sm:justify-center\\\"\\n                variant=\\\"bare\\\"\\n              >\\n                <DrawerClose render={<Button variant=\\\"ghost\\\" />}>\\n                  Back\\n                </DrawerClose>\\n                <Drawer>\\n                  <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n                    Continue\\n                  </DrawerTrigger>\\n                  <DrawerPopup showBar>\\n                    <DrawerHeader className=\\\"text-center\\\">\\n                      <DrawerTitle>Third step</DrawerTitle>\\n                      <DrawerDescription>\\n                        You&apos;ve reached the final step. You can close this\\n                        drawer or go back.\\n                      </DrawerDescription>\\n                    </DrawerHeader>\\n                    <DrawerPanel>\\n                      <div className=\\\"flex justify-center\\\">\\n                        <div className=\\\"size-32 shrink-0 rounded-full border bg-muted\\\" />\\n                      </div>\\n                    </DrawerPanel>\\n                  </DrawerPopup>\\n                </Drawer>\\n              </DrawerFooter>\\n            </DrawerPopup>\\n          </Drawer>\\n        </DrawerFooter>\\n      </DrawerPopup>\\n    </Drawer>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Nested right drawers with inset variant\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\",\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-8.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerClose,\\n  DrawerDescription,\\n  DrawerFooter,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Drawer position=\\\"right\\\">\\n      <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Nested inset drawers\\n      </DrawerTrigger>\\n      <DrawerPopup variant=\\\"inset\\\">\\n        <DrawerHeader>\\n          <DrawerTitle>Manage team member</DrawerTitle>\\n          <DrawerDescription>\\n            View and manage a user in your team.\\n          </DrawerDescription>\\n        </DrawerHeader>\\n        <DrawerPanel className=\\\"grid gap-4\\\">\\n          <div className=\\\"grid gap-1\\\">\\n            <p className=\\\"text-muted-foreground text-sm\\\">Name</p>\\n            <p className=\\\"font-medium text-sm\\\">Bora Baloglu</p>\\n          </div>\\n          <div className=\\\"grid gap-1\\\">\\n            <p className=\\\"text-muted-foreground text-sm\\\">Email</p>\\n            <p className=\\\"font-medium text-sm\\\">bora@example.com</p>\\n          </div>\\n        </DrawerPanel>\\n        <DrawerFooter>\\n          <Drawer position=\\\"right\\\">\\n            <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n              Edit details\\n            </DrawerTrigger>\\n            <DrawerPopup variant=\\\"inset\\\">\\n              <DrawerHeader>\\n                <DrawerTitle>Edit details</DrawerTitle>\\n                <DrawerDescription>\\n                  Make changes to the member&apos;s information.\\n                </DrawerDescription>\\n              </DrawerHeader>\\n              <DrawerPanel className=\\\"grid gap-4\\\">\\n                <Field>\\n                  <FieldLabel>Name</FieldLabel>\\n                  <Input defaultValue=\\\"Bora Baloglu\\\" type=\\\"text\\\" />\\n                </Field>\\n                <Field>\\n                  <FieldLabel>Email</FieldLabel>\\n                  <Input defaultValue=\\\"bora@example.com\\\" type=\\\"email\\\" />\\n                </Field>\\n              </DrawerPanel>\\n              <DrawerFooter>\\n                <DrawerClose render={<Button variant=\\\"ghost\\\" />}>\\n                  Cancel\\n                </DrawerClose>\\n                <Button type=\\\"submit\\\">Save changes</Button>\\n              </DrawerFooter>\\n            </DrawerPopup>\\n          </Drawer>\\n        </DrawerFooter>\\n      </DrawerPopup>\\n    </Drawer>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-drawer-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-drawer-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Bottom drawer with snap points\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/drawer\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-drawer-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Drawer,\\n  DrawerDescription,\\n  DrawerHeader,\\n  DrawerPanel,\\n  DrawerPopup,\\n  DrawerTitle,\\n  DrawerTrigger,\\n} from \\\"@/registry/default/ui/drawer\\\";\\n\\nexport default function Particle() {\\n  const snapPoints = [\\\"300px\\\", 1] as const;\\n  const [snapPoint, setSnapPoint] = useState<\\n    (typeof snapPoints)[number] | null\\n  >(snapPoints[0]);\\n\\n  return (\\n    <Drawer\\n      onSnapPointChange={(point) =>\\n        setSnapPoint(point as (typeof snapPoints)[number] | null)\\n      }\\n      position=\\\"bottom\\\"\\n      snapPoint={snapPoint}\\n      snapPoints={[...snapPoints]}\\n      snapToSequentialPoints\\n    >\\n      <DrawerTrigger render={<Button variant=\\\"outline\\\" />}>\\n        With snap points\\n      </DrawerTrigger>\\n      <DrawerPopup showBar>\\n        <DrawerHeader>\\n          <DrawerTitle>Snap Points</DrawerTitle>\\n          <DrawerDescription>\\n            Drag the drawer to snap between a compact peek and full-height view.\\n          </DrawerDescription>\\n        </DrawerHeader>\\n        <DrawerPanel>\\n          <div className=\\\"flex flex-col gap-2\\\">\\n            {Array.from({ length: 48 }, (_, i) => `box-${i}`).map((key) => (\\n              <div\\n                className=\\\"h-12 shrink-0 rounded-xl border bg-muted\\\"\\n                key={key}\\n              />\\n            ))}\\n          </div>\\n        </DrawerPanel>\\n      </DrawerPopup>\\n    </Drawer>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"drawer\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-empty-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-empty-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Empty state with icon and actions\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/empty\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-empty-1.tsx\",\n      \"content\": \"import { BookIcon, RouteIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Empty,\\n  EmptyContent,\\n  EmptyDescription,\\n  EmptyHeader,\\n  EmptyMedia,\\n  EmptyTitle,\\n} from \\\"@/registry/default/ui/empty\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Empty>\\n      <EmptyHeader>\\n        <EmptyMedia variant=\\\"icon\\\">\\n          <RouteIcon />\\n        </EmptyMedia>\\n        <EmptyTitle>No upcoming meetings</EmptyTitle>\\n        <EmptyDescription>Create a meeting to get started.</EmptyDescription>\\n      </EmptyHeader>\\n      <EmptyContent>\\n        <div className=\\\"flex gap-2\\\">\\n          <Button size=\\\"sm\\\">Create meeting</Button>\\n          <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n            <BookIcon />\\n            View docs\\n          </Button>\\n        </div>\\n      </EmptyContent>\\n    </Empty>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"empty state\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with description\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-1.tsx\",\n      \"content\": \"import {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>Name</FieldLabel>\\n      <Input placeholder=\\\"Enter your name\\\" type=\\\"text\\\" />\\n      <FieldDescription>Visible on your profile</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with textarea\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-10.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>Bio</FieldLabel>\\n      <Textarea placeholder=\\\"Tell us about yourself…\\\" />\\n      <FieldDescription>\\n        Write a short bio. Maximum 500 characters.\\n      </FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"label\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with select\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-11.tsx\",\n      \"content\": \"import {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Select a country\\\", value: null },\\n  { label: \\\"United States\\\", value: \\\"us\\\" },\\n  { label: \\\"United Kingdom\\\", value: \\\"uk\\\" },\\n  { label: \\\"Canada\\\", value: \\\"ca\\\" },\\n  { label: \\\"Australia\\\", value: \\\"au\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>Country</FieldLabel>\\n      <Select items={items}>\\n        <SelectTrigger>\\n          <SelectValue />\\n        </SelectTrigger>\\n        <SelectPopup>\\n          {items.map(({ label, value }) => (\\n            <SelectItem key={value} value={value}>\\n              {label}\\n            </SelectItem>\\n          ))}\\n        </SelectPopup>\\n      </Select>\\n      <FieldDescription>This is an optional field</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"label\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with checkbox\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-12.tsx\",\n      \"content\": \"import { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>\\n        <Checkbox />\\n        Accept terms and conditions\\n      </FieldLabel>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"checkbox\",\n    \"field\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with checkbox group\",\n  \"registryDependencies\": [\n    \"@coss/checkbox\",\n    \"@coss/checkbox-group\",\n    \"@coss/field\",\n    \"@coss/fieldset\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-13.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { CheckboxGroup } from \\\"@/registry/default/ui/checkbox-group\\\";\\nimport { Field, FieldItem, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Fieldset, FieldsetLegend } from \\\"@/registry/default/ui/fieldset\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field\\n      className=\\\"gap-4\\\"\\n      name=\\\"frameworks\\\"\\n      render={(props) => <Fieldset {...props} />}\\n    >\\n      <FieldsetLegend className=\\\"font-medium text-sm\\\">\\n        Frameworks\\n      </FieldsetLegend>\\n      <CheckboxGroup defaultValue={[\\\"react\\\"]}>\\n        <FieldItem>\\n          <FieldLabel>\\n            <Checkbox value=\\\"react\\\" /> React\\n          </FieldLabel>\\n        </FieldItem>\\n        <FieldItem>\\n          <FieldLabel>\\n            <Checkbox value=\\\"vue\\\" /> Vue\\n          </FieldLabel>\\n        </FieldItem>\\n        <FieldItem>\\n          <FieldLabel>\\n            <Checkbox value=\\\"svelte\\\" /> Svelte\\n          </FieldLabel>\\n        </FieldItem>\\n      </CheckboxGroup>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"checkbox\",\n    \"checkbox group\",\n    \"field\",\n    \"fieldset\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with radio group\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/fieldset\",\n    \"@coss/radio-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-14.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldItem,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport { Fieldset, FieldsetLegend } from \\\"@/registry/default/ui/fieldset\\\";\\nimport { Radio, RadioGroup } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field\\n      className=\\\"gap-4\\\"\\n      name=\\\"plan\\\"\\n      render={(props) => <Fieldset {...props} />}\\n    >\\n      <FieldsetLegend className=\\\"font-medium text-sm\\\">\\n        Choose Plan\\n      </FieldsetLegend>\\n      <RadioGroup defaultValue=\\\"free\\\">\\n        <FieldItem>\\n          <FieldLabel>\\n            <Radio value=\\\"free\\\" /> Free\\n          </FieldLabel>\\n        </FieldItem>\\n        <FieldItem>\\n          <FieldLabel>\\n            <Radio value=\\\"pro\\\" /> Pro\\n          </FieldLabel>\\n        </FieldItem>\\n        <FieldItem>\\n          <FieldLabel>\\n            <Radio value=\\\"enterprise\\\" /> Enterprise\\n          </FieldLabel>\\n        </FieldItem>\\n      </RadioGroup>\\n      <FieldDescription>Select the plan that fits your needs.</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"fieldset\",\n    \"label\",\n    \"radio group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with toggle switch\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-15.tsx\",\n      \"content\": \"import { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>\\n        <Switch />\\n        Email notifications\\n      </FieldLabel>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"field\",\n    \"label\",\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with slider\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-16.tsx\",\n      \"content\": \"import {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field className=\\\"items-stretch gap-3\\\">\\n      <FieldLabel>Country</FieldLabel>\\n      <Slider defaultValue={50} />\\n      <FieldDescription>This is an optional field</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"label\",\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with number field\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-17.tsx\",\n      \"content\": \"import { Field, FieldDescription } from \\\"@/registry/default/ui/field\\\";\\nimport {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n  NumberFieldScrubArea,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <NumberField defaultValue={1} max={100} min={1}>\\n        <NumberFieldScrubArea label=\\\"Quantity\\\" />\\n        <NumberFieldGroup>\\n          <NumberFieldDecrement />\\n          <NumberFieldInput />\\n          <NumberFieldIncrement />\\n        </NumberFieldGroup>\\n      </NumberField>\\n      <FieldDescription>Choose a value between 1 and 100.</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"input\",\n    \"label\",\n    \"number field\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Complete form built with field\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/checkbox\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-18.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldError,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    const data = {\\n      email: formData.get(\\\"email\\\"),\\n      fullName: formData.get(\\\"fullName\\\"),\\n      newsletter: formData.get(\\\"newsletter\\\"),\\n      role: formData.get(\\\"role\\\"),\\n    };\\n    alert(\\n      `Full name: ${data.fullName || \\\"\\\"}\\\\nEmail: ${data.email || \\\"\\\"}\\\\nRole: ${\\n        data.role || \\\"\\\"\\n      }\\\\nNewsletter: ${data.newsletter}`,\\n    );\\n  };\\n  return (\\n    <Form onSubmit={onSubmit}>\\n      <Field name=\\\"fullName\\\">\\n        <FieldLabel>\\n          Full Name <span className=\\\"text-destructive\\\">*</span>\\n        </FieldLabel>\\n        <Input placeholder=\\\"John Doe\\\" required type=\\\"text\\\" />\\n        <FieldError>Please enter a valid name.</FieldError>\\n      </Field>\\n\\n      <Field name=\\\"email\\\">\\n        <FieldLabel>\\n          Email <span className=\\\"text-destructive\\\">*</span>\\n        </FieldLabel>\\n        <Input placeholder=\\\"john@example.com\\\" required type=\\\"email\\\" />\\n        <FieldError>Please enter a valid email.</FieldError>\\n      </Field>\\n\\n      <Field name=\\\"role\\\">\\n        <FieldLabel>Role</FieldLabel>\\n        <Select\\n          items={[\\n            { label: \\\"Select your role\\\", value: null },\\n            { label: \\\"Developer\\\", value: \\\"developer\\\" },\\n            { label: \\\"Designer\\\", value: \\\"designer\\\" },\\n            { label: \\\"Product Manager\\\", value: \\\"manager\\\" },\\n            { label: \\\"Other\\\", value: \\\"other\\\" },\\n          ]}\\n        >\\n          <SelectTrigger>\\n            <SelectValue />\\n          </SelectTrigger>\\n          <SelectPopup>\\n            <SelectItem value=\\\"developer\\\">Developer</SelectItem>\\n            <SelectItem value=\\\"designer\\\">Designer</SelectItem>\\n            <SelectItem value=\\\"manager\\\">Product Manager</SelectItem>\\n            <SelectItem value=\\\"other\\\">Other</SelectItem>\\n          </SelectPopup>\\n        </Select>\\n        <FieldDescription>This is an optional field</FieldDescription>\\n      </Field>\\n\\n      <Field name=\\\"newsletter\\\">\\n        <div className=\\\"flex items-center gap-2\\\">\\n          <Checkbox />\\n          <FieldLabel className=\\\"cursor-pointer\\\">\\n            Subscribe to newsletter\\n          </FieldLabel>\\n        </div>\\n      </Field>\\n\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"checkbox\",\n    \"field\",\n    \"form\",\n    \"input\",\n    \"label\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with required indicator\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-2.tsx\",\n      \"content\": \"import { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>\\n        Password <span className=\\\"text-destructive-foreground\\\">*</span>\\n      </FieldLabel>\\n      <Input placeholder=\\\"Enter password\\\" required type=\\\"password\\\" />\\n      <FieldError>Please fill out this field.</FieldError>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field in disabled state\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-3.tsx\",\n      \"content\": \"import {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field disabled>\\n      <FieldLabel>Email</FieldLabel>\\n      <Input disabled placeholder=\\\"Enter your email\\\" type=\\\"email\\\" />\\n      <FieldDescription>This field is currently disabled.</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"disabled\",\n    \"field\",\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field showing validation error\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-4.tsx\",\n      \"content\": \"import { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function FieldWithErrorDemo() {\\n  return (\\n    <Field>\\n      <FieldLabel>Email</FieldLabel>\\n      <Input placeholder=\\\"Enter your email\\\" type=\\\"email\\\" />\\n      <FieldError>Please enter a valid email address.</FieldError>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"error\",\n    \"field\",\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Show field validity state\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Field, FieldLabel, FieldValidity } from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function FieldWithValidityDemo() {\\n  return (\\n    <Field>\\n      <FieldLabel>Email</FieldLabel>\\n      <Input placeholder=\\\"Enter your email\\\" required type=\\\"email\\\" />\\n      <FieldValidity>\\n        {(validity) => (\\n          <div className=\\\"flex w-full flex-col gap-2\\\">\\n            {validity.error && (\\n              <p className=\\\"text-destructive-foreground text-xs\\\">\\n                {validity.error}\\n              </p>\\n            )}\\n            <div className=\\\"w-full rounded-md bg-muted p-2\\\">\\n              <pre className=\\\"max-h-60 overflow-y-auto font-mono text-xs [scrollbar-width:none]\\\">\\n                {JSON.stringify(validity, null, 2)}\\n              </pre>\\n            </div>\\n          </div>\\n        )}\\n      </FieldValidity>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with field\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-6.tsx\",\n      \"content\": \"import { ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>Subscribe</FieldLabel>\\n      <InputGroup>\\n        <InputGroupInput placeholder=\\\"Your best email\\\" type=\\\"email\\\" />\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <Button aria-label=\\\"Subscribe\\\" size=\\\"icon-xs\\\" variant=\\\"ghost\\\">\\n            <ArrowRightIcon aria-hidden=\\\"true\\\" />\\n          </Button>\\n        </InputGroupAddon>\\n      </InputGroup>\\n      <FieldError>Please enter a valid email address.</FieldError>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"field\",\n    \"input\",\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with autocomplete\",\n  \"registryDependencies\": [\n    \"@coss/autocomplete\",\n    \"@coss/field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Autocomplete,\\n  AutocompleteEmpty,\\n  AutocompleteInput,\\n  AutocompleteItem,\\n  AutocompleteList,\\n  AutocompletePopup,\\n} from \\\"@/registry/default/ui/autocomplete\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>Fruits</FieldLabel>\\n      <Autocomplete items={items}>\\n        <AutocompleteInput\\n          aria-label=\\\"Search items\\\"\\n          placeholder=\\\"Search items…\\\"\\n        />\\n        <AutocompletePopup>\\n          <AutocompleteEmpty>No items found.</AutocompleteEmpty>\\n          <AutocompleteList>\\n            {(item) => (\\n              <AutocompleteItem key={item.value} value={item}>\\n                {item.label}\\n              </AutocompleteItem>\\n            )}\\n          </AutocompleteList>\\n        </AutocompletePopup>\\n      </Autocomplete>\\n      <FieldDescription>Select a item.</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"autocomplete\",\n    \"field\",\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with combobox\",\n  \"registryDependencies\": [\n    \"@coss/combobox\",\n    \"@coss/field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-8.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>Fruits</FieldLabel>\\n      <Combobox items={items}>\\n        <ComboboxInput\\n          aria-label=\\\"Select an item\\\"\\n          placeholder=\\\"Select an item...\\\"\\n        />\\n        <ComboboxPopup>\\n          <ComboboxEmpty>No results found.</ComboboxEmpty>\\n          <ComboboxList>\\n            {(item) => (\\n              <ComboboxItem key={item.value} value={item}>\\n                {item.label}\\n              </ComboboxItem>\\n            )}\\n          </ComboboxList>\\n        </ComboboxPopup>\\n      </Combobox>\\n      <FieldDescription>Select a item.</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"field\",\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-field-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-field-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Field with multiple selection combobox\",\n  \"registryDependencies\": [\n    \"@coss/combobox\",\n    \"@coss/field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-field-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Combobox,\\n  ComboboxChip,\\n  ComboboxChips,\\n  ComboboxChipsInput,\\n  ComboboxEmpty,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxValue,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n  { label: \\\"Grape\\\", value: \\\"grape\\\" },\\n  { label: \\\"Strawberry\\\", value: \\\"strawberry\\\" },\\n  { label: \\\"Mango\\\", value: \\\"mango\\\" },\\n  { label: \\\"Pineapple\\\", value: \\\"pineapple\\\" },\\n  { label: \\\"Kiwi\\\", value: \\\"kiwi\\\" },\\n  { label: \\\"Peach\\\", value: \\\"peach\\\" },\\n  { label: \\\"Pear\\\", value: \\\"pear\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>Fruits</FieldLabel>\\n      <Combobox defaultValue={[items[0], items[4]]} items={items} multiple>\\n        <ComboboxChips>\\n          <ComboboxValue>\\n            {(value: { value: string; label: string }[]) => (\\n              <>\\n                {value?.map((item) => (\\n                  <ComboboxChip aria-label={item.label} key={item.value}>\\n                    {item.label}\\n                  </ComboboxChip>\\n                ))}\\n                <ComboboxChipsInput\\n                  aria-label=\\\"Select items\\\"\\n                  placeholder={value.length > 0 ? undefined : \\\"Select items…\\\"}\\n                />\\n              </>\\n            )}\\n          </ComboboxValue>\\n        </ComboboxChips>\\n        <ComboboxPopup>\\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\\n          <ComboboxList>\\n            {(item) => (\\n              <ComboboxItem key={item.value} value={item}>\\n                {item.label}\\n              </ComboboxItem>\\n            )}\\n          </ComboboxList>\\n        </ComboboxPopup>\\n      </Combobox>\\n      <FieldDescription>Select multiple items.</FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"combobox\",\n    \"field\",\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-fieldset-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-fieldset-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Fieldset with multiple fields\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/fieldset\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-fieldset-1.tsx\",\n      \"content\": \"import {\\n  Field,\\n  FieldDescription,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport { Fieldset, FieldsetLegend } from \\\"@/registry/default/ui/fieldset\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Fieldset>\\n      <FieldsetLegend>Billing Details</FieldsetLegend>\\n      <Field>\\n        <FieldLabel>Company</FieldLabel>\\n        <Input placeholder=\\\"Enter company name\\\" type=\\\"text\\\" />\\n        <FieldDescription>\\n          The name that will appear on invoices.\\n        </FieldDescription>\\n      </Field>\\n\\n      <Field>\\n        <FieldLabel>Tax ID</FieldLabel>\\n        <Input placeholder=\\\"Enter tax identification number\\\" type=\\\"text\\\" />\\n        <FieldDescription>\\n          Your business tax identification number.\\n        </FieldDescription>\\n      </Field>\\n    </Fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"fieldset\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-form-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-form-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input in a form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-form-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    alert(`Email: ${formData.get(\\\"email\\\") || \\\"\\\"}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-64\\\" onSubmit={onSubmit}>\\n      <Field name=\\\"email\\\">\\n        <FieldLabel>Email</FieldLabel>\\n        <Input placeholder=\\\"you@example.com\\\" required type=\\\"email\\\" />\\n        <FieldError>Please enter a valid email.</FieldError>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"field\",\n    \"form\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-form-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-form-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Form with zod validation\",\n  \"dependencies\": [\n    \"zod\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-form-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { z } from \\\"zod\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nconst schema = z.object({\\n  age: z.coerce\\n    .number({ message: \\\"Please enter a number.\\\" })\\n    .positive({ message: \\\"Number must be positive.\\\" }),\\n  name: z.string().min(1, { message: \\\"Please enter a name.\\\" }),\\n});\\n\\ntype Errors = Record<string, string | string[]>;\\n\\nasync function submitForm(event: FormEvent<HTMLFormElement>) {\\n  event.preventDefault();\\n\\n  const formData = new FormData(event.currentTarget);\\n  const result = schema.safeParse(Object.fromEntries(formData));\\n\\n  if (!result.success) {\\n    const { fieldErrors } = z.flattenError(result.error);\\n    return { errors: fieldErrors as Errors };\\n  }\\n\\n  return {\\n    errors: {} as Errors,\\n  };\\n}\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const [errors, setErrors] = useState<Errors>({});\\n\\n  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {\\n    event.preventDefault();\\n    const formData = new FormData(event.currentTarget);\\n    setLoading(true);\\n    const response = await submitForm(event);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setErrors(response.errors);\\n    setLoading(false);\\n    if (Object.keys(response.errors).length === 0) {\\n      alert(\\n        `Name: ${String(formData.get(\\\"name\\\") || \\\"\\\")}\\\\nAge: ${String(\\n          formData.get(\\\"age\\\") || \\\"\\\",\\n        )}`,\\n      );\\n    }\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-64\\\" errors={errors} onSubmit={onSubmit}>\\n      <Field name=\\\"name\\\">\\n        <FieldLabel>Name</FieldLabel>\\n        <Input placeholder=\\\"Enter name\\\" />\\n        <FieldError />\\n      </Field>\\n      <Field name=\\\"age\\\">\\n        <FieldLabel>Age</FieldLabel>\\n        <Input placeholder=\\\"Enter age\\\" />\\n        <FieldError />\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"field\",\n    \"form\",\n    \"label\",\n    \"validation\",\n    \"zod\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-frame-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-frame-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic frame\",\n  \"registryDependencies\": [\n    \"@coss/frame\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-frame-1.tsx\",\n      \"content\": \"import {\\n  Frame,\\n  FrameDescription,\\n  FrameFooter,\\n  FrameHeader,\\n  FramePanel,\\n  FrameTitle,\\n} from \\\"@/registry/default/ui/frame\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Frame className=\\\"w-full\\\">\\n      <FrameHeader>\\n        <FrameTitle>Section header</FrameTitle>\\n        <FrameDescription>Brief description about the section</FrameDescription>\\n      </FrameHeader>\\n      <FramePanel>\\n        <h2 className=\\\"font-semibold text-sm\\\">Section title</h2>\\n        <p className=\\\"text-muted-foreground text-sm\\\">Section description</p>\\n      </FramePanel>\\n      <FrameFooter>\\n        <p className=\\\"text-muted-foreground text-sm\\\">Footer</p>\\n      </FrameFooter>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"frame\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-frame-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-frame-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Frame with collapsible content and delete button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/collapsible\",\n    \"@coss/frame\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-frame-2.tsx\",\n      \"content\": \"import { ChevronDownIcon, TrashIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Collapsible,\\n  CollapsiblePanel,\\n  CollapsibleTrigger,\\n} from \\\"@/registry/default/ui/collapsible\\\";\\nimport { Frame, FrameHeader, FramePanel } from \\\"@/registry/default/ui/frame\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Frame className=\\\"w-full\\\">\\n      <Collapsible>\\n        <FrameHeader className=\\\"flex-row items-center justify-between px-2 py-2\\\">\\n          <CollapsibleTrigger\\n            className=\\\"data-panel-open:[&_svg]:rotate-180\\\"\\n            render={<Button variant=\\\"ghost\\\" />}\\n          >\\n            <ChevronDownIcon className=\\\"size-4\\\" />\\n            Section header\\n          </CollapsibleTrigger>\\n          <Button aria-label=\\\"Delete\\\" size=\\\"icon\\\" variant=\\\"ghost\\\">\\n            <TrashIcon />\\n          </Button>\\n        </FrameHeader>\\n        <CollapsiblePanel>\\n          <FramePanel>\\n            <h2 className=\\\"font-semibold text-sm\\\">Section title</h2>\\n            <p className=\\\"text-muted-foreground text-sm\\\">Section description</p>\\n          </FramePanel>\\n        </CollapsiblePanel>\\n      </Collapsible>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"collapsible\",\n    \"frame\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-frame-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-frame-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Frame with multiple separated panels\",\n  \"registryDependencies\": [\n    \"@coss/frame\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-frame-3.tsx\",\n      \"content\": \"import {\\n  Frame,\\n  FrameDescription,\\n  FrameHeader,\\n  FramePanel,\\n  FrameTitle,\\n} from \\\"@/registry/default/ui/frame\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Frame className=\\\"w-full\\\">\\n      <FrameHeader>\\n        <FrameTitle>Section header</FrameTitle>\\n        <FrameDescription>Brief description about the section</FrameDescription>\\n      </FrameHeader>\\n      <FramePanel>\\n        <h2 className=\\\"font-semibold text-sm\\\">Separated panel</h2>\\n        <p className=\\\"text-muted-foreground text-sm\\\">Section description</p>\\n      </FramePanel>\\n      <FramePanel>\\n        <h2 className=\\\"font-semibold text-sm\\\">Separated panel</h2>\\n        <p className=\\\"text-muted-foreground text-sm\\\">Section description</p>\\n      </FramePanel>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"frame\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-frame-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-frame-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Frame with multiple stacked panels\",\n  \"registryDependencies\": [\n    \"@coss/frame\",\n    \"@coss/separator\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-frame-4.tsx\",\n      \"content\": \"import {\\n  Frame,\\n  FrameDescription,\\n  FrameHeader,\\n  FramePanel,\\n  FrameTitle,\\n} from \\\"@/registry/default/ui/frame\\\";\\nimport { Separator } from \\\"@/registry/default/ui/separator\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Frame className=\\\"w-full\\\">\\n      <FrameHeader>\\n        <FrameTitle>Section header</FrameTitle>\\n        <FrameDescription>Brief description about the section</FrameDescription>\\n      </FrameHeader>\\n      <FramePanel className=\\\"p-0\\\">\\n        <div className=\\\"p-5\\\">\\n          <h2 className=\\\"font-semibold text-sm\\\">Stacked panel</h2>\\n          <p className=\\\"text-muted-foreground text-sm\\\">Section description</p>\\n        </div>\\n        <Separator />\\n        <div className=\\\"p-5\\\">\\n          <h2 className=\\\"font-semibold text-sm\\\">Stacked panel</h2>\\n          <p className=\\\"text-muted-foreground text-sm\\\">Section description</p>\\n        </div>\\n      </FramePanel>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"frame\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic group\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-1.tsx\",\n      \"content\": \"import {\\n  ArchiveIcon,\\n  EditIcon,\\n  EllipsisIcon,\\n  FilesIcon,\\n  FilmIcon,\\n  ShareIcon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"File actions\\\">\\n      <Button variant=\\\"outline\\\">\\n        <FilesIcon aria-hidden=\\\"true\\\" />\\n        Files\\n      </Button>\\n      <GroupSeparator />\\n      <Button variant=\\\"outline\\\">\\n        <FilmIcon aria-hidden=\\\"true\\\" />\\n        Media\\n      </Button>\\n      <GroupSeparator />\\n      <Menu>\\n        <MenuTrigger\\n          render={<Button aria-label=\\\"Menu\\\" size=\\\"icon\\\" variant=\\\"outline\\\" />}\\n        >\\n          <EllipsisIcon className=\\\"size-4\\\" />\\n        </MenuTrigger>\\n        <MenuPopup align=\\\"end\\\">\\n          <MenuItem>\\n            <EditIcon aria-hidden=\\\"true\\\" />\\n            Edit\\n          </MenuItem>\\n          <MenuItem>\\n            <ArchiveIcon aria-hidden=\\\"true\\\" />\\n            Archive\\n          </MenuItem>\\n          <MenuItem>\\n            <ShareIcon aria-hidden=\\\"true\\\" />\\n            Share\\n          </MenuItem>\\n          <MenuItem variant=\\\"destructive\\\">\\n            <TrashIcon aria-hidden=\\\"true\\\" />\\n            Delete\\n          </MenuItem>\\n        </MenuPopup>\\n      </Menu>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Nested groups\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-10.tsx\",\n      \"content\": \"import { ArrowLeftIcon, ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Pagination\\\">\\n      <Group aria-label=\\\"Page numbers\\\">\\n        <Button className=\\\"min-w-8\\\" variant=\\\"outline\\\">\\n          1\\n        </Button>\\n        <GroupSeparator />\\n        <Button className=\\\"min-w-8\\\" variant=\\\"outline\\\">\\n          2\\n        </Button>\\n        <GroupSeparator />\\n        <Button className=\\\"min-w-8\\\" variant=\\\"outline\\\">\\n          3\\n        </Button>\\n        <GroupSeparator />\\n        <Button className=\\\"min-w-8\\\" variant=\\\"outline\\\">\\n          4\\n        </Button>\\n        <GroupSeparator />\\n        <Button className=\\\"min-w-8\\\" variant=\\\"outline\\\">\\n          5\\n        </Button>\\n      </Group>\\n      <Group aria-label=\\\"Navigation\\\">\\n        <Button aria-label=\\\"Previous\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n          <ArrowLeftIcon aria-hidden=\\\"true\\\" />\\n        </Button>\\n        <GroupSeparator />\\n        <Button aria-label=\\\"Next\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n          <ArrowRightIcon aria-hidden=\\\"true\\\" />\\n        </Button>\\n      </Group>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with popup\",\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-11.tsx\",\n      \"content\": \"import { ChevronDownIcon, GitForkIcon } from \\\"lucide-react\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  Popover,\\n  PopoverDescription,\\n  PopoverPopup,\\n  PopoverTitle,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Repository actions\\\">\\n      <Button variant=\\\"outline\\\">\\n        <GitForkIcon aria-hidden=\\\"true\\\" />\\n        Fork\\n        <Badge variant=\\\"secondary\\\">48</Badge>\\n      </Button>\\n      <GroupSeparator />\\n      <Popover>\\n        <PopoverTrigger\\n          render={\\n            <Button aria-label=\\\"Send options\\\" size=\\\"icon\\\" variant=\\\"outline\\\" />\\n          }\\n        >\\n          <ChevronDownIcon aria-hidden=\\\"true\\\" />\\n        </PopoverTrigger>\\n        <PopoverPopup align=\\\"end\\\" className=\\\"w-64\\\">\\n          <PopoverTitle className=\\\"text-base\\\">Existing forks</PopoverTitle>\\n          <PopoverDescription>\\n            You don't have any forks of this repository.\\n          </PopoverDescription>\\n        </PopoverPopup>\\n      </Popover>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with input group\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/input-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-12.tsx\",\n      \"content\": \"import { MicIcon, PaperclipIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipContent,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group\\n      aria-label=\\\"Message composer\\\"\\n      className=\\\"[--radius-lg:9999px] [--radius:9999rem]\\\"\\n    >\\n      <Group aria-label=\\\"Attachments\\\">\\n        <Button aria-label=\\\"Attach file\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n          <PaperclipIcon aria-hidden=\\\"true\\\" />\\n        </Button>\\n      </Group>\\n      <Group aria-label=\\\"Message input\\\">\\n        <InputGroup>\\n          <InputGroupInput placeholder=\\\"Send a message\\\" />\\n          <InputGroupAddon align=\\\"inline-end\\\">\\n            <Tooltip>\\n              <TooltipTrigger\\n                render={\\n                  <Button\\n                    aria-label=\\\"Voice Mode\\\"\\n                    size=\\\"icon-xs\\\"\\n                    variant=\\\"ghost\\\"\\n                  />\\n                }\\n              >\\n                <MicIcon aria-hidden=\\\"true\\\" />\\n              </TooltipTrigger>\\n              <TooltipContent>Voice Mode</TooltipContent>\\n            </Tooltip>\\n          </InputGroupAddon>\\n        </InputGroup>\\n      </Group>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\",\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with menu\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-13.tsx\",\n      \"content\": \"import {\\n  ChevronDownIcon,\\n  DownloadIcon,\\n  EditIcon,\\n  ShareIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Subscription actions\\\">\\n      <Button>Subscribe</Button>\\n      <GroupSeparator className=\\\"bg-primary/72\\\" />\\n      <Menu>\\n        <MenuTrigger render={<Button aria-label=\\\"Copy options\\\" size=\\\"icon\\\" />}>\\n          <ChevronDownIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n        </MenuTrigger>\\n        <MenuPopup align=\\\"end\\\">\\n          <MenuItem>\\n            <ShareIcon aria-hidden=\\\"true\\\" />\\n            Share link\\n          </MenuItem>\\n          <MenuItem>\\n            <DownloadIcon aria-hidden=\\\"true\\\" />\\n            Download\\n          </MenuItem>\\n          <MenuItem>\\n            <EditIcon aria-hidden=\\\"true\\\" />\\n            Duplicate\\n          </MenuItem>\\n        </MenuPopup>\\n      </Menu>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"group\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with select\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/number-field\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-14.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  NumberField,\\n  NumberFieldGroup,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\ninterface Currency {\\n  value: string;\\n  label: string;\\n}\\n\\nconst currencies: Currency[] = [\\n  {\\n    label: \\\"US Dollar\\\",\\n    value: \\\"$\\\",\\n  },\\n  {\\n    label: \\\"Euro\\\",\\n    value: \\\"€\\\",\\n  },\\n  {\\n    label: \\\"British Pound\\\",\\n    value: \\\"£\\\",\\n  },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Payment amount\\\">\\n      <Group aria-label=\\\"Amount input\\\">\\n        <Select\\n          defaultValue={currencies[0]}\\n          itemToStringValue={(currency) => currency.value}\\n        >\\n          <SelectTrigger className=\\\"w-fit min-w-none\\\">\\n            <SelectValue>{(currency: Currency) => currency.value}</SelectValue>\\n          </SelectTrigger>\\n          <SelectPopup className=\\\"min-w-48\\\">\\n            {currencies.map((curr) => (\\n              <SelectItem key={curr.value} value={curr}>\\n                {curr.value} <span className=\\\"ms-1\\\">{curr.label}</span>\\n              </SelectItem>\\n            ))}\\n          </SelectPopup>\\n        </Select>\\n        <GroupSeparator />\\n        <NumberField\\n          aria-label=\\\"Enter the amount\\\"\\n          className=\\\"gap-0\\\"\\n          defaultValue={10}\\n          render={<NumberFieldGroup />}\\n        >\\n          <NumberFieldInput className=\\\"text-left\\\" />\\n        </NumberField>\\n      </Group>\\n      <Group aria-label=\\\"Submit\\\">\\n        <Button aria-label=\\\"Send\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n          <ArrowRightIcon aria-hidden=\\\"true\\\" />\\n        </Button>\\n      </Group>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with search\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-15.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { SearchIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst protocols = [\\n  { label: \\\"http\\\", value: \\\"http\\\" },\\n  { label: \\\"https\\\", value: \\\"https\\\" },\\n  { label: \\\"http + https\\\", value: \\\"both\\\" },\\n];\\n\\nconst subdomains = [\\n  { label: \\\"Subdomains\\\", value: null },\\n  { label: \\\"www\\\", value: \\\"www\\\" },\\n  { label: \\\"api\\\", value: \\\"api\\\" },\\n  { label: \\\"cdn\\\", value: \\\"cdn\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"URL search\\\">\\n      <Select defaultValue=\\\"both\\\" items={protocols}>\\n        <SelectTrigger className=\\\"w-fit min-w-none\\\">\\n          <SelectValue />\\n        </SelectTrigger>\\n        <SelectPopup>\\n          {protocols.map(({ label, value }) => (\\n            <SelectItem key={value} value={value}>\\n              {label}\\n            </SelectItem>\\n          ))}\\n        </SelectPopup>\\n      </Select>\\n      <GroupSeparator />\\n      <Input\\n        aria-label=\\\"URL\\\"\\n        className=\\\"flex-1\\\"\\n        defaultValue=\\\"coss.com\\\"\\n        type=\\\"text\\\"\\n      />\\n      <GroupSeparator />\\n      <Select defaultValue={null} items={subdomains}>\\n        <SelectTrigger className=\\\"w-fit min-w-none\\\">\\n          <SelectValue />\\n        </SelectTrigger>\\n        <SelectPopup>\\n          {subdomains.map(({ label, value }) => (\\n            <SelectItem key={value} value={value}>\\n              {label}\\n            </SelectItem>\\n          ))}\\n        </SelectPopup>\\n      </Select>\\n      <GroupSeparator />\\n      <Button aria-label=\\\"Search\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <SearchIcon aria-hidden=\\\"true\\\" />\\n      </Button>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\",\n    \"search\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with add button and input\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-16.tsx\",\n      \"content\": \"import { PlusIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Add item\\\">\\n      <Button aria-label=\\\"Add\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <PlusIcon aria-hidden=\\\"true\\\" />\\n      </Button>\\n      <GroupSeparator />\\n      <Input aria-label=\\\"Item name\\\" placeholder=\\\"Enter item name\\\" type=\\\"text\\\" />\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"group\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with input and currency text\",\n  \"registryDependencies\": [\n    \"@coss/group\",\n    \"@coss/input\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-17.tsx\",\n      \"content\": \"import { Group, GroupSeparator, GroupText } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Price input\\\">\\n      <Input\\n        aria-label=\\\"Enter the amount\\\"\\n        className=\\\"text-right\\\"\\n        defaultValue=\\\"100\\\"\\n        id=\\\"amount\\\"\\n        type=\\\"text\\\"\\n      />\\n      <GroupSeparator />\\n      <GroupText render={<Label aria-label=\\\"Currency\\\" htmlFor=\\\"amount\\\" />}>\\n        USD\\n      </GroupText>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with select and input\",\n  \"registryDependencies\": [\n    \"@coss/group\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-18.tsx\",\n      \"content\": \"import { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst protocols = [\\n  { label: \\\"https://\\\", value: \\\"https\\\" },\\n  { label: \\\"http://\\\", value: \\\"http\\\" },\\n  { label: \\\"ftp://\\\", value: \\\"ftp\\\" },\\n  { label: \\\"sftp://\\\", value: \\\"sftp\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"URL input\\\">\\n      <Select defaultValue=\\\"https\\\" items={protocols}>\\n        <SelectTrigger className=\\\"w-fit min-w-none\\\">\\n          <SelectValue />\\n        </SelectTrigger>\\n        <SelectPopup>\\n          {protocols.map(({ label, value }) => (\\n            <SelectItem key={value} value={value}>\\n              {label}\\n            </SelectItem>\\n          ))}\\n        </SelectPopup>\\n      </Select>\\n      <GroupSeparator />\\n      <Input aria-label=\\\"IP address\\\" placeholder=\\\"192.168.1.1\\\" type=\\\"text\\\" />\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\",\n    \"input\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-19\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with input and select\",\n  \"registryDependencies\": [\n    \"@coss/group\",\n    \"@coss/input\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-19.tsx\",\n      \"content\": \"import { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst domains = [\\n  { label: \\\".com\\\", value: \\\"com\\\" },\\n  { label: \\\".org\\\", value: \\\"org\\\" },\\n  { label: \\\".net\\\", value: \\\"net\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Domain input\\\">\\n      <Input aria-label=\\\"Domain name\\\" placeholder=\\\"example\\\" type=\\\"text\\\" />\\n      <GroupSeparator />\\n      <Select defaultValue=\\\"com\\\" items={domains}>\\n        <SelectTrigger className=\\\"w-fit min-w-none\\\">\\n          <SelectValue />\\n        </SelectTrigger>\\n        <SelectPopup>\\n          {domains.map(({ label, value }) => (\\n            <SelectItem key={value} value={value}>\\n              {label}\\n            </SelectItem>\\n          ))}\\n        </SelectPopup>\\n      </Select>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\",\n    \"input\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with input\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/input\",\n    \"@coss/tooltip\",\n    \"@coss/use-copy-to-clipboard\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useRef } from \\\"react\\\";\\nimport { useCopyToClipboard } from \\\"@/registry/default/hooks/use-copy-to-clipboard\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  return (\\n    <Group aria-label=\\\"Url input\\\">\\n      <Input\\n        aria-label=\\\"Url\\\"\\n        defaultValue=\\\"https://coss.com\\\"\\n        ref={inputRef}\\n        type=\\\"text\\\"\\n      />\\n      <GroupSeparator />\\n      <Tooltip>\\n        <TooltipTrigger\\n          render={\\n            <Button\\n              aria-label=\\\"Copy\\\"\\n              onClick={() => {\\n                if (inputRef.current) {\\n                  copyToClipboard(inputRef.current.value);\\n                }\\n              }}\\n              size=\\\"icon\\\"\\n              variant=\\\"outline\\\"\\n            />\\n          }\\n        >\\n          {isCopied ? <CheckIcon /> : <CopyIcon />}\\n        </TooltipTrigger>\\n        <TooltipPopup>\\n          <p>Copy to clipboard</p>\\n        </TooltipPopup>\\n      </Tooltip>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-20.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-20\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with input and text button\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-20.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Email subscription\\\">\\n      <Input aria-label=\\\"Email\\\" placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n      <GroupSeparator />\\n      <Button variant=\\\"outline\\\">Subscribe</Button>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"group\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-22.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-22\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with two number inputs for range\",\n  \"registryDependencies\": [\n    \"@coss/group\",\n    \"@coss/label\",\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-22.tsx\",\n      \"content\": \"import { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  NumberField,\\n  NumberFieldGroup,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Label>Range</Label>\\n      <Group aria-label=\\\"Range input\\\">\\n        <NumberField aria-label=\\\"Min value\\\" render={<NumberFieldGroup />}>\\n          <NumberFieldInput className=\\\"text-left\\\" placeholder=\\\"From\\\" />\\n        </NumberField>\\n        <GroupSeparator />\\n        <NumberField aria-label=\\\"Max value\\\" render={<NumberFieldGroup />}>\\n          <NumberFieldInput className=\\\"text-left\\\" placeholder=\\\"To\\\" />\\n        </NumberField>\\n      </Group>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\",\n    \"label\",\n    \"number field\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-23.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-23\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with filter label, combobox multi-select, and remove button\",\n  \"registryDependencies\": [\n    \"@coss/avatar\",\n    \"@coss/badge\",\n    \"@coss/button\",\n    \"@coss/combobox\",\n    \"@coss/group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-23.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  ChevronsUpDownIcon,\\n  FunnelIcon,\\n  SearchIcon,\\n  XIcon,\\n} from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button, buttonVariants } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Combobox,\\n  ComboboxEmpty,\\n  ComboboxInput,\\n  ComboboxItem,\\n  ComboboxList,\\n  ComboboxPopup,\\n  ComboboxTrigger,\\n} from \\\"@/registry/default/ui/combobox\\\";\\nimport { Group, GroupSeparator, GroupText } from \\\"@/registry/default/ui/group\\\";\\n\\ntype FilterOption = {\\n  id: string;\\n  label: string;\\n  avatar?: string;\\n};\\n\\nconst members: FilterOption[] = [\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=faces\\\",\\n    id: \\\"alex-chen\\\",\\n    label: \\\"Alex Chen\\\",\\n  },\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces\\\",\\n    id: \\\"sarah-johnson\\\",\\n    label: \\\"Sarah Johnson\\\",\\n  },\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&h=64&fit=crop&crop=faces\\\",\\n    id: \\\"marcus-williams\\\",\\n    label: \\\"Marcus Williams\\\",\\n  },\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=faces\\\",\\n    id: \\\"emma-davis\\\",\\n    label: \\\"Emma Davis\\\",\\n  },\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=faces\\\",\\n    id: \\\"james-miller\\\",\\n    label: \\\"James Miller\\\",\\n  },\\n];\\n\\nfunction getInitials(name: string): string {\\n  const parts = name.trim().split(/\\\\s+/);\\n  if (parts.length === 1) {\\n    return parts[0]?.charAt(0).toUpperCase() ?? \\\"\\\";\\n  }\\n  const first = parts[0]?.charAt(0) ?? \\\"\\\";\\n  const last = parts[parts.length - 1]?.charAt(0) ?? \\\"\\\";\\n  return (first + last).toUpperCase();\\n}\\n\\nfunction MemberAvatar({\\n  name,\\n  avatarUrl,\\n  className,\\n}: {\\n  name: string;\\n  avatarUrl?: string;\\n  className?: string;\\n}) {\\n  return (\\n    <Avatar className={cn(\\\"size-5\\\", className)}>\\n      {avatarUrl ? <AvatarImage alt={name} src={avatarUrl} /> : null}\\n      <AvatarFallback className=\\\"text-[0.5rem]\\\">\\n        {getInitials(name)}\\n      </AvatarFallback>\\n    </Avatar>\\n  );\\n}\\n\\nexport default function Particle() {\\n  const [selectedMembers, setSelectedMembers] = useState<FilterOption[]>(\\n    members.slice(0, 2),\\n  );\\n\\n  const renderTriggerContent = () => {\\n    if (selectedMembers.length === 0) return \\\"Select\\\";\\n    const firstMember = selectedMembers[0];\\n    const remainingCount = selectedMembers.length - 1;\\n\\n    return (\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <MemberAvatar\\n          avatarUrl={firstMember?.avatar}\\n          name={firstMember?.label ?? \\\"\\\"}\\n        />\\n        <span className=\\\"truncate\\\">{firstMember?.label}</span>\\n        {remainingCount > 0 && (\\n          <Badge className=\\\"tabular-nums\\\" variant=\\\"secondary\\\">\\n            +{remainingCount}\\n          </Badge>\\n        )}\\n      </div>\\n    );\\n  };\\n\\n  return (\\n    <Group>\\n      <GroupText\\n        className={cn(\\n          buttonVariants({\\n            size: \\\"sm\\\",\\n            variant: \\\"outline\\\",\\n          }),\\n          \\\"pointer-events-none\\\",\\n        )}\\n      >\\n        <FunnelIcon />\\n        Member\\n      </GroupText>\\n      <GroupSeparator />\\n      <Combobox\\n        autoHighlight\\n        items={members}\\n        multiple\\n        onValueChange={(value) => {\\n          if (Array.isArray(value)) {\\n            setSelectedMembers(value);\\n          }\\n        }}\\n        value={selectedMembers}\\n      >\\n        <ComboboxTrigger\\n          render={\\n            <Button\\n              className={\\n                selectedMembers.length === 0 ? \\\"justify-between\\\" : undefined\\n              }\\n              size=\\\"sm\\\"\\n              variant=\\\"outline\\\"\\n            />\\n          }\\n        >\\n          {renderTriggerContent()}\\n          {selectedMembers.length === 0 && (\\n            <ChevronsUpDownIcon className=\\\"-me-1!\\\" />\\n          )}\\n        </ComboboxTrigger>\\n        <ComboboxPopup aria-label=\\\"Select member\\\">\\n          <div className=\\\"border-b p-2\\\">\\n            <ComboboxInput\\n              className=\\\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\\\"\\n              placeholder=\\\"Search members...\\\"\\n              showTrigger={false}\\n              startAddon={<SearchIcon />}\\n            />\\n          </div>\\n          <ComboboxEmpty>No members found.</ComboboxEmpty>\\n          <ComboboxList>\\n            {(option: FilterOption) => (\\n              <ComboboxItem key={option.id} value={option}>\\n                <div className=\\\"flex items-center gap-2\\\">\\n                  <MemberAvatar avatarUrl={option.avatar} name={option.label} />\\n                  <span>{option.label}</span>\\n                </div>\\n              </ComboboxItem>\\n            )}\\n          </ComboboxList>\\n        </ComboboxPopup>\\n      </Combobox>\\n      <GroupSeparator />\\n      <Button\\n        aria-label=\\\"Remove filter\\\"\\n        onClick={() => setSelectedMembers([])}\\n        size=\\\"icon-sm\\\"\\n        variant=\\\"outline\\\"\\n      >\\n        <XIcon />\\n      </Button>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\",\n    \"badge\",\n    \"button\",\n    \"combobox\",\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small group\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-3.tsx\",\n      \"content\": \"import {\\n  ArchiveIcon,\\n  EditIcon,\\n  EllipsisIcon,\\n  FilesIcon,\\n  FilmIcon,\\n  ShareIcon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"File actions\\\">\\n      <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n        <FilesIcon aria-hidden=\\\"true\\\" />\\n        Files\\n      </Button>\\n      <GroupSeparator />\\n      <Button size=\\\"sm\\\" variant=\\\"outline\\\">\\n        <FilmIcon aria-hidden=\\\"true\\\" />\\n        Media\\n      </Button>\\n      <GroupSeparator />\\n      <Menu>\\n        <MenuTrigger\\n          render={<Button aria-label=\\\"Menu\\\" size=\\\"icon-sm\\\" variant=\\\"outline\\\" />}\\n        >\\n          <EllipsisIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n        </MenuTrigger>\\n        <MenuPopup align=\\\"end\\\">\\n          <MenuItem>\\n            <EditIcon aria-hidden=\\\"true\\\" />\\n            Edit\\n          </MenuItem>\\n          <MenuItem>\\n            <ArchiveIcon aria-hidden=\\\"true\\\" />\\n            Archive\\n          </MenuItem>\\n          <MenuItem>\\n            <ShareIcon aria-hidden=\\\"true\\\" />\\n            Share\\n          </MenuItem>\\n          <MenuItem variant=\\\"destructive\\\">\\n            <TrashIcon aria-hidden=\\\"true\\\" />\\n            Delete\\n          </MenuItem>\\n        </MenuPopup>\\n      </Menu>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large group\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-4.tsx\",\n      \"content\": \"import {\\n  ArchiveIcon,\\n  EditIcon,\\n  EllipsisIcon,\\n  FilesIcon,\\n  FilmIcon,\\n  ShareIcon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"File actions\\\">\\n      <Button size=\\\"lg\\\" variant=\\\"outline\\\">\\n        <FilesIcon aria-hidden=\\\"true\\\" />\\n        Files\\n      </Button>\\n      <GroupSeparator />\\n      <Button size=\\\"lg\\\" variant=\\\"outline\\\">\\n        <FilmIcon aria-hidden=\\\"true\\\" />\\n        Media\\n      </Button>\\n      <GroupSeparator />\\n      <Menu>\\n        <MenuTrigger\\n          render={<Button aria-label=\\\"Menu\\\" size=\\\"icon-lg\\\" variant=\\\"outline\\\" />}\\n        >\\n          <EllipsisIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n        </MenuTrigger>\\n        <MenuPopup align=\\\"end\\\">\\n          <MenuItem>\\n            <EditIcon aria-hidden=\\\"true\\\" />\\n            Edit\\n          </MenuItem>\\n          <MenuItem>\\n            <ArchiveIcon aria-hidden=\\\"true\\\" />\\n            Archive\\n          </MenuItem>\\n          <MenuItem>\\n            <ShareIcon aria-hidden=\\\"true\\\" />\\n            Share\\n          </MenuItem>\\n          <MenuItem variant=\\\"destructive\\\">\\n            <TrashIcon aria-hidden=\\\"true\\\" />\\n            Delete\\n          </MenuItem>\\n        </MenuPopup>\\n      </Menu>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with disabled button\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-5.tsx\",\n      \"content\": \"import {\\n  ArchiveIcon,\\n  EditIcon,\\n  EllipsisIcon,\\n  FilesIcon,\\n  FilmIcon,\\n  ShareIcon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"File actions\\\">\\n      <Button variant=\\\"outline\\\">\\n        <FilesIcon aria-hidden=\\\"true\\\" />\\n        Files\\n      </Button>\\n      <GroupSeparator />\\n      <Button disabled variant=\\\"outline\\\">\\n        <FilmIcon aria-hidden=\\\"true\\\" />\\n        Media\\n      </Button>\\n      <GroupSeparator />\\n      <Menu>\\n        <MenuTrigger\\n          render={<Button aria-label=\\\"Menu\\\" size=\\\"icon\\\" variant=\\\"outline\\\" />}\\n        >\\n          <EllipsisIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n        </MenuTrigger>\\n        <MenuPopup align=\\\"end\\\">\\n          <MenuItem>\\n            <EditIcon aria-hidden=\\\"true\\\" />\\n            Edit\\n          </MenuItem>\\n          <MenuItem>\\n            <ArchiveIcon aria-hidden=\\\"true\\\" />\\n            Archive\\n          </MenuItem>\\n          <MenuItem>\\n            <ShareIcon aria-hidden=\\\"true\\\" />\\n            Share\\n          </MenuItem>\\n          <MenuItem variant=\\\"destructive\\\">\\n            <TrashIcon aria-hidden=\\\"true\\\" />\\n            Delete\\n          </MenuItem>\\n        </MenuPopup>\\n      </Menu>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with default button\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-6.tsx\",\n      \"content\": \"import {\\n  ArchiveIcon,\\n  EditIcon,\\n  EllipsisIcon,\\n  FilesIcon,\\n  FilmIcon,\\n  ShareIcon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"File actions\\\">\\n      <Button>\\n        <FilesIcon aria-hidden=\\\"true\\\" />\\n        Files\\n      </Button>\\n      <GroupSeparator className=\\\"bg-primary/72\\\" />\\n      <Button>\\n        <FilmIcon aria-hidden=\\\"true\\\" />\\n        Media\\n      </Button>\\n      <GroupSeparator className=\\\"bg-primary/72\\\" />\\n      <Menu>\\n        <MenuTrigger render={<Button aria-label=\\\"Menu\\\" size=\\\"icon\\\" />}>\\n          <EllipsisIcon aria-hidden=\\\"true\\\" className=\\\"size-4\\\" />\\n        </MenuTrigger>\\n        <MenuPopup align=\\\"end\\\">\\n          <MenuItem>\\n            <EditIcon aria-hidden=\\\"true\\\" />\\n            Edit\\n          </MenuItem>\\n          <MenuItem>\\n            <ArchiveIcon aria-hidden=\\\"true\\\" />\\n            Archive\\n          </MenuItem>\\n          <MenuItem>\\n            <ShareIcon aria-hidden=\\\"true\\\" />\\n            Share\\n          </MenuItem>\\n          <MenuItem variant=\\\"destructive\\\">\\n            <TrashIcon aria-hidden=\\\"true\\\" />\\n            Delete\\n          </MenuItem>\\n        </MenuPopup>\\n      </Menu>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with start text\",\n  \"registryDependencies\": [\n    \"@coss/group\",\n    \"@coss/input\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-7.tsx\",\n      \"content\": \"import { Group, GroupSeparator, GroupText } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Domain input\\\">\\n      <GroupText render={<Label aria-label=\\\"Domain\\\" htmlFor=\\\"domain\\\" />}>\\n        https://\\n      </GroupText>\\n      <GroupSeparator />\\n      <Input\\n        aria-label=\\\"Domain\\\"\\n        defaultValue=\\\"coss.com\\\"\\n        id=\\\"domain\\\"\\n        type=\\\"text\\\"\\n      />\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Group with end text\",\n  \"registryDependencies\": [\n    \"@coss/group\",\n    \"@coss/input\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-8.tsx\",\n      \"content\": \"import { Group, GroupSeparator, GroupText } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Domain input\\\">\\n      <Input\\n        aria-label=\\\"Domain\\\"\\n        defaultValue=\\\"coss\\\"\\n        id=\\\"domain-suffix\\\"\\n        type=\\\"text\\\"\\n      />\\n      <GroupSeparator />\\n      <GroupText\\n        render={<Label aria-label=\\\"Domain suffix\\\" htmlFor=\\\"domain-suffix\\\" />}\\n      >\\n        .com\\n      </GroupText>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-group-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-group-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical group\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-group-9.tsx\",\n      \"content\": \"import { ZoomInIcon, ZoomOutIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Zoom controls\\\" orientation=\\\"vertical\\\">\\n      <Button aria-label=\\\"Zoom in\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <ZoomInIcon />\\n      </Button>\\n      <GroupSeparator orientation=\\\"horizontal\\\" />\\n      <Button aria-label=\\\"Zoom Out\\\" size=\\\"icon\\\" variant=\\\"outline\\\">\\n        <ZoomOutIcon />\\n      </Button>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic input\",\n  \"registryDependencies\": [\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-1.tsx\",\n      \"content\": \"import { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return <Input aria-label=\\\"Enter text\\\" placeholder=\\\"Enter text\\\" type=\\\"text\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group mimicking a URL bar\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-10.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { InfoIcon, StarIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Popover,\\n  PopoverDescription,\\n  PopoverPopup,\\n  PopoverTitle,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  const [isFavorite, setIsFavorite] = useState(false);\\n\\n  return (\\n    <InputGroup className=\\\"[--radius-lg:9999px] [--radius:9999rem]\\\">\\n      <Popover>\\n        <InputGroupAddon>\\n          <PopoverTrigger\\n            render={<Button size=\\\"icon-xs\\\" variant=\\\"secondary\\\" />}\\n          >\\n            <InfoIcon />\\n          </PopoverTrigger>\\n        </InputGroupAddon>\\n        <PopoverPopup\\n          align=\\\"start\\\"\\n          alignOffset={-5}\\n          className=\\\"w-64\\\"\\n          sideOffset={6}\\n        >\\n          <PopoverTitle className=\\\"text-sm\\\">\\n            Your connection is not secure.\\n          </PopoverTitle>\\n          <PopoverDescription>\\n            You should not enter any sensitive information on this site.\\n          </PopoverDescription>\\n        </PopoverPopup>\\n      </Popover>\\n      <InputGroupAddon className=\\\"pl-1.5 text-muted-foreground\\\">\\n        https://\\n      </InputGroupAddon>\\n      <InputGroupInput\\n        aria-label=\\\"Url\\\"\\n        className=\\\"*:[input]:ps-1!\\\"\\n        type=\\\"text\\\"\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Button\\n          onClick={() => setIsFavorite(!isFavorite)}\\n          size=\\\"icon-xs\\\"\\n          variant=\\\"ghost\\\"\\n        >\\n          <StarIcon\\n            className=\\\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\\\"\\n            data-favorite={isFavorite}\\n          />\\n        </Button>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input\",\n    \"input group\",\n    \"popover\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with keyboard shortcut\",\n  \"registryDependencies\": [\n    \"@coss/input-group\",\n    \"@coss/kbd\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-11.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport { Kbd } from \\\"@/registry/default/ui/kbd\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Search\\\"\\n        placeholder=\\\"Search…\\\"\\n        type=\\\"search\\\"\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Kbd>/</Kbd>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\",\n    \"input group\",\n    \"kbd\",\n    \"search\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with start loading spinner\",\n  \"registryDependencies\": [\n    \"@coss/input-group\",\n    \"@coss/spinner\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-12.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput disabled placeholder=\\\"Processing…\\\" type=\\\"search\\\" />\\n      <InputGroupAddon>\\n        <Spinner />\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\",\n    \"input group\",\n    \"spinner\",\n    \"loading\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input with label and required indicator\",\n  \"registryDependencies\": [\n    \"@coss/input\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-13.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Label htmlFor={id}>\\n        Email <span className=\\\"text-destructive\\\">*</span>\\n      </Label>\\n      <Input id={id} placeholder=\\\"Email\\\" required type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input with optional label\",\n  \"registryDependencies\": [\n    \"@coss/input\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-14.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <div className=\\\"inline-flex w-full items-center justify-between gap-2\\\">\\n        <Label htmlFor={id}>Email</Label>\\n        <Label className=\\\"font-normal text-muted-foreground\\\" render={<span />}>\\n          Optional\\n        </Label>\\n      </div>\\n      <Input id={id} placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input with custom border and background\",\n  \"registryDependencies\": [\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-15.tsx\",\n      \"content\": \"import { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Input\\n      aria-label=\\\"Email\\\"\\n      className=\\\"border-transparent bg-muted shadow-none before:hidden\\\"\\n      placeholder=\\\"Email\\\"\\n      type=\\\"email\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with end loading spinner\",\n  \"registryDependencies\": [\n    \"@coss/input-group\",\n    \"@coss/spinner\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-16.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput disabled placeholder=\\\"Processing…\\\" type=\\\"search\\\" />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Spinner />\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\",\n    \"input group\",\n    \"spinner\",\n    \"loading\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Read-only input\",\n  \"registryDependencies\": [\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-17.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <Input\\n      className=\\\"read-only:bg-muted\\\"\\n      defaultValue=\\\"This is a read-only input\\\"\\n      id={id}\\n      readOnly\\n      type=\\\"text\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input with characters remaining counter\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-18.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Field, FieldDescription } from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  const maxLength = 14;\\n  const [value, setValue] = useState(\\\"\\\");\\n\\n  return (\\n    <Field>\\n      <Input\\n        aria-label=\\\"Code\\\"\\n        maxLength={maxLength}\\n        onChange={(e) => setValue(e.target.value)}\\n        placeholder=\\\"Enter code\\\"\\n        type=\\\"text\\\"\\n        value={value}\\n      />\\n      <FieldDescription>\\n        <span className=\\\"tabular-nums\\\">{maxLength - value.length}</span>{\\\" \\\"}\\n        characters left\\n      </FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-19\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pill-shaped input\",\n  \"registryDependencies\": [\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-19.tsx\",\n      \"content\": \"import { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Input\\n      aria-label=\\\"Enter text\\\"\\n      className=\\\"[--radius-lg:9999px] [--radius:9999px]\\\"\\n      placeholder=\\\"Enter text\\\"\\n      type=\\\"text\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small input\",\n  \"registryDependencies\": [\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-2.tsx\",\n      \"content\": \"import { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Input\\n      aria-label=\\\"Enter text\\\"\\n      placeholder=\\\"Enter text\\\"\\n      size=\\\"sm\\\"\\n      type=\\\"text\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large input\",\n  \"registryDependencies\": [\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-3.tsx\",\n      \"content\": \"import { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Input\\n      aria-label=\\\"Enter text\\\"\\n      placeholder=\\\"Enter text\\\"\\n      size=\\\"lg\\\"\\n      type=\\\"text\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled input\",\n  \"registryDependencies\": [\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-4.tsx\",\n      \"content\": \"import { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Input aria-label=\\\"Disabled\\\" disabled placeholder=\\\"Disabled\\\" type=\\\"text\\\" />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"File input\",\n  \"registryDependencies\": [\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-5.tsx\",\n      \"content\": \"import { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return <Input aria-label=\\\"File\\\" type=\\\"file\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input with label\",\n  \"registryDependencies\": [\n    \"@coss/input\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-6.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col items-start gap-2\\\">\\n      <Label htmlFor={id}>Email</Label>\\n      <Input\\n        aria-label=\\\"Email\\\"\\n        id={id}\\n        placeholder=\\\"you@example.com\\\"\\n        type=\\\"email\\\"\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input with button using Group\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-7.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group } from \\\"@/registry/default/ui/group\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Group aria-label=\\\"Email subscription\\\" className=\\\"gap-2\\\">\\n      <Input\\n        aria-label=\\\"Email\\\"\\n        className=\\\"flex-1\\\"\\n        placeholder=\\\"you@example.com\\\"\\n        type=\\\"email\\\"\\n      />\\n      <div>\\n        <Button variant=\\\"outline\\\">Send</Button>\\n      </div>\\n    </Group>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"group\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input with start text and end tooltip\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-8.tsx\",\n      \"content\": \"import { InfoIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Set your URL\\\"\\n        className=\\\"*:[input]:ps-0!\\\"\\n        placeholder=\\\"coss.com\\\"\\n        type=\\\"text\\\"\\n      />\\n      <InputGroupAddon>https://</InputGroupAddon>\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Popover>\\n          <PopoverTrigger\\n            openOnHover\\n            render={\\n              <Button aria-label=\\\"More info\\\" size=\\\"icon-xs\\\" variant=\\\"ghost\\\" />\\n            }\\n          >\\n            <InfoIcon />\\n          </PopoverTrigger>\\n          <PopoverPopup side=\\\"top\\\" tooltipStyle>\\n            <p>The URL of your website</p>\\n          </PopoverPopup>\\n        </Popover>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input\",\n    \"input group\",\n    \"popover\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Password input with toggle visibility\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { EyeIcon, EyeOffIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  const [showPassword, setShowPassword] = useState(false);\\n\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Password with toggle visibility\\\"\\n        placeholder=\\\"Enter your password\\\"\\n        type={showPassword ? \\\"text\\\" : \\\"password\\\"}\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={\\n              <Button\\n                aria-label={showPassword ? \\\"Hide password\\\" : \\\"Show password\\\"}\\n                onClick={() => setShowPassword(!showPassword)}\\n                size=\\\"icon-xs\\\"\\n                variant=\\\"ghost\\\"\\n              />\\n            }\\n          >\\n            {showPassword ? <EyeOffIcon /> : <EyeIcon />}\\n          </TooltipTrigger>\\n          <TooltipPopup>\\n            {showPassword ? \\\"Hide password\\\" : \\\"Show password\\\"}\\n          </TooltipPopup>\\n        </Tooltip>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input\",\n    \"input group\",\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic input group\",\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-1.tsx\",\n      \"content\": \"import { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput aria-label=\\\"Search\\\" placeholder=\\\"Search\\\" type=\\\"search\\\" />\\n      <InputGroupAddon>\\n        <SearchIcon aria-hidden=\\\"true\\\" />\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-10.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput placeholder=\\\"Type to search…\\\" type=\\\"search\\\" />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Badge variant=\\\"info\\\">Badge</Badge>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"badge\",\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with keyboard shortcut\",\n  \"registryDependencies\": [\n    \"@coss/input-group\",\n    \"@coss/kbd\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-11.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport { Kbd } from \\\"@/registry/default/ui/kbd\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput placeholder=\\\"Search…\\\" type=\\\"search\\\" />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Kbd>⌘K</Kbd>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\",\n    \"kbd\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with inner label\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/label\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-12.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { InfoIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput id=\\\"email-1\\\" placeholder=\\\"team@coss.com\\\" type=\\\"email\\\" />\\n      <InputGroupAddon align=\\\"block-start\\\">\\n        <Label className=\\\"text-foreground\\\" htmlFor=\\\"email-1\\\">\\n          Email\\n        </Label>\\n        <Popover>\\n          <PopoverTrigger\\n            className=\\\"ml-auto\\\"\\n            openOnHover\\n            render={<Button className=\\\"-m-1\\\" size=\\\"icon-xs\\\" variant=\\\"ghost\\\" />}\\n          >\\n            <InfoIcon />\\n          </PopoverTrigger>\\n          <PopoverPopup side=\\\"top\\\" tooltipStyle>\\n            <p>We&apos;ll use this to send you notifications</p>\\n          </PopoverPopup>\\n        </Popover>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small input group\",\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-13.tsx\",\n      \"content\": \"import { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Search\\\"\\n        placeholder=\\\"Search\\\"\\n        size=\\\"sm\\\"\\n        type=\\\"search\\\"\\n      />\\n      <InputGroupAddon>\\n        <SearchIcon aria-hidden=\\\"true\\\" />\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large input group\",\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-14.tsx\",\n      \"content\": \"import { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Search\\\"\\n        placeholder=\\\"Search\\\"\\n        size=\\\"lg\\\"\\n        type=\\\"search\\\"\\n      />\\n      <InputGroupAddon>\\n        <SearchIcon aria-hidden=\\\"true\\\" />\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled input group\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-15.tsx\",\n      \"content\": \"import { ArrowRightIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Subscribe to our newsletter\\\"\\n        disabled\\n        placeholder=\\\"Your best email\\\"\\n        type=\\\"email\\\"\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Button aria-label=\\\"Subscribe\\\" disabled size=\\\"icon-xs\\\" variant=\\\"ghost\\\">\\n          <ArrowRightIcon aria-hidden=\\\"true\\\" />\\n        </Button>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with loading spinner\",\n  \"registryDependencies\": [\n    \"@coss/input-group\",\n    \"@coss/spinner\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-16.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput disabled placeholder=\\\"Searching…\\\" type=\\\"search\\\" />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Spinner />\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\",\n    \"spinner\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with textarea\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/menu\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-17.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ArrowUpIcon, PlusIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupText,\\n  InputGroupTextarea,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupTextarea placeholder=\\\"Ask, Search or Chat…\\\" />\\n      <InputGroupAddon align=\\\"block-end\\\">\\n        <Menu>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={\\n                <MenuTrigger\\n                  render={\\n                    <Button\\n                      aria-label=\\\"Add files\\\"\\n                      className=\\\"rounded-full\\\"\\n                      size=\\\"icon-sm\\\"\\n                      variant=\\\"ghost\\\"\\n                    />\\n                  }\\n                >\\n                  <PlusIcon />\\n                </MenuTrigger>\\n              }\\n            />\\n            <TooltipPopup>Add files and more</TooltipPopup>\\n          </Tooltip>\\n          <MenuPopup align=\\\"start\\\">\\n            <MenuItem>Add photos &amp; files</MenuItem>\\n            <MenuItem>Create image</MenuItem>\\n            <MenuItem>Thinking</MenuItem>\\n            <MenuItem>Deep research</MenuItem>\\n          </MenuPopup>\\n        </Menu>\\n        <InputGroupText className=\\\"ml-auto\\\">78% used</InputGroupText>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={\\n              <Button\\n                aria-label=\\\"Send\\\"\\n                className=\\\"rounded-full\\\"\\n                size=\\\"icon-sm\\\"\\n                variant=\\\"default\\\"\\n              >\\n                <ArrowUpIcon />\\n              </Button>\\n            }\\n          />\\n          <TooltipPopup>Send</TooltipPopup>\\n        </Tooltip>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n  },\n  \"categories\": [\n    \"input group\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with badge and menu\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-18.tsx\",\n      \"content\": \"import { EllipsisIcon } from \\\"lucide-react\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        defaultValue=\\\"hello@coss.com\\\"\\n        placeholder=\\\"Enter email\\\"\\n        type=\\\"email\\\"\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Badge variant=\\\"info\\\">Primary</Badge>\\n        <Menu>\\n          <MenuTrigger\\n            render={\\n              <Button aria-label=\\\"Open menu\\\" size=\\\"icon-xs\\\" variant=\\\"ghost\\\" />\\n            }\\n          >\\n            <EllipsisIcon />\\n          </MenuTrigger>\\n          <MenuPopup align=\\\"end\\\" alignOffset={-4} sideOffset={8}>\\n            <MenuItem disabled>Make Primary</MenuItem>\\n            <MenuItem variant=\\\"destructive\\\">Delete</MenuItem>\\n          </MenuPopup>\\n        </Menu>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"badge\",\n    \"dropdown\",\n    \"input group\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-19\",\n  \"type\": \"registry:block\",\n  \"description\": \"Mini editor built with input group and toggle\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-19.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BoldIcon, ItalicIcon, LinkIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupTextarea,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupTextarea placeholder=\\\"Tell us about yourself…\\\" />\\n      <InputGroupAddon\\n        align=\\\"block-start\\\"\\n        className=\\\"gap-1 rounded-t-lg border-b bg-muted/72 p-2!\\\"\\n      >\\n        <Toggle aria-label=\\\"Toggle bold\\\" size=\\\"sm\\\">\\n          <BoldIcon aria-hidden=\\\"true\\\" />\\n        </Toggle>\\n        <Toggle aria-label=\\\"Toggle italic\\\" size=\\\"sm\\\">\\n          <ItalicIcon aria-hidden=\\\"true\\\" />\\n        </Toggle>\\n        <Button aria-label=\\\"Link\\\" size=\\\"icon-sm\\\" variant=\\\"ghost\\\">\\n          <LinkIcon aria-hidden=\\\"true\\\" />\\n        </Button>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input group\",\n    \"textarea\",\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with end icon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-2.tsx\",\n      \"content\": \"import { MailIcon } from \\\"lucide-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput aria-label=\\\"Email\\\" placeholder=\\\"Email\\\" type=\\\"email\\\" />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <MailIcon aria-hidden=\\\"true\\\" />\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-20.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-20\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with search icon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-20.tsx\",\n      \"content\": \"import { SearchIcon } from \\\"lucide-react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupAddon>\\n        <SearchIcon aria-hidden=\\\"true\\\" />\\n      </InputGroupAddon>\\n      <InputGroupInput aria-label=\\\"Search\\\" placeholder=\\\"Search\\\" type=\\\"search\\\" />\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\",\n    \"input group\",\n    \"search\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-21.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-21\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with start tooltip\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-21.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { InfoIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupAddon>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={\\n              <Button\\n                aria-label=\\\"More information\\\"\\n                size=\\\"icon-xs\\\"\\n                variant=\\\"ghost\\\"\\n              />\\n            }\\n          >\\n            <InfoIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Enter your username</TooltipPopup>\\n        </Tooltip>\\n      </InputGroupAddon>\\n      <InputGroupInput\\n        aria-label=\\\"Username\\\"\\n        placeholder=\\\"Username\\\"\\n        type=\\\"text\\\"\\n      />\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input\",\n    \"input group\",\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-22.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-22\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with clear button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-22.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState(\\\"Clear me\\\");\\n\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Text input with clear button\\\"\\n        onChange={(e) => setValue(e.target.value)}\\n        placeholder=\\\"Enter text\\\"\\n        type=\\\"text\\\"\\n        value={value}\\n      />\\n      {value && (\\n        <InputGroupAddon align=\\\"inline-end\\\">\\n          <Button\\n            aria-label=\\\"Clear input\\\"\\n            onClick={() => setValue(\\\"\\\")}\\n            size=\\\"icon-xs\\\"\\n            variant=\\\"ghost\\\"\\n          >\\n            <XIcon aria-hidden=\\\"true\\\" />\\n          </Button>\\n        </InputGroupAddon>\\n      )}\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input\",\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-23.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-23\",\n  \"type\": \"registry:block\",\n  \"description\": \"Search input group with loader and voice button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-23.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { LoaderCircleIcon, MicIcon, SearchIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  const [inputValue, setInputValue] = useState(\\\"\\\");\\n  const [isLoading, setIsLoading] = useState(false);\\n\\n  useEffect(() => {\\n    if (inputValue) {\\n      setIsLoading(true);\\n      const timer = setTimeout(() => {\\n        setIsLoading(false);\\n      }, 500);\\n      return () => clearTimeout(timer);\\n    }\\n    setIsLoading(false);\\n  }, [inputValue]);\\n\\n  return (\\n    <InputGroup>\\n      <InputGroupAddon>\\n        {isLoading ? (\\n          <LoaderCircleIcon\\n            aria-label=\\\"Loading...\\\"\\n            className=\\\"animate-spin\\\"\\n            role=\\\"status\\\"\\n          />\\n        ) : (\\n          <SearchIcon aria-hidden=\\\"true\\\" />\\n        )}\\n      </InputGroupAddon>\\n      <InputGroupInput\\n        aria-label=\\\"Search\\\"\\n        onChange={(e) => setInputValue(e.target.value)}\\n        placeholder=\\\"Search...\\\"\\n        type=\\\"search\\\"\\n        value={inputValue}\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={\\n              <Button\\n                aria-label=\\\"Voice search\\\"\\n                size=\\\"icon-xs\\\"\\n                variant=\\\"ghost\\\"\\n              />\\n            }\\n          >\\n            <MicIcon aria-hidden=\\\"true\\\" />\\n          </TooltipTrigger>\\n          <TooltipPopup>Voice search</TooltipPopup>\\n        </Tooltip>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input\",\n    \"input group\",\n    \"search\",\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-24.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-24\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with character counter\",\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-24.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n  InputGroupText,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  const maxLength = 14;\\n  const [value, setValue] = useState(\\\"\\\");\\n\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Username\\\"\\n        maxLength={maxLength}\\n        onChange={(e) => setValue(e.target.value)}\\n        placeholder=\\\"Enter username\\\"\\n        type=\\\"text\\\"\\n        value={value}\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <InputGroupText\\n          aria-live=\\\"polite\\\"\\n          className=\\\"text-xs tabular-nums\\\"\\n          role=\\\"status\\\"\\n        >\\n          {value.length}/{maxLength}\\n        </InputGroupText>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input\",\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-25.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-25\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input with characters remaining counter\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/input\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-25.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\n\\nimport { Field, FieldDescription } from \\\"@/registry/default/ui/field\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\n\\nexport default function Particle() {\\n  const maxLength = 14;\\n  const [value, setValue] = useState(\\\"\\\");\\n\\n  return (\\n    <Field>\\n      <Input\\n        aria-label=\\\"Code\\\"\\n        maxLength={maxLength}\\n        onChange={(e) => setValue(e.target.value)}\\n        placeholder=\\\"Enter code\\\"\\n        type=\\\"text\\\"\\n        value={value}\\n      />\\n      <FieldDescription>\\n        <span className=\\\"tabular-nums\\\">{maxLength - value.length}</span>{\\\" \\\"}\\n        characters left\\n      </FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-26.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-26\",\n  \"type\": \"registry:block\",\n  \"description\": \"Password input with strength indicator\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-26.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from \\\"lucide-react\\\";\\nimport { useId, useMemo, useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nconst requirements = [\\n  { regex: /.{8,}/, text: \\\"At least 8 characters\\\" },\\n  { regex: /[0-9]/, text: \\\"At least 1 number\\\" },\\n  { regex: /[a-z]/, text: \\\"At least 1 lowercase letter\\\" },\\n  { regex: /[A-Z]/, text: \\\"At least 1 uppercase letter\\\" },\\n];\\n\\nexport default function Particle() {\\n  const id = useId();\\n  const [password, setPassword] = useState(\\\"\\\");\\n  const [isVisible, setIsVisible] = useState(false);\\n\\n  const strength = requirements.map((req) => ({\\n    met: req.regex.test(password),\\n    text: req.text,\\n  }));\\n\\n  const strengthScore = useMemo(() => {\\n    return strength.filter((req) => req.met).length;\\n  }, [strength]);\\n\\n  const getStrengthColor = (score: number) => {\\n    if (score === 0) return \\\"bg-border\\\";\\n    if (score <= 1) return \\\"bg-red-500\\\";\\n    if (score <= 2) return \\\"bg-orange-500\\\";\\n    if (score === 3) return \\\"bg-amber-500\\\";\\n    return \\\"bg-emerald-500\\\";\\n  };\\n\\n  const getStrengthText = (score: number) => {\\n    if (score === 0) return \\\"Enter a password\\\";\\n    if (score <= 2) return \\\"Weak password\\\";\\n    if (score === 3) return \\\"Medium password\\\";\\n    return \\\"Strong password\\\";\\n  };\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-3\\\">\\n      <div className=\\\"flex flex-col gap-2\\\">\\n        <Label htmlFor={id}>Password</Label>\\n        <InputGroup>\\n          <InputGroupInput\\n            aria-describedby={`${id}-description`}\\n            id={id}\\n            onChange={(e) => setPassword(e.target.value)}\\n            placeholder=\\\"Password\\\"\\n            type={isVisible ? \\\"text\\\" : \\\"password\\\"}\\n            value={password}\\n          />\\n          <InputGroupAddon align=\\\"inline-end\\\">\\n            <Button\\n              aria-label={isVisible ? \\\"Hide password\\\" : \\\"Show password\\\"}\\n              onClick={() => setIsVisible(!isVisible)}\\n              size=\\\"icon-xs\\\"\\n              variant=\\\"ghost\\\"\\n            >\\n              {isVisible ? (\\n                <EyeOffIcon aria-hidden=\\\"true\\\" />\\n              ) : (\\n                <EyeIcon aria-hidden=\\\"true\\\" />\\n              )}\\n            </Button>\\n          </InputGroupAddon>\\n        </InputGroup>\\n      </div>\\n\\n      <div\\n        aria-label=\\\"Password strength\\\"\\n        aria-valuemax={4}\\n        aria-valuemin={0}\\n        aria-valuenow={strengthScore}\\n        className=\\\"h-1 w-full overflow-hidden rounded-full bg-border\\\"\\n        role=\\\"progressbar\\\"\\n        tabIndex={-1}\\n      >\\n        <div\\n          className={`h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`}\\n          style={{ width: `${(strengthScore / 4) * 100}%` }}\\n        />\\n      </div>\\n\\n      <p\\n        className=\\\"font-medium text-foreground text-sm\\\"\\n        id={`${id}-description`}\\n      >\\n        {getStrengthText(strengthScore)}. Must contain:\\n      </p>\\n\\n      <ul aria-label=\\\"Password requirements\\\" className=\\\"space-y-1.5\\\">\\n        {strength.map((req) => (\\n          <li className=\\\"flex items-center gap-2\\\" key={req.text}>\\n            {req.met ? (\\n              <CheckIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-4 text-emerald-500\\\"\\n              />\\n            ) : (\\n              <XIcon\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-4 text-muted-foreground/80\\\"\\n              />\\n            )}\\n            <span\\n              className={`text-xs ${req.met ? \\\"text-emerald-600\\\" : \\\"text-muted-foreground\\\"}`}\\n            >\\n              {req.text}\\n              <span className=\\\"sr-only\\\">\\n                {req.met ? \\\" - Requirement met\\\" : \\\" - Requirement not met\\\"}\\n              </span>\\n            </span>\\n          </li>\\n        ))}\\n      </ul>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input\",\n    \"input group\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-27.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-27\",\n  \"type\": \"registry:block\",\n  \"description\": \"Code snippet input with language selector\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/select\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-27.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useRef, useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupTextarea,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nconst languages = [\\n  { label: \\\"JavaScript\\\", value: \\\"javascript\\\" },\\n  { label: \\\"TypeScript\\\", value: \\\"typescript\\\" },\\n  { label: \\\"Python\\\", value: \\\"python\\\" },\\n  { label: \\\"Go\\\", value: \\\"go\\\" },\\n  { label: \\\"Rust\\\", value: \\\"rust\\\" },\\n];\\n\\nexport default function Particle() {\\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\\n  const [copied, setCopied] = useState(false);\\n\\n  const handleCopy = () => {\\n    const content = textareaRef.current?.value || \\\"\\\";\\n    navigator.clipboard.writeText(content);\\n    setCopied(true);\\n    setTimeout(() => setCopied(false), 2000);\\n  };\\n\\n  return (\\n    <InputGroup>\\n      <InputGroupTextarea\\n        className=\\\"font-mono\\\"\\n        placeholder=\\\"Paste your code here…\\\"\\n        ref={textareaRef}\\n        rows={6}\\n      />\\n      <InputGroupAddon\\n        align=\\\"block-start\\\"\\n        className=\\\"justify-between rounded-t-lg border-b bg-muted/72 p-2!\\\"\\n      >\\n        <Select defaultValue=\\\"javascript\\\" items={languages}>\\n          <SelectTrigger className=\\\"w-fit\\\" size=\\\"sm\\\">\\n            <SelectValue />\\n          </SelectTrigger>\\n          <SelectPopup>\\n            {languages.map(({ label, value }) => (\\n              <SelectItem key={value} value={value}>\\n                {label}\\n              </SelectItem>\\n            ))}\\n          </SelectPopup>\\n        </Select>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={\\n              <Button\\n                aria-label={copied ? \\\"Copied\\\" : \\\"Copy code\\\"}\\n                onClick={handleCopy}\\n                size=\\\"icon-sm\\\"\\n                variant=\\\"ghost\\\"\\n              />\\n            }\\n          >\\n            {copied ? <CheckIcon /> : <CopyIcon />}\\n          </TooltipTrigger>\\n          <TooltipPopup>\\n            {copied ? \\\"Copied!\\\" : \\\"Copy to clipboard\\\"}\\n          </TooltipPopup>\\n        </Tooltip>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input group\",\n    \"select\",\n    \"textarea\",\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-28.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-28\",\n  \"type\": \"registry:block\",\n  \"description\": \"Message composer with attachment buttons\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-28.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ImageIcon, PaperclipIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupTextarea,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupTextarea placeholder=\\\"Compose your message…\\\" rows={4} />\\n      <InputGroupAddon align=\\\"block-end\\\" className=\\\"justify-between\\\">\\n        <TooltipProvider>\\n          <div className=\\\"flex gap-1\\\">\\n            <Tooltip>\\n              <TooltipTrigger\\n                render={\\n                  <Button\\n                    aria-label=\\\"Attach file\\\"\\n                    size=\\\"icon-sm\\\"\\n                    variant=\\\"ghost\\\"\\n                  />\\n                }\\n              >\\n                <PaperclipIcon />\\n              </TooltipTrigger>\\n              <TooltipPopup>Attach file</TooltipPopup>\\n            </Tooltip>\\n            <Tooltip>\\n              <TooltipTrigger\\n                render={\\n                  <Button\\n                    aria-label=\\\"Insert image\\\"\\n                    size=\\\"icon-sm\\\"\\n                    variant=\\\"ghost\\\"\\n                  />\\n                }\\n              >\\n                <ImageIcon />\\n              </TooltipTrigger>\\n              <TooltipPopup>Insert image</TooltipPopup>\\n            </Tooltip>\\n          </div>\\n        </TooltipProvider>\\n        <Button size=\\\"sm\\\">Send</Button>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input group\",\n    \"textarea\",\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-29.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-29\",\n  \"type\": \"registry:block\",\n  \"description\": \"Chat input with voice and send buttons\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-29.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ArrowRightIcon, MicIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupText,\\n  InputGroupTextarea,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupTextarea placeholder=\\\"Type a message…\\\" />\\n      <InputGroupAddon align=\\\"block-end\\\">\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={\\n              <Button\\n                aria-label=\\\"Voice message\\\"\\n                className=\\\"rounded-full\\\"\\n                size=\\\"icon-sm\\\"\\n                variant=\\\"ghost\\\"\\n              />\\n            }\\n          >\\n            <MicIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Record voice message</TooltipPopup>\\n        </Tooltip>\\n        <InputGroupText className=\\\"ml-auto text-muted-foreground text-xs\\\">\\n          Press Enter to send\\n        </InputGroupText>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={\\n              <Button\\n                aria-label=\\\"Send message\\\"\\n                className=\\\"rounded-full\\\"\\n                size=\\\"icon-sm\\\"\\n              />\\n            }\\n          >\\n            <ArrowRightIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Send</TooltipPopup>\\n        </Tooltip>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input group\",\n    \"textarea\",\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with start text\",\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-3.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n  InputGroupText,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Set your URL\\\"\\n        className=\\\"*:[input]:ps-0!\\\"\\n        placeholder=\\\"coss\\\"\\n        type=\\\"search\\\"\\n      />\\n      <InputGroupAddon>\\n        <InputGroupText>i.cal.com/</InputGroupText>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with end text\",\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-4.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n  InputGroupText,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Choose a username\\\"\\n        placeholder=\\\"Choose a username\\\"\\n        type=\\\"text\\\"\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <InputGroupText>@coss.com</InputGroupText>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with start and end text\",\n  \"registryDependencies\": [\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-5.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n  InputGroupText,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Enter your domain\\\"\\n        className=\\\"*:[input]:px-0!\\\"\\n        placeholder=\\\"coss\\\"\\n        type=\\\"text\\\"\\n      />\\n      <InputGroupAddon>\\n        <InputGroupText>https://</InputGroupText>\\n      </InputGroupAddon>\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <InputGroupText>.com</InputGroupText>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with number field\",\n  \"registryDependencies\": [\n    \"@coss/input-group\",\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-6.tsx\",\n      \"content\": \"import {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupText,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  NumberField,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <NumberField aria-label=\\\"Enter the amount\\\" defaultValue={10}>\\n        <NumberFieldInput className=\\\"text-left\\\" />\\n      </NumberField>\\n      <InputGroupAddon>\\n        <InputGroupText>€</InputGroupText>\\n      </InputGroupAddon>\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <InputGroupText>EUR</InputGroupText>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\",\n    \"number field\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with end tooltip\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { InfoIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Popover,\\n  PopoverPopup,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Password\\\"\\n        placeholder=\\\"Password\\\"\\n        type=\\\"password\\\"\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Popover>\\n          <PopoverTrigger\\n            openOnHover\\n            render={\\n              <Button\\n                aria-label=\\\"Password requirements\\\"\\n                size=\\\"icon-xs\\\"\\n                variant=\\\"ghost\\\"\\n              />\\n            }\\n          >\\n            <InfoIcon />\\n          </PopoverTrigger>\\n          <PopoverPopup side=\\\"top\\\" tooltipStyle>\\n            <p>Min. 8 characters</p>\\n          </PopoverPopup>\\n        </Popover>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"input group\",\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with icon button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/tooltip\",\n    \"@coss/use-copy-to-clipboard\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-8.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useRef } from \\\"react\\\";\\nimport { useCopyToClipboard } from \\\"@/registry/default/hooks/use-copy-to-clipboard\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\\n  const inputRef = useRef<HTMLInputElement>(null);\\n\\n  return (\\n    <InputGroup>\\n      <InputGroupInput\\n        aria-label=\\\"Url\\\"\\n        defaultValue=\\\"https://coss.com\\\"\\n        ref={inputRef}\\n        type=\\\"text\\\"\\n      />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={\\n              <Button\\n                aria-label=\\\"Copy\\\"\\n                onClick={() => {\\n                  if (inputRef.current) {\\n                    copyToClipboard(inputRef.current.value);\\n                  }\\n                }}\\n                size=\\\"icon-xs\\\"\\n                variant=\\\"ghost\\\"\\n              />\\n            }\\n          >\\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\\n          </TooltipTrigger>\\n          <TooltipPopup>\\n            <p>Copy to clipboard</p>\\n          </TooltipPopup>\\n        </Tooltip>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-group-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-group-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Input group with button\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-group-9.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupInput,\\n} from \\\"@/registry/default/ui/input-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputGroup>\\n      <InputGroupInput placeholder=\\\"Type to search…\\\" type=\\\"search\\\" />\\n      <InputGroupAddon align=\\\"inline-end\\\">\\n        <Button size=\\\"xs\\\" variant=\\\"secondary\\\">\\n          Search\\n        </Button>\\n      </InputGroupAddon>\\n    </InputGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"input group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-otp-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-otp-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic OTP input\",\n  \"registryDependencies\": [\n    \"@coss/input-otp\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-otp-1.tsx\",\n      \"content\": \"import {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSlot,\\n} from \\\"@/registry/default/ui/input-otp\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputOTP aria-label=\\\"One-time password\\\" maxLength={6}>\\n      <InputOTPGroup>\\n        <InputOTPSlot index={0} />\\n        <InputOTPSlot index={1} />\\n        <InputOTPSlot index={2} />\\n        <InputOTPSlot index={3} />\\n        <InputOTPSlot index={4} />\\n        <InputOTPSlot index={5} />\\n      </InputOTPGroup>\\n    </InputOTP>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"input otp\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-otp-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-otp-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large OTP input\",\n  \"registryDependencies\": [\n    \"@coss/input-otp\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-otp-2.tsx\",\n      \"content\": \"import {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSlot,\\n} from \\\"@/registry/default/ui/input-otp\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputOTP aria-label=\\\"One-time password\\\" maxLength={4}>\\n      <InputOTPGroup size=\\\"lg\\\">\\n        <InputOTPSlot index={0} />\\n        <InputOTPSlot index={1} />\\n        <InputOTPSlot index={2} />\\n        <InputOTPSlot index={3} />\\n      </InputOTPGroup>\\n    </InputOTP>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"input otp\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-otp-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-otp-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"OTP input with separator\",\n  \"registryDependencies\": [\n    \"@coss/input-otp\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-otp-3.tsx\",\n      \"content\": \"import {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSeparator,\\n  InputOTPSlot,\\n} from \\\"@/registry/default/ui/input-otp\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputOTP aria-label=\\\"Verification code\\\" maxLength={6}>\\n      <InputOTPGroup>\\n        <InputOTPSlot index={0} />\\n        <InputOTPSlot index={1} />\\n        <InputOTPSlot index={2} />\\n      </InputOTPGroup>\\n      <InputOTPSeparator />\\n      <InputOTPGroup>\\n        <InputOTPSlot index={3} />\\n        <InputOTPSlot index={4} />\\n        <InputOTPSlot index={5} />\\n      </InputOTPGroup>\\n    </InputOTP>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"input otp\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-otp-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-otp-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"OTP input with label\",\n  \"registryDependencies\": [\n    \"@coss/input-otp\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-otp-4.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSlot,\\n} from \\\"@/registry/default/ui/input-otp\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Label htmlFor={id}>Verification code</Label>\\n      <InputOTP aria-label=\\\"Verification code\\\" id={id} maxLength={4}>\\n        <InputOTPGroup>\\n          <InputOTPSlot index={0} />\\n          <InputOTPSlot index={1} />\\n          <InputOTPSlot index={2} />\\n          <InputOTPSlot index={3} />\\n        </InputOTPGroup>\\n      </InputOTP>\\n      <p className=\\\"text-muted-foreground text-xs\\\">\\n        Enter the 4-digit code sent to your email.\\n      </p>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"input otp\",\n    \"input\",\n    \"label\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-otp-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-otp-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Digits-only OTP input\",\n  \"registryDependencies\": [\n    \"@coss/input-otp\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-otp-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { REGEXP_ONLY_DIGITS } from \\\"input-otp\\\";\\nimport {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSlot,\\n} from \\\"@/registry/default/ui/input-otp\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <InputOTP\\n      aria-label=\\\"Verification code\\\"\\n      inputMode=\\\"numeric\\\"\\n      maxLength={6}\\n      pattern={REGEXP_ONLY_DIGITS}\\n    >\\n      <InputOTPGroup>\\n        <InputOTPSlot index={0} />\\n        <InputOTPSlot index={1} />\\n        <InputOTPSlot index={2} />\\n        <InputOTPSlot index={3} />\\n        <InputOTPSlot index={4} />\\n        <InputOTPSlot index={5} />\\n      </InputOTPGroup>\\n    </InputOTP>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"input otp\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-otp-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-otp-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Invalid OTP input\",\n  \"registryDependencies\": [\n    \"@coss/input-otp\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-otp-6.tsx\",\n      \"content\": \"import {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSlot,\\n} from \\\"@/registry/default/ui/input-otp\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <InputOTP aria-invalid aria-label=\\\"Verification code\\\" maxLength={6}>\\n        <InputOTPGroup>\\n          <InputOTPSlot index={0} aria-invalid />\\n          <InputOTPSlot index={1} aria-invalid />\\n          <InputOTPSlot index={2} aria-invalid />\\n          <InputOTPSlot index={3} aria-invalid />\\n          <InputOTPSlot index={4} aria-invalid />\\n          <InputOTPSlot index={5} aria-invalid />\\n        </InputOTPGroup>\\n      </InputOTP>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"input otp\",\n    \"input\",\n    \"validation\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-input-otp-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-input-otp-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"OTP input with auto validation\",\n  \"registryDependencies\": [\n    \"@coss/input-otp\",\n    \"@coss/label\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-input-otp-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useId, useState } from \\\"react\\\";\\nimport {\\n  InputOTP,\\n  InputOTPGroup,\\n  InputOTPSlot,\\n} from \\\"@/registry/default/ui/input-otp\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  const [value, setValue] = useState(\\\"\\\");\\n  const [invalid, setInvalid] = useState(false);\\n  const valid = value.length === 6 && value === \\\"123456\\\";\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center gap-2\\\">\\n      <Label htmlFor={id}>Verification code</Label>\\n      <InputOTP\\n        aria-label=\\\"Verification code\\\"\\n        id={id}\\n        maxLength={6}\\n        onChange={(nextValue) => {\\n          setValue(nextValue);\\n          setInvalid(nextValue.length === 6 ? nextValue !== \\\"123456\\\" : false);\\n        }}\\n        value={value}\\n      >\\n        <InputOTPGroup>\\n          <InputOTPSlot aria-invalid={invalid || undefined} index={0} />\\n          <InputOTPSlot aria-invalid={invalid || undefined} index={1} />\\n          <InputOTPSlot aria-invalid={invalid || undefined} index={2} />\\n          <InputOTPSlot aria-invalid={invalid || undefined} index={3} />\\n          <InputOTPSlot aria-invalid={invalid || undefined} index={4} />\\n          <InputOTPSlot aria-invalid={invalid || undefined} index={5} />\\n        </InputOTPGroup>\\n      </InputOTP>\\n      {!valid && !invalid && (\\n        <p className=\\\"text-muted-foreground text-xs\\\">\\n          Enter `123456` to pass validation.\\n        </p>\\n      )}\\n      {invalid && (\\n        <p className=\\\"text-destructive-foreground text-xs\\\">\\n          Code must be 123456.\\n        </p>\\n      )}\\n      {valid && (\\n        <p className=\\\"text-success-foreground text-xs\\\">Code verified.</p>\\n      )}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"input otp\",\n    \"input\",\n    \"validation\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-kbd-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-kbd-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Keyboard shortcuts display\",\n  \"registryDependencies\": [\n    \"@coss/kbd\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-kbd-1.tsx\",\n      \"content\": \"import { Kbd, KbdGroup } from \\\"@/registry/default/ui/kbd\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-col gap-4\\\">\\n      <div>\\n        <p className=\\\"mb-2 text-muted-foreground text-sm\\\">Single keys:</p>\\n        <div className=\\\"flex gap-2\\\">\\n          <Kbd>K</Kbd>\\n          <Kbd>⌘</Kbd>\\n          <Kbd>⌃</Kbd>\\n          <Kbd>⇧</Kbd>\\n        </div>\\n      </div>\\n      <div>\\n        <p className=\\\"mb-2 text-muted-foreground text-sm\\\">Key combinations:</p>\\n        <div className=\\\"flex gap-2\\\">\\n          <KbdGroup>\\n            <Kbd>⌘</Kbd>\\n            <Kbd>K</Kbd>\\n          </KbdGroup>\\n          <KbdGroup>\\n            <Kbd>⌘</Kbd>\\n            <Kbd>Shift</Kbd>\\n            <Kbd>P</Kbd>\\n          </KbdGroup>\\n          <KbdGroup>\\n            <Kbd>Ctrl</Kbd>\\n            <Kbd>Alt</Kbd>\\n            <Kbd>Delete</Kbd>\\n          </KbdGroup>\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"kbd\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic menu\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-1.tsx\",\n      \"content\": \"import {\\n  PauseIcon,\\n  PlayIcon,\\n  SkipBackIcon,\\n  SkipForwardIcon,\\n  TrashIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuCheckboxItem,\\n  MenuGroup,\\n  MenuGroupLabel,\\n  MenuItem,\\n  MenuPopup,\\n  MenuRadioGroup,\\n  MenuRadioItem,\\n  MenuSeparator,\\n  MenuShortcut,\\n  MenuSub,\\n  MenuSubPopup,\\n  MenuSubTrigger,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger render={<Button variant=\\\"outline\\\" />}>Open menu</MenuTrigger>\\n      <MenuPopup>\\n        <MenuGroup>\\n          <MenuGroupLabel>Playback</MenuGroupLabel>\\n          <MenuItem>\\n            <PlayIcon aria-hidden=\\\"true\\\" />\\n            Play\\n            <MenuShortcut>⌘P</MenuShortcut>\\n          </MenuItem>\\n          <MenuItem disabled>\\n            <PauseIcon aria-hidden=\\\"true\\\" />\\n            Pause\\n            <MenuShortcut>⇧⌘P</MenuShortcut>\\n          </MenuItem>\\n          <MenuItem>\\n            <SkipBackIcon aria-hidden=\\\"true\\\" />\\n            Previous\\n            <MenuShortcut>⌘[</MenuShortcut>\\n          </MenuItem>\\n          <MenuItem>\\n            <SkipForwardIcon aria-hidden=\\\"true\\\" />\\n            Next\\n            <MenuShortcut>⌘]</MenuShortcut>\\n          </MenuItem>\\n        </MenuGroup>\\n        <MenuSeparator />\\n        <MenuCheckboxItem>Shuffle</MenuCheckboxItem>\\n        <MenuCheckboxItem>Repeat</MenuCheckboxItem>\\n        <MenuCheckboxItem disabled>Enhanced Audio</MenuCheckboxItem>\\n        <MenuSeparator />\\n        <MenuGroup>\\n          <MenuGroupLabel>Sort by</MenuGroupLabel>\\n          <MenuRadioGroup>\\n            <MenuRadioItem value=\\\"artist\\\">Artist</MenuRadioItem>\\n            <MenuRadioItem value=\\\"album\\\">Album</MenuRadioItem>\\n            <MenuRadioItem value=\\\"title\\\">Title</MenuRadioItem>\\n          </MenuRadioGroup>\\n        </MenuGroup>\\n        <MenuSeparator />\\n        <MenuCheckboxItem variant=\\\"switch\\\">Auto save</MenuCheckboxItem>\\n        <MenuSeparator />\\n        <MenuSub>\\n          <MenuSubTrigger>Add to Playlist</MenuSubTrigger>\\n          <MenuSubPopup>\\n            <MenuItem>Jazz</MenuItem>\\n            <MenuSub>\\n              <MenuSubTrigger>Rock</MenuSubTrigger>\\n              <MenuSubPopup>\\n                <MenuItem>Hard Rock</MenuItem>\\n                <MenuItem>Soft Rock</MenuItem>\\n                <MenuItem>Classic Rock</MenuItem>\\n                <MenuSeparator />\\n                <MenuItem>Metal</MenuItem>\\n                <MenuItem>Punk</MenuItem>\\n                <MenuItem>Grunge</MenuItem>\\n                <MenuItem>Alternative</MenuItem>\\n                <MenuItem>Indie</MenuItem>\\n                <MenuItem>Electronic</MenuItem>\\n              </MenuSubPopup>\\n            </MenuSub>\\n            <MenuItem>Pop</MenuItem>\\n          </MenuSubPopup>\\n        </MenuSub>\\n        <MenuSeparator />\\n        <MenuItem variant=\\\"destructive\\\">\\n          <TrashIcon aria-hidden=\\\"true\\\" />\\n          Delete\\n          <MenuShortcut>⌘⌫</MenuShortcut>\\n        </MenuItem>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Menu with hover\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-2.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger openOnHover render={<Button variant=\\\"outline\\\" />}>\\n        Hover me\\n      </MenuTrigger>\\n      <MenuPopup>\\n        <MenuItem>Item one</MenuItem>\\n        <MenuItem>Item two</MenuItem>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Menu with checkbox\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-3.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuCheckboxItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger render={<Button variant=\\\"outline\\\" />}>Open menu</MenuTrigger>\\n      <MenuPopup>\\n        <MenuCheckboxItem defaultChecked>Auto save</MenuCheckboxItem>\\n        <MenuCheckboxItem>Notifications</MenuCheckboxItem>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Menu with radio group\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-4.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuPopup,\\n  MenuRadioGroup,\\n  MenuRadioItem,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger render={<Button variant=\\\"outline\\\" />}>Open menu</MenuTrigger>\\n      <MenuPopup>\\n        <MenuRadioGroup defaultValue=\\\"system\\\">\\n          <MenuRadioItem value=\\\"light\\\">Light</MenuRadioItem>\\n          <MenuRadioItem value=\\\"dark\\\">Dark</MenuRadioItem>\\n          <MenuRadioItem value=\\\"system\\\">System</MenuRadioItem>\\n        </MenuRadioGroup>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Menu with link\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-5.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger render={<Button variant=\\\"outline\\\" />}>Open menu</MenuTrigger>\\n      <MenuPopup>\\n        <MenuItem render={<Link href=\\\"/docs\\\" />}>Docs</MenuItem>\\n        <MenuItem render={<Link href=\\\"/particles\\\" />}>Particles</MenuItem>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Menu with group labels\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-6.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuGroup,\\n  MenuGroupLabel,\\n  MenuItem,\\n  MenuPopup,\\n  MenuSeparator,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger render={<Button variant=\\\"outline\\\" />}>Open menu</MenuTrigger>\\n      <MenuPopup>\\n        <MenuGroup>\\n          <MenuGroupLabel>Account</MenuGroupLabel>\\n          <MenuItem>Profile</MenuItem>\\n          <MenuItem>Billing</MenuItem>\\n        </MenuGroup>\\n        <MenuSeparator />\\n        <MenuGroup>\\n          <MenuGroupLabel>Support</MenuGroupLabel>\\n          <MenuItem>Docs</MenuItem>\\n          <MenuItem>Contact</MenuItem>\\n        </MenuGroup>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Nested menu\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-7.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuSub,\\n  MenuSubPopup,\\n  MenuSubTrigger,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger render={<Button variant=\\\"outline\\\" />}>Open menu</MenuTrigger>\\n      <MenuPopup>\\n        <MenuItem>Item one</MenuItem>\\n        <MenuSub>\\n          <MenuSubTrigger>More</MenuSubTrigger>\\n          <MenuSubPopup>\\n            <MenuItem>Sub item A</MenuItem>\\n            <MenuItem>Sub item B</MenuItem>\\n          </MenuSubPopup>\\n        </MenuSub>\\n        <MenuItem>Item two</MenuItem>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Menu close on click\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-8.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger render={<Button variant=\\\"outline\\\" />}>Open menu</MenuTrigger>\\n      <MenuPopup>\\n        <MenuItem closeOnClick>Profile</MenuItem>\\n        <MenuItem closeOnClick>Settings</MenuItem>\\n        <MenuItem closeOnClick>Log out</MenuItem>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-menu-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-menu-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Menu with checkbox items as switches\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/menu\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-menu-9.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Menu,\\n  MenuCheckboxItem,\\n  MenuPopup,\\n  MenuTrigger,\\n} from \\\"@/registry/default/ui/menu\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Menu>\\n      <MenuTrigger render={<Button variant=\\\"outline\\\" />}>Open menu</MenuTrigger>\\n      <MenuPopup>\\n        <MenuCheckboxItem defaultChecked variant=\\\"switch\\\">\\n          Auto save\\n        </MenuCheckboxItem>\\n        <MenuCheckboxItem variant=\\\"switch\\\">Notifications</MenuCheckboxItem>\\n        <MenuCheckboxItem defaultChecked variant=\\\"switch\\\">\\n          Dark mode\\n        </MenuCheckboxItem>\\n      </MenuPopup>\\n    </Menu>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"dropdown\",\n    \"menu\",\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-meter-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-meter-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic meter\",\n  \"registryDependencies\": [\n    \"@coss/meter\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-meter-1.tsx\",\n      \"content\": \"import {\\n  Meter,\\n  MeterIndicator,\\n  MeterLabel,\\n  MeterTrack,\\n  MeterValue,\\n} from \\\"@/registry/default/ui/meter\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Meter value={75}>\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <MeterLabel>Storage usage</MeterLabel>\\n        <MeterValue />\\n      </div>\\n      <MeterTrack>\\n        <MeterIndicator />\\n      </MeterTrack>\\n    </Meter>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"meter\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-meter-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-meter-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Simple meter\",\n  \"registryDependencies\": [\n    \"@coss/meter\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-meter-2.tsx\",\n      \"content\": \"import { Meter } from \\\"@/registry/default/ui/meter\\\";\\n\\nexport default function Particle() {\\n  return <Meter value={50} />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"meter\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-meter-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-meter-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Meter with formatted value\",\n  \"registryDependencies\": [\n    \"@coss/meter\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-meter-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Meter,\\n  MeterIndicator,\\n  MeterLabel,\\n  MeterTrack,\\n  MeterValue,\\n} from \\\"@/registry/default/ui/meter\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Meter max={5} value={3}>\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <MeterLabel>Rating</MeterLabel>\\n        <MeterValue>{(_formatted, value) => `${value} / 5`}</MeterValue>\\n      </div>\\n      <MeterTrack>\\n        <MeterIndicator />\\n      </MeterTrack>\\n    </Meter>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"meter\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-meter-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-meter-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Meter with range\",\n  \"registryDependencies\": [\n    \"@coss/meter\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-meter-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Meter,\\n  MeterIndicator,\\n  MeterLabel,\\n  MeterTrack,\\n  MeterValue,\\n} from \\\"@/registry/default/ui/meter\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Meter max={1000} min={500} value={700}>\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <MeterLabel>Bandwidth (Mbps)</MeterLabel>\\n        <MeterValue>{(_formatted, value) => value}</MeterValue>\\n      </div>\\n      <MeterTrack>\\n        <MeterIndicator />\\n      </MeterTrack>\\n    </Meter>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"meter\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic number field\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-1.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <NumberField defaultValue={0}>\\n      <NumberFieldGroup>\\n        <NumberFieldDecrement />\\n        <NumberFieldInput />\\n        <NumberFieldIncrement />\\n      </NumberFieldGroup>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Number field in form\",\n  \"dependencies\": [\n    \"zod\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-10.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { z } from \\\"zod\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n  NumberFieldScrubArea,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nconst schema = z.object({\\n  quantity: z.coerce\\n    .number({ message: \\\"Please enter a quantity.\\\" })\\n    .min(1, { message: \\\"Quantity must be at least 1.\\\" })\\n    .max(100, { message: \\\"Maximum quantity is 100.\\\" }),\\n});\\n\\ntype Errors = Record<string, string | string[]>;\\n\\nasync function submitForm(event: FormEvent<HTMLFormElement>) {\\n  event.preventDefault();\\n\\n  const formData = new FormData(event.currentTarget);\\n  const result = schema.safeParse(Object.fromEntries(formData));\\n\\n  if (!result.success) {\\n    const { fieldErrors } = z.flattenError(result.error);\\n    return { errors: fieldErrors as Errors };\\n  }\\n\\n  return {\\n    data: result.data,\\n    errors: {} as Errors,\\n  };\\n}\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n\\n  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {\\n    setLoading(true);\\n    const response = await submitForm(event);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    if (Object.keys(response.errors).length === 0) {\\n      alert(`Quantity: ${response.data?.quantity}`);\\n    }\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-64\\\" onSubmit={onSubmit}>\\n      <Field name=\\\"quantity\\\">\\n        <NumberField defaultValue={1} max={100} min={1}>\\n          <NumberFieldScrubArea label=\\\"Quantity\\\" />\\n          <NumberFieldGroup>\\n            <NumberFieldDecrement />\\n            <NumberFieldInput />\\n            <NumberFieldIncrement />\\n          </NumberFieldGroup>\\n        </NumberField>\\n      </Field>\\n\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\",\n    \"form\",\n    \"field\",\n    \"zod\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pill-shaped number field\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-11.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <NumberField defaultValue={0}>\\n      <NumberFieldGroup className=\\\"[--radius-lg:9999px] [--radius:9999px]\\\">\\n        <NumberFieldDecrement />\\n        <NumberFieldInput />\\n        <NumberFieldIncrement />\\n      </NumberFieldGroup>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small number field\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-2.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <NumberField defaultValue={0} size=\\\"sm\\\">\\n      <NumberFieldGroup>\\n        <NumberFieldDecrement />\\n        <NumberFieldInput />\\n        <NumberFieldIncrement />\\n      </NumberFieldGroup>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large number field\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-3.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <NumberField defaultValue={0} size=\\\"lg\\\">\\n      <NumberFieldGroup>\\n        <NumberFieldDecrement />\\n        <NumberFieldInput />\\n        <NumberFieldIncrement />\\n      </NumberFieldGroup>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled number field\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-4.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <NumberField defaultValue={42} disabled>\\n      <NumberFieldGroup>\\n        <NumberFieldDecrement />\\n        <NumberFieldInput />\\n        <NumberFieldIncrement />\\n      </NumberFieldGroup>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Number field with label\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-5.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col items-start gap-2\\\">\\n      <Label htmlFor={id}>Quantity</Label>\\n      <NumberField defaultValue={0} id={id}>\\n        <NumberFieldGroup>\\n          <NumberFieldDecrement />\\n          <NumberFieldInput />\\n          <NumberFieldIncrement />\\n        </NumberFieldGroup>\\n      </NumberField>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Number field with scrub\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-6.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n  NumberFieldScrubArea,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <NumberField defaultValue={0}>\\n      <NumberFieldScrubArea label=\\\"Quantity\\\" />\\n      <NumberFieldGroup>\\n        <NumberFieldDecrement />\\n        <NumberFieldInput />\\n        <NumberFieldIncrement />\\n      </NumberFieldGroup>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Number field with range\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-7.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <NumberField defaultValue={5} max={10} min={0}>\\n      <NumberFieldGroup>\\n        <NumberFieldDecrement />\\n        <NumberFieldInput />\\n        <NumberFieldIncrement />\\n      </NumberFieldGroup>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Number field with formatted value\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-8.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <NumberField\\n      defaultValue={0}\\n      format={{ currency: \\\"USD\\\", style: \\\"currency\\\" }}\\n    >\\n      <NumberFieldGroup>\\n        <NumberFieldDecrement />\\n        <NumberFieldInput />\\n        <NumberFieldIncrement />\\n      </NumberFieldGroup>\\n    </NumberField>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-number-field-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-number-field-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Number field with step\",\n  \"registryDependencies\": [\n    \"@coss/number-field\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-number-field-9.tsx\",\n      \"content\": \"import {\\n  NumberField,\\n  NumberFieldDecrement,\\n  NumberFieldGroup,\\n  NumberFieldIncrement,\\n  NumberFieldInput,\\n  NumberFieldScrubArea,\\n} from \\\"@/registry/default/ui/number-field\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-col gap-6\\\">\\n      <NumberField defaultValue={0} step={10}>\\n        <NumberFieldScrubArea label=\\\"Step 10\\\" />\\n        <NumberFieldGroup>\\n          <NumberFieldDecrement />\\n          <NumberFieldInput />\\n          <NumberFieldIncrement />\\n        </NumberFieldGroup>\\n      </NumberField>\\n      <NumberField defaultValue={0} step={0.1}>\\n        <NumberFieldScrubArea label=\\\"Step 0.1\\\" />\\n        <NumberFieldGroup>\\n          <NumberFieldDecrement />\\n          <NumberFieldInput />\\n          <NumberFieldIncrement />\\n        </NumberFieldGroup>\\n      </NumberField>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"number field\",\n    \"input\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-pagination-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-pagination-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pagination example\",\n  \"registryDependencies\": [\n    \"@coss/pagination\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-pagination-1.tsx\",\n      \"content\": \"import {\\n  Pagination,\\n  PaginationContent,\\n  PaginationEllipsis,\\n  PaginationItem,\\n  PaginationLink,\\n  PaginationNext,\\n  PaginationPrevious,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Pagination>\\n      <PaginationContent>\\n        <PaginationItem>\\n          <PaginationPrevious href=\\\"#\\\" />\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationLink href=\\\"#\\\">1</PaginationLink>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationLink href=\\\"#\\\" isActive>\\n            2\\n          </PaginationLink>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationLink href=\\\"#\\\">3</PaginationLink>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationEllipsis />\\n        </PaginationItem>\\n        <PaginationItem>\\n          <PaginationNext href=\\\"#\\\" />\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"pagination\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-pagination-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-pagination-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pagination with previous and next buttons only\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/pagination\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-pagination-2.tsx\",\n      \"content\": \"import Link from \\\"next/link\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n} from \\\"@/registry/default/ui/pagination\\\";\\n\\ntype PaginationProps = {\\n  currentPage: number;\\n  totalPages: number;\\n};\\n\\nexport default function Particle({ currentPage, totalPages }: PaginationProps) {\\n  return (\\n    <Pagination>\\n      <PaginationContent className=\\\"w-full justify-between gap-2\\\">\\n        <PaginationItem>\\n          <Button\\n            disabled={currentPage === 1}\\n            render={\\n              currentPage === 1 ? undefined : (\\n                <Link href={`#/page/${currentPage - 1}`} />\\n              )\\n            }\\n            variant=\\\"outline\\\"\\n          >\\n            Previous\\n          </Button>\\n        </PaginationItem>\\n        <PaginationItem>\\n          <Button\\n            disabled={currentPage === totalPages}\\n            render={\\n              currentPage === totalPages ? undefined : (\\n                <Link href={`#/page/${currentPage + 1}`} />\\n              )\\n            }\\n            variant=\\\"outline\\\"\\n          >\\n            Next\\n          </Button>\\n        </PaginationItem>\\n      </PaginationContent>\\n    </Pagination>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"pagination\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-pagination-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-pagination-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pagination with select, and previous and next buttons\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/pagination\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-pagination-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n  PaginationNext,\\n  PaginationPrevious,\\n} from \\\"@/registry/default/ui/pagination\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\ntype PaginationProps = {\\n  currentPage?: number;\\n  totalPages?: number;\\n  totalResults: number;\\n  resultsPerPage?: number;\\n};\\n\\nexport default function Particle({\\n  currentPage: initialPage = 1,\\n  totalPages = 10,\\n  totalResults,\\n  resultsPerPage = 10,\\n}: PaginationProps) {\\n  const [currentPage, setCurrentPage] = useState(initialPage);\\n  const resultRanges = Array.from({ length: totalPages }, (_, i) => {\\n    const start = i * resultsPerPage + 1;\\n    const end = Math.min((i + 1) * resultsPerPage, totalResults);\\n    const pageNum = i + 1;\\n    return { label: `${start}-${end}`, value: pageNum };\\n  });\\n\\n  return (\\n    <div className=\\\"flex items-center justify-between gap-2\\\">\\n      {/* Results range selector */}\\n      <div className=\\\"flex items-center gap-2 whitespace-nowrap\\\">\\n        <p className=\\\"text-muted-foreground text-sm\\\">Viewing</p>\\n        <Select\\n          items={resultRanges}\\n          onValueChange={(value) => setCurrentPage(value as number)}\\n          value={currentPage}\\n        >\\n          <SelectTrigger\\n            aria-label=\\\"Select result range\\\"\\n            className=\\\"w-fit min-w-none\\\"\\n            size=\\\"sm\\\"\\n          >\\n            <SelectValue />\\n          </SelectTrigger>\\n          <SelectPopup>\\n            {resultRanges.map(({ label, value }) => (\\n              <SelectItem key={value} value={value}>\\n                {label}\\n              </SelectItem>\\n            ))}\\n          </SelectPopup>\\n        </Select>\\n        <p className=\\\"text-muted-foreground text-sm\\\">\\n          of{\\\" \\\"}\\n          <strong className=\\\"font-medium text-foreground\\\">\\n            {totalResults}\\n          </strong>{\\\" \\\"}\\n          results\\n        </p>\\n      </div>\\n\\n      {/* Pagination */}\\n      <div>\\n        <Pagination>\\n          <PaginationContent className=\\\"w-full justify-between gap-2\\\">\\n            <PaginationItem>\\n              <PaginationPrevious\\n                className=\\\"sm:*:[svg]:hidden\\\"\\n                render={\\n                  <Button\\n                    disabled={currentPage === 1 ? true : undefined}\\n                    onClick={() =>\\n                      currentPage > 1 && setCurrentPage(currentPage - 1)\\n                    }\\n                    size=\\\"sm\\\"\\n                    variant=\\\"outline\\\"\\n                  />\\n                }\\n              />\\n            </PaginationItem>\\n            <PaginationItem>\\n              <PaginationNext\\n                className=\\\"sm:*:[svg]:hidden\\\"\\n                render={\\n                  <Button\\n                    disabled={currentPage === totalPages ? true : undefined}\\n                    onClick={() =>\\n                      currentPage < totalPages &&\\n                      setCurrentPage(currentPage + 1)\\n                    }\\n                    size=\\\"sm\\\"\\n                    variant=\\\"outline\\\"\\n                  />\\n                }\\n              />\\n            </PaginationItem>\\n          </PaginationContent>\\n        </Pagination>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full\"\n  },\n  \"categories\": [\n    \"pagination\",\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-popover-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-popover-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Popover with a form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/popover\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-popover-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport {\\n  Popover,\\n  PopoverDescription,\\n  PopoverPopup,\\n  PopoverTitle,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Popover>\\n      <PopoverTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open Popover\\n      </PopoverTrigger>\\n      <PopoverPopup className=\\\"w-80\\\">\\n        <div className=\\\"mb-4\\\">\\n          <PopoverTitle className=\\\"text-base\\\">Send us feedback</PopoverTitle>\\n          <PopoverDescription>\\n            Let us know how we can improve.\\n          </PopoverDescription>\\n        </div>\\n        <Form>\\n          <Field>\\n            <Textarea\\n              aria-label=\\\"Send feedback\\\"\\n              id=\\\"feedback\\\"\\n              placeholder=\\\"How can we improve?\\\"\\n            />\\n          </Field>\\n          <Button type=\\\"submit\\\">Send feedback</Button>\\n        </Form>\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"field\",\n    \"form\",\n    \"popover\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-popover-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-popover-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Popover with close button\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-popover-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverClose,\\n  PopoverDescription,\\n  PopoverPopup,\\n  PopoverTitle,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Popover>\\n      <PopoverTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open Popover\\n      </PopoverTrigger>\\n      <PopoverPopup className=\\\"w-80\\\">\\n        <PopoverClose\\n          aria-label=\\\"Close\\\"\\n          className=\\\"absolute end-2 top-2\\\"\\n          render={<Button size=\\\"icon\\\" variant=\\\"ghost\\\" />}\\n        >\\n          <XIcon />\\n        </PopoverClose>\\n        <div className=\\\"mb-2\\\">\\n          <PopoverTitle className=\\\"text-base\\\">Notifications</PopoverTitle>\\n          <PopoverDescription>\\n            You are all caught up. Good job!\\n          </PopoverDescription>\\n        </div>\\n        <PopoverClose render={<Button variant=\\\"outline\\\" />}>Close</PopoverClose>\\n      </PopoverPopup>\\n    </Popover>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"button\",\n    \"popover\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-popover-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-popover-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Animated popovers\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/avatar\",\n    \"@coss/button\",\n    \"@coss/popover\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-popover-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BellIcon, UserIcon } from \\\"lucide-react\\\";\\nimport type { ComponentType } from \\\"react\\\";\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Popover,\\n  PopoverCreateHandle,\\n  PopoverDescription,\\n  PopoverPopup,\\n  PopoverTitle,\\n  PopoverTrigger,\\n} from \\\"@/registry/default/ui/popover\\\";\\n\\nconst popoverHandle = PopoverCreateHandle<ComponentType>();\\n\\nconst NotificationsContent = () => {\\n  return (\\n    <>\\n      <PopoverTitle className=\\\"text-base\\\">Notifications</PopoverTitle>\\n      <PopoverDescription>\\n        You have no new notifications at this time.\\n      </PopoverDescription>\\n    </>\\n  );\\n};\\n\\nconst ProfileContent = () => {\\n  return (\\n    <div className=\\\"w-48\\\">\\n      <div className=\\\"flex items-center gap-3\\\">\\n        <Avatar>\\n          <AvatarImage\\n            alt=\\\"Mark Andersson\\\"\\n            src=\\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\\\"\\n          />\\n          <AvatarFallback>MA</AvatarFallback>\\n        </Avatar>\\n        <div className=\\\"min-w-0 flex-1\\\">\\n          <h4 className=\\\"line-clamp-1 font-medium text-sm\\\">Mark Andersson</h4>\\n          <div className=\\\"flex items-center gap-3 text-muted-foreground text-xs\\\">\\n            Product Designer\\n          </div>\\n        </div>\\n      </div>\\n      <Button className=\\\"mt-3 w-full\\\" size=\\\"sm\\\" variant=\\\"outline\\\">\\n        Log out\\n      </Button>\\n    </div>\\n  );\\n};\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex gap-2\\\">\\n      <PopoverTrigger\\n        handle={popoverHandle}\\n        payload={NotificationsContent}\\n        render={\\n          <Button aria-label=\\\"Notifications\\\" size=\\\"icon\\\" variant=\\\"outline\\\" />\\n        }\\n      >\\n        <BellIcon aria-hidden=\\\"true\\\" />\\n      </PopoverTrigger>\\n      <PopoverTrigger\\n        handle={popoverHandle}\\n        payload={ProfileContent}\\n        render={<Button aria-label=\\\"Profile\\\" size=\\\"icon\\\" variant=\\\"outline\\\" />}\\n      >\\n        <UserIcon aria-hidden=\\\"true\\\" />\\n      </PopoverTrigger>\\n      <Popover handle={popoverHandle}>\\n        {({ payload: Payload }) => (\\n          <PopoverPopup className=\\\"min-w-none\\\">\\n            {Payload !== undefined && <Payload />}\\n          </PopoverPopup>\\n        )}\\n      </Popover>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"avatar\",\n    \"button\",\n    \"popover\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-preview-card-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-preview-card-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Preview card with popup\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/preview-card\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-preview-card-1.tsx\",\n      \"content\": \"import { CornerUpLeftIcon, StarIcon } from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  PreviewCard,\\n  PreviewCardPopup,\\n  PreviewCardTrigger,\\n} from \\\"@/registry/default/ui/preview-card\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <PreviewCard>\\n      <PreviewCardTrigger render={<Button variant=\\\"ghost\\\" />}>\\n        coss.com/ui\\n      </PreviewCardTrigger>\\n      <PreviewCardPopup>\\n        <div className=\\\"flex flex-col gap-4\\\">\\n          <div className=\\\"flex flex-col gap-1\\\">\\n            <h4 className=\\\"font-medium text-sm\\\">coss.com/ui</h4>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              Beautifully designed components that you can copy and paste into\\n              your apps.\\n            </p>\\n          </div>\\n          <div className=\\\"flex items-center gap-4 text-muted-foreground text-xs\\\">\\n            <div className=\\\"flex items-center gap-1\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-2 rounded-full bg-blue-500\\\"\\n              />\\n              <span>TypeScript</span>\\n            </div>\\n            <div className=\\\"flex items-center gap-1\\\">\\n              <StarIcon className=\\\"size-3\\\" />\\n              <span>58.2k</span>\\n            </div>\\n            <div className=\\\"flex items-center gap-1\\\">\\n              <CornerUpLeftIcon className=\\\"size-3\\\" />\\n              <span>5.1k</span>\\n            </div>\\n          </div>\\n        </div>\\n      </PreviewCardPopup>\\n    </PreviewCard>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"preview card\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-progress-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-progress-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic progress bar\",\n  \"registryDependencies\": [\n    \"@coss/progress\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-progress-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useEffect, useState } from \\\"react\\\";\\nimport { Progress } from \\\"@/registry/default/ui/progress\\\";\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState(20);\\n\\n  useEffect(() => {\\n    const interval = setInterval(() => {\\n      setValue((current) =>\\n        Math.min(100, Math.round(current + Math.random() * 25)),\\n      );\\n    }, 1000);\\n    return () => clearInterval(interval);\\n  }, []);\\n\\n  return <Progress value={value} />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"progress\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-progress-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-progress-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Progress with label and value\",\n  \"registryDependencies\": [\n    \"@coss/progress\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-progress-2.tsx\",\n      \"content\": \"import {\\n  Progress,\\n  ProgressIndicator,\\n  ProgressLabel,\\n  ProgressTrack,\\n  ProgressValue,\\n} from \\\"@/registry/default/ui/progress\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Progress value={60}>\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <ProgressLabel>Export data</ProgressLabel>\\n        <ProgressValue />\\n      </div>\\n      <ProgressTrack>\\n        <ProgressIndicator />\\n      </ProgressTrack>\\n    </Progress>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"progress\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-progress-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-progress-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Progress with formatted value\",\n  \"registryDependencies\": [\n    \"@coss/progress\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-progress-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Progress,\\n  ProgressIndicator,\\n  ProgressLabel,\\n  ProgressTrack,\\n  ProgressValue,\\n} from \\\"@/registry/default/ui/progress\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Progress max={512} value={502}>\\n      <div className=\\\"flex items-center justify-between gap-2\\\">\\n        <ProgressLabel>Upload</ProgressLabel>\\n        <ProgressValue>{(_formatted, value) => `${value} / 512`}</ProgressValue>\\n      </div>\\n      <ProgressTrack>\\n        <ProgressIndicator />\\n      </ProgressTrack>\\n    </Progress>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"progress\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-radio-group-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-radio-group-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic radio group\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/radio-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-radio-group-1.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Radio, RadioGroup } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <RadioGroup defaultValue=\\\"next\\\">\\n      <Label>\\n        <Radio value=\\\"next\\\" /> Next.js\\n      </Label>\\n      <Label>\\n        <Radio value=\\\"vite\\\" /> Vite\\n      </Label>\\n      <Label>\\n        <Radio value=\\\"astro\\\" /> Astro\\n      </Label>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"radio group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-radio-group-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-radio-group-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled radio group\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/radio-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-radio-group-2.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Radio, RadioGroup } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <RadioGroup defaultValue=\\\"next\\\">\\n      <Label>\\n        <Radio value=\\\"next\\\" /> Next.js\\n      </Label>\\n      <Label>\\n        <Radio disabled value=\\\"vite\\\" /> Vite (disabled)\\n      </Label>\\n      <Label>\\n        <Radio value=\\\"astro\\\" /> Astro\\n      </Label>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"radio group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-radio-group-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-radio-group-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Radio group with description\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/radio-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-radio-group-3.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Radio, RadioGroup } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <RadioGroup defaultValue=\\\"r-1\\\">\\n      <div className=\\\"flex items-start gap-2\\\">\\n        <Radio id=\\\"r-1\\\" value=\\\"r-1\\\" />\\n        <div className=\\\"flex flex-col gap-1\\\">\\n          <Label htmlFor=\\\"r-1\\\">Free</Label>\\n          <p className=\\\"text-muted-foreground text-xs\\\">\\n            Basic features for personal use.\\n          </p>\\n        </div>\\n      </div>\\n      <div className=\\\"flex items-start gap-2\\\">\\n        <Radio id=\\\"r-2\\\" value=\\\"r-2\\\" />\\n        <div className=\\\"flex flex-col gap-1\\\">\\n          <Label htmlFor=\\\"r-2\\\">Pro</Label>\\n          <p className=\\\"text-muted-foreground text-xs\\\">\\n            Advanced tools for professionals.\\n          </p>\\n        </div>\\n      </div>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"radio group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-radio-group-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-radio-group-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Radio group card\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/radio-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-radio-group-4.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Radio, RadioGroup } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <RadioGroup defaultValue=\\\"r-1\\\">\\n      <Label className=\\\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\\\">\\n        <Radio value=\\\"r-1\\\" />\\n        <div className=\\\"flex flex-col gap-1\\\">\\n          <p>Email</p>\\n          <p className=\\\"text-muted-foreground text-xs\\\">\\n            Receive notifications via email.\\n          </p>\\n        </div>\\n      </Label>\\n      <Label className=\\\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\\\">\\n        <Radio value=\\\"r-2\\\" />\\n        <div className=\\\"flex flex-col gap-1\\\">\\n          <p>SMS</p>\\n          <p className=\\\"text-muted-foreground text-xs\\\">\\n            Receive notifications via text message.\\n          </p>\\n        </div>\\n      </Label>\\n    </RadioGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"radio group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-radio-group-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-radio-group-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Radio group in form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/fieldset\",\n    \"@coss/form\",\n    \"@coss/radio-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-radio-group-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldItem, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Fieldset, FieldsetLegend } from \\\"@/registry/default/ui/fieldset\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Radio, RadioGroup } from \\\"@/registry/default/ui/radio-group\\\";\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    alert(`Selected: ${formData.get(\\\"frameworks\\\")}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-[160px]\\\" onSubmit={onSubmit}>\\n      <Field\\n        className=\\\"gap-4\\\"\\n        name=\\\"frameworks\\\"\\n        render={(props) => <Fieldset {...props} />}\\n      >\\n        <FieldsetLegend className=\\\"font-medium text-sm\\\">\\n          Frameworks\\n        </FieldsetLegend>\\n        <RadioGroup defaultValue=\\\"next\\\">\\n          <FieldItem>\\n            <FieldLabel>\\n              <Radio value=\\\"next\\\" /> Next.js\\n            </FieldLabel>\\n          </FieldItem>\\n          <FieldItem>\\n            <FieldLabel>\\n              <Radio value=\\\"vite\\\" /> Vite\\n            </FieldLabel>\\n          </FieldItem>\\n          <FieldItem>\\n            <FieldLabel>\\n              <Radio value=\\\"astro\\\" /> Astro\\n            </FieldLabel>\\n          </FieldItem>\\n        </RadioGroup>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"radio group\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-scroll-area-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-scroll-area-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic scroll area\",\n  \"registryDependencies\": [\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-scroll-area-1.tsx\",\n      \"content\": \"import { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nconst tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);\\n\\nexport default function Particle() {\\n  return (\\n    <ScrollArea className=\\\"h-64 rounded-lg border\\\">\\n      <div className=\\\"px-4 py-2\\\">\\n        <h4 className=\\\"mb-2 font-medium text-sm\\\">Tags</h4>\\n        <div className=\\\"flex flex-col gap-1\\\">\\n          {tags.map((tag) => (\\n            <div className=\\\"text-sm\\\" key={tag}>\\n              {tag}\\n            </div>\\n          ))}\\n        </div>\\n      </div>\\n    </ScrollArea>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"scroll area\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-scroll-area-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-scroll-area-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Horizontal scroll area\",\n  \"registryDependencies\": [\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-scroll-area-2.tsx\",\n      \"content\": \"import { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ScrollArea className=\\\"max-w-96 rounded-lg border\\\">\\n      <div className=\\\"flex w-max gap-4 p-4\\\">\\n        {Array.from({ length: 20 }).map((_, i) => (\\n          <div\\n            className=\\\"flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted\\\"\\n            key={String(i)}\\n          >\\n            <span className=\\\"font-medium text-sm\\\">Item {i + 1}</span>\\n          </div>\\n        ))}\\n      </div>\\n    </ScrollArea>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"scroll area\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-scroll-area-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-scroll-area-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Scroll area with both directions\",\n  \"registryDependencies\": [\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-scroll-area-3.tsx\",\n      \"content\": \"import { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ScrollArea className=\\\"h-80 max-w-80 rounded-lg border\\\">\\n      <p className=\\\"min-w-100 p-4\\\">\\n        Just as suddenly as it had begun, the sensation stopped, leaving Alice\\n        feeling slightly disoriented. She looked around and realized that the\\n        room hadn't changed at all - it was she who had grown smaller, shrinking\\n        down to a fraction of her previous size. Alice felt herself growing\\n        larger and larger, filling up the entire room until she feared she might\\n        burst. The sensation was both thrilling and terrifying, as if she were\\n        expanding beyond the confines of her own body. She wondered if this was\\n        what it felt like to be a balloon, swelling with air until it could hold\\n        no more. Alice peered into the mirror, her reflection staring back at\\n        her with an air of mischief. She wondered what it would be like to step\\n        through the glass and into the world beyond, where everything seemed to\\n        be topsy-turvy and nothing was quite as it seemed. It's no use going\\n        back to yesterday, because I was a different person then, reflected\\n        Alice.\\n      </p>\\n    </ScrollArea>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"scroll area\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-scroll-area-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-scroll-area-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Scroll area with fading edges\",\n  \"registryDependencies\": [\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-scroll-area-4.tsx\",\n      \"content\": \"import { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nconst tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);\\n\\nexport default function Particle() {\\n  return (\\n    <ScrollArea className=\\\"h-64 rounded-lg border\\\" scrollFade>\\n      <div className=\\\"px-4 py-2\\\">\\n        <h4 className=\\\"mb-2 font-medium text-sm\\\">Tags</h4>\\n        <div className=\\\"flex flex-col gap-1\\\">\\n          {tags.map((tag) => (\\n            <div className=\\\"text-sm\\\" key={tag}>\\n              {tag}\\n            </div>\\n          ))}\\n        </div>\\n      </div>\\n    </ScrollArea>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"scroll area\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-scroll-area-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-scroll-area-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Horizontal scroll area with scrollbar gutter\",\n  \"registryDependencies\": [\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-scroll-area-5.tsx\",\n      \"content\": \"import { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ScrollArea className=\\\"max-w-96 rounded-lg border\\\" scrollbarGutter>\\n      <div className=\\\"flex w-max gap-4 p-4\\\">\\n        {Array.from({ length: 20 }).map((_, i) => (\\n          <div\\n            className=\\\"flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted\\\"\\n            key={String(i)}\\n          >\\n            <span className=\\\"font-medium text-sm\\\">Item {i + 1}</span>\\n          </div>\\n        ))}\\n      </div>\\n    </ScrollArea>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"scroll area\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic select\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-1.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Select framework\\\", value: null },\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select framework\\\" defaultValue=\\\"next\\\" items={items}>\\n      <SelectTrigger>\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with object values\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-10.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { description: \\\"npx create-next-app\\\", label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { description: \\\"npm create vite@latest\\\", label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { description: \\\"npm create astro@latest\\\", label: \\\"Astro\\\", value: \\\"astro\\\" },\\n  { description: \\\"npx create-remix\\\", label: \\\"Remix\\\", value: \\\"remix\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select framework with command\\\"\\n      defaultValue={items[0]}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger className=\\\"py-1\\\">\\n        <SelectValue>\\n          {(item) => (\\n            <span className=\\\"flex flex-col\\\">\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n              <span className=\\\"truncate text-muted-foreground text-xs\\\">\\n                {item.description}\\n              </span>\\n            </span>\\n          )}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map((item) => (\\n          <SelectItem key={item.value} value={item}>\\n            <span className=\\\"flex flex-col\\\">\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n              <span className=\\\"truncate text-muted-foreground text-xs\\\">\\n                {item.description}\\n              </span>\\n            </span>\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select in form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-11.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Field,\\n  FieldDescription,\\n  FieldError,\\n  FieldLabel,\\n} from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Select a framework\\\", value: null },\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    alert(`Framework: ${formData.get(\\\"framework\\\") || \\\"\\\"}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-64\\\" onSubmit={onSubmit}>\\n      <Field>\\n        <FieldLabel>Framework</FieldLabel>\\n        <Select\\n          aria-label=\\\"Select framework\\\"\\n          items={items}\\n          name=\\\"framework\\\"\\n          required\\n        >\\n          <SelectTrigger>\\n            <SelectValue />\\n          </SelectTrigger>\\n          <SelectPopup>\\n            {items.map(({ label, value }) => (\\n              <SelectItem key={value} value={value}>\\n                {label}\\n              </SelectItem>\\n            ))}\\n          </SelectPopup>\\n        </Select>\\n        <FieldDescription>Pick your favorite.</FieldDescription>\\n        <FieldError>Please select a value.</FieldError>\\n      </Field>\\n\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with disabled items\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-12.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { disabled: false, label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { disabled: false, label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { disabled: true, label: \\\"Astro (coming soon)\\\", value: \\\"astro\\\" },\\n  { disabled: true, label: \\\"Remix (coming soon)\\\", value: \\\"remix\\\" },\\n  { disabled: false, label: \\\"Nuxt\\\", value: \\\"nuxt\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select framework\\\" defaultValue=\\\"next\\\" items={items}>\\n      <SelectTrigger>\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map(({ disabled, label, value }) => (\\n          <SelectItem disabled={disabled} key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\",\n    \"disabled\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Timezone select\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-13.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useMemo } from \\\"react\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nexport default function Particle() {\\n  const timezones = Intl.supportedValuesOf(\\\"timeZone\\\");\\n\\n  const formattedTimezones = useMemo(() => {\\n    return timezones\\n      .map((timezone) => {\\n        const formatter = new Intl.DateTimeFormat(\\\"en\\\", {\\n          timeZone: timezone,\\n          timeZoneName: \\\"shortOffset\\\",\\n        });\\n        const parts = formatter.formatToParts(new Date());\\n        const offset =\\n          parts.find((part) => part.type === \\\"timeZoneName\\\")?.value || \\\"\\\";\\n        const modifiedOffset = offset === \\\"GMT\\\" ? \\\"GMT+0\\\" : offset;\\n\\n        const offsetMatch = offset.match(/GMT([+-]?)(\\\\d+)(?::(\\\\d+))?/);\\n        const sign = offsetMatch?.[1] === \\\"-\\\" ? -1 : 1;\\n        const hours = Number.parseInt(offsetMatch?.[2] || \\\"0\\\", 10);\\n        const minutes = Number.parseInt(offsetMatch?.[3] || \\\"0\\\", 10);\\n        const totalMinutes = sign * (hours * 60 + minutes);\\n\\n        return {\\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \\\" \\\")}`,\\n          numericOffset: totalMinutes,\\n          value: timezone,\\n        };\\n      })\\n      .sort((a, b) => a.numericOffset - b.numericOffset);\\n  }, [timezones]);\\n\\n  return (\\n    <Select\\n      aria-label=\\\"Select timezone\\\"\\n      defaultValue={formattedTimezones.find(\\n        (tz) => tz.value === \\\"Europe/London\\\",\\n      )}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger>\\n        <SelectValue>\\n          {(item) => <span className=\\\"truncate\\\">{item.label}</span>}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {formattedTimezones.map((item) => (\\n          <SelectItem key={item.value} value={item}>\\n            {item.label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\",\n    \"time\",\n    \"timezone\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Status select with colored dot\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-14.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { color: \\\"bg-emerald-500\\\", label: \\\"Completed\\\", value: \\\"completed\\\" },\\n  { color: \\\"bg-blue-500\\\", label: \\\"In Progress\\\", value: \\\"in-progress\\\" },\\n  { color: \\\"bg-amber-500\\\", label: \\\"Pending\\\", value: \\\"pending\\\" },\\n  { color: \\\"bg-gray-500\\\", label: \\\"Cancelled\\\", value: \\\"cancelled\\\" },\\n  { color: \\\"bg-red-500\\\", label: \\\"Failed\\\", value: \\\"failed\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select status\\\"\\n      defaultValue={items[0]}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger>\\n        <SelectValue>\\n          {(item) => (\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className={`size-2 rounded-full ${item.color}`}\\n              />\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n            </span>\\n          )}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map((item) => (\\n          <SelectItem key={item.value} value={item}>\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className={`size-2 rounded-full ${item.color}`}\\n              />\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n            </span>\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Pill-shaped select trigger\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-15.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Active\\\", value: \\\"active\\\" },\\n  { label: \\\"Inactive\\\", value: \\\"inactive\\\" },\\n  { label: \\\"Archived\\\", value: \\\"archived\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select filter\\\" defaultValue=\\\"active\\\" items={items}>\\n      <SelectTrigger className=\\\"[--radius-lg:9999px] [--radius:9999px]\\\">\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with left text label\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-16.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"JavaScript\\\", value: \\\"javascript\\\" },\\n  { label: \\\"TypeScript\\\", value: \\\"typescript\\\" },\\n  { label: \\\"Python\\\", value: \\\"python\\\" },\\n  { label: \\\"Go\\\", value: \\\"go\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select language\\\"\\n      defaultValue={items[0]}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger>\\n        <SelectValue>\\n          {(item) => (\\n            <span>\\n              <span className=\\\"text-muted-foreground\\\">Language:</span>{\\\" \\\"}\\n              {item.label}\\n            </span>\\n          )}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup alignItemWithTrigger={false}>\\n        {items.map((item) => (\\n          <SelectItem key={item.value} value={item}>\\n            {item.label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with country flags\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-17.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Select,\\n  SelectGroup,\\n  SelectGroupLabel,\\n  SelectItem,\\n  SelectPopup,\\n  SelectSeparator,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst countries = [\\n  {\\n    continent: \\\"America\\\",\\n    items: [\\n      { flag: \\\"\\\\u{1F1FA}\\\\u{1F1F8}\\\", label: \\\"United States\\\", value: \\\"us\\\" },\\n      { flag: \\\"\\\\u{1F1E8}\\\\u{1F1E6}\\\", label: \\\"Canada\\\", value: \\\"ca\\\" },\\n      { flag: \\\"\\\\u{1F1F2}\\\\u{1F1FD}\\\", label: \\\"Mexico\\\", value: \\\"mx\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Europe\\\",\\n    items: [\\n      { flag: \\\"\\\\u{1F1EC}\\\\u{1F1E7}\\\", label: \\\"United Kingdom\\\", value: \\\"gb\\\" },\\n      { flag: \\\"\\\\u{1F1EB}\\\\u{1F1F7}\\\", label: \\\"France\\\", value: \\\"fr\\\" },\\n      { flag: \\\"\\\\u{1F1E9}\\\\u{1F1EA}\\\", label: \\\"Germany\\\", value: \\\"de\\\" },\\n    ],\\n  },\\n  {\\n    continent: \\\"Asia\\\",\\n    items: [\\n      { flag: \\\"\\\\u{1F1E8}\\\\u{1F1F3}\\\", label: \\\"China\\\", value: \\\"cn\\\" },\\n      { flag: \\\"\\\\u{1F1EF}\\\\u{1F1F5}\\\", label: \\\"Japan\\\", value: \\\"jp\\\" },\\n      { flag: \\\"\\\\u{1F1EE}\\\\u{1F1F3}\\\", label: \\\"India\\\", value: \\\"in\\\" },\\n    ],\\n  },\\n];\\n\\nconst allItems = countries.flatMap((c) => c.items);\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select country\\\"\\n      defaultValue={allItems.find((item) => item.value === \\\"ca\\\")}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger>\\n        <SelectValue>\\n          {(item) => (\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <span className=\\\"text-base leading-none\\\">{item.flag}</span>\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n            </span>\\n          )}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {countries.map((group, index) => (\\n          <SelectGroup key={group.continent}>\\n            {index > 0 && <SelectSeparator />}\\n            <SelectGroupLabel>{group.continent}</SelectGroupLabel>\\n            {group.items.map((item) => (\\n              <SelectItem key={item.value} value={item}>\\n                <span className=\\\"flex items-center gap-2\\\">\\n                  <span className=\\\"text-base leading-none\\\">{item.flag}</span>\\n                  <span className=\\\"truncate\\\">{item.label}</span>\\n                </span>\\n              </SelectItem>\\n            ))}\\n          </SelectGroup>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with description in options only\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-18.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  {\\n    description: \\\"Ideal for individuals\\\",\\n    label: \\\"Standard Plan\\\",\\n    value: \\\"standard\\\",\\n  },\\n  { description: \\\"For professional users\\\", label: \\\"Pro Plan\\\", value: \\\"pro\\\" },\\n  {\\n    description: \\\"Built for large teams\\\",\\n    label: \\\"Enterprise Plan\\\",\\n    value: \\\"enterprise\\\",\\n  },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select plan\\\"\\n      defaultValue={items[1]}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger>\\n        <SelectValue>\\n          {(item) => <span className=\\\"truncate\\\">{item.label}</span>}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup alignItemWithTrigger={false}>\\n        {items.map((item) => (\\n          <SelectItem key={item.value} value={item}>\\n            <span className=\\\"flex flex-col\\\">\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n              <span className=\\\"truncate text-muted-foreground text-xs\\\">\\n                {item.description}\\n              </span>\\n            </span>\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-19\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with avatars\",\n  \"registryDependencies\": [\n    \"@coss/avatar\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-19.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport {\\n  Select,\\n  SelectGroup,\\n  SelectGroupLabel,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst users = [\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\\\",\\n    initials: \\\"JH\\\",\\n    label: \\\"Jenny Hamilton\\\",\\n    value: \\\"jenny\\\",\\n  },\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\\\",\\n    initials: \\\"PS\\\",\\n    label: \\\"Paul Smith\\\",\\n    value: \\\"paul\\\",\\n  },\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\\\",\\n    initials: \\\"LW\\\",\\n    label: \\\"Luna Wyen\\\",\\n    value: \\\"luna\\\",\\n  },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select user\\\"\\n      defaultValue={users[0]}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger>\\n        <SelectValue>\\n          {(item) => (\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <Avatar className=\\\"size-5\\\">\\n                <AvatarImage alt={item.label} src={item.avatar} />\\n                <AvatarFallback className=\\\"text-[10px]\\\">\\n                  {item.initials}\\n                </AvatarFallback>\\n              </Avatar>\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n            </span>\\n          )}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup>\\n        <SelectGroup>\\n          <SelectGroupLabel>Impersonate user</SelectGroupLabel>\\n          {users.map((item) => (\\n            <SelectItem key={item.value} value={item}>\\n              <span className=\\\"flex items-center gap-2\\\">\\n                <Avatar className=\\\"size-5\\\">\\n                  <AvatarImage alt={item.label} src={item.avatar} />\\n                  <AvatarFallback className=\\\"text-[10px]\\\">\\n                    {item.initials}\\n                  </AvatarFallback>\\n                </Avatar>\\n                <span className=\\\"truncate\\\">{item.label}</span>\\n              </span>\\n            </SelectItem>\\n          ))}\\n        </SelectGroup>\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\",\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small select\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-2.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Select framework\\\", value: null },\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select framework\\\" items={items}>\\n      <SelectTrigger size=\\\"sm\\\">\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-20.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-20\",\n  \"type\": \"registry:block\",\n  \"description\": \"Rich select with avatars and usernames\",\n  \"registryDependencies\": [\n    \"@coss/avatar\",\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-20.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst users = [\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\\\",\\n    initials: \\\"JH\\\",\\n    label: \\\"Jenny Hamilton\\\",\\n    username: \\\"@jennycodes\\\",\\n    value: \\\"jenny\\\",\\n  },\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\\\",\\n    initials: \\\"PS\\\",\\n    label: \\\"Paul Smith\\\",\\n    username: \\\"@paulsmith\\\",\\n    value: \\\"paul\\\",\\n  },\\n  {\\n    avatar:\\n      \\\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\\\",\\n    initials: \\\"LW\\\",\\n    label: \\\"Luna Wyen\\\",\\n    username: \\\"@wyen.luna\\\",\\n    value: \\\"luna\\\",\\n  },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select user\\\"\\n      defaultValue={users[0]}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger className=\\\"h-auto py-1.5\\\">\\n        <SelectValue>\\n          {(item) => (\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <Avatar className=\\\"size-8\\\">\\n                <AvatarImage alt={item.label} src={item.avatar} />\\n                <AvatarFallback>{item.initials}</AvatarFallback>\\n              </Avatar>\\n              <span className=\\\"flex flex-col text-left\\\">\\n                <span className=\\\"truncate font-medium\\\">{item.label}</span>\\n                <span className=\\\"truncate text-muted-foreground text-xs\\\">\\n                  {item.username}\\n                </span>\\n              </span>\\n            </span>\\n          )}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {users.map((item) => (\\n          <SelectItem className=\\\"py-1.5\\\" key={item.value} value={item}>\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <Avatar className=\\\"size-8\\\">\\n                <AvatarImage alt={item.label} src={item.avatar} />\\n                <AvatarFallback>{item.initials}</AvatarFallback>\\n              </Avatar>\\n              <span className=\\\"flex flex-col\\\">\\n                <span className=\\\"truncate font-medium\\\">{item.label}</span>\\n                <span className=\\\"truncate text-muted-foreground text-xs\\\">\\n                  {item.username}\\n                </span>\\n              </span>\\n            </span>\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\",\n    \"avatar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-21.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-21\",\n  \"type\": \"registry:block\",\n  \"description\": \"Auto width select\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-21.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select framework\\\" defaultValue=\\\"next\\\" items={items}>\\n      <SelectTrigger className=\\\"w-fit\\\">\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-22.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-22\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with custom border and background\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-22.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select framework\\\" defaultValue=\\\"next\\\" items={items}>\\n      <SelectTrigger className=\\\"border-transparent bg-muted shadow-none before:hidden\\\">\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-23.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-23\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with label\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-23.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectLabel,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Apple\\\", value: \\\"apple\\\" },\\n  { label: \\\"Banana\\\", value: \\\"banana\\\" },\\n  { label: \\\"Orange\\\", value: \\\"orange\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select fruit\\\" defaultValue={items[0]} items={items}>\\n      <SelectLabel>Fruits</SelectLabel>\\n      <SelectTrigger>\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map((item) => (\\n          <SelectItem key={item.value} value={item}>\\n            {item.label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large select\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-3.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Select framework\\\", value: null },\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select framework\\\" items={items}>\\n      <SelectTrigger size=\\\"lg\\\">\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled select\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-4.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Select framework\\\", value: null },\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select framework\\\" items={items}>\\n      <SelectTrigger disabled>\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select without item alignment\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-5.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Select framework\\\", value: null },\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select aria-label=\\\"Select framework\\\" items={items}>\\n      <SelectTrigger>\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup alignItemWithTrigger={false}>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with groups\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-6.tsx\",\n      \"content\": \"import {\\n  Select,\\n  SelectGroup,\\n  SelectGroupLabel,\\n  SelectItem,\\n  SelectPopup,\\n  SelectSeparator,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst placeholder = [{ label: \\\"Select framework\\\", value: null }];\\n\\nconst frontend = [\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nconst backend = [\\n  { label: \\\"Express\\\", value: \\\"express\\\" },\\n  { label: \\\"NestJS\\\", value: \\\"nestjs\\\" },\\n  { label: \\\"Fastify\\\", value: \\\"fastify\\\" },\\n  { label: \\\"Django\\\", value: \\\"django\\\" },\\n  { label: \\\"Flask\\\", value: \\\"flask\\\" },\\n  { label: \\\"Rails\\\", value: \\\"rails\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select framework\\\"\\n      items={[...placeholder, ...frontend, ...backend]}\\n    >\\n      <SelectTrigger>\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup>\\n        <SelectGroup>\\n          <SelectGroupLabel>Frontend</SelectGroupLabel>\\n          {frontend.map(({ label, value }) => (\\n            <SelectItem key={value} value={value}>\\n              {label}\\n            </SelectItem>\\n          ))}\\n        </SelectGroup>\\n        <SelectSeparator />\\n        <SelectGroup>\\n          <SelectGroupLabel>Backend</SelectGroupLabel>\\n          {backend.map(({ label, value }) => (\\n            <SelectItem key={value} value={value}>\\n              {label}\\n            </SelectItem>\\n          ))}\\n        </SelectGroup>\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Multiple select\",\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst languages = {\\n  cpp: \\\"C++\\\",\\n  csharp: \\\"C#\\\",\\n  go: \\\"Go\\\",\\n  java: \\\"Java\\\",\\n  javascript: \\\"JavaScript\\\",\\n  php: \\\"PHP\\\",\\n  python: \\\"Python\\\",\\n  rust: \\\"Rust\\\",\\n  swift: \\\"Swift\\\",\\n  typescript: \\\"TypeScript\\\",\\n};\\n\\ntype Language = keyof typeof languages;\\n\\nconst values = Object.keys(languages) as Language[];\\n\\nfunction renderValue(value: Language[]) {\\n  if (value.length === 0) {\\n    return \\\"Select languages…\\\";\\n  }\\n\\n  const firstLanguage = value[0] ? languages[value[0]] : \\\"\\\";\\n  const additionalLanguages =\\n    value.length > 1 ? ` (+${value.length - 1} more)` : \\\"\\\";\\n  return firstLanguage + additionalLanguages;\\n}\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select languages\\\"\\n      defaultValue={[\\\"javascript\\\", \\\"typescript\\\"]}\\n      multiple\\n    >\\n      <SelectTrigger>\\n        <SelectValue>{renderValue}</SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup alignItemWithTrigger={false}>\\n        {values.map((value) => (\\n          <SelectItem key={value} value={value}>\\n            {languages[value]}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select with icon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-8.tsx\",\n      \"content\": \"import { CableIcon } from \\\"lucide-react\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { label: \\\"Select framework\\\", value: null },\\n  { label: \\\"Next.js\\\", value: \\\"next\\\" },\\n  { label: \\\"Vite\\\", value: \\\"vite\\\" },\\n  { label: \\\"Astro\\\", value: \\\"astro\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select framework with icon\\\"\\n      defaultValue=\\\"next\\\"\\n      items={items}\\n    >\\n      <SelectTrigger>\\n        <CableIcon aria-hidden=\\\"true\\\" />\\n        <SelectValue />\\n      </SelectTrigger>\\n      <SelectPopup alignItemWithTrigger={false}>\\n        {items.map(({ label, value }) => (\\n          <SelectItem key={value} value={value}>\\n            {label}\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-select-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-select-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Select options with icon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/select\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-select-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Code2Icon, GlobeIcon, LayersIcon, ZapIcon } from \\\"lucide-react\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\n\\nconst items = [\\n  { icon: LayersIcon, label: \\\"Components\\\", value: \\\"components\\\" },\\n  { icon: ZapIcon, label: \\\"Performance\\\", value: \\\"performance\\\" },\\n  { icon: GlobeIcon, label: \\\"Network\\\", value: \\\"network\\\" },\\n  { icon: Code2Icon, label: \\\"Development\\\", value: \\\"development\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <Select\\n      aria-label=\\\"Select category\\\"\\n      defaultValue={items[0]}\\n      itemToStringValue={(item) => item.value}\\n    >\\n      <SelectTrigger>\\n        <SelectValue>\\n          {(item) => (\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <item.icon />\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n            </span>\\n          )}\\n        </SelectValue>\\n      </SelectTrigger>\\n      <SelectPopup>\\n        {items.map((item) => (\\n          <SelectItem key={item.value} value={item}>\\n            <span className=\\\"flex items-center gap-2\\\">\\n              <item.icon />\\n              <span className=\\\"truncate\\\">{item.label}</span>\\n            </span>\\n          </SelectItem>\\n        ))}\\n      </SelectPopup>\\n    </Select>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"select\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-separator-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-separator-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Separator with horizontal and vertical orientations\",\n  \"registryDependencies\": [\n    \"@coss/separator\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-separator-1.tsx\",\n      \"content\": \"import { Separator } from \\\"@/registry/default/ui/separator\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"max-w-72\\\">\\n      <div className=\\\"space-y-1\\\">\\n        <h4 className=\\\"font-medium text-sm\\\">coss ui</h4>\\n        <p className=\\\"text-muted-foreground text-sm\\\">\\n          Unstyled, accessible primitives for fast product UI and design\\n          systems.\\n        </p>\\n      </div>\\n      <Separator className=\\\"my-4\\\" />\\n      <div className=\\\"flex items-center gap-4 text-sm\\\">\\n        <div>Blog</div>\\n        <Separator orientation=\\\"vertical\\\" />\\n        <div>Docs</div>\\n        <Separator orientation=\\\"vertical\\\" />\\n        <div>Source</div>\\n        <Separator orientation=\\\"vertical\\\" />\\n        <div>Releases</div>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"separator\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-sheet-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-sheet-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic sheet\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/sheet\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-sheet-1.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Sheet,\\n  SheetClose,\\n  SheetDescription,\\n  SheetFooter,\\n  SheetHeader,\\n  SheetPanel,\\n  SheetPopup,\\n  SheetTitle,\\n  SheetTrigger,\\n} from \\\"@/registry/default/ui/sheet\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Sheet>\\n      <SheetTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open Sheet\\n      </SheetTrigger>\\n      <SheetPopup>\\n        <Form className=\\\"contents\\\">\\n          <SheetHeader>\\n            <SheetTitle>Edit profile</SheetTitle>\\n            <SheetDescription>\\n              Make changes to your profile here. Click save when you&apos;re\\n              done.\\n            </SheetDescription>\\n          </SheetHeader>\\n          <SheetPanel className=\\\"grid gap-4\\\">\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input defaultValue=\\\"Margaret Welsh\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Username</FieldLabel>\\n              <Input defaultValue=\\\"@maggie.welsh\\\" type=\\\"text\\\" />\\n            </Field>\\n          </SheetPanel>\\n          <SheetFooter>\\n            <SheetClose render={<Button variant=\\\"ghost\\\" />}>Cancel</SheetClose>\\n            <Button type=\\\"submit\\\">Save</Button>\\n          </SheetFooter>\\n        </Form>\\n      </SheetPopup>\\n    </Sheet>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"sheet\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-sheet-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-sheet-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Sheet inset\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/input\",\n    \"@coss/sheet\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-sheet-2.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport {\\n  Sheet,\\n  SheetClose,\\n  SheetDescription,\\n  SheetFooter,\\n  SheetHeader,\\n  SheetPanel,\\n  SheetPopup,\\n  SheetTitle,\\n  SheetTrigger,\\n} from \\\"@/registry/default/ui/sheet\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Sheet>\\n      <SheetTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Open Sheet\\n      </SheetTrigger>\\n      <SheetPopup variant=\\\"inset\\\">\\n        <Form className=\\\"h-full gap-0\\\">\\n          <SheetHeader>\\n            <SheetTitle>Edit profile</SheetTitle>\\n            <SheetDescription>\\n              Make changes to your profile here. Click save when you&apos;re\\n              done.\\n            </SheetDescription>\\n          </SheetHeader>\\n          <SheetPanel className=\\\"grid gap-4\\\">\\n            <Field>\\n              <FieldLabel>Name</FieldLabel>\\n              <Input defaultValue=\\\"Margaret Welsh\\\" type=\\\"text\\\" />\\n            </Field>\\n            <Field>\\n              <FieldLabel>Username</FieldLabel>\\n              <Input defaultValue=\\\"@maggie.welsh\\\" type=\\\"text\\\" />\\n            </Field>\\n          </SheetPanel>\\n          <SheetFooter>\\n            <SheetClose render={<Button variant=\\\"ghost\\\" />}>Cancel</SheetClose>\\n            <Button type=\\\"submit\\\">Save</Button>\\n          </SheetFooter>\\n        </Form>\\n      </SheetPopup>\\n    </Sheet>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"sheet\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-sheet-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-sheet-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Sheet position\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/sheet\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-sheet-3.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Sheet,\\n  SheetDescription,\\n  SheetHeader,\\n  SheetPanel,\\n  SheetPopup,\\n  SheetTitle,\\n  SheetTrigger,\\n} from \\\"@/registry/default/ui/sheet\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-2\\\">\\n      <Sheet>\\n        <SheetTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Open Right\\n        </SheetTrigger>\\n        <SheetPopup showCloseButton={false}>\\n          <SheetHeader>\\n            <SheetTitle>Right</SheetTitle>\\n            <SheetDescription>Right side of the screen.</SheetDescription>\\n          </SheetHeader>\\n          <SheetPanel>\\n            <p>\\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\\n              reprehenderit in voluptate velit esse cillum dolore eu fugiat\\n              nulla pariatur. Excepteur sint occaecat cupidatat non proident,\\n              sunt in culpa qui officia deserunt mollit anim id est laborum.\\n            </p>\\n          </SheetPanel>\\n        </SheetPopup>\\n      </Sheet>\\n      <Sheet>\\n        <SheetTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Open Left\\n        </SheetTrigger>\\n        <SheetPopup showCloseButton={false} side=\\\"left\\\">\\n          <SheetHeader>\\n            <SheetTitle>Left</SheetTitle>\\n            <SheetDescription>Left side of the screen.</SheetDescription>\\n          </SheetHeader>\\n          <SheetPanel>\\n            <p>\\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\\n              reprehenderit in voluptate velit esse cillum dolore eu fugiat\\n              nulla pariatur. Excepteur sint occaecat cupidatat non proident,\\n              sunt in culpa qui officia deserunt mollit anim id est laborum.\\n            </p>\\n          </SheetPanel>\\n        </SheetPopup>\\n      </Sheet>\\n      <Sheet>\\n        <SheetTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Open Top\\n        </SheetTrigger>\\n        <SheetPopup showCloseButton={false} side=\\\"top\\\">\\n          <SheetHeader>\\n            <SheetTitle>Top</SheetTitle>\\n            <SheetDescription>Top of the screen.</SheetDescription>\\n          </SheetHeader>\\n          <SheetPanel>\\n            <p>\\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\\n              reprehenderit in voluptate velit esse cillum dolore eu fugiat\\n              nulla pariatur. Excepteur sint occaecat cupidatat non proident,\\n              sunt in culpa qui officia deserunt mollit anim id est laborum.\\n            </p>\\n          </SheetPanel>\\n        </SheetPopup>\\n      </Sheet>\\n      <Sheet>\\n        <SheetTrigger render={<Button variant=\\\"outline\\\" />}>\\n          Open Bottom\\n        </SheetTrigger>\\n        <SheetPopup showCloseButton={false} side=\\\"bottom\\\">\\n          <SheetHeader>\\n            <SheetTitle>Bottom</SheetTitle>\\n            <SheetDescription>Bottom of the screen.</SheetDescription>\\n          </SheetHeader>\\n          <SheetPanel>\\n            <p>\\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\\n              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\\n              reprehenderit in voluptate velit esse cillum dolore eu fugiat\\n              nulla pariatur. Excepteur sint occaecat cupidatat non proident,\\n              sunt in culpa qui officia deserunt mollit anim id est laborum.\\n            </p>\\n          </SheetPanel>\\n        </SheetPopup>\\n      </Sheet>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"sheet\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-skeleton-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-skeleton-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic skeleton\",\n  \"registryDependencies\": [\n    \"@coss/avatar\",\n    \"@coss/button\",\n    \"@coss/skeleton\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-skeleton-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { UserRoundPlusIcon, UsersRoundIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useState } from \\\"react\\\";\\nimport {\\n  Avatar,\\n  AvatarFallback,\\n  AvatarImage,\\n} from \\\"@/registry/default/ui/avatar\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Skeleton } from \\\"@/registry/default/ui/skeleton\\\";\\n\\nconst users = [\\n  {\\n    delay: 3000,\\n    fallback: \\\"SJ\\\",\\n    followers: \\\"15k\\\",\\n    image:\\n      \\\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80\\\",\\n    name: \\\"Sarah Johnson\\\",\\n    role: \\\"Design Engineer\\\",\\n  },\\n  {\\n    delay: 4000,\\n    fallback: \\\"MA\\\",\\n    followers: \\\"8k\\\",\\n    image:\\n      \\\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=80&h=80&dpr=2&q=80\\\",\\n    name: \\\"Mark Bennett Andersson\\\",\\n    role: \\\"Product Designer\\\",\\n  },\\n  {\\n    delay: 3400,\\n    fallback: \\\"AR\\\",\\n    followers: \\\"12k\\\",\\n    image:\\n      \\\"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&dpr=2&q=80\\\",\\n    name: \\\"Alex Rivera\\\",\\n    role: \\\"UI/UX Designer\\\",\\n  },\\n];\\n\\nfunction UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) {\\n  const [isLoaded, setIsLoaded] = useState(false);\\n\\n  useEffect(() => {\\n    const timer = setTimeout(() => {\\n      setIsLoaded(true);\\n    }, delay);\\n\\n    return () => clearTimeout(timer);\\n  }, [delay]);\\n\\n  if (!isLoaded) {\\n    return <UserCardSkeleton />;\\n  }\\n\\n  return (\\n    <>\\n      <Avatar className=\\\"size-10\\\">\\n        <AvatarImage alt={user.name} src={user.image} />\\n        <AvatarFallback>{user.fallback}</AvatarFallback>\\n      </Avatar>\\n      <div className=\\\"flex min-w-0 flex-1 flex-col gap-1\\\">\\n        <h4 className=\\\"line-clamp-1 font-medium text-sm\\\">{user.name}</h4>\\n        <div className=\\\"flex items-center gap-3 text-muted-foreground text-xs\\\">\\n          <span className=\\\"truncate\\\">{user.role}</span>\\n          <div className=\\\"flex min-w-0 items-center gap-1\\\">\\n            <UsersRoundIcon className=\\\"size-3 shrink-0\\\" />\\n            <span className=\\\"truncate\\\">\\n              {user.followers}\\n              <span className=\\\"max-sm:hidden\\\"> followers</span>\\n            </span>\\n          </div>\\n        </div>\\n      </div>\\n      <Button size=\\\"xs\\\">\\n        <UserRoundPlusIcon />\\n        Follow\\n      </Button>\\n    </>\\n  );\\n}\\n\\nfunction UserCardSkeleton() {\\n  return (\\n    <>\\n      <Skeleton className=\\\"size-10 rounded-full\\\" />\\n      <div className=\\\"flex flex-1 flex-col\\\">\\n        <Skeleton className=\\\"my-0.5 h-4 max-w-54\\\" />\\n        <div className=\\\"flex max-w-54 items-center gap-1\\\">\\n          <Skeleton className=\\\"my-0.5 h-4 w-1/2\\\" />\\n          <Skeleton className=\\\"my-0.5 h-4 w-1/2\\\" />\\n        </div>\\n      </div>\\n      <Skeleton className=\\\"h-7 w-19 sm:h-6 sm:w-17\\\" />\\n    </>\\n  );\\n}\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex w-full max-w-92 flex-col gap-6\\\">\\n      {users.map((user) => (\\n        <div className=\\\"flex items-center gap-4\\\" key={user.fallback}>\\n          <UserCard delay={user.delay} user={user} />\\n        </div>\\n      ))}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"skeleton\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-skeleton-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-skeleton-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Skeleton only\",\n  \"registryDependencies\": [\n    \"@coss/skeleton\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-skeleton-2.tsx\",\n      \"content\": \"import { Skeleton } from \\\"@/registry/default/ui/skeleton\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex w-full max-w-92 items-center gap-4\\\">\\n      <Skeleton className=\\\"size-10 rounded-full\\\" />\\n      <div className=\\\"flex flex-1 flex-col\\\">\\n        <Skeleton className=\\\"my-0.5 h-4 max-w-54\\\" />\\n        <div className=\\\"flex max-w-54 items-center gap-1\\\">\\n          <Skeleton className=\\\"my-0.5 h-4 w-1/2\\\" />\\n          <Skeleton className=\\\"my-0.5 h-4 w-1/2\\\" />\\n        </div>\\n      </div>\\n      <Skeleton className=\\\"h-6 w-17\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n  },\n  \"categories\": [\n    \"skeleton\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic slider\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-1.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return <Slider defaultValue={50} />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Range slider with collision behavior swap\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-10.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Slider\\n      aria-label=\\\"Dual thumb slider with collision behavior swap\\\"\\n      defaultValue={[25, 75]}\\n      thumbCollisionBehavior=\\\"swap\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider with icons\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-11.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Volume2Icon, VolumeXIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Slider, SliderValue } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState<number | readonly number[]>(25);\\n\\n  return (\\n    <Field className=\\\"*:grid *:grid-cols-[auto_1fr_auto] *:items-center *:gap-x-2\\\">\\n      <Slider aria-label=\\\"Volume slider\\\" onValueChange={setValue} value={value}>\\n        <div className=\\\"col-span-3 mb-2 flex items-center justify-between gap-1\\\">\\n          <FieldLabel>Volume</FieldLabel>\\n          <SliderValue />\\n        </div>\\n        <VolumeXIcon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"size-4 shrink-0 opacity-80\\\"\\n        />\\n        <Volume2Icon\\n          aria-hidden=\\\"true\\\"\\n          className=\\\"order-1 size-4 shrink-0 opacity-80\\\"\\n        />\\n      </Slider>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider with input\",\n  \"registryDependencies\": [\n    \"@coss/number-field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-12.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport {\\n  NumberField,\\n  NumberFieldGroup,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst min = 0;\\nconst max = 150;\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState(25);\\n\\n  return (\\n    <div className=\\\"flex items-center gap-4\\\">\\n      <Slider\\n        aria-label=\\\"Slider with input\\\"\\n        className=\\\"flex-1\\\"\\n        max={max}\\n        min={min}\\n        onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}\\n        value={value}\\n      />\\n      <NumberField\\n        aria-label=\\\"Enter slider value\\\"\\n        className=\\\"w-12\\\"\\n        max={max}\\n        min={min}\\n        onValueChange={(v) => setValue(v ?? min)}\\n        render={<NumberFieldGroup />}\\n        size=\\\"sm\\\"\\n        value={value}\\n      >\\n        <NumberFieldInput />\\n      </NumberField>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\",\n    \"number field\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Range slider with inputs\",\n  \"registryDependencies\": [\n    \"@coss/number-field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-13.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport {\\n  NumberField,\\n  NumberFieldGroup,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst min = 0;\\nconst max = 50;\\n\\nexport default function Particle() {\\n  const [values, setValues] = useState([0, 20]);\\n\\n  const updateValue = (index: number, newValue: number | null) => {\\n    const v = newValue ?? min;\\n    setValues((prev) => {\\n      const next = [...prev];\\n      if (index === 0) {\\n        // Min value: clamp to not exceed max value\\n        next[0] = Math.min(v, prev[1] ?? max);\\n      } else {\\n        // Max value: clamp to not go below min value\\n        next[1] = Math.max(v, prev[0] ?? min);\\n      }\\n      return next;\\n    });\\n  };\\n\\n  return (\\n    <div className=\\\"flex items-center gap-2\\\">\\n      <NumberField\\n        aria-label=\\\"Minimum value\\\"\\n        className=\\\"w-10\\\"\\n        max={values[1]}\\n        min={min}\\n        onValueChange={(v) => updateValue(0, v)}\\n        render={<NumberFieldGroup />}\\n        size=\\\"sm\\\"\\n        value={values[0]}\\n      >\\n        <NumberFieldInput />\\n      </NumberField>\\n      <Slider\\n        aria-label=\\\"Dual range slider\\\"\\n        className=\\\"flex-1 *:min-w-0!\\\"\\n        max={max}\\n        min={min}\\n        onValueChange={(v) => setValues(Array.isArray(v) ? [...v] : [v])}\\n        value={values}\\n      />\\n      <NumberField\\n        aria-label=\\\"Maximum value\\\"\\n        className=\\\"w-10\\\"\\n        max={max}\\n        min={values[0]}\\n        onValueChange={(v) => updateValue(1, v)}\\n        render={<NumberFieldGroup />}\\n        size=\\\"sm\\\"\\n        value={values[1]}\\n      >\\n        <NumberFieldInput />\\n      </NumberField>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\",\n    \"number field\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider with increment and decrement buttons\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-14.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { MinusIcon, PlusIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst min = 0;\\nconst max = 200;\\nconst step = 5;\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState(100);\\n\\n  return (\\n    <Field name=\\\"credits\\\">\\n      <FieldLabel className=\\\"tabular-nums\\\">{value} credits/mo</FieldLabel>\\n      <div className=\\\"flex items-center gap-2\\\">\\n        <Button\\n          aria-label=\\\"Decrease value\\\"\\n          disabled={value === min}\\n          onClick={() => setValue(Math.max(min, value - step))}\\n          size=\\\"icon\\\"\\n          variant=\\\"outline\\\"\\n        >\\n          <MinusIcon aria-hidden=\\\"true\\\" />\\n        </Button>\\n        <Slider\\n          aria-label=\\\"Credits slider\\\"\\n          className=\\\"flex-1\\\"\\n          max={max}\\n          min={min}\\n          onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}\\n          step={step}\\n          value={value}\\n        />\\n        <Button\\n          aria-label=\\\"Increase value\\\"\\n          disabled={value === max}\\n          onClick={() => setValue(Math.min(max, value + step))}\\n          size=\\\"icon\\\"\\n          variant=\\\"outline\\\"\\n        >\\n          <PlusIcon aria-hidden=\\\"true\\\" />\\n        </Button>\\n      </div>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Price range slider\",\n  \"registryDependencies\": [\n    \"@coss/fieldset\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-15.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Fieldset, FieldsetLegend } from \\\"@/registry/default/ui/fieldset\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst min = 5;\\nconst max = 1240;\\n\\nexport default function Particle() {\\n  const [values, setValues] = useState([min, max]);\\n\\n  const formatPrice = (price: number) =>\\n    price === max\\n      ? `$${price.toLocaleString()}+`\\n      : `$${price.toLocaleString()}`;\\n\\n  return (\\n    <Fieldset className=\\\"flex max-w-none flex-col gap-3\\\">\\n      <FieldsetLegend className=\\\"tabular-nums\\\">\\n        From {formatPrice(values[0] ?? min)} to {formatPrice(values[1] ?? max)}\\n      </FieldsetLegend>\\n      <Slider\\n        aria-label=\\\"Price range\\\"\\n        className=\\\"flex-1\\\"\\n        max={max}\\n        min={min}\\n        name=\\\"price-range\\\"\\n        onValueChange={(v) => setValues(Array.isArray(v) ? [...v] : [v])}\\n        value={values}\\n      />\\n    </Fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-16.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-16\",\n  \"type\": \"registry:block\",\n  \"description\": \"Emoji rating slider\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-16.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst labels = [\\\"Awful\\\", \\\"Poor\\\", \\\"Okay\\\", \\\"Good\\\", \\\"Amazing\\\"];\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState<number | readonly number[]>(3);\\n\\n  const currentValue = Array.isArray(value) ? value[0] : value;\\n\\n  return (\\n    <Field className=\\\"*:grid *:grid-cols-[auto_1fr_auto] *:items-center *:gap-x-2\\\">\\n      <Slider\\n        aria-label=\\\"Rate your experience\\\"\\n        max={5}\\n        min={1}\\n        onValueChange={setValue}\\n        value={value}\\n      >\\n        <div className=\\\"col-span-3 mb-2 flex items-center justify-between gap-1\\\">\\n          <FieldLabel>Rate your experience</FieldLabel>\\n          <span className=\\\"text-sm\\\">{labels[currentValue - 1]}</span>\\n        </div>\\n        <span aria-hidden=\\\"true\\\" className=\\\"text-2xl\\\">\\n          😡\\n        </span>\\n        <span aria-hidden=\\\"true\\\" className=\\\"order-1 text-2xl\\\">\\n          😍\\n        </span>\\n      </Slider>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-17.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-17\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical slider\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-17.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return <Slider defaultValue={50} orientation=\\\"vertical\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-18.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-18\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical range slider\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-18.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex h-40 items-center justify-center\\\">\\n      <Slider defaultValue={[25, 75]} orientation=\\\"vertical\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-19.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-19\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical slider with input\",\n  \"registryDependencies\": [\n    \"@coss/number-field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-19.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport {\\n  NumberField,\\n  NumberFieldGroup,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst min = 0;\\nconst max = 100;\\n\\nexport default function Particle() {\\n  const [value, setValue] = useState(25);\\n\\n  return (\\n    <div className=\\\"flex flex-col items-center justify-center gap-4\\\">\\n      <Slider\\n        aria-label=\\\"Vertical slider with input\\\"\\n        max={max}\\n        min={min}\\n        onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}\\n        orientation=\\\"vertical\\\"\\n        value={value}\\n      />\\n      <NumberField\\n        aria-label=\\\"Enter slider value\\\"\\n        className=\\\"w-16\\\"\\n        max={max}\\n        min={min}\\n        onValueChange={(v) => setValue(v ?? min)}\\n        render={<NumberFieldGroup />}\\n        size=\\\"sm\\\"\\n        value={value}\\n      >\\n        <NumberFieldInput />\\n      </NumberField>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"slider\",\n    \"number field\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider with label and value\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-2.tsx\",\n      \"content\": \"import { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Slider, SliderValue } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <Slider defaultValue={50}>\\n        <div className=\\\"mb-2 flex items-center justify-between gap-1\\\">\\n          <FieldLabel className=\\\"font-medium text-sm\\\">Opacity</FieldLabel>\\n          <SliderValue />\\n        </div>\\n      </Slider>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-20.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-20\",\n  \"type\": \"registry:block\",\n  \"description\": \"Equalizer with vertical sliders\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-20.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst bands = [\\n  { label: \\\"60 Hz\\\", value: 2 },\\n  { label: \\\"250 Hz\\\", value: 1 },\\n  { label: \\\"1k\\\", value: -1 },\\n  { label: \\\"4k\\\", value: -3 },\\n  { label: \\\"16k\\\", value: 2 },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex h-48 justify-center gap-8\\\">\\n      {bands.map((band) => (\\n        <Slider\\n          aria-label={band.label}\\n          defaultValue={band.value}\\n          key={band.label}\\n          max={5}\\n          min={-5}\\n          orientation=\\\"vertical\\\"\\n        />\\n      ))}\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-21.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-21\",\n  \"type\": \"registry:block\",\n  \"description\": \"Object position sliders with reset\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/fieldset\",\n    \"@coss/label\",\n    \"@coss/number-field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-21.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { RotateCcwIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Fieldset, FieldsetLegend } from \\\"@/registry/default/ui/fieldset\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport {\\n  NumberField,\\n  NumberFieldGroup,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst min = -10;\\nconst max = 10;\\nconst defaultValues = { x: 0, y: 0, z: 0 };\\nconst initialValues = { x: -2, y: 4, z: 2 };\\n\\nexport default function Particle() {\\n  const [values, setValues] = useState(initialValues);\\n\\n  const updateValue = (axis: keyof typeof values, v: number | null) => {\\n    setValues((prev) => ({ ...prev, [axis]: v ?? 0 }));\\n  };\\n\\n  return (\\n    <Fieldset className=\\\"flex max-w-none flex-col gap-4\\\">\\n      <FieldsetLegend>Object position</FieldsetLegend>\\n      <div className=\\\"flex flex-col gap-2\\\">\\n        {([\\\"x\\\", \\\"y\\\", \\\"z\\\"] as const).map((axis) => (\\n          <div className=\\\"flex items-center gap-2\\\" key={axis}>\\n            <Label className=\\\"w-3 text-muted-foreground text-xs\\\">\\n              {axis.toUpperCase()}\\n            </Label>\\n            <Slider\\n              aria-label={`${axis.toUpperCase()} position`}\\n              className=\\\"flex-1\\\"\\n              max={max}\\n              min={min}\\n              onValueChange={(v) =>\\n                updateValue(axis, Array.isArray(v) ? v[0] : v)\\n              }\\n              value={values[axis]}\\n            />\\n            <NumberField\\n              aria-label={`Enter ${axis.toUpperCase()} value`}\\n              className=\\\"w-16\\\"\\n              max={max}\\n              min={min}\\n              onValueChange={(v) => updateValue(axis, v)}\\n              render={<NumberFieldGroup />}\\n              size=\\\"sm\\\"\\n              value={values[axis]}\\n            >\\n              <NumberFieldInput />\\n            </NumberField>\\n          </div>\\n        ))}\\n      </div>\\n      <Button\\n        className=\\\"w-full\\\"\\n        onClick={() => setValues(defaultValues)}\\n        variant=\\\"outline\\\"\\n      >\\n        <RotateCcwIcon aria-hidden=\\\"true\\\" className=\\\"-ms-1 opacity-60\\\" />\\n        Reset\\n      </Button>\\n    </Fieldset>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\",\n    \"number field\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-22.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-22\",\n  \"type\": \"registry:block\",\n  \"description\": \"Price slider with histogram\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input-group\",\n    \"@coss/number-field\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-22.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  InputGroup,\\n  InputGroupAddon,\\n  InputGroupText,\\n} from \\\"@/registry/default/ui/input-group\\\";\\nimport {\\n  NumberField,\\n  NumberFieldInput,\\n} from \\\"@/registry/default/ui/number-field\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst items = [\\n  { id: 1, price: 80 },\\n  { id: 2, price: 95 },\\n  { id: 3, price: 110 },\\n  { id: 4, price: 125 },\\n  { id: 5, price: 130 },\\n  { id: 6, price: 140 },\\n  { id: 7, price: 145 },\\n  { id: 8, price: 150 },\\n  { id: 9, price: 155 },\\n  { id: 10, price: 165 },\\n  { id: 11, price: 175 },\\n  { id: 12, price: 185 },\\n  { id: 13, price: 195 },\\n  { id: 14, price: 205 },\\n  { id: 15, price: 215 },\\n  { id: 16, price: 225 },\\n  { id: 17, price: 235 },\\n  { id: 18, price: 245 },\\n  { id: 19, price: 255 },\\n  { id: 20, price: 260 },\\n  { id: 21, price: 265 },\\n  { id: 22, price: 270 },\\n  { id: 23, price: 275 },\\n  { id: 24, price: 280 },\\n  { id: 25, price: 285 },\\n  { id: 26, price: 290 },\\n  { id: 27, price: 290 },\\n  { id: 28, price: 295 },\\n  { id: 29, price: 295 },\\n  { id: 30, price: 295 },\\n  { id: 31, price: 298 },\\n  { id: 32, price: 299 },\\n  { id: 33, price: 300 },\\n  { id: 34, price: 305 },\\n  { id: 35, price: 310 },\\n  { id: 36, price: 315 },\\n  { id: 37, price: 320 },\\n  { id: 38, price: 325 },\\n  { id: 39, price: 330 },\\n  { id: 40, price: 335 },\\n  { id: 41, price: 340 },\\n  { id: 42, price: 345 },\\n  { id: 43, price: 350 },\\n  { id: 44, price: 355 },\\n  { id: 45, price: 360 },\\n  { id: 46, price: 365 },\\n  { id: 47, price: 365 },\\n  { id: 48, price: 375 },\\n  { id: 49, price: 380 },\\n  { id: 50, price: 385 },\\n  { id: 51, price: 390 },\\n  { id: 52, price: 395 },\\n  { id: 53, price: 400 },\\n  { id: 54, price: 405 },\\n  { id: 55, price: 410 },\\n  { id: 56, price: 415 },\\n  { id: 57, price: 420 },\\n  { id: 58, price: 425 },\\n  { id: 59, price: 430 },\\n  { id: 60, price: 435 },\\n  { id: 61, price: 440 },\\n  { id: 62, price: 445 },\\n  { id: 63, price: 450 },\\n  { id: 64, price: 455 },\\n  { id: 65, price: 460 },\\n  { id: 66, price: 465 },\\n  { id: 67, price: 470 },\\n  { id: 68, price: 475 },\\n  { id: 69, price: 480 },\\n  { id: 70, price: 485 },\\n  { id: 71, price: 490 },\\n  { id: 72, price: 495 },\\n  { id: 73, price: 495 },\\n  { id: 74, price: 498 },\\n  { id: 75, price: 499 },\\n  { id: 76, price: 500 },\\n  { id: 77, price: 500 },\\n  { id: 78, price: 500 },\\n  { id: 79, price: 515 },\\n  { id: 80, price: 530 },\\n  { id: 81, price: 545 },\\n  { id: 82, price: 560 },\\n  { id: 83, price: 575 },\\n  { id: 84, price: 590 },\\n  { id: 85, price: 605 },\\n  { id: 86, price: 620 },\\n  { id: 87, price: 635 },\\n  { id: 88, price: 650 },\\n  { id: 89, price: 655 },\\n  { id: 90, price: 660 },\\n  { id: 91, price: 665 },\\n  { id: 92, price: 670 },\\n  { id: 93, price: 675 },\\n  { id: 94, price: 680 },\\n  { id: 95, price: 685 },\\n  { id: 96, price: 690 },\\n  { id: 97, price: 695 },\\n  { id: 98, price: 700 },\\n  { id: 99, price: 700 },\\n  { id: 100, price: 700 },\\n  { id: 101, price: 700 },\\n  { id: 102, price: 700 },\\n  { id: 103, price: 700 },\\n  { id: 104, price: 725 },\\n  { id: 105, price: 750 },\\n  { id: 106, price: 775 },\\n  { id: 107, price: 800 },\\n  { id: 108, price: 815 },\\n  { id: 109, price: 830 },\\n  { id: 110, price: 845 },\\n  { id: 111, price: 845 },\\n  { id: 112, price: 845 },\\n  { id: 113, price: 870 },\\n  { id: 114, price: 875 },\\n  { id: 115, price: 880 },\\n  { id: 116, price: 885 },\\n  { id: 117, price: 890 },\\n  { id: 118, price: 895 },\\n  { id: 119, price: 898 },\\n  { id: 120, price: 900 },\\n];\\n\\nconst tickCount = 40;\\nconst min = Math.min(...items.map((item) => item.price));\\nconst max = Math.max(...items.map((item) => item.price));\\nconst priceStep = (max - min) / tickCount;\\n\\nconst itemCounts = Array.from({ length: tickCount }, (_, tick) => {\\n  const rangeMin = min + tick * priceStep;\\n  const rangeMax = min + (tick + 1) * priceStep;\\n  return items.filter((item) => item.price >= rangeMin && item.price < rangeMax)\\n    .length;\\n});\\n\\nconst maxCount = Math.max(...itemCounts);\\n\\nexport default function Particle() {\\n  const [values, setValues] = useState([200, 780]);\\n\\n  const updateValue = (index: number, newValue: number | null) => {\\n    const v = newValue ?? min;\\n    setValues((prev) => {\\n      const next = [...prev];\\n      if (index === 0) {\\n        // Min value: clamp to not exceed max value\\n        next[0] = Math.min(v, prev[1] ?? max);\\n      } else {\\n        // Max value: clamp to not go below min value\\n        next[1] = Math.max(v, prev[0] ?? min);\\n      }\\n      return next;\\n    });\\n  };\\n\\n  const countItemsInRange = () =>\\n    items.filter(\\n      (item) =>\\n        item.price >= (values[0] ?? min) && item.price <= (values[1] ?? max),\\n    ).length;\\n\\n  const isBarInSelectedRange = (index: number) => {\\n    const rangeMin = min + index * priceStep;\\n    const rangeMax = min + (index + 1) * priceStep;\\n    return (\\n      countItemsInRange() > 0 &&\\n      rangeMin <= (values[1] ?? max) &&\\n      rangeMax >= (values[0] ?? min)\\n    );\\n  };\\n\\n  return (\\n    <div className=\\\"flex flex-col gap-4\\\">\\n      <div>\\n        <div aria-hidden=\\\"true\\\" className=\\\"flex h-12 w-full items-end px-3\\\">\\n          {itemCounts.map((count, i) => (\\n            <div\\n              className=\\\"flex flex-1 justify-center\\\"\\n              key={String(i)}\\n              style={{ height: `${(count / maxCount) * 100}%` }}\\n            >\\n              <span\\n                className=\\\"mx-px size-full bg-primary/20 data-[selected=true]:bg-primary/50\\\"\\n                data-selected={isBarInSelectedRange(i)}\\n              />\\n            </div>\\n          ))}\\n        </div>\\n        <Slider\\n          aria-label=\\\"Price range\\\"\\n          className=\\\"*:min-w-0!\\\"\\n          max={max}\\n          min={min}\\n          onValueChange={(v) => setValues(Array.isArray(v) ? [...v] : [v])}\\n          value={values}\\n        />\\n      </div>\\n\\n      <div className=\\\"flex items-center justify-between gap-4\\\">\\n        <InputGroup>\\n          <NumberField\\n            aria-label=\\\"Minimum price\\\"\\n            max={values[1]}\\n            min={min}\\n            onValueChange={(v) => updateValue(0, v)}\\n            value={values[0]}\\n          >\\n            <NumberFieldInput className=\\\"text-left\\\" />\\n          </NumberField>\\n          <InputGroupAddon>\\n            <InputGroupText>$</InputGroupText>\\n          </InputGroupAddon>\\n        </InputGroup>\\n        <InputGroup>\\n          <NumberField\\n            aria-label=\\\"Maximum price\\\"\\n            max={max}\\n            min={values[0]}\\n            onValueChange={(v) => updateValue(1, v)}\\n            value={values[1]}\\n          >\\n            <NumberFieldInput className=\\\"text-left\\\" />\\n          </NumberField>\\n          <InputGroupAddon>\\n            <InputGroupText>$</InputGroupText>\\n          </InputGroupAddon>\\n        </InputGroup>\\n      </div>\\n\\n      <Button className=\\\"w-full\\\" variant=\\\"outline\\\">\\n        Show {countItemsInRange()} items\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\",\n    \"number field\",\n    \"input group\",\n    \"button\",\n    \"filter\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-23.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-23\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider in form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/fieldset\",\n    \"@coss/form\",\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-23.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldDescription } from \\\"@/registry/default/ui/field\\\";\\nimport { Fieldset, FieldsetLegend } from \\\"@/registry/default/ui/fieldset\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Slider, SliderValue } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState<boolean>(false);\\n  const [value, setValue] = useState<number | readonly number[]>([25, 75]);\\n\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    const volumes = formData.getAll(\\\"volume\\\");\\n    alert(`Volume: ${volumes.join(\\\", \\\")}`);\\n  };\\n\\n  return (\\n    <Form onSubmit={onSubmit}>\\n      <Fieldset className=\\\"flex max-w-none flex-col items-stretch gap-3\\\">\\n        <Field>\\n          <Slider name=\\\"volume\\\" onValueChange={setValue} value={value}>\\n            <div className=\\\"mb-2 flex items-center justify-between gap-1\\\">\\n              <FieldsetLegend>Volume</FieldsetLegend>\\n              <SliderValue />\\n            </div>\\n          </Slider>\\n          <FieldDescription>Choose a value between 0 and 100</FieldDescription>\\n        </Field>\\n      </Fieldset>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\",\n    \"form\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled slider\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-3.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return <Slider defaultValue={50} disabled />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\",\n    \"disabled\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider with reference labels\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-4.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div>\\n      <Slider\\n        aria-label=\\\"Storage size in GB\\\"\\n        defaultValue={15}\\n        max={35}\\n        min={5}\\n      />\\n      <div\\n        aria-label=\\\"Storage size reference values\\\"\\n        className=\\\"mt-4 flex w-full items-center justify-between gap-1 font-medium text-muted-foreground text-xs\\\"\\n        role=\\\"group\\\"\\n      >\\n        <span>5 GB</span>\\n        <span>20 GB</span>\\n        <span>35 GB</span>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider with ticks\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-5.tsx\",\n      \"content\": \"import { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nconst max = 12;\\nconst skipInterval = 2;\\nconst ticks = [...Array(max + 1)].map((_, i) => i);\\n\\nexport default function Particle() {\\n  return (\\n    <div>\\n      <Slider aria-label=\\\"Value selector\\\" defaultValue={5} max={max} />\\n      <div\\n        aria-label=\\\"Value scale from 0 to 12\\\"\\n        className=\\\"mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs\\\"\\n        role=\\\"group\\\"\\n      >\\n        {ticks.map((_, i) => (\\n          <span\\n            className=\\\"flex w-0 flex-col items-center justify-center gap-2\\\"\\n            key={String(i)}\\n          >\\n            <span\\n              className={cn(\\n                \\\"h-1 w-px bg-muted-foreground/72\\\",\\n                i % skipInterval !== 0 && \\\"h-0.5\\\",\\n              )}\\n            />\\n            <span className={cn(i % skipInterval !== 0 && \\\"opacity-0\\\")}>\\n              {i}\\n            </span>\\n          </span>\\n        ))}\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider with labels above\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-6.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div>\\n      <div\\n        aria-hidden=\\\"true\\\"\\n        className=\\\"mb-3 flex w-full items-center justify-between gap-2 font-medium text-muted-foreground text-xs\\\"\\n      >\\n        <span>Low</span>\\n        <span>High</span>\\n      </div>\\n      <Slider\\n        aria-label=\\\"Intensity level from low to high\\\"\\n        defaultValue={50}\\n        step={10}\\n      />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Range slider\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-7.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return <Slider defaultValue={[25, 75]} />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Slider with 3 thumbs\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-8.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return <Slider defaultValue={[20, 50, 80]} />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-slider-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-slider-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Range slider with collision behavior none\",\n  \"registryDependencies\": [\n    \"@coss/slider\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-slider-9.tsx\",\n      \"content\": \"import { Slider } from \\\"@/registry/default/ui/slider\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Slider\\n      aria-label=\\\"Dual thumb slider with collision behavior none\\\"\\n      defaultValue={[25, 75]}\\n      thumbCollisionBehavior=\\\"none\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"slider\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-spinner-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-spinner-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic spinner\",\n  \"registryDependencies\": [\n    \"@coss/spinner\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-spinner-1.tsx\",\n      \"content\": \"import { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\n\\nexport default function Particle() {\\n  return <Spinner />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"spinner\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-switch-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-switch-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic switch\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-switch-1.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Label>\\n      <Switch />\\n      Marketing emails\\n    </Label>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-switch-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-switch-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled switch\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-switch-2.tsx\",\n      \"content\": \"import { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Label>\\n      <Switch disabled />\\n      Marketing emails\\n    </Label>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-switch-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-switch-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Switch with description\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-switch-3.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n\\n  return (\\n    <div className=\\\"flex items-start gap-2\\\">\\n      <Switch defaultChecked id={id} />\\n      <div className=\\\"flex flex-col gap-1\\\">\\n        <Label htmlFor={id}>Marketing emails</Label>\\n        <p className=\\\"text-muted-foreground text-xs\\\">\\n          By enabling marketing emails, you agree to receive emails.\\n        </p>\\n      </div>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-switch-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-switch-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Switch card\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-switch-4.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n\\n  return (\\n    <Label\\n      className=\\\"flex items-center gap-6 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\\\"\\n      htmlFor={id}\\n    >\\n      <div className=\\\"flex flex-col gap-1\\\">\\n        <p>Enable notifications</p>\\n        <p className=\\\"text-muted-foreground text-xs\\\">\\n          You can enable or disable notifications at any time.\\n        </p>\\n      </div>\\n      <Switch\\n        className=\\\"[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]\\\"\\n        defaultChecked\\n        id={id}\\n      />\\n    </Label>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-switch-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-switch-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Switch in form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-switch-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    console.log(formData.get(\\\"marketing\\\"));\\n\\n    const enabled = formData.get(\\\"marketing\\\");\\n    alert(`Marketing emails: ${enabled}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"w-auto\\\" onSubmit={onSubmit}>\\n      <Field name=\\\"marketing\\\">\\n        <FieldLabel>\\n          <Switch defaultChecked name=\\\"marketing\\\" />\\n          Enable marketing emails\\n        </FieldLabel>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-switch-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-switch-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Custom size switch\",\n  \"registryDependencies\": [\n    \"@coss/switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-switch-6.tsx\",\n      \"content\": \"import { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Switch className=\\\"[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]\\\" />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-switch-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-switch-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Custom size switch\",\n  \"registryDependencies\": [\n    \"@coss/switch\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-switch-7.tsx\",\n      \"content\": \"import { Switch } from \\\"@/registry/default/ui/switch\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Switch className=\\\"[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]\\\" />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"switch\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-table-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-table-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic table\",\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/table\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-table-1.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCaption,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Table>\\n      <TableCaption>A list of current projects.</TableCaption>\\n      <TableHeader>\\n        <TableRow>\\n          <TableHead>Project</TableHead>\\n          <TableHead>Status</TableHead>\\n          <TableHead>Team</TableHead>\\n          <TableHead className=\\\"text-right\\\">Budget</TableHead>\\n        </TableRow>\\n      </TableHeader>\\n      <TableBody>\\n        <TableRow>\\n          <TableCell className=\\\"font-medium\\\">Website Redesign</TableCell>\\n          <TableCell>\\n            <Badge variant=\\\"outline\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n              />\\n              Paid\\n            </Badge>\\n          </TableCell>\\n          <TableCell>Frontend Team</TableCell>\\n          <TableCell className=\\\"text-right\\\">$12,500</TableCell>\\n        </TableRow>\\n        <TableRow>\\n          <TableCell className=\\\"font-medium\\\">Mobile App</TableCell>\\n          <TableCell>\\n            <Badge variant=\\\"outline\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-1.5 rounded-full bg-muted-foreground/64\\\"\\n              />\\n              Unpaid\\n            </Badge>\\n          </TableCell>\\n          <TableCell>Mobile Team</TableCell>\\n          <TableCell className=\\\"text-right\\\">$8,750</TableCell>\\n        </TableRow>\\n        <TableRow>\\n          <TableCell className=\\\"font-medium\\\">API Integration</TableCell>\\n          <TableCell>\\n            <Badge variant=\\\"outline\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-1.5 rounded-full bg-amber-500\\\"\\n              />\\n              Pending\\n            </Badge>\\n          </TableCell>\\n          <TableCell>Backend Team</TableCell>\\n          <TableCell className=\\\"text-right\\\">$5,200</TableCell>\\n        </TableRow>\\n        <TableRow>\\n          <TableCell className=\\\"font-medium\\\">Database Migration</TableCell>\\n          <TableCell>\\n            <Badge variant=\\\"outline\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n              />\\n              Paid\\n            </Badge>\\n          </TableCell>\\n          <TableCell>DevOps Team</TableCell>\\n          <TableCell className=\\\"text-right\\\">$3,800</TableCell>\\n        </TableRow>\\n        <TableRow>\\n          <TableCell className=\\\"font-medium\\\">User Dashboard</TableCell>\\n          <TableCell>\\n            <Badge variant=\\\"outline\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n              />\\n              Paid\\n            </Badge>\\n          </TableCell>\\n          <TableCell>UX Team</TableCell>\\n          <TableCell className=\\\"text-right\\\">$7,200</TableCell>\\n        </TableRow>\\n        <TableRow>\\n          <TableCell className=\\\"font-medium\\\">Security Audit</TableCell>\\n          <TableCell>\\n            <Badge variant=\\\"outline\\\">\\n              <span\\n                aria-hidden=\\\"true\\\"\\n                className=\\\"size-1.5 rounded-full bg-red-500\\\"\\n              />\\n              Failed\\n            </Badge>\\n          </TableCell>\\n          <TableCell>Security Team</TableCell>\\n          <TableCell className=\\\"text-right\\\">$2,100</TableCell>\\n        </TableRow>\\n      </TableBody>\\n      <TableFooter>\\n        <TableRow>\\n          <TableCell colSpan={3}>Total Budget</TableCell>\\n          <TableCell className=\\\"text-right\\\">$39,550</TableCell>\\n        </TableRow>\\n      </TableFooter>\\n    </Table>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n    \"colSpan\": 2\n  },\n  \"categories\": [\n    \"table\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-table-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-table-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Framed table\",\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/frame\",\n    \"@coss/table\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-table-2.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Frame } from \\\"@/registry/default/ui/frame\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Frame className=\\\"w-full\\\">\\n      <Table>\\n        <TableHeader>\\n          <TableRow>\\n            <TableHead>Project</TableHead>\\n            <TableHead>Status</TableHead>\\n            <TableHead>Team</TableHead>\\n            <TableHead className=\\\"text-right\\\">Budget</TableHead>\\n          </TableRow>\\n        </TableHeader>\\n        <TableBody>\\n          <TableRow>\\n            <TableCell className=\\\"font-medium\\\">Website Redesign</TableCell>\\n            <TableCell>\\n              <Badge variant=\\\"outline\\\">\\n                <span\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n                />\\n                Paid\\n              </Badge>\\n            </TableCell>\\n            <TableCell>Frontend Team</TableCell>\\n            <TableCell className=\\\"text-right\\\">$12,500</TableCell>\\n          </TableRow>\\n          <TableRow>\\n            <TableCell className=\\\"font-medium\\\">Mobile App</TableCell>\\n            <TableCell>\\n              <Badge variant=\\\"outline\\\">\\n                <span\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"size-1.5 rounded-full bg-muted-foreground/64\\\"\\n                />\\n                Unpaid\\n              </Badge>\\n            </TableCell>\\n            <TableCell>Mobile Team</TableCell>\\n            <TableCell className=\\\"text-right\\\">$8,750</TableCell>\\n          </TableRow>\\n          <TableRow>\\n            <TableCell className=\\\"font-medium\\\">API Integration</TableCell>\\n            <TableCell>\\n              <Badge variant=\\\"outline\\\">\\n                <span\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"size-1.5 rounded-full bg-amber-500\\\"\\n                />\\n                Pending\\n              </Badge>\\n            </TableCell>\\n            <TableCell>Backend Team</TableCell>\\n            <TableCell className=\\\"text-right\\\">$5,200</TableCell>\\n          </TableRow>\\n          <TableRow>\\n            <TableCell className=\\\"font-medium\\\">Database Migration</TableCell>\\n            <TableCell>\\n              <Badge variant=\\\"outline\\\">\\n                <span\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n                />\\n                Paid\\n              </Badge>\\n            </TableCell>\\n            <TableCell>DevOps Team</TableCell>\\n            <TableCell className=\\\"text-right\\\">$3,800</TableCell>\\n          </TableRow>\\n          <TableRow>\\n            <TableCell className=\\\"font-medium\\\">User Dashboard</TableCell>\\n            <TableCell>\\n              <Badge variant=\\\"outline\\\">\\n                <span\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"size-1.5 rounded-full bg-emerald-500\\\"\\n                />\\n                Paid\\n              </Badge>\\n            </TableCell>\\n            <TableCell>UX Team</TableCell>\\n            <TableCell className=\\\"text-right\\\">$7,200</TableCell>\\n          </TableRow>\\n          <TableRow>\\n            <TableCell className=\\\"font-medium\\\">Security Audit</TableCell>\\n            <TableCell>\\n              <Badge variant=\\\"outline\\\">\\n                <span\\n                  aria-hidden=\\\"true\\\"\\n                  className=\\\"size-1.5 rounded-full bg-red-500\\\"\\n                />\\n                Failed\\n              </Badge>\\n            </TableCell>\\n            <TableCell>Security Team</TableCell>\\n            <TableCell className=\\\"text-right\\\">$2,100</TableCell>\\n          </TableRow>\\n        </TableBody>\\n        <TableFooter>\\n          <TableRow>\\n            <TableCell colSpan={3}>Total Budget</TableCell>\\n            <TableCell className=\\\"text-right\\\">$39,550</TableCell>\\n          </TableRow>\\n        </TableFooter>\\n      </Table>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n    \"colSpan\": 2\n  },\n  \"categories\": [\n    \"frame\",\n    \"table\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-table-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-table-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Table with TanStack Table and checkboxes\",\n  \"dependencies\": [\n    \"@tanstack/react-table\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/checkbox\",\n    \"@coss/frame\",\n    \"@coss/table\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-table-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport type React from \\\"react\\\";\\nimport { useMemo, useState } from \\\"react\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Frame } from \\\"@/registry/default/ui/frame\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableFooter,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Project = {\\n  id: string;\\n  project: string;\\n  status: \\\"Paid\\\" | \\\"Unpaid\\\" | \\\"Pending\\\" | \\\"Failed\\\";\\n  team: string;\\n  budget: number;\\n};\\n\\nconst data: Project[] = [\\n  {\\n    budget: 12500,\\n    id: \\\"1\\\",\\n    project: \\\"Website Redesign\\\",\\n    status: \\\"Paid\\\",\\n    team: \\\"Frontend Team\\\",\\n  },\\n  {\\n    budget: 8750,\\n    id: \\\"2\\\",\\n    project: \\\"Mobile App\\\",\\n    status: \\\"Unpaid\\\",\\n    team: \\\"Mobile Team\\\",\\n  },\\n  {\\n    budget: 5200,\\n    id: \\\"3\\\",\\n    project: \\\"API Integration\\\",\\n    status: \\\"Pending\\\",\\n    team: \\\"Backend Team\\\",\\n  },\\n  {\\n    budget: 3800,\\n    id: \\\"4\\\",\\n    project: \\\"Database Migration\\\",\\n    status: \\\"Paid\\\",\\n    team: \\\"DevOps Team\\\",\\n  },\\n  {\\n    budget: 7200,\\n    id: \\\"5\\\",\\n    project: \\\"User Dashboard\\\",\\n    status: \\\"Paid\\\",\\n    team: \\\"UX Team\\\",\\n  },\\n  {\\n    budget: 2100,\\n    id: \\\"6\\\",\\n    project: \\\"Security Audit\\\",\\n    status: \\\"Failed\\\",\\n    team: \\\"Security Team\\\",\\n  },\\n];\\n\\nconst getStatusColor = (status: Project[\\\"status\\\"]) => {\\n  switch (status) {\\n    case \\\"Paid\\\":\\n      return \\\"bg-emerald-500\\\";\\n    case \\\"Unpaid\\\":\\n      return \\\"bg-muted-foreground/64\\\";\\n    case \\\"Pending\\\":\\n      return \\\"bg-amber-500\\\";\\n    case \\\"Failed\\\":\\n      return \\\"bg-red-500\\\";\\n    default:\\n      return \\\"bg-muted-foreground/64\\\";\\n  }\\n};\\n\\nconst getColumns = (): ColumnDef<Project>[] => [\\n  {\\n    cell: ({ row }) => {\\n      const toggleHandler = row.getToggleSelectedHandler();\\n      return (\\n        <Checkbox\\n          aria-label=\\\"Select row\\\"\\n          checked={row.getIsSelected()}\\n          disabled={!row.getCanSelect()}\\n          onCheckedChange={(value) => {\\n            // Create a synthetic event for the handler\\n            const syntheticEvent = {\\n              target: { checked: !!value },\\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\\n            toggleHandler(syntheticEvent);\\n          }}\\n        />\\n      );\\n    },\\n    enableSorting: false,\\n    header: ({ table }) => {\\n      const isAllSelected = table.getIsAllPageRowsSelected();\\n      const isSomeSelected = table.getIsSomePageRowsSelected();\\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\\n      return (\\n        <Checkbox\\n          aria-label=\\\"Select all\\\"\\n          checked={isAllSelected}\\n          indeterminate={isSomeSelected && !isAllSelected}\\n          onCheckedChange={(value) => {\\n            // Create a synthetic event for the handler\\n            const syntheticEvent = {\\n              target: { checked: !!value },\\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\\n            toggleHandler(syntheticEvent);\\n          }}\\n        />\\n      );\\n    },\\n    id: \\\"select\\\",\\n  },\\n  {\\n    accessorKey: \\\"project\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium\\\">{row.getValue(\\\"project\\\")}</div>\\n    ),\\n    header: \\\"Project\\\",\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    cell: ({ row }) => {\\n      const status = row.getValue(\\\"status\\\") as Project[\\\"status\\\"];\\n      return (\\n        <Badge variant=\\\"outline\\\">\\n          <span\\n            aria-hidden=\\\"true\\\"\\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\\n          />\\n          {status}\\n        </Badge>\\n      );\\n    },\\n    header: \\\"Status\\\",\\n  },\\n  {\\n    accessorKey: \\\"team\\\",\\n    header: \\\"Team\\\",\\n  },\\n  {\\n    accessorKey: \\\"budget\\\",\\n    cell: ({ row }) => {\\n      const amount = Number.parseFloat(row.getValue(\\\"budget\\\"));\\n      const formatted = new Intl.NumberFormat(\\\"en-US\\\", {\\n        currency: \\\"USD\\\",\\n        maximumFractionDigits: 0,\\n        minimumFractionDigits: 0,\\n        style: \\\"currency\\\",\\n      }).format(amount);\\n      return <div className=\\\"text-right\\\">{formatted}</div>;\\n    },\\n    header: () => <div className=\\\"text-right\\\">Budget</div>,\\n  },\\n];\\n\\nexport default function Particle() {\\n  const [tableData] = useState<Project[]>(data);\\n  const [rowSelection, setRowSelection] = useState({});\\n\\n  const columns = useMemo(() => getColumns(), []);\\n\\n  const table = useReactTable({\\n    columns,\\n    data: tableData,\\n    enableRowSelection: true,\\n    getCoreRowModel: getCoreRowModel(),\\n    onRowSelectionChange: setRowSelection,\\n    state: {\\n      rowSelection,\\n    },\\n  });\\n\\n  const totalBudget = tableData.reduce(\\n    (sum, project) => sum + project.budget,\\n    0,\\n  );\\n  const formattedTotal = new Intl.NumberFormat(\\\"en-US\\\", {\\n    currency: \\\"USD\\\",\\n    maximumFractionDigits: 0,\\n    minimumFractionDigits: 0,\\n    style: \\\"currency\\\",\\n  }).format(totalBudget);\\n\\n  return (\\n    <Frame className=\\\"w-full\\\">\\n      <Table>\\n        <TableHeader>\\n          {table.getHeaderGroups().map((headerGroup) => (\\n            <TableRow key={headerGroup.id}>\\n              {headerGroup.headers.map((header) => {\\n                return (\\n                  <TableHead key={header.id}>\\n                    {header.isPlaceholder\\n                      ? null\\n                      : flexRender(\\n                          header.column.columnDef.header,\\n                          header.getContext(),\\n                        )}\\n                  </TableHead>\\n                );\\n              })}\\n            </TableRow>\\n          ))}\\n        </TableHeader>\\n        <TableBody>\\n          {table.getRowModel().rows?.length ? (\\n            table.getRowModel().rows.map((row) => (\\n              <TableRow\\n                data-state={row.getIsSelected() && \\\"selected\\\"}\\n                key={row.id}\\n              >\\n                {row.getVisibleCells().map((cell) => (\\n                  <TableCell key={cell.id}>\\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\\n                  </TableCell>\\n                ))}\\n              </TableRow>\\n            ))\\n          ) : (\\n            <TableRow>\\n              <TableCell className=\\\"h-24 text-center\\\" colSpan={columns.length}>\\n                No results.\\n              </TableCell>\\n            </TableRow>\\n          )}\\n        </TableBody>\\n        <TableFooter>\\n          <TableRow>\\n            <TableCell colSpan={4}>Total Budget</TableCell>\\n            <TableCell className=\\\"text-right\\\">{formattedTotal}</TableCell>\\n          </TableRow>\\n        </TableFooter>\\n      </Table>\\n    </Frame>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n    \"colSpan\": 2\n  },\n  \"categories\": [\n    \"checkbox\",\n    \"table\",\n    \"tanstack\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-table-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-table-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Table with TanStack Table, sorting, and pagination\",\n  \"dependencies\": [\n    \"@tanstack/react-table\",\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/button\",\n    \"@coss/checkbox\",\n    \"@coss/frame\",\n    \"@coss/pagination\",\n    \"@coss/select\",\n    \"@coss/table\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-table-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  type ColumnDef,\\n  flexRender,\\n  getCoreRowModel,\\n  getPaginationRowModel,\\n  getSortedRowModel,\\n  type PaginationState,\\n  type SortingState,\\n  useReactTable,\\n} from \\\"@tanstack/react-table\\\";\\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \\\"lucide-react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Checkbox } from \\\"@/registry/default/ui/checkbox\\\";\\nimport { Frame, FrameFooter } from \\\"@/registry/default/ui/frame\\\";\\nimport {\\n  Pagination,\\n  PaginationContent,\\n  PaginationItem,\\n  PaginationNext,\\n  PaginationPrevious,\\n} from \\\"@/registry/default/ui/pagination\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport {\\n  Table,\\n  TableBody,\\n  TableCell,\\n  TableHead,\\n  TableHeader,\\n  TableRow,\\n} from \\\"@/registry/default/ui/table\\\";\\n\\ntype Flight = {\\n  id: string;\\n  flightCode: string;\\n  destination: string;\\n  departureTime: string;\\n  arrivalTime: string;\\n  terminal: string;\\n  duration: string;\\n  status: \\\"On Time\\\" | \\\"Delayed\\\" | \\\"Cancelled\\\" | \\\"Boarding\\\";\\n  gate: string;\\n};\\n\\nconst getStatusColor = (status: Flight[\\\"status\\\"]) => {\\n  switch (status) {\\n    case \\\"On Time\\\":\\n      return \\\"bg-emerald-500\\\";\\n    case \\\"Delayed\\\":\\n      return \\\"bg-amber-500\\\";\\n    case \\\"Cancelled\\\":\\n      return \\\"bg-red-500\\\";\\n    case \\\"Boarding\\\":\\n      return \\\"bg-blue-500\\\";\\n    default:\\n      return \\\"bg-muted-foreground/64\\\";\\n  }\\n};\\n\\nconst columns: ColumnDef<Flight>[] = [\\n  {\\n    cell: ({ row }) => (\\n      <Checkbox\\n        aria-label=\\\"Select row\\\"\\n        checked={row.getIsSelected()}\\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\\n      />\\n    ),\\n    enableSorting: false,\\n    header: ({ table }) => {\\n      const isAllSelected = table.getIsAllPageRowsSelected();\\n      const isSomeSelected = table.getIsSomePageRowsSelected();\\n      return (\\n        <Checkbox\\n          aria-label=\\\"Select all rows\\\"\\n          checked={isAllSelected}\\n          indeterminate={isSomeSelected && !isAllSelected}\\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\\n        />\\n      );\\n    },\\n    id: \\\"select\\\",\\n    size: 28,\\n  },\\n  {\\n    accessorKey: \\\"flightCode\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium font-mono text-muted-foreground\\\">\\n        {row.getValue(\\\"flightCode\\\")}\\n      </div>\\n    ),\\n    header: \\\"Flight\\\",\\n    size: 80,\\n  },\\n  {\\n    accessorKey: \\\"departureTime\\\",\\n    cell: ({ row }) => {\\n      const isCancelled = row.original.status === \\\"Cancelled\\\";\\n      const isDelayed = row.original.status === \\\"Delayed\\\";\\n      return (\\n        <div\\n          className={cn(\\n            \\\"flex items-center gap-1.5 font-normal tabular-nums\\\",\\n            isCancelled && \\\"text-muted-foreground line-through opacity-50\\\",\\n          )}\\n        >\\n          <div className={isDelayed ? \\\"text-warning-foreground\\\" : undefined}>\\n            {row.original.departureTime}\\n          </div>\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\\\"\\n          />\\n          <div\\n            className={cn(\\n              \\\"text-muted-foreground\\\",\\n              isCancelled && \\\"line-through\\\",\\n            )}\\n          >\\n            {row.original.duration}\\n          </div>\\n          <div\\n            aria-hidden=\\\"true\\\"\\n            className=\\\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\\\"\\n          />\\n          <div>{row.original.arrivalTime}</div>\\n        </div>\\n      );\\n    },\\n    header: \\\"Time\\\",\\n    size: 220,\\n  },\\n  {\\n    accessorKey: \\\"destination\\\",\\n    cell: ({ row }) => (\\n      <div className=\\\"font-medium\\\">{row.getValue(\\\"destination\\\")}</div>\\n    ),\\n    header: \\\"Destination\\\",\\n    size: 180,\\n  },\\n  {\\n    accessorKey: \\\"status\\\",\\n    cell: ({ row }) => {\\n      const status = row.getValue(\\\"status\\\") as Flight[\\\"status\\\"];\\n      return (\\n        <Badge variant=\\\"outline\\\">\\n          <span\\n            aria-hidden=\\\"true\\\"\\n            className={cn(\\\"size-1.5 rounded-full\\\", getStatusColor(status))}\\n          />\\n          {status}\\n        </Badge>\\n      );\\n    },\\n    header: \\\"Status\\\",\\n    size: 120,\\n  },\\n  {\\n    accessorKey: \\\"terminal\\\",\\n    cell: ({ row }) => (\\n      <Badge className=\\\"font-normal tabular-nums\\\" size=\\\"lg\\\" variant=\\\"outline\\\">\\n        <PlaneTakeoffIcon />\\n        <span>{row.getValue(\\\"terminal\\\")}</span>\\n      </Badge>\\n    ),\\n    header: \\\"Terminal\\\",\\n    size: 90,\\n  },\\n  {\\n    accessorKey: \\\"gate\\\",\\n    header: \\\"Gate\\\",\\n    size: 80,\\n  },\\n];\\n\\nexport default function Particle() {\\n  const pageSize = 10;\\n\\n  const [pagination, setPagination] = useState<PaginationState>({\\n    pageIndex: 0,\\n    pageSize: pageSize,\\n  });\\n\\n  const [sorting, setSorting] = useState<SortingState>([\\n    {\\n      desc: false,\\n      id: \\\"departureTime\\\",\\n    },\\n  ]);\\n\\n  const table = useReactTable({\\n    columns,\\n    data: flights,\\n    enableSortingRemoval: false,\\n    getCoreRowModel: getCoreRowModel(),\\n    getPaginationRowModel: getPaginationRowModel(),\\n    getSortedRowModel: getSortedRowModel(),\\n    onPaginationChange: setPagination,\\n    onSortingChange: setSorting,\\n    state: {\\n      pagination,\\n      sorting,\\n    },\\n  });\\n\\n  return (\\n    <Frame className=\\\"w-full\\\">\\n      <Table className=\\\"table-fixed\\\">\\n        <TableHeader>\\n          {table.getHeaderGroups().map((headerGroup) => (\\n            <TableRow className=\\\"hover:bg-transparent\\\" key={headerGroup.id}>\\n              {headerGroup.headers.map((header) => {\\n                const columnSize = header.column.getSize();\\n                return (\\n                  <TableHead\\n                    key={header.id}\\n                    style={\\n                      columnSize ? { width: `${columnSize}px` } : undefined\\n                    }\\n                  >\\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\\n                      <div\\n                        className=\\\"flex h-full cursor-pointer select-none items-center justify-between gap-2\\\"\\n                        onClick={header.column.getToggleSortingHandler()}\\n                        onKeyDown={(e) => {\\n                          if (e.key === \\\"Enter\\\" || e.key === \\\" \\\") {\\n                            e.preventDefault();\\n                            header.column.getToggleSortingHandler()?.(e);\\n                          }\\n                        }}\\n                        role=\\\"button\\\"\\n                        tabIndex={0}\\n                      >\\n                        {flexRender(\\n                          header.column.columnDef.header,\\n                          header.getContext(),\\n                        )}\\n                        {{\\n                          asc: (\\n                            <ChevronUpIcon\\n                              aria-hidden=\\\"true\\\"\\n                              className=\\\"size-4 shrink-0 opacity-80\\\"\\n                            />\\n                          ),\\n                          desc: (\\n                            <ChevronDownIcon\\n                              aria-hidden=\\\"true\\\"\\n                              className=\\\"size-4 shrink-0 opacity-80\\\"\\n                            />\\n                          ),\\n                        }[header.column.getIsSorted() as string] ?? null}\\n                      </div>\\n                    ) : (\\n                      flexRender(\\n                        header.column.columnDef.header,\\n                        header.getContext(),\\n                      )\\n                    )}\\n                  </TableHead>\\n                );\\n              })}\\n            </TableRow>\\n          ))}\\n        </TableHeader>\\n        <TableBody>\\n          {table.getRowModel().rows.length ? (\\n            table.getRowModel().rows.map((row) => (\\n              <TableRow\\n                data-state={row.getIsSelected() ? \\\"selected\\\" : undefined}\\n                key={row.id}\\n              >\\n                {row.getVisibleCells().map((cell) => (\\n                  <TableCell key={cell.id}>\\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\\n                  </TableCell>\\n                ))}\\n              </TableRow>\\n            ))\\n          ) : (\\n            <TableRow>\\n              <TableCell className=\\\"h-24 text-center\\\" colSpan={columns.length}>\\n                No results.\\n              </TableCell>\\n            </TableRow>\\n          )}\\n        </TableBody>\\n      </Table>\\n      <FrameFooter className=\\\"p-2\\\">\\n        <div className=\\\"flex items-center justify-between gap-2\\\">\\n          {/* Results range selector */}\\n          <div className=\\\"flex items-center gap-2 whitespace-nowrap\\\">\\n            <p className=\\\"text-muted-foreground text-sm\\\">Viewing</p>\\n            <Select\\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\\n                const start = i * table.getState().pagination.pageSize + 1;\\n                const end = Math.min(\\n                  (i + 1) * table.getState().pagination.pageSize,\\n                  table.getRowCount(),\\n                );\\n                const pageNum = i + 1;\\n                return { label: `${start}-${end}`, value: pageNum };\\n              })}\\n              onValueChange={(value) => {\\n                table.setPageIndex((value as number) - 1);\\n              }}\\n              value={table.getState().pagination.pageIndex + 1}\\n            >\\n              <SelectTrigger\\n                aria-label=\\\"Select result range\\\"\\n                className=\\\"w-fit min-w-none\\\"\\n                size=\\\"sm\\\"\\n              >\\n                <SelectValue />\\n              </SelectTrigger>\\n              <SelectPopup>\\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\\n                  const start = i * table.getState().pagination.pageSize + 1;\\n                  const end = Math.min(\\n                    (i + 1) * table.getState().pagination.pageSize,\\n                    table.getRowCount(),\\n                  );\\n                  const pageNum = i + 1;\\n                  return (\\n                    <SelectItem key={pageNum} value={pageNum}>\\n                      {`${start}-${end}`}\\n                    </SelectItem>\\n                  );\\n                })}\\n              </SelectPopup>\\n            </Select>\\n            <p className=\\\"text-muted-foreground text-sm\\\">\\n              of{\\\" \\\"}\\n              <strong className=\\\"font-medium text-foreground\\\">\\n                {table.getRowCount()}\\n              </strong>{\\\" \\\"}\\n              results\\n            </p>\\n          </div>\\n\\n          {/* Pagination */}\\n          <Pagination className=\\\"justify-end\\\">\\n            <PaginationContent>\\n              <PaginationItem>\\n                <PaginationPrevious\\n                  className=\\\"sm:*:[svg]:hidden\\\"\\n                  render={\\n                    <Button\\n                      disabled={!table.getCanPreviousPage()}\\n                      onClick={() => table.previousPage()}\\n                      size=\\\"sm\\\"\\n                      variant=\\\"outline\\\"\\n                    />\\n                  }\\n                />\\n              </PaginationItem>\\n              <PaginationItem>\\n                <PaginationNext\\n                  className=\\\"sm:*:[svg]:hidden\\\"\\n                  render={\\n                    <Button\\n                      disabled={!table.getCanNextPage()}\\n                      onClick={() => table.nextPage()}\\n                      size=\\\"sm\\\"\\n                      variant=\\\"outline\\\"\\n                    />\\n                  }\\n                />\\n              </PaginationItem>\\n            </PaginationContent>\\n          </Pagination>\\n        </div>\\n      </FrameFooter>\\n    </Frame>\\n  );\\n}\\n\\nconst flights: Flight[] = [\\n  {\\n    arrivalTime: \\\"11:45\\\",\\n    departureTime: \\\"08:30\\\",\\n    destination: \\\"Los Angeles\\\",\\n    duration: \\\"5h 15m\\\",\\n    flightCode: \\\"AA1234\\\",\\n    gate: \\\"A12\\\",\\n    id: \\\"1\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"17:10\\\",\\n    departureTime: \\\"14:20\\\",\\n    destination: \\\"San Francisco\\\",\\n    duration: \\\"4h 50m\\\",\\n    flightCode: \\\"DL5678\\\",\\n    gate: \\\"B24\\\",\\n    id: \\\"2\\\",\\n    status: \\\"Delayed\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"13:30\\\",\\n    departureTime: \\\"10:15\\\",\\n    destination: \\\"Miami\\\",\\n    duration: \\\"3h 15m\\\",\\n    flightCode: \\\"UA9012\\\",\\n    gate: \\\"C8\\\",\\n    id: \\\"3\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"18:20\\\",\\n    departureTime: \\\"16:45\\\",\\n    destination: \\\"Seattle\\\",\\n    duration: \\\"2h 35m\\\",\\n    flightCode: \\\"SW3456\\\",\\n    gate: \\\"D15\\\",\\n    id: \\\"4\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"3\\\",\\n  },\\n  {\\n    arrivalTime: \\\"12:30\\\",\\n    departureTime: \\\"09:00\\\",\\n    destination: \\\"Salt Lake City\\\",\\n    duration: \\\"5h 30m\\\",\\n    flightCode: \\\"JB7890\\\",\\n    gate: \\\"E3\\\",\\n    id: \\\"5\\\",\\n    status: \\\"Cancelled\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"14:15\\\",\\n    departureTime: \\\"11:30\\\",\\n    destination: \\\"Phoenix\\\",\\n    duration: \\\"2h 45m\\\",\\n    flightCode: \\\"AS2345\\\",\\n    gate: \\\"F7\\\",\\n    id: \\\"6\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"20:30\\\",\\n    departureTime: \\\"13:00\\\",\\n    destination: \\\"Las Vegas\\\",\\n    duration: \\\"5h 30m\\\",\\n    flightCode: \\\"HA6789\\\",\\n    gate: \\\"G12\\\",\\n    id: \\\"7\\\",\\n    status: \\\"Delayed\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"09:00\\\",\\n    departureTime: \\\"07:15\\\",\\n    destination: \\\"Dallas\\\",\\n    duration: \\\"1h 45m\\\",\\n    flightCode: \\\"FX0123\\\",\\n    gate: \\\"H5\\\",\\n    id: \\\"8\\\",\\n    status: \\\"Boarding\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"08:30\\\",\\n    departureTime: \\\"06:00\\\",\\n    destination: \\\"Denver\\\",\\n    duration: \\\"2h 30m\\\",\\n    flightCode: \\\"WN4567\\\",\\n    gate: \\\"I9\\\",\\n    id: \\\"9\\\",\\n    status: \\\"Boarding\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"15:20\\\",\\n    departureTime: \\\"12:45\\\",\\n    destination: \\\"Portland\\\",\\n    duration: \\\"2h 35m\\\",\\n    flightCode: \\\"B61234\\\",\\n    gate: \\\"J14\\\",\\n    id: \\\"10\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"3\\\",\\n  },\\n  {\\n    arrivalTime: \\\"18:45\\\",\\n    departureTime: \\\"15:30\\\",\\n    destination: \\\"Atlanta\\\",\\n    duration: \\\"3h 15m\\\",\\n    flightCode: \\\"NK8901\\\",\\n    gate: \\\"K6\\\",\\n    id: \\\"11\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"12:00\\\",\\n    departureTime: \\\"09:45\\\",\\n    destination: \\\"Chicago\\\",\\n    duration: \\\"2h 15m\\\",\\n    flightCode: \\\"F92345\\\",\\n    gate: \\\"L11\\\",\\n    id: \\\"12\\\",\\n    status: \\\"Delayed\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"14:15\\\",\\n    departureTime: \\\"11:00\\\",\\n    destination: \\\"Boston\\\",\\n    duration: \\\"3h 15m\\\",\\n    flightCode: \\\"SY6789\\\",\\n    gate: \\\"M3\\\",\\n    id: \\\"13\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"16:45\\\",\\n    departureTime: \\\"13:30\\\",\\n    destination: \\\"New York\\\",\\n    duration: \\\"3h 15m\\\",\\n    flightCode: \\\"G40123\\\",\\n    gate: \\\"N8\\\",\\n    id: \\\"14\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"3\\\",\\n  },\\n  {\\n    arrivalTime: \\\"11:20\\\",\\n    departureTime: \\\"08:00\\\",\\n    destination: \\\"Washington\\\",\\n    duration: \\\"3h 20m\\\",\\n    flightCode: \\\"YX5678\\\",\\n    gate: \\\"O12\\\",\\n    id: \\\"15\\\",\\n    status: \\\"Delayed\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"13:50\\\",\\n    departureTime: \\\"10:30\\\",\\n    destination: \\\"Orlando\\\",\\n    duration: \\\"3h 20m\\\",\\n    flightCode: \\\"4U9012\\\",\\n    gate: \\\"P5\\\",\\n    id: \\\"16\\\",\\n    status: \\\"Delayed\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"16:30\\\",\\n    departureTime: \\\"14:00\\\",\\n    destination: \\\"Houston\\\",\\n    duration: \\\"2h 30m\\\",\\n    flightCode: \\\"QF3456\\\",\\n    gate: \\\"Q9\\\",\\n    id: \\\"17\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"3\\\",\\n  },\\n  {\\n    arrivalTime: \\\"10:00\\\",\\n    departureTime: \\\"07:30\\\",\\n    destination: \\\"Minneapolis\\\",\\n    duration: \\\"2h 30m\\\",\\n    flightCode: \\\"LH7890\\\",\\n    gate: \\\"R7\\\",\\n    id: \\\"18\\\",\\n    status: \\\"Cancelled\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"19:30\\\",\\n    departureTime: \\\"16:15\\\",\\n    destination: \\\"Detroit\\\",\\n    duration: \\\"3h 15m\\\",\\n    flightCode: \\\"KL2345\\\",\\n    gate: \\\"S4\\\",\\n    id: \\\"19\\\",\\n    status: \\\"Cancelled\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"15:10\\\",\\n    departureTime: \\\"12:00\\\",\\n    destination: \\\"Philadelphia\\\",\\n    duration: \\\"3h 10m\\\",\\n    flightCode: \\\"AF6789\\\",\\n    gate: \\\"T16\\\",\\n    id: \\\"20\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"3\\\",\\n  },\\n  {\\n    arrivalTime: \\\"12:25\\\",\\n    departureTime: \\\"09:15\\\",\\n    destination: \\\"Charlotte\\\",\\n    duration: \\\"3h 10m\\\",\\n    flightCode: \\\"BA0123\\\",\\n    gate: \\\"U10\\\",\\n    id: \\\"21\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"18:00\\\",\\n    departureTime: \\\"15:45\\\",\\n    destination: \\\"Nashville\\\",\\n    duration: \\\"2h 15m\\\",\\n    flightCode: \\\"IB4567\\\",\\n    gate: \\\"V8\\\",\\n    id: \\\"22\\\",\\n    status: \\\"Delayed\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"14:00\\\",\\n    departureTime: \\\"11:45\\\",\\n    destination: \\\"Austin\\\",\\n    duration: \\\"2h 15m\\\",\\n    flightCode: \\\"EK8901\\\",\\n    gate: \\\"W13\\\",\\n    id: \\\"23\\\",\\n    status: \\\"Cancelled\\\",\\n    terminal: \\\"3\\\",\\n  },\\n  {\\n    arrivalTime: \\\"16:40\\\",\\n    departureTime: \\\"13:15\\\",\\n    destination: \\\"Tampa\\\",\\n    duration: \\\"3h 25m\\\",\\n    flightCode: \\\"QR2345\\\",\\n    gate: \\\"X6\\\",\\n    id: \\\"24\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"11:30\\\",\\n    departureTime: \\\"08:45\\\",\\n    destination: \\\"Raleigh\\\",\\n    duration: \\\"2h 45m\\\",\\n    flightCode: \\\"TK6789\\\",\\n    gate: \\\"Y11\\\",\\n    id: \\\"25\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"12:45\\\",\\n    departureTime: \\\"10:00\\\",\\n    destination: \\\"Indianapolis\\\",\\n    duration: \\\"2h 45m\\\",\\n    flightCode: \\\"VS3456\\\",\\n    gate: \\\"Z4\\\",\\n    id: \\\"26\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"20:00\\\",\\n    departureTime: \\\"17:30\\\",\\n    destination: \\\"Kansas City\\\",\\n    duration: \\\"2h 30m\\\",\\n    flightCode: \\\"LX7890\\\",\\n    gate: \\\"A8\\\",\\n    id: \\\"27\\\",\\n    status: \\\"Delayed\\\",\\n    terminal: \\\"3\\\",\\n  },\\n  {\\n    arrivalTime: \\\"15:20\\\",\\n    departureTime: \\\"12:30\\\",\\n    destination: \\\"Columbus\\\",\\n    duration: \\\"2h 50m\\\",\\n    flightCode: \\\"OS1234\\\",\\n    gate: \\\"B19\\\",\\n    id: \\\"28\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"1\\\",\\n  },\\n  {\\n    arrivalTime: \\\"20:15\\\",\\n    departureTime: \\\"18:00\\\",\\n    destination: \\\"Milwaukee\\\",\\n    duration: \\\"2h 15m\\\",\\n    flightCode: \\\"SN5678\\\",\\n    gate: \\\"C22\\\",\\n    id: \\\"29\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"2\\\",\\n  },\\n  {\\n    arrivalTime: \\\"21:30\\\",\\n    departureTime: \\\"19:15\\\",\\n    destination: \\\"Memphis\\\",\\n    duration: \\\"2h 15m\\\",\\n    flightCode: \\\"TP9012\\\",\\n    gate: \\\"D6\\\",\\n    id: \\\"30\\\",\\n    status: \\\"On Time\\\",\\n    terminal: \\\"3\\\",\\n  },\\n];\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n    \"colSpan\": 2\n  },\n  \"categories\": [\n    \"checkbox\",\n    \"pagination\",\n    \"select\",\n    \"table\",\n    \"tanstack\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic tabs\",\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-1.tsx\",\n      \"content\": \"import { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <TabsList>\\n        <TabsTab value=\\\"tab-1\\\">Tab 1</TabsTab>\\n        <TabsTab value=\\\"tab-2\\\">Tab 2</TabsTab>\\n        <TabsTab value=\\\"tab-3\\\">Tab 3</TabsTab>\\n      </TabsList>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 1 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 2 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 3 content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with count badge\",\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-10.tsx\",\n      \"content\": \"import { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <TabsList>\\n        <TabsTab value=\\\"tab-1\\\">\\n          All\\n          <Badge\\n            className=\\\"not-in-data-active:text-muted-foreground\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            128\\n          </Badge>\\n        </TabsTab>\\n        <TabsTab value=\\\"tab-2\\\">\\n          Pending\\n          <Badge\\n            className=\\\"not-in-data-active:text-muted-foreground\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            8\\n          </Badge>\\n        </TabsTab>\\n        <TabsTab value=\\\"tab-3\\\">\\n          Completed\\n          <Badge\\n            className=\\\"not-in-data-active:text-muted-foreground\\\"\\n            variant=\\\"outline\\\"\\n          >\\n            120\\n          </Badge>\\n        </TabsTab>\\n      </TabsList>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          All items content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Pending items content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Completed items content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\",\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical tabs with underline and icon before name\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-11.tsx\",\n      \"content\": \"import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \\\"lucide-react\\\";\\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs\\n      className=\\\"w-full flex-row\\\"\\n      defaultValue=\\\"tab-1\\\"\\n      orientation=\\\"vertical\\\"\\n    >\\n      <div className=\\\"border-s\\\">\\n        <TabsList variant=\\\"underline\\\">\\n          <TabsTab value=\\\"tab-1\\\">\\n            <HouseIcon aria-hidden=\\\"true\\\" />\\n            Overview\\n          </TabsTab>\\n          <TabsTab value=\\\"tab-2\\\">\\n            <PanelsTopLeftIcon aria-hidden=\\\"true\\\" />\\n            Projects\\n          </TabsTab>\\n          <TabsTab value=\\\"tab-3\\\">\\n            <SettingsIcon aria-hidden=\\\"true\\\" />\\n            Settings\\n          </TabsTab>\\n        </TabsList>\\n      </div>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Overview content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Projects content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Settings content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n  },\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with icon only and count badge\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/badge\",\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-12.tsx\",\n      \"content\": \"import { HouseIcon, InboxIcon, SettingsIcon } from \\\"lucide-react\\\";\\nimport { Badge } from \\\"@/registry/default/ui/badge\\\";\\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList>\\n        <TabsTab aria-label=\\\"Overview\\\" className=\\\"size-10!\\\" value=\\\"tab-1\\\">\\n          <HouseIcon aria-hidden=\\\"true\\\" />\\n        </TabsTab>\\n        <TabsTab aria-label=\\\"Inbox\\\" className=\\\"size-10!\\\" value=\\\"tab-2\\\">\\n          <InboxIcon aria-hidden=\\\"true\\\" />\\n          <Badge\\n            className=\\\"absolute end-0 top-0 rounded-full not-in-data-active:opacity-64\\\"\\n            size=\\\"sm\\\"\\n          >\\n            5\\n          </Badge>\\n        </TabsTab>\\n        <TabsTab aria-label=\\\"Settings\\\" className=\\\"size-10!\\\" value=\\\"tab-3\\\">\\n          <SettingsIcon aria-hidden=\\\"true\\\" />\\n        </TabsTab>\\n      </TabsList>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Overview content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Inbox content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Settings content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\",\n    \"badge\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with icon only and grouped tooltips\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/tabs\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-13.tsx\",\n      \"content\": \"import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \\\"lucide-react\\\";\\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <TooltipProvider>\\n      <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n        <TabsList>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={<TabsTab aria-label=\\\"Overview\\\" value=\\\"tab-1\\\" />}\\n            >\\n              <HouseIcon aria-hidden=\\\"true\\\" />\\n            </TooltipTrigger>\\n            <TooltipPopup>Overview</TooltipPopup>\\n          </Tooltip>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={<TabsTab aria-label=\\\"Projects\\\" value=\\\"tab-2\\\" />}\\n            >\\n              <PanelsTopLeftIcon aria-hidden=\\\"true\\\" />\\n            </TooltipTrigger>\\n            <TooltipPopup>Projects</TooltipPopup>\\n          </Tooltip>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={<TabsTab aria-label=\\\"Settings\\\" value=\\\"tab-3\\\" />}\\n            >\\n              <SettingsIcon aria-hidden=\\\"true\\\" />\\n            </TooltipTrigger>\\n            <TooltipPopup>Settings</TooltipPopup>\\n          </Tooltip>\\n        </TabsList>\\n        <TabsPanel value=\\\"tab-1\\\">\\n          <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n            Overview content\\n          </p>\\n        </TabsPanel>\\n        <TabsPanel value=\\\"tab-2\\\">\\n          <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n            Projects content\\n          </p>\\n        </TabsPanel>\\n        <TabsPanel value=\\\"tab-3\\\">\\n          <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n            Settings content\\n          </p>\\n        </TabsPanel>\\n      </Tabs>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\",\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with underline\",\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-2.tsx\",\n      \"content\": \"import { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <div className=\\\"border-b\\\">\\n        <TabsList variant=\\\"underline\\\">\\n          <TabsTab value=\\\"tab-1\\\">Tab 1</TabsTab>\\n          <TabsTab value=\\\"tab-2\\\">Tab 2</TabsTab>\\n          <TabsTab value=\\\"tab-3\\\">Tab 3</TabsTab>\\n        </TabsList>\\n      </div>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 1 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 2 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 3 content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical tabs\",\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-3.tsx\",\n      \"content\": \"import { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs className=\\\"w-full\\\" defaultValue=\\\"tab-1\\\" orientation=\\\"vertical\\\">\\n      <TabsList>\\n        <TabsTab value=\\\"tab-1\\\">Tab 1</TabsTab>\\n        <TabsTab value=\\\"tab-2\\\">Tab 2</TabsTab>\\n        <TabsTab value=\\\"tab-3\\\">Tab 3</TabsTab>\\n      </TabsList>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 1 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 2 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 3 content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n  },\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical tabs with underline\",\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-4.tsx\",\n      \"content\": \"import { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs\\n      className=\\\"w-full flex-row\\\"\\n      defaultValue=\\\"tab-1\\\"\\n      orientation=\\\"vertical\\\"\\n    >\\n      <div className=\\\"border-s\\\">\\n        <TabsList variant=\\\"underline\\\">\\n          <TabsTab value=\\\"tab-1\\\">Tab 1</TabsTab>\\n          <TabsTab value=\\\"tab-2\\\">Tab 2</TabsTab>\\n          <TabsTab value=\\\"tab-3\\\">Tab 3</TabsTab>\\n        </TabsList>\\n      </div>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 1 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 2 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 3 content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n  },\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with full rounded triggers\",\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-5.tsx\",\n      \"content\": \"import { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <TabsList className=\\\"[--radius:9999px]\\\">\\n        <TabsTab value=\\\"tab-1\\\">Tab 1</TabsTab>\\n        <TabsTab value=\\\"tab-2\\\">Tab 2</TabsTab>\\n        <TabsTab value=\\\"tab-3\\\">Tab 3</TabsTab>\\n      </TabsList>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 1 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 2 content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Tab 3 content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with icon before name\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-6.tsx\",\n      \"content\": \"import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \\\"lucide-react\\\";\\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <TabsList>\\n        <TabsTab value=\\\"tab-1\\\">\\n          <HouseIcon aria-hidden=\\\"true\\\" />\\n          Overview\\n        </TabsTab>\\n        <TabsTab value=\\\"tab-2\\\">\\n          <PanelsTopLeftIcon aria-hidden=\\\"true\\\" />\\n          Projects\\n        </TabsTab>\\n        <TabsTab value=\\\"tab-3\\\">\\n          <SettingsIcon aria-hidden=\\\"true\\\" />\\n          Settings\\n        </TabsTab>\\n      </TabsList>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Overview content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Projects content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Settings content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with icon before name and underline\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-7.tsx\",\n      \"content\": \"import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \\\"lucide-react\\\";\\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs defaultValue=\\\"tab-1\\\">\\n      <div className=\\\"border-b\\\">\\n        <TabsList variant=\\\"underline\\\">\\n          <TabsTab value=\\\"tab-1\\\">\\n            <HouseIcon aria-hidden=\\\"true\\\" />\\n            Overview\\n          </TabsTab>\\n          <TabsTab value=\\\"tab-2\\\">\\n            <PanelsTopLeftIcon aria-hidden=\\\"true\\\" />\\n            Projects\\n          </TabsTab>\\n          <TabsTab value=\\\"tab-3\\\">\\n            <SettingsIcon aria-hidden=\\\"true\\\" />\\n            Settings\\n          </TabsTab>\\n        </TabsList>\\n      </div>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Overview content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Projects content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Settings content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with icon only\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-8.tsx\",\n      \"content\": \"import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \\\"lucide-react\\\";\\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <TabsList>\\n        <TabsTab aria-label=\\\"Overview\\\" value=\\\"tab-1\\\">\\n          <HouseIcon aria-hidden=\\\"true\\\" />\\n        </TabsTab>\\n        <TabsTab aria-label=\\\"Projects\\\" value=\\\"tab-2\\\">\\n          <PanelsTopLeftIcon aria-hidden=\\\"true\\\" />\\n        </TabsTab>\\n        <TabsTab aria-label=\\\"Settings\\\" value=\\\"tab-3\\\">\\n          <SettingsIcon aria-hidden=\\\"true\\\" />\\n        </TabsTab>\\n      </TabsList>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Overview content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Projects content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Settings content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tabs-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tabs-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Tabs with underline and icon on top\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/tabs\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tabs-9.tsx\",\n      \"content\": \"import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \\\"lucide-react\\\";\\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \\\"@/registry/default/ui/tabs\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tabs className=\\\"items-center\\\" defaultValue=\\\"tab-1\\\">\\n      <div className=\\\"border-b\\\">\\n        <TabsList variant=\\\"underline\\\">\\n          <TabsTab\\n            className=\\\"h-auto! flex-col gap-1.5 py-[calc(--spacing(2)-1px)]\\\"\\n            value=\\\"tab-1\\\"\\n          >\\n            <HouseIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Overview\\n          </TabsTab>\\n          <TabsTab\\n            className=\\\"h-auto! flex-col gap-1.5 py-[calc(--spacing(2)-1px)]\\\"\\n            value=\\\"tab-2\\\"\\n          >\\n            <PanelsTopLeftIcon\\n              aria-hidden=\\\"true\\\"\\n              className=\\\"opacity-60\\\"\\n              size={16}\\n            />\\n            Projects\\n          </TabsTab>\\n          <TabsTab\\n            className=\\\"h-auto! flex-col gap-1.5 py-[calc(--spacing(2.5)-1px)]\\\"\\n            value=\\\"tab-3\\\"\\n          >\\n            <BoxIcon aria-hidden=\\\"true\\\" className=\\\"opacity-60\\\" size={16} />\\n            Packages\\n          </TabsTab>\\n        </TabsList>\\n      </div>\\n      <TabsPanel value=\\\"tab-1\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Overview content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-2\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Projects content\\n        </p>\\n      </TabsPanel>\\n      <TabsPanel value=\\\"tab-3\\\">\\n        <p className=\\\"p-4 text-center text-muted-foreground text-xs\\\">\\n          Packages content\\n        </p>\\n      </TabsPanel>\\n    </Tabs>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tabs\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic textarea\",\n  \"registryDependencies\": [\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-1.tsx\",\n      \"content\": \"import { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return <Textarea placeholder=\\\"Type your message here\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-10.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-10\",\n  \"type\": \"registry:block\",\n  \"description\": \"Read-only textarea\",\n  \"registryDependencies\": [\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-10.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <Textarea\\n      className=\\\"read-only:bg-muted\\\"\\n      defaultValue=\\\"This is a read-only textarea\\\"\\n      id={id}\\n      readOnly\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-11.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-11\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea with characters remaining counter\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-11.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Field, FieldDescription } from \\\"@/registry/default/ui/field\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  const maxLength = 280;\\n  const [value, setValue] = useState(\\\"\\\");\\n\\n  return (\\n    <Field>\\n      <Textarea\\n        aria-label=\\\"Message\\\"\\n        maxLength={maxLength}\\n        onChange={(e) => setValue(e.target.value)}\\n        placeholder=\\\"Type your message here\\\"\\n        value={value}\\n      />\\n      <FieldDescription>\\n        <span className=\\\"tabular-nums\\\">{maxLength - value.length}</span>{\\\" \\\"}\\n        characters left\\n      </FieldDescription>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-12.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-12\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea field with required indicator\",\n  \"registryDependencies\": [\n    \"@coss/field\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-12.tsx\",\n      \"content\": \"import { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Field>\\n      <FieldLabel>\\n        Message <span className=\\\"text-destructive-foreground\\\">*</span>\\n      </FieldLabel>\\n      <Textarea placeholder=\\\"Type your message here\\\" required />\\n      <FieldError>Please fill out this field.</FieldError>\\n    </Field>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"field\",\n    \"label\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-13.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-13\",\n  \"type\": \"registry:block\",\n  \"description\": \"Shorter textarea with fixed height\",\n  \"registryDependencies\": [\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-13.tsx\",\n      \"content\": \"import { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Textarea\\n      className=\\\"*:field-sizing-fixed *:min-h-0\\\"\\n      placeholder=\\\"Type your message here\\\"\\n      rows={2}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-14.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-14\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea with button aligned right\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-14.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Textarea placeholder=\\\"Type your message here\\\" />\\n      <Button className=\\\"self-end\\\">Send</Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-15.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-15\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea with button aligned left\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-15.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Textarea placeholder=\\\"Type your message here\\\" />\\n      <Button className=\\\"self-start\\\">Send</Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"button\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small textarea\",\n  \"registryDependencies\": [\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-2.tsx\",\n      \"content\": \"import { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return <Textarea placeholder=\\\"Type your message here\\\" size=\\\"sm\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large textarea\",\n  \"registryDependencies\": [\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-3.tsx\",\n      \"content\": \"import { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return <Textarea placeholder=\\\"Type your message here\\\" size=\\\"lg\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled textarea\",\n  \"registryDependencies\": [\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-4.tsx\",\n      \"content\": \"import { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return <Textarea disabled placeholder=\\\"Can't type here\\\" />;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea with label\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-5.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col items-start gap-2\\\">\\n      <Label htmlFor={id}>Message</Label>\\n      <Textarea id={id} placeholder=\\\"Type your message here\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea in form\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/field\",\n    \"@coss/form\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-6.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { FormEvent } from \\\"react\\\";\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Field, FieldError, FieldLabel } from \\\"@/registry/default/ui/field\\\";\\nimport { Form } from \\\"@/registry/default/ui/form\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  const [loading, setLoading] = useState(false);\\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\\n    e.preventDefault();\\n    const formData = new FormData(e.currentTarget);\\n    setLoading(true);\\n    await new Promise((r) => setTimeout(r, 800));\\n    setLoading(false);\\n    alert(`Message: ${formData.get(\\\"message\\\") || \\\"\\\"}`);\\n  };\\n\\n  return (\\n    <Form className=\\\"max-w-64\\\" onSubmit={onSubmit}>\\n      <Field>\\n        <FieldLabel>Message</FieldLabel>\\n        <Textarea\\n          name=\\\"message\\\"\\n          placeholder=\\\"Type your message here\\\"\\n          required\\n        />\\n        <FieldError>This field is required.</FieldError>\\n      </Field>\\n      <Button loading={loading} type=\\\"submit\\\">\\n        Submit\\n      </Button>\\n    </Form>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea with label and required indicator\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-7.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <Label htmlFor={id}>\\n        Message <span className=\\\"text-destructive\\\">*</span>\\n      </Label>\\n      <Textarea id={id} placeholder=\\\"Type your message here\\\" required />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"label\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea with optional label\",\n  \"registryDependencies\": [\n    \"@coss/label\",\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-8.tsx\",\n      \"content\": \"import { useId } from \\\"react\\\";\\nimport { Label } from \\\"@/registry/default/ui/label\\\";\\nimport { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  const id = useId();\\n  return (\\n    <div className=\\\"flex flex-col gap-2\\\">\\n      <div className=\\\"inline-flex w-full items-center justify-between gap-2\\\">\\n        <Label htmlFor={id}>Message</Label>\\n        <Label className=\\\"font-normal text-muted-foreground\\\" render={<span />}>\\n          Optional\\n        </Label>\\n      </div>\\n      <Textarea id={id} placeholder=\\\"Type your message here\\\" />\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"label\",\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-textarea-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-textarea-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Textarea with custom border and background\",\n  \"registryDependencies\": [\n    \"@coss/textarea\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-textarea-9.tsx\",\n      \"content\": \"import { Textarea } from \\\"@/registry/default/ui/textarea\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Textarea\\n      aria-label=\\\"Message\\\"\\n      className=\\\"border-transparent bg-muted shadow-none before:hidden\\\"\\n      placeholder=\\\"Type your message here\\\"\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"meta\": {\n    \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n  },\n  \"categories\": [\n    \"textarea\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic toast\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { toastManager } from \\\"@/registry/default/ui/toast\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button\\n      onClick={() => {\\n        toastManager.add({\\n          description: \\\"Monday, January 3rd at 6:00pm\\\",\\n          title: \\\"Event has been created\\\",\\n        });\\n      }}\\n      variant=\\\"outline\\\"\\n    >\\n      Default Toast\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toast with status\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-2.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { toastManager } from \\\"@/registry/default/ui/toast\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex flex-wrap gap-2\\\">\\n      <Button\\n        onClick={() => {\\n          toastManager.add({\\n            description: \\\"Your changes have been saved.\\\",\\n            title: \\\"Success!\\\",\\n            type: \\\"success\\\",\\n          });\\n        }}\\n        variant=\\\"outline\\\"\\n      >\\n        Success Toast\\n      </Button>\\n      <Button\\n        onClick={() => {\\n          toastManager.add({\\n            description: \\\"There was a problem with your request.\\\",\\n            title: \\\"Uh oh! Something went wrong.\\\",\\n            type: \\\"error\\\",\\n          });\\n        }}\\n        variant=\\\"outline\\\"\\n      >\\n        Error Toast\\n      </Button>\\n      <Button\\n        onClick={() => {\\n          toastManager.add({\\n            description: \\\"You can add components to your app using the cli.\\\",\\n            title: \\\"Heads up!\\\",\\n            type: \\\"info\\\",\\n          });\\n        }}\\n        variant=\\\"outline\\\"\\n      >\\n        Info Toast\\n      </Button>\\n      <Button\\n        onClick={() => {\\n          toastManager.add({\\n            description: \\\"Your session is about to expire.\\\",\\n            title: \\\"Warning!\\\",\\n            type: \\\"warning\\\",\\n          });\\n        }}\\n        variant=\\\"outline\\\"\\n      >\\n        Warning Toast\\n      </Button>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Loading toast\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { toastManager } from \\\"@/registry/default/ui/toast\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button\\n      onClick={() => {\\n        toastManager.add({\\n          description: \\\"Please wait while we process your request.\\\",\\n          title: \\\"Loading…\\\",\\n          type: \\\"loading\\\",\\n        });\\n      }}\\n      variant=\\\"outline\\\"\\n    >\\n      Loading Toast\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toast with action\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { toastManager } from \\\"@/registry/default/ui/toast\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button\\n      onClick={() => {\\n        const id = toastManager.add({\\n          actionProps: {\\n            children: \\\"Undo\\\",\\n            onClick: () => {\\n              toastManager.close(id);\\n              toastManager.add({\\n                description: \\\"The action has been reverted.\\\",\\n                title: \\\"Action undone\\\",\\n                type: \\\"info\\\",\\n              });\\n            },\\n          },\\n          description: \\\"You can undo this action.\\\",\\n          timeout: 1000000,\\n          title: \\\"Action performed\\\",\\n          type: \\\"success\\\",\\n        });\\n      }}\\n      variant=\\\"outline\\\"\\n    >\\n      Perform Action\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Promise toast\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-5.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { toastManager } from \\\"@/registry/default/ui/toast\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Button\\n      onClick={() => {\\n        toastManager.promise(\\n          new Promise<string>((resolve, reject) => {\\n            const shouldSucceed = Math.random() > 0.3;\\n            setTimeout(() => {\\n              if (shouldSucceed) {\\n                resolve(\\\"Data loaded successfully\\\");\\n              } else {\\n                reject(new Error(\\\"Failed to load data\\\"));\\n              }\\n            }, 2000);\\n          }),\\n          {\\n            error: () => ({\\n              description: \\\"Please try again.\\\",\\n              title: \\\"Something went wrong\\\",\\n            }),\\n            loading: {\\n              description: \\\"The promise is loading.\\\",\\n              title: \\\"Loading…\\\",\\n            },\\n            success: (data: string) => ({\\n              description: `Success: ${data}`,\\n              title: \\\"This is a success toast!\\\",\\n            }),\\n          },\\n        );\\n      }}\\n      variant=\\\"outline\\\"\\n    >\\n      Run Promise\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toast with varying heights\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-6.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { toastManager } from \\\"@/registry/default/ui/toast\\\";\\n\\nconst TEXTS = [\\n  \\\"Short message.\\\",\\n  \\\"A bit longer message that spans two lines.\\\",\\n  \\\"This is a longer description that intentionally takes more vertical space to demonstrate stacking with varying heights.\\\",\\n  \\\"An even longer description that should span multiple lines so we can verify the clamped collapsed height and smooth expansion animation when hovering or focusing the viewport.\\\",\\n];\\n\\nexport default function Particle() {\\n  const [count, setCount] = useState(0);\\n\\n  function createToast() {\\n    setCount((prev) => prev + 1);\\n    const description = TEXTS[Math.floor(Math.random() * TEXTS.length)];\\n    toastManager.add({\\n      description,\\n      title: `Toast ${count + 1} created`,\\n    });\\n  }\\n\\n  return (\\n    <Button onClick={createToast} variant=\\\"outline\\\">\\n      With Varying Heights\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Anchored toast with tooltip style\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/toast\",\n    \"@coss/tooltip\",\n    \"@coss/use-copy-to-clipboard\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-7.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { CheckIcon, CopyIcon } from \\\"lucide-react\\\";\\nimport { useRef } from \\\"react\\\";\\nimport { useCopyToClipboard } from \\\"@/registry/default/hooks/use-copy-to-clipboard\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { anchoredToastManager } from \\\"@/registry/default/ui/toast\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  const copyButtonRef = useRef<HTMLButtonElement>(null);\\n  const toastTimeout = 2000;\\n\\n  const { copyToClipboard, isCopied } = useCopyToClipboard({\\n    onCopy: () => {\\n      if (copyButtonRef.current) {\\n        anchoredToastManager.add({\\n          data: {\\n            tooltipStyle: true,\\n          },\\n          positionerProps: {\\n            anchor: copyButtonRef.current,\\n          },\\n          timeout: toastTimeout,\\n          title: \\\"Copied!\\\",\\n        });\\n      }\\n    },\\n    timeout: toastTimeout,\\n  });\\n\\n  function handleCopy() {\\n    const url = \\\"https://coss.com\\\";\\n    copyToClipboard(url);\\n  }\\n\\n  return (\\n    <Tooltip>\\n      <TooltipTrigger\\n        render={\\n          <Button\\n            aria-label=\\\"Copy link\\\"\\n            disabled={isCopied}\\n            onClick={handleCopy}\\n            ref={copyButtonRef}\\n            size=\\\"icon\\\"\\n            variant=\\\"outline\\\"\\n          />\\n        }\\n      >\\n        {isCopied ? (\\n          <CheckIcon className=\\\"size-4\\\" />\\n        ) : (\\n          <CopyIcon className=\\\"size-4\\\" />\\n        )}\\n      </TooltipTrigger>\\n      <TooltipPopup>\\n        <p>Copy to clipboard</p>\\n      </TooltipPopup>\\n    </Tooltip>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Anchored toast\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/spinner\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-8.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useRef, useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Spinner } from \\\"@/registry/default/ui/spinner\\\";\\nimport { anchoredToastManager } from \\\"@/registry/default/ui/toast\\\";\\n\\nexport default function Particle() {\\n  const submitRef = useRef<HTMLButtonElement>(null);\\n  const [isSubmitting, setIsSubmitting] = useState(false);\\n  const toastIdRef = useRef<string | null>(null);\\n\\n  function handleSubmit() {\\n    if (!submitRef.current || isSubmitting) return;\\n\\n    if (toastIdRef.current) {\\n      anchoredToastManager.close(toastIdRef.current);\\n      toastIdRef.current = null;\\n    }\\n\\n    setIsSubmitting(true);\\n\\n    new Promise<void>((_, reject) => {\\n      setTimeout(() => {\\n        setIsSubmitting(false);\\n        reject(\\n          new Error(\\\"The server is not responding. Please try again later.\\\"),\\n        );\\n      }, 2000);\\n    }).catch((error: Error) => {\\n      toastIdRef.current = anchoredToastManager.add({\\n        description: error.message,\\n        positionerProps: {\\n          anchor: submitRef.current,\\n          sideOffset: 4,\\n        },\\n        title: \\\"Error submitting form\\\",\\n        type: \\\"error\\\",\\n      });\\n    });\\n  }\\n\\n  return (\\n    <Button\\n      disabled={isSubmitting}\\n      onClick={handleSubmit}\\n      ref={submitRef}\\n      variant=\\\"outline\\\"\\n    >\\n      {isSubmitting ? (\\n        <>\\n          <Spinner />\\n          Submitting…\\n        </>\\n      ) : (\\n        \\\"Submit\\\"\\n      )}\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toast-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toast-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Promise toast with cancel action\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toast-9.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { DownloadIcon } from \\\"lucide-react\\\";\\nimport { useEffect, useRef, useState } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { toastManager } from \\\"@/registry/default/ui/toast\\\";\\n\\nexport default function Particle() {\\n  const [isGenerating, setIsGenerating] = useState(false);\\n  const [progress, setProgress] = useState(0);\\n  const abortControllerRef = useRef<AbortController | null>(null);\\n\\n  useEffect(() => {\\n    if (!isGenerating) return;\\n\\n    const interval = setInterval(() => {\\n      setProgress((prev) =>\\n        Math.min(99, prev + Math.round(Math.random() * 8 + 2)),\\n      );\\n    }, 300);\\n\\n    return () => clearInterval(interval);\\n  }, [isGenerating]);\\n\\n  async function handleDownload() {\\n    if (isGenerating) return;\\n\\n    setIsGenerating(true);\\n    setProgress(0);\\n    abortControllerRef.current = new AbortController();\\n\\n    try {\\n      await toastManager.promise(\\n        new Promise<string>((resolve, reject) => {\\n          const shouldSucceed = Math.random() > 0.2;\\n          const timeoutId = setTimeout(() => {\\n            if (shouldSucceed) {\\n              resolve(\\\"Report ready\\\");\\n            } else {\\n              reject(new Error(\\\"Generation failed\\\"));\\n            }\\n          }, 4000);\\n\\n          abortControllerRef.current?.signal.addEventListener(\\\"abort\\\", () => {\\n            clearTimeout(timeoutId);\\n            reject(new DOMException(\\\"Cancelled\\\", \\\"AbortError\\\"));\\n          });\\n        }),\\n        {\\n          error: (err: Error) => {\\n            if (err.name === \\\"AbortError\\\") {\\n              return {\\n                actionProps: undefined,\\n                description: \\\"Report generation was cancelled.\\\",\\n                title: \\\"Cancelled\\\",\\n                type: \\\"info\\\" as const,\\n              };\\n            }\\n            return {\\n              actionProps: undefined,\\n              description: \\\"Please try again later.\\\",\\n              title: \\\"Failed to generate report\\\",\\n            };\\n          },\\n          loading: {\\n            actionProps: {\\n              children: \\\"Cancel\\\",\\n              onClick: () => abortControllerRef.current?.abort(),\\n            },\\n            description: \\\"Your download will begin once ready.\\\",\\n            title: \\\"Generating report…\\\",\\n          },\\n          success: () => ({\\n            actionProps: undefined,\\n            description: \\\"Your file is now downloading.\\\",\\n            title: \\\"Download started\\\",\\n          }),\\n        },\\n      );\\n    } finally {\\n      setIsGenerating(false);\\n      setProgress(0);\\n      abortControllerRef.current = null;\\n    }\\n  }\\n\\n  return (\\n    <Button disabled={isGenerating} onClick={handleDownload} variant=\\\"outline\\\">\\n      {isGenerating ? (\\n        <>\\n          Loading…{\\\" \\\"}\\n          <span className=\\\"tabular-nums\\\">\\n            {progress.toString().padStart(2, \\\"\\\\u2007\\\")}%\\n          </span>\\n        </>\\n      ) : (\\n        <>\\n          <DownloadIcon />\\n          Download\\n        </>\\n      )}\\n    </Button>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toast\",\n    \"button\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic toggle\",\n  \"registryDependencies\": [\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-1.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Particle() {\\n  return <Toggle>Toggle</Toggle>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toggle with outline\",\n  \"registryDependencies\": [\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-2.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Particle() {\\n  return <Toggle variant=\\\"outline\\\">Outline Toggle</Toggle>;\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toggle with icon\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-3.tsx\",\n      \"content\": \"import { BoldIcon } from \\\"lucide-react\\\";\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Toggle aria-label=\\\"Toggle bold\\\" variant=\\\"outline\\\">\\n      <BoldIcon />\\n    </Toggle>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small toggle\",\n  \"registryDependencies\": [\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-4.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Toggle size=\\\"sm\\\" variant=\\\"outline\\\">\\n      Small\\n    </Toggle>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large toggle\",\n  \"registryDependencies\": [\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-5.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Toggle size=\\\"lg\\\" variant=\\\"outline\\\">\\n      Large\\n    </Toggle>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled toggle\",\n  \"registryDependencies\": [\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-6.tsx\",\n      \"content\": \"import { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Toggle disabled variant=\\\"outline\\\">\\n      Disabled\\n    </Toggle>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toggle icon group\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-7.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <div className=\\\"flex items-center gap-1\\\">\\n      <Toggle aria-label=\\\"Toggle bold\\\" variant=\\\"outline\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle italic\\\" variant=\\\"outline\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle underline\\\" variant=\\\"outline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </div>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Bookmark toggle with tooltip and success toast\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/toggle\",\n    \"@coss/tooltip\",\n    \"@coss/toast\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-8.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BookmarkIcon } from \\\"lucide-react\\\";\\nimport { useRef, useState } from \\\"react\\\";\\nimport { anchoredToastManager } from \\\"@/registry/default/ui/toast\\\";\\nimport { Toggle } from \\\"@/registry/default/ui/toggle\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  const [bookmarked, setBookmarked] = useState(false);\\n  const toggleRef = useRef<HTMLDivElement>(null);\\n  const toastIdRef = useRef<string | null>(null);\\n  const toastTimeout = 2000;\\n\\n  function handleToggleChange(pressed: boolean) {\\n    setBookmarked(pressed);\\n\\n    if (toastIdRef.current) {\\n      anchoredToastManager.close(toastIdRef.current);\\n      toastIdRef.current = null;\\n    }\\n\\n    if (pressed && toggleRef.current) {\\n      toastIdRef.current = anchoredToastManager.add({\\n        data: {\\n          tooltipStyle: true,\\n        },\\n        positionerProps: {\\n          anchor: toggleRef.current,\\n        },\\n        timeout: toastTimeout,\\n        title: \\\"Bookmarked!\\\",\\n        type: \\\"success\\\",\\n      });\\n    }\\n  }\\n\\n  return (\\n    <Tooltip>\\n      <TooltipTrigger\\n        render={\\n          <div ref={toggleRef}>\\n            <Toggle\\n              aria-label={bookmarked ? \\\"Remove bookmark\\\" : \\\"Bookmark this\\\"}\\n              onPressedChange={handleToggleChange}\\n              pressed={bookmarked}\\n            >\\n              <BookmarkIcon aria-hidden=\\\"true\\\" />\\n            </Toggle>\\n          </div>\\n        }\\n      />\\n      <TooltipPopup>\\n        <p>{bookmarked ? \\\"Remove bookmark\\\" : \\\"Bookmark this\\\"}</p>\\n      </TooltipPopup>\\n    </Tooltip>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"tooltip\",\n    \"toast\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic toggle group\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-1.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ToggleGroup defaultValue={[\\\"bold\\\"]}>\\n      <Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Small toggle group\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-2.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ToggleGroup defaultValue={[\\\"bold\\\"]} size=\\\"sm\\\">\\n      <Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Large toggle group\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-3.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ToggleGroup defaultValue={[\\\"bold\\\"]} size=\\\"lg\\\">\\n      <Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toggle group with outline\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-4.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport {\\n  Toggle,\\n  ToggleGroup,\\n  ToggleGroupSeparator,\\n} from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ToggleGroup defaultValue={[\\\"bold\\\"]} variant=\\\"outline\\\">\\n      <Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <ToggleGroupSeparator />\\n      <Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <ToggleGroupSeparator />\\n      <Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-5.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-5\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical toggle group with outline\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-5.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport {\\n  Toggle,\\n  ToggleGroup,\\n  ToggleGroupSeparator,\\n} from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ToggleGroup\\n      defaultValue={[\\\"bold\\\"]}\\n      orientation=\\\"vertical\\\"\\n      variant=\\\"outline\\\"\\n    >\\n      <Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <ToggleGroupSeparator orientation=\\\"horizontal\\\" />\\n      <Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <ToggleGroupSeparator orientation=\\\"horizontal\\\" />\\n      <Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-6.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-6\",\n  \"type\": \"registry:block\",\n  \"description\": \"Disabled toggle group\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-6.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ToggleGroup defaultValue={[\\\"bold\\\"]} disabled>\\n      <Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-7.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-7\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toggle group with disabled item\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-7.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function ParticleItem() {\\n  return (\\n    <ToggleGroup defaultValue={[\\\"bold\\\"]}>\\n      <Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle italic\\\" disabled value=\\\"italic\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-8.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-8\",\n  \"type\": \"registry:block\",\n  \"description\": \"Multiple selection toggle group\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-8.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <ToggleGroup defaultValue={[\\\"bold\\\"]} multiple>\\n      <Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\">\\n        <BoldIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\">\\n        <ItalicIcon />\\n      </Toggle>\\n      <Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\">\\n        <UnderlineIcon />\\n      </Toggle>\\n    </ToggleGroup>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toggle-group-9.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toggle-group-9\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toggle group with tooltips\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toggle-group-9.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <TooltipProvider>\\n      <ToggleGroup defaultValue={[\\\"bold\\\"]} multiple>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={<Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\" />}\\n          >\\n            <BoldIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Bold</TooltipPopup>\\n        </Tooltip>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={<Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\" />}\\n          >\\n            <ItalicIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Italic</TooltipPopup>\\n        </Tooltip>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={<Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\" />}\\n          >\\n            <UnderlineIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Underline</TooltipPopup>\\n        </Tooltip>\\n      </ToggleGroup>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toggle\",\n    \"toggle group\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-toolbar-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-toolbar-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toolbar with toggles, buttons, and select\",\n  \"dependencies\": [\n    \"lucide-react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/select\",\n    \"@coss/toggle-group\",\n    \"@coss/toolbar\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-toolbar-1.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport {\\n  AlignCenterIcon,\\n  AlignLeftIcon,\\n  AlignRightIcon,\\n  DollarSignIcon,\\n  PercentIcon,\\n} from \\\"lucide-react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Select,\\n  SelectItem,\\n  SelectPopup,\\n  SelectTrigger,\\n  SelectValue,\\n} from \\\"@/registry/default/ui/select\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\nimport {\\n  Toolbar,\\n  ToolbarButton,\\n  ToolbarGroup,\\n  ToolbarSeparator,\\n} from \\\"@/registry/default/ui/toolbar\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nconst items = [\\n  { label: \\\"Helvetica\\\", value: \\\"helvetica\\\" },\\n  { label: \\\"Arial\\\", value: \\\"arial\\\" },\\n  { label: \\\"Times New Roman\\\", value: \\\"times-new-roman\\\" },\\n];\\n\\nexport default function Particle() {\\n  return (\\n    <TooltipProvider>\\n      <Toolbar>\\n        <ToggleGroup className=\\\"border-none p-0\\\" defaultValue={[\\\"left\\\"]}>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={\\n                <ToolbarButton\\n                  aria-label=\\\"Align left\\\"\\n                  render={<Toggle value=\\\"left\\\" />}\\n                >\\n                  <AlignLeftIcon />\\n                </ToolbarButton>\\n              }\\n            />\\n            <TooltipPopup sideOffset={8}>Align left</TooltipPopup>\\n          </Tooltip>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={\\n                <ToolbarButton\\n                  aria-label=\\\"Align center\\\"\\n                  render={<Toggle aria-label=\\\"Toggle center\\\" value=\\\"center\\\" />}\\n                >\\n                  <AlignCenterIcon />\\n                </ToolbarButton>\\n              }\\n            />\\n            <TooltipPopup sideOffset={8}>Align center</TooltipPopup>\\n          </Tooltip>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={\\n                <ToolbarButton\\n                  aria-label=\\\"Align right\\\"\\n                  render={<Toggle aria-label=\\\"Toggle right\\\" value=\\\"right\\\" />}\\n                >\\n                  <AlignRightIcon />\\n                </ToolbarButton>\\n              }\\n            />\\n            <TooltipPopup sideOffset={8}>Align right</TooltipPopup>\\n          </Tooltip>\\n        </ToggleGroup>\\n        <ToolbarSeparator />\\n        <ToolbarGroup>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={\\n                <ToolbarButton\\n                  aria-label=\\\"Format as currency\\\"\\n                  render={<Button size=\\\"icon\\\" variant=\\\"ghost\\\" />}\\n                >\\n                  <DollarSignIcon />\\n                </ToolbarButton>\\n              }\\n            />\\n            <TooltipPopup sideOffset={8}>Format as currency</TooltipPopup>\\n          </Tooltip>\\n          <Tooltip>\\n            <TooltipTrigger\\n              render={\\n                <ToolbarButton\\n                  aria-label=\\\"Format as percent\\\"\\n                  render={<Button size=\\\"icon\\\" variant=\\\"ghost\\\" />}\\n                >\\n                  <PercentIcon />\\n                </ToolbarButton>\\n              }\\n            />\\n            <TooltipPopup sideOffset={8}>Format as percent</TooltipPopup>\\n          </Tooltip>\\n        </ToolbarGroup>\\n        <ToolbarSeparator />\\n        <ToolbarGroup>\\n          <Select defaultValue=\\\"helvetica\\\" items={items}>\\n            <Tooltip>\\n              <TooltipTrigger\\n                render={\\n                  <ToolbarButton\\n                    render={\\n                      <SelectTrigger>\\n                        <SelectValue />\\n                      </SelectTrigger>\\n                    }\\n                  />\\n                }\\n              />\\n              <TooltipPopup sideOffset={8}>\\n                Select a different font\\n              </TooltipPopup>\\n            </Tooltip>\\n            <SelectPopup>\\n              {items.map(({ label, value }) => (\\n                <SelectItem key={value} value={value}>\\n                  {label}\\n                </SelectItem>\\n              ))}\\n            </SelectPopup>\\n          </Select>\\n        </ToolbarGroup>\\n        <ToolbarSeparator />\\n        <ToolbarGroup>\\n          <ToolbarButton render={<Button />}>Save</ToolbarButton>\\n        </ToolbarGroup>\\n      </Toolbar>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"toolbar\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tooltip-1.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tooltip-1\",\n  \"type\": \"registry:block\",\n  \"description\": \"Basic tooltip\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tooltip-1.tsx\",\n      \"content\": \"import { Button } from \\\"@/registry/default/ui/button\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <Tooltip>\\n      <TooltipTrigger render={<Button variant=\\\"outline\\\" />}>\\n        Hover me\\n      </TooltipTrigger>\\n      <TooltipPopup>Helpful hint</TooltipPopup>\\n    </Tooltip>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tooltip-2.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tooltip-2\",\n  \"type\": \"registry:block\",\n  \"description\": \"Grouped tooltips\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tooltip-2.tsx\",\n      \"content\": \"import { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nexport default function Particle() {\\n  return (\\n    <TooltipProvider>\\n      <ToggleGroup defaultValue={[\\\"bold\\\"]} multiple>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={<Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\" />}\\n          >\\n            <BoldIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Bold</TooltipPopup>\\n        </Tooltip>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={<Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\" />}\\n          >\\n            <ItalicIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Italic</TooltipPopup>\\n        </Tooltip>\\n        <Tooltip>\\n          <TooltipTrigger\\n            render={<Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\" />}\\n          >\\n            <UnderlineIcon />\\n          </TooltipTrigger>\\n          <TooltipPopup>Underline</TooltipPopup>\\n        </Tooltip>\\n      </ToggleGroup>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tooltip-3.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tooltip-3\",\n  \"type\": \"registry:block\",\n  \"description\": \"Toggle group animated tooltip\",\n  \"registryDependencies\": [\n    \"@coss/toggle-group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tooltip-3.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { BoldIcon, ItalicIcon, UnderlineIcon } from \\\"lucide-react\\\";\\nimport type { ComponentType } from \\\"react\\\";\\nimport { Toggle, ToggleGroup } from \\\"@/registry/default/ui/toggle-group\\\";\\nimport {\\n  Tooltip,\\n  TooltipCreateHandle,\\n  TooltipPopup,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nconst tooltipHandle = TooltipCreateHandle<ComponentType>();\\n\\nconst BoldContent = () => {\\n  return <span>Make text bold</span>;\\n};\\n\\nconst ItalicContent = () => {\\n  return <span>Apply italic formatting to text</span>;\\n};\\n\\nconst UnderlineContent = () => {\\n  return <span>Underline text</span>;\\n};\\n\\nexport default function Particle() {\\n  return (\\n    <TooltipProvider>\\n      <ToggleGroup defaultValue={[\\\"bold\\\"]} multiple>\\n        <TooltipTrigger\\n          className=\\\"after:absolute after:left-full after:h-full after:w-1\\\"\\n          handle={tooltipHandle}\\n          payload={BoldContent}\\n          render={<Toggle aria-label=\\\"Toggle bold\\\" value=\\\"bold\\\" />}\\n        >\\n          <BoldIcon aria-hidden=\\\"true\\\" />\\n        </TooltipTrigger>\\n        <TooltipTrigger\\n          className=\\\"after:absolute after:left-full after:h-full after:w-1\\\"\\n          handle={tooltipHandle}\\n          payload={ItalicContent}\\n          render={<Toggle aria-label=\\\"Toggle italic\\\" value=\\\"italic\\\" />}\\n        >\\n          <ItalicIcon aria-hidden=\\\"true\\\" />\\n        </TooltipTrigger>\\n        <TooltipTrigger\\n          className=\\\"after:absolute after:left-full after:h-full after:w-1\\\"\\n          handle={tooltipHandle}\\n          payload={UnderlineContent}\\n          render={<Toggle aria-label=\\\"Toggle underline\\\" value=\\\"underline\\\" />}\\n        >\\n          <UnderlineIcon aria-hidden=\\\"true\\\" />\\n        </TooltipTrigger>\\n      </ToggleGroup>\\n\\n      <Tooltip handle={tooltipHandle}>\\n        {({ payload: Payload }) => (\\n          <TooltipPopup>{Payload !== undefined && <Payload />}</TooltipPopup>\\n        )}\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/p-tooltip-4.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"p-tooltip-4\",\n  \"type\": \"registry:block\",\n  \"description\": \"Vertical group with animated tooltip\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/group\",\n    \"@coss/tooltip\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/particles/p-tooltip-4.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { LinkIcon, MailIcon, Share2Icon } from \\\"lucide-react\\\";\\nimport type { ComponentType } from \\\"react\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Group, GroupSeparator } from \\\"@/registry/default/ui/group\\\";\\nimport {\\n  Tooltip,\\n  TooltipCreateHandle,\\n  TooltipPopup,\\n  TooltipProvider,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nconst tooltipHandle = TooltipCreateHandle<ComponentType>();\\n\\nconst ShareLinkContent = () => {\\n  return <span>Copy shareable link</span>;\\n};\\n\\nconst ShareEmailContent = () => {\\n  return <span>Share via email</span>;\\n};\\n\\nconst ShareSocialContent = () => {\\n  return <span>Share to social media</span>;\\n};\\n\\nexport default function Particle() {\\n  return (\\n    <TooltipProvider>\\n      <Group aria-label=\\\"Share options\\\" orientation=\\\"vertical\\\">\\n        <TooltipTrigger\\n          handle={tooltipHandle}\\n          payload={ShareLinkContent}\\n          render={\\n            <Button aria-label=\\\"Copy link\\\" size=\\\"icon\\\" variant=\\\"outline\\\" />\\n          }\\n        >\\n          <LinkIcon aria-hidden=\\\"true\\\" />\\n        </TooltipTrigger>\\n        <GroupSeparator orientation=\\\"horizontal\\\" />\\n        <TooltipTrigger\\n          handle={tooltipHandle}\\n          payload={ShareEmailContent}\\n          render={\\n            <Button\\n              aria-label=\\\"Share via email\\\"\\n              size=\\\"icon\\\"\\n              variant=\\\"outline\\\"\\n            />\\n          }\\n        >\\n          <MailIcon aria-hidden=\\\"true\\\" />\\n        </TooltipTrigger>\\n        <GroupSeparator orientation=\\\"horizontal\\\" />\\n        <TooltipTrigger\\n          handle={tooltipHandle}\\n          payload={ShareSocialContent}\\n          render={\\n            <Button\\n              aria-label=\\\"Share to social\\\"\\n              size=\\\"icon\\\"\\n              variant=\\\"outline\\\"\\n            />\\n          }\\n        >\\n          <Share2Icon aria-hidden=\\\"true\\\" />\\n        </TooltipTrigger>\\n      </Group>\\n      <Tooltip handle={tooltipHandle}>\\n        {({ payload: Payload }) => (\\n          <TooltipPopup className=\\\"max-w-40\\\" side=\\\"right\\\">\\n            {Payload !== undefined && <Payload />}\\n          </TooltipPopup>\\n        )}\\n      </Tooltip>\\n    </TooltipProvider>\\n  );\\n}\\n\",\n      \"type\": \"registry:block\"\n    }\n  ],\n  \"categories\": [\n    \"tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/pagination.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"pagination\",\n  \"type\": \"registry:ui\",\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/pagination.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport {\\n  ChevronLeftIcon,\\n  ChevronRightIcon,\\n  MoreHorizontalIcon,\\n} from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { type Button, buttonVariants } from \\\"@/registry/default/ui/button\\\";\\n\\nexport function Pagination({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"nav\\\">): React.ReactElement {\\n  return (\\n    <nav\\n      aria-label=\\\"pagination\\\"\\n      className={cn(\\\"mx-auto flex w-full justify-center\\\", className)}\\n      data-slot=\\\"pagination\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function PaginationContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"ul\\\">): React.ReactElement {\\n  return (\\n    <ul\\n      className={cn(\\\"flex flex-row items-center gap-1\\\", className)}\\n      data-slot=\\\"pagination-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function PaginationItem({\\n  ...props\\n}: React.ComponentProps<\\\"li\\\">): React.ReactElement {\\n  return <li data-slot=\\\"pagination-item\\\" {...props} />;\\n}\\n\\nexport type PaginationLinkProps = {\\n  isActive?: boolean;\\n  size?: React.ComponentProps<typeof Button>[\\\"size\\\"];\\n} & useRender.ComponentProps<\\\"a\\\">;\\n\\nexport function PaginationLink({\\n  className,\\n  isActive,\\n  size = \\\"icon\\\",\\n  render,\\n  ...props\\n}: PaginationLinkProps): React.ReactElement {\\n  const defaultProps = {\\n    \\\"aria-current\\\": isActive ? (\\\"page\\\" as const) : undefined,\\n    className: render\\n      ? className\\n      : cn(\\n          buttonVariants({\\n            size,\\n            variant: isActive ? \\\"outline\\\" : \\\"ghost\\\",\\n          }),\\n          className,\\n        ),\\n    \\\"data-active\\\": isActive,\\n    \\\"data-slot\\\": \\\"pagination-link\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"a\\\",\\n    props: mergeProps<\\\"a\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function PaginationPrevious({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\\n  return (\\n    <PaginationLink\\n      aria-label=\\\"Go to previous page\\\"\\n      className={cn(\\\"max-sm:aspect-square max-sm:p-0\\\", className)}\\n      size=\\\"default\\\"\\n      {...props}\\n    >\\n      <ChevronLeftIcon className=\\\"sm:-ms-1\\\" />\\n      <span className=\\\"max-sm:hidden\\\">Previous</span>\\n    </PaginationLink>\\n  );\\n}\\n\\nexport function PaginationNext({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\\n  return (\\n    <PaginationLink\\n      aria-label=\\\"Go to next page\\\"\\n      className={cn(\\\"max-sm:aspect-square max-sm:p-0\\\", className)}\\n      size=\\\"default\\\"\\n      {...props}\\n    >\\n      <span className=\\\"max-sm:hidden\\\">Next</span>\\n      <ChevronRightIcon className=\\\"sm:-me-1\\\" />\\n    </PaginationLink>\\n  );\\n}\\n\\nexport function PaginationEllipsis({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"span\\\">): React.ReactElement {\\n  return (\\n    <span\\n      aria-hidden\\n      className={cn(\\\"flex min-w-7 justify-center\\\", className)}\\n      data-slot=\\\"pagination-ellipsis\\\"\\n      {...props}\\n    >\\n      <MoreHorizontalIcon className=\\\"size-5 sm:size-4\\\" />\\n      <span className=\\\"sr-only\\\">More pages</span>\\n    </span>\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/popover.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"popover\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/popover.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Popover as PopoverPrimitive } from \\\"@base-ui/react/popover\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport const PopoverCreateHandle: typeof PopoverPrimitive.createHandle =\\n  PopoverPrimitive.createHandle;\\n\\nexport const Popover: typeof PopoverPrimitive.Root = PopoverPrimitive.Root;\\n\\nexport function PopoverTrigger({\\n  className,\\n  children,\\n  ...props\\n}: PopoverPrimitive.Trigger.Props): React.ReactElement {\\n  return (\\n    <PopoverPrimitive.Trigger\\n      className={className}\\n      data-slot=\\\"popover-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n    </PopoverPrimitive.Trigger>\\n  );\\n}\\n\\nexport function PopoverPopup({\\n  children,\\n  className,\\n  side = \\\"bottom\\\",\\n  align = \\\"center\\\",\\n  sideOffset = 4,\\n  alignOffset = 0,\\n  tooltipStyle = false,\\n  anchor,\\n  ...props\\n}: PopoverPrimitive.Popup.Props & {\\n  side?: PopoverPrimitive.Positioner.Props[\\\"side\\\"];\\n  align?: PopoverPrimitive.Positioner.Props[\\\"align\\\"];\\n  sideOffset?: PopoverPrimitive.Positioner.Props[\\\"sideOffset\\\"];\\n  alignOffset?: PopoverPrimitive.Positioner.Props[\\\"alignOffset\\\"];\\n  tooltipStyle?: boolean;\\n  anchor?: PopoverPrimitive.Positioner.Props[\\\"anchor\\\"];\\n}): React.ReactElement {\\n  return (\\n    <PopoverPrimitive.Portal>\\n      <PopoverPrimitive.Positioner\\n        align={align}\\n        alignOffset={alignOffset}\\n        anchor={anchor}\\n        className=\\\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none\\\"\\n        data-slot=\\\"popover-positioner\\\"\\n        side={side}\\n        sideOffset={sideOffset}\\n      >\\n        <PopoverPrimitive.Popup\\n          className={cn(\\n            \\\"relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            tooltipStyle &&\\n              \\\"w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\\\",\\n            className,\\n          )}\\n          data-slot=\\\"popover-popup\\\"\\n          {...props}\\n        >\\n          <PopoverPrimitive.Viewport\\n            className={cn(\\n              \\\"relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity\\\",\\n              tooltipStyle\\n                ? \\\"py-1 [--viewport-inline-padding:--spacing(2)]\\\"\\n                : \\\"not-data-transitioning:overflow-y-auto\\\",\\n            )}\\n            data-slot=\\\"popover-viewport\\\"\\n          >\\n            {children}\\n          </PopoverPrimitive.Viewport>\\n        </PopoverPrimitive.Popup>\\n      </PopoverPrimitive.Positioner>\\n    </PopoverPrimitive.Portal>\\n  );\\n}\\n\\nexport function PopoverClose({\\n  ...props\\n}: PopoverPrimitive.Close.Props): React.ReactElement {\\n  return <PopoverPrimitive.Close data-slot=\\\"popover-close\\\" {...props} />;\\n}\\n\\nexport function PopoverTitle({\\n  className,\\n  ...props\\n}: PopoverPrimitive.Title.Props): React.ReactElement {\\n  return (\\n    <PopoverPrimitive.Title\\n      className={cn(\\\"font-semibold text-lg leading-none\\\", className)}\\n      data-slot=\\\"popover-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function PopoverDescription({\\n  className,\\n  ...props\\n}: PopoverPrimitive.Description.Props): React.ReactElement {\\n  return (\\n    <PopoverPrimitive.Description\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"popover-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { PopoverPrimitive, PopoverPopup as PopoverContent };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/preview-card.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"preview-card\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/preview-card.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { PreviewCard as PreviewCardPrimitive } from \\\"@base-ui/react/preview-card\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport const PreviewCard: typeof PreviewCardPrimitive.Root =\\n  PreviewCardPrimitive.Root;\\n\\nexport function PreviewCardTrigger({\\n  ...props\\n}: PreviewCardPrimitive.Trigger.Props): React.ReactElement {\\n  return (\\n    <PreviewCardPrimitive.Trigger data-slot=\\\"preview-card-trigger\\\" {...props} />\\n  );\\n}\\n\\nexport function PreviewCardPopup({\\n  className,\\n  children,\\n  align = \\\"center\\\",\\n  sideOffset = 4,\\n  anchor,\\n  ...props\\n}: PreviewCardPrimitive.Popup.Props & {\\n  align?: PreviewCardPrimitive.Positioner.Props[\\\"align\\\"];\\n  sideOffset?: PreviewCardPrimitive.Positioner.Props[\\\"sideOffset\\\"];\\n  anchor?: PreviewCardPrimitive.Positioner.Props[\\\"anchor\\\"];\\n}): React.ReactElement {\\n  return (\\n    <PreviewCardPrimitive.Portal>\\n      <PreviewCardPrimitive.Positioner\\n        align={align}\\n        anchor={anchor}\\n        className=\\\"z-50\\\"\\n        data-slot=\\\"preview-card-positioner\\\"\\n        sideOffset={sideOffset}\\n      >\\n        <PreviewCardPrimitive.Popup\\n          className={cn(\\n            \\\"relative flex w-64 origin-(--transform-origin) text-balance rounded-lg border bg-popover not-dark:bg-clip-padding p-4 text-popover-foreground text-sm shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            className,\\n          )}\\n          data-slot=\\\"preview-card-content\\\"\\n          {...props}\\n        >\\n          {children}\\n        </PreviewCardPrimitive.Popup>\\n      </PreviewCardPrimitive.Positioner>\\n    </PreviewCardPrimitive.Portal>\\n  );\\n}\\n\\nexport {\\n  PreviewCardPrimitive,\\n  PreviewCard as HoverCard,\\n  PreviewCardTrigger as HoverCardTrigger,\\n  PreviewCardPopup as HoverCardContent,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/progress.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"progress\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/progress.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Progress as ProgressPrimitive } from \\\"@base-ui/react/progress\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Progress({\\n  className,\\n  children,\\n  ...props\\n}: ProgressPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <ProgressPrimitive.Root\\n      className={cn(\\\"flex w-full flex-col gap-2\\\", className)}\\n      data-slot=\\\"progress\\\"\\n      {...props}\\n    >\\n      {children ? (\\n        children\\n      ) : (\\n        <ProgressTrack>\\n          <ProgressIndicator />\\n        </ProgressTrack>\\n      )}\\n    </ProgressPrimitive.Root>\\n  );\\n}\\n\\nexport function ProgressLabel({\\n  className,\\n  ...props\\n}: ProgressPrimitive.Label.Props): React.ReactElement {\\n  return (\\n    <ProgressPrimitive.Label\\n      className={cn(\\\"font-medium text-sm\\\", className)}\\n      data-slot=\\\"progress-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ProgressTrack({\\n  className,\\n  ...props\\n}: ProgressPrimitive.Track.Props): React.ReactElement {\\n  return (\\n    <ProgressPrimitive.Track\\n      className={cn(\\n        \\\"block h-1.5 w-full overflow-hidden rounded-full bg-input\\\",\\n        className,\\n      )}\\n      data-slot=\\\"progress-track\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ProgressIndicator({\\n  className,\\n  ...props\\n}: ProgressPrimitive.Indicator.Props): React.ReactElement {\\n  return (\\n    <ProgressPrimitive.Indicator\\n      className={cn(\\\"bg-primary transition-all duration-500\\\", className)}\\n      data-slot=\\\"progress-indicator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ProgressValue({\\n  className,\\n  ...props\\n}: ProgressPrimitive.Value.Props): React.ReactElement {\\n  return (\\n    <ProgressPrimitive.Value\\n      className={cn(\\\"text-sm tabular-nums\\\", className)}\\n      data-slot=\\\"progress-value\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { ProgressPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/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  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/radio-group.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Radio as RadioPrimitive } from \\\"@base-ui/react/radio\\\";\\nimport { RadioGroup as RadioGroupPrimitive } from \\\"@base-ui/react/radio-group\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function RadioGroup({\\n  className,\\n  ...props\\n}: RadioGroupPrimitive.Props): React.ReactElement {\\n  return (\\n    <RadioGroupPrimitive\\n      className={cn(\\\"flex flex-col gap-3\\\", className)}\\n      data-slot=\\\"radio-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function Radio({\\n  className,\\n  ...props\\n}: RadioPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <RadioPrimitive.Root\\n      className={cn(\\n        \\\"relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-full not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none\\\",\\n        className,\\n      )}\\n      data-slot=\\\"radio\\\"\\n      {...props}\\n    >\\n      <RadioPrimitive.Indicator\\n        className=\\\"absolute -inset-px flex size-4.5 items-center justify-center rounded-full before:size-2 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-primary sm:size-4 sm:before:size-1.5\\\"\\n        data-slot=\\\"radio-indicator\\\"\\n      />\\n    </RadioPrimitive.Root>\\n  );\\n}\\n\\nexport { RadioGroupPrimitive, RadioPrimitive, Radio as RadioGroupItem };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/registry.json",
    "content": "{\n  \"homepage\": \"https://ui.shadcn.com\",\n  \"items\": [\n    {\n      \"name\": \"ui\",\n      \"registryDependencies\": [\n        \"@coss/accordion\",\n        \"@coss/alert\",\n        \"@coss/alert-dialog\",\n        \"@coss/autocomplete\",\n        \"@coss/avatar\",\n        \"@coss/badge\",\n        \"@coss/breadcrumb\",\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/card\",\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/collapsible\",\n        \"@coss/combobox\",\n        \"@coss/command\",\n        \"@coss/dialog\",\n        \"@coss/drawer\",\n        \"@coss/empty\",\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/form\",\n        \"@coss/frame\",\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/input-otp\",\n        \"@coss/input-group\",\n        \"@coss/kbd\",\n        \"@coss/label\",\n        \"@coss/menu\",\n        \"@coss/meter\",\n        \"@coss/number-field\",\n        \"@coss/pagination\",\n        \"@coss/popover\",\n        \"@coss/preview-card\",\n        \"@coss/progress\",\n        \"@coss/radio-group\",\n        \"@coss/scroll-area\",\n        \"@coss/select\",\n        \"@coss/separator\",\n        \"@coss/sheet\",\n        \"@coss/sidebar\",\n        \"@coss/skeleton\",\n        \"@coss/slider\",\n        \"@coss/spinner\",\n        \"@coss/switch\",\n        \"@coss/table\",\n        \"@coss/tabs\",\n        \"@coss/textarea\",\n        \"@coss/toast\",\n        \"@coss/toggle\",\n        \"@coss/toggle-group\",\n        \"@coss/toolbar\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/accordion.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"accordion\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-400)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-400)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-700)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-700)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-700)\"\n        }\n      },\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/alert.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"alert\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/alert-dialog.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"alert-dialog\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/autocomplete.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"autocomplete\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/avatar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"avatar\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-400)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-400)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-700)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-700)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-700)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/badge.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"badge\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/breadcrumb.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"breadcrumb\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/button.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"button\",\n      \"registryDependencies\": [\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"react-day-picker\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/calendar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"calendar\",\n      \"registryDependencies\": [],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/card.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"card\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/checkbox.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"checkbox\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/checkbox-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"checkbox-group\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/collapsible.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"collapsible\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/combobox.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"combobox\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/command.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"command\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/dialog.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"dialog\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/drawer.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"drawer\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/empty.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"empty\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/field.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"field\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/fieldset.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"fieldset\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/form.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"form\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/frame.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"frame\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"group\",\n      \"registryDependencies\": [\n        \"@coss/separator\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/input.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"input\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"css\": {\n        \"@keyframes caret-blink\": {\n          \"0%, 70%, to\": {\n            \"opacity\": \"1\"\n          },\n          \"20%, 50%\": {\n            \"opacity\": \"0\"\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--animate-caret-blink\": \"1s ease-out infinite caret-blink\"\n        }\n      },\n      \"dependencies\": [\n        \"input-otp\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/input-otp.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"input-otp\",\n      \"registryDependencies\": [\n        \"@coss/separator\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/input-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"input-group\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/kbd.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"kbd\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/label.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"label\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/menu.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"menu\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/meter.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"meter\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/number-field.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"number-field\",\n      \"registryDependencies\": [\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/pagination.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"pagination\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/popover.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"popover\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/preview-card.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"preview-card\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/progress.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"progress\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/radio-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"radio-group\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/scroll-area.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"scroll-area\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/select.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"select\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/separator.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"separator\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/sheet.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"sheet\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/sidebar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"sidebar\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input\",\n        \"@coss/scroll-area\",\n        \"@coss/separator\",\n        \"@coss/sheet\",\n        \"@coss/skeleton\",\n        \"@coss/tooltip\",\n        \"@coss/use-media-query\",\n        \"@coss/utils\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"css\": {\n        \"@keyframes skeleton\": {\n          \"to\": {\n            \"background-position\": \"-200% 0\"\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--animate-skeleton\": \"skeleton 2s -1s infinite linear\"\n        }\n      },\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/skeleton.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"skeleton\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/slider.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"slider\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/spinner.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"spinner\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/switch.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"switch\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/table.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"table\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/tabs.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"tabs\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/textarea.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"textarea\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toast.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toast\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toggle.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toggle\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toggle-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toggle-group\",\n      \"registryDependencies\": [\n        \"@coss/separator\",\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toolbar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toolbar\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/tooltip.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"tooltip\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"categories\": [\n        \"accordion\"\n      ],\n      \"description\": \"Basic accordion\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-accordion-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n      },\n      \"name\": \"p-accordion-1\",\n      \"registryDependencies\": [\n        \"@coss/accordion\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"accordion\"\n      ],\n      \"description\": \"Accordion with one panel open\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-accordion-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n      },\n      \"name\": \"p-accordion-2\",\n      \"registryDependencies\": [\n        \"@coss/accordion\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"accordion\"\n      ],\n      \"description\": \"Accordion allowing multiple panels open\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-accordion-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n      },\n      \"name\": \"p-accordion-3\",\n      \"registryDependencies\": [\n        \"@coss/accordion\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"accordion\"\n      ],\n      \"description\": \"Controlled accordion\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-accordion-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n      },\n      \"name\": \"p-accordion-4\",\n      \"registryDependencies\": [\n        \"@coss/accordion\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\"\n      ],\n      \"description\": \"Basic alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-1\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Alert with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-2\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Alert with icon and action buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-3\",\n      \"registryDependencies\": [\n        \"@coss/alert\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\",\n        \"info\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Info alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-4\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\",\n        \"success\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Success alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-5\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\",\n        \"warning\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Warning alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-6\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\",\n        \"error\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Error alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-7\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert dialog\",\n        \"dialog\"\n      ],\n      \"description\": \"Alert dialog\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-dialog-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-alert-dialog-1\",\n      \"registryDependencies\": [\n        \"@coss/alert-dialog\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert dialog\",\n        \"dialog\"\n      ],\n      \"description\": \"Alert dialog with bare footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-dialog-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-alert-dialog-2\",\n      \"registryDependencies\": [\n        \"@coss/alert-dialog\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Basic autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-1\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-2\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Small autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-3\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Large autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-4\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-5\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete autofilling the input with the highlighted item\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-6\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete auto highlighting the first option\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-7\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with clear button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-8\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with trigger and clear buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-9\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with grouped items\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-10\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with limited number of results\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-11\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\",\n        \"async\"\n      ],\n      \"description\": \"Autocomplete with async items loading\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-12\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"form\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-13\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-14\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Pill-shaped autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-15\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with image and fallback\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-1\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Fallback-only avatar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-2\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatars with different sizes\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-3\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatars with different radii\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-4\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Overlapping avatar group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-5\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Avatar with user icon fallback\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-6\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with emerald status dot\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-7\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with muted status dot\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-8\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Rounded avatar with top-right emerald status\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-9\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with notification badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-10\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Rounded avatar with notification badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-11\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with verified badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-12\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Small overlapping avatar group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-13\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Large overlapping avatar group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-14\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Basic badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-1\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Outline badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-2\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Secondary badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-3\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"error\"\n      ],\n      \"description\": \"Destructive badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-4\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"info\"\n      ],\n      \"description\": \"Info badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-5\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"success\"\n      ],\n      \"description\": \"Success badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-6\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"warning\"\n      ],\n      \"description\": \"Warning badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-7\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"error\"\n      ],\n      \"description\": \"Error badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-8\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Small badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-9\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Large badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-10\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Badge with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-11\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Badge with link\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-12\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Badge with count\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-13\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Full rounded badge (pill)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-14\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Badge with number after text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-15\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Status badge - Paid\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-16\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Status badge - Pending\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-17\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Status badge - Failed\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-18\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"checkbox\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Selectable badge with checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-19\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/checkbox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Removable badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-20\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\",\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Breadcrumb with menu example\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-1\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\",\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\"\n      ],\n      \"description\": \"Breadcrumb with custom separator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-2\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with home icon for home link only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-3\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\",\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with folders icon menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-4\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\",\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with icons before text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-5\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with dot separators\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-6\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\",\n        \"select\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with select dropdown\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-7\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Default button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-1\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Outline button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-2\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Secondary button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-3\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Destructive button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-4\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Destructive outline button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-5\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Ghost button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-6\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Link button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-7\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Extra-small button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-8\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Small button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-9\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Large button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-10\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Extra-large button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-11\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-12\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Icon button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-13\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Small icon button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-14\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Large icon button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-15\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Button with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-16\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Link rendered as button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-17\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"loading\"\n      ],\n      \"description\": \"Button using the built-in loading prop\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-41.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-41\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"loading\"\n      ],\n      \"description\": \"Custom loading button with manual Spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-18\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Expandable show more/less toggle button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-19\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Back link button with chevron\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-20\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Card-style button with heading and description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-21\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Directional pad control buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-22\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Outline like button with count\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-23\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"@remixicon/react\"\n      ],\n      \"description\": \"Social login icon buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-24.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-24\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Star button with count badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-26.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-26\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Button group with QR code icon and sign in\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-27.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-27\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"avatar\"\n      ],\n      \"description\": \"Button with avatar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-28.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-28\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Pill-shaped button with rounded-full styling\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-29.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-29\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Button with animated arrow on hover\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-30.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-30\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"kbd\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Button with keyboard shortcut indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-31.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-31\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"badge\"\n      ],\n      \"description\": \"Button with notification badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-32.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-32\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Paired buttons (Cancel/Save)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-33.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-33\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Button with animated status dot\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-34.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-34\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Icon-only copy button with feedback\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-35.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-35\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Copy button with feedback\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-36.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-36\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Rotating icon button (FAB-style toggle)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-37.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-37\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Hamburger menu button with animated icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-39.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-39\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\",\n        \"tooltip\",\n        \"toast\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Download button with progress and cancel action\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-40.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-40\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/spinner\",\n        \"@coss/toast\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"@remixicon/react\"\n      ],\n      \"description\": \"Social login buttons (Google, X, GitHub)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-38.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-button-38\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Basic calendar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-1\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with date range selection\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-3\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with month/year dropdown navigation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-4\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"select\"\n      ],\n      \"description\": \"Calendar with custom Select dropdown for month/year\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-5\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"combobox\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Calendar with Combobox dropdown for month/year\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-6\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with disabled dates\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-7\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with multiple date selection\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-8\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with custom cell size\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-2\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with rounded day buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-9\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with rounded range selection style\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-10\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with right-aligned navigation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-11\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with week numbers\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-12\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"combobox\"\n      ],\n      \"description\": \"Calendar with year-only combobox dropdown\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-13\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"select\"\n      ],\n      \"description\": \"Calendar without arrow navigation (dropdown only)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-14\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with current month button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-15\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with today button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-16\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"input\",\n        \"field\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Calendar with date input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-17\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/field\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"input\",\n        \"field\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Calendar with time input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-18\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/field\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"toggle\",\n        \"toggle group\",\n        \"scroll area\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with time slots (appointment picker)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-19\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/scroll-area\",\n        \"@coss/toggle\",\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with date presets\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-20\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Range calendar with date presets\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-21\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Two months calendar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2\n      },\n      \"name\": \"p-calendar-22\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Three months calendar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2\n      },\n      \"name\": \"p-calendar-23\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Pricing calendar with custom day buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-24.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2\n      },\n      \"name\": \"p-calendar-24\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Basic date picker\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-1\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date range picker\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-2\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Two months calendar with range date\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-9\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\",\n        \"field\",\n        \"combobox\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker with field and dropdown navigation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/combobox\",\n        \"@coss/field\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker with presets\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker with input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/input-group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker that closes on select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-6\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\",\n        \"badge\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Multiple dates picker\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-7\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker with select-like trigger\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-8\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"A basic card with header and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"description\": \"Authentication card with actions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Authentication card with separators\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Framed card with footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"description\": \"Framed card with header\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Framed card with header and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Framed card with no rounded bottom\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\",\n        \"frame\"\n      ],\n      \"description\": \"Card within a frame and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/frame\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\",\n        \"frame\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Card within a frame and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/frame\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\",\n        \"frame\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Card within a frame with header and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/frame\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"frame\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"CardFrame with header action\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-11\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/empty\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\"\n      ],\n      \"description\": \"Basic checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-1\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-2\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\"\n      ],\n      \"description\": \"Checkbox with description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-3\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\"\n      ],\n      \"description\": \"Card-style checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-4\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"form\"\n      ],\n      \"description\": \"Checkbox form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/checkbox\",\n        \"@coss/field\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\"\n      ],\n      \"description\": \"Basic checkbox group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-1\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\",\n        \"disabled\"\n      ],\n      \"description\": \"Checkbox group with disabled items\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-2\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\"\n      ],\n      \"description\": \"Checkbox group with parent checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-3\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\"\n      ],\n      \"description\": \"Nested checkbox group with parent\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-4\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\",\n        \"form\"\n      ],\n      \"description\": \"Checkbox group form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"collapsible\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Basic collapsible\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-collapsible-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-collapsible-1\",\n      \"registryDependencies\": [\n        \"@coss/collapsible\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Basic combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-1\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-2\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Small combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-3\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Large combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-4\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-5\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox auto highlighting the first option\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-6\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox with clear button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-7\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox with grouped items\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-8\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox with multiple selection\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-9\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Combobox with input inside popup\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"form\",\n        \"input\"\n      ],\n      \"description\": \"Combobox form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-11\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/combobox\",\n        \"@coss/field\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"form\",\n        \"input\"\n      ],\n      \"description\": \"Combobox multiple form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-12\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/combobox\",\n        \"@coss/field\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Combobox with start addon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-13\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Combobox multiple with start addon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-14\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Pill-shaped combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-15\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\",\n        \"timezone\"\n      ],\n      \"description\": \"Timezone combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-16\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\",\n        \"timezone\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Timezone combobox with search input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-17\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"select\"\n      ],\n      \"description\": \"Combobox with select trigger\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-18\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"command\",\n        \"dialog\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Command palette with dialog\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-command-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-command-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/command\",\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"command\",\n        \"dialog\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Command palette with AI assistant\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-command-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-command-2\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/button\",\n        \"@coss/command\",\n        \"@coss/empty\",\n        \"@coss/input\",\n        \"@coss/kbd\",\n        \"@coss/scroll-area\",\n        \"@coss/skeleton\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\"\n      ],\n      \"description\": \"Dialog with form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\"\n      ],\n      \"description\": \"Dialog with bare footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\",\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Dialog opened from menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\"\n      ],\n      \"description\": \"Nested dialogs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert dialog\",\n        \"dialog\"\n      ],\n      \"description\": \"Dialog with close confirmation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-4\",\n      \"registryDependencies\": [\n        \"@coss/alert-dialog\",\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\"\n      ],\n      \"description\": \"Dialog with long content\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Simple bottom drawer with close button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Bottom drawer without drag bar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Drawer with close button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Inset variant drawers for all four positions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Straight variant drawers for all four positions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Scrollable content with terms and conditions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Nested bottom drawers with centered content\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Nested right drawers with inset variant\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\",\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Bottom drawer with snap points\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Edit profile form with default and bare footer variants\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Mobile menu drawer from the left\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-11\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\",\n        \"dialog\"\n      ],\n      \"description\": \"Responsive edit profile: dialog on desktop, drawer on mobile\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-12\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/drawer\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/use-media-query\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\",\n        \"menu\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Responsive actions menu: menu on desktop, drawer on mobile\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-13\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\",\n        \"@coss/menu\",\n        \"@coss/use-media-query\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Left drawer with swipe area\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md\"\n      },\n      \"name\": \"p-drawer-14\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"empty state\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Empty state with icon and actions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-empty-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-empty-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/empty\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-1\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with required indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-2\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"disabled\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field in disabled state\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-3\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"error\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field showing validation error\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-4\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\"\n      ],\n      \"description\": \"Show field validity state\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-5\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"field\",\n        \"input\",\n        \"input group\"\n      ],\n      \"description\": \"Input group with field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-7\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-8\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with multiple selection combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-9\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"textarea\"\n      ],\n      \"description\": \"Field with textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-10\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"select\"\n      ],\n      \"description\": \"Field with select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-11\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"field\",\n        \"label\"\n      ],\n      \"description\": \"Field with checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-12\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\",\n        \"field\",\n        \"fieldset\",\n        \"label\"\n      ],\n      \"description\": \"Field with checkbox group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-13\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/field\",\n        \"@coss/fieldset\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"fieldset\",\n        \"label\",\n        \"radio group\"\n      ],\n      \"description\": \"Field with radio group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-14\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"switch\"\n      ],\n      \"description\": \"Field with toggle switch\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-field-15\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"slider\"\n      ],\n      \"description\": \"Field with slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-16\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\",\n        \"label\",\n        \"number field\"\n      ],\n      \"description\": \"Field with number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-17\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"checkbox\",\n        \"field\",\n        \"form\",\n        \"input\",\n        \"label\",\n        \"select\"\n      ],\n      \"description\": \"Complete form built with field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-18\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/checkbox\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"fieldset\",\n        \"input\"\n      ],\n      \"description\": \"Fieldset with multiple fields\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-fieldset-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-fieldset-1\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"field\",\n        \"form\",\n        \"input\"\n      ],\n      \"description\": \"Input in a form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-form-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-form-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"field\",\n        \"form\",\n        \"label\",\n        \"validation\",\n        \"zod\"\n      ],\n      \"dependencies\": [\n        \"zod\"\n      ],\n      \"description\": \"Form with zod validation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-form-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-form-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"frame\"\n      ],\n      \"description\": \"Basic frame\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-frame-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-frame-1\",\n      \"registryDependencies\": [\n        \"@coss/frame\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"frame\"\n      ],\n      \"description\": \"Frame with multiple separated panels\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-frame-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-frame-3\",\n      \"registryDependencies\": [\n        \"@coss/frame\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"frame\"\n      ],\n      \"description\": \"Frame with multiple stacked panels\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-frame-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-frame-4\",\n      \"registryDependencies\": [\n        \"@coss/frame\",\n        \"@coss/separator\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"collapsible\",\n        \"frame\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Frame with collapsible content and delete button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-frame-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-frame-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/collapsible\",\n        \"@coss/frame\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"kbd\"\n      ],\n      \"description\": \"Keyboard shortcuts display\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-kbd-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-kbd-1\",\n      \"registryDependencies\": [\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Basic group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input\"\n      ],\n      \"description\": \"Group with input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/tooltip\",\n        \"@coss/use-copy-to-clipboard\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Small group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Large group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\"\n      ],\n      \"description\": \"Group with disabled button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\"\n      ],\n      \"description\": \"Group with default button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Group with start text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-7\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Group with end text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-8\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Vertical group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Nested groups\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Group with popup\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-11\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input group\"\n      ],\n      \"description\": \"Group with input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-12\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"group\",\n        \"menu\"\n      ],\n      \"description\": \"Group with menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-13\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"select\"\n      ],\n      \"description\": \"Group with select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-14\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/number-field\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"search\"\n      ],\n      \"description\": \"Group with search\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-15\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Group with add button and input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-16\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input\"\n      ],\n      \"description\": \"Group with input and currency text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-17\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input\",\n        \"select\"\n      ],\n      \"description\": \"Group with select and input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-18\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input\",\n        \"select\"\n      ],\n      \"description\": \"Group with input and select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-19\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\",\n        \"input\"\n      ],\n      \"description\": \"Group with input and text button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-20\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"label\",\n        \"number field\"\n      ],\n      \"description\": \"Group with two number inputs for range\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-22\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/label\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\",\n        \"badge\",\n        \"button\",\n        \"combobox\",\n        \"group\"\n      ],\n      \"description\": \"Group with filter label, combobox multi-select, and remove button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-23\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/combobox\",\n        \"@coss/group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Basic input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-1\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Small input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-2\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Large input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-3\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Disabled input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-4\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"File input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-5\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Input with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-6\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\",\n        \"input\"\n      ],\n      \"description\": \"Input with button using Group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"popover\"\n      ],\n      \"description\": \"Input with start text and end tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"tooltip\"\n      ],\n      \"description\": \"Password input with toggle visibility\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"popover\"\n      ],\n      \"description\": \"Input group mimicking a URL bar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\",\n        \"kbd\",\n        \"search\"\n      ],\n      \"description\": \"Input group with keyboard shortcut\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-11\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\",\n        \"spinner\",\n        \"loading\"\n      ],\n      \"description\": \"Input group with start loading spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-12\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Input with label and required indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-13\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Input with optional label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-14\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Input with custom border and background\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-15\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\",\n        \"spinner\",\n        \"loading\"\n      ],\n      \"description\": \"Input group with end loading spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-16\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Read-only input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-17\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\"\n      ],\n      \"description\": \"Basic OTP input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-1\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\"\n      ],\n      \"description\": \"Large OTP input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-2\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\"\n      ],\n      \"description\": \"OTP input with separator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-3\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"OTP input with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-4\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\"\n      ],\n      \"description\": \"Digits-only OTP input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-5\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\",\n        \"validation\"\n      ],\n      \"description\": \"Invalid OTP input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-6\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\",\n        \"validation\"\n      ],\n      \"description\": \"OTP input with auto validation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-7\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Basic input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-1\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with end icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-2\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Input group with start text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-3\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Input group with end text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-4\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Input group with start and end text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-5\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"number field\"\n      ],\n      \"description\": \"Input group with number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-6\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with end tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with icon button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\",\n        \"@coss/use-copy-to-clipboard\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\"\n      ],\n      \"description\": \"Input group with button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"input group\"\n      ],\n      \"description\": \"Input group with badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-10\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"kbd\"\n      ],\n      \"description\": \"Input group with keyboard shortcut\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-11\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"label\"\n      ],\n      \"description\": \"Input group with inner label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-12\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/label\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Small input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-13\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Large input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-14\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Disabled input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-15\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"spinner\"\n      ],\n      \"description\": \"Input group with loading spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-16\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"textarea\"\n      ],\n      \"description\": \"Input group with textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-17\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/menu\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"dropdown\",\n        \"input group\",\n        \"menu\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with badge and menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-18\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\",\n        \"textarea\",\n        \"toggle\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Mini editor built with input group and toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-19\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\",\n        \"search\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with search icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-20\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with start tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-21\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with clear button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-22\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"search\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Search input group with loader and voice button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-23\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\"\n      ],\n      \"description\": \"Input group with character counter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-24.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-24\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\"\n      ],\n      \"description\": \"Input with characters remaining counter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-18\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Pill-shaped input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-19\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"label\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Password input with strength indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-26.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-26\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\",\n        \"select\",\n        \"textarea\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Code snippet input with language selector\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-27.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-27\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/select\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\",\n        \"textarea\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Message composer with attachment buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-28.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-28\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\",\n        \"textarea\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Chat input with voice and send buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-29.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-29\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"meter\"\n      ],\n      \"description\": \"Basic meter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-meter-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-meter-1\",\n      \"registryDependencies\": [\n        \"@coss/meter\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"meter\"\n      ],\n      \"description\": \"Simple meter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-meter-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-meter-2\",\n      \"registryDependencies\": [\n        \"@coss/meter\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"meter\"\n      ],\n      \"description\": \"Meter with formatted value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-meter-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-meter-3\",\n      \"registryDependencies\": [\n        \"@coss/meter\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"meter\"\n      ],\n      \"description\": \"Meter with range\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-meter-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-meter-4\",\n      \"registryDependencies\": [\n        \"@coss/meter\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Basic menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with hover\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\",\n        \"switch\"\n      ],\n      \"description\": \"Menu with checkbox items as switches\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with radio group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with link\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with group labels\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Nested menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu close on click\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Basic number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-1\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Small number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-2\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Large number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-3\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Disabled number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-4\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-5\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with scrub\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-6\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with range\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-7\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with formatted value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-8\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with step\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-9\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\",\n        \"form\",\n        \"field\",\n        \"zod\"\n      ],\n      \"dependencies\": [\n        \"zod\"\n      ],\n      \"description\": \"Number field in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Pill-shaped number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-11\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"pagination\"\n      ],\n      \"description\": \"Pagination example\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-pagination-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-pagination-1\",\n      \"registryDependencies\": [\n        \"@coss/pagination\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"pagination\"\n      ],\n      \"description\": \"Pagination with previous and next buttons only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-pagination-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-pagination-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/pagination\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"pagination\",\n        \"select\"\n      ],\n      \"description\": \"Pagination with select, and previous and next buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-pagination-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-pagination-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/pagination\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"field\",\n        \"form\",\n        \"popover\",\n        \"textarea\"\n      ],\n      \"description\": \"Popover with a form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-popover-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-popover-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/popover\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"popover\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Popover with close button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-popover-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-popover-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\",\n        \"button\",\n        \"popover\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Animated popovers\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-popover-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-popover-3\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/button\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"preview card\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Preview card with popup\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-preview-card-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-preview-card-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/preview-card\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"progress\"\n      ],\n      \"description\": \"Basic progress bar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-progress-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-progress-1\",\n      \"registryDependencies\": [\n        \"@coss/progress\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"progress\"\n      ],\n      \"description\": \"Progress with label and value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-progress-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-progress-2\",\n      \"registryDependencies\": [\n        \"@coss/progress\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"progress\"\n      ],\n      \"description\": \"Progress with formatted value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-progress-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-progress-3\",\n      \"registryDependencies\": [\n        \"@coss/progress\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\"\n      ],\n      \"description\": \"Basic radio group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-1\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\"\n      ],\n      \"description\": \"Disabled radio group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-2\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\"\n      ],\n      \"description\": \"Radio group with description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-3\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\"\n      ],\n      \"description\": \"Radio group card\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-4\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\",\n        \"form\"\n      ],\n      \"description\": \"Radio group in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/form\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Basic scroll area\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-scroll-area-1\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Horizontal scroll area\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-scroll-area-2\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Scroll area with both directions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-scroll-area-3\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Scroll area with fading edges\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-scroll-area-4\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Horizontal scroll area with scrollbar gutter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-scroll-area-5\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Basic select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-1\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Small select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-2\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Large select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-3\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Disabled select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-4\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select without item alignment\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-5\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with groups\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-6\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Multiple select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-7\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Select with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-8\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Select options with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-9\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with object values\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-10\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\",\n        \"disabled\"\n      ],\n      \"description\": \"Select with disabled items\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-12\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\",\n        \"time\",\n        \"timezone\"\n      ],\n      \"description\": \"Timezone select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-13\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Status select with colored dot\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-14\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Pill-shaped select trigger\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-15\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with left text label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-16\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with country flags\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-17\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with description in options only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-18\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\",\n        \"avatar\"\n      ],\n      \"description\": \"Select with avatars\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-19\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\",\n        \"avatar\"\n      ],\n      \"description\": \"Rich select with avatars and usernames\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-20\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Auto width select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-select-21\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with custom border and background\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-22\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-23\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-11\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"separator\"\n      ],\n      \"description\": \"Separator with horizontal and vertical orientations\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-separator-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-separator-1\",\n      \"registryDependencies\": [\n        \"@coss/separator\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"sheet\"\n      ],\n      \"description\": \"Basic sheet\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-sheet-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-sheet-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/sheet\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"sheet\"\n      ],\n      \"description\": \"Sheet inset\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-sheet-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-sheet-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/sheet\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"sheet\"\n      ],\n      \"description\": \"Sheet position\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-sheet-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-sheet-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/sheet\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"skeleton\"\n      ],\n      \"description\": \"Basic skeleton\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-skeleton-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-skeleton-1\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/button\",\n        \"@coss/skeleton\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"skeleton\"\n      ],\n      \"description\": \"Skeleton only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-skeleton-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-skeleton-2\",\n      \"registryDependencies\": [\n        \"@coss/skeleton\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Basic slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-1\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with label and value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-2\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-3\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with reference labels\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-4\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with ticks\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-5\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with labels above\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-6\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Range slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-7\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with 3 thumbs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-8\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Range slider with collision behavior none\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-9\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Range slider with collision behavior swap\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-10\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Slider with icons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-11\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\"\n      ],\n      \"description\": \"Slider with input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-12\",\n      \"registryDependencies\": [\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\"\n      ],\n      \"description\": \"Range slider with inputs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-13\",\n      \"registryDependencies\": [\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Slider with increment and decrement buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-14\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Price range slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-15\",\n      \"registryDependencies\": [\n        \"@coss/fieldset\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Emoji rating slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-16\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Vertical slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-slider-17\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Vertical range slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-slider-18\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\"\n      ],\n      \"description\": \"Vertical slider with input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-slider-19\",\n      \"registryDependencies\": [\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Equalizer with vertical sliders\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-slider-20\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Object position sliders with reset\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-21\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/fieldset\",\n        \"@coss/label\",\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\",\n        \"input group\",\n        \"button\",\n        \"filter\"\n      ],\n      \"description\": \"Price slider with histogram\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-22\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"form\"\n      ],\n      \"description\": \"Slider in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-23\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/form\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"spinner\"\n      ],\n      \"description\": \"Basic spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-spinner-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-spinner-1\",\n      \"registryDependencies\": [\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Basic switch\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-1\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Disabled switch\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-2\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Switch with description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-3\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Switch card\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-4\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Switch in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Custom size switch\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-6\",\n      \"registryDependencies\": [\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"table\"\n      ],\n      \"description\": \"Basic table\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-table-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n        \"colSpan\": 2\n      },\n      \"name\": \"p-table-1\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/table\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"frame\",\n        \"table\"\n      ],\n      \"description\": \"Framed table\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-table-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n        \"colSpan\": 2\n      },\n      \"name\": \"p-table-2\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/frame\",\n        \"@coss/table\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"table\",\n        \"tanstack\"\n      ],\n      \"dependencies\": [\n        \"@tanstack/react-table\"\n      ],\n      \"description\": \"Table with TanStack Table and checkboxes\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-table-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n        \"colSpan\": 2\n      },\n      \"name\": \"p-table-3\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/checkbox\",\n        \"@coss/frame\",\n        \"@coss/table\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"pagination\",\n        \"select\",\n        \"table\",\n        \"tanstack\"\n      ],\n      \"dependencies\": [\n        \"@tanstack/react-table\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Table with TanStack Table, sorting, and pagination\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-table-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n        \"colSpan\": 2\n      },\n      \"name\": \"p-table-4\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/checkbox\",\n        \"@coss/frame\",\n        \"@coss/pagination\",\n        \"@coss/select\",\n        \"@coss/table\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Basic tabs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-1\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Tabs with underline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-2\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Vertical tabs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-tabs-3\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Vertical tabs with underline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-tabs-4\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Tabs with full rounded triggers\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-5\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon before name\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-6\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon before name and underline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-7\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-8\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with underline and icon on top\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-9\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\",\n        \"badge\"\n      ],\n      \"description\": \"Tabs with count badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-10\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Vertical tabs with underline and icon before name\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-tabs-11\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\",\n        \"badge\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon only and count badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-12\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon only and grouped tooltips\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-13\",\n      \"registryDependencies\": [\n        \"@coss/tabs\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Basic textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-1\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Small textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-2\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Large textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-3\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Disabled textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-4\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-5\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Textarea in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"label\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with label and required indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-7\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"label\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with optional label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-8\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with custom border and background\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-9\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Read-only textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-10\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with characters remaining counter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-11\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea field with required indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-12\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Shorter textarea with fixed height\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-13\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with button aligned right\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-14\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with button aligned left\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-15\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Basic toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Toast with status\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Loading toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Toast with action\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Promise toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Toast with varying heights\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Anchored toast with tooltip style\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\",\n        \"@coss/tooltip\",\n        \"@coss/use-copy-to-clipboard\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Anchored toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/spinner\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Promise toast with cancel action\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Basic toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-1\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Small toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-2\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Large toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-3\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Toggle group with outline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-4\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Vertical toggle group with outline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-5\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Disabled toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-6\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Toggle group with disabled item\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-7\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Multiple selection toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-8\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Toggle group with tooltips\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-9\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Basic toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-1\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Toggle with outline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-2\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Toggle with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-3\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Small toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-4\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Large toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-5\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Disabled toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-6\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Toggle icon group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-7\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"tooltip\",\n        \"toast\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Bookmark toggle with tooltip and success toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-8\",\n      \"registryDependencies\": [\n        \"@coss/toggle\",\n        \"@coss/tooltip\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toolbar\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Toolbar with toggles, buttons, and select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toolbar-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toolbar-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/select\",\n        \"@coss/toggle-group\",\n        \"@coss/toolbar\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tooltip\"\n      ],\n      \"description\": \"Basic tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tooltip-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tooltip-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tooltip\"\n      ],\n      \"description\": \"Grouped tooltips\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tooltip-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tooltip-2\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tooltip\"\n      ],\n      \"description\": \"Toggle group animated tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tooltip-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tooltip-3\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tooltip\"\n      ],\n      \"description\": \"Vertical group with animated tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tooltip-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tooltip-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"css\": {\n        \"@layer base\": {\n          \"*\": {\n            \"@apply border-border outline-ring/50\": {}\n          },\n          \"body\": {\n            \"@apply bg-background text-foreground\": {}\n          },\n          \"code, kbd, samp, pre\": {\n            \"font-family\": \"var(--font-mono)\"\n          }\n        }\n      },\n      \"cssVars\": {\n        \"dark\": {\n          \"accent\": \"--alpha(var(--color-white) / 4%)\",\n          \"accent-foreground\": \"var(--color-neutral-100)\",\n          \"background\": \"color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white))\",\n          \"border\": \"--alpha(var(--color-white) / 6%)\",\n          \"card\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"card-foreground\": \"var(--color-neutral-100)\",\n          \"destructive\": \"color-mix(in srgb, var(--color-red-500) 90%, var(--color-white))\",\n          \"destructive-foreground\": \"var(--color-red-400)\",\n          \"foreground\": \"var(--color-neutral-100)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-400)\",\n          \"input\": \"--alpha(var(--color-white) / 8%)\",\n          \"muted\": \"--alpha(var(--color-white) / 4%)\",\n          \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white))\",\n          \"popover\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"popover-foreground\": \"var(--color-neutral-100)\",\n          \"primary\": \"var(--color-neutral-100)\",\n          \"primary-foreground\": \"var(--color-neutral-800)\",\n          \"ring\": \"var(--color-neutral-500)\",\n          \"secondary\": \"--alpha(var(--color-white) / 4%)\",\n          \"secondary-foreground\": \"var(--color-neutral-100)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-400)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-400)\",\n          \"chart-1\": \"var(--color-blue-700)\",\n          \"chart-2\": \"var(--color-emerald-500)\",\n          \"chart-3\": \"var(--color-amber-500)\",\n          \"chart-4\": \"var(--color-purple-500)\",\n          \"chart-5\": \"var(--color-rose-500)\",\n          \"code\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"code-foreground\": \"var(--foreground)\",\n          \"code-highlight\": \"--alpha(var(--color-white) / 4%)\",\n          \"sidebar\": \"color-mix(in srgb, var(--color-neutral-950) 97%, var(--color-white))\",\n          \"sidebar-accent\": \"--alpha(var(--color-white) / 4%)\",\n          \"sidebar-accent-foreground\": \"var(--color-neutral-100)\",\n          \"sidebar-border\": \"--alpha(var(--color-white) / 5%)\",\n          \"sidebar-foreground\": \"color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar))\",\n          \"sidebar-primary\": \"var(--color-neutral-100)\",\n          \"sidebar-primary-foreground\": \"var(--color-neutral-800)\",\n          \"sidebar-ring\": \"var(--color-neutral-400)\"\n        },\n        \"light\": {\n          \"accent\": \"--alpha(var(--color-black) / 4%)\",\n          \"accent-foreground\": \"var(--color-neutral-800)\",\n          \"background\": \"var(--color-white)\",\n          \"border\": \"--alpha(var(--color-black) / 8%)\",\n          \"card\": \"var(--color-white)\",\n          \"card-foreground\": \"var(--color-neutral-800)\",\n          \"destructive\": \"var(--color-red-500)\",\n          \"destructive-foreground\": \"var(--color-red-700)\",\n          \"foreground\": \"var(--color-neutral-800)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-700)\",\n          \"input\": \"--alpha(var(--color-black) / 10%)\",\n          \"muted\": \"--alpha(var(--color-black) / 4%)\",\n          \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black))\",\n          \"popover\": \"var(--color-white)\",\n          \"popover-foreground\": \"var(--color-neutral-800)\",\n          \"primary\": \"var(--color-neutral-800)\",\n          \"primary-foreground\": \"var(--color-neutral-50)\",\n          \"ring\": \"var(--color-neutral-400)\",\n          \"secondary\": \"--alpha(var(--color-black) / 4%)\",\n          \"secondary-foreground\": \"var(--color-neutral-800)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-700)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-700)\",\n          \"chart-1\": \"var(--color-orange-600)\",\n          \"chart-2\": \"var(--color-teal-600)\",\n          \"chart-3\": \"var(--color-cyan-900)\",\n          \"chart-4\": \"var(--color-amber-400)\",\n          \"chart-5\": \"var(--color-amber-500)\",\n          \"code\": \"var(--color-white)\",\n          \"code-foreground\": \"var(--foreground)\",\n          \"code-highlight\": \"--alpha(var(--color-black) / 4%)\",\n          \"radius\": \"0.625rem\",\n          \"sidebar\": \"var(--color-neutral-50)\",\n          \"sidebar-accent\": \"--alpha(var(--color-black) / 4%)\",\n          \"sidebar-accent-foreground\": \"var(--color-neutral-800)\",\n          \"sidebar-border\": \"--alpha(var(--color-black) / 6%)\",\n          \"sidebar-foreground\": \"color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar))\",\n          \"sidebar-primary\": \"var(--color-neutral-800)\",\n          \"sidebar-primary-foreground\": \"var(--color-neutral-50)\",\n          \"sidebar-ring\": \"var(--color-neutral-400)\"\n        },\n        \"theme\": {\n          \"font-heading\": \"var(--font-heading, ui-sans-serif, system-ui, sans-serif)\",\n          \"font-mono\": \"var(--font-mono, ui-monospace, monospace)\",\n          \"font-sans\": \"var(--font-sans, ui-sans-serif, system-ui, sans-serif)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\",\n        \"class-variance-authority\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Complete coss theme: colors, sidebar, fonts, and base styles. Use with `npx shadcn init @coss/style` for full project setup.\",\n      \"devDependencies\": [\n        \"tw-animate-css\"\n      ],\n      \"extends\": \"none\",\n      \"name\": \"style\",\n      \"registryDependencies\": [\n        \"utils\",\n        \"@coss/ui\"\n      ],\n      \"type\": \"registry:style\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"accent\": \"--alpha(var(--color-white) / 4%)\",\n          \"accent-foreground\": \"var(--color-neutral-100)\",\n          \"background\": \"color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white))\",\n          \"border\": \"--alpha(var(--color-white) / 6%)\",\n          \"card\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"card-foreground\": \"var(--color-neutral-100)\",\n          \"destructive\": \"color-mix(in srgb, var(--color-red-500) 90%, var(--color-white))\",\n          \"destructive-foreground\": \"var(--color-red-400)\",\n          \"foreground\": \"var(--color-neutral-100)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-400)\",\n          \"input\": \"--alpha(var(--color-white) / 8%)\",\n          \"muted\": \"--alpha(var(--color-white) / 4%)\",\n          \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white))\",\n          \"popover\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"popover-foreground\": \"var(--color-neutral-100)\",\n          \"primary\": \"var(--color-neutral-100)\",\n          \"primary-foreground\": \"var(--color-neutral-800)\",\n          \"ring\": \"var(--color-neutral-500)\",\n          \"secondary\": \"--alpha(var(--color-white) / 4%)\",\n          \"secondary-foreground\": \"var(--color-neutral-100)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-400)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-400)\"\n        },\n        \"light\": {\n          \"accent\": \"--alpha(var(--color-black) / 4%)\",\n          \"accent-foreground\": \"var(--color-neutral-800)\",\n          \"background\": \"var(--color-white)\",\n          \"border\": \"--alpha(var(--color-black) / 8%)\",\n          \"card\": \"var(--color-white)\",\n          \"card-foreground\": \"var(--color-neutral-800)\",\n          \"destructive\": \"var(--color-red-500)\",\n          \"destructive-foreground\": \"var(--color-red-700)\",\n          \"foreground\": \"var(--color-neutral-800)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-700)\",\n          \"input\": \"--alpha(var(--color-black) / 10%)\",\n          \"muted\": \"--alpha(var(--color-black) / 4%)\",\n          \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black))\",\n          \"popover\": \"var(--color-white)\",\n          \"popover-foreground\": \"var(--color-neutral-800)\",\n          \"primary\": \"var(--color-neutral-800)\",\n          \"primary-foreground\": \"var(--color-neutral-50)\",\n          \"ring\": \"var(--color-neutral-400)\",\n          \"secondary\": \"--alpha(var(--color-black) / 4%)\",\n          \"secondary-foreground\": \"var(--color-neutral-800)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-700)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-700)\"\n        }\n      },\n      \"name\": \"colors-neutral\",\n      \"type\": \"registry:style\"\n    },\n    {\n      \"dependencies\": [\n        \"clsx\",\n        \"tailwind-merge\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/lib/utils.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"utils\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/base-ui/use-render.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"use-render\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/base-ui/merge-props.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"merge-props\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/base-ui/csp-provider.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"csp-provider\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/base-ui/direction-provider.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"direction-provider\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-media-query.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-media-query\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-copy-to-clipboard.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-copy-to-clipboard\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"name\": \"shadcn/ui\"\n}"
  },
  {
    "path": "apps/ui/public/r/scroll-area.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"scroll-area\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/scroll-area.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { ScrollArea as ScrollAreaPrimitive } from \\\"@base-ui/react/scroll-area\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function ScrollArea({\\n  className,\\n  children,\\n  scrollFade = false,\\n  scrollbarGutter = false,\\n  ...props\\n}: ScrollAreaPrimitive.Root.Props & {\\n  scrollFade?: boolean;\\n  scrollbarGutter?: boolean;\\n}): React.ReactElement {\\n  return (\\n    <ScrollAreaPrimitive.Root\\n      className={cn(\\\"size-full min-h-0\\\", className)}\\n      {...props}\\n    >\\n      <ScrollAreaPrimitive.Viewport\\n        className={cn(\\n          \\\"h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\\\",\\n          scrollFade &&\\n            \\\"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\\\",\\n          scrollbarGutter &&\\n            \\\"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\\\",\\n        )}\\n        data-slot=\\\"scroll-area-viewport\\\"\\n      >\\n        {children}\\n      </ScrollAreaPrimitive.Viewport>\\n      <ScrollBar orientation=\\\"vertical\\\" />\\n      <ScrollBar orientation=\\\"horizontal\\\" />\\n      <ScrollAreaPrimitive.Corner data-slot=\\\"scroll-area-corner\\\" />\\n    </ScrollAreaPrimitive.Root>\\n  );\\n}\\n\\nexport function ScrollBar({\\n  className,\\n  orientation = \\\"vertical\\\",\\n  ...props\\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\\n  return (\\n    <ScrollAreaPrimitive.Scrollbar\\n      className={cn(\\n        \\\"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\\\",\\n        className,\\n      )}\\n      data-slot=\\\"scroll-area-scrollbar\\\"\\n      orientation={orientation}\\n      {...props}\\n    >\\n      <ScrollAreaPrimitive.Thumb\\n        className=\\\"relative flex-1 rounded-full bg-foreground/20\\\"\\n        data-slot=\\\"scroll-area-thumb\\\"\\n      />\\n    </ScrollAreaPrimitive.Scrollbar>\\n  );\\n}\\n\\nexport { ScrollAreaPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/select.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"select\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/select.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { Select as SelectPrimitive } from \\\"@base-ui/react/select\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport {\\n  ChevronDownIcon,\\n  ChevronsUpDownIcon,\\n  ChevronUpIcon,\\n} from \\\"lucide-react\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;\\n\\nexport const selectTriggerVariants = cva(\\n  \\\"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\\\",\\n  {\\n    defaultVariants: {\\n      size: \\\"default\\\",\\n    },\\n    variants: {\\n      size: {\\n        default: \\\"\\\",\\n        lg: \\\"min-h-10 sm:min-h-9\\\",\\n        sm: \\\"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport const selectTriggerIconClassName = \\\"-me-1 size-4.5 opacity-80 sm:size-4\\\";\\n\\nexport interface SelectButtonProps extends useRender.ComponentProps<\\\"button\\\"> {\\n  size?: VariantProps<typeof selectTriggerVariants>[\\\"size\\\"];\\n}\\n\\nexport function SelectButton({\\n  className,\\n  size,\\n  render,\\n  children,\\n  ...props\\n}: SelectButtonProps): React.ReactElement {\\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\\\"type\\\"] =\\n    render ? undefined : \\\"button\\\";\\n\\n  const defaultProps = {\\n    children: (\\n      <>\\n        <span className=\\\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\\\">\\n          {children}\\n        </span>\\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\\n      </>\\n    ),\\n    className: cn(selectTriggerVariants({ size }), \\\"min-w-0\\\", className),\\n    \\\"data-slot\\\": \\\"select-button\\\",\\n    type: typeValue,\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"button\\\",\\n    props: mergeProps<\\\"button\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function SelectTrigger({\\n  className,\\n  size = \\\"default\\\",\\n  children,\\n  ...props\\n}: SelectPrimitive.Trigger.Props &\\n  VariantProps<typeof selectTriggerVariants>): React.ReactElement {\\n  return (\\n    <SelectPrimitive.Trigger\\n      className={cn(selectTriggerVariants({ size }), className)}\\n      data-slot=\\\"select-trigger\\\"\\n      {...props}\\n    >\\n      {children}\\n      <SelectPrimitive.Icon data-slot=\\\"select-icon\\\">\\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\\n      </SelectPrimitive.Icon>\\n    </SelectPrimitive.Trigger>\\n  );\\n}\\n\\nexport function SelectValue({\\n  className,\\n  ...props\\n}: SelectPrimitive.Value.Props): React.ReactElement {\\n  return (\\n    <SelectPrimitive.Value\\n      className={cn(\\n        \\\"flex-1 truncate data-placeholder:text-muted-foreground\\\",\\n        className,\\n      )}\\n      data-slot=\\\"select-value\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SelectPopup({\\n  className,\\n  children,\\n  side = \\\"bottom\\\",\\n  sideOffset = 4,\\n  align = \\\"start\\\",\\n  alignOffset = 0,\\n  alignItemWithTrigger = true,\\n  anchor,\\n  ...props\\n}: SelectPrimitive.Popup.Props & {\\n  side?: SelectPrimitive.Positioner.Props[\\\"side\\\"];\\n  sideOffset?: SelectPrimitive.Positioner.Props[\\\"sideOffset\\\"];\\n  align?: SelectPrimitive.Positioner.Props[\\\"align\\\"];\\n  alignOffset?: SelectPrimitive.Positioner.Props[\\\"alignOffset\\\"];\\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\\\"alignItemWithTrigger\\\"];\\n  anchor?: SelectPrimitive.Positioner.Props[\\\"anchor\\\"];\\n}): React.ReactElement {\\n  return (\\n    <SelectPrimitive.Portal>\\n      <SelectPrimitive.Positioner\\n        align={align}\\n        alignItemWithTrigger={alignItemWithTrigger}\\n        alignOffset={alignOffset}\\n        anchor={anchor}\\n        className=\\\"z-50 select-none\\\"\\n        data-slot=\\\"select-positioner\\\"\\n        side={side}\\n        sideOffset={sideOffset}\\n      >\\n        <SelectPrimitive.Popup\\n          className=\\\"origin-(--transform-origin) text-foreground outline-none\\\"\\n          data-slot=\\\"select-popup\\\"\\n          {...props}\\n        >\\n          <SelectPrimitive.ScrollUpArrow\\n            className=\\\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\\\"\\n            data-slot=\\\"select-scroll-up-arrow\\\"\\n          >\\n            <ChevronUpIcon className=\\\"relative size-4.5 sm:size-4\\\" />\\n          </SelectPrimitive.ScrollUpArrow>\\n          <div className=\\\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\">\\n            <SelectPrimitive.List\\n              className={cn(\\n                \\\"max-h-(--available-height) overflow-y-auto p-1\\\",\\n                className,\\n              )}\\n              data-slot=\\\"select-list\\\"\\n            >\\n              {children}\\n            </SelectPrimitive.List>\\n          </div>\\n          <SelectPrimitive.ScrollDownArrow\\n            className=\\\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\\\"\\n            data-slot=\\\"select-scroll-down-arrow\\\"\\n          >\\n            <ChevronDownIcon className=\\\"relative size-4.5 sm:size-4\\\" />\\n          </SelectPrimitive.ScrollDownArrow>\\n        </SelectPrimitive.Popup>\\n      </SelectPrimitive.Positioner>\\n    </SelectPrimitive.Portal>\\n  );\\n}\\n\\nexport function SelectItem({\\n  className,\\n  children,\\n  ...props\\n}: SelectPrimitive.Item.Props): React.ReactElement {\\n  return (\\n    <SelectPrimitive.Item\\n      className={cn(\\n        \\\"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"select-item\\\"\\n      {...props}\\n    >\\n      <SelectPrimitive.ItemIndicator className=\\\"col-start-1\\\">\\n        <svg\\n          aria-hidden=\\\"true\\\"\\n          fill=\\\"none\\\"\\n          height=\\\"24\\\"\\n          stroke=\\\"currentColor\\\"\\n          strokeLinecap=\\\"round\\\"\\n          strokeLinejoin=\\\"round\\\"\\n          strokeWidth=\\\"2\\\"\\n          viewBox=\\\"0 0 24 24\\\"\\n          width=\\\"24\\\"\\n          xmlns=\\\"http://www.w3.org/2000/svg\\\"\\n        >\\n          <path d=\\\"M5.252 12.7 10.2 18.63 18.748 5.37\\\" />\\n        </svg>\\n      </SelectPrimitive.ItemIndicator>\\n      <SelectPrimitive.ItemText className=\\\"col-start-2 min-w-0\\\">\\n        {children}\\n      </SelectPrimitive.ItemText>\\n    </SelectPrimitive.Item>\\n  );\\n}\\n\\nexport function SelectSeparator({\\n  className,\\n  ...props\\n}: SelectPrimitive.Separator.Props): React.ReactElement {\\n  return (\\n    <SelectPrimitive.Separator\\n      className={cn(\\\"mx-2 my-1 h-px bg-border\\\", className)}\\n      data-slot=\\\"select-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SelectGroup(\\n  props: SelectPrimitive.Group.Props,\\n): React.ReactElement {\\n  return <SelectPrimitive.Group data-slot=\\\"select-group\\\" {...props} />;\\n}\\n\\nexport function SelectLabel({\\n  className,\\n  ...props\\n}: SelectPrimitive.Label.Props): React.ReactElement {\\n  return (\\n    <SelectPrimitive.Label\\n      className={cn(\\n        \\\"not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\\\",\\n        className,\\n      )}\\n      data-slot=\\\"select-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SelectGroupLabel(\\n  props: SelectPrimitive.GroupLabel.Props,\\n): React.ReactElement {\\n  return (\\n    <SelectPrimitive.GroupLabel\\n      className=\\\"px-2 py-1.5 font-medium text-muted-foreground text-xs\\\"\\n      data-slot=\\\"select-group-label\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { SelectPrimitive, SelectPopup as SelectContent };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/separator.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"separator\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/separator.tsx\",\n      \"content\": \"import { Separator as SeparatorPrimitive } from \\\"@base-ui/react/separator\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Separator({\\n  className,\\n  orientation = \\\"horizontal\\\",\\n  ...props\\n}: SeparatorPrimitive.Props): React.ReactElement {\\n  return (\\n    <SeparatorPrimitive\\n      className={cn(\\n        \\\"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch\\\",\\n        className,\\n      )}\\n      data-slot=\\\"separator\\\"\\n      orientation={orientation}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { SeparatorPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/sheet.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"sheet\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/scroll-area\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/sheet.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Dialog as SheetPrimitive } from \\\"@base-ui/react/dialog\\\";\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { XIcon } from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\n\\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\\n\\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\\n\\nexport function SheetTrigger(\\n  props: SheetPrimitive.Trigger.Props,\\n): React.ReactElement {\\n  return <SheetPrimitive.Trigger data-slot=\\\"sheet-trigger\\\" {...props} />;\\n}\\n\\nexport function SheetClose(\\n  props: SheetPrimitive.Close.Props,\\n): React.ReactElement {\\n  return <SheetPrimitive.Close data-slot=\\\"sheet-close\\\" {...props} />;\\n}\\n\\nexport function SheetBackdrop({\\n  className,\\n  ...props\\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\\n  return (\\n    <SheetPrimitive.Backdrop\\n      className={cn(\\n        \\\"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"sheet-backdrop\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SheetViewport({\\n  className,\\n  side,\\n  variant = \\\"default\\\",\\n  ...props\\n}: SheetPrimitive.Viewport.Props & {\\n  side?: \\\"right\\\" | \\\"left\\\" | \\\"top\\\" | \\\"bottom\\\";\\n  variant?: \\\"default\\\" | \\\"inset\\\";\\n}): React.ReactElement {\\n  return (\\n    <SheetPrimitive.Viewport\\n      className={cn(\\n        \\\"fixed inset-0 z-50 grid\\\",\\n        side === \\\"bottom\\\" && \\\"grid grid-rows-[1fr_auto] pt-12\\\",\\n        side === \\\"top\\\" && \\\"grid grid-rows-[auto_1fr] pb-12\\\",\\n        side === \\\"left\\\" && \\\"flex justify-start\\\",\\n        side === \\\"right\\\" && \\\"flex justify-end\\\",\\n        variant === \\\"inset\\\" && \\\"sm:p-4\\\",\\n      )}\\n      data-slot=\\\"sheet-viewport\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SheetPopup({\\n  className,\\n  children,\\n  showCloseButton = true,\\n  side = \\\"right\\\",\\n  variant = \\\"default\\\",\\n  closeProps,\\n  ...props\\n}: SheetPrimitive.Popup.Props & {\\n  showCloseButton?: boolean;\\n  side?: \\\"right\\\" | \\\"left\\\" | \\\"top\\\" | \\\"bottom\\\";\\n  variant?: \\\"default\\\" | \\\"inset\\\";\\n  closeProps?: SheetPrimitive.Close.Props;\\n}): React.ReactElement {\\n  return (\\n    <SheetPortal>\\n      <SheetBackdrop />\\n      <SheetViewport side={side} variant={variant}>\\n        <SheetPrimitive.Popup\\n          className={cn(\\n            \\\"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            side === \\\"bottom\\\" &&\\n              \\\"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8\\\",\\n            side === \\\"top\\\" &&\\n              \\\"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8\\\",\\n            side === \\\"left\\\" &&\\n              \\\"w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8\\\",\\n            side === \\\"right\\\" &&\\n              \\\"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8\\\",\\n            variant === \\\"inset\\\" &&\\n              \\\"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\\\",\\n            className,\\n          )}\\n          data-slot=\\\"sheet-popup\\\"\\n          {...props}\\n        >\\n          {children}\\n          {showCloseButton && (\\n            <SheetPrimitive.Close\\n              aria-label=\\\"Close\\\"\\n              className=\\\"absolute end-2 top-2\\\"\\n              render={<Button size=\\\"icon\\\" variant=\\\"ghost\\\" />}\\n              {...closeProps}\\n            >\\n              <XIcon />\\n            </SheetPrimitive.Close>\\n          )}\\n        </SheetPrimitive.Popup>\\n      </SheetViewport>\\n    </SheetPortal>\\n  );\\n}\\n\\nexport function SheetHeader({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"sheet-header\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function SheetFooter({\\n  className,\\n  variant = \\\"default\\\",\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\"> & {\\n  variant?: \\\"default\\\" | \\\"bare\\\";\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\\\",\\n      variant === \\\"default\\\" && \\\"border-t bg-muted/72 py-4\\\",\\n      variant === \\\"bare\\\" &&\\n        \\\"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"sheet-footer\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps<\\\"div\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function SheetTitle({\\n  className,\\n  ...props\\n}: SheetPrimitive.Title.Props): React.ReactElement {\\n  return (\\n    <SheetPrimitive.Title\\n      className={cn(\\n        \\\"font-heading font-semibold text-xl leading-none\\\",\\n        className,\\n      )}\\n      data-slot=\\\"sheet-title\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SheetDescription({\\n  className,\\n  ...props\\n}: SheetPrimitive.Description.Props): React.ReactElement {\\n  return (\\n    <SheetPrimitive.Description\\n      className={cn(\\\"text-muted-foreground text-sm\\\", className)}\\n      data-slot=\\\"sheet-description\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SheetPanel({\\n  className,\\n  scrollFade = true,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\"> & {\\n  scrollFade?: boolean;\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\\\",\\n      className,\\n    ),\\n    \\\"data-slot\\\": \\\"sheet-panel\\\",\\n  };\\n\\n  return (\\n    <ScrollArea scrollFade={scrollFade}>\\n      {useRender({\\n        defaultTagName: \\\"div\\\",\\n        props: mergeProps<\\\"div\\\">(defaultProps, props),\\n        render,\\n      })}\\n    </ScrollArea>\\n  );\\n}\\n\\nexport {\\n  SheetPrimitive,\\n  SheetBackdrop as SheetOverlay,\\n  SheetPopup as SheetContent,\\n};\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/sidebar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"sidebar\",\n  \"type\": \"registry:ui\",\n  \"registryDependencies\": [\n    \"@coss/button\",\n    \"@coss/input\",\n    \"@coss/scroll-area\",\n    \"@coss/separator\",\n    \"@coss/sheet\",\n    \"@coss/skeleton\",\n    \"@coss/tooltip\",\n    \"@coss/use-media-query\",\n    \"@coss/utils\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/sidebar.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport { useRender } from \\\"@base-ui/react/use-render\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport { PanelLeftIcon } from \\\"lucide-react\\\";\\nimport * as React from \\\"react\\\";\\nimport { useMediaQuery } from \\\"@/registry/default/hooks/use-media-query\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Button } from \\\"@/registry/default/ui/button\\\";\\nimport { Input } from \\\"@/registry/default/ui/input\\\";\\nimport { ScrollArea } from \\\"@/registry/default/ui/scroll-area\\\";\\nimport { Separator } from \\\"@/registry/default/ui/separator\\\";\\nimport {\\n  Sheet,\\n  SheetDescription,\\n  SheetHeader,\\n  SheetPopup,\\n  SheetTitle,\\n} from \\\"@/registry/default/ui/sheet\\\";\\nimport { Skeleton } from \\\"@/registry/default/ui/skeleton\\\";\\nimport {\\n  Tooltip,\\n  TooltipPopup,\\n  TooltipTrigger,\\n} from \\\"@/registry/default/ui/tooltip\\\";\\n\\nconst SIDEBAR_COOKIE_NAME: string = \\\"sidebar_state\\\";\\nconst SIDEBAR_COOKIE_MAX_AGE: number = 60 * 60 * 24 * 7;\\nconst SIDEBAR_WIDTH: string = \\\"16rem\\\";\\nconst SIDEBAR_WIDTH_MOBILE: string = \\\"18rem\\\";\\nconst SIDEBAR_WIDTH_ICON: string = \\\"3rem\\\";\\nconst SIDEBAR_KEYBOARD_SHORTCUT: string = \\\"b\\\";\\n\\nconst sidebarMenuButtonVariants = cva(\\n  \\\"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\\\",\\n  {\\n    defaultVariants: {\\n      size: \\\"default\\\",\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      size: {\\n        default: \\\"h-8 text-sm\\\",\\n        lg: \\\"h-12 text-sm group-data-[collapsible=icon]:p-0!\\\",\\n        sm: \\\"h-7 text-xs\\\",\\n      },\\n      variant: {\\n        default: \\\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\\\",\\n        outline:\\n          \\\"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport type SidebarContextProps = {\\n  state: \\\"expanded\\\" | \\\"collapsed\\\";\\n  open: boolean;\\n  setOpen: (open: boolean) => void;\\n  openMobile: boolean;\\n  setOpenMobile: (open: boolean) => void;\\n  isMobile: boolean;\\n  toggleSidebar: () => void;\\n};\\n\\nexport const SidebarContext: React.Context<SidebarContextProps | null> =\\n  React.createContext<SidebarContextProps | null>(null);\\n\\nexport function useSidebar(): SidebarContextProps {\\n  const context = React.useContext(SidebarContext);\\n  if (!context) {\\n    throw new Error(\\\"useSidebar must be used within a SidebarProvider.\\\");\\n  }\\n\\n  return context;\\n}\\n\\nexport function SidebarProvider({\\n  defaultOpen = true,\\n  open: openProp,\\n  onOpenChange: setOpenProp,\\n  className,\\n  style,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> & {\\n  defaultOpen?: boolean;\\n  open?: boolean;\\n  onOpenChange?: (open: boolean) => void;\\n}): React.ReactElement {\\n  const isMobile = useMediaQuery(\\\"max-md\\\");\\n  const [openMobile, setOpenMobile] = React.useState(false);\\n\\n  // This is the internal state of the sidebar.\\n  // We use openProp and setOpenProp for control from outside the component.\\n  const [_open, _setOpen] = React.useState(defaultOpen);\\n  const open = openProp ?? _open;\\n  const setOpen = React.useCallback(\\n    async (value: boolean | ((value: boolean) => boolean)) => {\\n      const openState = typeof value === \\\"function\\\" ? value(open) : value;\\n      if (setOpenProp) {\\n        setOpenProp(openState);\\n      } else {\\n        _setOpen(openState);\\n      }\\n\\n      // This sets the cookie to keep the sidebar state.\\n      await cookieStore.set({\\n        expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,\\n        name: SIDEBAR_COOKIE_NAME,\\n        path: \\\"/\\\",\\n        value: String(openState),\\n      });\\n    },\\n    [setOpenProp, open],\\n  );\\n\\n  // Helper to toggle the sidebar.\\n  const toggleSidebar = React.useCallback(() => {\\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\\n  }, [isMobile, setOpen]);\\n\\n  // Adds a keyboard shortcut to toggle the sidebar.\\n  React.useEffect(() => {\\n    const handleKeyDown = (event: KeyboardEvent): void => {\\n      if (\\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\\n        (event.metaKey || event.ctrlKey)\\n      ) {\\n        event.preventDefault();\\n        toggleSidebar();\\n      }\\n    };\\n\\n    window.addEventListener(\\\"keydown\\\", handleKeyDown);\\n    return () => window.removeEventListener(\\\"keydown\\\", handleKeyDown);\\n  }, [toggleSidebar]);\\n\\n  // We add a state so that we can do data-state=\\\"expanded\\\" or \\\"collapsed\\\".\\n  // This makes it easier to style the sidebar with Tailwind classes.\\n  const state = open ? \\\"expanded\\\" : \\\"collapsed\\\";\\n\\n  const contextValue = React.useMemo<SidebarContextProps>(\\n    () => ({\\n      isMobile,\\n      open,\\n      openMobile,\\n      setOpen,\\n      setOpenMobile,\\n      state,\\n      toggleSidebar,\\n    }),\\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar],\\n  );\\n\\n  return (\\n    <SidebarContext.Provider value={contextValue}>\\n      <div\\n        className={cn(\\n          \\\"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\\\",\\n          className,\\n        )}\\n        data-slot=\\\"sidebar-wrapper\\\"\\n        style={\\n          {\\n            \\\"--sidebar-width\\\": SIDEBAR_WIDTH,\\n            \\\"--sidebar-width-icon\\\": SIDEBAR_WIDTH_ICON,\\n            ...style,\\n          } as React.CSSProperties\\n        }\\n        {...props}\\n      >\\n        {children}\\n      </div>\\n    </SidebarContext.Provider>\\n  );\\n}\\n\\nexport function Sidebar({\\n  side = \\\"left\\\",\\n  variant = \\\"sidebar\\\",\\n  collapsible = \\\"offcanvas\\\",\\n  className,\\n  children,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> & {\\n  side?: \\\"left\\\" | \\\"right\\\";\\n  variant?: \\\"sidebar\\\" | \\\"floating\\\" | \\\"inset\\\";\\n  collapsible?: \\\"offcanvas\\\" | \\\"icon\\\" | \\\"none\\\";\\n}): React.ReactElement {\\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\\n\\n  if (collapsible === \\\"none\\\") {\\n    return (\\n      <div\\n        className={cn(\\n          \\\"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\\\",\\n          className,\\n        )}\\n        data-slot=\\\"sidebar\\\"\\n        {...props}\\n      >\\n        {children}\\n      </div>\\n    );\\n  }\\n\\n  if (isMobile) {\\n    return (\\n      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>\\n        <SheetPopup\\n          className=\\\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\\\"\\n          data-mobile=\\\"true\\\"\\n          data-sidebar=\\\"sidebar\\\"\\n          data-slot=\\\"sidebar\\\"\\n          side={side}\\n          style={\\n            {\\n              \\\"--sidebar-width\\\": SIDEBAR_WIDTH_MOBILE,\\n            } as React.CSSProperties\\n          }\\n        >\\n          <SheetHeader className=\\\"sr-only\\\">\\n            <SheetTitle>Sidebar</SheetTitle>\\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\\n          </SheetHeader>\\n          <div className=\\\"flex h-full w-full flex-col\\\">{children}</div>\\n        </SheetPopup>\\n      </Sheet>\\n    );\\n  }\\n\\n  return (\\n    <div\\n      className=\\\"group peer hidden text-sidebar-foreground md:block\\\"\\n      data-collapsible={state === \\\"collapsed\\\" ? collapsible : \\\"\\\"}\\n      data-side={side}\\n      data-slot=\\\"sidebar\\\"\\n      data-state={state}\\n      data-variant={variant}\\n    >\\n      {/* This is what handles the sidebar gap on desktop */}\\n      <div\\n        className={cn(\\n          \\\"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\\\",\\n          \\\"group-data-[collapsible=offcanvas]:w-0\\\",\\n          \\\"group-data-[side=right]:rotate-180\\\",\\n          variant === \\\"floating\\\" || variant === \\\"inset\\\"\\n            ? \\\"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\\\"\\n            : \\\"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\\\",\\n        )}\\n        data-slot=\\\"sidebar-gap\\\"\\n      />\\n      <div\\n        className={cn(\\n          \\\"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\\\",\\n          side === \\\"left\\\"\\n            ? \\\"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\\\"\\n            : \\\"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\\\",\\n          // Adjust the padding for floating and inset variants.\\n          variant === \\\"floating\\\" || variant === \\\"inset\\\"\\n            ? \\\"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\\\"\\n            : \\\"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\\\",\\n          className,\\n        )}\\n        data-slot=\\\"sidebar-container\\\"\\n        {...props}\\n      >\\n        <div\\n          className=\\\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5\\\"\\n          data-sidebar=\\\"sidebar\\\"\\n          data-slot=\\\"sidebar-inner\\\"\\n        >\\n          {children}\\n        </div>\\n      </div>\\n    </div>\\n  );\\n}\\n\\nexport function SidebarTrigger({\\n  className,\\n  onClick,\\n  ...props\\n}: React.ComponentProps<typeof Button>): React.ReactElement {\\n  const { toggleSidebar } = useSidebar();\\n\\n  return (\\n    <Button\\n      className={cn(\\\"size-7\\\", className)}\\n      data-sidebar=\\\"trigger\\\"\\n      data-slot=\\\"sidebar-trigger\\\"\\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\\n        onClick?.(event);\\n        toggleSidebar();\\n      }}\\n      size=\\\"icon\\\"\\n      variant=\\\"ghost\\\"\\n      {...props}\\n    >\\n      <PanelLeftIcon />\\n      <span className=\\\"sr-only\\\">Toggle Sidebar</span>\\n    </Button>\\n  );\\n}\\n\\nexport function SidebarRail({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"button\\\">): React.ReactElement {\\n  const { toggleSidebar } = useSidebar();\\n\\n  return (\\n    <button\\n      aria-label=\\\"Toggle Sidebar\\\"\\n      className={cn(\\n        \\\"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\\\",\\n        \\\"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\\\",\\n        \\\"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\\\",\\n        \\\"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\\\",\\n        \\\"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\\\",\\n        \\\"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\\\",\\n        className,\\n      )}\\n      data-sidebar=\\\"rail\\\"\\n      data-slot=\\\"sidebar-rail\\\"\\n      onClick={toggleSidebar}\\n      tabIndex={-1}\\n      title=\\\"Toggle Sidebar\\\"\\n      type=\\\"button\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarInset({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"main\\\">): React.ReactElement {\\n  return (\\n    <main\\n      className={cn(\\n        \\\"relative flex w-full flex-1 flex-col bg-background\\\",\\n        \\\"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5\\\",\\n        className,\\n      )}\\n      data-slot=\\\"sidebar-inset\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarInput({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof Input>): React.ReactElement {\\n  return (\\n    <Input\\n      className={cn(\\\"h-8 w-full bg-background shadow-none\\\", className)}\\n      data-sidebar=\\\"input\\\"\\n      data-slot=\\\"sidebar-input\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarHeader({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"flex flex-col gap-2 p-2\\\", className)}\\n      data-sidebar=\\\"header\\\"\\n      data-slot=\\\"sidebar-header\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarFooter({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"flex flex-col gap-2 p-2\\\", className)}\\n      data-sidebar=\\\"footer\\\"\\n      data-slot=\\\"sidebar-footer\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarSeparator({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\\n  return (\\n    <Separator\\n      className={cn(\\\"mx-2 w-auto bg-sidebar-border\\\", className)}\\n      data-sidebar=\\\"separator\\\"\\n      data-slot=\\\"sidebar-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <ScrollArea\\n      className=\\\"**:data-[slot=scroll-area-scrollbar]:hidden\\\"\\n      scrollFade\\n    >\\n      <div\\n        className={cn(\\n          \\\"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\\\",\\n          className,\\n        )}\\n        data-sidebar=\\\"content\\\"\\n        data-slot=\\\"sidebar-content\\\"\\n        {...props}\\n      />\\n    </ScrollArea>\\n  );\\n}\\n\\nexport function SidebarGroup({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"relative flex w-full min-w-0 flex-col p-2\\\", className)}\\n      data-sidebar=\\\"group\\\"\\n      data-slot=\\\"sidebar-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarGroupLabel({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\\\",\\n      \\\"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\\\",\\n      className,\\n    ),\\n    \\\"data-sidebar\\\": \\\"group-label\\\",\\n    \\\"data-slot\\\": \\\"sidebar-group-label\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"div\\\",\\n    props: mergeProps(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function SidebarGroupAction({\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"button\\\">): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\\\",\\n      // Increases the hit area of the button on mobile.\\n      \\\"after:absolute after:-inset-2 md:after:hidden\\\",\\n      \\\"group-data-[collapsible=icon]:hidden\\\",\\n      className,\\n    ),\\n    \\\"data-sidebar\\\": \\\"group-action\\\",\\n    \\\"data-slot\\\": \\\"sidebar-group-action\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"button\\\",\\n    props: mergeProps(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function SidebarGroupContent({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\\"w-full text-sm\\\", className)}\\n      data-sidebar=\\\"group-content\\\"\\n      data-slot=\\\"sidebar-group-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarMenu({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"ul\\\">): React.ReactElement {\\n  return (\\n    <ul\\n      className={cn(\\\"flex w-full min-w-0 flex-col gap-1\\\", className)}\\n      data-sidebar=\\\"menu\\\"\\n      data-slot=\\\"sidebar-menu\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarMenuItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"li\\\">): React.ReactElement {\\n  return (\\n    <li\\n      className={cn(\\\"group/menu-item relative\\\", className)}\\n      data-sidebar=\\\"menu-item\\\"\\n      data-slot=\\\"sidebar-menu-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarMenuButton({\\n  isActive = false,\\n  variant = \\\"default\\\",\\n  size = \\\"default\\\",\\n  tooltip,\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"button\\\"> & {\\n  isActive?: boolean;\\n  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;\\n} & VariantProps<typeof sidebarMenuButtonVariants>): React.ReactElement {\\n  const { isMobile, state } = useSidebar();\\n\\n  const defaultProps = {\\n    className: cn(sidebarMenuButtonVariants({ size, variant }), className),\\n    \\\"data-active\\\": isActive,\\n    \\\"data-sidebar\\\": \\\"menu-button\\\",\\n    \\\"data-size\\\": size,\\n    \\\"data-slot\\\": \\\"sidebar-menu-button\\\",\\n  };\\n\\n  const buttonProps = mergeProps<\\\"button\\\">(defaultProps, props);\\n\\n  const buttonElement = useRender({\\n    defaultTagName: \\\"button\\\",\\n    props: buttonProps,\\n    render,\\n  });\\n\\n  if (!tooltip) {\\n    return buttonElement;\\n  }\\n\\n  if (typeof tooltip === \\\"string\\\") {\\n    tooltip = {\\n      children: tooltip,\\n    };\\n  }\\n\\n  return (\\n    <Tooltip>\\n      <TooltipTrigger\\n        render={buttonElement as React.ReactElement<Record<string, unknown>>}\\n      />\\n      <TooltipPopup\\n        align=\\\"center\\\"\\n        hidden={state !== \\\"collapsed\\\" || isMobile}\\n        side=\\\"right\\\"\\n        {...tooltip}\\n      />\\n    </Tooltip>\\n  );\\n}\\n\\nexport function SidebarMenuAction({\\n  className,\\n  showOnHover = false,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"button\\\"> & {\\n  showOnHover?: boolean;\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\\\",\\n      // Increases the hit area of the button on mobile.\\n      \\\"after:absolute after:-inset-2 md:after:hidden\\\",\\n      \\\"peer-data-[size=sm]/menu-button:top-1\\\",\\n      \\\"peer-data-[size=default]/menu-button:top-1.5\\\",\\n      \\\"peer-data-[size=lg]/menu-button:top-2.5\\\",\\n      \\\"group-data-[collapsible=icon]:hidden\\\",\\n      showOnHover &&\\n        \\\"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\\\",\\n      className,\\n    ),\\n    \\\"data-sidebar\\\": \\\"menu-action\\\",\\n    \\\"data-slot\\\": \\\"sidebar-menu-action\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"button\\\",\\n    props: mergeProps<\\\"button\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\\nexport function SidebarMenuBadge({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums\\\",\\n        \\\"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\\\",\\n        \\\"peer-data-[size=sm]/menu-button:top-1\\\",\\n        \\\"peer-data-[size=default]/menu-button:top-1.5\\\",\\n        \\\"peer-data-[size=lg]/menu-button:top-2.5\\\",\\n        \\\"group-data-[collapsible=icon]:hidden\\\",\\n        className,\\n      )}\\n      data-sidebar=\\\"menu-badge\\\"\\n      data-slot=\\\"sidebar-menu-badge\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarMenuSkeleton({\\n  className,\\n  showIcon = false,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\"> & {\\n  showIcon?: boolean;\\n}): React.ReactElement {\\n  // Random width between 50 to 90%.\\n  const width = React.useMemo(() => {\\n    return `${Math.floor(Math.random() * 40) + 50}%`;\\n  }, []);\\n\\n  return (\\n    <div\\n      className={cn(\\\"flex h-8 items-center gap-2 rounded-lg px-2\\\", className)}\\n      data-sidebar=\\\"menu-skeleton\\\"\\n      data-slot=\\\"sidebar-menu-skeleton\\\"\\n      {...props}\\n    >\\n      {showIcon && (\\n        <Skeleton\\n          className=\\\"size-4 rounded-lg\\\"\\n          data-sidebar=\\\"menu-skeleton-icon\\\"\\n        />\\n      )}\\n      <Skeleton\\n        className=\\\"h-4 max-w-(--skeleton-width) flex-1\\\"\\n        data-sidebar=\\\"menu-skeleton-text\\\"\\n        style={\\n          {\\n            \\\"--skeleton-width\\\": width,\\n          } as React.CSSProperties\\n        }\\n      />\\n    </div>\\n  );\\n}\\n\\nexport function SidebarMenuSub({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"ul\\\">): React.ReactElement {\\n  return (\\n    <ul\\n      className={cn(\\n        \\\"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\\\",\\n        \\\"group-data-[collapsible=icon]:hidden\\\",\\n        className,\\n      )}\\n      data-sidebar=\\\"menu-sub\\\"\\n      data-slot=\\\"sidebar-menu-sub\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarMenuSubItem({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"li\\\">): React.ReactElement {\\n  return (\\n    <li\\n      className={cn(\\\"group/menu-sub-item relative\\\", className)}\\n      data-sidebar=\\\"menu-sub-item\\\"\\n      data-slot=\\\"sidebar-menu-sub-item\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function SidebarMenuSubButton({\\n  size = \\\"md\\\",\\n  isActive = false,\\n  className,\\n  render,\\n  ...props\\n}: useRender.ComponentProps<\\\"a\\\"> & {\\n  size?: \\\"sm\\\" | \\\"md\\\";\\n  isActive?: boolean;\\n}): React.ReactElement {\\n  const defaultProps = {\\n    className: cn(\\n      \\\"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\\\",\\n      \\\"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\\\",\\n      size === \\\"sm\\\" && \\\"text-xs\\\",\\n      size === \\\"md\\\" && \\\"text-sm\\\",\\n      \\\"group-data-[collapsible=icon]:hidden\\\",\\n      className,\\n    ),\\n    \\\"data-active\\\": isActive,\\n    \\\"data-sidebar\\\": \\\"menu-sub-button\\\",\\n    \\\"data-size\\\": size,\\n    \\\"data-slot\\\": \\\"sidebar-menu-sub-button\\\",\\n  };\\n\\n  return useRender({\\n    defaultTagName: \\\"a\\\",\\n    props: mergeProps<\\\"a\\\">(defaultProps, props),\\n    render,\\n  });\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/skeleton.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"skeleton\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/skeleton.tsx\",\n      \"content\": \"import type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Skeleton({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"div\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className={cn(\\n        \\\"animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0/200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]\\\",\\n        className,\\n      )}\\n      data-slot=\\\"skeleton\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"--animate-skeleton\": \"skeleton 2s -1s infinite linear\"\n    }\n  },\n  \"css\": {\n    \"@keyframes skeleton\": {\n      \"to\": {\n        \"background-position\": \"-200% 0\"\n      }\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/slider.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"slider\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/slider.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Slider as SliderPrimitive } from \\\"@base-ui/react/slider\\\";\\nimport * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Slider({\\n  className,\\n  children,\\n  defaultValue,\\n  value,\\n  min = 0,\\n  max = 100,\\n  ...props\\n}: SliderPrimitive.Root.Props): React.ReactElement {\\n  const _values = React.useMemo(() => {\\n    if (value !== undefined) {\\n      return Array.isArray(value) ? value : [value];\\n    }\\n    if (defaultValue !== undefined) {\\n      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];\\n    }\\n    return [min];\\n  }, [value, defaultValue, min]);\\n\\n  return (\\n    <SliderPrimitive.Root\\n      className={cn(\\\"data-[orientation=horizontal]:w-full\\\", className)}\\n      defaultValue={defaultValue}\\n      max={max}\\n      min={min}\\n      thumbAlignment=\\\"edge\\\"\\n      value={value}\\n      {...props}\\n    >\\n      {children}\\n      <SliderPrimitive.Control\\n        className=\\\"flex touch-none select-none data-disabled:pointer-events-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=vertical]:flex-col data-disabled:opacity-64\\\"\\n        data-slot=\\\"slider-control\\\"\\n      >\\n        <SliderPrimitive.Track\\n          className=\\\"relative grow select-none before:absolute before:rounded-full before:bg-input data-[orientation=horizontal]:h-1 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1 data-[orientation=horizontal]:before:inset-x-0.5 data-[orientation=vertical]:before:inset-x-0 data-[orientation=horizontal]:before:inset-y-0 data-[orientation=vertical]:before:inset-y-0.5\\\"\\n          data-slot=\\\"slider-track\\\"\\n        >\\n          <SliderPrimitive.Indicator\\n            className=\\\"select-none rounded-full bg-primary data-[orientation=horizontal]:ms-0.5 data-[orientation=vertical]:mb-0.5\\\"\\n            data-slot=\\\"slider-indicator\\\"\\n          />\\n          {Array.from({ length: _values.length }, (_, index) => (\\n            <SliderPrimitive.Thumb\\n              className=\\\"block size-5 shrink-0 select-none rounded-full border border-input bg-white not-dark:bg-clip-padding shadow-xs/5 outline-none transition-[box-shadow,scale] before:absolute before:inset-0 before:rounded-full before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-focus-visible:ring-ring/24 data-dragging:scale-120 sm:size-4 dark:border-background dark:has-focus-visible:ring-ring/48 [:has(*:focus-visible),[data-dragging]]:shadow-none\\\"\\n              data-slot=\\\"slider-thumb\\\"\\n              index={index}\\n              key={String(index)}\\n            />\\n          ))}\\n        </SliderPrimitive.Track>\\n      </SliderPrimitive.Control>\\n    </SliderPrimitive.Root>\\n  );\\n}\\n\\nexport function SliderValue({\\n  className,\\n  ...props\\n}: SliderPrimitive.Value.Props): React.ReactElement {\\n  return (\\n    <SliderPrimitive.Value\\n      className={cn(\\\"flex justify-end text-sm\\\", className)}\\n      data-slot=\\\"slider-value\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { SliderPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/spinner.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"spinner\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/spinner.tsx\",\n      \"content\": \"import { Loader2Icon } from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Spinner({\\n  className,\\n  ...props\\n}: React.ComponentProps<typeof Loader2Icon>): React.ReactElement {\\n  return (\\n    <Loader2Icon\\n      aria-label=\\\"Loading\\\"\\n      className={cn(\\\"animate-spin\\\", className)}\\n      role=\\\"status\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/style.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"extends\": \"none\",\n  \"name\": \"style\",\n  \"type\": \"registry:style\",\n  \"description\": \"Complete coss theme: colors, sidebar, fonts, and base styles. Use with `npx shadcn init @coss/style` for full project setup.\",\n  \"dependencies\": [\n    \"@base-ui/react\",\n    \"class-variance-authority\",\n    \"lucide-react\"\n  ],\n  \"devDependencies\": [\n    \"tw-animate-css\"\n  ],\n  \"registryDependencies\": [\n    \"utils\",\n    \"@coss/ui\"\n  ],\n  \"cssVars\": {\n    \"theme\": {\n      \"font-heading\": \"var(--font-heading, ui-sans-serif, system-ui, sans-serif)\",\n      \"font-mono\": \"var(--font-mono, ui-monospace, monospace)\",\n      \"font-sans\": \"var(--font-sans, ui-sans-serif, system-ui, sans-serif)\"\n    },\n    \"light\": {\n      \"accent\": \"--alpha(var(--color-black) / 4%)\",\n      \"accent-foreground\": \"var(--color-neutral-800)\",\n      \"background\": \"var(--color-white)\",\n      \"border\": \"--alpha(var(--color-black) / 8%)\",\n      \"card\": \"var(--color-white)\",\n      \"card-foreground\": \"var(--color-neutral-800)\",\n      \"destructive\": \"var(--color-red-500)\",\n      \"destructive-foreground\": \"var(--color-red-700)\",\n      \"foreground\": \"var(--color-neutral-800)\",\n      \"info\": \"var(--color-blue-500)\",\n      \"info-foreground\": \"var(--color-blue-700)\",\n      \"input\": \"--alpha(var(--color-black) / 10%)\",\n      \"muted\": \"--alpha(var(--color-black) / 4%)\",\n      \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black))\",\n      \"popover\": \"var(--color-white)\",\n      \"popover-foreground\": \"var(--color-neutral-800)\",\n      \"primary\": \"var(--color-neutral-800)\",\n      \"primary-foreground\": \"var(--color-neutral-50)\",\n      \"ring\": \"var(--color-neutral-400)\",\n      \"secondary\": \"--alpha(var(--color-black) / 4%)\",\n      \"secondary-foreground\": \"var(--color-neutral-800)\",\n      \"success\": \"var(--color-emerald-500)\",\n      \"success-foreground\": \"var(--color-emerald-700)\",\n      \"warning\": \"var(--color-amber-500)\",\n      \"warning-foreground\": \"var(--color-amber-700)\",\n      \"chart-1\": \"var(--color-orange-600)\",\n      \"chart-2\": \"var(--color-teal-600)\",\n      \"chart-3\": \"var(--color-cyan-900)\",\n      \"chart-4\": \"var(--color-amber-400)\",\n      \"chart-5\": \"var(--color-amber-500)\",\n      \"code\": \"var(--color-white)\",\n      \"code-foreground\": \"var(--foreground)\",\n      \"code-highlight\": \"--alpha(var(--color-black) / 4%)\",\n      \"radius\": \"0.625rem\",\n      \"sidebar\": \"var(--color-neutral-50)\",\n      \"sidebar-accent\": \"--alpha(var(--color-black) / 4%)\",\n      \"sidebar-accent-foreground\": \"var(--color-neutral-800)\",\n      \"sidebar-border\": \"--alpha(var(--color-black) / 6%)\",\n      \"sidebar-foreground\": \"color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar))\",\n      \"sidebar-primary\": \"var(--color-neutral-800)\",\n      \"sidebar-primary-foreground\": \"var(--color-neutral-50)\",\n      \"sidebar-ring\": \"var(--color-neutral-400)\"\n    },\n    \"dark\": {\n      \"accent\": \"--alpha(var(--color-white) / 4%)\",\n      \"accent-foreground\": \"var(--color-neutral-100)\",\n      \"background\": \"color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white))\",\n      \"border\": \"--alpha(var(--color-white) / 6%)\",\n      \"card\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n      \"card-foreground\": \"var(--color-neutral-100)\",\n      \"destructive\": \"color-mix(in srgb, var(--color-red-500) 90%, var(--color-white))\",\n      \"destructive-foreground\": \"var(--color-red-400)\",\n      \"foreground\": \"var(--color-neutral-100)\",\n      \"info\": \"var(--color-blue-500)\",\n      \"info-foreground\": \"var(--color-blue-400)\",\n      \"input\": \"--alpha(var(--color-white) / 8%)\",\n      \"muted\": \"--alpha(var(--color-white) / 4%)\",\n      \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white))\",\n      \"popover\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n      \"popover-foreground\": \"var(--color-neutral-100)\",\n      \"primary\": \"var(--color-neutral-100)\",\n      \"primary-foreground\": \"var(--color-neutral-800)\",\n      \"ring\": \"var(--color-neutral-500)\",\n      \"secondary\": \"--alpha(var(--color-white) / 4%)\",\n      \"secondary-foreground\": \"var(--color-neutral-100)\",\n      \"success\": \"var(--color-emerald-500)\",\n      \"success-foreground\": \"var(--color-emerald-400)\",\n      \"warning\": \"var(--color-amber-500)\",\n      \"warning-foreground\": \"var(--color-amber-400)\",\n      \"chart-1\": \"var(--color-blue-700)\",\n      \"chart-2\": \"var(--color-emerald-500)\",\n      \"chart-3\": \"var(--color-amber-500)\",\n      \"chart-4\": \"var(--color-purple-500)\",\n      \"chart-5\": \"var(--color-rose-500)\",\n      \"code\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n      \"code-foreground\": \"var(--foreground)\",\n      \"code-highlight\": \"--alpha(var(--color-white) / 4%)\",\n      \"sidebar\": \"color-mix(in srgb, var(--color-neutral-950) 97%, var(--color-white))\",\n      \"sidebar-accent\": \"--alpha(var(--color-white) / 4%)\",\n      \"sidebar-accent-foreground\": \"var(--color-neutral-100)\",\n      \"sidebar-border\": \"--alpha(var(--color-white) / 5%)\",\n      \"sidebar-foreground\": \"color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar))\",\n      \"sidebar-primary\": \"var(--color-neutral-100)\",\n      \"sidebar-primary-foreground\": \"var(--color-neutral-800)\",\n      \"sidebar-ring\": \"var(--color-neutral-400)\"\n    }\n  },\n  \"css\": {\n    \"@layer base\": {\n      \"*\": {\n        \"@apply border-border outline-ring/50\": {}\n      },\n      \"body\": {\n        \"@apply bg-background text-foreground\": {}\n      },\n      \"code, kbd, samp, pre\": {\n        \"font-family\": \"var(--font-mono)\"\n      }\n    }\n  }\n}"
  },
  {
    "path": "apps/ui/public/r/switch.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"switch\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/switch.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Switch as SwitchPrimitive } from \\\"@base-ui/react/switch\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Switch({\\n  className,\\n  ...props\\n}: SwitchPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <SwitchPrimitive.Root\\n      className={cn(\\n        \\\"inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(5)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(4)]\\\",\\n        className,\\n      )}\\n      data-slot=\\\"switch\\\"\\n      {...props}\\n    >\\n      <SwitchPrimitive.Thumb\\n        className={cn(\\n          \\\"pointer-events-none block aspect-square h-full origin-left in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]\\\",\\n        )}\\n        data-slot=\\\"switch-thumb\\\"\\n      />\\n    </SwitchPrimitive.Root>\\n  );\\n}\\n\\nexport { SwitchPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/table.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"table\",\n  \"type\": \"registry:ui\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/table.tsx\",\n      \"content\": \"import type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Table({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"table\\\">): React.ReactElement {\\n  return (\\n    <div\\n      className=\\\"relative w-full overflow-x-auto\\\"\\n      data-slot=\\\"table-container\\\"\\n    >\\n      <table\\n        className={cn(\\n          \\\"w-full caption-bottom in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0 text-sm\\\",\\n          className,\\n        )}\\n        data-slot=\\\"table\\\"\\n        {...props}\\n      />\\n    </div>\\n  );\\n}\\n\\nexport function TableHeader({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"thead\\\">): React.ReactElement {\\n  return (\\n    <thead\\n      className={cn(\\n        \\\"[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-header\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function TableBody({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"tbody\\\">): React.ReactElement {\\n  return (\\n    <tbody\\n      className={cn(\\n        \\\"relative in-data-[slot=frame]:rounded-xl in-data-[slot=frame]:shadow-xs/5 before:pointer-events-none before:absolute before:inset-px not-in-data-[slot=frame]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[slot=frame]:*:[tr]:border-0 in-data-[slot=frame]:*:[tr]:*:[td]:border-b in-data-[slot=frame]:*:[tr]:*:[td]:bg-background in-data-[slot=frame]:*:[tr]:*:[td]:bg-clip-padding in-data-[slot=frame]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[slot=frame]:*:[tr]:*:[td]:first:border-s in-data-[slot=frame]:*:[tr]:first:*:[td]:border-t in-data-[slot=frame]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[slot=frame]:*:[tr]:*:[td]:last:border-e in-data-[slot=frame]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[slot=frame]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[slot=frame]:*:[tr]:hover:*:[td]:bg-transparent in-data-[slot=frame]:*:[tr]:data-[state=selected]:*:[td]:bg-muted/72\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-body\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function TableFooter({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"tfoot\\\">): React.ReactElement {\\n  return (\\n    <tfoot\\n      className={cn(\\n        \\\"border-t in-data-[slot=frame]:border-none bg-muted/72 in-data-[slot=frame]:bg-transparent font-medium [&>tr]:last:border-b-0 in-data-[slot=frame]:*:[tr]:hover:bg-transparent\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-footer\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function TableRow({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"tr\\\">): React.ReactElement {\\n  return (\\n    <tr\\n      className={cn(\\n        \\\"border-b transition-colors hover:bg-muted/72 in-data-[slot=frame]:hover:bg-transparent data-[state=selected]:bg-muted/72 in-data-[slot=frame]:data-[state=selected]:bg-transparent\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-row\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function TableHead({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"th\\\">): React.ReactElement {\\n  return (\\n    <th\\n      className={cn(\\n        \\\"h-10 whitespace-nowrap px-2.5 text-left align-middle font-medium text-muted-foreground leading-none has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-head\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function TableCell({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"td\\\">): React.ReactElement {\\n  return (\\n    <td\\n      className={cn(\\n        \\\"whitespace-nowrap p-2.5 align-middle leading-none in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:pe-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-cell\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function TableCaption({\\n  className,\\n  ...props\\n}: React.ComponentProps<\\\"caption\\\">): React.ReactElement {\\n  return (\\n    <caption\\n      className={cn(\\n        \\\"in-data-[slot=frame]:my-4 mt-4 text-muted-foreground text-sm\\\",\\n        className,\\n      )}\\n      data-slot=\\\"table-caption\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/tabs.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tabs\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/tabs.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Tabs as TabsPrimitive } from \\\"@base-ui/react/tabs\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport type TabsVariant = \\\"default\\\" | \\\"underline\\\";\\n\\nexport function Tabs({\\n  className,\\n  ...props\\n}: TabsPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <TabsPrimitive.Root\\n      className={cn(\\n        \\\"flex flex-col gap-2 data-[orientation=vertical]:flex-row\\\",\\n        className,\\n      )}\\n      data-slot=\\\"tabs\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function TabsList({\\n  variant = \\\"default\\\",\\n  className,\\n  children,\\n  ...props\\n}: TabsPrimitive.List.Props & {\\n  variant?: TabsVariant;\\n}): React.ReactElement {\\n  return (\\n    <TabsPrimitive.List\\n      className={cn(\\n        \\\"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\\\",\\n        \\\"data-[orientation=vertical]:flex-col\\\",\\n        variant === \\\"default\\\"\\n          ? \\\"rounded-lg bg-muted p-0.5 text-muted-foreground/72\\\"\\n          : \\\"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\\\",\\n        className,\\n      )}\\n      data-slot=\\\"tabs-list\\\"\\n      {...props}\\n    >\\n      {children}\\n      <TabsPrimitive.Indicator\\n        className={cn(\\n          \\\"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\\\",\\n          variant === \\\"underline\\\"\\n            ? \\\"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\\\"\\n            : \\\"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\\\",\\n        )}\\n        data-slot=\\\"tab-indicator\\\"\\n      />\\n    </TabsPrimitive.List>\\n  );\\n}\\n\\nexport function TabsTab({\\n  className,\\n  ...props\\n}: TabsPrimitive.Tab.Props): React.ReactElement {\\n  return (\\n    <TabsPrimitive.Tab\\n      className={cn(\\n        \\\"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\\\",\\n        className,\\n      )}\\n      data-slot=\\\"tabs-tab\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function TabsPanel({\\n  className,\\n  ...props\\n}: TabsPrimitive.Panel.Props): React.ReactElement {\\n  return (\\n    <TabsPrimitive.Panel\\n      className={cn(\\\"flex-1 outline-none\\\", className)}\\n      data-slot=\\\"tabs-content\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/textarea.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"textarea\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/textarea.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Field as FieldPrimitive } from \\\"@base-ui/react/field\\\";\\nimport { mergeProps } from \\\"@base-ui/react/merge-props\\\";\\nimport type * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport type TextareaProps = React.ComponentPropsWithoutRef<\\\"textarea\\\"> &\\n  React.RefAttributes<HTMLElement> & {\\n    size?: \\\"sm\\\" | \\\"default\\\" | \\\"lg\\\" | number;\\n    unstyled?: boolean;\\n  };\\n\\nexport function Textarea({\\n  className,\\n  size = \\\"default\\\",\\n  unstyled = false,\\n  ref,\\n  ...props\\n}: TextareaProps): React.ReactElement {\\n  return (\\n    <span\\n      className={\\n        cn(\\n          !unstyled &&\\n            \\\"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n          className,\\n        ) || undefined\\n      }\\n      data-size={size}\\n      data-slot=\\\"textarea-control\\\"\\n    >\\n      <FieldPrimitive.Control\\n        ref={ref}\\n        value={props.value}\\n        defaultValue={props.defaultValue}\\n        disabled={props.disabled}\\n        id={props.id}\\n        name={props.name}\\n        render={(defaultProps: React.ComponentProps<\\\"textarea\\\">) => (\\n          <textarea\\n            className={cn(\\n              \\\"field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5\\\",\\n              size === \\\"sm\\\" &&\\n                \\\"min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5\\\",\\n              size === \\\"lg\\\" &&\\n                \\\"min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5\\\",\\n            )}\\n            data-slot=\\\"textarea\\\"\\n            {...mergeProps(defaultProps, props)}\\n          />\\n        )}\\n      />\\n    </span>\\n  );\\n}\\n\\nexport { FieldPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/toast.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toast\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/button\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/toast.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Toast } from \\\"@base-ui/react/toast\\\";\\nimport {\\n  CircleAlertIcon,\\n  CircleCheckIcon,\\n  InfoIcon,\\n  LoaderCircleIcon,\\n  TriangleAlertIcon,\\n} from \\\"lucide-react\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { buttonVariants } from \\\"@/registry/default/ui/button\\\";\\n\\nconst TOAST_ICONS = {\\n  error: CircleAlertIcon,\\n  info: InfoIcon,\\n  loading: LoaderCircleIcon,\\n  success: CircleCheckIcon,\\n  warning: TriangleAlertIcon,\\n} as const;\\n\\ntype SwipeDirection = \\\"up\\\" | \\\"down\\\" | \\\"left\\\" | \\\"right\\\";\\n\\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\\n  const verticalDirection: SwipeDirection = position.startsWith(\\\"top\\\")\\n    ? \\\"up\\\"\\n    : \\\"down\\\";\\n\\n  if (position.includes(\\\"center\\\")) {\\n    return [verticalDirection];\\n  }\\n\\n  if (position.includes(\\\"left\\\")) {\\n    return [\\\"left\\\", verticalDirection];\\n  }\\n\\n  return [\\\"right\\\", verticalDirection];\\n}\\n\\nfunction Toasts({ position }: { position: ToastPosition }): React.ReactElement {\\n  const { toasts } = Toast.useToastManager();\\n  const swipeDirection = getSwipeDirection(position);\\n\\n  return (\\n    <Toast.Portal data-slot=\\\"toast-portal\\\">\\n      <Toast.Viewport\\n        className={cn(\\n          \\\"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\\\",\\n          // Vertical positioning\\n          \\\"data-[position*=top]:top-(--toast-inset)\\\",\\n          \\\"data-[position*=bottom]:bottom-(--toast-inset)\\\",\\n          // Horizontal positioning\\n          \\\"data-[position*=left]:left-(--toast-inset)\\\",\\n          \\\"data-[position*=right]:right-(--toast-inset)\\\",\\n          \\\"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\\\",\\n        )}\\n        data-position={position}\\n        data-slot=\\\"toast-viewport\\\"\\n      >\\n        {toasts.map((toast) => {\\n          const Icon = toast.type\\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\\n            : null;\\n\\n          return (\\n            <Toast.Root\\n              className={cn(\\n                \\\"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n                // Base positioning using data-position\\n                \\\"data-[position*=right]:right-0 data-[position*=right]:left-auto\\\",\\n                \\\"data-[position*=left]:right-auto data-[position*=left]:left-0\\\",\\n                \\\"data-[position*=center]:right-0 data-[position*=center]:left-0\\\",\\n                \\\"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top\\\",\\n                \\\"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom\\\",\\n                // Gap fill for hover\\n                \\\"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\\\",\\n                \\\"data-[position*=top]:after:top-full\\\",\\n                \\\"data-[position*=bottom]:after:bottom-full\\\",\\n                // Define some variables\\n                \\\"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\\\",\\n                // Define offset-y variable\\n                \\\"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\\\",\\n                \\\"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\\\",\\n                // Default state transform\\n                \\\"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\\\",\\n                \\\"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\\\",\\n                // Limited state\\n                \\\"data-limited:opacity-0\\\",\\n                // Expanded state\\n                \\\"data-expanded:h-(--toast-height)\\\",\\n                \\\"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\\\",\\n                // Starting and ending animations\\n                \\\"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\\\",\\n                \\\"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\\\",\\n                \\\"data-ending-style:opacity-0\\\",\\n                // Ending animations (direction-aware)\\n                \\\"data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\\\",\\n                \\\"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\\\",\\n                \\\"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\\\",\\n                \\\"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\\\",\\n                \\\"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\\\",\\n                // Ending animations (expanded)\\n                \\\"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\\\",\\n                \\\"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\\\",\\n                \\\"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\\\",\\n                \\\"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\\\",\\n              )}\\n              data-position={position}\\n              key={toast.id}\\n              swipeDirection={swipeDirection}\\n              toast={toast}\\n            >\\n              <Toast.Content className=\\\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\\\">\\n                <div className=\\\"flex gap-2\\\">\\n                  {Icon && (\\n                    <div\\n                      className=\\\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\"\\n                      data-slot=\\\"toast-icon\\\"\\n                    >\\n                      <Icon className=\\\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\\\" />\\n                    </div>\\n                  )}\\n\\n                  <div className=\\\"flex flex-col gap-0.5\\\">\\n                    <Toast.Title\\n                      className=\\\"font-medium\\\"\\n                      data-slot=\\\"toast-title\\\"\\n                    />\\n                    <Toast.Description\\n                      className=\\\"text-muted-foreground\\\"\\n                      data-slot=\\\"toast-description\\\"\\n                    />\\n                  </div>\\n                </div>\\n                {toast.actionProps && (\\n                  <Toast.Action\\n                    className={buttonVariants({ size: \\\"xs\\\" })}\\n                    data-slot=\\\"toast-action\\\"\\n                  >\\n                    {toast.actionProps.children}\\n                  </Toast.Action>\\n                )}\\n              </Toast.Content>\\n            </Toast.Root>\\n          );\\n        })}\\n      </Toast.Viewport>\\n    </Toast.Portal>\\n  );\\n}\\n\\nfunction AnchoredToasts(): React.ReactElement {\\n  const { toasts } = Toast.useToastManager();\\n\\n  return (\\n    <Toast.Portal data-slot=\\\"toast-portal-anchored\\\">\\n      <Toast.Viewport\\n        className=\\\"outline-none\\\"\\n        data-slot=\\\"toast-viewport-anchored\\\"\\n      >\\n        {toasts.map((toast) => {\\n          const Icon = toast.type\\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\\n            : null;\\n          const tooltipStyle =\\n            (toast.data as { tooltipStyle?: boolean })?.tooltipStyle ?? false;\\n          const positionerProps = toast.positionerProps;\\n\\n          if (!positionerProps?.anchor) {\\n            return null;\\n          }\\n\\n          return (\\n            <Toast.Positioner\\n              className=\\\"z-50 max-w-[min(--spacing(64),var(--available-width))]\\\"\\n              data-slot=\\\"toast-positioner\\\"\\n              key={toast.id}\\n              sideOffset={positionerProps.sideOffset ?? 4}\\n              toast={toast}\\n            >\\n              <Toast.Root\\n                className={cn(\\n                  \\\"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n                  tooltipStyle\\n                    ? \\\"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\\\"\\n                    : \\\"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\\\",\\n                )}\\n                data-slot=\\\"toast-popup\\\"\\n                toast={toast}\\n              >\\n                {tooltipStyle ? (\\n                  <Toast.Content className=\\\"pointer-events-auto px-2 py-1\\\">\\n                    <Toast.Title data-slot=\\\"toast-title\\\" />\\n                  </Toast.Content>\\n                ) : (\\n                  <Toast.Content className=\\\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\\\">\\n                    <div className=\\\"flex gap-2\\\">\\n                      {Icon && (\\n                        <div\\n                          className=\\\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\\\"\\n                          data-slot=\\\"toast-icon\\\"\\n                        >\\n                          <Icon className=\\\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\\\" />\\n                        </div>\\n                      )}\\n\\n                      <div className=\\\"flex flex-col gap-0.5\\\">\\n                        <Toast.Title\\n                          className=\\\"font-medium\\\"\\n                          data-slot=\\\"toast-title\\\"\\n                        />\\n                        <Toast.Description\\n                          className=\\\"text-muted-foreground\\\"\\n                          data-slot=\\\"toast-description\\\"\\n                        />\\n                      </div>\\n                    </div>\\n                    {toast.actionProps && (\\n                      <Toast.Action\\n                        className={buttonVariants({ size: \\\"xs\\\" })}\\n                        data-slot=\\\"toast-action\\\"\\n                      >\\n                        {toast.actionProps.children}\\n                      </Toast.Action>\\n                    )}\\n                  </Toast.Content>\\n                )}\\n              </Toast.Root>\\n            </Toast.Positioner>\\n          );\\n        })}\\n      </Toast.Viewport>\\n    </Toast.Portal>\\n  );\\n}\\n\\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\\n  Toast.createToastManager();\\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\\n  Toast.createToastManager();\\n\\nexport type ToastPosition =\\n  | \\\"top-left\\\"\\n  | \\\"top-center\\\"\\n  | \\\"top-right\\\"\\n  | \\\"bottom-left\\\"\\n  | \\\"bottom-center\\\"\\n  | \\\"bottom-right\\\";\\n\\nexport interface ToastProviderProps extends Toast.Provider.Props {\\n  position?: ToastPosition;\\n}\\n\\nexport function ToastProvider({\\n  children,\\n  position = \\\"bottom-right\\\",\\n  ...props\\n}: ToastProviderProps): React.ReactElement {\\n  return (\\n    <Toast.Provider toastManager={toastManager} {...props}>\\n      {children}\\n      <Toasts position={position} />\\n    </Toast.Provider>\\n  );\\n}\\n\\nexport function AnchoredToastProvider({\\n  children,\\n  ...props\\n}: Toast.Provider.Props): React.ReactElement {\\n  return (\\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\\n      {children}\\n      <AnchoredToasts />\\n    </Toast.Provider>\\n  );\\n}\\n\\nexport { Toast as ToastPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/toggle-group.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle-group\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"registryDependencies\": [\n    \"@coss/separator\",\n    \"@coss/toggle\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/toggle-group.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport type { Toggle as TogglePrimitive } from \\\"@base-ui/react/toggle\\\";\\nimport { ToggleGroup as ToggleGroupPrimitive } from \\\"@base-ui/react/toggle-group\\\";\\nimport type { VariantProps } from \\\"class-variance-authority\\\";\\nimport * as React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\nimport { Separator } from \\\"@/registry/default/ui/separator\\\";\\nimport {\\n  Toggle as ToggleComponent,\\n  type toggleVariants,\\n} from \\\"@/registry/default/ui/toggle\\\";\\n\\nexport const ToggleGroupContext: React.Context<\\n  VariantProps<typeof toggleVariants>\\n> = React.createContext<VariantProps<typeof toggleVariants>>({\\n  size: \\\"default\\\",\\n  variant: \\\"default\\\",\\n});\\n\\nexport function ToggleGroup({\\n  className,\\n  variant = \\\"default\\\",\\n  size = \\\"default\\\",\\n  orientation = \\\"horizontal\\\",\\n  children,\\n  ...props\\n}: ToggleGroupPrimitive.Props &\\n  VariantProps<typeof toggleVariants>): React.ReactElement {\\n  return (\\n    <ToggleGroupPrimitive\\n      className={cn(\\n        \\\"flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input\\\",\\n        orientation === \\\"horizontal\\\"\\n          ? \\\"*:pointer-coarse:after:min-w-auto\\\"\\n          : \\\"*:pointer-coarse:after:min-h-auto\\\",\\n        variant === \\\"default\\\"\\n          ? \\\"gap-0.5\\\"\\n          : orientation === \\\"horizontal\\\"\\n            ? \\\"*:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none\\\"\\n            : \\\"flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block\\\",\\n        className,\\n      )}\\n      data-size={size}\\n      data-slot=\\\"toggle-group\\\"\\n      data-variant={variant}\\n      orientation={orientation}\\n      {...props}\\n    >\\n      <ToggleGroupContext.Provider value={{ size, variant }}>\\n        {children}\\n      </ToggleGroupContext.Provider>\\n    </ToggleGroupPrimitive>\\n  );\\n}\\n\\nexport function Toggle({\\n  className,\\n  children,\\n  variant,\\n  size,\\n  ...props\\n}: TogglePrimitive.Props &\\n  VariantProps<typeof toggleVariants>): React.ReactElement {\\n  const context = React.useContext(ToggleGroupContext);\\n\\n  const resolvedVariant = context.variant || variant;\\n  const resolvedSize = context.size || size;\\n\\n  return (\\n    <ToggleComponent\\n      className={className}\\n      data-size={resolvedSize}\\n      data-variant={resolvedVariant}\\n      size={resolvedSize}\\n      variant={resolvedVariant}\\n      {...props}\\n    >\\n      {children}\\n    </ToggleComponent>\\n  );\\n}\\n\\nexport function ToggleGroupSeparator({\\n  className,\\n  orientation = \\\"vertical\\\",\\n  ...props\\n}: {\\n  className?: string;\\n} & React.ComponentProps<typeof Separator>): React.ReactElement {\\n  return (\\n    <Separator\\n      className={cn(\\n        \\\"pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32\\\",\\n        className,\\n      )}\\n      orientation={orientation}\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { ToggleGroupPrimitive, Toggle as ToggleGroupItem };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/toggle.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toggle\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/toggle.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Toggle as TogglePrimitive } from \\\"@base-ui/react/toggle\\\";\\nimport { cva, type VariantProps } from \\\"class-variance-authority\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport const toggleVariants = cva(\\n  \\\"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\\\",\\n  {\\n    defaultVariants: {\\n      size: \\\"default\\\",\\n      variant: \\\"default\\\",\\n    },\\n    variants: {\\n      size: {\\n        default: \\\"h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8\\\",\\n        lg: \\\"h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9\\\",\\n        sm: \\\"h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7\\\",\\n      },\\n      variant: {\\n        default: \\\"border-transparent\\\",\\n        outline:\\n          \\\"border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none\\\",\\n      },\\n    },\\n  },\\n);\\n\\nexport function Toggle({\\n  className,\\n  variant,\\n  size,\\n  ...props\\n}: TogglePrimitive.Props &\\n  VariantProps<typeof toggleVariants>): React.ReactElement {\\n  return (\\n    <TogglePrimitive\\n      className={cn(toggleVariants({ className, size, variant }))}\\n      data-slot=\\\"toggle\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { TogglePrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/toolbar.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"toolbar\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/toolbar.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Toolbar as ToolbarPrimitive } from \\\"@base-ui/react/toolbar\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport function Toolbar({\\n  className,\\n  ...props\\n}: ToolbarPrimitive.Root.Props): React.ReactElement {\\n  return (\\n    <ToolbarPrimitive.Root\\n      className={cn(\\n        \\\"relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-1 text-card-foreground\\\",\\n        className,\\n      )}\\n      data-slot=\\\"toolbar\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ToolbarButton({\\n  className,\\n  ...props\\n}: ToolbarPrimitive.Button.Props): React.ReactElement {\\n  return (\\n    <ToolbarPrimitive.Button\\n      className={cn(className)}\\n      data-slot=\\\"toolbar-button\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ToolbarLink({\\n  className,\\n  ...props\\n}: ToolbarPrimitive.Link.Props): React.ReactElement {\\n  return (\\n    <ToolbarPrimitive.Link\\n      className={cn(className)}\\n      data-slot=\\\"toolbar-link\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ToolbarInput({\\n  className,\\n  ...props\\n}: ToolbarPrimitive.Input.Props): React.ReactElement {\\n  return (\\n    <ToolbarPrimitive.Input\\n      className={cn(className)}\\n      data-slot=\\\"toolbar-input\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ToolbarGroup({\\n  className,\\n  ...props\\n}: ToolbarPrimitive.Group.Props): React.ReactElement {\\n  return (\\n    <ToolbarPrimitive.Group\\n      className={cn(\\\"flex items-center gap-1\\\", className)}\\n      data-slot=\\\"toolbar-group\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport function ToolbarSeparator({\\n  className,\\n  ...props\\n}: ToolbarPrimitive.Separator.Props): React.ReactElement {\\n  return (\\n    <ToolbarPrimitive.Separator\\n      className={cn(\\n        \\\"shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch\\\",\\n        className,\\n      )}\\n      data-slot=\\\"toolbar-separator\\\"\\n      {...props}\\n    />\\n  );\\n}\\n\\nexport { ToolbarPrimitive };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/tooltip.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"tooltip\",\n  \"type\": \"registry:ui\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/ui/tooltip.tsx\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { Tooltip as TooltipPrimitive } from \\\"@base-ui/react/tooltip\\\";\\nimport type React from \\\"react\\\";\\nimport { cn } from \\\"@/registry/default/lib/utils\\\";\\n\\nexport const TooltipCreateHandle: typeof TooltipPrimitive.createHandle =\\n  TooltipPrimitive.createHandle;\\n\\nexport const TooltipProvider: typeof TooltipPrimitive.Provider =\\n  TooltipPrimitive.Provider;\\n\\nexport const Tooltip: typeof TooltipPrimitive.Root = TooltipPrimitive.Root;\\n\\nexport function TooltipTrigger(\\n  props: TooltipPrimitive.Trigger.Props,\\n): React.ReactElement {\\n  return <TooltipPrimitive.Trigger data-slot=\\\"tooltip-trigger\\\" {...props} />;\\n}\\n\\nexport function TooltipPopup({\\n  className,\\n  align = \\\"center\\\",\\n  sideOffset = 4,\\n  side = \\\"top\\\",\\n  anchor,\\n  children,\\n  ...props\\n}: TooltipPrimitive.Popup.Props & {\\n  align?: TooltipPrimitive.Positioner.Props[\\\"align\\\"];\\n  side?: TooltipPrimitive.Positioner.Props[\\\"side\\\"];\\n  sideOffset?: TooltipPrimitive.Positioner.Props[\\\"sideOffset\\\"];\\n  anchor?: TooltipPrimitive.Positioner.Props[\\\"anchor\\\"];\\n}): React.ReactElement {\\n  return (\\n    <TooltipPrimitive.Portal>\\n      <TooltipPrimitive.Positioner\\n        align={align}\\n        anchor={anchor}\\n        className=\\\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none\\\"\\n        data-slot=\\\"tooltip-positioner\\\"\\n        side={side}\\n        sideOffset={sideOffset}\\n      >\\n        <TooltipPrimitive.Popup\\n          className={cn(\\n            \\\"relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\\\",\\n            className,\\n          )}\\n          data-slot=\\\"tooltip-popup\\\"\\n          {...props}\\n        >\\n          <TooltipPrimitive.Viewport\\n            className=\\\"relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity\\\"\\n            data-slot=\\\"tooltip-viewport\\\"\\n          >\\n            {children}\\n          </TooltipPrimitive.Viewport>\\n        </TooltipPrimitive.Popup>\\n      </TooltipPrimitive.Positioner>\\n    </TooltipPrimitive.Portal>\\n  );\\n}\\n\\nexport { TooltipPrimitive, TooltipPopup as TooltipContent };\\n\",\n      \"type\": \"registry:ui\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/ui.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"ui\",\n  \"type\": \"registry:ui\",\n  \"registryDependencies\": [\n    \"@coss/accordion\",\n    \"@coss/alert\",\n    \"@coss/alert-dialog\",\n    \"@coss/autocomplete\",\n    \"@coss/avatar\",\n    \"@coss/badge\",\n    \"@coss/breadcrumb\",\n    \"@coss/button\",\n    \"@coss/calendar\",\n    \"@coss/card\",\n    \"@coss/checkbox\",\n    \"@coss/checkbox-group\",\n    \"@coss/collapsible\",\n    \"@coss/combobox\",\n    \"@coss/command\",\n    \"@coss/dialog\",\n    \"@coss/drawer\",\n    \"@coss/empty\",\n    \"@coss/field\",\n    \"@coss/fieldset\",\n    \"@coss/form\",\n    \"@coss/frame\",\n    \"@coss/group\",\n    \"@coss/input\",\n    \"@coss/input-otp\",\n    \"@coss/input-group\",\n    \"@coss/kbd\",\n    \"@coss/label\",\n    \"@coss/menu\",\n    \"@coss/meter\",\n    \"@coss/number-field\",\n    \"@coss/pagination\",\n    \"@coss/popover\",\n    \"@coss/preview-card\",\n    \"@coss/progress\",\n    \"@coss/radio-group\",\n    \"@coss/scroll-area\",\n    \"@coss/select\",\n    \"@coss/separator\",\n    \"@coss/sheet\",\n    \"@coss/sidebar\",\n    \"@coss/skeleton\",\n    \"@coss/slider\",\n    \"@coss/spinner\",\n    \"@coss/switch\",\n    \"@coss/table\",\n    \"@coss/tabs\",\n    \"@coss/textarea\",\n    \"@coss/toast\",\n    \"@coss/toggle\",\n    \"@coss/toggle-group\",\n    \"@coss/toolbar\",\n    \"@coss/tooltip\"\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/use-copy-to-clipboard.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"use-copy-to-clipboard\",\n  \"type\": \"registry:hook\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/hooks/use-copy-to-clipboard.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport * as React from \\\"react\\\";\\n\\nexport function useCopyToClipboard({\\n  timeout = 2000,\\n  onCopy,\\n}: {\\n  timeout?: number;\\n  onCopy?: () => void;\\n} = {}): { copyToClipboard: (value: string) => void; isCopied: boolean } {\\n  const [isCopied, setIsCopied] = React.useState(false);\\n  const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null);\\n\\n  const copyToClipboard = (value: string): void => {\\n    if (typeof window === \\\"undefined\\\" || !navigator.clipboard.writeText) {\\n      return;\\n    }\\n\\n    if (!value) return;\\n\\n    navigator.clipboard.writeText(value).then(() => {\\n      if (timeoutIdRef.current) {\\n        clearTimeout(timeoutIdRef.current);\\n      }\\n      setIsCopied(true);\\n\\n      if (onCopy) {\\n        onCopy();\\n      }\\n\\n      if (timeout !== 0) {\\n        timeoutIdRef.current = setTimeout(() => {\\n          setIsCopied(false);\\n          timeoutIdRef.current = null;\\n        }, timeout);\\n      }\\n    }, console.error);\\n  };\\n\\n  // Cleanup timeout on unmount\\n  React.useEffect(() => {\\n    return (): void => {\\n      if (timeoutIdRef.current) {\\n        clearTimeout(timeoutIdRef.current);\\n      }\\n    };\\n  }, []);\\n\\n  return { copyToClipboard, isCopied };\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/use-media-query.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"use-media-query\",\n  \"type\": \"registry:hook\",\n  \"files\": [\n    {\n      \"path\": \"registry/default/hooks/use-media-query.ts\",\n      \"content\": \"\\\"use client\\\";\\n\\nimport { useCallback, useSyncExternalStore } from \\\"react\\\";\\n\\nconst BREAKPOINTS = {\\n  \\\"2xl\\\": 1536,\\n  \\\"3xl\\\": 1600,\\n  \\\"4xl\\\": 2000,\\n  lg: 1024,\\n  md: 800,\\n  sm: 640,\\n  xl: 1280,\\n} as const;\\n\\ntype Breakpoint = keyof typeof BREAKPOINTS;\\n\\ntype BreakpointQuery =\\n  | Breakpoint\\n  | `max-${Breakpoint}`\\n  | `${Breakpoint}:max-${Breakpoint}`;\\n\\nfunction resolveMin(value: Breakpoint | number): string {\\n  const px = typeof value === \\\"number\\\" ? value : BREAKPOINTS[value];\\n  return `(min-width: ${px}px)`;\\n}\\n\\nfunction resolveMax(value: Breakpoint | number): string {\\n  const px = typeof value === \\\"number\\\" ? value : BREAKPOINTS[value];\\n  return `(max-width: ${px - 1}px)`;\\n}\\n\\nfunction parseQuery(\\n  query: BreakpointQuery | MediaQueryInput | (string & {}),\\n): string {\\n  if (typeof query !== \\\"string\\\") {\\n    const parts: string[] = [];\\n    if (query.min != null) parts.push(resolveMin(query.min));\\n    if (query.max != null) parts.push(resolveMax(query.max));\\n    if (query.pointer === \\\"coarse\\\") parts.push(\\\"(pointer: coarse)\\\");\\n    if (query.pointer === \\\"fine\\\") parts.push(\\\"(pointer: fine)\\\");\\n    if (parts.length === 0) return \\\"(min-width: 0px)\\\";\\n    return parts.join(\\\" and \\\");\\n  }\\n\\n  if (query.startsWith(\\\"(\\\")) return query;\\n\\n  const parts: string[] = [];\\n  for (const segment of query.split(\\\":\\\")) {\\n    if (segment.startsWith(\\\"max-\\\")) {\\n      const bp = segment.slice(4);\\n      if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint));\\n    } else if (segment in BREAKPOINTS) {\\n      parts.push(resolveMin(segment as Breakpoint));\\n    }\\n  }\\n\\n  return parts.length > 0 ? parts.join(\\\" and \\\") : query;\\n}\\n\\nfunction getServerSnapshot(): boolean {\\n  return false;\\n}\\n\\nexport type MediaQueryInput = {\\n  min?: Breakpoint | number;\\n  max?: Breakpoint | number;\\n  /** Touch-like input (finger). Use \\\"fine\\\" for mouse/trackpad. */\\n  pointer?: \\\"coarse\\\" | \\\"fine\\\";\\n};\\n\\nexport function useMediaQuery(\\n  query: BreakpointQuery | MediaQueryInput | (string & {}),\\n): boolean {\\n  const mediaQuery = parseQuery(query);\\n\\n  const subscribe = useCallback(\\n    (callback: () => void) => {\\n      if (typeof window === \\\"undefined\\\") return () => {};\\n      const mql = window.matchMedia(mediaQuery);\\n      mql.addEventListener(\\\"change\\\", callback);\\n      return () => mql.removeEventListener(\\\"change\\\", callback);\\n    },\\n    [mediaQuery],\\n  );\\n\\n  const getSnapshot = useCallback(() => {\\n    if (typeof window === \\\"undefined\\\") return false;\\n    return window.matchMedia(mediaQuery).matches;\\n  }, [mediaQuery]);\\n\\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\\n}\\n\\nexport function useIsMobile(): boolean {\\n  return useMediaQuery(\\\"max-md\\\");\\n}\\n\",\n      \"type\": \"registry:hook\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/use-render.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"use-render\",\n  \"type\": \"registry:lib\",\n  \"dependencies\": [\n    \"@base-ui/react\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/base-ui/use-render.ts\",\n      \"content\": \"export { useRender } from \\\"@base-ui/react/use-render\\\";\\n\",\n      \"type\": \"registry:lib\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/public/r/utils.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n  \"name\": \"utils\",\n  \"type\": \"registry:lib\",\n  \"dependencies\": [\n    \"clsx\",\n    \"tailwind-merge\"\n  ],\n  \"files\": [\n    {\n      \"path\": \"registry/default/lib/utils.ts\",\n      \"content\": \"import { type ClassValue, clsx } from \\\"clsx\\\";\\nimport { twMerge } from \\\"tailwind-merge\\\";\\n\\nexport function cn(...inputs: ClassValue[]): string {\\n  return twMerge(clsx(inputs));\\n}\\n\",\n      \"type\": \"registry:lib\"\n    }\n  ]\n}"
  },
  {
    "path": "apps/ui/registry/__index__.tsx",
    "content": "/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// @ts-nocheck\n// This file is autogenerated by scripts/build-registry.ts\n// Do not edit this file directly.\nimport * as React from \"react\"\n\n// biome-ignore lint/suspicious/noExplicitAny: Auto-generated registry index with dynamic component types\nexport const Index: Record<string, any> = {\n  \"accordion\": {\n    name: \"accordion\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/accordion.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/accordion.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"alert\": {\n    name: \"alert\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/alert.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/alert.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"alert-dialog\": {\n    name: \"alert-dialog\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/alert-dialog.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/alert-dialog.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"autocomplete\": {\n    name: \"autocomplete\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/input\",\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/ui/autocomplete.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/autocomplete.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"avatar\": {\n    name: \"avatar\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/avatar.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/avatar.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"badge\": {\n    name: \"badge\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/badge.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/badge.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"breadcrumb\": {\n    name: \"breadcrumb\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/breadcrumb.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/breadcrumb.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"button\": {\n    name: \"button\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/spinner\"],\n    files: [{\n      path: \"registry/default/ui/button.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/button.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"calendar\": {\n    name: \"calendar\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [],\n    files: [{\n      path: \"registry/default/ui/calendar.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/calendar.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"card\": {\n    name: \"card\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/card.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/card.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"checkbox\": {\n    name: \"checkbox\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/checkbox.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/checkbox.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"checkbox-group\": {\n    name: \"checkbox-group\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/checkbox-group.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/checkbox-group.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"collapsible\": {\n    name: \"collapsible\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/collapsible.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/collapsible.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"combobox\": {\n    name: \"combobox\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/input\",\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/ui/combobox.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/combobox.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"command\": {\n    name: \"command\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/ui/command.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/command.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"dialog\": {\n    name: \"dialog\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/button\",\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/ui/dialog.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/dialog.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"drawer\": {\n    name: \"drawer\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/button\",\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/ui/drawer.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/drawer.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"empty\": {\n    name: \"empty\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/empty.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/empty.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"field\": {\n    name: \"field\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/field.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/field.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"fieldset\": {\n    name: \"fieldset\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/fieldset.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/fieldset.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"form\": {\n    name: \"form\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/form.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/form.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"frame\": {\n    name: \"frame\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/frame.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/frame.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"group\": {\n    name: \"group\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/separator\"],\n    files: [{\n      path: \"registry/default/ui/group.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/group.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"input\": {\n    name: \"input\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/input.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/input.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"input-otp\": {\n    name: \"input-otp\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/separator\"],\n    files: [{\n      path: \"registry/default/ui/input-otp.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/input-otp.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"input-group\": {\n    name: \"input-group\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/input\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/ui/input-group.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/input-group.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"kbd\": {\n    name: \"kbd\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/kbd.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/kbd.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"label\": {\n    name: \"label\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/label.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/label.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"menu\": {\n    name: \"menu\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/menu.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/menu.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"meter\": {\n    name: \"meter\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/meter.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/meter.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"number-field\": {\n    name: \"number-field\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/label\"],\n    files: [{\n      path: \"registry/default/ui/number-field.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/number-field.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"pagination\": {\n    name: \"pagination\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/ui/pagination.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/pagination.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"popover\": {\n    name: \"popover\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/popover.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/popover.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"preview-card\": {\n    name: \"preview-card\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/preview-card.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/preview-card.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"progress\": {\n    name: \"progress\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/progress.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/progress.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"radio-group\": {\n    name: \"radio-group\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/radio-group.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/radio-group.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"scroll-area\": {\n    name: \"scroll-area\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/scroll-area.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/scroll-area.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"select\": {\n    name: \"select\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/select.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/select.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"separator\": {\n    name: \"separator\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/separator.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/separator.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"sheet\": {\n    name: \"sheet\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/button\",\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/ui/sheet.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/sheet.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"sidebar\": {\n    name: \"sidebar\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/button\",\"@coss/input\",\"@coss/scroll-area\",\"@coss/separator\",\"@coss/sheet\",\"@coss/skeleton\",\"@coss/tooltip\",\"@coss/use-media-query\",\"@coss/utils\"],\n    files: [{\n      path: \"registry/default/ui/sidebar.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/sidebar.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"skeleton\": {\n    name: \"skeleton\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/skeleton.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/skeleton.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"slider\": {\n    name: \"slider\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/slider.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/slider.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"spinner\": {\n    name: \"spinner\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/spinner.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/spinner.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"switch\": {\n    name: \"switch\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/switch.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/switch.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"table\": {\n    name: \"table\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/table.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/table.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"tabs\": {\n    name: \"tabs\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/tabs.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/tabs.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"textarea\": {\n    name: \"textarea\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/textarea.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/textarea.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"toast\": {\n    name: \"toast\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/ui/toast.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/toast.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"toggle\": {\n    name: \"toggle\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/toggle.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/toggle.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"toggle-group\": {\n    name: \"toggle-group\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: [\"@coss/separator\",\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/ui/toggle-group.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/toggle-group.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"toolbar\": {\n    name: \"toolbar\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/toolbar.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/toolbar.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"tooltip\": {\n    name: \"tooltip\",\n    description: \"\",\n    type: \"registry:ui\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/ui/tooltip.tsx\",\n      type: \"registry:ui\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/ui/tooltip.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"p-accordion-1\": {\n    name: \"p-accordion-1\",\n    description: \"Basic accordion\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/accordion\"],\n    files: [{\n      path: \"registry/default/particles/p-accordion-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-accordion-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"accordion\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"},\n  },\n  \"p-accordion-2\": {\n    name: \"p-accordion-2\",\n    description: \"Accordion with one panel open\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/accordion\"],\n    files: [{\n      path: \"registry/default/particles/p-accordion-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-accordion-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"accordion\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"},\n  },\n  \"p-accordion-3\": {\n    name: \"p-accordion-3\",\n    description: \"Accordion allowing multiple panels open\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/accordion\"],\n    files: [{\n      path: \"registry/default/particles/p-accordion-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-accordion-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"accordion\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"},\n  },\n  \"p-accordion-4\": {\n    name: \"p-accordion-4\",\n    description: \"Controlled accordion\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/accordion\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-accordion-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-accordion-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"accordion\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"},\n  },\n  \"p-alert-1\": {\n    name: \"p-alert-1\",\n    description: \"Basic alert\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-alert-2\": {\n    name: \"p-alert-2\",\n    description: \"Alert with icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-alert-3\": {\n    name: \"p-alert-3\",\n    description: \"Alert with icon and action buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-alert-4\": {\n    name: \"p-alert-4\",\n    description: \"Info alert\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert\",\"info\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-alert-5\": {\n    name: \"p-alert-5\",\n    description: \"Success alert\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert\",\"success\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-alert-6\": {\n    name: \"p-alert-6\",\n    description: \"Warning alert\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert\",\"warning\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-alert-7\": {\n    name: \"p-alert-7\",\n    description: \"Error alert\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert\",\"error\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-alert-dialog-1\": {\n    name: \"p-alert-dialog-1\",\n    description: \"Alert dialog\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert-dialog\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-dialog-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-dialog-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert dialog\",\"dialog\"],\n    meta: undefined,\n  },\n  \"p-alert-dialog-2\": {\n    name: \"p-alert-dialog-2\",\n    description: \"Alert dialog with bare footer\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert-dialog\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-alert-dialog-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-alert-dialog-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert dialog\",\"dialog\"],\n    meta: undefined,\n  },\n  \"p-autocomplete-1\": {\n    name: \"p-autocomplete-1\",\n    description: \"Basic autocomplete\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-2\": {\n    name: \"p-autocomplete-2\",\n    description: \"Disabled autocomplete\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\",\"disabled\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-3\": {\n    name: \"p-autocomplete-3\",\n    description: \"Small autocomplete\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-4\": {\n    name: \"p-autocomplete-4\",\n    description: \"Large autocomplete\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-5\": {\n    name: \"p-autocomplete-5\",\n    description: \"Autocomplete with label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-6\": {\n    name: \"p-autocomplete-6\",\n    description: \"Autocomplete autofilling the input with the highlighted item\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-7\": {\n    name: \"p-autocomplete-7\",\n    description: \"Autocomplete auto highlighting the first option\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-8\": {\n    name: \"p-autocomplete-8\",\n    description: \"Autocomplete with clear button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-9\": {\n    name: \"p-autocomplete-9\",\n    description: \"Autocomplete with trigger and clear buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-10\": {\n    name: \"p-autocomplete-10\",\n    description: \"Autocomplete with grouped items\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-11\": {\n    name: \"p-autocomplete-11\",\n    description: \"Autocomplete with limited number of results\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-12\": {\n    name: \"p-autocomplete-12\",\n    description: \"Autocomplete with async items loading\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\",\"@coss/spinner\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\",\"async\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-13\": {\n    name: \"p-autocomplete-13\",\n    description: \"Autocomplete form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\",\"@coss/button\",\"@coss/field\",\"@coss/form\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"form\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-14\": {\n    name: \"p-autocomplete-14\",\n    description: \"Autocomplete form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-autocomplete-15\": {\n    name: \"p-autocomplete-15\",\n    description: \"Pill-shaped autocomplete\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    files: [{\n      path: \"registry/default/particles/p-autocomplete-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-autocomplete-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-avatar-1\": {\n    name: \"p-avatar-1\",\n    description: \"Avatar with image and fallback\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-2\": {\n    name: \"p-avatar-2\",\n    description: \"Fallback-only avatar\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-3\": {\n    name: \"p-avatar-3\",\n    description: \"Avatars with different sizes\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-4\": {\n    name: \"p-avatar-4\",\n    description: \"Avatars with different radii\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-5\": {\n    name: \"p-avatar-5\",\n    description: \"Overlapping avatar group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-6\": {\n    name: \"p-avatar-6\",\n    description: \"Avatar with user icon fallback\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-7\": {\n    name: \"p-avatar-7\",\n    description: \"Avatar with emerald status dot\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-8\": {\n    name: \"p-avatar-8\",\n    description: \"Avatar with muted status dot\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-9\": {\n    name: \"p-avatar-9\",\n    description: \"Rounded avatar with top-right emerald status\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-10\": {\n    name: \"p-avatar-10\",\n    description: \"Avatar with notification badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\",\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-11\": {\n    name: \"p-avatar-11\",\n    description: \"Rounded avatar with notification badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\",\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-12\": {\n    name: \"p-avatar-12\",\n    description: \"Avatar with verified badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-13\": {\n    name: \"p-avatar-13\",\n    description: \"Small overlapping avatar group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-avatar-14\": {\n    name: \"p-avatar-14\",\n    description: \"Large overlapping avatar group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\"],\n    files: [{\n      path: \"registry/default/particles/p-avatar-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-avatar-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\"],\n    meta: undefined,\n  },\n  \"p-badge-1\": {\n    name: \"p-badge-1\",\n    description: \"Basic badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-2\": {\n    name: \"p-badge-2\",\n    description: \"Outline badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-3\": {\n    name: \"p-badge-3\",\n    description: \"Secondary badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-4\": {\n    name: \"p-badge-4\",\n    description: \"Destructive badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\",\"error\"],\n    meta: undefined,\n  },\n  \"p-badge-5\": {\n    name: \"p-badge-5\",\n    description: \"Info badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\",\"info\"],\n    meta: undefined,\n  },\n  \"p-badge-6\": {\n    name: \"p-badge-6\",\n    description: \"Success badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\",\"success\"],\n    meta: undefined,\n  },\n  \"p-badge-7\": {\n    name: \"p-badge-7\",\n    description: \"Warning badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\",\"warning\"],\n    meta: undefined,\n  },\n  \"p-badge-8\": {\n    name: \"p-badge-8\",\n    description: \"Error badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\",\"error\"],\n    meta: undefined,\n  },\n  \"p-badge-9\": {\n    name: \"p-badge-9\",\n    description: \"Small badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-10\": {\n    name: \"p-badge-10\",\n    description: \"Large badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-11\": {\n    name: \"p-badge-11\",\n    description: \"Badge with icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-12\": {\n    name: \"p-badge-12\",\n    description: \"Badge with link\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-13\": {\n    name: \"p-badge-13\",\n    description: \"Badge with count\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-14\": {\n    name: \"p-badge-14\",\n    description: \"Full rounded badge (pill)\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-15\": {\n    name: \"p-badge-15\",\n    description: \"Badge with number after text\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-16\": {\n    name: \"p-badge-16\",\n    description: \"Status badge - Paid\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-17\": {\n    name: \"p-badge-17\",\n    description: \"Status badge - Pending\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-18\": {\n    name: \"p-badge-18\",\n    description: \"Status badge - Failed\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-badge-19\": {\n    name: \"p-badge-19\",\n    description: \"Selectable badge with checkbox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/checkbox\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-19.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-19.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\",\"checkbox\"],\n    meta: undefined,\n  },\n  \"p-badge-20\": {\n    name: \"p-badge-20\",\n    description: \"Removable badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\"],\n    files: [{\n      path: \"registry/default/particles/p-badge-20.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-badge-20.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\"],\n    meta: undefined,\n  },\n  \"p-breadcrumb-1\": {\n    name: \"p-breadcrumb-1\",\n    description: \"Breadcrumb with menu example\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/breadcrumb\",\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-breadcrumb-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-breadcrumb-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"breadcrumb\",\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-breadcrumb-2\": {\n    name: \"p-breadcrumb-2\",\n    description: \"Breadcrumb with custom separator\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/breadcrumb\"],\n    files: [{\n      path: \"registry/default/particles/p-breadcrumb-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-breadcrumb-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"breadcrumb\"],\n    meta: undefined,\n  },\n  \"p-breadcrumb-3\": {\n    name: \"p-breadcrumb-3\",\n    description: \"Breadcrumb with home icon for home link only\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/breadcrumb\"],\n    files: [{\n      path: \"registry/default/particles/p-breadcrumb-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-breadcrumb-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"breadcrumb\"],\n    meta: undefined,\n  },\n  \"p-breadcrumb-4\": {\n    name: \"p-breadcrumb-4\",\n    description: \"Breadcrumb with folders icon menu\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/breadcrumb\",\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-breadcrumb-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-breadcrumb-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"breadcrumb\",\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-breadcrumb-5\": {\n    name: \"p-breadcrumb-5\",\n    description: \"Breadcrumb with icons before text\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/breadcrumb\"],\n    files: [{\n      path: \"registry/default/particles/p-breadcrumb-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-breadcrumb-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"breadcrumb\"],\n    meta: undefined,\n  },\n  \"p-breadcrumb-6\": {\n    name: \"p-breadcrumb-6\",\n    description: \"Breadcrumb with dot separators\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/breadcrumb\"],\n    files: [{\n      path: \"registry/default/particles/p-breadcrumb-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-breadcrumb-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"breadcrumb\"],\n    meta: undefined,\n  },\n  \"p-breadcrumb-7\": {\n    name: \"p-breadcrumb-7\",\n    description: \"Breadcrumb with select dropdown\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/breadcrumb\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-breadcrumb-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-breadcrumb-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"breadcrumb\",\"select\"],\n    meta: undefined,\n  },\n  \"p-button-1\": {\n    name: \"p-button-1\",\n    description: \"Default button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-2\": {\n    name: \"p-button-2\",\n    description: \"Outline button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-3\": {\n    name: \"p-button-3\",\n    description: \"Secondary button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-4\": {\n    name: \"p-button-4\",\n    description: \"Destructive button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-5\": {\n    name: \"p-button-5\",\n    description: \"Destructive outline button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-6\": {\n    name: \"p-button-6\",\n    description: \"Ghost button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-7\": {\n    name: \"p-button-7\",\n    description: \"Link button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-8\": {\n    name: \"p-button-8\",\n    description: \"Extra-small button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-9\": {\n    name: \"p-button-9\",\n    description: \"Small button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-10\": {\n    name: \"p-button-10\",\n    description: \"Large button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-11\": {\n    name: \"p-button-11\",\n    description: \"Extra-large button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-12\": {\n    name: \"p-button-12\",\n    description: \"Disabled button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"disabled\"],\n    meta: undefined,\n  },\n  \"p-button-13\": {\n    name: \"p-button-13\",\n    description: \"Icon button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-14\": {\n    name: \"p-button-14\",\n    description: \"Small icon button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-15\": {\n    name: \"p-button-15\",\n    description: \"Large icon button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-16\": {\n    name: \"p-button-16\",\n    description: \"Button with icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-17\": {\n    name: \"p-button-17\",\n    description: \"Link rendered as button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-41\": {\n    name: \"p-button-41\",\n    description: \"Button using the built-in loading prop\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-41.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-41.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"loading\"],\n    meta: undefined,\n  },\n  \"p-button-18\": {\n    name: \"p-button-18\",\n    description: \"Custom loading button with manual Spinner\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/spinner\"],\n    files: [{\n      path: \"registry/default/particles/p-button-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"loading\"],\n    meta: undefined,\n  },\n  \"p-button-19\": {\n    name: \"p-button-19\",\n    description: \"Expandable show more/less toggle button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-19.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-19.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-20\": {\n    name: \"p-button-20\",\n    description: \"Back link button with chevron\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-20.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-20.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-21\": {\n    name: \"p-button-21\",\n    description: \"Card-style button with heading and description\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-21.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-21.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-22\": {\n    name: \"p-button-22\",\n    description: \"Directional pad control buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-22.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-22.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-23\": {\n    name: \"p-button-23\",\n    description: \"Outline like button with count\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-23.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-23.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-24\": {\n    name: \"p-button-24\",\n    description: \"Social login icon buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-24.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-24.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-26\": {\n    name: \"p-button-26\",\n    description: \"Star button with count badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-26.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-26.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-27\": {\n    name: \"p-button-27\",\n    description: \"Button group with QR code icon and sign in\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\"],\n    files: [{\n      path: \"registry/default/particles/p-button-27.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-27.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"group\"],\n    meta: undefined,\n  },\n  \"p-button-28\": {\n    name: \"p-button-28\",\n    description: \"Button with avatar\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-28.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-28.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"avatar\"],\n    meta: undefined,\n  },\n  \"p-button-29\": {\n    name: \"p-button-29\",\n    description: \"Pill-shaped button with rounded-full styling\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-29.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-29.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-30\": {\n    name: \"p-button-30\",\n    description: \"Button with animated arrow on hover\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-30.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-30.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-31\": {\n    name: \"p-button-31\",\n    description: \"Button with keyboard shortcut indicator\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/kbd\"],\n    files: [{\n      path: \"registry/default/particles/p-button-31.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-31.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"kbd\"],\n    meta: undefined,\n  },\n  \"p-button-32\": {\n    name: \"p-button-32\",\n    description: \"Button with notification badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-32.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-32.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"badge\"],\n    meta: undefined,\n  },\n  \"p-button-33\": {\n    name: \"p-button-33\",\n    description: \"Paired buttons (Cancel/Save)\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-33.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-33.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-34\": {\n    name: \"p-button-34\",\n    description: \"Button with animated status dot\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-34.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-34.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-35\": {\n    name: \"p-button-35\",\n    description: \"Icon-only copy button with feedback\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-35.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-35.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-36\": {\n    name: \"p-button-36\",\n    description: \"Copy button with feedback\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-36.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-36.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-37\": {\n    name: \"p-button-37\",\n    description: \"Rotating icon button (FAB-style toggle)\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-37.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-37.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-39\": {\n    name: \"p-button-39\",\n    description: \"Hamburger menu button with animated icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-39.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-39.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: undefined,\n  },\n  \"p-button-40\": {\n    name: \"p-button-40\",\n    description: \"Download button with progress and cancel action\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/spinner\",\"@coss/toast\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-button-40.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-40.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"group\",\"tooltip\",\"toast\"],\n    meta: undefined,\n  },\n  \"p-button-38\": {\n    name: \"p-button-38\",\n    description: \"Social login buttons (Google, X, GitHub)\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-button-38.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-button-38.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-calendar-1\": {\n    name: \"p-calendar-1\",\n    description: \"Basic calendar\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-3\": {\n    name: \"p-calendar-3\",\n    description: \"Calendar with date range selection\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-4\": {\n    name: \"p-calendar-4\",\n    description: \"Calendar with month/year dropdown navigation\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-5\": {\n    name: \"p-calendar-5\",\n    description: \"Calendar with custom Select dropdown for month/year\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"select\"],\n    meta: undefined,\n  },\n  \"p-calendar-6\": {\n    name: \"p-calendar-6\",\n    description: \"Calendar with Combobox dropdown for month/year\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"combobox\"],\n    meta: undefined,\n  },\n  \"p-calendar-7\": {\n    name: \"p-calendar-7\",\n    description: \"Calendar with disabled dates\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-8\": {\n    name: \"p-calendar-8\",\n    description: \"Calendar with multiple date selection\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-2\": {\n    name: \"p-calendar-2\",\n    description: \"Calendar with custom cell size\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-9\": {\n    name: \"p-calendar-9\",\n    description: \"Calendar with rounded day buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-10\": {\n    name: \"p-calendar-10\",\n    description: \"Calendar with rounded range selection style\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-11\": {\n    name: \"p-calendar-11\",\n    description: \"Calendar with right-aligned navigation\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-12\": {\n    name: \"p-calendar-12\",\n    description: \"Calendar with week numbers\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: undefined,\n  },\n  \"p-calendar-13\": {\n    name: \"p-calendar-13\",\n    description: \"Calendar with year-only combobox dropdown\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"combobox\"],\n    meta: undefined,\n  },\n  \"p-calendar-14\": {\n    name: \"p-calendar-14\",\n    description: \"Calendar without arrow navigation (dropdown only)\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"select\"],\n    meta: undefined,\n  },\n  \"p-calendar-15\": {\n    name: \"p-calendar-15\",\n    description: \"Calendar with current month button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"button\"],\n    meta: undefined,\n  },\n  \"p-calendar-16\": {\n    name: \"p-calendar-16\",\n    description: \"Calendar with today button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"button\"],\n    meta: undefined,\n  },\n  \"p-calendar-17\": {\n    name: \"p-calendar-17\",\n    description: \"Calendar with date input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/field\",\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"input\",\"field\"],\n    meta: undefined,\n  },\n  \"p-calendar-18\": {\n    name: \"p-calendar-18\",\n    description: \"Calendar with time input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/field\",\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"input\",\"field\"],\n    meta: undefined,\n  },\n  \"p-calendar-19\": {\n    name: \"p-calendar-19\",\n    description: \"Calendar with time slots (appointment picker)\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/scroll-area\",\"@coss/toggle\",\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-19.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-19.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"toggle\",\"toggle group\",\"scroll area\"],\n    meta: undefined,\n  },\n  \"p-calendar-20\": {\n    name: \"p-calendar-20\",\n    description: \"Calendar with date presets\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-20.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-20.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"button\"],\n    meta: undefined,\n  },\n  \"p-calendar-21\": {\n    name: \"p-calendar-21\",\n    description: \"Range calendar with date presets\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-21.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-21.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\",\"button\"],\n    meta: undefined,\n  },\n  \"p-calendar-22\": {\n    name: \"p-calendar-22\",\n    description: \"Two months calendar\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-22.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-22.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: {\"colSpan\":2},\n  },\n  \"p-calendar-23\": {\n    name: \"p-calendar-23\",\n    description: \"Three months calendar\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-23.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-23.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: {\"colSpan\":2},\n  },\n  \"p-calendar-24\": {\n    name: \"p-calendar-24\",\n    description: \"Pricing calendar with custom day buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\"],\n    files: [{\n      path: \"registry/default/particles/p-calendar-24.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-calendar-24.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"calendar\"],\n    meta: {\"colSpan\":2},\n  },\n  \"p-date-picker-1\": {\n    name: \"p-date-picker-1\",\n    description: \"Basic date picker\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/popover\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-date-picker-2\": {\n    name: \"p-date-picker-2\",\n    description: \"Date range picker\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/popover\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-date-picker-9\": {\n    name: \"p-date-picker-9\",\n    description: \"Two months calendar with range date\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/popover\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-date-picker-3\": {\n    name: \"p-date-picker-3\",\n    description: \"Date picker with field and dropdown navigation\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/calendar\",\"@coss/combobox\",\"@coss/field\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\",\"field\",\"combobox\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-date-picker-4\": {\n    name: \"p-date-picker-4\",\n    description: \"Date picker with presets\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/calendar\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-date-picker-5\": {\n    name: \"p-date-picker-5\",\n    description: \"Date picker with input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/calendar\",\"@coss/input-group\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-date-picker-6\": {\n    name: \"p-date-picker-6\",\n    description: \"Date picker that closes on select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/popover\",\"@coss/button\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-date-picker-7\": {\n    name: \"p-date-picker-7\",\n    description: \"Multiple dates picker\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/button\",\"@coss/calendar\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\",\"badge\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-date-picker-8\": {\n    name: \"p-date-picker-8\",\n    description: \"Date picker with select-like trigger\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/calendar\",\"@coss/popover\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-date-picker-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-date-picker-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"date picker\",\"calendar\",\"popover\",\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-card-1\": {\n    name: \"p-card-1\",\n    description: \"A basic card with header and footer\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-card-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-2\": {\n    name: \"p-card-2\",\n    description: \"Authentication card with actions\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-card-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-3\": {\n    name: \"p-card-3\",\n    description: \"Authentication card with separators\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-card-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-4\": {\n    name: \"p-card-4\",\n    description: \"Framed card with footer\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-card-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-5\": {\n    name: \"p-card-5\",\n    description: \"Framed card with header\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-card-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-6\": {\n    name: \"p-card-6\",\n    description: \"Framed card with header and footer\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-card-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-7\": {\n    name: \"p-card-7\",\n    description: \"Framed card with no rounded bottom\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-card-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-8\": {\n    name: \"p-card-8\",\n    description: \"Card within a frame and footer\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/frame\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-card-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\",\"frame\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-9\": {\n    name: \"p-card-9\",\n    description: \"Card within a frame and footer\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/frame\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-card-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\",\"frame\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-10\": {\n    name: \"p-card-10\",\n    description: \"Card within a frame with header and footer\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/field\",\"@coss/form\",\"@coss/frame\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-card-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"form\",\"frame\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-card-11\": {\n    name: \"p-card-11\",\n    description: \"CardFrame with header action\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/card\",\"@coss/empty\"],\n    files: [{\n      path: \"registry/default/particles/p-card-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-card-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"card\",\"frame\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-checkbox-1\": {\n    name: \"p-checkbox-1\",\n    description: \"Basic checkbox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\"],\n    meta: undefined,\n  },\n  \"p-checkbox-2\": {\n    name: \"p-checkbox-2\",\n    description: \"Disabled checkbox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"disabled\"],\n    meta: undefined,\n  },\n  \"p-checkbox-3\": {\n    name: \"p-checkbox-3\",\n    description: \"Checkbox with description\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\"],\n    meta: undefined,\n  },\n  \"p-checkbox-4\": {\n    name: \"p-checkbox-4\",\n    description: \"Card-style checkbox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\"],\n    meta: undefined,\n  },\n  \"p-checkbox-5\": {\n    name: \"p-checkbox-5\",\n    description: \"Checkbox form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/checkbox\",\"@coss/field\",\"@coss/form\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"form\"],\n    meta: undefined,\n  },\n  \"p-checkbox-group-1\": {\n    name: \"p-checkbox-group-1\",\n    description: \"Basic checkbox group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/checkbox-group\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-group-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-group-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"checkbox group\"],\n    meta: undefined,\n  },\n  \"p-checkbox-group-2\": {\n    name: \"p-checkbox-group-2\",\n    description: \"Checkbox group with disabled items\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/checkbox-group\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-group-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-group-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"checkbox group\",\"disabled\"],\n    meta: undefined,\n  },\n  \"p-checkbox-group-3\": {\n    name: \"p-checkbox-group-3\",\n    description: \"Checkbox group with parent checkbox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/checkbox-group\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-group-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-group-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"checkbox group\"],\n    meta: undefined,\n  },\n  \"p-checkbox-group-4\": {\n    name: \"p-checkbox-group-4\",\n    description: \"Nested checkbox group with parent\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/checkbox-group\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-group-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-group-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"checkbox group\"],\n    meta: undefined,\n  },\n  \"p-checkbox-group-5\": {\n    name: \"p-checkbox-group-5\",\n    description: \"Checkbox group form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/checkbox\",\"@coss/checkbox-group\",\"@coss/field\",\"@coss/fieldset\",\"@coss/form\"],\n    files: [{\n      path: \"registry/default/particles/p-checkbox-group-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-checkbox-group-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"checkbox group\",\"form\"],\n    meta: undefined,\n  },\n  \"p-collapsible-1\": {\n    name: \"p-collapsible-1\",\n    description: \"Basic collapsible\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/collapsible\"],\n    files: [{\n      path: \"registry/default/particles/p-collapsible-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-collapsible-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"collapsible\"],\n    meta: undefined,\n  },\n  \"p-combobox-1\": {\n    name: \"p-combobox-1\",\n    description: \"Basic combobox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-2\": {\n    name: \"p-combobox-2\",\n    description: \"Disabled combobox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\",\"disabled\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-3\": {\n    name: \"p-combobox-3\",\n    description: \"Small combobox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-4\": {\n    name: \"p-combobox-4\",\n    description: \"Large combobox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-5\": {\n    name: \"p-combobox-5\",\n    description: \"Combobox with label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-6\": {\n    name: \"p-combobox-6\",\n    description: \"Combobox auto highlighting the first option\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-7\": {\n    name: \"p-combobox-7\",\n    description: \"Combobox with clear button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-8\": {\n    name: \"p-combobox-8\",\n    description: \"Combobox with grouped items\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-9\": {\n    name: \"p-combobox-9\",\n    description: \"Combobox with multiple selection\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-10\": {\n    name: \"p-combobox-10\",\n    description: \"Combobox with input inside popup\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-11\": {\n    name: \"p-combobox-11\",\n    description: \"Combobox form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/combobox\",\"@coss/field\",\"@coss/form\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"form\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-12\": {\n    name: \"p-combobox-12\",\n    description: \"Combobox multiple form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/combobox\",\"@coss/field\",\"@coss/form\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"form\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-13\": {\n    name: \"p-combobox-13\",\n    description: \"Combobox with start addon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-14\": {\n    name: \"p-combobox-14\",\n    description: \"Combobox multiple with start addon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-15\": {\n    name: \"p-combobox-15\",\n    description: \"Pill-shaped combobox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-16\": {\n    name: \"p-combobox-16\",\n    description: \"Timezone combobox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\",\"timezone\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-17\": {\n    name: \"p-combobox-17\",\n    description: \"Timezone combobox with search input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"input\",\"timezone\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-combobox-18\": {\n    name: \"p-combobox-18\",\n    description: \"Combobox with select trigger\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-combobox-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-combobox-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-command-1\": {\n    name: \"p-command-1\",\n    description: \"Command palette with dialog\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/command\",\"@coss/kbd\"],\n    files: [{\n      path: \"registry/default/particles/p-command-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-command-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"command\",\"dialog\"],\n    meta: undefined,\n  },\n  \"p-command-2\": {\n    name: \"p-command-2\",\n    description: \"Command palette with AI assistant\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\",\"@coss/button\",\"@coss/command\",\"@coss/empty\",\"@coss/input\",\"@coss/kbd\",\"@coss/scroll-area\",\"@coss/skeleton\",\"@coss/spinner\"],\n    files: [{\n      path: \"registry/default/particles/p-command-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-command-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"command\",\"dialog\"],\n    meta: undefined,\n  },\n  \"p-dialog-1\": {\n    name: \"p-dialog-1\",\n    description: \"Dialog with form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/dialog\",\"@coss/field\",\"@coss/form\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-dialog-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-dialog-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dialog\"],\n    meta: undefined,\n  },\n  \"p-dialog-6\": {\n    name: \"p-dialog-6\",\n    description: \"Dialog with bare footer\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/dialog\",\"@coss/field\",\"@coss/form\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-dialog-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-dialog-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dialog\"],\n    meta: undefined,\n  },\n  \"p-dialog-2\": {\n    name: \"p-dialog-2\",\n    description: \"Dialog opened from menu\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/dialog\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-dialog-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-dialog-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dialog\",\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-dialog-3\": {\n    name: \"p-dialog-3\",\n    description: \"Nested dialogs\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/dialog\",\"@coss/field\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-dialog-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-dialog-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dialog\"],\n    meta: undefined,\n  },\n  \"p-dialog-4\": {\n    name: \"p-dialog-4\",\n    description: \"Dialog with close confirmation\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/alert-dialog\",\"@coss/button\",\"@coss/dialog\",\"@coss/field\",\"@coss/form\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-dialog-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-dialog-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"alert dialog\",\"dialog\"],\n    meta: undefined,\n  },\n  \"p-dialog-5\": {\n    name: \"p-dialog-5\",\n    description: \"Dialog with long content\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/dialog\"],\n    files: [{\n      path: \"registry/default/particles/p-dialog-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-dialog-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dialog\"],\n    meta: undefined,\n  },\n  \"p-drawer-1\": {\n    name: \"p-drawer-1\",\n    description: \"Simple bottom drawer with close button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-2\": {\n    name: \"p-drawer-2\",\n    description: \"Bottom drawer without drag bar\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-3\": {\n    name: \"p-drawer-3\",\n    description: \"Drawer with close button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-4\": {\n    name: \"p-drawer-4\",\n    description: \"Inset variant drawers for all four positions\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-5\": {\n    name: \"p-drawer-5\",\n    description: \"Straight variant drawers for all four positions\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-6\": {\n    name: \"p-drawer-6\",\n    description: \"Scrollable content with terms and conditions\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-7\": {\n    name: \"p-drawer-7\",\n    description: \"Nested bottom drawers with centered content\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-8\": {\n    name: \"p-drawer-8\",\n    description: \"Nested right drawers with inset variant\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\",\"@coss/field\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-9\": {\n    name: \"p-drawer-9\",\n    description: \"Bottom drawer with snap points\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-10\": {\n    name: \"p-drawer-10\",\n    description: \"Edit profile form with default and bare footer variants\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\",\"@coss/field\",\"@coss/form\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-11\": {\n    name: \"p-drawer-11\",\n    description: \"Mobile menu drawer from the left\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: undefined,\n  },\n  \"p-drawer-12\": {\n    name: \"p-drawer-12\",\n    description: \"Responsive edit profile: dialog on desktop, drawer on mobile\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/dialog\",\"@coss/drawer\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/use-media-query\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\",\"dialog\"],\n    meta: undefined,\n  },\n  \"p-drawer-13\": {\n    name: \"p-drawer-13\",\n    description: \"Responsive actions menu: menu on desktop, drawer on mobile\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\",\"@coss/menu\",\"@coss/use-media-query\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-drawer-14\": {\n    name: \"p-drawer-14\",\n    description: \"Left drawer with swipe area\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/drawer\"],\n    files: [{\n      path: \"registry/default/particles/p-drawer-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-drawer-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"drawer\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md\"},\n  },\n  \"p-empty-1\": {\n    name: \"p-empty-1\",\n    description: \"Empty state with icon and actions\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/empty\"],\n    files: [{\n      path: \"registry/default/particles/p-empty-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-empty-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"empty state\"],\n    meta: undefined,\n  },\n  \"p-field-1\": {\n    name: \"p-field-1\",\n    description: \"Field with description\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-field-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-2\": {\n    name: \"p-field-2\",\n    description: \"Field with required indicator\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-field-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-3\": {\n    name: \"p-field-3\",\n    description: \"Field in disabled state\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-field-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"disabled\",\"field\",\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-4\": {\n    name: \"p-field-4\",\n    description: \"Field showing validation error\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-field-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"error\",\"field\",\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-5\": {\n    name: \"p-field-5\",\n    description: \"Show field validity state\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-field-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-6\": {\n    name: \"p-field-6\",\n    description: \"Input group with field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-field-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"field\",\"input\",\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-7\": {\n    name: \"p-field-7\",\n    description: \"Field with autocomplete\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/autocomplete\",\"@coss/field\"],\n    files: [{\n      path: \"registry/default/particles/p-field-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"autocomplete\",\"field\",\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-8\": {\n    name: \"p-field-8\",\n    description: \"Field with combobox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\",\"@coss/field\"],\n    files: [{\n      path: \"registry/default/particles/p-field-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"field\",\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-9\": {\n    name: \"p-field-9\",\n    description: \"Field with multiple selection combobox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/combobox\",\"@coss/field\"],\n    files: [{\n      path: \"registry/default/particles/p-field-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"combobox\",\"field\",\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-10\": {\n    name: \"p-field-10\",\n    description: \"Field with textarea\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-field-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"label\",\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-11\": {\n    name: \"p-field-11\",\n    description: \"Field with select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-field-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"label\",\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-12\": {\n    name: \"p-field-12\",\n    description: \"Field with checkbox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/field\"],\n    files: [{\n      path: \"registry/default/particles/p-field-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"field\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-13\": {\n    name: \"p-field-13\",\n    description: \"Field with checkbox group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/checkbox\",\"@coss/checkbox-group\",\"@coss/field\",\"@coss/fieldset\"],\n    files: [{\n      path: \"registry/default/particles/p-field-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"checkbox group\",\"field\",\"fieldset\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-14\": {\n    name: \"p-field-14\",\n    description: \"Field with radio group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/fieldset\",\"@coss/radio-group\"],\n    files: [{\n      path: \"registry/default/particles/p-field-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"fieldset\",\"label\",\"radio group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-15\": {\n    name: \"p-field-15\",\n    description: \"Field with toggle switch\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/switch\"],\n    files: [{\n      path: \"registry/default/particles/p-field-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"label\",\"switch\"],\n    meta: undefined,\n  },\n  \"p-field-16\": {\n    name: \"p-field-16\",\n    description: \"Field with slider\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-field-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"label\",\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-17\": {\n    name: \"p-field-17\",\n    description: \"Field with number field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-field-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"input\",\"label\",\"number field\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-field-18\": {\n    name: \"p-field-18\",\n    description: \"Complete form built with field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/checkbox\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-field-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-field-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"checkbox\",\"field\",\"form\",\"input\",\"label\",\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-fieldset-1\": {\n    name: \"p-fieldset-1\",\n    description: \"Fieldset with multiple fields\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/fieldset\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-fieldset-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-fieldset-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"fieldset\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-form-1\": {\n    name: \"p-form-1\",\n    description: \"Input in a form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-form-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-form-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"field\",\"form\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-form-2\": {\n    name: \"p-form-2\",\n    description: \"Form with zod validation\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-form-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-form-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"field\",\"form\",\"label\",\"validation\",\"zod\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-frame-1\": {\n    name: \"p-frame-1\",\n    description: \"Basic frame\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/frame\"],\n    files: [{\n      path: \"registry/default/particles/p-frame-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-frame-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"frame\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-frame-3\": {\n    name: \"p-frame-3\",\n    description: \"Frame with multiple separated panels\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/frame\"],\n    files: [{\n      path: \"registry/default/particles/p-frame-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-frame-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"frame\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-frame-4\": {\n    name: \"p-frame-4\",\n    description: \"Frame with multiple stacked panels\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/frame\",\"@coss/separator\"],\n    files: [{\n      path: \"registry/default/particles/p-frame-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-frame-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"frame\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-frame-2\": {\n    name: \"p-frame-2\",\n    description: \"Frame with collapsible content and delete button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/collapsible\",\"@coss/frame\"],\n    files: [{\n      path: \"registry/default/particles/p-frame-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-frame-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"collapsible\",\"frame\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-kbd-1\": {\n    name: \"p-kbd-1\",\n    description: \"Keyboard shortcuts display\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/kbd\"],\n    files: [{\n      path: \"registry/default/particles/p-kbd-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-kbd-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"kbd\"],\n    meta: undefined,\n  },\n  \"p-group-1\": {\n    name: \"p-group-1\",\n    description: \"Basic group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-group-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\"],\n    meta: undefined,\n  },\n  \"p-group-2\": {\n    name: \"p-group-2\",\n    description: \"Group with input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/input\",\"@coss/tooltip\",\"@coss/use-copy-to-clipboard\"],\n    files: [{\n      path: \"registry/default/particles/p-group-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\",\"input\"],\n    meta: undefined,\n  },\n  \"p-group-3\": {\n    name: \"p-group-3\",\n    description: \"Small group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-group-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\"],\n    meta: undefined,\n  },\n  \"p-group-4\": {\n    name: \"p-group-4\",\n    description: \"Large group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-group-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\"],\n    meta: undefined,\n  },\n  \"p-group-5\": {\n    name: \"p-group-5\",\n    description: \"Group with disabled button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-group-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"group\"],\n    meta: undefined,\n  },\n  \"p-group-6\": {\n    name: \"p-group-6\",\n    description: \"Group with default button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-group-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"group\"],\n    meta: undefined,\n  },\n  \"p-group-7\": {\n    name: \"p-group-7\",\n    description: \"Group with start text\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/group\",\"@coss/input\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-group-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\"],\n    meta: undefined,\n  },\n  \"p-group-8\": {\n    name: \"p-group-8\",\n    description: \"Group with end text\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/group\",\"@coss/input\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-group-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\"],\n    meta: undefined,\n  },\n  \"p-group-9\": {\n    name: \"p-group-9\",\n    description: \"Vertical group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\"],\n    files: [{\n      path: \"registry/default/particles/p-group-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\"],\n    meta: undefined,\n  },\n  \"p-group-10\": {\n    name: \"p-group-10\",\n    description: \"Nested groups\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\"],\n    files: [{\n      path: \"registry/default/particles/p-group-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\"],\n    meta: undefined,\n  },\n  \"p-group-11\": {\n    name: \"p-group-11\",\n    description: \"Group with popup\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/button\",\"@coss/group\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-group-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\"],\n    meta: undefined,\n  },\n  \"p-group-12\": {\n    name: \"p-group-12\",\n    description: \"Group with input group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/input-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-group-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\",\"input group\"],\n    meta: undefined,\n  },\n  \"p-group-13\": {\n    name: \"p-group-13\",\n    description: \"Group with menu\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-group-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"group\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-group-14\": {\n    name: \"p-group-14\",\n    description: \"Group with select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/number-field\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-group-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\",\"select\"],\n    meta: undefined,\n  },\n  \"p-group-15\": {\n    name: \"p-group-15\",\n    description: \"Group with search\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-group-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\",\"search\"],\n    meta: undefined,\n  },\n  \"p-group-16\": {\n    name: \"p-group-16\",\n    description: \"Group with add button and input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-group-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"group\",\"input\"],\n    meta: undefined,\n  },\n  \"p-group-17\": {\n    name: \"p-group-17\",\n    description: \"Group with input and currency text\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/group\",\"@coss/input\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-group-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\",\"input\"],\n    meta: undefined,\n  },\n  \"p-group-18\": {\n    name: \"p-group-18\",\n    description: \"Group with select and input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/group\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-group-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\",\"input\",\"select\"],\n    meta: undefined,\n  },\n  \"p-group-19\": {\n    name: \"p-group-19\",\n    description: \"Group with input and select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/group\",\"@coss/input\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-group-19.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-19.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\",\"input\",\"select\"],\n    meta: undefined,\n  },\n  \"p-group-20\": {\n    name: \"p-group-20\",\n    description: \"Group with input and text button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-group-20.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-20.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"group\",\"input\"],\n    meta: undefined,\n  },\n  \"p-group-22\": {\n    name: \"p-group-22\",\n    description: \"Group with two number inputs for range\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/group\",\"@coss/label\",\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-group-22.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-22.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"group\",\"label\",\"number field\"],\n    meta: undefined,\n  },\n  \"p-group-23\": {\n    name: \"p-group-23\",\n    description: \"Group with filter label, combobox multi-select, and remove button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\",\"@coss/badge\",\"@coss/button\",\"@coss/combobox\",\"@coss/group\"],\n    files: [{\n      path: \"registry/default/particles/p-group-23.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-group-23.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\",\"badge\",\"button\",\"combobox\",\"group\"],\n    meta: undefined,\n  },\n  \"p-input-1\": {\n    name: \"p-input-1\",\n    description: \"Basic input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-2\": {\n    name: \"p-input-2\",\n    description: \"Small input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-3\": {\n    name: \"p-input-3\",\n    description: \"Large input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-4\": {\n    name: \"p-input-4\",\n    description: \"Disabled input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-5\": {\n    name: \"p-input-5\",\n    description: \"File input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-6\": {\n    name: \"p-input-6\",\n    description: \"Input with label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-input-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-7\": {\n    name: \"p-input-7\",\n    description: \"Input with button using Group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"group\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-8\": {\n    name: \"p-input-8\",\n    description: \"Input with start text and end tooltip\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-input-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input\",\"input group\",\"popover\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-9\": {\n    name: \"p-input-9\",\n    description: \"Password input with toggle visibility\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-input-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input\",\"input group\",\"tooltip\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-10\": {\n    name: \"p-input-10\",\n    description: \"Input group mimicking a URL bar\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-input-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input\",\"input group\",\"popover\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-11\": {\n    name: \"p-input-11\",\n    description: \"Input group with keyboard shortcut\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\",\"@coss/kbd\"],\n    files: [{\n      path: \"registry/default/particles/p-input-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\",\"input group\",\"kbd\",\"search\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-12\": {\n    name: \"p-input-12\",\n    description: \"Input group with start loading spinner\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\",\"@coss/spinner\"],\n    files: [{\n      path: \"registry/default/particles/p-input-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\",\"input group\",\"spinner\",\"loading\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-13\": {\n    name: \"p-input-13\",\n    description: \"Input with label and required indicator\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-input-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-14\": {\n    name: \"p-input-14\",\n    description: \"Input with optional label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-input-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-15\": {\n    name: \"p-input-15\",\n    description: \"Input with custom border and background\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-16\": {\n    name: \"p-input-16\",\n    description: \"Input group with end loading spinner\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\",\"@coss/spinner\"],\n    files: [{\n      path: \"registry/default/particles/p-input-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\",\"input group\",\"spinner\",\"loading\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-17\": {\n    name: \"p-input-17\",\n    description: \"Read-only input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-otp-1\": {\n    name: \"p-input-otp-1\",\n    description: \"Basic OTP input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-otp\"],\n    files: [{\n      path: \"registry/default/particles/p-input-otp-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-otp-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input otp\",\"input\"],\n    meta: undefined,\n  },\n  \"p-input-otp-2\": {\n    name: \"p-input-otp-2\",\n    description: \"Large OTP input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-otp\"],\n    files: [{\n      path: \"registry/default/particles/p-input-otp-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-otp-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input otp\",\"input\"],\n    meta: undefined,\n  },\n  \"p-input-otp-3\": {\n    name: \"p-input-otp-3\",\n    description: \"OTP input with separator\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-otp\"],\n    files: [{\n      path: \"registry/default/particles/p-input-otp-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-otp-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input otp\",\"input\"],\n    meta: undefined,\n  },\n  \"p-input-otp-4\": {\n    name: \"p-input-otp-4\",\n    description: \"OTP input with label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-otp\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-input-otp-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-otp-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input otp\",\"input\",\"label\"],\n    meta: undefined,\n  },\n  \"p-input-otp-5\": {\n    name: \"p-input-otp-5\",\n    description: \"Digits-only OTP input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-otp\"],\n    files: [{\n      path: \"registry/default/particles/p-input-otp-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-otp-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input otp\",\"input\"],\n    meta: undefined,\n  },\n  \"p-input-otp-6\": {\n    name: \"p-input-otp-6\",\n    description: \"Invalid OTP input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-otp\"],\n    files: [{\n      path: \"registry/default/particles/p-input-otp-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-otp-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input otp\",\"input\",\"validation\"],\n    meta: undefined,\n  },\n  \"p-input-otp-7\": {\n    name: \"p-input-otp-7\",\n    description: \"OTP input with auto validation\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-otp\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-input-otp-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-otp-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input otp\",\"input\",\"validation\"],\n    meta: undefined,\n  },\n  \"p-input-group-1\": {\n    name: \"p-input-group-1\",\n    description: \"Basic input group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-2\": {\n    name: \"p-input-group-2\",\n    description: \"Input group with end icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-3\": {\n    name: \"p-input-group-3\",\n    description: \"Input group with start text\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-4\": {\n    name: \"p-input-group-4\",\n    description: \"Input group with end text\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-5\": {\n    name: \"p-input-group-5\",\n    description: \"Input group with start and end text\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-6\": {\n    name: \"p-input-group-6\",\n    description: \"Input group with number field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\",\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\",\"number field\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-7\": {\n    name: \"p-input-group-7\",\n    description: \"Input group with end tooltip\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\",\"tooltip\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-8\": {\n    name: \"p-input-group-8\",\n    description: \"Input group with icon button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/tooltip\",\"@coss/use-copy-to-clipboard\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-9\": {\n    name: \"p-input-group-9\",\n    description: \"Input group with button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-10\": {\n    name: \"p-input-group-10\",\n    description: \"Input group with badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\",\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-11\": {\n    name: \"p-input-group-11\",\n    description: \"Input group with keyboard shortcut\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\",\"@coss/kbd\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\",\"kbd\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-12\": {\n    name: \"p-input-group-12\",\n    description: \"Input group with inner label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/label\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-13\": {\n    name: \"p-input-group-13\",\n    description: \"Small input group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-14\": {\n    name: \"p-input-group-14\",\n    description: \"Large input group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-15\": {\n    name: \"p-input-group-15\",\n    description: \"Disabled input group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-16\": {\n    name: \"p-input-group-16\",\n    description: \"Input group with loading spinner\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\",\"@coss/spinner\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\",\"spinner\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-17\": {\n    name: \"p-input-group-17\",\n    description: \"Input group with textarea\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/menu\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input group\",\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"},\n  },\n  \"p-input-group-18\": {\n    name: \"p-input-group-18\",\n    description: \"Input group with badge and menu\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/button\",\"@coss/input-group\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"badge\",\"dropdown\",\"input group\",\"menu\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-19\": {\n    name: \"p-input-group-19\",\n    description: \"Mini editor built with input group and toggle\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-19.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-19.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input group\",\"textarea\",\"toggle\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"},\n  },\n  \"p-input-group-20\": {\n    name: \"p-input-group-20\",\n    description: \"Input group with search icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-20.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-20.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\",\"input group\",\"search\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-21\": {\n    name: \"p-input-group-21\",\n    description: \"Input group with start tooltip\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-21.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-21.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input\",\"input group\",\"tooltip\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-22\": {\n    name: \"p-input-group-22\",\n    description: \"Input group with clear button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-22.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-22.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input\",\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-23\": {\n    name: \"p-input-group-23\",\n    description: \"Search input group with loader and voice button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-23.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-23.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input\",\"input group\",\"search\",\"tooltip\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-24\": {\n    name: \"p-input-group-24\",\n    description: \"Input group with character counter\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input-group\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-24.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-24.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\",\"input group\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-18\": {\n    name: \"p-input-18\",\n    description: \"Input with characters remaining counter\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-19\": {\n    name: \"p-input-19\",\n    description: \"Pill-shaped input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/input\"],\n    files: [{\n      path: \"registry/default/particles/p-input-19.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-19.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-26\": {\n    name: \"p-input-group-26\",\n    description: \"Password input with strength indicator\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/label\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-26.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-26.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input\",\"input group\",\"label\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-input-group-27\": {\n    name: \"p-input-group-27\",\n    description: \"Code snippet input with language selector\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/select\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-27.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-27.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input group\",\"select\",\"textarea\",\"tooltip\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"},\n  },\n  \"p-input-group-28\": {\n    name: \"p-input-group-28\",\n    description: \"Message composer with attachment buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-28.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-28.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input group\",\"textarea\",\"tooltip\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"},\n  },\n  \"p-input-group-29\": {\n    name: \"p-input-group-29\",\n    description: \"Chat input with voice and send buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-input-group-29.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-input-group-29.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"input group\",\"textarea\",\"tooltip\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"},\n  },\n  \"p-meter-1\": {\n    name: \"p-meter-1\",\n    description: \"Basic meter\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/meter\"],\n    files: [{\n      path: \"registry/default/particles/p-meter-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-meter-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"meter\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-meter-2\": {\n    name: \"p-meter-2\",\n    description: \"Simple meter\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/meter\"],\n    files: [{\n      path: \"registry/default/particles/p-meter-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-meter-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"meter\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-meter-3\": {\n    name: \"p-meter-3\",\n    description: \"Meter with formatted value\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/meter\"],\n    files: [{\n      path: \"registry/default/particles/p-meter-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-meter-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"meter\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-meter-4\": {\n    name: \"p-meter-4\",\n    description: \"Meter with range\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/meter\"],\n    files: [{\n      path: \"registry/default/particles/p-meter-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-meter-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"meter\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-menu-1\": {\n    name: \"p-menu-1\",\n    description: \"Basic menu\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-menu-2\": {\n    name: \"p-menu-2\",\n    description: \"Menu with hover\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-menu-3\": {\n    name: \"p-menu-3\",\n    description: \"Menu with checkbox\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-menu-9\": {\n    name: \"p-menu-9\",\n    description: \"Menu with checkbox items as switches\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\",\"switch\"],\n    meta: undefined,\n  },\n  \"p-menu-4\": {\n    name: \"p-menu-4\",\n    description: \"Menu with radio group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-menu-5\": {\n    name: \"p-menu-5\",\n    description: \"Menu with link\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-menu-6\": {\n    name: \"p-menu-6\",\n    description: \"Menu with group labels\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-menu-7\": {\n    name: \"p-menu-7\",\n    description: \"Nested menu\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-menu-8\": {\n    name: \"p-menu-8\",\n    description: \"Menu close on click\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/menu\"],\n    files: [{\n      path: \"registry/default/particles/p-menu-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-menu-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"dropdown\",\"menu\"],\n    meta: undefined,\n  },\n  \"p-number-field-1\": {\n    name: \"p-number-field-1\",\n    description: \"Basic number field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-2\": {\n    name: \"p-number-field-2\",\n    description: \"Small number field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-3\": {\n    name: \"p-number-field-3\",\n    description: \"Large number field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-4\": {\n    name: \"p-number-field-4\",\n    description: \"Disabled number field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-5\": {\n    name: \"p-number-field-5\",\n    description: \"Number field with label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-6\": {\n    name: \"p-number-field-6\",\n    description: \"Number field with scrub\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-7\": {\n    name: \"p-number-field-7\",\n    description: \"Number field with range\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-8\": {\n    name: \"p-number-field-8\",\n    description: \"Number field with formatted value\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-9\": {\n    name: \"p-number-field-9\",\n    description: \"Number field with step\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-10\": {\n    name: \"p-number-field-10\",\n    description: \"Number field in form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\",\"form\",\"field\",\"zod\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-number-field-11\": {\n    name: \"p-number-field-11\",\n    description: \"Pill-shaped number field\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\"],\n    files: [{\n      path: \"registry/default/particles/p-number-field-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-number-field-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"number field\",\"input\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-pagination-1\": {\n    name: \"p-pagination-1\",\n    description: \"Pagination example\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/pagination\"],\n    files: [{\n      path: \"registry/default/particles/p-pagination-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-pagination-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"pagination\"],\n    meta: undefined,\n  },\n  \"p-pagination-2\": {\n    name: \"p-pagination-2\",\n    description: \"Pagination with previous and next buttons only\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/pagination\"],\n    files: [{\n      path: \"registry/default/particles/p-pagination-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-pagination-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"pagination\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-pagination-3\": {\n    name: \"p-pagination-3\",\n    description: \"Pagination with select, and previous and next buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/pagination\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-pagination-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-pagination-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"pagination\",\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full\"},\n  },\n  \"p-popover-1\": {\n    name: \"p-popover-1\",\n    description: \"Popover with a form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/popover\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-popover-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-popover-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"field\",\"form\",\"popover\",\"textarea\"],\n    meta: undefined,\n  },\n  \"p-popover-2\": {\n    name: \"p-popover-2\",\n    description: \"Popover with close button\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-popover-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-popover-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"popover\"],\n    meta: undefined,\n  },\n  \"p-popover-3\": {\n    name: \"p-popover-3\",\n    description: \"Animated popovers\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\",\"@coss/button\",\"@coss/popover\"],\n    files: [{\n      path: \"registry/default/particles/p-popover-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-popover-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"avatar\",\"button\",\"popover\"],\n    meta: undefined,\n  },\n  \"p-preview-card-1\": {\n    name: \"p-preview-card-1\",\n    description: \"Preview card with popup\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/preview-card\"],\n    files: [{\n      path: \"registry/default/particles/p-preview-card-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-preview-card-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"preview card\"],\n    meta: undefined,\n  },\n  \"p-progress-1\": {\n    name: \"p-progress-1\",\n    description: \"Basic progress bar\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/progress\"],\n    files: [{\n      path: \"registry/default/particles/p-progress-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-progress-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"progress\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-progress-2\": {\n    name: \"p-progress-2\",\n    description: \"Progress with label and value\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/progress\"],\n    files: [{\n      path: \"registry/default/particles/p-progress-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-progress-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"progress\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-progress-3\": {\n    name: \"p-progress-3\",\n    description: \"Progress with formatted value\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/progress\"],\n    files: [{\n      path: \"registry/default/particles/p-progress-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-progress-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"progress\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-radio-group-1\": {\n    name: \"p-radio-group-1\",\n    description: \"Basic radio group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/radio-group\"],\n    files: [{\n      path: \"registry/default/particles/p-radio-group-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-radio-group-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"radio group\"],\n    meta: undefined,\n  },\n  \"p-radio-group-2\": {\n    name: \"p-radio-group-2\",\n    description: \"Disabled radio group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/radio-group\"],\n    files: [{\n      path: \"registry/default/particles/p-radio-group-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-radio-group-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"radio group\"],\n    meta: undefined,\n  },\n  \"p-radio-group-3\": {\n    name: \"p-radio-group-3\",\n    description: \"Radio group with description\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/radio-group\"],\n    files: [{\n      path: \"registry/default/particles/p-radio-group-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-radio-group-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"radio group\"],\n    meta: undefined,\n  },\n  \"p-radio-group-4\": {\n    name: \"p-radio-group-4\",\n    description: \"Radio group card\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/radio-group\"],\n    files: [{\n      path: \"registry/default/particles/p-radio-group-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-radio-group-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"radio group\"],\n    meta: undefined,\n  },\n  \"p-radio-group-5\": {\n    name: \"p-radio-group-5\",\n    description: \"Radio group in form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/fieldset\",\"@coss/form\",\"@coss/radio-group\"],\n    files: [{\n      path: \"registry/default/particles/p-radio-group-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-radio-group-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"radio group\",\"form\"],\n    meta: undefined,\n  },\n  \"p-scroll-area-1\": {\n    name: \"p-scroll-area-1\",\n    description: \"Basic scroll area\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/particles/p-scroll-area-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-scroll-area-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"scroll area\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-scroll-area-2\": {\n    name: \"p-scroll-area-2\",\n    description: \"Horizontal scroll area\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/particles/p-scroll-area-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-scroll-area-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"scroll area\"],\n    meta: undefined,\n  },\n  \"p-scroll-area-3\": {\n    name: \"p-scroll-area-3\",\n    description: \"Scroll area with both directions\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/particles/p-scroll-area-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-scroll-area-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"scroll area\"],\n    meta: undefined,\n  },\n  \"p-scroll-area-4\": {\n    name: \"p-scroll-area-4\",\n    description: \"Scroll area with fading edges\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/particles/p-scroll-area-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-scroll-area-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"scroll area\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-scroll-area-5\": {\n    name: \"p-scroll-area-5\",\n    description: \"Horizontal scroll area with scrollbar gutter\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    files: [{\n      path: \"registry/default/particles/p-scroll-area-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-scroll-area-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"scroll area\"],\n    meta: undefined,\n  },\n  \"p-select-1\": {\n    name: \"p-select-1\",\n    description: \"Basic select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-2\": {\n    name: \"p-select-2\",\n    description: \"Small select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-3\": {\n    name: \"p-select-3\",\n    description: \"Large select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-4\": {\n    name: \"p-select-4\",\n    description: \"Disabled select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-5\": {\n    name: \"p-select-5\",\n    description: \"Select without item alignment\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-6\": {\n    name: \"p-select-6\",\n    description: \"Select with groups\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-7\": {\n    name: \"p-select-7\",\n    description: \"Multiple select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-8\": {\n    name: \"p-select-8\",\n    description: \"Select with icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-9\": {\n    name: \"p-select-9\",\n    description: \"Select options with icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-10\": {\n    name: \"p-select-10\",\n    description: \"Select with object values\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-12\": {\n    name: \"p-select-12\",\n    description: \"Select with disabled items\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\",\"disabled\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-13\": {\n    name: \"p-select-13\",\n    description: \"Timezone select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\",\"time\",\"timezone\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-14\": {\n    name: \"p-select-14\",\n    description: \"Status select with colored dot\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-15\": {\n    name: \"p-select-15\",\n    description: \"Pill-shaped select trigger\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-16\": {\n    name: \"p-select-16\",\n    description: \"Select with left text label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-17\": {\n    name: \"p-select-17\",\n    description: \"Select with country flags\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-18\": {\n    name: \"p-select-18\",\n    description: \"Select with description in options only\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-19\": {\n    name: \"p-select-19\",\n    description: \"Select with avatars\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-19.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-19.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\",\"avatar\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-20\": {\n    name: \"p-select-20\",\n    description: \"Rich select with avatars and usernames\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-20.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-20.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\",\"avatar\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-21\": {\n    name: \"p-select-21\",\n    description: \"Auto width select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-21.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-21.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: undefined,\n  },\n  \"p-select-22\": {\n    name: \"p-select-22\",\n    description: \"Select with custom border and background\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-22.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-22.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-23\": {\n    name: \"p-select-23\",\n    description: \"Select with label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-23.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-23.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-select-11\": {\n    name: \"p-select-11\",\n    description: \"Select in form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/select\"],\n    files: [{\n      path: \"registry/default/particles/p-select-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-select-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"select\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-separator-1\": {\n    name: \"p-separator-1\",\n    description: \"Separator with horizontal and vertical orientations\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/separator\"],\n    files: [{\n      path: \"registry/default/particles/p-separator-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-separator-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"separator\"],\n    meta: undefined,\n  },\n  \"p-sheet-1\": {\n    name: \"p-sheet-1\",\n    description: \"Basic sheet\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/sheet\"],\n    files: [{\n      path: \"registry/default/particles/p-sheet-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-sheet-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"sheet\"],\n    meta: undefined,\n  },\n  \"p-sheet-2\": {\n    name: \"p-sheet-2\",\n    description: \"Sheet inset\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/input\",\"@coss/sheet\"],\n    files: [{\n      path: \"registry/default/particles/p-sheet-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-sheet-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"sheet\"],\n    meta: undefined,\n  },\n  \"p-sheet-3\": {\n    name: \"p-sheet-3\",\n    description: \"Sheet position\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/sheet\"],\n    files: [{\n      path: \"registry/default/particles/p-sheet-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-sheet-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"sheet\"],\n    meta: undefined,\n  },\n  \"p-skeleton-1\": {\n    name: \"p-skeleton-1\",\n    description: \"Basic skeleton\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/avatar\",\"@coss/button\",\"@coss/skeleton\"],\n    files: [{\n      path: \"registry/default/particles/p-skeleton-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-skeleton-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"skeleton\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-skeleton-2\": {\n    name: \"p-skeleton-2\",\n    description: \"Skeleton only\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/skeleton\"],\n    files: [{\n      path: \"registry/default/particles/p-skeleton-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-skeleton-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"skeleton\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"},\n  },\n  \"p-slider-1\": {\n    name: \"p-slider-1\",\n    description: \"Basic slider\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-2\": {\n    name: \"p-slider-2\",\n    description: \"Slider with label and value\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-3\": {\n    name: \"p-slider-3\",\n    description: \"Disabled slider\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\",\"disabled\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-4\": {\n    name: \"p-slider-4\",\n    description: \"Slider with reference labels\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-5\": {\n    name: \"p-slider-5\",\n    description: \"Slider with ticks\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-6\": {\n    name: \"p-slider-6\",\n    description: \"Slider with labels above\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-7\": {\n    name: \"p-slider-7\",\n    description: \"Range slider\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-8\": {\n    name: \"p-slider-8\",\n    description: \"Slider with 3 thumbs\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-9\": {\n    name: \"p-slider-9\",\n    description: \"Range slider with collision behavior none\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-10\": {\n    name: \"p-slider-10\",\n    description: \"Range slider with collision behavior swap\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-11\": {\n    name: \"p-slider-11\",\n    description: \"Slider with icons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-12\": {\n    name: \"p-slider-12\",\n    description: \"Slider with input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\",\"number field\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-13\": {\n    name: \"p-slider-13\",\n    description: \"Range slider with inputs\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\",\"number field\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-14\": {\n    name: \"p-slider-14\",\n    description: \"Slider with increment and decrement buttons\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\",\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-15\": {\n    name: \"p-slider-15\",\n    description: \"Price range slider\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/fieldset\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-16\": {\n    name: \"p-slider-16\",\n    description: \"Emoji rating slider\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-16.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-16.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-17\": {\n    name: \"p-slider-17\",\n    description: \"Vertical slider\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-17.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-17.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: undefined,\n  },\n  \"p-slider-18\": {\n    name: \"p-slider-18\",\n    description: \"Vertical range slider\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-18.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-18.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: undefined,\n  },\n  \"p-slider-19\": {\n    name: \"p-slider-19\",\n    description: \"Vertical slider with input\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/number-field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-19.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-19.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\",\"number field\"],\n    meta: undefined,\n  },\n  \"p-slider-20\": {\n    name: \"p-slider-20\",\n    description: \"Equalizer with vertical sliders\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-20.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-20.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\"],\n    meta: undefined,\n  },\n  \"p-slider-21\": {\n    name: \"p-slider-21\",\n    description: \"Object position sliders with reset\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/fieldset\",\"@coss/label\",\"@coss/number-field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-21.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-21.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\",\"number field\",\"button\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-22\": {\n    name: \"p-slider-22\",\n    description: \"Price slider with histogram\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/input-group\",\"@coss/number-field\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-22.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-22.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\",\"number field\",\"input group\",\"button\",\"filter\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-slider-23\": {\n    name: \"p-slider-23\",\n    description: \"Slider in form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/fieldset\",\"@coss/form\",\"@coss/slider\"],\n    files: [{\n      path: \"registry/default/particles/p-slider-23.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-slider-23.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"slider\",\"form\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-spinner-1\": {\n    name: \"p-spinner-1\",\n    description: \"Basic spinner\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/spinner\"],\n    files: [{\n      path: \"registry/default/particles/p-spinner-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-spinner-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"spinner\"],\n    meta: undefined,\n  },\n  \"p-switch-1\": {\n    name: \"p-switch-1\",\n    description: \"Basic switch\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/switch\"],\n    files: [{\n      path: \"registry/default/particles/p-switch-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-switch-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"switch\"],\n    meta: undefined,\n  },\n  \"p-switch-2\": {\n    name: \"p-switch-2\",\n    description: \"Disabled switch\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/switch\"],\n    files: [{\n      path: \"registry/default/particles/p-switch-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-switch-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"switch\"],\n    meta: undefined,\n  },\n  \"p-switch-3\": {\n    name: \"p-switch-3\",\n    description: \"Switch with description\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/switch\"],\n    files: [{\n      path: \"registry/default/particles/p-switch-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-switch-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"switch\"],\n    meta: undefined,\n  },\n  \"p-switch-4\": {\n    name: \"p-switch-4\",\n    description: \"Switch card\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/switch\"],\n    files: [{\n      path: \"registry/default/particles/p-switch-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-switch-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"switch\"],\n    meta: undefined,\n  },\n  \"p-switch-5\": {\n    name: \"p-switch-5\",\n    description: \"Switch in form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/switch\"],\n    files: [{\n      path: \"registry/default/particles/p-switch-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-switch-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"switch\"],\n    meta: undefined,\n  },\n  \"p-switch-6\": {\n    name: \"p-switch-6\",\n    description: \"Custom size switch\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/switch\"],\n    files: [{\n      path: \"registry/default/particles/p-switch-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-switch-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"switch\"],\n    meta: undefined,\n  },\n  \"p-table-1\": {\n    name: \"p-table-1\",\n    description: \"Basic table\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/table\"],\n    files: [{\n      path: \"registry/default/particles/p-table-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-table-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"table\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\"colSpan\":2},\n  },\n  \"p-table-2\": {\n    name: \"p-table-2\",\n    description: \"Framed table\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/frame\",\"@coss/table\"],\n    files: [{\n      path: \"registry/default/particles/p-table-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-table-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"frame\",\"table\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\"colSpan\":2},\n  },\n  \"p-table-3\": {\n    name: \"p-table-3\",\n    description: \"Table with TanStack Table and checkboxes\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/checkbox\",\"@coss/frame\",\"@coss/table\"],\n    files: [{\n      path: \"registry/default/particles/p-table-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-table-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"table\",\"tanstack\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\"colSpan\":2},\n  },\n  \"p-table-4\": {\n    name: \"p-table-4\",\n    description: \"Table with TanStack Table, sorting, and pagination\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/button\",\"@coss/checkbox\",\"@coss/frame\",\"@coss/pagination\",\"@coss/select\",\"@coss/table\"],\n    files: [{\n      path: \"registry/default/particles/p-table-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-table-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"checkbox\",\"pagination\",\"select\",\"table\",\"tanstack\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\"colSpan\":2},\n  },\n  \"p-tabs-1\": {\n    name: \"p-tabs-1\",\n    description: \"Basic tabs\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: undefined,\n  },\n  \"p-tabs-2\": {\n    name: \"p-tabs-2\",\n    description: \"Tabs with underline\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: undefined,\n  },\n  \"p-tabs-3\": {\n    name: \"p-tabs-3\",\n    description: \"Vertical tabs\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"},\n  },\n  \"p-tabs-4\": {\n    name: \"p-tabs-4\",\n    description: \"Vertical tabs with underline\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"},\n  },\n  \"p-tabs-5\": {\n    name: \"p-tabs-5\",\n    description: \"Tabs with full rounded triggers\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: undefined,\n  },\n  \"p-tabs-6\": {\n    name: \"p-tabs-6\",\n    description: \"Tabs with icon before name\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: undefined,\n  },\n  \"p-tabs-7\": {\n    name: \"p-tabs-7\",\n    description: \"Tabs with icon before name and underline\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: undefined,\n  },\n  \"p-tabs-8\": {\n    name: \"p-tabs-8\",\n    description: \"Tabs with icon only\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: undefined,\n  },\n  \"p-tabs-9\": {\n    name: \"p-tabs-9\",\n    description: \"Tabs with underline and icon on top\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: undefined,\n  },\n  \"p-tabs-10\": {\n    name: \"p-tabs-10\",\n    description: \"Tabs with count badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\",\"badge\"],\n    meta: undefined,\n  },\n  \"p-tabs-11\": {\n    name: \"p-tabs-11\",\n    description: \"Vertical tabs with underline and icon before name\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"},\n  },\n  \"p-tabs-12\": {\n    name: \"p-tabs-12\",\n    description: \"Tabs with icon only and count badge\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/badge\",\"@coss/tabs\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\",\"badge\"],\n    meta: undefined,\n  },\n  \"p-tabs-13\": {\n    name: \"p-tabs-13\",\n    description: \"Tabs with icon only and grouped tooltips\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/tabs\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-tabs-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tabs-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tabs\",\"tooltip\"],\n    meta: undefined,\n  },\n  \"p-textarea-1\": {\n    name: \"p-textarea-1\",\n    description: \"Basic textarea\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-2\": {\n    name: \"p-textarea-2\",\n    description: \"Small textarea\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-3\": {\n    name: \"p-textarea-3\",\n    description: \"Large textarea\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-4\": {\n    name: \"p-textarea-4\",\n    description: \"Disabled textarea\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-5\": {\n    name: \"p-textarea-5\",\n    description: \"Textarea with label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-6\": {\n    name: \"p-textarea-6\",\n    description: \"Textarea in form\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/field\",\"@coss/form\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-7\": {\n    name: \"p-textarea-7\",\n    description: \"Textarea with label and required indicator\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"label\",\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-8\": {\n    name: \"p-textarea-8\",\n    description: \"Textarea with optional label\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/label\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"label\",\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-9\": {\n    name: \"p-textarea-9\",\n    description: \"Textarea with custom border and background\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-10\": {\n    name: \"p-textarea-10\",\n    description: \"Read-only textarea\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-10.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-10.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-11\": {\n    name: \"p-textarea-11\",\n    description: \"Textarea with characters remaining counter\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-11.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-11.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-12\": {\n    name: \"p-textarea-12\",\n    description: \"Textarea field with required indicator\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/field\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-12.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-12.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"field\",\"label\",\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-13\": {\n    name: \"p-textarea-13\",\n    description: \"Shorter textarea with fixed height\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-13.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-13.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-14\": {\n    name: \"p-textarea-14\",\n    description: \"Textarea with button aligned right\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-14.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-14.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-textarea-15\": {\n    name: \"p-textarea-15\",\n    description: \"Textarea with button aligned left\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/textarea\"],\n    files: [{\n      path: \"registry/default/particles/p-textarea-15.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-textarea-15.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"button\",\"textarea\"],\n    meta: {\"className\":\"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"},\n  },\n  \"p-toast-1\": {\n    name: \"p-toast-1\",\n    description: \"Basic toast\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\"],\n    meta: undefined,\n  },\n  \"p-toast-2\": {\n    name: \"p-toast-2\",\n    description: \"Toast with status\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\"],\n    meta: undefined,\n  },\n  \"p-toast-3\": {\n    name: \"p-toast-3\",\n    description: \"Loading toast\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\"],\n    meta: undefined,\n  },\n  \"p-toast-4\": {\n    name: \"p-toast-4\",\n    description: \"Toast with action\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\"],\n    meta: undefined,\n  },\n  \"p-toast-5\": {\n    name: \"p-toast-5\",\n    description: \"Promise toast\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\"],\n    meta: undefined,\n  },\n  \"p-toast-6\": {\n    name: \"p-toast-6\",\n    description: \"Toast with varying heights\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\"],\n    meta: undefined,\n  },\n  \"p-toast-7\": {\n    name: \"p-toast-7\",\n    description: \"Anchored toast with tooltip style\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/toast\",\"@coss/tooltip\",\"@coss/use-copy-to-clipboard\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\"],\n    meta: undefined,\n  },\n  \"p-toast-8\": {\n    name: \"p-toast-8\",\n    description: \"Anchored toast\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/spinner\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\"],\n    meta: undefined,\n  },\n  \"p-toast-9\": {\n    name: \"p-toast-9\",\n    description: \"Promise toast with cancel action\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toast-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toast-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toast\",\"button\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-1\": {\n    name: \"p-toggle-group-1\",\n    description: \"Basic toggle group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-2\": {\n    name: \"p-toggle-group-2\",\n    description: \"Small toggle group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-3\": {\n    name: \"p-toggle-group-3\",\n    description: \"Large toggle group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-4\": {\n    name: \"p-toggle-group-4\",\n    description: \"Toggle group with outline\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-5\": {\n    name: \"p-toggle-group-5\",\n    description: \"Vertical toggle group with outline\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-6\": {\n    name: \"p-toggle-group-6\",\n    description: \"Disabled toggle group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-7\": {\n    name: \"p-toggle-group-7\",\n    description: \"Toggle group with disabled item\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-8\": {\n    name: \"p-toggle-group-8\",\n    description: \"Multiple selection toggle group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-group-9\": {\n    name: \"p-toggle-group-9\",\n    description: \"Toggle group with tooltips\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-group-9.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-group-9.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"toggle group\"],\n    meta: undefined,\n  },\n  \"p-toggle-1\": {\n    name: \"p-toggle-1\",\n    description: \"Basic toggle\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\"],\n    meta: undefined,\n  },\n  \"p-toggle-2\": {\n    name: \"p-toggle-2\",\n    description: \"Toggle with outline\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\"],\n    meta: undefined,\n  },\n  \"p-toggle-3\": {\n    name: \"p-toggle-3\",\n    description: \"Toggle with icon\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\"],\n    meta: undefined,\n  },\n  \"p-toggle-4\": {\n    name: \"p-toggle-4\",\n    description: \"Small toggle\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\"],\n    meta: undefined,\n  },\n  \"p-toggle-5\": {\n    name: \"p-toggle-5\",\n    description: \"Large toggle\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-5.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-5.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\"],\n    meta: undefined,\n  },\n  \"p-toggle-6\": {\n    name: \"p-toggle-6\",\n    description: \"Disabled toggle\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-6.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-6.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\"],\n    meta: undefined,\n  },\n  \"p-toggle-7\": {\n    name: \"p-toggle-7\",\n    description: \"Toggle icon group\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-7.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-7.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\"],\n    meta: undefined,\n  },\n  \"p-toggle-8\": {\n    name: \"p-toggle-8\",\n    description: \"Bookmark toggle with tooltip and success toast\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle\",\"@coss/tooltip\",\"@coss/toast\"],\n    files: [{\n      path: \"registry/default/particles/p-toggle-8.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toggle-8.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toggle\",\"tooltip\",\"toast\"],\n    meta: undefined,\n  },\n  \"p-toolbar-1\": {\n    name: \"p-toolbar-1\",\n    description: \"Toolbar with toggles, buttons, and select\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/select\",\"@coss/toggle-group\",\"@coss/toolbar\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-toolbar-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-toolbar-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"toolbar\"],\n    meta: undefined,\n  },\n  \"p-tooltip-1\": {\n    name: \"p-tooltip-1\",\n    description: \"Basic tooltip\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-tooltip-1.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tooltip-1.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tooltip\"],\n    meta: undefined,\n  },\n  \"p-tooltip-2\": {\n    name: \"p-tooltip-2\",\n    description: \"Grouped tooltips\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-tooltip-2.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tooltip-2.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tooltip\"],\n    meta: undefined,\n  },\n  \"p-tooltip-3\": {\n    name: \"p-tooltip-3\",\n    description: \"Toggle group animated tooltip\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/toggle-group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-tooltip-3.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tooltip-3.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tooltip\"],\n    meta: undefined,\n  },\n  \"p-tooltip-4\": {\n    name: \"p-tooltip-4\",\n    description: \"Vertical group with animated tooltip\",\n    type: \"registry:block\",\n    registryDependencies: [\"@coss/button\",\"@coss/group\",\"@coss/tooltip\"],\n    files: [{\n      path: \"registry/default/particles/p-tooltip-4.tsx\",\n      type: \"registry:block\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/particles/p-tooltip-4.tsx\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: [\"tooltip\"],\n    meta: undefined,\n  },\n  \"utils\": {\n    name: \"utils\",\n    description: \"\",\n    type: \"registry:lib\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/lib/utils.ts\",\n      type: \"registry:lib\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/lib/utils.ts\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"use-render\": {\n    name: \"use-render\",\n    description: \"\",\n    type: \"registry:lib\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/base-ui/use-render.ts\",\n      type: \"registry:lib\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/base-ui/use-render.ts\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"merge-props\": {\n    name: \"merge-props\",\n    description: \"\",\n    type: \"registry:lib\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/base-ui/merge-props.ts\",\n      type: \"registry:lib\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/base-ui/merge-props.ts\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"csp-provider\": {\n    name: \"csp-provider\",\n    description: \"\",\n    type: \"registry:lib\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/base-ui/csp-provider.ts\",\n      type: \"registry:lib\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/base-ui/csp-provider.ts\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"direction-provider\": {\n    name: \"direction-provider\",\n    description: \"\",\n    type: \"registry:lib\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/base-ui/direction-provider.ts\",\n      type: \"registry:lib\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/base-ui/direction-provider.ts\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"use-media-query\": {\n    name: \"use-media-query\",\n    description: \"\",\n    type: \"registry:hook\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/hooks/use-media-query.ts\",\n      type: \"registry:hook\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/hooks/use-media-query.ts\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  \"use-copy-to-clipboard\": {\n    name: \"use-copy-to-clipboard\",\n    description: \"\",\n    type: \"registry:hook\",\n    registryDependencies: undefined,\n    files: [{\n      path: \"registry/default/hooks/use-copy-to-clipboard.ts\",\n      type: \"registry:hook\",\n      target: \"\"\n    }],\n    component: React.lazy(async () => {\n      const mod = await import(\"@/registry/default/hooks/use-copy-to-clipboard.ts\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    }),\n    categories: undefined,\n    meta: undefined,\n  },\n  }"
  },
  {
    "path": "apps/ui/registry/default/base-ui/csp-provider.ts",
    "content": "export { CSPProvider } from \"@base-ui/react/csp-provider\";\n"
  },
  {
    "path": "apps/ui/registry/default/base-ui/direction-provider.ts",
    "content": "export {\n  DirectionProvider,\n  useDirection,\n} from \"@base-ui/react/direction-provider\";\n"
  },
  {
    "path": "apps/ui/registry/default/base-ui/merge-props.ts",
    "content": "export { mergeProps } from \"@base-ui/react/merge-props\";\n"
  },
  {
    "path": "apps/ui/registry/default/base-ui/use-render.ts",
    "content": "export { useRender } from \"@base-ui/react/use-render\";\n"
  },
  {
    "path": "apps/ui/registry/default/hooks/use-copy-to-clipboard.ts",
    "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport function useCopyToClipboard({\n  timeout = 2000,\n  onCopy,\n}: {\n  timeout?: number;\n  onCopy?: () => void;\n} = {}): { copyToClipboard: (value: string) => void; isCopied: boolean } {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null);\n\n  const copyToClipboard = (value: string): void => {\n    if (typeof window === \"undefined\" || !navigator.clipboard.writeText) {\n      return;\n    }\n\n    if (!value) return;\n\n    navigator.clipboard.writeText(value).then(() => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n      setIsCopied(true);\n\n      if (onCopy) {\n        onCopy();\n      }\n\n      if (timeout !== 0) {\n        timeoutIdRef.current = setTimeout(() => {\n          setIsCopied(false);\n          timeoutIdRef.current = null;\n        }, timeout);\n      }\n    }, console.error);\n  };\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return (): void => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n\n  return { copyToClipboard, isCopied };\n}\n"
  },
  {
    "path": "apps/ui/registry/default/hooks/use-media-query.ts",
    "content": "\"use client\";\n\nimport { useCallback, useSyncExternalStore } from \"react\";\n\nconst BREAKPOINTS = {\n  \"2xl\": 1536,\n  \"3xl\": 1600,\n  \"4xl\": 2000,\n  lg: 1024,\n  md: 800,\n  sm: 640,\n  xl: 1280,\n} as const;\n\ntype Breakpoint = keyof typeof BREAKPOINTS;\n\ntype BreakpointQuery =\n  | Breakpoint\n  | `max-${Breakpoint}`\n  | `${Breakpoint}:max-${Breakpoint}`;\n\nfunction resolveMin(value: Breakpoint | number): string {\n  const px = typeof value === \"number\" ? value : BREAKPOINTS[value];\n  return `(min-width: ${px}px)`;\n}\n\nfunction resolveMax(value: Breakpoint | number): string {\n  const px = typeof value === \"number\" ? value : BREAKPOINTS[value];\n  return `(max-width: ${px - 1}px)`;\n}\n\nfunction parseQuery(\n  query: BreakpointQuery | MediaQueryInput | (string & {}),\n): string {\n  if (typeof query !== \"string\") {\n    const parts: string[] = [];\n    if (query.min != null) parts.push(resolveMin(query.min));\n    if (query.max != null) parts.push(resolveMax(query.max));\n    if (query.pointer === \"coarse\") parts.push(\"(pointer: coarse)\");\n    if (query.pointer === \"fine\") parts.push(\"(pointer: fine)\");\n    if (parts.length === 0) return \"(min-width: 0px)\";\n    return parts.join(\" and \");\n  }\n\n  if (query.startsWith(\"(\")) return query;\n\n  const parts: string[] = [];\n  for (const segment of query.split(\":\")) {\n    if (segment.startsWith(\"max-\")) {\n      const bp = segment.slice(4);\n      if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint));\n    } else if (segment in BREAKPOINTS) {\n      parts.push(resolveMin(segment as Breakpoint));\n    }\n  }\n\n  return parts.length > 0 ? parts.join(\" and \") : query;\n}\n\nfunction getServerSnapshot(): boolean {\n  return false;\n}\n\nexport type MediaQueryInput = {\n  min?: Breakpoint | number;\n  max?: Breakpoint | number;\n  /** Touch-like input (finger). Use \"fine\" for mouse/trackpad. */\n  pointer?: \"coarse\" | \"fine\";\n};\n\nexport function useMediaQuery(\n  query: BreakpointQuery | MediaQueryInput | (string & {}),\n): boolean {\n  const mediaQuery = parseQuery(query);\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      if (typeof window === \"undefined\") return () => {};\n      const mql = window.matchMedia(mediaQuery);\n      mql.addEventListener(\"change\", callback);\n      return () => mql.removeEventListener(\"change\", callback);\n    },\n    [mediaQuery],\n  );\n\n  const getSnapshot = useCallback(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.matchMedia(mediaQuery).matches;\n  }, [mediaQuery]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n\nexport function useIsMobile(): boolean {\n  return useMediaQuery(\"max-md\");\n}\n"
  },
  {
    "path": "apps/ui/registry/default/lib/utils.ts",
    "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-accordion-1.tsx",
    "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nexport default function Particle() {\n  const items = [\n    {\n      content:\n        \"Base UI is a library of high-quality unstyled React components for design systems and web apps.\",\n      id: \"1\",\n      title: \"What is Base UI?\",\n    },\n    {\n      content:\n        \"Head to the \\\"Quick start\\\" guide in the docs. If you've used unstyled libraries before, you'll feel at home.\",\n      id: \"2\",\n      title: \"How do I get started?\",\n    },\n    {\n      content: \"Of course! Base UI is free and open source.\",\n      id: \"3\",\n      title: \"Can I use it for my project?\",\n    },\n  ];\n\n  return (\n    <Accordion className=\"w-full\" defaultValue={[\"3\"]}>\n      {items.map((item) => (\n        <AccordionItem key={item.id} value={item.id}>\n          <AccordionTrigger>{item.title}</AccordionTrigger>\n          <AccordionPanel>{item.content}</AccordionPanel>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-accordion-2.tsx",
    "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nexport default function Particle() {\n  return (\n    <Accordion className=\"w-full\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>What is Base UI?</AccordionTrigger>\n        <AccordionPanel>\n          Base UI is a library of high-quality unstyled React components for\n          design systems and web apps.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>How do I get started?</AccordionTrigger>\n        <AccordionPanel>\n          Head to the \"Quick start\" guide in the docs. If you've used unstyled\n          libraries before, you'll feel at home.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Can I use it for my project?</AccordionTrigger>\n        <AccordionPanel>\n          Of course! Base UI is free and open source.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-accordion-3.tsx",
    "content": "import {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\n\nexport default function Particle() {\n  return (\n    <Accordion className=\"w-full\" multiple>\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>What is Base UI?</AccordionTrigger>\n        <AccordionPanel>\n          Base UI is a library of high-quality unstyled React components for\n          design systems and web apps.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>How do I get started?</AccordionTrigger>\n        <AccordionPanel>\n          Head to the \"Quick start\" guide in the docs. If you've used unstyled\n          libraries before, you'll feel at home.\n        </AccordionPanel>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>Can I use it for my project?</AccordionTrigger>\n        <AccordionPanel>\n          Of course! Base UI is free and open source.\n        </AccordionPanel>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-accordion-4.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionPanel,\n  AccordionTrigger,\n} from \"@/registry/default/ui/accordion\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [value, setValue] = useState<string[]>([]);\n\n  return (\n    <div className=\"flex w-full flex-col gap-4\">\n      <Accordion className=\"w-full\" onValueChange={setValue} value={value}>\n        <AccordionItem value=\"item-1\">\n          <AccordionTrigger>What is Base UI?</AccordionTrigger>\n          <AccordionPanel>\n            Base UI is a library of high-quality unstyled React components for\n            design systems and web apps.\n          </AccordionPanel>\n        </AccordionItem>\n        <AccordionItem value=\"item-2\">\n          <AccordionTrigger>How do I get started?</AccordionTrigger>\n          <AccordionPanel>\n            Head to the \"Quick start\" guide in the docs. If you've used unstyled\n            libraries before, you'll feel at home.\n          </AccordionPanel>\n        </AccordionItem>\n        <AccordionItem value=\"item-3\">\n          <AccordionTrigger>Can I use it for my project?</AccordionTrigger>\n          <AccordionPanel>\n            Of course! Base UI is free and open source.\n          </AccordionPanel>\n        </AccordionItem>\n      </Accordion>\n\n      <div className=\"flex flex-col items-start gap-4\">\n        <Button\n          onClick={() => setValue([\"item-1\", \"item-2\"])}\n          variant=\"outline\"\n        >\n          Open First Two\n        </Button>\n        <p className=\"text-muted-foreground text-sm\">\n          Open items: {value.length > 0 ? value.join(\", \") : \"None\"}\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-1.tsx",
    "content": "import {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\";\n\nexport default function Particle() {\n  return (\n    <Alert>\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        <p>Describe what can be done about it here.</p>\n      </AlertDescription>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-2.tsx",
    "content": "import { InfoIcon } from \"lucide-react\";\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\";\n\nexport default function Particle() {\n  return (\n    <Alert>\n      <InfoIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-3.tsx",
    "content": "import { InfoIcon } from \"lucide-react\";\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Alert>\n      <InfoIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n      <AlertAction>\n        <Button size=\"xs\" variant=\"ghost\">\n          Dismiss\n        </Button>\n        <Button size=\"xs\">Ok</Button>\n      </AlertAction>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-4.tsx",
    "content": "import { InfoIcon } from \"lucide-react\";\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\";\n\nexport default function Particle() {\n  return (\n    <Alert variant=\"info\">\n      <InfoIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-5.tsx",
    "content": "import { CircleCheckIcon } from \"lucide-react\";\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\";\n\nexport default function Particle() {\n  return (\n    <Alert variant=\"success\">\n      <CircleCheckIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-6.tsx",
    "content": "import { TriangleAlertIcon } from \"lucide-react\";\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\";\n\nexport default function Particle() {\n  return (\n    <Alert variant=\"warning\">\n      <TriangleAlertIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-7.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/default/ui/alert\";\n\nexport default function Particle() {\n  return (\n    <Alert variant=\"error\">\n      <CircleAlertIcon />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        Describe what can be done about it here.\n      </AlertDescription>\n    </Alert>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-dialog-1.tsx",
    "content": "import {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger render={<Button variant=\"destructive-outline\" />}>\n        Delete Account\n      </AlertDialogTrigger>\n      <AlertDialogPopup>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogClose render={<Button variant=\"ghost\" />}>\n            Cancel\n          </AlertDialogClose>\n          <AlertDialogClose render={<Button variant=\"destructive\" />}>\n            Delete Account\n          </AlertDialogClose>\n        </AlertDialogFooter>\n      </AlertDialogPopup>\n    </AlertDialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-alert-dialog-2.tsx",
    "content": "import {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger render={<Button variant=\"destructive-outline\" />}>\n        Delete Account\n      </AlertDialogTrigger>\n      <AlertDialogPopup>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your\n            account and remove your data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter variant=\"bare\">\n          <AlertDialogClose render={<Button variant=\"ghost\" />}>\n            Cancel\n          </AlertDialogClose>\n          <AlertDialogClose render={<Button variant=\"destructive\" />}>\n            Delete Account\n          </AlertDialogClose>\n        </AlertDialogFooter>\n      </AlertDialogPopup>\n    </AlertDialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-1.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-10.tsx",
    "content": "\"use client\";\n\nimport { Fragment } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\n// Grouped items demo\ntype Tag = { id: string; label: string; group: \"Status\" | \"Priority\" | \"Team\" };\ntype TagGroup = { value: string; items: Tag[] };\n\nconst tagsData: Tag[] = [\n  // Status\n  { group: \"Status\", id: \"s-open\", label: \"Open\" },\n  { group: \"Status\", id: \"s-in-progress\", label: \"In progress\" },\n  { group: \"Status\", id: \"s-blocked\", label: \"Blocked\" },\n  { group: \"Status\", id: \"s-resolved\", label: \"Resolved\" },\n  { group: \"Status\", id: \"s-closed\", label: \"Closed\" },\n  // Priority\n  { group: \"Priority\", id: \"p-low\", label: \"Low\" },\n  { group: \"Priority\", id: \"p-medium\", label: \"Medium\" },\n  { group: \"Priority\", id: \"p-high\", label: \"High\" },\n  { group: \"Priority\", id: \"p-urgent\", label: \"Urgent\" },\n  // Team\n  { group: \"Team\", id: \"t-design\", label: \"Design\" },\n  { group: \"Team\", id: \"t-frontend\", label: \"Frontend\" },\n  { group: \"Team\", id: \"t-backend\", label: \"Backend\" },\n  { group: \"Team\", id: \"t-devops\", label: \"DevOps\" },\n  { group: \"Team\", id: \"t-qa\", label: \"QA\" },\n  { group: \"Team\", id: \"t-mobile\", label: \"Mobile\" },\n  { group: \"Team\", id: \"t-data\", label: \"Data\" },\n  { group: \"Team\", id: \"t-security\", label: \"Security\" },\n  { group: \"Team\", id: \"t-platform\", label: \"Platform\" },\n  { group: \"Team\", id: \"t-infra\", label: \"Infrastructure\" },\n  { group: \"Team\", id: \"t-product\", label: \"Product\" },\n  { group: \"Team\", id: \"t-marketing\", label: \"Marketing\" },\n  { group: \"Team\", id: \"t-sales\", label: \"Sales\" },\n  { group: \"Team\", id: \"t-support\", label: \"Support\" },\n  { group: \"Team\", id: \"t-research\", label: \"Research\" },\n  { group: \"Team\", id: \"t-content\", label: \"Content\" },\n  { group: \"Team\", id: \"t-analytics\", label: \"Analytics\" },\n  { group: \"Team\", id: \"t-operations\", label: \"Operations\" },\n  { group: \"Team\", id: \"t-finance\", label: \"Finance\" },\n  { group: \"Team\", id: \"t-hr\", label: \"HR\" },\n  { group: \"Team\", id: \"t-legal\", label: \"Legal\" },\n  { group: \"Team\", id: \"t-growth\", label: \"Growth\" },\n  { group: \"Team\", id: \"t-partner\", label: \"Partner\" },\n  { group: \"Team\", id: \"t-community\", label: \"Community\" },\n  { group: \"Team\", id: \"t-docs\", label: \"Docs\" },\n  { group: \"Team\", id: \"t-l10n\", label: \"Localization\" },\n  { group: \"Team\", id: \"t-a11y\", label: \"Accessibility\" },\n  { group: \"Team\", id: \"t-sre\", label: \"SRE\" },\n  { group: \"Team\", id: \"t-release\", label: \"Release\" },\n  { group: \"Team\", id: \"t-architecture\", label: \"Architecture\" },\n  { group: \"Team\", id: \"t-ux\", label: \"UX\" },\n  { group: \"Team\", id: \"t-ui\", label: \"UI\" },\n  { group: \"Team\", id: \"t-management\", label: \"Management\" },\n];\n\nfunction groupTags(tags: Tag[]): TagGroup[] {\n  const groups: Record<string, Tag[]> = {};\n  for (const tag of tags) {\n    if (!groups[tag.group]) {\n      groups[tag.group] = [];\n    }\n    groups[tag.group]?.push(tag);\n  }\n\n  const order: Array<TagGroup[\"value\"]> = [\"Status\", \"Priority\", \"Team\"];\n  return order.map((value) => ({ items: groups[value] ?? [], value }));\n}\n\nconst groupedTags: TagGroup[] = groupTags(tagsData);\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={groupedTags}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <AutocompleteInput\n          aria-label=\"Search tags\"\n          placeholder=\"e.g. feature\"\n        />\n      </div>\n      <AutocompletePopup>\n        <AutocompleteEmpty>No tags found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(group: TagGroup) => (\n            <Fragment key={group.value}>\n              <AutocompleteGroup items={group.items}>\n                <AutocompleteGroupLabel>{group.value}</AutocompleteGroupLabel>\n                <AutocompleteCollection>\n                  {(tag: Tag) => (\n                    <AutocompleteItem key={tag.id} value={tag}>\n                      {tag.label}\n                    </AutocompleteItem>\n                  )}\n                </AutocompleteCollection>\n              </AutocompleteGroup>\n              {group.value !== \"Team\" && <AutocompleteSeparator />}\n            </Fragment>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-11.tsx",
    "content": "\"use client\";\n\nimport { useMemo, useState } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteStatus,\n  useAutocompleteFilter,\n} from \"@/registry/default/ui/autocomplete\";\n\n// Limit results demo\nconst limit = 7;\ntype SimpleTag = { id: string; value: string };\nconst manyTags: SimpleTag[] = [\n  { id: \"lang-js\", value: \"JavaScript\" },\n  { id: \"lang-ts\", value: \"TypeScript\" },\n  { id: \"lang-py\", value: \"Python\" },\n  { id: \"lang-java\", value: \"Java\" },\n  { id: \"lang-csharp\", value: \"C#\" },\n  { id: \"lang-cpp\", value: \"C++\" },\n  { id: \"lang-c\", value: \"C\" },\n  { id: \"lang-go\", value: \"Go\" },\n  { id: \"lang-rust\", value: \"Rust\" },\n  { id: \"lang-rb\", value: \"Ruby\" },\n  { id: \"lang-php\", value: \"PHP\" },\n  { id: \"lang-swift\", value: \"Swift\" },\n  { id: \"lang-kotlin\", value: \"Kotlin\" },\n  { id: \"lang-scala\", value: \"Scala\" },\n  { id: \"lang-elixir\", value: \"Elixir\" },\n  { id: \"lang-hs\", value: \"Haskell\" },\n  { id: \"lang-dart\", value: \"Dart\" },\n  { id: \"lang-objc\", value: \"Objective-C\" },\n  { id: \"lang-julia\", value: \"Julia\" },\n  { id: \"lang-r\", value: \"R\" },\n  { id: \"lang-perl\", value: \"Perl\" },\n  { id: \"lang-lua\", value: \"Lua\" },\n  { id: \"lang-ocaml\", value: \"OCaml\" },\n  { id: \"lang-fsharp\", value: \"F#\" },\n];\n\nexport default function Particle() {\n  const [value, setValue] = useState(\"\");\n  const { contains } = useAutocompleteFilter({ sensitivity: \"base\" });\n\n  const totalMatches = useMemo(() => {\n    const trimmed = value.trim();\n    if (!trimmed) return manyTags.length;\n    return manyTags.filter((t) => contains(t.value, trimmed)).length;\n  }, [value, contains]);\n\n  const moreCount = Math.max(0, totalMatches - limit);\n\n  return (\n    <Autocomplete\n      items={manyTags}\n      limit={limit}\n      onValueChange={setValue}\n      value={value}\n    >\n      <AutocompleteInput placeholder=\"e.g. feature\" />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No tags found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(tag: SimpleTag) => (\n            <AutocompleteItem key={tag.id} value={tag}>\n              {tag.value}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n        {moreCount > 0 && (\n          <AutocompleteStatus>\n            +{moreCount} more (keep typing to narrow down)\n          </AutocompleteStatus>\n        )}\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-12.tsx",
    "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { useEffect, useState } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n  AutocompleteStatus,\n  useAutocompleteFilter,\n} from \"@/registry/default/ui/autocomplete\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\ntype Movie = { id: string; title: string; year: number };\nconst top100Movies: Movie[] = [\n  { id: \"1\", title: \"The Shawshank Redemption\", year: 1994 },\n  { id: \"2\", title: \"The Godfather\", year: 1972 },\n  { id: \"3\", title: \"The Dark Knight\", year: 2008 },\n  { id: \"4\", title: \"The Godfather Part II\", year: 1974 },\n  { id: \"5\", title: \"12 Angry Men\", year: 1957 },\n  { id: \"8\", title: \"Pulp Fiction\", year: 1994 },\n  { id: \"11\", title: \"Forrest Gump\", year: 1994 },\n  { id: \"14\", title: \"Inception\", year: 2010 },\n];\n\nasync function searchMovies(\n  query: string,\n  filter: (item: string, query: string) => boolean,\n): Promise<Movie[]> {\n  await new Promise((resolve) =>\n    setTimeout(resolve, Math.random() * 500 + 100),\n  );\n  if (Math.random() < 0.01 || query === \"will_error\") {\n    throw new Error(\"Network error\");\n  }\n  return top100Movies.filter(\n    (movie) =>\n      filter(movie.title, query) || filter(movie.year.toString(), query),\n  );\n}\n\nexport default function Particle() {\n  const [searchValue, setSearchValue] = useState(\"\");\n  const [isLoading, setIsLoading] = useState(false);\n  const [searchResults, setSearchResults] = useState<Movie[]>([]);\n  const [error, setError] = useState<string | null>(null);\n\n  const { contains } = useAutocompleteFilter({ sensitivity: \"base\" });\n\n  useEffect(() => {\n    if (!searchValue) {\n      setSearchResults([]);\n      setIsLoading(false);\n      return;\n    }\n\n    setIsLoading(true);\n    setError(null);\n    let ignore = false;\n\n    const timeoutId = setTimeout(async () => {\n      try {\n        const results = await searchMovies(searchValue, contains);\n        if (!ignore) setSearchResults(results);\n      } catch {\n        if (!ignore) {\n          setError(\"Failed to fetch movies. Please try again.\");\n          setSearchResults([]);\n        }\n      } finally {\n        if (!ignore) setIsLoading(false);\n      }\n    }, 300);\n\n    return () => {\n      clearTimeout(timeoutId);\n      ignore = true;\n    };\n  }, [searchValue, contains]);\n\n  let status: ReactNode = `${searchResults.length} result${searchResults.length === 1 ? \"\" : \"s\"} found`;\n  if (isLoading) {\n    status = (\n      <span className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n        Searching...\n        <Spinner className=\"size-4.5 sm:size-4\" />\n      </span>\n    );\n  } else if (error) {\n    status = (\n      <span className=\"font-normal text-destructive text-sm\">{error}</span>\n    );\n  } else if (searchResults.length === 0 && searchValue) {\n    status = (\n      <span className=\"font-normal text-muted-foreground text-sm\">\n        Movie or year \"{searchValue}\" does not exist in the Top 100 IMDb movies\n      </span>\n    );\n  }\n\n  const shouldRenderPopup = searchValue !== \"\";\n\n  return (\n    <Autocomplete\n      filter={null}\n      items={searchResults}\n      itemToStringValue={(item: unknown) => (item as Movie).title}\n      onValueChange={setSearchValue}\n      value={searchValue}\n    >\n      <AutocompleteInput placeholder=\"e.g. Pulp Fiction or 1994\" />\n      {shouldRenderPopup && (\n        <AutocompletePopup aria-busy={isLoading || undefined}>\n          <AutocompleteStatus className=\"text-muted-foreground\">\n            {status}\n          </AutocompleteStatus>\n          <AutocompleteList>\n            {(movie: Movie) => (\n              <AutocompleteItem key={movie.id} value={movie}>\n                <div className=\"flex w-full flex-col gap-1\">\n                  <div className=\"font-medium\">{movie.title}</div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    {movie.year}\n                  </div>\n                </div>\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompletePopup>\n      )}\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-13.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    const selectedItem = formData.get(\"item\");\n    // Base UI extracts the 'label' property from objects, so we need to find the corresponding value\n    const itemValue =\n      items.find((item) => item.label === selectedItem)?.value || selectedItem;\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Favorite item: ${itemValue || \"\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-64\" onSubmit={onSubmit}>\n      <Field name=\"item\">\n        <FieldLabel>Favorite item</FieldLabel>\n        <Autocomplete items={items} required>\n          <AutocompleteInput placeholder=\"Search items…\" />\n          <AutocompletePopup>\n            <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n            <AutocompleteList>\n              {(item) => (\n                <AutocompleteItem key={item.value} value={item}>\n                  {item.label}\n                </AutocompleteItem>\n              )}\n            </AutocompleteList>\n          </AutocompletePopup>\n        </Autocomplete>\n        <FieldError>Please select a item.</FieldError>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-14.tsx",
    "content": "\"use client\";\n\nimport { SearchIcon } from \"lucide-react\";\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n        startAddon={<SearchIcon />}\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-15.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        className=\"[--radius-lg:9999px] [--radius:9999px]\"\n        placeholder=\"Search items...\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-2.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete disabled items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-3.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n        size=\"sm\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-4.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n        size=\"lg\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-5.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Autocomplete items={items}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <Label htmlFor={id}>Fruits</Label>\n        <AutocompleteInput\n          aria-label=\"Search items\"\n          id={id}\n          placeholder=\"Search items…\"\n        />\n      </div>\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-6.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={items} mode=\"both\">\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-7.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete autoHighlight items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-8.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n        showClear\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-autocomplete-9.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Autocomplete items={items}>\n      <AutocompleteInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n        showClear\n        showTrigger\n      />\n      <AutocompletePopup>\n        <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n        <AutocompleteList>\n          {(item) => (\n            <AutocompleteItem key={item.value} value={item}>\n              {item.label}\n            </AutocompleteItem>\n          )}\n        </AutocompleteList>\n      </AutocompletePopup>\n    </Autocomplete>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-1.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <Avatar>\n      <AvatarImage\n        alt=\"Luke Tracy\"\n        src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n      />\n      <AvatarFallback>LT</AvatarFallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-10.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return (\n    <div className=\"relative\">\n      <Avatar>\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback>LT</AvatarFallback>\n      </Avatar>\n      <Badge\n        className=\"absolute -end-1 -top-1 rounded-full outline-2 outline-background outline-solid\"\n        size=\"sm\"\n      >\n        6\n      </Badge>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-11.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return (\n    <div className=\"relative\">\n      <Avatar className=\"rounded-lg\">\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback className=\"rounded-lg\">LT</AvatarFallback>\n      </Avatar>\n      <Badge\n        className=\"absolute -end-1.5 -top-1.5 rounded-full outline-2 outline-background outline-solid\"\n        size=\"sm\"\n      >\n        6\n      </Badge>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-12.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"relative\">\n      <Avatar>\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback>LT</AvatarFallback>\n      </Avatar>\n      <span className=\"absolute -end-1.5 -top-1.5\">\n        <span className=\"sr-only\">Verified</span>\n        <svg\n          aria-hidden=\"true\"\n          height=\"20\"\n          viewBox=\"0 0 24 24\"\n          width=\"20\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            className=\"fill-background\"\n            d=\"M3.046 8.277A4.402 4.402 0 0 1 8.303 3.03a4.4 4.4 0 0 1 7.411 0 4.397 4.397 0 0 1 5.19 3.068c.207.713.23 1.466.067 2.19a4.4 4.4 0 0 1 0 7.415 4.403 4.403 0 0 1-3.06 5.187 4.398 4.398 0 0 1-2.186.072 4.398 4.398 0 0 1-7.422 0 4.398 4.398 0 0 1-5.257-5.248 4.4 4.4 0 0 1 0-7.437Z\"\n          />\n          <path\n            className=\"fill-primary\"\n            d=\"M4.674 8.954a3.602 3.602 0 0 1 4.301-4.293 3.6 3.6 0 0 1 6.064 0 3.598 3.598 0 0 1 4.3 4.302 3.6 3.6 0 0 1 0 6.067 3.6 3.6 0 0 1-4.29 4.302 3.6 3.6 0 0 1-6.074 0 3.598 3.598 0 0 1-4.3-4.293 3.6 3.6 0 0 1 0-6.085Z\"\n          />\n          <path\n            className=\"fill-background\"\n            d=\"M15.707 9.293a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z\"\n          />\n        </svg>\n      </span>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-13.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex -space-x-1.5\">\n      <Avatar className=\"size-6 ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U1\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\"\n        />\n        <AvatarFallback>U1</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-6 ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U2\"\n          src=\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\"\n        />\n        <AvatarFallback>U2</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-6 ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U3\"\n          src=\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\"\n        />\n        <AvatarFallback>U3</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-14.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex -space-x-3\">\n      <Avatar className=\"size-12 ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U1\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80\"\n        />\n        <AvatarFallback>U1</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-12 ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U2\"\n          src=\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=144&h=144&dpr=2&q=80\"\n        />\n        <AvatarFallback>U2</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-12 ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U3\"\n          src=\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=144&h=144&dpr=2&q=80\"\n        />\n        <AvatarFallback>U3</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-2.tsx",
    "content": "import { Avatar, AvatarFallback } from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <Avatar>\n      <AvatarFallback>LT</AvatarFallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-3.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Avatar>\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-12\">\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"size-16\">\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=192&h=192&dpr=2&q=80\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-4.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Avatar className=\"rounded-md\">\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-xl\">\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-full\">\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback>AV</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-5.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex -space-x-[0.6rem]\">\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U1\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80\"\n        />\n        <AvatarFallback>U1</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U2\"\n          src=\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80\"\n        />\n        <AvatarFallback>U2</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"ring-2 ring-background\">\n        <AvatarImage\n          alt=\"U3\"\n          src=\"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80\"\n        />\n        <AvatarFallback>U3</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-6.tsx",
    "content": "import { UserIcon } from \"lucide-react\";\nimport { Avatar, AvatarFallback } from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <Avatar>\n      <AvatarFallback>\n        <UserIcon className=\"size-4\" />\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-7.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"relative\">\n      <Avatar>\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback>LT</AvatarFallback>\n      </Avatar>\n      <span\n        aria-hidden=\"true\"\n        className=\"absolute end-0 bottom-0 size-2 rounded-full bg-emerald-500 outline-2 outline-background\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-8.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"relative\">\n      <Avatar>\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback>LT</AvatarFallback>\n      </Avatar>\n      <span\n        aria-hidden=\"true\"\n        className=\"absolute end-0 bottom-0 size-2 rounded-full bg-muted-foreground outline-2 outline-background\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-avatar-9.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\n\nexport default function Particle() {\n  return (\n    <div className=\"relative\">\n      <Avatar className=\"rounded-lg\">\n        <AvatarImage\n          alt=\"User\"\n          src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback className=\"rounded-lg\">LT</AvatarFallback>\n      </Avatar>\n      <span\n        aria-hidden=\"true\"\n        className=\"absolute -end-0.5 -top-0.5 size-2 rounded-full bg-emerald-500 outline-2 outline-background\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-1.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge>Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-10.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge size=\"lg\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-11.tsx",
    "content": "import { CheckIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return (\n    <Badge variant=\"outline\">\n      <CheckIcon aria-hidden=\"true\" />\n      Verified\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-12.tsx",
    "content": "import Link from \"next/link\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge render={<Link href=\"/\" />}>Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-13.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge className=\"rounded-full\">7</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-14.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge className=\"rounded-full\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-15.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return (\n    <Badge variant=\"outline\">\n      Notifications\n      <span className=\"ms-1 font-semibold text-primary\">5</span>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-16.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return (\n    <Badge variant=\"outline\">\n      <span\n        aria-hidden=\"true\"\n        className=\"size-1.5 rounded-full bg-emerald-500\"\n      />\n      Paid\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-17.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return (\n    <Badge variant=\"outline\">\n      <span aria-hidden=\"true\" className=\"size-1.5 rounded-full bg-amber-500\" />\n      Pending\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-18.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return (\n    <Badge variant=\"outline\">\n      <span aria-hidden=\"true\" className=\"size-1.5 rounded-full bg-red-500\" />\n      Failed\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-19.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { useId } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Badge className=\"relative outline-none has-focus-visible:border-ring has-data-[state=unchecked]:bg-muted has-data-[state=unchecked]:text-muted-foreground has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50\">\n      <Checkbox\n        className=\"peer sr-only after:absolute after:inset-0\"\n        defaultChecked\n        id={id}\n      />\n      <CheckIcon\n        aria-hidden=\"true\"\n        className=\"hidden peer-data-[state=checked]:block\"\n      />\n      <label\n        className=\"cursor-pointer select-none after:absolute after:inset-0\"\n        htmlFor={id}\n      >\n        Selectable\n      </label>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-2.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge variant=\"outline\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-20.tsx",
    "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  const [isActive, setIsActive] = useState(true);\n\n  if (!isActive) return null;\n\n  return (\n    <Badge className=\"gap-0\">\n      Removable\n      <button\n        className=\"-my-px -ms-px -me-1.5 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 text-primary-foreground/60 outline-none transition-[color,box-shadow] hover:text-primary-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        onClick={() => setIsActive(false)}\n        type=\"button\"\n      >\n        <XIcon aria-hidden=\"true\" />\n      </button>\n    </Badge>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-3.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge variant=\"secondary\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-4.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge variant=\"destructive\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-5.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge variant=\"info\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-6.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge variant=\"success\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-7.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge variant=\"warning\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-8.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge variant=\"error\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-badge-9.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\n\nexport default function Particle() {\n  return <Badge size=\"sm\">Badge</Badge>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-breadcrumb-1.tsx",
    "content": "import Link from \"next/link\";\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/\" />}>Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <Menu>\n            <MenuTrigger\n              render={\n                <Button\n                  className=\"-m-1.5 text-muted-foreground\"\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            >\n              <BreadcrumbEllipsis />\n            </MenuTrigger>\n            <MenuPopup align=\"start\">\n              <MenuItem render={<Link href=\"/docs\" />}>Docs</MenuItem>\n              <MenuItem render={<Link href=\"/particles\" />}>Particles</MenuItem>\n            </MenuPopup>\n          </Menu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/docs/\" />}>\n            Components\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-breadcrumb-2.tsx",
    "content": "import Link from \"next/link\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Particle() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/\" />}>Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/docs/\" />}>\n            Components\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> / </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-breadcrumb-3.tsx",
    "content": "import { HomeIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Particle() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink aria-label=\"Home\" render={<Link href=\"/\" />}>\n            <HomeIcon aria-hidden=\"true\" className=\"size-4\" />\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/docs/\" />}>\n            Components\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-breadcrumb-4.tsx",
    "content": "import { FoldersIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/\" />}>Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <Menu>\n            <MenuTrigger\n              aria-label=\"More pages\"\n              render={\n                <Button\n                  className=\"-m-1.5 text-muted-foreground\"\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                />\n              }\n            >\n              <FoldersIcon aria-hidden=\"true\" />\n            </MenuTrigger>\n            <MenuPopup align=\"start\">\n              <MenuItem render={<Link href=\"/docs\" />}>Docs</MenuItem>\n              <MenuItem render={<Link href=\"/particles\" />}>Particles</MenuItem>\n            </MenuPopup>\n          </Menu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/docs/\" />}>\n            Components\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-breadcrumb-5.tsx",
    "content": "import { ComponentIcon, HomeIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Particle() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink\n            className=\"inline-flex items-center gap-1.5\"\n            render={<Link href=\"/\" />}\n          >\n            <HomeIcon aria-hidden=\"true\" className=\"size-4\" />\n            Home\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink\n            className=\"inline-flex items-center gap-1.5\"\n            render={<Link href=\"/docs/\" />}\n          >\n            <ComponentIcon aria-hidden=\"true\" className=\"size-4\" />\n            Components\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-breadcrumb-6.tsx",
    "content": "import { HomeIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\n\nexport default function Particle() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink aria-label=\"Home\" render={<Link href=\"/\" />}>\n            <HomeIcon aria-hidden=\"true\" className=\"size-4\" />\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/docs/\" />}>\n            Components\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator> · </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-breadcrumb-7.tsx",
    "content": "import { DatabaseIcon } from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Orion\", value: \"orion\" },\n  { label: \"Sigma\", value: \"sigma\" },\n  { label: \"Dorado\", value: \"dorado\" },\n];\n\nexport default function Particle() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink render={<Link href=\"/\" />}>Databases</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <Select\n            aria-label=\"Select database\"\n            defaultValue=\"orion\"\n            items={items}\n          >\n            <SelectTrigger size=\"sm\">\n              <DatabaseIcon />\n              <SelectValue />\n            </SelectTrigger>\n            <SelectPopup>\n              {items.map(({ label, value }) => (\n                <SelectItem key={value} value={value}>\n                  {label}\n                </SelectItem>\n              ))}\n            </SelectPopup>\n          </Select>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-1.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button>Button</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-10.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button size=\"lg\">Button</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-11.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button size=\"xl\">Button</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-12.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button disabled>Button</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-13.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button aria-label=\"Add\" size=\"icon\">\n      <PlusIcon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-14.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button aria-label=\"Add\" size=\"icon-sm\">\n      <PlusIcon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-15.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button aria-label=\"Add\" size=\"icon-lg\">\n      <PlusIcon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-16.tsx",
    "content": "import { DownloadIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button>\n      <DownloadIcon aria-hidden=\"true\" />\n      Download\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-17.tsx",
    "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button render={<Link href=\"/\" />}>Link</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-18.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\nexport default function Particle() {\n  return (\n    <Button disabled>\n      <Spinner />\n      Loading...\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-19.tsx",
    "content": "\"use client\";\n\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\n\n  const toggleExpand = () => {\n    setIsExpanded((prevState) => !prevState);\n  };\n\n  return (\n    <Button\n      aria-controls=\"expandable-content\"\n      aria-expanded={isExpanded}\n      className=\"gap-1\"\n      onClick={toggleExpand}\n      variant=\"ghost\" // Use this ID on the element that this button controls\n    >\n      {isExpanded ? \"Show less\" : \"Show more\"}\n      {isExpanded ? (\n        <ChevronUpIcon aria-hidden=\"true\" className=\"-me-1\" />\n      ) : (\n        <ChevronDownIcon aria-hidden=\"true\" className=\"-me-1\" />\n      )}\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-2.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button variant=\"outline\">Outline</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-20.tsx",
    "content": "import { ChevronLeftIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button variant=\"link\">\n      <ChevronLeftIcon aria-hidden=\"true\" />\n      Go back\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-21.tsx",
    "content": "import { ChevronRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button className=\"h-auto! gap-4 px-4 py-3 text-left\" variant=\"outline\">\n      <div className=\"flex flex-col gap-0.5\">\n        <h3>Talent Agency</h3>\n        <p className=\"whitespace-break-spaces font-normal text-muted-foreground\">\n          Matches for your roster\n        </p>\n      </div>\n      <ChevronRightIcon\n        aria-hidden=\"true\"\n        className=\"in-[[data-slot=button]:hover]:translate-x-0.5 transition-transform\"\n      />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-22.tsx",
    "content": "import {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <div className=\"inline-grid w-fit grid-cols-3 gap-1\">\n      <Button\n        aria-label=\"Pan camera up\"\n        className=\"col-start-2\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <ChevronUpIcon aria-hidden=\"true\" />\n      </Button>\n      <Button\n        aria-label=\"Pan camera left\"\n        className=\"col-start-1\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <ChevronLeftIcon aria-hidden=\"true\" />\n      </Button>\n      <div aria-hidden=\"true\" className=\"flex items-center justify-center\">\n        <CircleIcon className=\"size-4 opacity-80\" />\n      </div>\n      <Button aria-label=\"Pan camera right\" size=\"icon\" variant=\"outline\">\n        <ChevronRightIcon aria-hidden=\"true\" />\n      </Button>\n      <Button\n        aria-label=\"Pan camera down\"\n        className=\"col-start-2\"\n        size=\"icon\"\n        variant=\"outline\"\n      >\n        <ChevronDownIcon aria-hidden=\"true\" />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-23.tsx",
    "content": "import { ThumbsUpIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button className=\"pe-0\" variant=\"outline\">\n      <ThumbsUpIcon aria-hidden=\"true\" />\n      Like\n      <span className=\"relative ms-1 px-3 font-medium text-muted-foreground text-xs before:absolute before:inset-0 before:left-0 before:w-px before:bg-input\">\n        86\n      </span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-24.tsx",
    "content": "import {\n  RiFacebookFill,\n  RiGithubFill,\n  RiGoogleFill,\n  RiTwitterXFill,\n} from \"@remixicon/react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <div className=\"inline-flex flex-wrap gap-2\">\n      <Button aria-label=\"Login with Google\" size=\"icon\" variant=\"outline\">\n        <RiGoogleFill aria-hidden=\"true\" />\n      </Button>\n      <Button aria-label=\"Login with Facebook\" size=\"icon\" variant=\"outline\">\n        <RiFacebookFill aria-hidden=\"true\" />\n      </Button>\n      <Button aria-label=\"Login with X\" size=\"icon\" variant=\"outline\">\n        <RiTwitterXFill aria-hidden=\"true\" />\n      </Button>\n      <Button aria-label=\"Login with GitHub\" size=\"icon\" variant=\"outline\">\n        <RiGithubFill aria-hidden=\"true\" />\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-26.tsx",
    "content": "\"use client\";\n\nimport { StarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [isStarred, setIsStarred] = useState(false);\n  const count = isStarred ? 730 : 729;\n\n  return (\n    <Button onClick={() => setIsStarred(!isStarred)}>\n      <StarIcon\n        aria-hidden=\"true\"\n        className={`${isStarred ? \"fill-yellow-500 text-yellow-500\" : undefined}`}\n      />\n      <span className=\"flex items-baseline gap-2\">\n        {isStarred ? \"Starred\" : \"Star\"}\n        <span className=\"text-primary-foreground/60 text-xs\">{count}</span>\n      </span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-27.tsx",
    "content": "import { QrCodeIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\n\nexport default function Particle() {\n  return (\n    <Group>\n      <Button aria-label=\"QR code\" size=\"icon\">\n        <QrCodeIcon aria-hidden=\"true\" />\n      </Button>\n      <GroupSeparator className=\"bg-primary/72\" />\n      <Button>Sign in</Button>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-28.tsx",
    "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button className=\"rounded-full ps-1\">\n      <Avatar className=\"size-6\">\n        <AvatarImage\n          alt=\"Luke Tracy\"\n          src=\"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=128&h=128&dpr=2&q=80\"\n        />\n        <AvatarFallback>LT</AvatarFallback>\n      </Avatar>\n      @georgelucas\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-29.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button className=\"rounded-full\">Pill Button</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-3.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button variant=\"secondary\">Secondary</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-30.tsx",
    "content": "import { ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button>\n      Get Started\n      <ArrowRightIcon\n        aria-hidden=\"true\"\n        className=\"in-[[data-slot=button]:hover]:translate-x-0.5 transition-transform\"\n      />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-31.tsx",
    "content": "import { PrinterIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\n\nexport default function Particle() {\n  return (\n    <Button variant=\"outline\">\n      <PrinterIcon aria-hidden=\"true\" />\n      Print\n      <KbdGroup className=\"-me-1\">\n        <Kbd>&#8984;</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-32.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button variant=\"outline\">\n      Messages\n      <Badge className=\"-me-1\" variant=\"outline\">\n        18\n      </Badge>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-33.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Button variant=\"ghost\">Cancel</Button>\n      <Button>Save</Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-34.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <Button variant=\"outline\">\n      <span\n        aria-hidden=\"true\"\n        className=\"relative size-2 rounded-full bg-emerald-500 before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-emerald-400 before:opacity-75\"\n      />\n      Online\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-35.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(\"Text copied!\");\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <Button\n      aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n      onClick={handleCopy}\n      size=\"icon\"\n      variant=\"outline\"\n    >\n      {copied ? (\n        <CheckIcon aria-hidden=\"true\" />\n      ) : (\n        <CopyIcon aria-hidden=\"true\" />\n      )}\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-36.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(\"Text copied!\");\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <Button onClick={handleCopy} variant=\"outline\">\n      {copied ? (\n        <>\n          <CheckIcon aria-hidden=\"true\" />\n          Copied\n        </>\n      ) : (\n        <>\n          <CopyIcon aria-hidden=\"true\" />\n          Copy\n        </>\n      )}\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-37.tsx",
    "content": "\"use client\";\n\nimport { PlusIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Button\n      aria-expanded={open}\n      aria-label={open ? \"Close menu\" : \"Open menu\"}\n      className=\"rounded-full before:rounded-full\"\n      onClick={() => setOpen((prevState) => !prevState)}\n      size=\"icon\"\n      variant=\"outline\"\n    >\n      <PlusIcon\n        aria-hidden=\"true\"\n        className=\"in-[[aria-expanded=true]]:rotate-[135deg] transition-transform duration-500 ease-[cubic-bezier(0.68,-0.6,0.32,1.6)]\"\n      />\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-38.tsx",
    "content": "import { RiGithubFill, RiGoogleFill, RiTwitterXFill } from \"@remixicon/react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Button variant=\"outline\">\n        <RiGoogleFill aria-hidden=\"true\" />\n        <span className=\"flex-1\">Login with Google</span>\n      </Button>\n      <Button variant=\"outline\">\n        <RiTwitterXFill aria-hidden=\"true\" />\n        <span className=\"flex-1\">Login with X</span>\n      </Button>\n      <Button variant=\"outline\">\n        <RiGithubFill aria-hidden=\"true\" />\n        <span className=\"flex-1\">Login with GitHub</span>\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-39.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Button\n      aria-expanded={open}\n      aria-label={open ? \"Close menu\" : \"Open menu\"}\n      onClick={() => setOpen((prevState) => !prevState)}\n      size=\"icon\"\n      variant=\"outline\"\n    >\n      <svg\n        aria-hidden=\"true\"\n        className=\"pointer-events-none\"\n        fill=\"none\"\n        height={16}\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 24 24\"\n        width={16}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          className=\"origin-center in-[[data-slot=button][aria-expanded=true]]:translate-x-0 -translate-y-[7px] in-[[data-slot=button][aria-expanded=true]]:translate-y-0 in-[[data-slot=button][aria-expanded=true]]:rotate-315 transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)]\"\n          d=\"M4 12L20 12\"\n        />\n        <path\n          className=\"origin-center in-[[data-slot=button][aria-expanded=true]]:rotate-45 transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)]\"\n          d=\"M4 12H20\"\n        />\n        <path\n          className=\"origin-center in-[[data-slot=button][aria-expanded=true]]:translate-y-0 translate-y-[7px] in-[[data-slot=button][aria-expanded=true]]:rotate-135 transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)]\"\n          d=\"M4 12H20\"\n        />\n      </svg>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-4.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button variant=\"destructive\">Delete</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-40.tsx",
    "content": "\"use client\";\n\nimport { DownloadIcon, XIcon } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\nimport { toastManager } from \"@/registry/default/ui/toast\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  const [isDownloading, setIsDownloading] = useState(false);\n  const [progress, setProgress] = useState(0);\n  const abortControllerRef = useRef<AbortController | null>(null);\n  const infoToastIdRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    if (!isDownloading) return;\n\n    const interval = setInterval(() => {\n      setProgress((prev) =>\n        Math.min(99, prev + Math.round(Math.random() * 8 + 2)),\n      );\n    }, 300);\n\n    return () => clearInterval(interval);\n  }, [isDownloading]);\n\n  async function handleDownload() {\n    if (isDownloading) return;\n\n    setIsDownloading(true);\n    setProgress(0);\n    abortControllerRef.current = new AbortController();\n\n    infoToastIdRef.current = toastManager.add({\n      description: \"Your download will begin once ready.\",\n      title: \"Generating report…\",\n      type: \"info\",\n    });\n\n    try {\n      await new Promise<string>((resolve, reject) => {\n        const shouldSucceed = Math.random() > 0.2;\n        const timeoutId = setTimeout(() => {\n          if (shouldSucceed) {\n            resolve(\"Download complete\");\n          } else {\n            reject(new Error(\"Download failed\"));\n          }\n        }, 4000);\n\n        abortControllerRef.current?.signal.addEventListener(\"abort\", () => {\n          clearTimeout(timeoutId);\n          reject(new DOMException(\"Cancelled\", \"AbortError\"));\n        });\n      });\n    } catch (err) {\n      // Close info toast before showing error\n      if (infoToastIdRef.current) {\n        toastManager.close(infoToastIdRef.current);\n        infoToastIdRef.current = null;\n      }\n\n      if (err instanceof DOMException && err.name === \"AbortError\") {\n        // Cancelled\n        toastManager.add({\n          description: \"Report generation was cancelled.\",\n          title: \"Cancelled\",\n          type: \"error\",\n        });\n      } else {\n        // Other errors\n        toastManager.add({\n          description: \"Please try again later.\",\n          title: \"Failed to generate report\",\n          type: \"error\",\n        });\n      }\n    } finally {\n      setIsDownloading(false);\n      setProgress(0);\n      abortControllerRef.current = null;\n      infoToastIdRef.current = null;\n    }\n  }\n\n  function handleCancel() {\n    abortControllerRef.current?.abort();\n  }\n\n  return (\n    <TooltipProvider delay={0}>\n      {isDownloading ? (\n        <Group>\n          <GroupText\n            aria-live=\"polite\"\n            className=\"cursor-default gap-2\"\n            role=\"status\"\n          >\n            <Spinner />\n            <span\n              aria-hidden=\"true\"\n              className=\"font-medium text-foreground tabular-nums\"\n            >\n              {progress.toString().padStart(2, \"\\u2007\")}%\n            </span>\n            <span className=\"sr-only\">\n              Generating report, {progress}% complete\n            </span>\n          </GroupText>\n          <GroupSeparator />\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <Button\n                  aria-label=\"Cancel download\"\n                  onClick={handleCancel}\n                  size=\"icon\"\n                  variant=\"outline\"\n                />\n              }\n            >\n              <XIcon aria-hidden=\"true\" />\n            </TooltipTrigger>\n            <TooltipPopup>Cancel</TooltipPopup>\n          </Tooltip>\n        </Group>\n      ) : (\n        <Button onClick={handleDownload} variant=\"outline\">\n          <DownloadIcon aria-hidden=\"true\" />\n          Download\n        </Button>\n      )}\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-41.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  const [isLoading, setIsLoading] = useState(false);\n\n  const handleClick = () => {\n    setIsLoading(true);\n\n    window.setTimeout(() => {\n      setIsLoading(false);\n    }, 1000);\n  };\n\n  return (\n    <Button loading={isLoading} onClick={handleClick}>\n      Submit\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-5.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button variant=\"destructive-outline\">Delete</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-6.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button variant=\"ghost\">Ghost</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-7.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button variant=\"link\">Link</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-8.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button size=\"xs\">Button</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-button-9.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\n\nexport default function Particle() {\n  return <Button size=\"sm\">Button</Button>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-1.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n\n  return <Calendar mode=\"single\" onSelect={setDate} selected={date} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-10.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-end before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-start\",\n        day_button:\n          \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n      }}\n      mode=\"range\"\n      onSelect={setDate}\n      selected={date}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-11.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      classNames={{\n        month_caption: \"ms-0 me-[calc(var(--cell-size)*2)] justify-start\",\n        nav: \"justify-end\",\n      }}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-12.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { WeekNumberProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      components={{\n        WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n          return (\n            <th {...props}>\n              <span className=\"inline-flex size-(--cell-size) items-center justify-center\">\n                {week.weekNumber}\n              </span>\n            </th>\n          );\n        },\n      }}\n      fixedWeeks\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      showWeekNumber\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-13.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction YearDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown-years\"\n      classNames={{\n        dropdowns: \"*:flex-1 *:[span]:text-center\",\n      }}\n      components={{ Dropdown: YearDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-14.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { DropdownNavProps, DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>,\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>;\n    _e(_event);\n  };\n\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      classNames={{\n        month_caption: \"mx-0\",\n      }}\n      components={{\n        Dropdown: (props: DropdownProps) => {\n          const items =\n            props.options?.map((option) => ({\n              label: option.label,\n              value: String(option.value),\n            })) ?? [];\n\n          return (\n            <Select\n              items={items}\n              onValueChange={(value) => {\n                if (props.onChange && value !== null) {\n                  handleCalendarChange(value, props.onChange);\n                }\n              }}\n              value={String(props.value)}\n            >\n              <SelectTrigger className=\"min-w-none\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectPopup>\n            </Select>\n          );\n        },\n        DropdownNav: (props: DropdownNavProps) => {\n          return (\n            <div className=\"flex w-full items-center gap-2\">\n              {props.children}\n            </div>\n          );\n        },\n      }}\n      defaultMonth={new Date()}\n      hideNavigation\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1980, 6)}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-15.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const selectedDay = addDays(today, -28);\n  const [month, setMonth] = useState(selectedDay);\n  const [date, setDate] = useState<Date | undefined>(selectedDay);\n\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Calendar\n        mode=\"single\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={setDate}\n        selected={date}\n      />\n      <Button onClick={() => setMonth(today)} size=\"sm\" variant=\"outline\">\n        Current month\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-16.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const selectedDay = addDays(today, -28);\n  const [month, setMonth] = useState(selectedDay);\n  const [date, setDate] = useState<Date | undefined>(selectedDay);\n\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Calendar\n        mode=\"single\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={setDate}\n        selected={date}\n      />\n      <Button\n        onClick={() => {\n          setDate(today);\n          setMonth(today);\n        }}\n        size=\"sm\"\n        variant=\"outline\"\n      >\n        Today\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-17.tsx",
    "content": "\"use client\";\n\nimport { format, isValid, parse } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(() => new Date());\n  const [month, setMonth] = useState<Date>(() => new Date());\n  const [inputValue, setInputValue] = useState(() =>\n    format(new Date(), \"yyyy-MM-dd\"),\n  );\n\n  const handleDayPickerSelect = (selectedDate: Date | undefined) => {\n    if (!selectedDate) {\n      setInputValue(\"\");\n      setDate(undefined);\n    } else {\n      setDate(selectedDate);\n      setMonth(selectedDate);\n      setInputValue(format(selectedDate, \"yyyy-MM-dd\"));\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    setInputValue(value);\n\n    if (value) {\n      const parsedDate = parse(value, \"yyyy-MM-dd\", new Date());\n      if (isValid(parsedDate)) {\n        setDate(parsedDate);\n        setMonth(parsedDate);\n      }\n    } else {\n      setDate(undefined);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Calendar\n        mode=\"single\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={handleDayPickerSelect}\n        selected={date}\n      />\n      <Field className=\"flex-row items-center gap-4\">\n        <FieldLabel className=\"whitespace-nowrap\">Enter date</FieldLabel>\n        <InputGroup>\n          <InputGroupInput\n            aria-label=\"Select date\"\n            className=\"*:[input]:[&::-webkit-calendar-picker-indicator]:hidden *:[input]:[&::-webkit-calendar-picker-indicator]:appearance-none\"\n            onChange={handleInputChange}\n            type=\"date\"\n            value={inputValue}\n          />\n          <InputGroupAddon>\n            <CalendarIcon aria-hidden=\"true\" />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-18.tsx",
    "content": "\"use client\";\n\nimport { ClockIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(() => new Date());\n  const [month, setMonth] = useState<Date>(() => new Date());\n  const [timeValue, setTimeValue] = useState(\"12:00:00\");\n\n  const handleDayPickerSelect = (selectedDate: Date | undefined) => {\n    setDate(selectedDate);\n    if (selectedDate) {\n      setMonth(selectedDate);\n    }\n  };\n\n  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setTimeValue(e.target.value);\n  };\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Calendar\n        mode=\"single\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={handleDayPickerSelect}\n        selected={date}\n      />\n      <Field className=\"flex-row items-center gap-3\">\n        <FieldLabel className=\"whitespace-nowrap text-xs\">\n          Enter time\n        </FieldLabel>\n        <InputGroup className=\"grow\">\n          <InputGroupInput\n            aria-label=\"Select time\"\n            className=\"*:[input]:[&::-webkit-calendar-picker-indicator]:hidden *:[input]:[&::-webkit-calendar-picker-indicator]:appearance-none\"\n            onChange={handleTimeChange}\n            step=\"1\"\n            type=\"time\"\n            value={timeValue}\n          />\n          <InputGroupAddon>\n            <ClockIcon aria-hidden=\"true\" />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-19.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\nimport { ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date>(today);\n  const [time, setTime] = useState<string | null>(null);\n\n  const timeSlots = [\n    { available: false, time: \"09:00\" },\n    { available: false, time: \"09:30\" },\n    { available: true, time: \"10:00\" },\n    { available: true, time: \"10:30\" },\n    { available: true, time: \"11:00\" },\n    { available: true, time: \"11:30\" },\n    { available: false, time: \"12:00\" },\n    { available: true, time: \"12:30\" },\n    { available: true, time: \"13:00\" },\n    { available: true, time: \"13:30\" },\n    { available: true, time: \"14:00\" },\n    { available: false, time: \"14:30\" },\n    { available: false, time: \"15:00\" },\n    { available: true, time: \"15:30\" },\n    { available: true, time: \"16:00\" },\n    { available: true, time: \"16:30\" },\n    { available: true, time: \"17:00\" },\n    { available: true, time: \"17:30\" },\n  ];\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <Calendar\n        className=\"max-sm:pb-3 sm:pe-5\"\n        disabled={[{ before: today }]}\n        mode=\"single\"\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n            setTime(null);\n          }\n        }}\n        selected={date}\n      />\n      <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n        <div className=\"absolute inset-0 max-sm:border-t\">\n          <ScrollArea className=\"h-full sm:border-s\" scrollbarGutter scrollFade>\n            <div className=\"flex flex-col gap-3 py-3 sm:pt-0 sm:pb-2\">\n              <div className=\"flex shrink-0 items-center font-medium text-sm sm:h-8 sm:px-5\">\n                {format(date, \"EEEE, d\")}\n              </div>\n              <ToggleGroup\n                className=\"grid w-full gap-1.5 max-sm:grid-cols-2 sm:px-5\"\n                onValueChange={(values) => setTime(values[0] || null)}\n                value={time ? [time] : []}\n              >\n                {timeSlots.map(({ time: timeSlot, available }) => (\n                  <Toggle\n                    disabled={!available}\n                    key={timeSlot}\n                    size=\"sm\"\n                    value={timeSlot}\n                    variant=\"outline\"\n                  >\n                    {timeSlot}\n                  </Toggle>\n                ))}\n              </ToggleGroup>\n            </div>\n          </ScrollArea>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-2.tsx",
    "content": "\"use client\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      className=\"[--cell-size:--spacing(11)] sm:[--cell-size:--spacing(10)]\"\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-20.tsx",
    "content": "\"use client\";\n\nimport { subDays, subMonths, subYears } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const yesterday = subDays(today, 1);\n  const lastWeek = subDays(today, 7);\n  const lastMonth = subMonths(today, 1);\n  const lastYear = subYears(today, 1);\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<Date>(today);\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n        <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(today);\n              setMonth(today);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Today\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yesterday);\n              setMonth(yesterday);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Yesterday\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastWeek);\n              setMonth(lastWeek);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last week\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastMonth);\n              setMonth(lastMonth);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last month\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastYear);\n              setMonth(lastYear);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last year\n          </Button>\n        </div>\n      </div>\n      <Calendar\n        className=\"max-sm:pb-3 sm:ps-5\"\n        disabled={[{ after: today }]}\n        mode=\"single\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n          }\n        }}\n        selected={date}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-21.tsx",
    "content": "\"use client\";\n\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const yesterday = {\n    from: subDays(today, 1),\n    to: subDays(today, 1),\n  };\n  const last7Days = {\n    from: subDays(today, 6),\n    to: today,\n  };\n  const last30Days = {\n    from: subDays(today, 29),\n    to: today,\n  };\n  const monthToDate = {\n    from: startOfMonth(today),\n    to: today,\n  };\n  const lastMonth = {\n    from: startOfMonth(subMonths(today, 1)),\n    to: endOfMonth(subMonths(today, 1)),\n  };\n  const yearToDate = {\n    from: startOfYear(today),\n    to: today,\n  };\n  const lastYear = {\n    from: startOfYear(subYears(today, 1)),\n    to: endOfYear(subYears(today, 1)),\n  };\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<DateRange | undefined>(last7Days);\n\n  return (\n    <div className=\"flex max-sm:flex-col\">\n      <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n        <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate({\n                from: today,\n                to: today,\n              });\n              setMonth(today);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Today\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yesterday);\n              setMonth(yesterday.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Yesterday\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last7Days);\n              setMonth(last7Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 7 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(last30Days);\n              setMonth(last30Days.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last 30 days\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(monthToDate);\n              setMonth(monthToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Month to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastMonth);\n              setMonth(lastMonth.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last month\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(yearToDate);\n              setMonth(yearToDate.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Year to date\n          </Button>\n          <Button\n            className=\"w-full justify-start\"\n            onClick={() => {\n              setDate(lastYear);\n              setMonth(lastYear.to);\n            }}\n            size=\"sm\"\n            variant=\"ghost\"\n          >\n            Last year\n          </Button>\n        </div>\n      </div>\n      <Calendar\n        className=\"max-sm:pb-3 sm:ps-5\"\n        disabled={[{ after: today }]}\n        mode=\"range\"\n        month={month}\n        onMonthChange={setMonth}\n        onSelect={(newDate) => {\n          if (newDate) {\n            setDate(newDate);\n          }\n        }}\n        selected={date}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-22.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 25),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n        months: \"gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-23.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 48),\n  });\n\n  return (\n    <Calendar\n      classNames={{\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n      }}\n      mode=\"range\"\n      numberOfMonths={3}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-24.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useEffect, useState } from \"react\";\nimport type { DayButtonProps } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nconst GOOD_PRICE_THRESHOLD = 100;\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>(\n    {},\n  );\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {};\n      const todayDate = new Date();\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(todayDate);\n        date.setDate(todayDate.getDate() + i);\n        const dateKey = format(date, \"yyyy-MM-dd\");\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;\n        data[dateKey] = randomPrice;\n      }\n      return data;\n    };\n    setMockPriceData(generateMockPriceData());\n  }, []);\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")];\n  };\n\n  return (\n    <Calendar\n      classNames={{\n        day_button: \"size-12\",\n        month:\n          \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        months: \"sm:flex-col md:flex-row gap-8\",\n        today: \"*:after:hidden\",\n        weekday: \"w-12\",\n      }}\n      components={{\n        DayButton: (props: DayButtonProps) => (\n          <DayButton {...props} prices={mockPriceData} />\n        ),\n      }}\n      disabled={isDateDisabled}\n      mode=\"single\"\n      numberOfMonths={2}\n      onSelect={setDate}\n      pagedNavigation\n      selected={date}\n      showOutsideDays={false}\n    />\n  );\n}\n\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, prices, modifiers: _modifiers, ...buttonProps } = props;\n  const price = prices[format(day.date, \"yyyy-MM-dd\")];\n  const isGoodPrice = price !== undefined && price < GOOD_PRICE_THRESHOLD;\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"font-normal text-xs\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"in-data-selected:text-primary-foreground/70 text-muted-foreground\",\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-3.tsx",
    "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(),\n    to: new Date(new Date().setDate(new Date().getDate() + 7)),\n  });\n\n  return <Calendar mode=\"range\" onSelect={setRange} selected={range} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-4.tsx",
    "content": "\"use client\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-5.tsx",
    "content": "\"use client\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const handleValueChange = (newValue: string | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  const items =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  return (\n    <Select\n      aria-label={ariaLabel}\n      items={items}\n      onValueChange={handleValueChange}\n      value={value?.toString()}\n    >\n      <SelectTrigger className=\"min-w-none\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem\n            disabled={item.disabled}\n            key={item.value}\n            value={item.value}\n          >\n            {item.label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-6.tsx",
    "content": "\"use client\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>(new Date());\n  return (\n    <Calendar\n      captionLayout=\"dropdown\"\n      components={{ Dropdown: CalendarDropdown }}\n      endMonth={new Date(2030, 11)}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n      startMonth={new Date(1930, 0)}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-7.tsx",
    "content": "\"use client\";\n\nimport { addDays } from \"date-fns\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n\n  return (\n    <Calendar\n      disabled={[\n        { before: new Date() },\n        new Date(),\n        { dayOfWeek: [0, 6] },\n        {\n          from: addDays(today, 14),\n          to: addDays(today, 16),\n        },\n        {\n          from: addDays(today, 23),\n          to: addDays(today, 24),\n        },\n      ]}\n      excludeDisabled\n      mode=\"range\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-8.tsx",
    "content": "\"use client\";\n\nimport { addDays, subDays } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [date, setDate] = useState<Date[] | undefined>([\n    subDays(today, 17),\n    addDays(today, 2),\n    addDays(today, 6),\n    addDays(today, 8),\n  ]);\n\n  return <Calendar mode=\"multiple\" onSelect={setDate} selected={date} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-calendar-9.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>(new Date());\n\n  return (\n    <Calendar\n      classNames={{\n        day_button: \"rounded-full\",\n      }}\n      mode=\"single\"\n      onSelect={setDate}\n      selected={date}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-1.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <CardPanel>\n        <Form>\n          <Field>\n            <FieldLabel>Name</FieldLabel>\n            <Input placeholder=\"Name of your project\" type=\"text\" />\n          </Field>\n          <Field>\n            <FieldLabel>Framework</FieldLabel>\n            <Select defaultValue=\"next\" items={frameworkOptions}>\n              <SelectTrigger>\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {frameworkOptions.map(({ label, value }) => (\n                  <SelectItem key={value} value={value}>\n                    {label}\n                  </SelectItem>\n                ))}\n              </SelectPopup>\n            </Select>\n          </Field>\n          <Button className=\"w-full\" type=\"submit\">\n            Deploy\n          </Button>\n        </Form>\n      </CardPanel>\n      <CardFooter>\n        <div className=\"flex gap-1 text-muted-foreground text-xs\">\n          <CircleAlertIcon className=\"size-3 h-lh shrink-0\" />\n          <p>This will take a few seconds to complete.</p>\n        </div>\n      </CardFooter>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-10.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Card, CardPanel } from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport {\n  Frame,\n  FrameDescription,\n  FrameFooter,\n  FrameHeader,\n  FrameTitle,\n} from \"@/registry/default/ui/frame\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Frame className=\"w-full max-w-xs\">\n      <FrameHeader>\n        <FrameTitle>Create project</FrameTitle>\n        <FrameDescription>\n          Deploy your new project in one-click.\n        </FrameDescription>\n      </FrameHeader>\n      <Card>\n        <CardPanel>\n          <Form>\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input placeholder=\"Name of your project\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Framework</FieldLabel>\n              <Select defaultValue=\"next\" items={frameworkOptions}>\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  {frameworkOptions.map(({ label, value }) => (\n                    <SelectItem key={value} value={value}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectPopup>\n              </Select>\n            </Field>\n            <Button className=\"w-full\" type=\"submit\">\n              Deploy\n            </Button>\n          </Form>\n        </CardPanel>\n      </Card>\n      <FrameFooter>\n        <div className=\"flex gap-1 text-muted-foreground text-xs\">\n          <CircleAlertIcon className=\"size-3 h-lh shrink-0\" />\n          <p>This will take a few seconds to complete.</p>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-11.tsx",
    "content": "import { FolderIcon, PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardFrame,\n  CardFrameAction,\n  CardFrameDescription,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@/registry/default/ui/card\";\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/default/ui/empty\";\n\nexport default function Particle() {\n  return (\n    <CardFrame className=\"w-full\">\n      <CardFrameHeader>\n        <CardFrameTitle>Project</CardFrameTitle>\n        <CardFrameDescription>Manage your projects</CardFrameDescription>\n        <CardFrameAction>\n          <Button variant=\"outline\">\n            <PlusIcon />\n            Add\n          </Button>\n        </CardFrameAction>\n      </CardFrameHeader>\n      <Card>\n        <CardPanel>\n          <Empty>\n            <EmptyHeader>\n              <EmptyMedia variant=\"icon\">\n                <FolderIcon />\n              </EmptyMedia>\n              <EmptyTitle>No projects yet</EmptyTitle>\n              <EmptyDescription>\n                Get started by adding your first project.\n              </EmptyDescription>\n            </EmptyHeader>\n          </Empty>\n        </CardPanel>\n      </Card>\n    </CardFrame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-2.tsx",
    "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardAction,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader>\n        <CardTitle>Login to your account</CardTitle>\n        <CardAction>\n          <Link\n            className=\"text-muted-foreground text-sm leading-4.5 hover:underline\"\n            href=\"#\"\n          >\n            Sign up\n          </Link>\n        </CardAction>\n      </CardHeader>\n      <CardPanel>\n        <Form>\n          <Field>\n            <FieldLabel>Email</FieldLabel>\n            <Input placeholder=\"Enter your email\" type=\"email\" />\n          </Field>\n          <Field>\n            <FieldLabel>Password</FieldLabel>\n            <Input placeholder=\"Enter your password\" type=\"password\" />\n          </Field>\n          <Button className=\"w-full\" type=\"submit\">\n            Login\n          </Button>\n        </Form>\n      </CardPanel>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-3.tsx",
    "content": "import { ShieldAlertIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>Login to your account</CardTitle>\n        <CardDescription>Enter email and password to login</CardDescription>\n      </CardHeader>\n      <CardPanel>\n        <Form>\n          <Field>\n            <FieldLabel>Email</FieldLabel>\n            <Input placeholder=\"Enter your email\" type=\"email\" />\n          </Field>\n          <Field>\n            <FieldLabel>Password</FieldLabel>\n            <Input placeholder=\"Enter your password\" type=\"password\" />\n          </Field>\n          <Button className=\"w-full\" type=\"submit\">\n            Login\n          </Button>\n        </Form>\n      </CardPanel>\n      <CardFooter className=\"border-t\">\n        <div className=\"flex gap-1 text-muted-foreground text-xs\">\n          <ShieldAlertIcon className=\"size-3 h-lh shrink-0\" />\n          <p>The information you enter is encrypted and stored securely.</p>\n        </div>\n      </CardFooter>\n    </Card>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-4.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardDescription,\n  CardFrame,\n  CardFrameFooter,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <CardFrame className=\"w-full max-w-xs\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Deploy your new project in one-click.\n          </CardDescription>\n        </CardHeader>\n        <CardPanel>\n          <Form>\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input placeholder=\"Name of your project\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Framework</FieldLabel>\n              <Select defaultValue=\"next\" items={frameworkOptions}>\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  {frameworkOptions.map(({ label, value }) => (\n                    <SelectItem key={value} value={value}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectPopup>\n              </Select>\n            </Field>\n            <Button className=\"w-full\" type=\"submit\">\n              Deploy\n            </Button>\n          </Form>\n        </CardPanel>\n      </Card>\n      <CardFrameFooter>\n        <div className=\"flex gap-1 text-muted-foreground text-xs\">\n          <CircleAlertIcon className=\"size-3 h-lh shrink-0\" />\n          <p>This will take a few seconds to complete.</p>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-5.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardFooter,\n  CardFrame,\n  CardFrameDescription,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <CardFrame className=\"w-full max-w-xs\">\n      <CardFrameHeader>\n        <CardFrameTitle>Create project</CardFrameTitle>\n        <CardFrameDescription>\n          Deploy your new project in one-click.\n        </CardFrameDescription>\n      </CardFrameHeader>\n      <Card>\n        <Form className=\"contents\">\n          <CardPanel>\n            <div className=\"flex flex-col gap-4\">\n              <Field>\n                <FieldLabel>Name</FieldLabel>\n                <Input placeholder=\"Name of your project\" type=\"text\" />\n              </Field>\n              <Field>\n                <FieldLabel>Framework</FieldLabel>\n                <Select defaultValue=\"next\" items={frameworkOptions}>\n                  <SelectTrigger>\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectPopup>\n                    {frameworkOptions.map(({ label, value }) => (\n                      <SelectItem key={value} value={value}>\n                        {label}\n                      </SelectItem>\n                    ))}\n                  </SelectPopup>\n                </Select>\n              </Field>\n            </div>\n          </CardPanel>\n          <CardFooter>\n            <Button className=\"w-full\" type=\"submit\">\n              Deploy\n            </Button>\n          </CardFooter>\n        </Form>\n      </Card>\n    </CardFrame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-6.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardFrame,\n  CardFrameDescription,\n  CardFrameFooter,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <CardFrame className=\"w-full max-w-xs\">\n      <CardFrameHeader>\n        <CardFrameTitle>Create project</CardFrameTitle>\n        <CardFrameDescription>\n          Deploy your new project in one-click.\n        </CardFrameDescription>\n      </CardFrameHeader>\n      <Card>\n        <CardPanel>\n          <Form>\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input placeholder=\"Name of your project\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Framework</FieldLabel>\n              <Select defaultValue=\"next\" items={frameworkOptions}>\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  {frameworkOptions.map(({ label, value }) => (\n                    <SelectItem key={value} value={value}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectPopup>\n              </Select>\n            </Field>\n            <Button className=\"w-full\" type=\"submit\">\n              Deploy\n            </Button>\n          </Form>\n        </CardPanel>\n      </Card>\n      <CardFrameFooter>\n        <div className=\"flex gap-1 text-muted-foreground text-xs\">\n          <CircleAlertIcon className=\"size-3 h-lh shrink-0\" />\n          <p>This will take a few seconds to complete.</p>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-7.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardFrame,\n  CardFrameDescription,\n  CardFrameFooter,\n  CardFrameHeader,\n  CardFrameTitle,\n  CardPanel,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <CardFrame className=\"w-full max-w-xs\">\n      <CardFrameHeader>\n        <CardFrameTitle>Create project</CardFrameTitle>\n        <CardFrameDescription>\n          Deploy your new project in one-click.\n        </CardFrameDescription>\n      </CardFrameHeader>\n      <Card className=\"rounded-b-none!\">\n        <CardPanel>\n          <Form>\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input placeholder=\"Name of your project\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Framework</FieldLabel>\n              <Select defaultValue=\"next\" items={frameworkOptions}>\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  {frameworkOptions.map(({ label, value }) => (\n                    <SelectItem key={value} value={value}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectPopup>\n              </Select>\n            </Field>\n            <Button className=\"w-full\" type=\"submit\">\n              Deploy\n            </Button>\n          </Form>\n        </CardPanel>\n      </Card>\n      <CardFrameFooter>\n        <div className=\"flex gap-1 text-muted-foreground text-xs\">\n          <CircleAlertIcon className=\"size-3 h-lh shrink-0\" />\n          <p>This will take a few seconds to complete.</p>\n        </div>\n      </CardFrameFooter>\n    </CardFrame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-8.tsx",
    "content": "import { CircleAlertIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardDescription,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Frame className=\"w-full max-w-xs\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Create project</CardTitle>\n          <CardDescription>\n            Deploy your new project in one-click.\n          </CardDescription>\n        </CardHeader>\n        <CardPanel>\n          <Form>\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input placeholder=\"Name of your project\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Framework</FieldLabel>\n              <Select defaultValue=\"next\" items={frameworkOptions}>\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  {frameworkOptions.map(({ label, value }) => (\n                    <SelectItem key={value} value={value}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectPopup>\n              </Select>\n            </Field>\n            <Button className=\"w-full\" type=\"submit\">\n              Deploy\n            </Button>\n          </Form>\n        </CardPanel>\n      </Card>\n      <FrameFooter>\n        <div className=\"flex gap-1 text-muted-foreground text-xs\">\n          <CircleAlertIcon className=\"size-3 h-lh shrink-0\" />\n          <p>This will take a few seconds to complete.</p>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-card-9.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport { Card, CardPanel } from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport {\n  Frame,\n  FrameDescription,\n  FrameHeader,\n  FrameTitle,\n} from \"@/registry/default/ui/frame\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst frameworkOptions = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Frame className=\"w-full max-w-xs\">\n      <FrameHeader>\n        <FrameTitle>Create project</FrameTitle>\n        <FrameDescription>\n          Deploy your new project in one-click.\n        </FrameDescription>\n      </FrameHeader>\n      <Card>\n        <CardPanel>\n          <Form>\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input placeholder=\"Name of your project\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Framework</FieldLabel>\n              <Select defaultValue=\"next\" items={frameworkOptions}>\n                <SelectTrigger>\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectPopup>\n                  {frameworkOptions.map(({ label, value }) => (\n                    <SelectItem key={value} value={value}>\n                      {label}\n                    </SelectItem>\n                  ))}\n                </SelectPopup>\n              </Select>\n            </Field>\n            <Button className=\"w-full\" type=\"submit\">\n              Deploy\n            </Button>\n          </Form>\n        </CardPanel>\n      </Card>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-1.tsx",
    "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  return (\n    <Label>\n      <Checkbox />\n      Accept terms and conditions\n    </Label>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-2.tsx",
    "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  return (\n    <Label>\n      <Checkbox defaultChecked disabled />\n      Accept terms and conditions\n    </Label>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-3.tsx",
    "content": "import { useId } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  const id = useId();\n\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Checkbox defaultChecked id={id} />\n      <div className=\"flex flex-col gap-1\">\n        <Label htmlFor={id}>Accept terms and conditions</Label>\n        <p className=\"text-muted-foreground text-xs\">\n          By clicking this checkbox, you agree to the terms and conditions.\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-4.tsx",
    "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  return (\n    <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n      <Checkbox defaultChecked />\n      <div className=\"flex flex-col gap-1\">\n        <p>Enable notifications</p>\n        <p className=\"text-muted-foreground text-xs\">\n          You can enable or disable notifications at any time.\n        </p>\n      </div>\n    </Label>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-5.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const accepted = formData.get(\"terms\");\n    alert(`Terms: ${accepted}`);\n  };\n  return (\n    <Form className=\"w-auto\" onSubmit={onSubmit}>\n      <Field name=\"terms\">\n        <FieldLabel>\n          <Checkbox defaultChecked value=\"yes\" />\n          Accept terms and conditions\n        </FieldLabel>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-group-1.tsx",
    "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  return (\n    <CheckboxGroup aria-label=\"Select frameworks\" defaultValue={[\"next\"]}>\n      <Label>\n        <Checkbox value=\"next\" />\n        Next.js\n      </Label>\n      <Label>\n        <Checkbox value=\"vite\" />\n        Vite\n      </Label>\n      <Label>\n        <Checkbox value=\"astro\" />\n        Astro\n      </Label>\n    </CheckboxGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-group-2.tsx",
    "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  return (\n    <CheckboxGroup aria-label=\"Select frameworks\" defaultValue={[\"next\"]}>\n      <Label>\n        <Checkbox value=\"next\" />\n        Next.js\n      </Label>\n      <Label>\n        <Checkbox disabled value=\"vite\" />\n        Vite\n      </Label>\n      <Label>\n        <Checkbox value=\"astro\" />\n        Astro\n      </Label>\n    </CheckboxGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-group-3.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst frameworks = [\n  { id: \"next\", name: \"Next.js\" },\n  { id: \"vite\", name: \"Vite\" },\n  { id: \"astro\", name: \"Astro\" },\n];\n\nexport default function Particle() {\n  const [value, setValue] = useState<string[]>([]);\n\n  return (\n    <CheckboxGroup\n      allValues={frameworks.map((framework) => framework.id)}\n      aria-labelledby=\"frameworks-caption\"\n      onValueChange={setValue}\n      value={value}\n    >\n      <Label id=\"frameworks-caption\">\n        <Checkbox name=\"frameworks\" parent />\n        Frameworks\n      </Label>\n\n      {frameworks.map((framework) => (\n        <Label className=\"ms-4\" key={framework.id}>\n          <Checkbox value={framework.id} />\n          {framework.name}\n        </Label>\n      ))}\n    </CheckboxGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-group-4.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst mainPermissions = [\n  { id: \"view-dashboard\", name: \"View Dashboard\" },\n  { id: \"manage-users\", name: \"Manage Users\" },\n  { id: \"access-reports\", name: \"Access Reports\" },\n];\n\nconst userManagementPermissions = [\n  { id: \"create-user\", name: \"Create User\" },\n  { id: \"edit-user\", name: \"Edit User\" },\n  { id: \"delete-user\", name: \"Delete User\" },\n  { id: \"assign-roles\", name: \"Assign Roles\" },\n];\n\nexport default function Particle() {\n  const [mainValue, setMainValue] = useState<string[]>([]);\n  const [managementValue, setManagementValue] = useState<string[]>([]);\n\n  const managementIsPartial =\n    managementValue.length > 0 &&\n    managementValue.length !== userManagementPermissions.length;\n\n  return (\n    <CheckboxGroup\n      allValues={mainPermissions.map((p) => p.id)}\n      aria-labelledby=\"user-permissions-caption\"\n      onValueChange={(value) => {\n        if (value.includes(\"manage-users\")) {\n          setManagementValue(userManagementPermissions.map((p) => p.id));\n        } else if (\n          managementValue.length === userManagementPermissions.length\n        ) {\n          setManagementValue([]);\n        }\n        setMainValue(value);\n      }}\n      value={mainValue}\n    >\n      <Label id=\"user-permissions-caption\">\n        <Checkbox indeterminate={managementIsPartial} parent />\n        User Permissions\n      </Label>\n\n      {mainPermissions\n        .filter((p) => p.id !== \"manage-users\")\n        .map((p) => (\n          <Label className=\"ms-4\" key={p.id}>\n            <Checkbox value={p.id} />\n            {p.name}\n          </Label>\n        ))}\n\n      <CheckboxGroup\n        allValues={userManagementPermissions.map((p) => p.id)}\n        aria-labelledby=\"manage-users-caption\"\n        className=\"ms-4\"\n        onValueChange={(value) => {\n          if (value.length === userManagementPermissions.length) {\n            setMainValue((prev) =>\n              Array.from(new Set([...prev, \"manage-users\"])),\n            );\n          } else {\n            setMainValue((prev) => prev.filter((v) => v !== \"manage-users\"));\n          }\n          setManagementValue(value);\n        }}\n        value={managementValue}\n      >\n        <Label id=\"manage-users-caption\">\n          <Checkbox parent />\n          Manage Users\n        </Label>\n\n        {userManagementPermissions.map((p) => (\n          <Label className=\"ms-4\" key={p.id}>\n            <Checkbox value={p.id} />\n            {p.name}\n          </Label>\n        ))}\n      </CheckboxGroup>\n    </CheckboxGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-checkbox-group-5.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldItem, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const frameworks = formData.getAll(\"frameworks\") as string[];\n    alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-[160px]\" onSubmit={onSubmit}>\n      <Field\n        className=\"gap-4\"\n        name=\"frameworks\"\n        render={(props) => <Fieldset {...props} />}\n      >\n        <FieldsetLegend>Frameworks</FieldsetLegend>\n        <CheckboxGroup defaultValue={[\"next\"]}>\n          <FieldItem>\n            <FieldLabel>\n              <Checkbox value=\"next\" />\n              Next.js\n            </FieldLabel>\n          </FieldItem>\n          <FieldItem>\n            <FieldLabel>\n              <Checkbox value=\"vite\" />\n              Vite\n            </FieldLabel>\n          </FieldItem>\n          <FieldItem>\n            <FieldLabel>\n              <Checkbox value=\"astro\" />\n              Astro\n            </FieldLabel>\n          </FieldItem>\n        </CheckboxGroup>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-collapsible-1.tsx",
    "content": "import { ChevronDownIcon } from \"lucide-react\";\nimport {\n  Collapsible,\n  CollapsiblePanel,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\";\n\nexport default function Particle() {\n  return (\n    <Collapsible>\n      <CollapsibleTrigger className=\"inline-flex items-center gap-2 font-medium text-sm data-panel-open:[&_svg]:rotate-180\">\n        Show recovery keys\n        <ChevronDownIcon className=\"size-4\" />\n      </CollapsibleTrigger>\n      <CollapsiblePanel>\n        <ul className=\"flex flex-col gap-1 py-2 text-muted-foreground text-sm\">\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            4829-1735-6621\n          </li>\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            9182-6407-5532\n          </li>\n          <li className=\"rounded-sm bg-muted px-2 py-1 font-mono\">\n            3051-7924-9018\n          </li>\n        </ul>\n      </CollapsiblePanel>\n    </Collapsible>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-1.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput aria-label=\"Select a item\" placeholder=\"Select a item…\" />\n      <ComboboxPopup>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-10.tsx",
    "content": "\"use client\";\n\nimport { ChevronsUpDownIcon, SearchIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\ninterface Country {\n  code: string;\n  value: string | null;\n  continent: string;\n  label: string;\n}\n\nconst countries: Country[] = [\n  { code: \"\", continent: \"\", label: \"Select country\", value: null },\n  { code: \"af\", continent: \"Asia\", label: \"Afghanistan\", value: \"afghanistan\" },\n  { code: \"al\", continent: \"Europe\", label: \"Albania\", value: \"albania\" },\n  { code: \"dz\", continent: \"Africa\", label: \"Algeria\", value: \"algeria\" },\n  { code: \"ad\", continent: \"Europe\", label: \"Andorra\", value: \"andorra\" },\n  { code: \"ao\", continent: \"Africa\", label: \"Angola\", value: \"angola\" },\n  {\n    code: \"ar\",\n    continent: \"South America\",\n    label: \"Argentina\",\n    value: \"argentina\",\n  },\n  { code: \"am\", continent: \"Asia\", label: \"Armenia\", value: \"armenia\" },\n  { code: \"au\", continent: \"Oceania\", label: \"Australia\", value: \"australia\" },\n  { code: \"at\", continent: \"Europe\", label: \"Austria\", value: \"austria\" },\n  { code: \"az\", continent: \"Asia\", label: \"Azerbaijan\", value: \"azerbaijan\" },\n  {\n    code: \"bs\",\n    continent: \"North America\",\n    label: \"Bahamas\",\n    value: \"bahamas\",\n  },\n  { code: \"bh\", continent: \"Asia\", label: \"Bahrain\", value: \"bahrain\" },\n  { code: \"bd\", continent: \"Asia\", label: \"Bangladesh\", value: \"bangladesh\" },\n  {\n    code: \"bb\",\n    continent: \"North America\",\n    label: \"Barbados\",\n    value: \"barbados\",\n  },\n  { code: \"by\", continent: \"Europe\", label: \"Belarus\", value: \"belarus\" },\n  { code: \"be\", continent: \"Europe\", label: \"Belgium\", value: \"belgium\" },\n  { code: \"bz\", continent: \"North America\", label: \"Belize\", value: \"belize\" },\n  { code: \"bj\", continent: \"Africa\", label: \"Benin\", value: \"benin\" },\n  { code: \"bt\", continent: \"Asia\", label: \"Bhutan\", value: \"bhutan\" },\n  {\n    code: \"bo\",\n    continent: \"South America\",\n    label: \"Bolivia\",\n    value: \"bolivia\",\n  },\n  {\n    code: \"ba\",\n    continent: \"Europe\",\n    label: \"Bosnia and Herzegovina\",\n    value: \"bosnia-and-herzegovina\",\n  },\n  { code: \"bw\", continent: \"Africa\", label: \"Botswana\", value: \"botswana\" },\n  { code: \"br\", continent: \"South America\", label: \"Brazil\", value: \"brazil\" },\n  { code: \"bn\", continent: \"Asia\", label: \"Brunei\", value: \"brunei\" },\n  { code: \"bg\", continent: \"Europe\", label: \"Bulgaria\", value: \"bulgaria\" },\n  {\n    code: \"bf\",\n    continent: \"Africa\",\n    label: \"Burkina Faso\",\n    value: \"burkina-faso\",\n  },\n  { code: \"bi\", continent: \"Africa\", label: \"Burundi\", value: \"burundi\" },\n  { code: \"kh\", continent: \"Asia\", label: \"Cambodia\", value: \"cambodia\" },\n  { code: \"cm\", continent: \"Africa\", label: \"Cameroon\", value: \"cameroon\" },\n  { code: \"ca\", continent: \"North America\", label: \"Canada\", value: \"canada\" },\n  { code: \"cv\", continent: \"Africa\", label: \"Cape Verde\", value: \"cape-verde\" },\n  {\n    code: \"cf\",\n    continent: \"Africa\",\n    label: \"Central African Republic\",\n    value: \"central-african-republic\",\n  },\n  { code: \"td\", continent: \"Africa\", label: \"Chad\", value: \"chad\" },\n  { code: \"cl\", continent: \"South America\", label: \"Chile\", value: \"chile\" },\n  { code: \"cn\", continent: \"Asia\", label: \"China\", value: \"china\" },\n  {\n    code: \"co\",\n    continent: \"South America\",\n    label: \"Colombia\",\n    value: \"colombia\",\n  },\n  { code: \"km\", continent: \"Africa\", label: \"Comoros\", value: \"comoros\" },\n  { code: \"cg\", continent: \"Africa\", label: \"Congo\", value: \"congo\" },\n  {\n    code: \"cr\",\n    continent: \"North America\",\n    label: \"Costa Rica\",\n    value: \"costa-rica\",\n  },\n  { code: \"hr\", continent: \"Europe\", label: \"Croatia\", value: \"croatia\" },\n  { code: \"cu\", continent: \"North America\", label: \"Cuba\", value: \"cuba\" },\n  { code: \"cy\", continent: \"Asia\", label: \"Cyprus\", value: \"cyprus\" },\n  {\n    code: \"cz\",\n    continent: \"Europe\",\n    label: \"Czech Republic\",\n    value: \"czech-republic\",\n  },\n  { code: \"dk\", continent: \"Europe\", label: \"Denmark\", value: \"denmark\" },\n  { code: \"dj\", continent: \"Africa\", label: \"Djibouti\", value: \"djibouti\" },\n  {\n    code: \"dm\",\n    continent: \"North America\",\n    label: \"Dominica\",\n    value: \"dominica\",\n  },\n  {\n    code: \"do\",\n    continent: \"North America\",\n    label: \"Dominican Republic\",\n    value: \"dominican-republic\",\n  },\n  {\n    code: \"ec\",\n    continent: \"South America\",\n    label: \"Ecuador\",\n    value: \"ecuador\",\n  },\n  { code: \"eg\", continent: \"Africa\", label: \"Egypt\", value: \"egypt\" },\n  {\n    code: \"sv\",\n    continent: \"North America\",\n    label: \"El Salvador\",\n    value: \"el-salvador\",\n  },\n  {\n    code: \"gq\",\n    continent: \"Africa\",\n    label: \"Equatorial Guinea\",\n    value: \"equatorial-guinea\",\n  },\n  { code: \"er\", continent: \"Africa\", label: \"Eritrea\", value: \"eritrea\" },\n  { code: \"ee\", continent: \"Europe\", label: \"Estonia\", value: \"estonia\" },\n  { code: \"et\", continent: \"Africa\", label: \"Ethiopia\", value: \"ethiopia\" },\n  { code: \"fj\", continent: \"Oceania\", label: \"Fiji\", value: \"fiji\" },\n  { code: \"fi\", continent: \"Europe\", label: \"Finland\", value: \"finland\" },\n  { code: \"fr\", continent: \"Europe\", label: \"France\", value: \"france\" },\n  { code: \"ga\", continent: \"Africa\", label: \"Gabon\", value: \"gabon\" },\n  { code: \"gm\", continent: \"Africa\", label: \"Gambia\", value: \"gambia\" },\n  { code: \"ge\", continent: \"Asia\", label: \"Georgia\", value: \"georgia\" },\n  { code: \"de\", continent: \"Europe\", label: \"Germany\", value: \"germany\" },\n  { code: \"gh\", continent: \"Africa\", label: \"Ghana\", value: \"ghana\" },\n  { code: \"gr\", continent: \"Europe\", label: \"Greece\", value: \"greece\" },\n  {\n    code: \"gd\",\n    continent: \"North America\",\n    label: \"Grenada\",\n    value: \"grenada\",\n  },\n  {\n    code: \"gt\",\n    continent: \"North America\",\n    label: \"Guatemala\",\n    value: \"guatemala\",\n  },\n  { code: \"gn\", continent: \"Africa\", label: \"Guinea\", value: \"guinea\" },\n  {\n    code: \"gw\",\n    continent: \"Africa\",\n    label: \"Guinea-Bissau\",\n    value: \"guinea-bissau\",\n  },\n  { code: \"gy\", continent: \"South America\", label: \"Guyana\", value: \"guyana\" },\n  { code: \"ht\", continent: \"North America\", label: \"Haiti\", value: \"haiti\" },\n  {\n    code: \"hn\",\n    continent: \"North America\",\n    label: \"Honduras\",\n    value: \"honduras\",\n  },\n  { code: \"hu\", continent: \"Europe\", label: \"Hungary\", value: \"hungary\" },\n  { code: \"is\", continent: \"Europe\", label: \"Iceland\", value: \"iceland\" },\n  { code: \"in\", continent: \"Asia\", label: \"India\", value: \"india\" },\n  { code: \"id\", continent: \"Asia\", label: \"Indonesia\", value: \"indonesia\" },\n  { code: \"ir\", continent: \"Asia\", label: \"Iran\", value: \"iran\" },\n  { code: \"iq\", continent: \"Asia\", label: \"Iraq\", value: \"iraq\" },\n  { code: \"ie\", continent: \"Europe\", label: \"Ireland\", value: \"ireland\" },\n  { code: \"il\", continent: \"Asia\", label: \"Israel\", value: \"israel\" },\n  { code: \"it\", continent: \"Europe\", label: \"Italy\", value: \"italy\" },\n  {\n    code: \"jm\",\n    continent: \"North America\",\n    label: \"Jamaica\",\n    value: \"jamaica\",\n  },\n  { code: \"jp\", continent: \"Asia\", label: \"Japan\", value: \"japan\" },\n  { code: \"jo\", continent: \"Asia\", label: \"Jordan\", value: \"jordan\" },\n  { code: \"kz\", continent: \"Asia\", label: \"Kazakhstan\", value: \"kazakhstan\" },\n  { code: \"ke\", continent: \"Africa\", label: \"Kenya\", value: \"kenya\" },\n  { code: \"kw\", continent: \"Asia\", label: \"Kuwait\", value: \"kuwait\" },\n  { code: \"kg\", continent: \"Asia\", label: \"Kyrgyzstan\", value: \"kyrgyzstan\" },\n  { code: \"la\", continent: \"Asia\", label: \"Laos\", value: \"laos\" },\n  { code: \"lv\", continent: \"Europe\", label: \"Latvia\", value: \"latvia\" },\n  { code: \"lb\", continent: \"Asia\", label: \"Lebanon\", value: \"lebanon\" },\n  { code: \"ls\", continent: \"Africa\", label: \"Lesotho\", value: \"lesotho\" },\n  { code: \"lr\", continent: \"Africa\", label: \"Liberia\", value: \"liberia\" },\n  { code: \"ly\", continent: \"Africa\", label: \"Libya\", value: \"libya\" },\n  {\n    code: \"li\",\n    continent: \"Europe\",\n    label: \"Liechtenstein\",\n    value: \"liechtenstein\",\n  },\n  { code: \"lt\", continent: \"Europe\", label: \"Lithuania\", value: \"lithuania\" },\n  { code: \"lu\", continent: \"Europe\", label: \"Luxembourg\", value: \"luxembourg\" },\n  { code: \"mg\", continent: \"Africa\", label: \"Madagascar\", value: \"madagascar\" },\n  { code: \"mw\", continent: \"Africa\", label: \"Malawi\", value: \"malawi\" },\n  { code: \"my\", continent: \"Asia\", label: \"Malaysia\", value: \"malaysia\" },\n  { code: \"mv\", continent: \"Asia\", label: \"Maldives\", value: \"maldives\" },\n  { code: \"ml\", continent: \"Africa\", label: \"Mali\", value: \"mali\" },\n  { code: \"mt\", continent: \"Europe\", label: \"Malta\", value: \"malta\" },\n  {\n    code: \"mh\",\n    continent: \"Oceania\",\n    label: \"Marshall Islands\",\n    value: \"marshall-islands\",\n  },\n  { code: \"mr\", continent: \"Africa\", label: \"Mauritania\", value: \"mauritania\" },\n  { code: \"mu\", continent: \"Africa\", label: \"Mauritius\", value: \"mauritius\" },\n  { code: \"mx\", continent: \"North America\", label: \"Mexico\", value: \"mexico\" },\n  {\n    code: \"fm\",\n    continent: \"Oceania\",\n    label: \"Micronesia\",\n    value: \"micronesia\",\n  },\n  { code: \"md\", continent: \"Europe\", label: \"Moldova\", value: \"moldova\" },\n  { code: \"mc\", continent: \"Europe\", label: \"Monaco\", value: \"monaco\" },\n  { code: \"mn\", continent: \"Asia\", label: \"Mongolia\", value: \"mongolia\" },\n  { code: \"me\", continent: \"Europe\", label: \"Montenegro\", value: \"montenegro\" },\n  { code: \"ma\", continent: \"Africa\", label: \"Morocco\", value: \"morocco\" },\n  { code: \"mz\", continent: \"Africa\", label: \"Mozambique\", value: \"mozambique\" },\n  { code: \"mm\", continent: \"Asia\", label: \"Myanmar\", value: \"myanmar\" },\n  { code: \"na\", continent: \"Africa\", label: \"Namibia\", value: \"namibia\" },\n  { code: \"nr\", continent: \"Oceania\", label: \"Nauru\", value: \"nauru\" },\n  { code: \"np\", continent: \"Asia\", label: \"Nepal\", value: \"nepal\" },\n  {\n    code: \"nl\",\n    continent: \"Europe\",\n    label: \"Netherlands\",\n    value: \"netherlands\",\n  },\n  {\n    code: \"nz\",\n    continent: \"Oceania\",\n    label: \"New Zealand\",\n    value: \"new-zealand\",\n  },\n  {\n    code: \"ni\",\n    continent: \"North America\",\n    label: \"Nicaragua\",\n    value: \"nicaragua\",\n  },\n  { code: \"ne\", continent: \"Africa\", label: \"Niger\", value: \"niger\" },\n  { code: \"ng\", continent: \"Africa\", label: \"Nigeria\", value: \"nigeria\" },\n  { code: \"kp\", continent: \"Asia\", label: \"North Korea\", value: \"north-korea\" },\n  {\n    code: \"mk\",\n    continent: \"Europe\",\n    label: \"North Macedonia\",\n    value: \"north-macedonia\",\n  },\n  { code: \"no\", continent: \"Europe\", label: \"Norway\", value: \"norway\" },\n  { code: \"om\", continent: \"Asia\", label: \"Oman\", value: \"oman\" },\n  { code: \"pk\", continent: \"Asia\", label: \"Pakistan\", value: \"pakistan\" },\n  { code: \"pw\", continent: \"Oceania\", label: \"Palau\", value: \"palau\" },\n  { code: \"ps\", continent: \"Asia\", label: \"Palestine\", value: \"palestine\" },\n  { code: \"pa\", continent: \"North America\", label: \"Panama\", value: \"panama\" },\n  {\n    code: \"pg\",\n    continent: \"Oceania\",\n    label: \"Papua New Guinea\",\n    value: \"papua-new-guinea\",\n  },\n  {\n    code: \"py\",\n    continent: \"South America\",\n    label: \"Paraguay\",\n    value: \"paraguay\",\n  },\n  { code: \"pe\", continent: \"South America\", label: \"Peru\", value: \"peru\" },\n  { code: \"ph\", continent: \"Asia\", label: \"Philippines\", value: \"philippines\" },\n  { code: \"pl\", continent: \"Europe\", label: \"Poland\", value: \"poland\" },\n  { code: \"pt\", continent: \"Europe\", label: \"Portugal\", value: \"portugal\" },\n  { code: \"qa\", continent: \"Asia\", label: \"Qatar\", value: \"qatar\" },\n  { code: \"ro\", continent: \"Europe\", label: \"Romania\", value: \"romania\" },\n  { code: \"ru\", continent: \"Europe\", label: \"Russia\", value: \"russia\" },\n  { code: \"rw\", continent: \"Africa\", label: \"Rwanda\", value: \"rwanda\" },\n  { code: \"ws\", continent: \"Oceania\", label: \"Samoa\", value: \"samoa\" },\n  { code: \"sm\", continent: \"Europe\", label: \"San Marino\", value: \"san-marino\" },\n  {\n    code: \"sa\",\n    continent: \"Asia\",\n    label: \"Saudi Arabia\",\n    value: \"saudi-arabia\",\n  },\n  { code: \"sn\", continent: \"Africa\", label: \"Senegal\", value: \"senegal\" },\n  { code: \"rs\", continent: \"Europe\", label: \"Serbia\", value: \"serbia\" },\n  { code: \"sc\", continent: \"Africa\", label: \"Seychelles\", value: \"seychelles\" },\n  {\n    code: \"sl\",\n    continent: \"Africa\",\n    label: \"Sierra Leone\",\n    value: \"sierra-leone\",\n  },\n  { code: \"sg\", continent: \"Asia\", label: \"Singapore\", value: \"singapore\" },\n  { code: \"sk\", continent: \"Europe\", label: \"Slovakia\", value: \"slovakia\" },\n  { code: \"si\", continent: \"Europe\", label: \"Slovenia\", value: \"slovenia\" },\n  {\n    code: \"sb\",\n    continent: \"Oceania\",\n    label: \"Solomon Islands\",\n    value: \"solomon-islands\",\n  },\n  { code: \"so\", continent: \"Africa\", label: \"Somalia\", value: \"somalia\" },\n  {\n    code: \"za\",\n    continent: \"Africa\",\n    label: \"South Africa\",\n    value: \"south-africa\",\n  },\n  { code: \"kr\", continent: \"Asia\", label: \"South Korea\", value: \"south-korea\" },\n  {\n    code: \"ss\",\n    continent: \"Africa\",\n    label: \"South Sudan\",\n    value: \"south-sudan\",\n  },\n  { code: \"es\", continent: \"Europe\", label: \"Spain\", value: \"spain\" },\n  { code: \"lk\", continent: \"Asia\", label: \"Sri Lanka\", value: \"sri-lanka\" },\n  { code: \"sd\", continent: \"Africa\", label: \"Sudan\", value: \"sudan\" },\n  {\n    code: \"sr\",\n    continent: \"South America\",\n    label: \"Suriname\",\n    value: \"suriname\",\n  },\n  { code: \"se\", continent: \"Europe\", label: \"Sweden\", value: \"sweden\" },\n  {\n    code: \"ch\",\n    continent: \"Europe\",\n    label: \"Switzerland\",\n    value: \"switzerland\",\n  },\n  { code: \"sy\", continent: \"Asia\", label: \"Syria\", value: \"syria\" },\n  { code: \"tw\", continent: \"Asia\", label: \"Taiwan\", value: \"taiwan\" },\n  { code: \"tj\", continent: \"Asia\", label: \"Tajikistan\", value: \"tajikistan\" },\n  { code: \"tz\", continent: \"Africa\", label: \"Tanzania\", value: \"tanzania\" },\n  { code: \"th\", continent: \"Asia\", label: \"Thailand\", value: \"thailand\" },\n  { code: \"tl\", continent: \"Asia\", label: \"Timor-Leste\", value: \"timor-leste\" },\n  { code: \"tg\", continent: \"Africa\", label: \"Togo\", value: \"togo\" },\n  { code: \"to\", continent: \"Oceania\", label: \"Tonga\", value: \"tonga\" },\n  {\n    code: \"tt\",\n    continent: \"North America\",\n    label: \"Trinidad and Tobago\",\n    value: \"trinidad-and-tobago\",\n  },\n  { code: \"tn\", continent: \"Africa\", label: \"Tunisia\", value: \"tunisia\" },\n  { code: \"tr\", continent: \"Asia\", label: \"Turkey\", value: \"turkey\" },\n  {\n    code: \"tm\",\n    continent: \"Asia\",\n    label: \"Turkmenistan\",\n    value: \"turkmenistan\",\n  },\n  { code: \"tv\", continent: \"Oceania\", label: \"Tuvalu\", value: \"tuvalu\" },\n  { code: \"ug\", continent: \"Africa\", label: \"Uganda\", value: \"uganda\" },\n  { code: \"ua\", continent: \"Europe\", label: \"Ukraine\", value: \"ukraine\" },\n  {\n    code: \"ae\",\n    continent: \"Asia\",\n    label: \"United Arab Emirates\",\n    value: \"united-arab-emirates\",\n  },\n  {\n    code: \"gb\",\n    continent: \"Europe\",\n    label: \"United Kingdom\",\n    value: \"united-kingdom\",\n  },\n  {\n    code: \"us\",\n    continent: \"North America\",\n    label: \"United States\",\n    value: \"united-states\",\n  },\n  {\n    code: \"uy\",\n    continent: \"South America\",\n    label: \"Uruguay\",\n    value: \"uruguay\",\n  },\n  { code: \"uz\", continent: \"Asia\", label: \"Uzbekistan\", value: \"uzbekistan\" },\n  { code: \"vu\", continent: \"Oceania\", label: \"Vanuatu\", value: \"vanuatu\" },\n  {\n    code: \"va\",\n    continent: \"Europe\",\n    label: \"Vatican City\",\n    value: \"vatican-city\",\n  },\n  {\n    code: \"ve\",\n    continent: \"South America\",\n    label: \"Venezuela\",\n    value: \"venezuela\",\n  },\n  { code: \"vn\", continent: \"Asia\", label: \"Vietnam\", value: \"vietnam\" },\n  { code: \"ye\", continent: \"Asia\", label: \"Yemen\", value: \"yemen\" },\n  { code: \"zm\", continent: \"Africa\", label: \"Zambia\", value: \"zambia\" },\n  { code: \"zw\", continent: \"Africa\", label: \"Zimbabwe\", value: \"zimbabwe\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox defaultValue={countries[0]} items={countries}>\n      <ComboboxTrigger\n        render={\n          <Button\n            className=\"w-full justify-between font-normal\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <ComboboxValue />\n        <ChevronsUpDownIcon className=\"-me-1!\" />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label=\"Select country\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"e.g. United Kingdom\"\n            showTrigger={false}\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No countries found.</ComboboxEmpty>\n        <ComboboxList>\n          {(country: Country) => (\n            <ComboboxItem key={country.code} value={country}>\n              {country.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-11.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    const selectedItem = formData.get(\"item\");\n    const itemValue =\n      items.find((item) => item.label === selectedItem)?.value || selectedItem;\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Favorite item: ${itemValue || \"\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-64\" onSubmit={onSubmit}>\n      <Field name=\"item\">\n        <FieldLabel>Favorite item</FieldLabel>\n        <Combobox items={items} required>\n          <ComboboxInput placeholder=\"Select an item...\" />\n          <ComboboxPopup>\n            <ComboboxEmpty>No results found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item.value} value={item}>\n                  {item.label}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxPopup>\n        </Combobox>\n        <FieldError>Please select a item.</FieldError>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-12.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    const selectedItems = formData.getAll(\"items\");\n    const itemValues = selectedItems.map(\n      (selectedItem) =>\n        items.find((item) => item.label === selectedItem)?.value ||\n        selectedItem,\n    );\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Favorite items: ${itemValues.join(\", \") || \"\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-64\" onSubmit={onSubmit}>\n      <Field name=\"items\">\n        <FieldLabel>Favorite items</FieldLabel>\n        <Combobox items={items} multiple required>\n          <ComboboxChips>\n            <ComboboxValue>\n              {(value: { value: string; label: string }[]) => (\n                <>\n                  {value?.map((item) => (\n                    <ComboboxChip aria-label={item.label} key={item.value}>\n                      {item.label}\n                    </ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput\n                    placeholder={value.length > 0 ? undefined : \"Select items…\"}\n                  />\n                </>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxPopup>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item.value} value={item}>\n                  {item.label}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxPopup>\n        </Combobox>\n        <FieldError>Please select at least one item.</FieldError>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-13.tsx",
    "content": "\"use client\";\n\nimport { SearchIcon } from \"lucide-react\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        aria-label=\"Search items\"\n        placeholder=\"Search items…\"\n        startAddon={<SearchIcon />}\n      />\n      <ComboboxPopup>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-14.tsx",
    "content": "\"use client\";\n\nimport { SearchIcon } from \"lucide-react\";\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox defaultValue={[items[0], items[3]]} items={items} multiple>\n      <ComboboxChips startAddon={<SearchIcon />}>\n        <ComboboxValue>\n          {(value: { value: string; label: string }[]) => (\n            <>\n              {value?.map((item) => (\n                <ComboboxChip aria-label={item.label} key={item.value}>\n                  {item.label}\n                </ComboboxChip>\n              ))}\n              <ComboboxChipsInput\n                aria-label=\"Select a item\"\n                placeholder={value.length > 0 ? undefined : \"Select a item...\"}\n              />\n            </>\n          )}\n        </ComboboxValue>\n      </ComboboxChips>\n      <ComboboxPopup>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-15.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        aria-label=\"Select a item\"\n        className=\"[--radius-lg:9999px] [--radius:9999px]\"\n        placeholder=\"Select a item...\"\n      />\n      <ComboboxPopup>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-16.tsx",
    "content": "\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nexport default function Particle() {\n  const timezones = Intl.supportedValuesOf(\"timeZone\");\n\n  const formattedTimezones = useMemo(() => {\n    return timezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \" \")}`,\n          numericOffset: totalMinutes,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, [timezones]);\n\n  const defaultTimezone = formattedTimezones.find(\n    (tz) => tz.value === \"Europe/London\",\n  );\n\n  return (\n    <Combobox\n      autoHighlight\n      defaultValue={defaultTimezone}\n      items={formattedTimezones}\n    >\n      <ComboboxInput\n        aria-label=\"Select timezone\"\n        placeholder=\"Select timezone...\"\n      />\n      <ComboboxPopup>\n        <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-17.tsx",
    "content": "\"use client\";\n\nimport { SearchIcon } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { SelectButton } from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const timezones = Intl.supportedValuesOf(\"timeZone\");\n\n  const formattedTimezones = useMemo(() => {\n    return timezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \" \")}`,\n          numericOffset: totalMinutes,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, [timezones]);\n\n  const _defaultTimezone = formattedTimezones.find(\n    (tz) => tz.value === \"Europe/London\",\n  );\n\n  return (\n    <Combobox autoHighlight items={formattedTimezones}>\n      <ComboboxTrigger render={<SelectButton />}>\n        <ComboboxValue placeholder=\"Select timezone\" />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label=\"Select timezone\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"e.g. Europe/London\"\n            showTrigger={false}\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-18.tsx",
    "content": "\"use client\";\n\nimport { SearchIcon } from \"lucide-react\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport { SelectButton } from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox items={items}>\n      <ComboboxTrigger render={<SelectButton />}>\n        <ComboboxValue placeholder=\"Select a fruit\" />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label=\"Select a fruit\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"Search fruits...\"\n            showTrigger={false}\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-2.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox defaultValue={items[2]} disabled items={items}>\n      <ComboboxInput\n        aria-label=\"Select an item\"\n        placeholder=\"Select an item…\"\n      />\n      <ComboboxPopup>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-3.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        aria-label=\"Select an item\"\n        placeholder=\"Select an item...\"\n        size=\"sm\"\n      />\n      <ComboboxPopup>\n        <ComboboxEmpty>No results found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-4.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        aria-label=\"Select an item\"\n        placeholder=\"Select an item...\"\n        size=\"lg\"\n      />\n      <ComboboxPopup>\n        <ComboboxEmpty>No results found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-5.tsx",
    "content": "\"use client\";\n\nimport { useId } from \"react\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Combobox items={items}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <Label htmlFor={id}>Fruits</Label>\n        <ComboboxInput\n          aria-label=\"Select an item\"\n          id={id}\n          placeholder=\"Select an item...\"\n        />\n      </div>\n      <ComboboxPopup>\n        <ComboboxEmpty>No results found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-6.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox autoHighlight items={items}>\n      <ComboboxInput\n        aria-label=\"Select an item\"\n        placeholder=\"Select an item...\"\n      />\n      <ComboboxPopup>\n        <ComboboxEmpty>No results found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-7.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox items={items}>\n      <ComboboxInput\n        aria-label=\"Select a item\"\n        placeholder=\"Select a item…\"\n        showClear\n      />\n      <ComboboxPopup>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-8.tsx",
    "content": "\"use client\";\n\nimport { Fragment } from \"react\";\nimport {\n  Combobox,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxSeparator,\n} from \"@/registry/default/ui/combobox\";\n\n// Grouped items demo\ntype Tag = { id: string; label: string; group: \"Status\" | \"Priority\" | \"Team\" };\ntype TagGroup = { value: string; items: Tag[] };\n\nconst tagsData: Tag[] = [\n  // Status\n  { group: \"Status\", id: \"s-open\", label: \"Open\" },\n  { group: \"Status\", id: \"s-in-progress\", label: \"In progress\" },\n  { group: \"Status\", id: \"s-blocked\", label: \"Blocked\" },\n  { group: \"Status\", id: \"s-resolved\", label: \"Resolved\" },\n  { group: \"Status\", id: \"s-closed\", label: \"Closed\" },\n  // Priority\n  { group: \"Priority\", id: \"p-low\", label: \"Low\" },\n  { group: \"Priority\", id: \"p-medium\", label: \"Medium\" },\n  { group: \"Priority\", id: \"p-high\", label: \"High\" },\n  { group: \"Priority\", id: \"p-urgent\", label: \"Urgent\" },\n  // Team\n  { group: \"Team\", id: \"t-design\", label: \"Design\" },\n  { group: \"Team\", id: \"t-frontend\", label: \"Frontend\" },\n  { group: \"Team\", id: \"t-backend\", label: \"Backend\" },\n  { group: \"Team\", id: \"t-devops\", label: \"DevOps\" },\n  { group: \"Team\", id: \"t-qa\", label: \"QA\" },\n  { group: \"Team\", id: \"t-mobile\", label: \"Mobile\" },\n  { group: \"Team\", id: \"t-data\", label: \"Data\" },\n  { group: \"Team\", id: \"t-security\", label: \"Security\" },\n  { group: \"Team\", id: \"t-platform\", label: \"Platform\" },\n  { group: \"Team\", id: \"t-infra\", label: \"Infrastructure\" },\n  { group: \"Team\", id: \"t-product\", label: \"Product\" },\n  { group: \"Team\", id: \"t-marketing\", label: \"Marketing\" },\n  { group: \"Team\", id: \"t-sales\", label: \"Sales\" },\n  { group: \"Team\", id: \"t-support\", label: \"Support\" },\n  { group: \"Team\", id: \"t-research\", label: \"Research\" },\n  { group: \"Team\", id: \"t-content\", label: \"Content\" },\n  { group: \"Team\", id: \"t-analytics\", label: \"Analytics\" },\n  { group: \"Team\", id: \"t-operations\", label: \"Operations\" },\n  { group: \"Team\", id: \"t-finance\", label: \"Finance\" },\n  { group: \"Team\", id: \"t-hr\", label: \"HR\" },\n  { group: \"Team\", id: \"t-legal\", label: \"Legal\" },\n  { group: \"Team\", id: \"t-growth\", label: \"Growth\" },\n  { group: \"Team\", id: \"t-partner\", label: \"Partner\" },\n  { group: \"Team\", id: \"t-community\", label: \"Community\" },\n  { group: \"Team\", id: \"t-docs\", label: \"Docs\" },\n  { group: \"Team\", id: \"t-l10n\", label: \"Localization\" },\n  { group: \"Team\", id: \"t-a11y\", label: \"Accessibility\" },\n  { group: \"Team\", id: \"t-sre\", label: \"SRE\" },\n  { group: \"Team\", id: \"t-release\", label: \"Release\" },\n  { group: \"Team\", id: \"t-architecture\", label: \"Architecture\" },\n  { group: \"Team\", id: \"t-ux\", label: \"UX\" },\n  { group: \"Team\", id: \"t-ui\", label: \"UI\" },\n  { group: \"Team\", id: \"t-management\", label: \"Management\" },\n];\n\nfunction groupTags(tags: Tag[]): TagGroup[] {\n  const groups: Record<string, Tag[]> = {};\n  for (const tag of tags) {\n    if (!groups[tag.group]) {\n      groups[tag.group] = [];\n    }\n    groups[tag.group]?.push(tag);\n  }\n\n  const order: Array<TagGroup[\"value\"]> = [\"Status\", \"Priority\", \"Team\"];\n  return order.map((value) => ({ items: groups[value] ?? [], value }));\n}\n\nconst groupedTags: TagGroup[] = groupTags(tagsData);\n\nexport default function Particle() {\n  return (\n    <Combobox items={groupedTags}>\n      <div className=\"flex flex-col items-start gap-2\">\n        <ComboboxInput aria-label=\"Search tags\" placeholder=\"e.g. feature\" />\n      </div>\n      <ComboboxPopup>\n        <ComboboxEmpty>No tags found.</ComboboxEmpty>\n        <ComboboxList>\n          {(group: TagGroup) => (\n            <Fragment key={group.value}>\n              <ComboboxGroup items={group.items}>\n                <ComboboxGroupLabel>{group.value}</ComboboxGroupLabel>\n                <ComboboxCollection>\n                  {(tag: Tag) => (\n                    <ComboboxItem key={tag.id} value={tag}>\n                      {tag.label}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n              {group.value !== \"Team\" && <ComboboxSeparator />}\n            </Fragment>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-combobox-9.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox defaultValue={[items[0], items[4]]} items={items} multiple>\n      <ComboboxChips>\n        <ComboboxValue>\n          {(value: { value: string; label: string }[]) => (\n            <>\n              {value?.map((item) => (\n                <ComboboxChip aria-label={item.label} key={item.value}>\n                  {item.label}\n                </ComboboxChip>\n              ))}\n              <ComboboxChipsInput\n                aria-label=\"Select a item\"\n                placeholder={value.length > 0 ? undefined : \"Select a item...\"}\n              />\n            </>\n          )}\n        </ComboboxValue>\n      </ComboboxChips>\n      <ComboboxPopup>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item) => (\n            <ComboboxItem key={item.value} value={item}>\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-command-1.tsx",
    "content": "\"use client\";\n\nimport { ArrowDownIcon, ArrowUpIcon, CornerDownLeftIcon } from \"lucide-react\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandDialogTrigger,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\n\nexport interface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n}\n\nexport interface Group {\n  value: string;\n  items: Item[];\n}\n\nexport const suggestions: Item[] = [\n  { label: \"Linear\", shortcut: \"⌘L\", value: \"linear\" },\n  { label: \"Figma\", shortcut: \"⌘F\", value: \"figma\" },\n  { label: \"Slack\", shortcut: \"⌘S\", value: \"slack\" },\n  { label: \"YouTube\", shortcut: \"⌘Y\", value: \"youtube\" },\n  { label: \"Raycast\", shortcut: \"⌘R\", value: \"raycast\" },\n];\n\nexport const commands: Item[] = [\n  { label: \"Clipboard History\", shortcut: \"⌘⇧C\", value: \"clipboard-history\" },\n  { label: \"Import Extension\", shortcut: \"⌘I\", value: \"import-extension\" },\n  { label: \"Create Snippet\", shortcut: \"⌘N\", value: \"create-snippet\" },\n  { label: \"System Preferences\", shortcut: \"⌘,\", value: \"system-preferences\" },\n  { label: \"Window Management\", shortcut: \"⌘⇧W\", value: \"window-management\" },\n];\n\nexport const groupedItems: Group[] = [\n  { items: suggestions, value: \"Suggestions\" },\n  { items: commands, value: \"Commands\" },\n];\n\nexport default function Particle() {\n  const [open, setOpen] = useState(false);\n\n  function handleItemClick(_item: Item) {\n    setOpen(false);\n  }\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        setOpen((open) => !open);\n      }\n    };\n\n    document.addEventListener(\"keydown\", down);\n    return () => document.removeEventListener(\"keydown\", down);\n  }, []);\n\n  return (\n    <CommandDialog onOpenChange={setOpen} open={open}>\n      <CommandDialogTrigger render={<Button variant=\"outline\" />}>\n        Open Command Palette\n        <KbdGroup>\n          <Kbd>⌘</Kbd>\n          <Kbd>J</Kbd>\n        </KbdGroup>\n      </CommandDialogTrigger>\n      <CommandDialogPopup>\n        <Command items={groupedItems}>\n          <CommandInput placeholder=\"Search for apps and commands...\" />\n          <CommandPanel>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandList>\n              {(group: Group, _index: number) => (\n                <Fragment key={group.value}>\n                  <CommandGroup items={group.items}>\n                    <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                    <CommandCollection>\n                      {(item: Item) => (\n                        <CommandItem\n                          key={item.value}\n                          onClick={() => handleItemClick(item)}\n                          value={item.value}\n                        >\n                          <span className=\"flex-1\">{item.label}</span>\n                          {item.shortcut && (\n                            <CommandShortcut>{item.shortcut}</CommandShortcut>\n                          )}\n                        </CommandItem>\n                      )}\n                    </CommandCollection>\n                  </CommandGroup>\n                  <CommandSeparator />\n                </Fragment>\n              )}\n            </CommandList>\n          </CommandPanel>\n          <CommandFooter>\n            <div className=\"flex items-center gap-4\">\n              <div className=\"flex items-center gap-2\">\n                <KbdGroup>\n                  <Kbd>\n                    <ArrowUpIcon />\n                  </Kbd>\n                  <Kbd>\n                    <ArrowDownIcon />\n                  </Kbd>\n                </KbdGroup>\n                <span>Navigate</span>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Kbd>\n                  <CornerDownLeftIcon />\n                </Kbd>\n                <span>Open</span>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Kbd>Esc</Kbd>\n              <span>Close</span>\n            </div>\n          </CommandFooter>\n        </Command>\n      </CommandDialogPopup>\n    </CommandDialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-command-2.tsx",
    "content": "\"use client\";\n\nimport {\n  ArrowDownIcon,\n  ArrowLeftIcon,\n  ArrowUpIcon,\n  CircleQuestionMarkIcon,\n  CornerDownLeftIcon,\n  SearchIcon,\n  SparklesIcon,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport {\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAutocompleteFilter } from \"@/registry/default/ui/autocomplete\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Command,\n  CommandCollection,\n  CommandCreateHandle,\n  CommandDialog,\n  CommandDialogPopup,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandGroupLabel,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandPanel,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/default/ui/command\";\nimport { EmptyMedia } from \"@/registry/default/ui/empty\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\ninterface Item {\n  value: string;\n  label: string;\n  shortcut?: string;\n  keywords?: string[];\n}\n\ninterface Group {\n  value: string;\n  items: Item[];\n}\n\nconst commandGroups: Group[] = [\n  {\n    items: [\n      {\n        keywords: [\"dash\"],\n        label: \"Dashboard\",\n        shortcut: \"d\",\n        value: \"dashboard\",\n      },\n      {\n        keywords: [\"proj\"],\n        label: \"Projects\",\n        shortcut: \"p\",\n        value: \"projects\",\n      },\n      { keywords: [\"team\"], label: \"Team\", shortcut: \"t\", value: \"team\" },\n    ],\n    value: \"Pages\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"prof\"],\n        label: \"Profile\",\n        shortcut: \"p s\",\n        value: \"profile\",\n      },\n      {\n        keywords: [\"acc\"],\n        label: \"Account\",\n        shortcut: \"a s\",\n        value: \"account\",\n      },\n      {\n        keywords: [\"pref\"],\n        label: \"Preferences\",\n        shortcut: \"p r\",\n        value: \"preferences\",\n      },\n    ],\n    value: \"Settings\",\n  },\n  {\n    items: [\n      {\n        keywords: [\"docs\"],\n        label: \"Documentation\",\n        shortcut: \"d o\",\n        value: \"docs\",\n      },\n      {\n        keywords: [\"sup\"],\n        label: \"Support\",\n        shortcut: \"s u\",\n        value: \"support\",\n      },\n      {\n        keywords: [\"feed\"],\n        label: \"Feedback\",\n        shortcut: \"f b\",\n        value: \"feedback\",\n      },\n    ],\n    value: \"Help\",\n  },\n];\n\nconst MOCK_AI_RESPONSE = `To create a new project, navigate to the Projects page and click the \"New Project\" button in the top right corner. You'll be prompted to enter a project name and description.\n\nOnce created, you can invite team members by clicking the \"Share\" button and entering their email addresses. Team members will receive an invitation link via email or you can add them manually by clicking the \"Add Team Member\" button in the project settings.\n\nYou can customize project settings at any time by clicking the settings icon in the project header. For more information, see the Project Settings documentation.`;\n\nconst MOCK_REFERENCE_LINKS = [\n  { title: \"Creating Projects\", url: \"/docs/projects/create\" },\n  { title: \"Team Collaboration\", url: \"/docs/team/collaborate\" },\n  { title: \"Project Settings\", url: \"/docs/projects/settings\" },\n];\n\nexport const commandHandle: ReturnType<typeof CommandCreateHandle> =\n  CommandCreateHandle();\n\ninterface AIState {\n  mode: boolean;\n  query: string;\n  submittedQuery: string;\n  response: string;\n  referenceLinks: Array<{ title: string; url: string }>;\n  isGenerating: boolean;\n  error: string | null;\n}\n\nconst initialAIState: AIState = {\n  error: null,\n  isGenerating: false,\n  mode: false,\n  query: \"\",\n  referenceLinks: [],\n  response: \"\",\n  submittedQuery: \"\",\n};\n\nfunction markdownToSafeHTML(markdown: string): string {\n  // Simple markdown to HTML converter for demo purposes\n  return markdown\n    .split(\"\\n\\n\")\n    .map((para) => `<p>${para}</p>`)\n    .join(\"\");\n}\n\nexport default function PCommand2() {\n  const [open, setOpen] = useState(false);\n  const [aiState, setAIState] = useState<AIState>(initialAIState);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const aiInputRef = useRef<HTMLInputElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const abortControllerRef = useRef<AbortController | null>(null);\n  const commandResetKeyRef = useRef(0);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      abortControllerRef.current?.abort();\n    };\n  }, []);\n\n  const resetAIState = useCallback(() => {\n    abortControllerRef.current?.abort();\n    setAIState(initialAIState);\n  }, []);\n\n  const handleItemClick = useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const handleBackToSearch = useCallback(() => {\n    resetAIState();\n    setSearchQuery(\"\");\n    commandResetKeyRef.current += 1;\n    searchInputRef.current?.focus();\n  }, [resetAIState]);\n\n  const handleGenerateAI = useCallback(\n    async (queryOverride?: string) => {\n      const query = queryOverride || aiState.query;\n      if (!query.trim()) return;\n\n      abortControllerRef.current?.abort();\n      const controller = new AbortController();\n      abortControllerRef.current = controller;\n\n      setAIState((prev) => ({\n        ...prev,\n        error: null,\n        isGenerating: true,\n        query: \"\",\n        referenceLinks: [],\n        response: \"\",\n        submittedQuery: query,\n      }));\n\n      try {\n        await new Promise<void>((resolve, reject) => {\n          const timeout = setTimeout(resolve, 1500);\n          controller.signal.addEventListener(\"abort\", () => {\n            clearTimeout(timeout);\n            reject(new Error(\"aborted\"));\n          });\n        });\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          isGenerating: false,\n          referenceLinks: MOCK_REFERENCE_LINKS,\n          response: MOCK_AI_RESPONSE,\n        }));\n      } catch (error) {\n        if (error instanceof Error && error.message === \"aborted\") {\n          return;\n        }\n\n        if (controller.signal.aborted) return;\n\n        setAIState((prev) => ({\n          ...prev,\n          error: \"Failed to generate response. Please try again.\",\n          isGenerating: false,\n        }));\n      }\n    },\n    [aiState.query],\n  );\n\n  const handleAskAI = useCallback(() => {\n    const currentQuery = searchQuery;\n    setSearchQuery(\"\");\n\n    if (currentQuery.trim()) {\n      setAIState((prev) => ({ ...prev, mode: true }));\n      handleGenerateAI(currentQuery);\n    } else {\n      setAIState((prev) => ({ ...prev, mode: true, query: \"\" }));\n      aiInputRef.current?.focus();\n    }\n  }, [searchQuery, handleGenerateAI]);\n\n  const { contains } = useAutocompleteFilter({ sensitivity: \"base\" });\n\n  const filterItem = useCallback(\n    (itemValue: unknown, query: string): boolean => {\n      if (typeof itemValue !== \"object\" || itemValue === null) {\n        return false;\n      }\n\n      const item = itemValue as Item;\n\n      if (contains(item.label, query)) {\n        return true;\n      }\n\n      if (contains(item.value, query)) {\n        return true;\n      }\n\n      if (item.keywords?.some((keyword) => contains(keyword, query))) {\n        return true;\n      }\n\n      return false;\n    },\n    [contains],\n  );\n\n  useEffect(() => {\n    if (!open || !aiState.mode) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        e.stopPropagation();\n        handleBackToSearch();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape, true);\n    return () => document.removeEventListener(\"keydown\", handleEscape, true);\n  }, [open, aiState.mode, handleBackToSearch]);\n\n  useEffect(() => {\n    if (aiState.mode && !aiState.isGenerating) {\n      aiInputRef.current?.focus();\n    }\n  }, [aiState.mode, aiState.isGenerating]);\n\n  const hasResults = useMemo(\n    () =>\n      !searchQuery.trim() ||\n      commandGroups.some((group) =>\n        group.items.some((item) => filterItem(item, searchQuery)),\n      ),\n    [searchQuery, filterItem],\n  );\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      setOpen(newOpen);\n      if (!newOpen) {\n        setSearchQuery(\"\");\n        resetAIState();\n      }\n    },\n    [resetAIState],\n  );\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)} variant=\"outline\">\n        Cmdk with AI\n      </Button>\n      <CommandDialog\n        handle={commandHandle}\n        onOpenChange={handleOpenChange}\n        open={open}\n      >\n        <CommandDialogPopup>\n          {!aiState.mode ? (\n            <Command\n              filter={filterItem}\n              items={commandGroups}\n              key={commandResetKeyRef.current}\n            >\n              <div className=\"relative flex items-center *:first:flex-1\">\n                <CommandInput\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Tab\") {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                    if (\n                      e.key === \"Enter\" &&\n                      !hasResults &&\n                      searchQuery.trim()\n                    ) {\n                      e.preventDefault();\n                      handleAskAI();\n                    }\n                  }}\n                  placeholder=\"Type a command or search...\"\n                  ref={searchInputRef}\n                  value={searchQuery}\n                />\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleAskAI}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <SparklesIcon className=\"size-4 sm:size-3.5\" />\n                  Ask AI\n                  <Kbd className=\"ms-0.5 -me-1.5\">Tab</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <CommandEmpty className=\"not-empty:py-12\">\n                  {searchQuery.trim() && (\n                    <div className=\"wrap-break-word flex flex-col flex-wrap items-center gap-2\">\n                      <EmptyMedia variant=\"icon\">\n                        <SearchIcon />\n                      </EmptyMedia>\n                      <p>No results found.</p>\n                      <p>\n                        Press <Kbd>Enter</Kbd> to ask AI about:\n                        <br />{\" \"}\n                        <strong className=\"font-medium text-foreground\">\n                          {searchQuery}\n                        </strong>\n                      </p>\n                    </div>\n                  )}\n                </CommandEmpty>\n                <CommandList>\n                  {(group: Group) => (\n                    <Fragment key={group.value}>\n                      <CommandGroup items={group.items}>\n                        <CommandGroupLabel>{group.value}</CommandGroupLabel>\n                        <CommandCollection>\n                          {(item: Item) => (\n                            <CommandItem\n                              key={item.value}\n                              onClick={handleItemClick}\n                              value={item}\n                            >\n                              <span className=\"flex-1\">{item.label}</span>\n                              {item.shortcut && (\n                                <CommandShortcut>\n                                  {item.shortcut}\n                                </CommandShortcut>\n                              )}\n                            </CommandItem>\n                          )}\n                        </CommandCollection>\n                      </CommandGroup>\n                      <CommandSeparator />\n                    </Fragment>\n                  )}\n                </CommandList>\n              </CommandPanel>\n              <CommandFooter>\n                {hasResults ? (\n                  <>\n                    <div className=\"flex items-center gap-4\">\n                      <div className=\"flex items-center gap-2\">\n                        <KbdGroup>\n                          <Kbd>\n                            <ArrowUpIcon />\n                          </Kbd>\n                          <Kbd>\n                            <ArrowDownIcon />\n                          </Kbd>\n                        </KbdGroup>\n                        <span>Navigate</span>\n                      </div>\n                      <div className=\"flex items-center gap-2\">\n                        <Kbd>\n                          <CornerDownLeftIcon />\n                        </Kbd>\n                        <span>Open</span>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <Kbd>Esc</Kbd>\n                      <span>Close</span>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"ms-auto flex items-center gap-2\">\n                    <Kbd>Esc</Kbd>\n                    <span>Close</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          ) : (\n            <Command>\n              <div className=\"flex items-center *:first:flex-1\">\n                <div className=\"px-2.5 py-1.5\">\n                  <div className=\"relative w-full\">\n                    <div\n                      aria-hidden=\"true\"\n                      className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n                      data-slot=\"autocomplete-start-addon\"\n                    >\n                      <SparklesIcon />\n                    </div>\n                    <Input\n                      aria-label=\"AI query input\"\n                      className=\"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 *:data-[slot=input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=input]:ps-[calc(--spacing(8)-1px)]\"\n                      disabled={aiState.isGenerating}\n                      onChange={(e) =>\n                        setAIState((prev) => ({\n                          ...prev,\n                          query: e.target.value,\n                        }))\n                      }\n                      onKeyDown={(e) => {\n                        if (e.key === \"Enter\" && !aiState.isGenerating) {\n                          handleGenerateAI();\n                        }\n                        if (e.key === \"Escape\") {\n                          e.preventDefault();\n                          handleBackToSearch();\n                        }\n                      }}\n                      placeholder=\"Ask AI anything…\"\n                      ref={aiInputRef}\n                      size=\"lg\"\n                      value={aiState.query}\n                    />\n                  </div>\n                </div>\n                <Button\n                  className=\"me-2.5 rounded-md not-hover:text-muted-foreground text-sm sm:text-xs\"\n                  onClick={handleBackToSearch}\n                  size=\"sm\"\n                  variant=\"ghost\"\n                >\n                  <ArrowLeftIcon className=\"size-4 sm:size-3.5\" />\n                  Back to search\n                  <Kbd className=\"ms-0.5 -me-1.5\">Esc</Kbd>\n                </Button>\n              </div>\n              <CommandPanel>\n                <ScrollArea scrollbarGutter scrollFade>\n                  <div className=\"p-5\">\n                    {!aiState.isGenerating &&\n                      !aiState.response &&\n                      !aiState.error && (\n                        <div className=\"flex items-center justify-center py-12\">\n                          <p className=\"text-muted-foreground text-sm\">\n                            Ask AI anything and press <Kbd>Enter</Kbd> to get\n                            started.\n                          </p>\n                        </div>\n                      )}\n\n                    {aiState.error && (\n                      <div\n                        aria-live=\"polite\"\n                        className=\"text-destructive text-sm\"\n                        role=\"alert\"\n                      >\n                        {aiState.error}\n                      </div>\n                    )}\n\n                    {aiState.isGenerating && (\n                      <div className=\"flex flex-col gap-4\">\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-1/2\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/4\" />\n                        </div>\n                        <div className=\"flex flex-col gap-2\">\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-full\" />\n                          <Skeleton className=\"h-4 w-3/5\" />\n                        </div>\n                      </div>\n                    )}\n\n                    {aiState.response && !aiState.isGenerating && (\n                      <>\n                        <div\n                          aria-live=\"polite\"\n                          className=\"text-muted-foreground text-sm **:[a]:underline **:[a]:underline-offset-4 **:[code]:rounded-md **:[code]:bg-muted **:[code]:px-[0.3rem] **:[code]:py-[0.2rem] **:[code]:font-mono **:[p]:not-first:mt-3 **:[p]:leading-relaxed **:[strong,a]:font-medium **:[strong,a]:text-foreground\"\n                          dangerouslySetInnerHTML={{\n                            __html: markdownToSafeHTML(aiState.response),\n                          }}\n                        />\n                        {aiState.referenceLinks.length > 0 && (\n                          <div className=\"mt-4 flex flex-wrap gap-2\">\n                            {aiState.referenceLinks.map((link, index) => (\n                              <Button\n                                key={`${link.url}-${index}`}\n                                render={<Link href={link.url} />}\n                                size=\"sm\"\n                                variant=\"secondary\"\n                              >\n                                {link.title}\n                              </Button>\n                            ))}\n                          </div>\n                        )}\n                      </>\n                    )}\n                  </div>\n                </ScrollArea>\n              </CommandPanel>\n\n              <CommandFooter>\n                {aiState.isGenerating ? (\n                  <div aria-live=\"polite\" className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <Spinner className=\"size-3\" />\n                    </div>\n                    <span className=\"animate-pulse\">Generating response…</span>\n                  </div>\n                ) : aiState.response ? (\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"flex h-5 items-center justify-center\">\n                      <CircleQuestionMarkIcon className=\"size-3\" />\n                    </div>\n                    You asked: <span>&quot;{aiState.submittedQuery}&quot;</span>\n                  </div>\n                ) : (\n                  <div className=\"flex items-center gap-2\">\n                    <Kbd>\n                      <CornerDownLeftIcon />\n                    </Kbd>\n                    <span>Ask AI</span>\n                  </div>\n                )}\n              </CommandFooter>\n            </Command>\n          )}\n        </CommandDialogPopup>\n      </CommandDialog>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-1.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date ? format(date, \"PPP\") : \"Pick a date\"}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date}\n          mode=\"single\"\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-2.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-3.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DropdownProps } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\ninterface DropdownItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nfunction CalendarDropdown(props: DropdownProps) {\n  const { options, value, onChange, \"aria-label\": ariaLabel } = props;\n\n  const items: DropdownItem[] =\n    options?.map((option) => ({\n      disabled: option.disabled,\n      label: option.label,\n      value: option.value.toString(),\n    })) ?? [];\n\n  const selectedItem = items.find((item) => item.value === value?.toString());\n\n  const handleValueChange = (newValue: DropdownItem | null) => {\n    if (onChange && newValue) {\n      const syntheticEvent = {\n        target: { value: newValue.value },\n      } as React.ChangeEvent<HTMLSelectElement>;\n      onChange(syntheticEvent);\n    }\n  };\n\n  return (\n    <Combobox\n      aria-label={ariaLabel}\n      autoHighlight\n      items={items}\n      onValueChange={handleValueChange}\n      value={selectedItem}\n    >\n      <ComboboxInput\n        className=\"**:[input]:w-0 **:[input]:flex-1\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <ComboboxPopup aria-label={ariaLabel}>\n        <ComboboxEmpty>No items found.</ComboboxEmpty>\n        <ComboboxList>\n          {(item: DropdownItem) => (\n            <ComboboxItem\n              disabled={item.disabled}\n              key={item.value}\n              value={item}\n            >\n              {item.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n\nexport default function Particle() {\n  const [date, setDate] = React.useState<Date | undefined>();\n  const id = React.useId();\n  return (\n    <Field>\n      <FieldLabel htmlFor={id}>Start date</FieldLabel>\n      <Popover>\n        <PopoverTrigger\n          id={id}\n          render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n        >\n          <CalendarIcon aria-hidden=\"true\" />\n          {date ? format(date, \"PPP\") : \"Pick a date\"}\n        </PopoverTrigger>\n        <PopoverPopup>\n          <Calendar\n            captionLayout=\"dropdown\"\n            components={{ Dropdown: CalendarDropdown }}\n            defaultMonth={date}\n            endMonth={new Date()}\n            mode=\"single\"\n            onSelect={setDate}\n            selected={date}\n            startMonth={new Date(1900, 0)}\n          />\n        </PopoverPopup>\n      </Popover>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-4.tsx",
    "content": "\"use client\";\n\nimport { addDays, format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const today = new Date();\n  const [month, setMonth] = useState(today);\n  const [date, setDate] = useState<Date | undefined>(today);\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date ? format(date, \"PPP\") : \"Pick a date\"}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <div className=\"flex max-sm:flex-col\">\n          <div className=\"relative py-1 ps-1 max-sm:order-1 max-sm:border-t\">\n            <div className=\"flex h-full flex-col sm:border-e sm:pe-3\">\n              <Button\n                className=\"w-full justify-start\"\n                onClick={() => {\n                  setDate(today);\n                  setMonth(today);\n                }}\n                size=\"sm\"\n                variant=\"ghost\"\n              >\n                Today\n              </Button>\n              <Button\n                className=\"w-full justify-start\"\n                onClick={() => {\n                  const tomorrow = addDays(today, 1);\n                  setDate(tomorrow);\n                  setMonth(tomorrow);\n                }}\n                size=\"sm\"\n                variant=\"ghost\"\n              >\n                Tomorrow\n              </Button>\n              <Button\n                className=\"w-full justify-start\"\n                onClick={() => {\n                  const in3Days = addDays(today, 3);\n                  setDate(in3Days);\n                  setMonth(in3Days);\n                }}\n                size=\"sm\"\n                variant=\"ghost\"\n              >\n                In 3 days\n              </Button>\n              <Button\n                className=\"w-full justify-start\"\n                onClick={() => {\n                  const inAWeek = addDays(today, 7);\n                  setDate(inAWeek);\n                  setMonth(inAWeek);\n                }}\n                size=\"sm\"\n                variant=\"ghost\"\n              >\n                In a week\n              </Button>\n            </div>\n          </div>\n          <Calendar\n            className=\"max-sm:pb-3 sm:ps-2\"\n            mode=\"single\"\n            month={month}\n            onMonthChange={setMonth}\n            onSelect={setDate}\n            selected={date}\n          />\n        </div>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-5.tsx",
    "content": "\"use client\";\n\nimport { format, isValid, parse } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>();\n  const [inputValue, setInputValue] = useState(\"\");\n  const [month, setMonth] = useState<Date>(() => new Date());\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    setInputValue(value);\n\n    if (value) {\n      const parsedDate = parse(value, \"yyyy-MM-dd\", new Date());\n      if (isValid(parsedDate)) {\n        setDate(parsedDate);\n        setMonth(parsedDate);\n      }\n    } else {\n      setDate(undefined);\n    }\n  };\n\n  const handleSelect = (selectedDate: Date | undefined) => {\n    setDate(selectedDate);\n    if (selectedDate) {\n      setInputValue(format(selectedDate, \"yyyy-MM-dd\"));\n      setMonth(selectedDate);\n    } else {\n      setInputValue(\"\");\n    }\n  };\n\n  return (\n    <Popover>\n      <InputGroup>\n        <InputGroupInput\n          aria-label=\"Select date\"\n          className=\"*:[input]:[&::-webkit-calendar-picker-indicator]:hidden *:[input]:[&::-webkit-calendar-picker-indicator]:appearance-none\"\n          onChange={handleInputChange}\n          onClick={(e) => e.stopPropagation()}\n          type=\"date\"\n          value={inputValue}\n        />\n        <InputGroupAddon>\n          <PopoverTrigger\n            aria-label=\"Select date\"\n            render={\n              <Button aria-label=\"Select date\" size=\"icon-xs\" variant=\"ghost\" />\n            }\n          >\n            <CalendarIcon aria-hidden=\"true\" />\n          </PopoverTrigger>\n        </InputGroupAddon>\n      </InputGroup>\n      <PopoverPopup align=\"start\" alignOffset={-4} sideOffset={8}>\n        <Calendar\n          mode=\"single\"\n          month={month}\n          onMonthChange={setMonth}\n          onSelect={handleSelect}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-6.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>();\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (selectedDate: Date | undefined) => {\n    setDate(selectedDate);\n    setOpen(false);\n  };\n\n  return (\n    <Popover onOpenChange={setOpen} open={open}>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon />\n        {date ? format(date, \"PPP\") : \"Pick a date\"}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar mode=\"single\" onSelect={handleSelect} selected={date} />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-7.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [dates, setDates] = useState<Date[] | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon className=\"shrink-0\" />\n        <span className=\"flex flex-wrap gap-1\">\n          {dates && dates.length > 0 ? (\n            <>\n              {dates.slice(0, 3).map((date) => (\n                <Badge key={date.toISOString()} variant=\"secondary\">\n                  {format(date, \"MMM d\")}\n                </Badge>\n              ))}\n              {dates.length > 3 && (\n                <Badge variant=\"secondary\">+{dates.length - 3}</Badge>\n              )}\n            </>\n          ) : (\n            <span>Pick dates</span>\n          )}\n        </span>\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar mode=\"multiple\" onSelect={setDates} selected={dates} />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-8.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { useState } from \"react\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { SelectButton } from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<Date | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<SelectButton data-placeholder={!date ? \"\" : undefined} />}\n      >\n        {date ? format(date, \"PPP\") : \"Pick a date\"}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date}\n          mode=\"single\"\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-date-picker-9.tsx",
    "content": "\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Calendar } from \"@/registry/default/ui/calendar\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [date, setDate] = useState<DateRange | undefined>();\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={<Button className=\"w-full justify-start\" variant=\"outline\" />}\n      >\n        <CalendarIcon aria-hidden=\"true\" />\n        {date?.from ? (\n          date.to ? (\n            <>\n              {format(date.from, \"LLL dd, y\")} - {format(date.to, \"LLL dd, y\")}\n            </>\n          ) : (\n            format(date.from, \"LLL dd, y\")\n          )\n        ) : (\n          <span>Pick a date range</span>\n        )}\n      </PopoverTrigger>\n      <PopoverPopup>\n        <Calendar\n          defaultMonth={date?.from}\n          mode=\"range\"\n          numberOfMonths={2}\n          onSelect={setDate}\n          selected={date}\n        />\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-dialog-1.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Open Dialog\n      </DialogTrigger>\n      <DialogPopup className=\"sm:max-w-sm\">\n        <Form className=\"contents\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogPanel className=\"grid gap-4\">\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input defaultValue=\"Margaret Welsh\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Username</FieldLabel>\n              <Input defaultValue=\"@maggie.welsh\" type=\"text\" />\n            </Field>\n          </DialogPanel>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Save</Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-dialog-2.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPopup,\n  DialogTitle,\n} from \"@/registry/default/ui/dialog\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  return (\n    <>\n      <Menu>\n        <MenuTrigger render={<Button variant=\"outline\" />}>\n          Open menu\n        </MenuTrigger>\n        <MenuPopup align=\"start\">\n          <MenuItem onClick={() => setDialogOpen(true)}>Open dialog</MenuItem>\n        </MenuPopup>\n      </Menu>\n      <Dialog onOpenChange={setDialogOpen} open={dialogOpen}>\n        <DialogPopup>\n          <DialogHeader>\n            <DialogTitle>Settings</DialogTitle>\n            <DialogDescription>Change your preferences</DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>Close</DialogClose>\n          </DialogFooter>\n        </DialogPopup>\n      </Dialog>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-dialog-3.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Open parent\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>Manage team member</DialogTitle>\n          <DialogDescription>\n            View and manage a user in your team.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogPanel className=\"grid gap-4\">\n          <div className=\"grid gap-1\">\n            <p className=\"text-muted-foreground text-sm\">Name</p>\n            <p className=\"font-medium text-sm\">Bora Baloglu</p>\n          </div>\n          <div className=\"grid gap-1\">\n            <p className=\"text-muted-foreground text-sm\">Email</p>\n            <p className=\"font-medium text-sm\">bora@example.com</p>\n          </div>\n        </DialogPanel>\n        <DialogFooter>\n          <Dialog>\n            <DialogTrigger render={<Button variant=\"outline\" />}>\n              Edit details\n            </DialogTrigger>\n            <DialogPopup showCloseButton={false}>\n              <DialogHeader>\n                <DialogTitle>Edit details</DialogTitle>\n                <DialogDescription>\n                  Make changes to the member&apos;s information.\n                </DialogDescription>\n              </DialogHeader>\n              <DialogPanel className=\"grid gap-4\">\n                <Field>\n                  <FieldLabel>Name</FieldLabel>\n                  <Input defaultValue=\"Bora Baloglu\" type=\"text\" />\n                </Field>\n                <Field>\n                  <FieldLabel>Email</FieldLabel>\n                  <Input defaultValue=\"bora@example.com\" type=\"text\" />\n                </Field>\n              </DialogPanel>\n              <DialogFooter>\n                <DialogClose render={<Button variant=\"ghost\" />}>\n                  Cancel\n                </DialogClose>\n                <Button type=\"submit\">Save changes</Button>\n              </DialogFooter>\n            </DialogPopup>\n          </Dialog>\n        </DialogFooter>\n      </DialogPopup>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-dialog-4.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Field } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const [confirmOpen, setConfirmOpen] = useState(false);\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Dialog\n      onOpenChange={(o) => {\n        if (!o && value) {\n          setConfirmOpen(true);\n        } else {\n          setDialogOpen(o);\n        }\n      }}\n      open={dialogOpen}\n    >\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Compose\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>New message</DialogTitle>\n          <DialogDescription>Type something and try closing.</DialogDescription>\n        </DialogHeader>\n        <Form\n          className=\"contents\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            // Close the dialog when submitting\n            setDialogOpen(false);\n          }}\n        >\n          <DialogPanel>\n            <Field>\n              <Textarea\n                onChange={(e) => setValue(e.target.value)}\n                value={value}\n              />\n            </Field>\n          </DialogPanel>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button\n              onClick={() => {\n                setValue(\"\");\n                setDialogOpen(false);\n              }}\n            >\n              Send\n            </Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n\n      {/* Confirmation dialog */}\n      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>\n        <AlertDialogPopup>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Discard changes?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Your message will be lost.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogClose render={<Button variant=\"ghost\" />}>\n              Go back\n            </AlertDialogClose>\n            <Button\n              onClick={() => {\n                setConfirmOpen(false);\n                setValue(\"\");\n                setDialogOpen(false);\n              }}\n            >\n              Discard\n            </Button>\n          </AlertDialogFooter>\n        </AlertDialogPopup>\n      </AlertDialog>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-dialog-5.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\n\nexport default function Particle() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Terms & Conditions\n      </DialogTrigger>\n      <DialogPopup className=\"sm:max-w-md\" showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>Terms & Conditions</DialogTitle>\n        </DialogHeader>\n        <DialogPanel>\n          <div className=\"space-y-4 [&_strong]:font-semibold [&_strong]:text-foreground\">\n            <div className=\"space-y-4\">\n              <div className=\"space-y-1\">\n                <p>\n                  <strong>Acceptance of Terms</strong>\n                </p>\n                <p>\n                  By accessing and using this website, users agree to comply\n                  with and be bound by these Terms of Service. Users who do not\n                  agree with these terms should discontinue use of the website\n                  immediately.\n                </p>\n              </div>\n              <div className=\"space-y-1\">\n                <p>\n                  <strong>User Account Responsibilities</strong>\n                </p>\n                <p>\n                  Users are responsible for maintaining the confidentiality of\n                  their account credentials. Any activities occurring under a\n                  user&apos;s account are the sole responsibility of the account\n                  holder. Users must notify the website administrators\n                  immediately of any unauthorized account access.\n                </p>\n              </div>\n              <div className=\"space-y-1\">\n                <p>\n                  <strong>Content Usage and Restrictions</strong>\n                </p>\n                <p>\n                  The website and its original content are protected by\n                  intellectual property laws. Users may not reproduce,\n                  distribute, modify, create derivative works, or commercially\n                  exploit any content without explicit written permission from\n                  the website owners.\n                </p>\n              </div>\n              <div className=\"space-y-1\">\n                <p>\n                  <strong>Limitation of Liability</strong>\n                </p>\n                <p>\n                  The website provides content &ldquo;as is&rdquo; without any\n                  warranties. The website owners shall not be liable for direct,\n                  indirect, incidental, consequential, or punitive damages\n                  arising from user interactions with the platform.\n                </p>\n              </div>\n              <div className=\"space-y-1\">\n                <p>\n                  <strong>User Conduct Guidelines</strong>\n                </p>\n                <ul className=\"list-disc pl-6\">\n                  <li>Not upload harmful or malicious content</li>\n                  <li>Respect the rights of other users</li>\n                  <li>\n                    Avoid activities that could disrupt website functionality\n                  </li>\n                  <li>Comply with applicable local and international laws</li>\n                </ul>\n              </div>\n              <div className=\"space-y-1\">\n                <p>\n                  <strong>Modifications to Terms</strong>\n                </p>\n                <p>\n                  The website reserves the right to modify these terms at any\n                  time. Continued use of the website after changes constitutes\n                  acceptance of the new terms.\n                </p>\n              </div>\n              <div className=\"space-y-1\">\n                <p>\n                  <strong>Termination Clause</strong>\n                </p>\n                <p>\n                  The website may terminate or suspend user access without prior\n                  notice for violations of these terms or for any other reason\n                  deemed appropriate by the administration.\n                </p>\n              </div>\n              <div className=\"space-y-1\">\n                <p>\n                  <strong>Governing Law</strong>\n                </p>\n                <p>\n                  These terms are governed by the laws of the jurisdiction where\n                  the website is primarily operated, without regard to conflict\n                  of law principles.\n                </p>\n              </div>\n            </div>\n          </div>\n        </DialogPanel>\n        <DialogFooter>\n          <DialogClose render={<Button variant=\"ghost\" />}>Cancel</DialogClose>\n          <Button type=\"button\">I agree</Button>\n        </DialogFooter>\n      </DialogPopup>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-dialog-6.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Open Dialog\n      </DialogTrigger>\n      <DialogPopup className=\"sm:max-w-sm\">\n        <Form className=\"contents\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogPanel className=\"grid gap-4\">\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input defaultValue=\"Margaret Welsh\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Username</FieldLabel>\n              <Input defaultValue=\"@maggie.welsh\" type=\"text\" />\n            </Field>\n          </DialogPanel>\n          <DialogFooter variant=\"bare\">\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button type=\"submit\">Save</Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-1.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <Drawer>\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Open drawer\n      </DrawerTrigger>\n      <DrawerPopup showBar>\n        <DrawerHeader className=\"text-center\">\n          <DrawerTitle>Notifications</DrawerTitle>\n          <DrawerDescription>\n            This is the description of the drawer.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerFooter\n          className=\"justify-center sm:justify-center\"\n          variant=\"bare\"\n        >\n          <DrawerClose render={<Button variant=\"outline\" />}>Close</DrawerClose>\n        </DrawerFooter>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-10.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Drawer position=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Default footer\n        </DrawerTrigger>\n        <DrawerPopup variant=\"inset\">\n          <Form className=\"contents\">\n            <DrawerHeader>\n              <DrawerTitle>Edit profile</DrawerTitle>\n              <DrawerDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </DrawerDescription>\n            </DrawerHeader>\n            <DrawerPanel className=\"grid gap-4\">\n              <Field>\n                <FieldLabel>Name</FieldLabel>\n                <Input defaultValue=\"Margaret Welsh\" type=\"text\" />\n              </Field>\n              <Field>\n                <FieldLabel>Username</FieldLabel>\n                <Input defaultValue=\"@maggie.welsh\" type=\"text\" />\n              </Field>\n            </DrawerPanel>\n            <DrawerFooter>\n              <DrawerClose render={<Button variant=\"ghost\" />}>\n                Cancel\n              </DrawerClose>\n              <Button>Save</Button>\n            </DrawerFooter>\n          </Form>\n        </DrawerPopup>\n      </Drawer>\n      <Drawer position=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Bare footer\n        </DrawerTrigger>\n        <DrawerPopup variant=\"inset\">\n          <Form className=\"contents\">\n            <DrawerHeader>\n              <DrawerTitle>Edit profile</DrawerTitle>\n              <DrawerDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </DrawerDescription>\n            </DrawerHeader>\n            <DrawerPanel className=\"grid gap-4\">\n              <Field>\n                <FieldLabel>Name</FieldLabel>\n                <Input defaultValue=\"Margaret Welsh\" type=\"text\" />\n              </Field>\n              <Field>\n                <FieldLabel>Username</FieldLabel>\n                <Input defaultValue=\"@maggie.welsh\" type=\"text\" />\n              </Field>\n            </DrawerPanel>\n            <DrawerFooter variant=\"bare\">\n              <DrawerClose render={<Button variant=\"ghost\" />}>\n                Cancel\n              </DrawerClose>\n              <Button>Save</Button>\n            </DrawerFooter>\n          </Form>\n        </DrawerPopup>\n      </Drawer>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-11.tsx",
    "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <Drawer position=\"left\">\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Open menu\n      </DrawerTrigger>\n      <DrawerPopup showCloseButton variant=\"straight\">\n        <DrawerHeader>\n          <DrawerTitle>Menu</DrawerTitle>\n        </DrawerHeader>\n        <DrawerPanel>\n          <nav className=\"-mx-[calc(--spacing(3)-1px)] flex flex-col gap-0.5\">\n            <DrawerClose\n              nativeButton={false}\n              render={\n                <Button\n                  className=\"justify-start\"\n                  render={<Link href=\"#\" />}\n                  variant=\"ghost\"\n                />\n              }\n            >\n              Home\n            </DrawerClose>\n            <DrawerClose\n              nativeButton={false}\n              render={\n                <Button\n                  className=\"justify-start\"\n                  render={<Link href=\"#\" />}\n                  variant=\"ghost\"\n                />\n              }\n            >\n              Profile\n            </DrawerClose>\n            <DrawerClose\n              nativeButton={false}\n              render={\n                <Button\n                  className=\"justify-start\"\n                  render={<Link href=\"#\" />}\n                  variant=\"ghost\"\n                />\n              }\n            >\n              Settings\n            </DrawerClose>\n            <DrawerClose\n              nativeButton={false}\n              render={\n                <Button\n                  className=\"justify-start\"\n                  render={<Link href=\"#\" />}\n                  variant=\"ghost\"\n                />\n              }\n            >\n              Sign out\n            </DrawerClose>\n          </nav>\n        </DrawerPanel>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-12.tsx",
    "content": "\"use client\";\n\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nconst FORM_TITLE = \"Edit profile\";\nconst FORM_DESCRIPTION =\n  \"Make changes to your profile here. Click save when you're done.\";\nconst TRIGGER_LABEL = \"Open\";\nconst CANCEL_LABEL = \"Cancel\";\nconst SAVE_LABEL = \"Save\";\n\nconst formFields = (\n  <>\n    <Field>\n      <FieldLabel>Name</FieldLabel>\n      <Input defaultValue=\"Margaret Welsh\" type=\"text\" />\n    </Field>\n    <Field>\n      <FieldLabel>Username</FieldLabel>\n      <Input defaultValue=\"@maggie.welsh\" type=\"text\" />\n    </Field>\n  </>\n);\n\nexport default function Particle() {\n  const isMobile = useMediaQuery(\"max-md\");\n\n  if (isMobile) {\n    return (\n      <Drawer>\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          {TRIGGER_LABEL}\n        </DrawerTrigger>\n        <DrawerPopup showBar>\n          <Form className=\"contents\">\n            <DrawerHeader>\n              <DrawerTitle>{FORM_TITLE}</DrawerTitle>\n              <DrawerDescription>{FORM_DESCRIPTION}</DrawerDescription>\n            </DrawerHeader>\n            <DrawerPanel className=\"grid gap-4\" scrollable={false}>\n              {formFields}\n            </DrawerPanel>\n            <DrawerFooter>\n              <DrawerClose render={<Button variant=\"ghost\" />}>\n                {CANCEL_LABEL}\n              </DrawerClose>\n              <Button type=\"submit\">{SAVE_LABEL}</Button>\n            </DrawerFooter>\n          </Form>\n        </DrawerPopup>\n      </Drawer>\n    );\n  }\n\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        {TRIGGER_LABEL}\n      </DialogTrigger>\n      <DialogPopup className=\"sm:max-w-sm\">\n        <Form className=\"contents\">\n          <DialogHeader>\n            <DialogTitle>{FORM_TITLE}</DialogTitle>\n            <DialogDescription>{FORM_DESCRIPTION}</DialogDescription>\n          </DialogHeader>\n          <DialogPanel className=\"grid gap-4\">{formFields}</DialogPanel>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              {CANCEL_LABEL}\n            </DialogClose>\n            <Button type=\"submit\">{SAVE_LABEL}</Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n    </Dialog>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-13.tsx",
    "content": "\"use client\";\n\nimport {\n  CopyIcon,\n  EllipsisIcon,\n  PencilIcon,\n  ShareIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerMenu,\n  DrawerMenuCheckboxItem,\n  DrawerMenuGroup,\n  DrawerMenuGroupLabel,\n  DrawerMenuItem,\n  DrawerMenuRadioGroup,\n  DrawerMenuRadioItem,\n  DrawerMenuSeparator,\n  DrawerMenuTrigger,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nconst TRIGGER_ARIA_LABEL = \"Open menu\";\n\nexport default function Particle() {\n  const isMobile = useMediaQuery(\"max-md\");\n\n  if (isMobile) {\n    return (\n      <Drawer>\n        <DrawerTrigger\n          render={\n            <Button\n              aria-label={TRIGGER_ARIA_LABEL}\n              size=\"icon\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <EllipsisIcon aria-hidden />\n        </DrawerTrigger>\n        <DrawerPopup showBar>\n          <DrawerPanel>\n            <DrawerMenu>\n              <DrawerMenuGroup>\n                <DrawerMenuGroupLabel>Actions</DrawerMenuGroupLabel>\n                <DrawerClose render={<DrawerMenuItem />}>\n                  <PencilIcon aria-hidden />\n                  Edit\n                </DrawerClose>\n                <DrawerClose render={<DrawerMenuItem />}>\n                  <CopyIcon aria-hidden />\n                  Duplicate\n                </DrawerClose>\n                <DrawerClose render={<DrawerMenuItem />}>\n                  <ShareIcon aria-hidden />\n                  Share\n                </DrawerClose>\n              </DrawerMenuGroup>\n              <DrawerMenuSeparator />\n              <DrawerMenuCheckboxItem>Shuffle</DrawerMenuCheckboxItem>\n              <DrawerMenuCheckboxItem>Repeat</DrawerMenuCheckboxItem>\n              <DrawerMenuCheckboxItem disabled>\n                Enhanced Audio\n              </DrawerMenuCheckboxItem>\n              <DrawerMenuSeparator />\n              <DrawerMenuGroup>\n                <DrawerMenuGroupLabel>Sort by</DrawerMenuGroupLabel>\n                <DrawerMenuRadioGroup defaultValue=\"artist\">\n                  <DrawerMenuRadioItem value=\"artist\">\n                    Artist\n                  </DrawerMenuRadioItem>\n                  <DrawerMenuRadioItem value=\"album\">Album</DrawerMenuRadioItem>\n                  <DrawerMenuRadioItem value=\"title\">Title</DrawerMenuRadioItem>\n                </DrawerMenuRadioGroup>\n              </DrawerMenuGroup>\n              <DrawerMenuSeparator />\n              <DrawerMenuCheckboxItem variant=\"switch\">\n                Auto save\n              </DrawerMenuCheckboxItem>\n              <DrawerMenuSeparator />\n              <Drawer>\n                <DrawerMenuTrigger>Add to Playlist</DrawerMenuTrigger>\n                <DrawerPopup showBar>\n                  <DrawerPanel>\n                    <DrawerMenu>\n                      <DrawerMenuGroup>\n                        <DrawerMenuGroupLabel>\n                          Add to Playlist\n                        </DrawerMenuGroupLabel>\n                      </DrawerMenuGroup>\n                      <DrawerClose render={<DrawerMenuItem />}>\n                        Jazz\n                      </DrawerClose>\n                      <Drawer>\n                        <DrawerMenuTrigger>Rock</DrawerMenuTrigger>\n                        <DrawerPopup showBar>\n                          <DrawerPanel>\n                            <DrawerMenu>\n                              <DrawerMenuGroup>\n                                <DrawerMenuGroupLabel>\n                                  Rock\n                                </DrawerMenuGroupLabel>\n                              </DrawerMenuGroup>\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Hard Rock\n                              </DrawerClose>\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Soft Rock\n                              </DrawerClose>\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Classic Rock\n                              </DrawerClose>\n                              <DrawerMenuSeparator />\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Metal\n                              </DrawerClose>\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Punk\n                              </DrawerClose>\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Grunge\n                              </DrawerClose>\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Alternative\n                              </DrawerClose>\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Indie\n                              </DrawerClose>\n                              <DrawerClose render={<DrawerMenuItem />}>\n                                Electronic\n                              </DrawerClose>\n                            </DrawerMenu>\n                          </DrawerPanel>\n                        </DrawerPopup>\n                      </Drawer>\n                      <DrawerClose render={<DrawerMenuItem />}>Pop</DrawerClose>\n                    </DrawerMenu>\n                  </DrawerPanel>\n                </DrawerPopup>\n              </Drawer>\n              <DrawerMenuSeparator />\n              <DrawerMenuGroup>\n                <DrawerMenuGroupLabel>Danger zone</DrawerMenuGroupLabel>\n                <DrawerClose render={<DrawerMenuItem variant=\"destructive\" />}>\n                  <TrashIcon aria-hidden />\n                  Delete\n                </DrawerClose>\n              </DrawerMenuGroup>\n            </DrawerMenu>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n    );\n  }\n\n  return (\n    <Menu>\n      <MenuTrigger\n        render={\n          <Button\n            aria-label={TRIGGER_ARIA_LABEL}\n            size=\"icon\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <EllipsisIcon aria-hidden />\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuGroup>\n          <MenuGroupLabel>Actions</MenuGroupLabel>\n          <MenuItem>\n            <PencilIcon aria-hidden />\n            Edit\n          </MenuItem>\n          <MenuItem>\n            <CopyIcon aria-hidden />\n            Duplicate\n          </MenuItem>\n          <MenuItem>\n            <ShareIcon aria-hidden />\n            Share\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuCheckboxItem>Shuffle</MenuCheckboxItem>\n        <MenuCheckboxItem>Repeat</MenuCheckboxItem>\n        <MenuCheckboxItem disabled>Enhanced Audio</MenuCheckboxItem>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuGroupLabel>Sort by</MenuGroupLabel>\n          <MenuRadioGroup defaultValue=\"artist\">\n            <MenuRadioItem value=\"artist\">Artist</MenuRadioItem>\n            <MenuRadioItem value=\"album\">Album</MenuRadioItem>\n            <MenuRadioItem value=\"title\">Title</MenuRadioItem>\n          </MenuRadioGroup>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuCheckboxItem variant=\"switch\">Auto save</MenuCheckboxItem>\n        <MenuSeparator />\n        <MenuSub>\n          <MenuSubTrigger>Add to Playlist</MenuSubTrigger>\n          <MenuSubPopup>\n            <MenuItem>Jazz</MenuItem>\n            <MenuSub>\n              <MenuSubTrigger>Rock</MenuSubTrigger>\n              <MenuSubPopup>\n                <MenuItem>Hard Rock</MenuItem>\n                <MenuItem>Soft Rock</MenuItem>\n                <MenuItem>Classic Rock</MenuItem>\n                <MenuSeparator />\n                <MenuItem>Metal</MenuItem>\n                <MenuItem>Punk</MenuItem>\n                <MenuItem>Grunge</MenuItem>\n                <MenuItem>Alternative</MenuItem>\n                <MenuItem>Indie</MenuItem>\n                <MenuItem>Electronic</MenuItem>\n              </MenuSubPopup>\n            </MenuSub>\n            <MenuItem>Pop</MenuItem>\n          </MenuSubPopup>\n        </MenuSub>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuGroupLabel>Danger zone</MenuGroupLabel>\n          <MenuItem variant=\"destructive\">\n            <TrashIcon aria-hidden />\n            Delete\n          </MenuItem>\n        </MenuGroup>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-14.tsx",
    "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerSwipeArea,\n  DrawerTitle,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <div className=\"relative min-h-80 w-full overflow-hidden rounded-xl border\">\n      <Drawer modal={false} position=\"left\">\n        <DrawerSwipeArea className=\"absolute border-input border-e border-dashed bg-muted\">\n          <span className=\"pointer-events-none absolute top-1/2 left-0 ms-2 -translate-y-1/2 rotate-90 whitespace-nowrap font-medium text-muted-foreground text-xs uppercase\">\n            Swipe area\n          </span>\n        </DrawerSwipeArea>\n\n        <div className=\"flex min-h-80 items-center justify-center p-6 ps-14 text-center\">\n          <p className=\"max-w-56 text-balance text-muted-foreground text-sm\">\n            Swipe from the left edge to open the menu.\n          </p>\n        </div>\n\n        <DrawerPopup position=\"left\" showCloseButton variant=\"straight\">\n          <DrawerHeader>\n            <DrawerTitle>Menu</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <nav className=\"-mx-[calc(--spacing(3)-1px)] flex flex-col gap-0.5\">\n              <Button\n                className=\"justify-start\"\n                render={<Link href=\"#\" />}\n                variant=\"ghost\"\n              >\n                Home\n              </Button>\n              <Button\n                className=\"justify-start\"\n                render={<Link href=\"#\" />}\n                variant=\"ghost\"\n              >\n                Profile\n              </Button>\n              <Button\n                className=\"justify-start\"\n                render={<Link href=\"#\" />}\n                variant=\"ghost\"\n              >\n                Settings\n              </Button>\n              <Button\n                className=\"justify-start\"\n                render={<Link href=\"#\" />}\n                variant=\"ghost\"\n              >\n                Sign out\n              </Button>\n            </nav>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-2.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <Drawer>\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Open drawer\n      </DrawerTrigger>\n      <DrawerPopup>\n        <DrawerHeader className=\"text-center\">\n          <DrawerTitle>Notifications</DrawerTitle>\n          <DrawerDescription>\n            This is the description of the drawer.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerFooter\n          className=\"justify-center sm:justify-center\"\n          variant=\"bare\"\n        >\n          <DrawerClose render={<Button variant=\"outline\" />}>Close</DrawerClose>\n        </DrawerFooter>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-3.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <Drawer position=\"right\">\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Open drawer\n      </DrawerTrigger>\n      <DrawerPopup showCloseButton variant=\"straight\">\n        <DrawerHeader>\n          <DrawerTitle>Notifications</DrawerTitle>\n          <DrawerDescription>\n            This is the description of the drawer.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerPanel>\n          <p className=\"text-muted-foreground text-sm\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris.\n          </p>\n        </DrawerPanel>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-4.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Drawer position=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Right\n        </DrawerTrigger>\n        <DrawerPopup variant=\"inset\">\n          <DrawerHeader>\n            <DrawerTitle>Right</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <p className=\"text-muted-foreground text-sm\">\n              Content from the right.\n            </p>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n      <Drawer position=\"left\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Left\n        </DrawerTrigger>\n        <DrawerPopup variant=\"inset\">\n          <DrawerHeader>\n            <DrawerTitle>Left</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <p className=\"text-muted-foreground text-sm\">\n              Content from the left.\n            </p>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n      <Drawer position=\"top\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>Top</DrawerTrigger>\n        <DrawerPopup variant=\"inset\">\n          <DrawerHeader>\n            <DrawerTitle>Top</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <p className=\"text-muted-foreground text-sm\">\n              Content from the top.\n            </p>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n      <Drawer>\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Bottom\n        </DrawerTrigger>\n        <DrawerPopup variant=\"inset\">\n          <DrawerHeader>\n            <DrawerTitle>Bottom</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <p className=\"text-muted-foreground text-sm\">\n              Content from the bottom.\n            </p>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-5.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Drawer position=\"right\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Right\n        </DrawerTrigger>\n        <DrawerPopup variant=\"straight\">\n          <DrawerHeader>\n            <DrawerTitle>Right</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <p className=\"text-muted-foreground text-sm\">\n              Content from the right.\n            </p>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n      <Drawer position=\"left\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Left\n        </DrawerTrigger>\n        <DrawerPopup variant=\"straight\">\n          <DrawerHeader>\n            <DrawerTitle>Left</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <p className=\"text-muted-foreground text-sm\">\n              Content from the left.\n            </p>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n      <Drawer position=\"top\">\n        <DrawerTrigger render={<Button variant=\"outline\" />}>Top</DrawerTrigger>\n        <DrawerPopup variant=\"straight\">\n          <DrawerHeader>\n            <DrawerTitle>Top</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <p className=\"text-muted-foreground text-sm\">\n              Content from the top.\n            </p>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n      <Drawer>\n        <DrawerTrigger render={<Button variant=\"outline\" />}>\n          Bottom\n        </DrawerTrigger>\n        <DrawerPopup variant=\"straight\">\n          <DrawerHeader>\n            <DrawerTitle>Bottom</DrawerTitle>\n          </DrawerHeader>\n          <DrawerPanel>\n            <p className=\"text-muted-foreground text-sm\">\n              Content from the bottom.\n            </p>\n          </DrawerPanel>\n        </DrawerPopup>\n      </Drawer>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-6.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <Drawer>\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Scrollable content\n      </DrawerTrigger>\n      <DrawerPopup showBar>\n        <DrawerHeader>\n          <DrawerTitle>Scrollable content</DrawerTitle>\n        </DrawerHeader>\n        <DrawerPanel>\n          <div className=\"flex flex-col gap-2\">\n            {Array.from({ length: 48 }, (_, i) => `box-${i}`).map((key) => (\n              <div\n                className=\"h-12 shrink-0 rounded-xl border bg-muted\"\n                key={key}\n              />\n            ))}\n          </div>\n        </DrawerPanel>\n        <DrawerFooter>\n          <DrawerClose render={<Button variant=\"outline\" />}>Close</DrawerClose>\n        </DrawerFooter>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-7.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <Drawer>\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Nested drawers\n      </DrawerTrigger>\n      <DrawerPopup showBar>\n        <DrawerHeader className=\"text-center\">\n          <DrawerTitle>First step</DrawerTitle>\n          <DrawerDescription>\n            This is the first step. Tap the button below to continue to the next\n            screen.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerFooter\n          className=\"justify-center sm:justify-center\"\n          variant=\"bare\"\n        >\n          <DrawerClose render={<Button variant=\"ghost\" />}>Cancel</DrawerClose>\n          <Drawer>\n            <DrawerTrigger render={<Button variant=\"outline\" />}>\n              Continue\n            </DrawerTrigger>\n            <DrawerPopup showBar>\n              <DrawerHeader className=\"text-center\">\n                <DrawerTitle>Second step</DrawerTitle>\n                <DrawerDescription>\n                  You&apos;ve reached the second step. Tap the button below to\n                  continue to the next screen.\n                </DrawerDescription>\n              </DrawerHeader>\n              <DrawerPanel>\n                <div className=\"flex justify-center\">\n                  <div className=\"size-48 shrink-0 rounded-xl border bg-muted\" />\n                </div>\n              </DrawerPanel>\n              <DrawerFooter\n                className=\"justify-center sm:justify-center\"\n                variant=\"bare\"\n              >\n                <DrawerClose render={<Button variant=\"ghost\" />}>\n                  Back\n                </DrawerClose>\n                <Drawer>\n                  <DrawerTrigger render={<Button variant=\"outline\" />}>\n                    Continue\n                  </DrawerTrigger>\n                  <DrawerPopup showBar>\n                    <DrawerHeader className=\"text-center\">\n                      <DrawerTitle>Third step</DrawerTitle>\n                      <DrawerDescription>\n                        You&apos;ve reached the final step. You can close this\n                        drawer or go back.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <DrawerPanel>\n                      <div className=\"flex justify-center\">\n                        <div className=\"size-32 shrink-0 rounded-full border bg-muted\" />\n                      </div>\n                    </DrawerPanel>\n                  </DrawerPopup>\n                </Drawer>\n              </DrawerFooter>\n            </DrawerPopup>\n          </Drawer>\n        </DrawerFooter>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-8.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Drawer position=\"right\">\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Nested inset drawers\n      </DrawerTrigger>\n      <DrawerPopup variant=\"inset\">\n        <DrawerHeader>\n          <DrawerTitle>Manage team member</DrawerTitle>\n          <DrawerDescription>\n            View and manage a user in your team.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerPanel className=\"grid gap-4\">\n          <div className=\"grid gap-1\">\n            <p className=\"text-muted-foreground text-sm\">Name</p>\n            <p className=\"font-medium text-sm\">Bora Baloglu</p>\n          </div>\n          <div className=\"grid gap-1\">\n            <p className=\"text-muted-foreground text-sm\">Email</p>\n            <p className=\"font-medium text-sm\">bora@example.com</p>\n          </div>\n        </DrawerPanel>\n        <DrawerFooter>\n          <Drawer position=\"right\">\n            <DrawerTrigger render={<Button variant=\"outline\" />}>\n              Edit details\n            </DrawerTrigger>\n            <DrawerPopup variant=\"inset\">\n              <DrawerHeader>\n                <DrawerTitle>Edit details</DrawerTitle>\n                <DrawerDescription>\n                  Make changes to the member&apos;s information.\n                </DrawerDescription>\n              </DrawerHeader>\n              <DrawerPanel className=\"grid gap-4\">\n                <Field>\n                  <FieldLabel>Name</FieldLabel>\n                  <Input defaultValue=\"Bora Baloglu\" type=\"text\" />\n                </Field>\n                <Field>\n                  <FieldLabel>Email</FieldLabel>\n                  <Input defaultValue=\"bora@example.com\" type=\"email\" />\n                </Field>\n              </DrawerPanel>\n              <DrawerFooter>\n                <DrawerClose render={<Button variant=\"ghost\" />}>\n                  Cancel\n                </DrawerClose>\n                <Button type=\"submit\">Save changes</Button>\n              </DrawerFooter>\n            </DrawerPopup>\n          </Drawer>\n        </DrawerFooter>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-drawer-9.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  const snapPoints = [\"300px\", 1] as const;\n  const [snapPoint, setSnapPoint] = useState<\n    (typeof snapPoints)[number] | null\n  >(snapPoints[0]);\n\n  return (\n    <Drawer\n      onSnapPointChange={(point) =>\n        setSnapPoint(point as (typeof snapPoints)[number] | null)\n      }\n      position=\"bottom\"\n      snapPoint={snapPoint}\n      snapPoints={[...snapPoints]}\n      snapToSequentialPoints\n    >\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        With snap points\n      </DrawerTrigger>\n      <DrawerPopup showBar>\n        <DrawerHeader>\n          <DrawerTitle>Snap Points</DrawerTitle>\n          <DrawerDescription>\n            Drag the drawer to snap between a compact peek and full-height view.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerPanel>\n          <div className=\"flex flex-col gap-2\">\n            {Array.from({ length: 48 }, (_, i) => `box-${i}`).map((key) => (\n              <div\n                className=\"h-12 shrink-0 rounded-xl border bg-muted\"\n                key={key}\n              />\n            ))}\n          </div>\n        </DrawerPanel>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-empty-1.tsx",
    "content": "import { BookIcon, RouteIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/default/ui/empty\";\n\nexport default function Particle() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <RouteIcon />\n        </EmptyMedia>\n        <EmptyTitle>No upcoming meetings</EmptyTitle>\n        <EmptyDescription>Create a meeting to get started.</EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <div className=\"flex gap-2\">\n          <Button size=\"sm\">Create meeting</Button>\n          <Button size=\"sm\" variant=\"outline\">\n            <BookIcon />\n            View docs\n          </Button>\n        </div>\n      </EmptyContent>\n    </Empty>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-1.tsx",
    "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Name</FieldLabel>\n      <Input placeholder=\"Enter your name\" type=\"text\" />\n      <FieldDescription>Visible on your profile</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-10.tsx",
    "content": "\"use client\";\n\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Bio</FieldLabel>\n      <Textarea placeholder=\"Tell us about yourself…\" />\n      <FieldDescription>\n        Write a short bio. Maximum 500 characters.\n      </FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-11.tsx",
    "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Select a country\", value: null },\n  { label: \"United States\", value: \"us\" },\n  { label: \"United Kingdom\", value: \"uk\" },\n  { label: \"Canada\", value: \"ca\" },\n  { label: \"Australia\", value: \"au\" },\n];\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Country</FieldLabel>\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectPopup>\n          {items.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n      <FieldDescription>This is an optional field</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-12.tsx",
    "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>\n        <Checkbox />\n        Accept terms and conditions\n      </FieldLabel>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-13.tsx",
    "content": "\"use client\";\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldItem, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\n\nexport default function Particle() {\n  return (\n    <Field\n      className=\"gap-4\"\n      name=\"frameworks\"\n      render={(props) => <Fieldset {...props} />}\n    >\n      <FieldsetLegend className=\"font-medium text-sm\">\n        Frameworks\n      </FieldsetLegend>\n      <CheckboxGroup defaultValue={[\"react\"]}>\n        <FieldItem>\n          <FieldLabel>\n            <Checkbox value=\"react\" /> React\n          </FieldLabel>\n        </FieldItem>\n        <FieldItem>\n          <FieldLabel>\n            <Checkbox value=\"vue\" /> Vue\n          </FieldLabel>\n        </FieldItem>\n        <FieldItem>\n          <FieldLabel>\n            <Checkbox value=\"svelte\" /> Svelte\n          </FieldLabel>\n        </FieldItem>\n      </CheckboxGroup>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-14.tsx",
    "content": "\"use client\";\n\nimport {\n  Field,\n  FieldDescription,\n  FieldItem,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  return (\n    <Field\n      className=\"gap-4\"\n      name=\"plan\"\n      render={(props) => <Fieldset {...props} />}\n    >\n      <FieldsetLegend className=\"font-medium text-sm\">\n        Choose Plan\n      </FieldsetLegend>\n      <RadioGroup defaultValue=\"free\">\n        <FieldItem>\n          <FieldLabel>\n            <Radio value=\"free\" /> Free\n          </FieldLabel>\n        </FieldItem>\n        <FieldItem>\n          <FieldLabel>\n            <Radio value=\"pro\" /> Pro\n          </FieldLabel>\n        </FieldItem>\n        <FieldItem>\n          <FieldLabel>\n            <Radio value=\"enterprise\" /> Enterprise\n          </FieldLabel>\n        </FieldItem>\n      </RadioGroup>\n      <FieldDescription>Select the plan that fits your needs.</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-15.tsx",
    "content": "import { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>\n        <Switch />\n        Email notifications\n      </FieldLabel>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-16.tsx",
    "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return (\n    <Field className=\"items-stretch gap-3\">\n      <FieldLabel>Country</FieldLabel>\n      <Slider defaultValue={50} />\n      <FieldDescription>This is an optional field</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-17.tsx",
    "content": "import { Field, FieldDescription } from \"@/registry/default/ui/field\";\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <NumberField defaultValue={1} max={100} min={1}>\n        <NumberFieldScrubArea label=\"Quantity\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n      <FieldDescription>Choose a value between 1 and 100.</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-18.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const data = {\n      email: formData.get(\"email\"),\n      fullName: formData.get(\"fullName\"),\n      newsletter: formData.get(\"newsletter\"),\n      role: formData.get(\"role\"),\n    };\n    alert(\n      `Full name: ${data.fullName || \"\"}\\nEmail: ${data.email || \"\"}\\nRole: ${\n        data.role || \"\"\n      }\\nNewsletter: ${data.newsletter}`,\n    );\n  };\n  return (\n    <Form onSubmit={onSubmit}>\n      <Field name=\"fullName\">\n        <FieldLabel>\n          Full Name <span className=\"text-destructive\">*</span>\n        </FieldLabel>\n        <Input placeholder=\"John Doe\" required type=\"text\" />\n        <FieldError>Please enter a valid name.</FieldError>\n      </Field>\n\n      <Field name=\"email\">\n        <FieldLabel>\n          Email <span className=\"text-destructive\">*</span>\n        </FieldLabel>\n        <Input placeholder=\"john@example.com\" required type=\"email\" />\n        <FieldError>Please enter a valid email.</FieldError>\n      </Field>\n\n      <Field name=\"role\">\n        <FieldLabel>Role</FieldLabel>\n        <Select\n          items={[\n            { label: \"Select your role\", value: null },\n            { label: \"Developer\", value: \"developer\" },\n            { label: \"Designer\", value: \"designer\" },\n            { label: \"Product Manager\", value: \"manager\" },\n            { label: \"Other\", value: \"other\" },\n          ]}\n        >\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            <SelectItem value=\"developer\">Developer</SelectItem>\n            <SelectItem value=\"designer\">Designer</SelectItem>\n            <SelectItem value=\"manager\">Product Manager</SelectItem>\n            <SelectItem value=\"other\">Other</SelectItem>\n          </SelectPopup>\n        </Select>\n        <FieldDescription>This is an optional field</FieldDescription>\n      </Field>\n\n      <Field name=\"newsletter\">\n        <div className=\"flex items-center gap-2\">\n          <Checkbox />\n          <FieldLabel className=\"cursor-pointer\">\n            Subscribe to newsletter\n          </FieldLabel>\n        </div>\n      </Field>\n\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-2.tsx",
    "content": "import { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>\n        Password <span className=\"text-destructive-foreground\">*</span>\n      </FieldLabel>\n      <Input placeholder=\"Enter password\" required type=\"password\" />\n      <FieldError>Please fill out this field.</FieldError>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-3.tsx",
    "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Field disabled>\n      <FieldLabel>Email</FieldLabel>\n      <Input disabled placeholder=\"Enter your email\" type=\"email\" />\n      <FieldDescription>This field is currently disabled.</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-4.tsx",
    "content": "import { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function FieldWithErrorDemo() {\n  return (\n    <Field>\n      <FieldLabel>Email</FieldLabel>\n      <Input placeholder=\"Enter your email\" type=\"email\" />\n      <FieldError>Please enter a valid email address.</FieldError>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-5.tsx",
    "content": "\"use client\";\n\nimport { Field, FieldLabel, FieldValidity } from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function FieldWithValidityDemo() {\n  return (\n    <Field>\n      <FieldLabel>Email</FieldLabel>\n      <Input placeholder=\"Enter your email\" required type=\"email\" />\n      <FieldValidity>\n        {(validity) => (\n          <div className=\"flex w-full flex-col gap-2\">\n            {validity.error && (\n              <p className=\"text-destructive-foreground text-xs\">\n                {validity.error}\n              </p>\n            )}\n            <div className=\"w-full rounded-md bg-muted p-2\">\n              <pre className=\"max-h-60 overflow-y-auto font-mono text-xs [scrollbar-width:none]\">\n                {JSON.stringify(validity, null, 2)}\n              </pre>\n            </div>\n          </div>\n        )}\n      </FieldValidity>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-6.tsx",
    "content": "import { ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Subscribe</FieldLabel>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Your best email\" type=\"email\" />\n        <InputGroupAddon align=\"inline-end\">\n          <Button aria-label=\"Subscribe\" size=\"icon-xs\" variant=\"ghost\">\n            <ArrowRightIcon aria-hidden=\"true\" />\n          </Button>\n        </InputGroupAddon>\n      </InputGroup>\n      <FieldError>Please enter a valid email address.</FieldError>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-7.tsx",
    "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompletePopup,\n} from \"@/registry/default/ui/autocomplete\";\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Fruits</FieldLabel>\n      <Autocomplete items={items}>\n        <AutocompleteInput\n          aria-label=\"Search items\"\n          placeholder=\"Search items…\"\n        />\n        <AutocompletePopup>\n          <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n          <AutocompleteList>\n            {(item) => (\n              <AutocompleteItem key={item.value} value={item}>\n                {item.label}\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompletePopup>\n      </Autocomplete>\n      <FieldDescription>Select a item.</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-8.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n} from \"@/registry/default/ui/combobox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Fruits</FieldLabel>\n      <Combobox items={items}>\n        <ComboboxInput\n          aria-label=\"Select an item\"\n          placeholder=\"Select an item...\"\n        />\n        <ComboboxPopup>\n          <ComboboxEmpty>No results found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      <FieldDescription>Select a item.</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-field-9.tsx",
    "content": "\"use client\";\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Grape\", value: \"grape\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Pineapple\", value: \"pineapple\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Peach\", value: \"peach\" },\n  { label: \"Pear\", value: \"pear\" },\n];\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Fruits</FieldLabel>\n      <Combobox defaultValue={[items[0], items[4]]} items={items} multiple>\n        <ComboboxChips>\n          <ComboboxValue>\n            {(value: { value: string; label: string }[]) => (\n              <>\n                {value?.map((item) => (\n                  <ComboboxChip aria-label={item.label} key={item.value}>\n                    {item.label}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput\n                  aria-label=\"Select items\"\n                  placeholder={value.length > 0 ? undefined : \"Select items…\"}\n                />\n              </>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxPopup>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.value} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      <FieldDescription>Select multiple items.</FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-fieldset-1.tsx",
    "content": "import {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Fieldset>\n      <FieldsetLegend>Billing Details</FieldsetLegend>\n      <Field>\n        <FieldLabel>Company</FieldLabel>\n        <Input placeholder=\"Enter company name\" type=\"text\" />\n        <FieldDescription>\n          The name that will appear on invoices.\n        </FieldDescription>\n      </Field>\n\n      <Field>\n        <FieldLabel>Tax ID</FieldLabel>\n        <Input placeholder=\"Enter tax identification number\" type=\"text\" />\n        <FieldDescription>\n          Your business tax identification number.\n        </FieldDescription>\n      </Field>\n    </Fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-form-1.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Email: ${formData.get(\"email\") || \"\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-64\" onSubmit={onSubmit}>\n      <Field name=\"email\">\n        <FieldLabel>Email</FieldLabel>\n        <Input placeholder=\"you@example.com\" required type=\"email\" />\n        <FieldError>Please enter a valid email.</FieldError>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-form-2.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { z } from \"zod\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nconst schema = z.object({\n  age: z.coerce\n    .number({ message: \"Please enter a number.\" })\n    .positive({ message: \"Number must be positive.\" }),\n  name: z.string().min(1, { message: \"Please enter a name.\" }),\n});\n\ntype Errors = Record<string, string | string[]>;\n\nasync function submitForm(event: FormEvent<HTMLFormElement>) {\n  event.preventDefault();\n\n  const formData = new FormData(event.currentTarget);\n  const result = schema.safeParse(Object.fromEntries(formData));\n\n  if (!result.success) {\n    const { fieldErrors } = z.flattenError(result.error);\n    return { errors: fieldErrors as Errors };\n  }\n\n  return {\n    errors: {} as Errors,\n  };\n}\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState<Errors>({});\n\n  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const formData = new FormData(event.currentTarget);\n    setLoading(true);\n    const response = await submitForm(event);\n    await new Promise((r) => setTimeout(r, 800));\n    setErrors(response.errors);\n    setLoading(false);\n    if (Object.keys(response.errors).length === 0) {\n      alert(\n        `Name: ${String(formData.get(\"name\") || \"\")}\\nAge: ${String(\n          formData.get(\"age\") || \"\",\n        )}`,\n      );\n    }\n  };\n\n  return (\n    <Form className=\"max-w-64\" errors={errors} onSubmit={onSubmit}>\n      <Field name=\"name\">\n        <FieldLabel>Name</FieldLabel>\n        <Input placeholder=\"Enter name\" />\n        <FieldError />\n      </Field>\n      <Field name=\"age\">\n        <FieldLabel>Age</FieldLabel>\n        <Input placeholder=\"Enter age\" />\n        <FieldError />\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-frame-1.tsx",
    "content": "import {\n  Frame,\n  FrameDescription,\n  FrameFooter,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/registry/default/ui/frame\";\n\nexport default function Particle() {\n  return (\n    <Frame className=\"w-full\">\n      <FrameHeader>\n        <FrameTitle>Section header</FrameTitle>\n        <FrameDescription>Brief description about the section</FrameDescription>\n      </FrameHeader>\n      <FramePanel>\n        <h2 className=\"font-semibold text-sm\">Section title</h2>\n        <p className=\"text-muted-foreground text-sm\">Section description</p>\n      </FramePanel>\n      <FrameFooter>\n        <p className=\"text-muted-foreground text-sm\">Footer</p>\n      </FrameFooter>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-frame-2.tsx",
    "content": "import { ChevronDownIcon, TrashIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Collapsible,\n  CollapsiblePanel,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\";\nimport { Frame, FrameHeader, FramePanel } from \"@/registry/default/ui/frame\";\n\nexport default function Particle() {\n  return (\n    <Frame className=\"w-full\">\n      <Collapsible>\n        <FrameHeader className=\"flex-row items-center justify-between px-2 py-2\">\n          <CollapsibleTrigger\n            className=\"data-panel-open:[&_svg]:rotate-180\"\n            render={<Button variant=\"ghost\" />}\n          >\n            <ChevronDownIcon className=\"size-4\" />\n            Section header\n          </CollapsibleTrigger>\n          <Button aria-label=\"Delete\" size=\"icon\" variant=\"ghost\">\n            <TrashIcon />\n          </Button>\n        </FrameHeader>\n        <CollapsiblePanel>\n          <FramePanel>\n            <h2 className=\"font-semibold text-sm\">Section title</h2>\n            <p className=\"text-muted-foreground text-sm\">Section description</p>\n          </FramePanel>\n        </CollapsiblePanel>\n      </Collapsible>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-frame-3.tsx",
    "content": "import {\n  Frame,\n  FrameDescription,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/registry/default/ui/frame\";\n\nexport default function Particle() {\n  return (\n    <Frame className=\"w-full\">\n      <FrameHeader>\n        <FrameTitle>Section header</FrameTitle>\n        <FrameDescription>Brief description about the section</FrameDescription>\n      </FrameHeader>\n      <FramePanel>\n        <h2 className=\"font-semibold text-sm\">Separated panel</h2>\n        <p className=\"text-muted-foreground text-sm\">Section description</p>\n      </FramePanel>\n      <FramePanel>\n        <h2 className=\"font-semibold text-sm\">Separated panel</h2>\n        <p className=\"text-muted-foreground text-sm\">Section description</p>\n      </FramePanel>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-frame-4.tsx",
    "content": "import {\n  Frame,\n  FrameDescription,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/registry/default/ui/frame\";\nimport { Separator } from \"@/registry/default/ui/separator\";\n\nexport default function Particle() {\n  return (\n    <Frame className=\"w-full\">\n      <FrameHeader>\n        <FrameTitle>Section header</FrameTitle>\n        <FrameDescription>Brief description about the section</FrameDescription>\n      </FrameHeader>\n      <FramePanel className=\"p-0\">\n        <div className=\"p-5\">\n          <h2 className=\"font-semibold text-sm\">Stacked panel</h2>\n          <p className=\"text-muted-foreground text-sm\">Section description</p>\n        </div>\n        <Separator />\n        <div className=\"p-5\">\n          <h2 className=\"font-semibold text-sm\">Stacked panel</h2>\n          <p className=\"text-muted-foreground text-sm\">Section description</p>\n        </div>\n      </FramePanel>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-1.tsx",
    "content": "import {\n  ArchiveIcon,\n  EditIcon,\n  EllipsisIcon,\n  FilesIcon,\n  FilmIcon,\n  ShareIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"File actions\">\n      <Button variant=\"outline\">\n        <FilesIcon aria-hidden=\"true\" />\n        Files\n      </Button>\n      <GroupSeparator />\n      <Button variant=\"outline\">\n        <FilmIcon aria-hidden=\"true\" />\n        Media\n      </Button>\n      <GroupSeparator />\n      <Menu>\n        <MenuTrigger\n          render={<Button aria-label=\"Menu\" size=\"icon\" variant=\"outline\" />}\n        >\n          <EllipsisIcon className=\"size-4\" />\n        </MenuTrigger>\n        <MenuPopup align=\"end\">\n          <MenuItem>\n            <EditIcon aria-hidden=\"true\" />\n            Edit\n          </MenuItem>\n          <MenuItem>\n            <ArchiveIcon aria-hidden=\"true\" />\n            Archive\n          </MenuItem>\n          <MenuItem>\n            <ShareIcon aria-hidden=\"true\" />\n            Share\n          </MenuItem>\n          <MenuItem variant=\"destructive\">\n            <TrashIcon aria-hidden=\"true\" />\n            Delete\n          </MenuItem>\n        </MenuPopup>\n      </Menu>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-10.tsx",
    "content": "import { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Pagination\">\n      <Group aria-label=\"Page numbers\">\n        <Button className=\"min-w-8\" variant=\"outline\">\n          1\n        </Button>\n        <GroupSeparator />\n        <Button className=\"min-w-8\" variant=\"outline\">\n          2\n        </Button>\n        <GroupSeparator />\n        <Button className=\"min-w-8\" variant=\"outline\">\n          3\n        </Button>\n        <GroupSeparator />\n        <Button className=\"min-w-8\" variant=\"outline\">\n          4\n        </Button>\n        <GroupSeparator />\n        <Button className=\"min-w-8\" variant=\"outline\">\n          5\n        </Button>\n      </Group>\n      <Group aria-label=\"Navigation\">\n        <Button aria-label=\"Previous\" size=\"icon\" variant=\"outline\">\n          <ArrowLeftIcon aria-hidden=\"true\" />\n        </Button>\n        <GroupSeparator />\n        <Button aria-label=\"Next\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon aria-hidden=\"true\" />\n        </Button>\n      </Group>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-11.tsx",
    "content": "import { ChevronDownIcon, GitForkIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Repository actions\">\n      <Button variant=\"outline\">\n        <GitForkIcon aria-hidden=\"true\" />\n        Fork\n        <Badge variant=\"secondary\">48</Badge>\n      </Button>\n      <GroupSeparator />\n      <Popover>\n        <PopoverTrigger\n          render={\n            <Button aria-label=\"Send options\" size=\"icon\" variant=\"outline\" />\n          }\n        >\n          <ChevronDownIcon aria-hidden=\"true\" />\n        </PopoverTrigger>\n        <PopoverPopup align=\"end\" className=\"w-64\">\n          <PopoverTitle className=\"text-base\">Existing forks</PopoverTitle>\n          <PopoverDescription>\n            You don't have any forks of this repository.\n          </PopoverDescription>\n        </PopoverPopup>\n      </Popover>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-12.tsx",
    "content": "import { MicIcon, PaperclipIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group } from \"@/registry/default/ui/group\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <Group\n      aria-label=\"Message composer\"\n      className=\"[--radius-lg:9999px] [--radius:9999rem]\"\n    >\n      <Group aria-label=\"Attachments\">\n        <Button aria-label=\"Attach file\" size=\"icon\" variant=\"outline\">\n          <PaperclipIcon aria-hidden=\"true\" />\n        </Button>\n      </Group>\n      <Group aria-label=\"Message input\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Send a message\" />\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <Button\n                    aria-label=\"Voice Mode\"\n                    size=\"icon-xs\"\n                    variant=\"ghost\"\n                  />\n                }\n              >\n                <MicIcon aria-hidden=\"true\" />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n      </Group>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-13.tsx",
    "content": "import {\n  ChevronDownIcon,\n  DownloadIcon,\n  EditIcon,\n  ShareIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Subscription actions\">\n      <Button>Subscribe</Button>\n      <GroupSeparator className=\"bg-primary/72\" />\n      <Menu>\n        <MenuTrigger render={<Button aria-label=\"Copy options\" size=\"icon\" />}>\n          <ChevronDownIcon aria-hidden=\"true\" className=\"size-4\" />\n        </MenuTrigger>\n        <MenuPopup align=\"end\">\n          <MenuItem>\n            <ShareIcon aria-hidden=\"true\" />\n            Share link\n          </MenuItem>\n          <MenuItem>\n            <DownloadIcon aria-hidden=\"true\" />\n            Download\n          </MenuItem>\n          <MenuItem>\n            <EditIcon aria-hidden=\"true\" />\n            Duplicate\n          </MenuItem>\n        </MenuPopup>\n      </Menu>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-14.tsx",
    "content": "\"use client\";\n\nimport { ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\ninterface Currency {\n  value: string;\n  label: string;\n}\n\nconst currencies: Currency[] = [\n  {\n    label: \"US Dollar\",\n    value: \"$\",\n  },\n  {\n    label: \"Euro\",\n    value: \"€\",\n  },\n  {\n    label: \"British Pound\",\n    value: \"£\",\n  },\n];\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Payment amount\">\n      <Group aria-label=\"Amount input\">\n        <Select\n          defaultValue={currencies[0]}\n          itemToStringValue={(currency) => currency.value}\n        >\n          <SelectTrigger className=\"w-fit min-w-none\">\n            <SelectValue>{(currency: Currency) => currency.value}</SelectValue>\n          </SelectTrigger>\n          <SelectPopup className=\"min-w-48\">\n            {currencies.map((curr) => (\n              <SelectItem key={curr.value} value={curr}>\n                {curr.value} <span className=\"ms-1\">{curr.label}</span>\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <GroupSeparator />\n        <NumberField\n          aria-label=\"Enter the amount\"\n          className=\"gap-0\"\n          defaultValue={10}\n          render={<NumberFieldGroup />}\n        >\n          <NumberFieldInput className=\"text-left\" />\n        </NumberField>\n      </Group>\n      <Group aria-label=\"Submit\">\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon aria-hidden=\"true\" />\n        </Button>\n      </Group>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-15.tsx",
    "content": "\"use client\";\n\nimport { SearchIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst protocols = [\n  { label: \"http\", value: \"http\" },\n  { label: \"https\", value: \"https\" },\n  { label: \"http + https\", value: \"both\" },\n];\n\nconst subdomains = [\n  { label: \"Subdomains\", value: null },\n  { label: \"www\", value: \"www\" },\n  { label: \"api\", value: \"api\" },\n  { label: \"cdn\", value: \"cdn\" },\n];\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"URL search\">\n      <Select defaultValue=\"both\" items={protocols}>\n        <SelectTrigger className=\"w-fit min-w-none\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectPopup>\n          {protocols.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n      <GroupSeparator />\n      <Input\n        aria-label=\"URL\"\n        className=\"flex-1\"\n        defaultValue=\"coss.com\"\n        type=\"text\"\n      />\n      <GroupSeparator />\n      <Select defaultValue={null} items={subdomains}>\n        <SelectTrigger className=\"w-fit min-w-none\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectPopup>\n          {subdomains.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n      <GroupSeparator />\n      <Button aria-label=\"Search\" size=\"icon\" variant=\"outline\">\n        <SearchIcon aria-hidden=\"true\" />\n      </Button>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-16.tsx",
    "content": "import { PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Add item\">\n      <Button aria-label=\"Add\" size=\"icon\" variant=\"outline\">\n        <PlusIcon aria-hidden=\"true\" />\n      </Button>\n      <GroupSeparator />\n      <Input aria-label=\"Item name\" placeholder=\"Enter item name\" type=\"text\" />\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-17.tsx",
    "content": "import { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Price input\">\n      <Input\n        aria-label=\"Enter the amount\"\n        className=\"text-right\"\n        defaultValue=\"100\"\n        id=\"amount\"\n        type=\"text\"\n      />\n      <GroupSeparator />\n      <GroupText render={<Label aria-label=\"Currency\" htmlFor=\"amount\" />}>\n        USD\n      </GroupText>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-18.tsx",
    "content": "import { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst protocols = [\n  { label: \"https://\", value: \"https\" },\n  { label: \"http://\", value: \"http\" },\n  { label: \"ftp://\", value: \"ftp\" },\n  { label: \"sftp://\", value: \"sftp\" },\n];\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"URL input\">\n      <Select defaultValue=\"https\" items={protocols}>\n        <SelectTrigger className=\"w-fit min-w-none\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectPopup>\n          {protocols.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n      <GroupSeparator />\n      <Input aria-label=\"IP address\" placeholder=\"192.168.1.1\" type=\"text\" />\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-19.tsx",
    "content": "import { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst domains = [\n  { label: \".com\", value: \"com\" },\n  { label: \".org\", value: \"org\" },\n  { label: \".net\", value: \"net\" },\n];\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Domain input\">\n      <Input aria-label=\"Domain name\" placeholder=\"example\" type=\"text\" />\n      <GroupSeparator />\n      <Select defaultValue=\"com\" items={domains}>\n        <SelectTrigger className=\"w-fit min-w-none\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectPopup>\n          {domains.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectPopup>\n      </Select>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-2.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport { useCopyToClipboard } from \"@/registry/default/hooks/use-copy-to-clipboard\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <Group aria-label=\"Url input\">\n      <Input\n        aria-label=\"Url\"\n        defaultValue=\"https://coss.com\"\n        ref={inputRef}\n        type=\"text\"\n      />\n      <GroupSeparator />\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <Button\n              aria-label=\"Copy\"\n              onClick={() => {\n                if (inputRef.current) {\n                  copyToClipboard(inputRef.current.value);\n                }\n              }}\n              size=\"icon\"\n              variant=\"outline\"\n            />\n          }\n        >\n          {isCopied ? <CheckIcon /> : <CopyIcon />}\n        </TooltipTrigger>\n        <TooltipPopup>\n          <p>Copy to clipboard</p>\n        </TooltipPopup>\n      </Tooltip>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-20.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Email subscription\">\n      <Input aria-label=\"Email\" placeholder=\"Email\" type=\"email\" />\n      <GroupSeparator />\n      <Button variant=\"outline\">Subscribe</Button>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-22.tsx",
    "content": "import { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Label>Range</Label>\n      <Group aria-label=\"Range input\">\n        <NumberField aria-label=\"Min value\" render={<NumberFieldGroup />}>\n          <NumberFieldInput className=\"text-left\" placeholder=\"From\" />\n        </NumberField>\n        <GroupSeparator />\n        <NumberField aria-label=\"Max value\" render={<NumberFieldGroup />}>\n          <NumberFieldInput className=\"text-left\" placeholder=\"To\" />\n        </NumberField>\n      </Group>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-23.tsx",
    "content": "\"use client\";\n\nimport {\n  ChevronsUpDownIcon,\n  FunnelIcon,\n  SearchIcon,\n  XIcon,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button, buttonVariants } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n} from \"@/registry/default/ui/combobox\";\nimport { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\n\ntype FilterOption = {\n  id: string;\n  label: string;\n  avatar?: string;\n};\n\nconst members: FilterOption[] = [\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=faces\",\n    id: \"alex-chen\",\n    label: \"Alex Chen\",\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces\",\n    id: \"sarah-johnson\",\n    label: \"Sarah Johnson\",\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=64&h=64&fit=crop&crop=faces\",\n    id: \"marcus-williams\",\n    label: \"Marcus Williams\",\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=faces\",\n    id: \"emma-davis\",\n    label: \"Emma Davis\",\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=faces\",\n    id: \"james-miller\",\n    label: \"James Miller\",\n  },\n];\n\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) {\n    return parts[0]?.charAt(0).toUpperCase() ?? \"\";\n  }\n  const first = parts[0]?.charAt(0) ?? \"\";\n  const last = parts[parts.length - 1]?.charAt(0) ?? \"\";\n  return (first + last).toUpperCase();\n}\n\nfunction MemberAvatar({\n  name,\n  avatarUrl,\n  className,\n}: {\n  name: string;\n  avatarUrl?: string;\n  className?: string;\n}) {\n  return (\n    <Avatar className={cn(\"size-5\", className)}>\n      {avatarUrl ? <AvatarImage alt={name} src={avatarUrl} /> : null}\n      <AvatarFallback className=\"text-[0.5rem]\">\n        {getInitials(name)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\nexport default function Particle() {\n  const [selectedMembers, setSelectedMembers] = useState<FilterOption[]>(\n    members.slice(0, 2),\n  );\n\n  const renderTriggerContent = () => {\n    if (selectedMembers.length === 0) return \"Select\";\n    const firstMember = selectedMembers[0];\n    const remainingCount = selectedMembers.length - 1;\n\n    return (\n      <div className=\"flex items-center gap-2\">\n        <MemberAvatar\n          avatarUrl={firstMember?.avatar}\n          name={firstMember?.label ?? \"\"}\n        />\n        <span className=\"truncate\">{firstMember?.label}</span>\n        {remainingCount > 0 && (\n          <Badge className=\"tabular-nums\" variant=\"secondary\">\n            +{remainingCount}\n          </Badge>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <Group>\n      <GroupText\n        className={cn(\n          buttonVariants({\n            size: \"sm\",\n            variant: \"outline\",\n          }),\n          \"pointer-events-none\",\n        )}\n      >\n        <FunnelIcon />\n        Member\n      </GroupText>\n      <GroupSeparator />\n      <Combobox\n        autoHighlight\n        items={members}\n        multiple\n        onValueChange={(value) => {\n          if (Array.isArray(value)) {\n            setSelectedMembers(value);\n          }\n        }}\n        value={selectedMembers}\n      >\n        <ComboboxTrigger\n          render={\n            <Button\n              className={\n                selectedMembers.length === 0 ? \"justify-between\" : undefined\n              }\n              size=\"sm\"\n              variant=\"outline\"\n            />\n          }\n        >\n          {renderTriggerContent()}\n          {selectedMembers.length === 0 && (\n            <ChevronsUpDownIcon className=\"-me-1!\" />\n          )}\n        </ComboboxTrigger>\n        <ComboboxPopup aria-label=\"Select member\">\n          <div className=\"border-b p-2\">\n            <ComboboxInput\n              className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n              placeholder=\"Search members...\"\n              showTrigger={false}\n              startAddon={<SearchIcon />}\n            />\n          </div>\n          <ComboboxEmpty>No members found.</ComboboxEmpty>\n          <ComboboxList>\n            {(option: FilterOption) => (\n              <ComboboxItem key={option.id} value={option}>\n                <div className=\"flex items-center gap-2\">\n                  <MemberAvatar avatarUrl={option.avatar} name={option.label} />\n                  <span>{option.label}</span>\n                </div>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxPopup>\n      </Combobox>\n      <GroupSeparator />\n      <Button\n        aria-label=\"Remove filter\"\n        onClick={() => setSelectedMembers([])}\n        size=\"icon-sm\"\n        variant=\"outline\"\n      >\n        <XIcon />\n      </Button>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-3.tsx",
    "content": "import {\n  ArchiveIcon,\n  EditIcon,\n  EllipsisIcon,\n  FilesIcon,\n  FilmIcon,\n  ShareIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"File actions\">\n      <Button size=\"sm\" variant=\"outline\">\n        <FilesIcon aria-hidden=\"true\" />\n        Files\n      </Button>\n      <GroupSeparator />\n      <Button size=\"sm\" variant=\"outline\">\n        <FilmIcon aria-hidden=\"true\" />\n        Media\n      </Button>\n      <GroupSeparator />\n      <Menu>\n        <MenuTrigger\n          render={<Button aria-label=\"Menu\" size=\"icon-sm\" variant=\"outline\" />}\n        >\n          <EllipsisIcon aria-hidden=\"true\" className=\"size-4\" />\n        </MenuTrigger>\n        <MenuPopup align=\"end\">\n          <MenuItem>\n            <EditIcon aria-hidden=\"true\" />\n            Edit\n          </MenuItem>\n          <MenuItem>\n            <ArchiveIcon aria-hidden=\"true\" />\n            Archive\n          </MenuItem>\n          <MenuItem>\n            <ShareIcon aria-hidden=\"true\" />\n            Share\n          </MenuItem>\n          <MenuItem variant=\"destructive\">\n            <TrashIcon aria-hidden=\"true\" />\n            Delete\n          </MenuItem>\n        </MenuPopup>\n      </Menu>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-4.tsx",
    "content": "import {\n  ArchiveIcon,\n  EditIcon,\n  EllipsisIcon,\n  FilesIcon,\n  FilmIcon,\n  ShareIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"File actions\">\n      <Button size=\"lg\" variant=\"outline\">\n        <FilesIcon aria-hidden=\"true\" />\n        Files\n      </Button>\n      <GroupSeparator />\n      <Button size=\"lg\" variant=\"outline\">\n        <FilmIcon aria-hidden=\"true\" />\n        Media\n      </Button>\n      <GroupSeparator />\n      <Menu>\n        <MenuTrigger\n          render={<Button aria-label=\"Menu\" size=\"icon-lg\" variant=\"outline\" />}\n        >\n          <EllipsisIcon aria-hidden=\"true\" className=\"size-4\" />\n        </MenuTrigger>\n        <MenuPopup align=\"end\">\n          <MenuItem>\n            <EditIcon aria-hidden=\"true\" />\n            Edit\n          </MenuItem>\n          <MenuItem>\n            <ArchiveIcon aria-hidden=\"true\" />\n            Archive\n          </MenuItem>\n          <MenuItem>\n            <ShareIcon aria-hidden=\"true\" />\n            Share\n          </MenuItem>\n          <MenuItem variant=\"destructive\">\n            <TrashIcon aria-hidden=\"true\" />\n            Delete\n          </MenuItem>\n        </MenuPopup>\n      </Menu>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-5.tsx",
    "content": "import {\n  ArchiveIcon,\n  EditIcon,\n  EllipsisIcon,\n  FilesIcon,\n  FilmIcon,\n  ShareIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"File actions\">\n      <Button variant=\"outline\">\n        <FilesIcon aria-hidden=\"true\" />\n        Files\n      </Button>\n      <GroupSeparator />\n      <Button disabled variant=\"outline\">\n        <FilmIcon aria-hidden=\"true\" />\n        Media\n      </Button>\n      <GroupSeparator />\n      <Menu>\n        <MenuTrigger\n          render={<Button aria-label=\"Menu\" size=\"icon\" variant=\"outline\" />}\n        >\n          <EllipsisIcon aria-hidden=\"true\" className=\"size-4\" />\n        </MenuTrigger>\n        <MenuPopup align=\"end\">\n          <MenuItem>\n            <EditIcon aria-hidden=\"true\" />\n            Edit\n          </MenuItem>\n          <MenuItem>\n            <ArchiveIcon aria-hidden=\"true\" />\n            Archive\n          </MenuItem>\n          <MenuItem>\n            <ShareIcon aria-hidden=\"true\" />\n            Share\n          </MenuItem>\n          <MenuItem variant=\"destructive\">\n            <TrashIcon aria-hidden=\"true\" />\n            Delete\n          </MenuItem>\n        </MenuPopup>\n      </Menu>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-6.tsx",
    "content": "import {\n  ArchiveIcon,\n  EditIcon,\n  EllipsisIcon,\n  FilesIcon,\n  FilmIcon,\n  ShareIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"File actions\">\n      <Button>\n        <FilesIcon aria-hidden=\"true\" />\n        Files\n      </Button>\n      <GroupSeparator className=\"bg-primary/72\" />\n      <Button>\n        <FilmIcon aria-hidden=\"true\" />\n        Media\n      </Button>\n      <GroupSeparator className=\"bg-primary/72\" />\n      <Menu>\n        <MenuTrigger render={<Button aria-label=\"Menu\" size=\"icon\" />}>\n          <EllipsisIcon aria-hidden=\"true\" className=\"size-4\" />\n        </MenuTrigger>\n        <MenuPopup align=\"end\">\n          <MenuItem>\n            <EditIcon aria-hidden=\"true\" />\n            Edit\n          </MenuItem>\n          <MenuItem>\n            <ArchiveIcon aria-hidden=\"true\" />\n            Archive\n          </MenuItem>\n          <MenuItem>\n            <ShareIcon aria-hidden=\"true\" />\n            Share\n          </MenuItem>\n          <MenuItem variant=\"destructive\">\n            <TrashIcon aria-hidden=\"true\" />\n            Delete\n          </MenuItem>\n        </MenuPopup>\n      </Menu>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-7.tsx",
    "content": "import { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Domain input\">\n      <GroupText render={<Label aria-label=\"Domain\" htmlFor=\"domain\" />}>\n        https://\n      </GroupText>\n      <GroupSeparator />\n      <Input\n        aria-label=\"Domain\"\n        defaultValue=\"coss.com\"\n        id=\"domain\"\n        type=\"text\"\n      />\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-8.tsx",
    "content": "import { Group, GroupSeparator, GroupText } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Domain input\">\n      <Input\n        aria-label=\"Domain\"\n        defaultValue=\"coss\"\n        id=\"domain-suffix\"\n        type=\"text\"\n      />\n      <GroupSeparator />\n      <GroupText\n        render={<Label aria-label=\"Domain suffix\" htmlFor=\"domain-suffix\" />}\n      >\n        .com\n      </GroupText>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-group-9.tsx",
    "content": "import { ZoomInIcon, ZoomOutIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Zoom controls\" orientation=\"vertical\">\n      <Button aria-label=\"Zoom in\" size=\"icon\" variant=\"outline\">\n        <ZoomInIcon />\n      </Button>\n      <GroupSeparator orientation=\"horizontal\" />\n      <Button aria-label=\"Zoom Out\" size=\"icon\" variant=\"outline\">\n        <ZoomOutIcon />\n      </Button>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-1.tsx",
    "content": "import { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return <Input aria-label=\"Enter text\" placeholder=\"Enter text\" type=\"text\" />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-10.tsx",
    "content": "\"use client\";\n\nimport { InfoIcon, StarIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  const [isFavorite, setIsFavorite] = useState(false);\n\n  return (\n    <InputGroup className=\"[--radius-lg:9999px] [--radius:9999rem]\">\n      <Popover>\n        <InputGroupAddon>\n          <PopoverTrigger\n            render={<Button size=\"icon-xs\" variant=\"secondary\" />}\n          >\n            <InfoIcon />\n          </PopoverTrigger>\n        </InputGroupAddon>\n        <PopoverPopup\n          align=\"start\"\n          alignOffset={-5}\n          className=\"w-64\"\n          sideOffset={6}\n        >\n          <PopoverTitle className=\"text-sm\">\n            Your connection is not secure.\n          </PopoverTitle>\n          <PopoverDescription>\n            You should not enter any sensitive information on this site.\n          </PopoverDescription>\n        </PopoverPopup>\n      </Popover>\n      <InputGroupAddon className=\"pl-1.5 text-muted-foreground\">\n        https://\n      </InputGroupAddon>\n      <InputGroupInput\n        aria-label=\"Url\"\n        className=\"*:[input]:ps-1!\"\n        type=\"text\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Button\n          onClick={() => setIsFavorite(!isFavorite)}\n          size=\"icon-xs\"\n          variant=\"ghost\"\n        >\n          <StarIcon\n            className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n            data-favorite={isFavorite}\n          />\n        </Button>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-11.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport { Kbd } from \"@/registry/default/ui/kbd\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Search\"\n        placeholder=\"Search…\"\n        type=\"search\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Kbd>/</Kbd>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-12.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput disabled placeholder=\"Processing…\" type=\"search\" />\n      <InputGroupAddon>\n        <Spinner />\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-13.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Label htmlFor={id}>\n        Email <span className=\"text-destructive\">*</span>\n      </Label>\n      <Input id={id} placeholder=\"Email\" required type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-14.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"inline-flex w-full items-center justify-between gap-2\">\n        <Label htmlFor={id}>Email</Label>\n        <Label className=\"font-normal text-muted-foreground\" render={<span />}>\n          Optional\n        </Label>\n      </div>\n      <Input id={id} placeholder=\"Email\" type=\"email\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-15.tsx",
    "content": "import { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Input\n      aria-label=\"Email\"\n      className=\"border-transparent bg-muted shadow-none before:hidden\"\n      placeholder=\"Email\"\n      type=\"email\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-16.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput disabled placeholder=\"Processing…\" type=\"search\" />\n      <InputGroupAddon align=\"inline-end\">\n        <Spinner />\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-17.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Input\n      className=\"read-only:bg-muted\"\n      defaultValue=\"This is a read-only input\"\n      id={id}\n      readOnly\n      type=\"text\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-18.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Field, FieldDescription } from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  const maxLength = 14;\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Field>\n      <Input\n        aria-label=\"Code\"\n        maxLength={maxLength}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Enter code\"\n        type=\"text\"\n        value={value}\n      />\n      <FieldDescription>\n        <span className=\"tabular-nums\">{maxLength - value.length}</span>{\" \"}\n        characters left\n      </FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-19.tsx",
    "content": "import { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Input\n      aria-label=\"Enter text\"\n      className=\"[--radius-lg:9999px] [--radius:9999px]\"\n      placeholder=\"Enter text\"\n      type=\"text\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-2.tsx",
    "content": "import { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Input\n      aria-label=\"Enter text\"\n      placeholder=\"Enter text\"\n      size=\"sm\"\n      type=\"text\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-3.tsx",
    "content": "import { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Input\n      aria-label=\"Enter text\"\n      placeholder=\"Enter text\"\n      size=\"lg\"\n      type=\"text\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-4.tsx",
    "content": "import { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Input aria-label=\"Disabled\" disabled placeholder=\"Disabled\" type=\"text\" />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-5.tsx",
    "content": "import { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return <Input aria-label=\"File\" type=\"file\" />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-6.tsx",
    "content": "import { useId } from \"react\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Label htmlFor={id}>Email</Label>\n      <Input\n        aria-label=\"Email\"\n        id={id}\n        placeholder=\"you@example.com\"\n        type=\"email\"\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-7.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport { Group } from \"@/registry/default/ui/group\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Group aria-label=\"Email subscription\" className=\"gap-2\">\n      <Input\n        aria-label=\"Email\"\n        className=\"flex-1\"\n        placeholder=\"you@example.com\"\n        type=\"email\"\n      />\n      <div>\n        <Button variant=\"outline\">Send</Button>\n      </div>\n    </Group>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-8.tsx",
    "content": "import { InfoIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Set your URL\"\n        className=\"*:[input]:ps-0!\"\n        placeholder=\"coss.com\"\n        type=\"text\"\n      />\n      <InputGroupAddon>https://</InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\">\n        <Popover>\n          <PopoverTrigger\n            openOnHover\n            render={\n              <Button aria-label=\"More info\" size=\"icon-xs\" variant=\"ghost\" />\n            }\n          >\n            <InfoIcon />\n          </PopoverTrigger>\n          <PopoverPopup side=\"top\" tooltipStyle>\n            <p>The URL of your website</p>\n          </PopoverPopup>\n        </Popover>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-9.tsx",
    "content": "\"use client\";\n\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Password with toggle visibility\"\n        placeholder=\"Enter your password\"\n        type={showPassword ? \"text\" : \"password\"}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n                onClick={() => setShowPassword(!showPassword)}\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            {showPassword ? <EyeOffIcon /> : <EyeIcon />}\n          </TooltipTrigger>\n          <TooltipPopup>\n            {showPassword ? \"Hide password\" : \"Show password\"}\n          </TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-1.tsx",
    "content": "import { SearchIcon } from \"lucide-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput aria-label=\"Search\" placeholder=\"Search\" type=\"search\" />\n      <InputGroupAddon>\n        <SearchIcon aria-hidden=\"true\" />\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-10.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput placeholder=\"Type to search…\" type=\"search\" />\n      <InputGroupAddon align=\"inline-end\">\n        <Badge variant=\"info\">Badge</Badge>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-11.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport { Kbd } from \"@/registry/default/ui/kbd\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput placeholder=\"Search…\" type=\"search\" />\n      <InputGroupAddon align=\"inline-end\">\n        <Kbd>⌘K</Kbd>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-12.tsx",
    "content": "\"use client\";\n\nimport { InfoIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput id=\"email-1\" placeholder=\"team@coss.com\" type=\"email\" />\n      <InputGroupAddon align=\"block-start\">\n        <Label className=\"text-foreground\" htmlFor=\"email-1\">\n          Email\n        </Label>\n        <Popover>\n          <PopoverTrigger\n            className=\"ml-auto\"\n            openOnHover\n            render={<Button className=\"-m-1\" size=\"icon-xs\" variant=\"ghost\" />}\n          >\n            <InfoIcon />\n          </PopoverTrigger>\n          <PopoverPopup side=\"top\" tooltipStyle>\n            <p>We&apos;ll use this to send you notifications</p>\n          </PopoverPopup>\n        </Popover>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-13.tsx",
    "content": "import { SearchIcon } from \"lucide-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Search\"\n        placeholder=\"Search\"\n        size=\"sm\"\n        type=\"search\"\n      />\n      <InputGroupAddon>\n        <SearchIcon aria-hidden=\"true\" />\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-14.tsx",
    "content": "import { SearchIcon } from \"lucide-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Search\"\n        placeholder=\"Search\"\n        size=\"lg\"\n        type=\"search\"\n      />\n      <InputGroupAddon>\n        <SearchIcon aria-hidden=\"true\" />\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-15.tsx",
    "content": "import { ArrowRightIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Subscribe to our newsletter\"\n        disabled\n        placeholder=\"Your best email\"\n        type=\"email\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Button aria-label=\"Subscribe\" disabled size=\"icon-xs\" variant=\"ghost\">\n          <ArrowRightIcon aria-hidden=\"true\" />\n        </Button>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-16.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput disabled placeholder=\"Searching…\" type=\"search\" />\n      <InputGroupAddon align=\"inline-end\">\n        <Spinner />\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-17.tsx",
    "content": "\"use client\";\n\nimport { ArrowUpIcon, PlusIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupTextarea placeholder=\"Ask, Search or Chat…\" />\n      <InputGroupAddon align=\"block-end\">\n        <Menu>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <MenuTrigger\n                  render={\n                    <Button\n                      aria-label=\"Add files\"\n                      className=\"rounded-full\"\n                      size=\"icon-sm\"\n                      variant=\"ghost\"\n                    />\n                  }\n                >\n                  <PlusIcon />\n                </MenuTrigger>\n              }\n            />\n            <TooltipPopup>Add files and more</TooltipPopup>\n          </Tooltip>\n          <MenuPopup align=\"start\">\n            <MenuItem>Add photos &amp; files</MenuItem>\n            <MenuItem>Create image</MenuItem>\n            <MenuItem>Thinking</MenuItem>\n            <MenuItem>Deep research</MenuItem>\n          </MenuPopup>\n        </Menu>\n        <InputGroupText className=\"ml-auto\">78% used</InputGroupText>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Send\"\n                className=\"rounded-full\"\n                size=\"icon-sm\"\n                variant=\"default\"\n              >\n                <ArrowUpIcon />\n              </Button>\n            }\n          />\n          <TooltipPopup>Send</TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-18.tsx",
    "content": "import { EllipsisIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        defaultValue=\"hello@coss.com\"\n        placeholder=\"Enter email\"\n        type=\"email\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Badge variant=\"info\">Primary</Badge>\n        <Menu>\n          <MenuTrigger\n            render={\n              <Button aria-label=\"Open menu\" size=\"icon-xs\" variant=\"ghost\" />\n            }\n          >\n            <EllipsisIcon />\n          </MenuTrigger>\n          <MenuPopup align=\"end\" alignOffset={-4} sideOffset={8}>\n            <MenuItem disabled>Make Primary</MenuItem>\n            <MenuItem variant=\"destructive\">Delete</MenuItem>\n          </MenuPopup>\n        </Menu>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-19.tsx",
    "content": "\"use client\";\n\nimport { BoldIcon, ItalicIcon, LinkIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupTextarea,\n} from \"@/registry/default/ui/input-group\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupTextarea placeholder=\"Tell us about yourself…\" />\n      <InputGroupAddon\n        align=\"block-start\"\n        className=\"gap-1 rounded-t-lg border-b bg-muted/72 p-2!\"\n      >\n        <Toggle aria-label=\"Toggle bold\" size=\"sm\">\n          <BoldIcon aria-hidden=\"true\" />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\" size=\"sm\">\n          <ItalicIcon aria-hidden=\"true\" />\n        </Toggle>\n        <Button aria-label=\"Link\" size=\"icon-sm\" variant=\"ghost\">\n          <LinkIcon aria-hidden=\"true\" />\n        </Button>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-2.tsx",
    "content": "import { MailIcon } from \"lucide-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput aria-label=\"Email\" placeholder=\"Email\" type=\"email\" />\n      <InputGroupAddon align=\"inline-end\">\n        <MailIcon aria-hidden=\"true\" />\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-20.tsx",
    "content": "import { SearchIcon } from \"lucide-react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupAddon>\n        <SearchIcon aria-hidden=\"true\" />\n      </InputGroupAddon>\n      <InputGroupInput aria-label=\"Search\" placeholder=\"Search\" type=\"search\" />\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-21.tsx",
    "content": "\"use client\";\n\nimport { InfoIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupAddon>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"More information\"\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <InfoIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Enter your username</TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n      <InputGroupInput\n        aria-label=\"Username\"\n        placeholder=\"Username\"\n        type=\"text\"\n      />\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-22.tsx",
    "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  const [value, setValue] = useState(\"Clear me\");\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Text input with clear button\"\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Enter text\"\n        type=\"text\"\n        value={value}\n      />\n      {value && (\n        <InputGroupAddon align=\"inline-end\">\n          <Button\n            aria-label=\"Clear input\"\n            onClick={() => setValue(\"\")}\n            size=\"icon-xs\"\n            variant=\"ghost\"\n          >\n            <XIcon aria-hidden=\"true\" />\n          </Button>\n        </InputGroupAddon>\n      )}\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-23.tsx",
    "content": "\"use client\";\n\nimport { LoaderCircleIcon, MicIcon, SearchIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  const [inputValue, setInputValue] = useState(\"\");\n  const [isLoading, setIsLoading] = useState(false);\n\n  useEffect(() => {\n    if (inputValue) {\n      setIsLoading(true);\n      const timer = setTimeout(() => {\n        setIsLoading(false);\n      }, 500);\n      return () => clearTimeout(timer);\n    }\n    setIsLoading(false);\n  }, [inputValue]);\n\n  return (\n    <InputGroup>\n      <InputGroupAddon>\n        {isLoading ? (\n          <LoaderCircleIcon\n            aria-label=\"Loading...\"\n            className=\"animate-spin\"\n            role=\"status\"\n          />\n        ) : (\n          <SearchIcon aria-hidden=\"true\" />\n        )}\n      </InputGroupAddon>\n      <InputGroupInput\n        aria-label=\"Search\"\n        onChange={(e) => setInputValue(e.target.value)}\n        placeholder=\"Search...\"\n        type=\"search\"\n        value={inputValue}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Voice search\"\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <MicIcon aria-hidden=\"true\" />\n          </TooltipTrigger>\n          <TooltipPopup>Voice search</TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-24.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  const maxLength = 14;\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Username\"\n        maxLength={maxLength}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Enter username\"\n        type=\"text\"\n        value={value}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <InputGroupText\n          aria-live=\"polite\"\n          className=\"text-xs tabular-nums\"\n          role=\"status\"\n        >\n          {value.length}/{maxLength}\n        </InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-26.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst requirements = [\n  { regex: /.{8,}/, text: \"At least 8 characters\" },\n  { regex: /[0-9]/, text: \"At least 1 number\" },\n  { regex: /[a-z]/, text: \"At least 1 lowercase letter\" },\n  { regex: /[A-Z]/, text: \"At least 1 uppercase letter\" },\n];\n\nexport default function Particle() {\n  const id = useId();\n  const [password, setPassword] = useState(\"\");\n  const [isVisible, setIsVisible] = useState(false);\n\n  const strength = requirements.map((req) => ({\n    met: req.regex.test(password),\n    text: req.text,\n  }));\n\n  const strengthScore = useMemo(() => {\n    return strength.filter((req) => req.met).length;\n  }, [strength]);\n\n  const getStrengthColor = (score: number) => {\n    if (score === 0) return \"bg-border\";\n    if (score <= 1) return \"bg-red-500\";\n    if (score <= 2) return \"bg-orange-500\";\n    if (score === 3) return \"bg-amber-500\";\n    return \"bg-emerald-500\";\n  };\n\n  const getStrengthText = (score: number) => {\n    if (score === 0) return \"Enter a password\";\n    if (score <= 2) return \"Weak password\";\n    if (score === 3) return \"Medium password\";\n    return \"Strong password\";\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor={id}>Password</Label>\n        <InputGroup>\n          <InputGroupInput\n            aria-describedby={`${id}-description`}\n            id={id}\n            onChange={(e) => setPassword(e.target.value)}\n            placeholder=\"Password\"\n            type={isVisible ? \"text\" : \"password\"}\n            value={password}\n          />\n          <InputGroupAddon align=\"inline-end\">\n            <Button\n              aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n              onClick={() => setIsVisible(!isVisible)}\n              size=\"icon-xs\"\n              variant=\"ghost\"\n            >\n              {isVisible ? (\n                <EyeOffIcon aria-hidden=\"true\" />\n              ) : (\n                <EyeIcon aria-hidden=\"true\" />\n              )}\n            </Button>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n\n      <div\n        aria-label=\"Password strength\"\n        aria-valuemax={4}\n        aria-valuemin={0}\n        aria-valuenow={strengthScore}\n        className=\"h-1 w-full overflow-hidden rounded-full bg-border\"\n        role=\"progressbar\"\n        tabIndex={-1}\n      >\n        <div\n          className={`h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`}\n          style={{ width: `${(strengthScore / 4) * 100}%` }}\n        />\n      </div>\n\n      <p\n        className=\"font-medium text-foreground text-sm\"\n        id={`${id}-description`}\n      >\n        {getStrengthText(strengthScore)}. Must contain:\n      </p>\n\n      <ul aria-label=\"Password requirements\" className=\"space-y-1.5\">\n        {strength.map((req) => (\n          <li className=\"flex items-center gap-2\" key={req.text}>\n            {req.met ? (\n              <CheckIcon\n                aria-hidden=\"true\"\n                className=\"size-4 text-emerald-500\"\n              />\n            ) : (\n              <XIcon\n                aria-hidden=\"true\"\n                className=\"size-4 text-muted-foreground/80\"\n              />\n            )}\n            <span\n              className={`text-xs ${req.met ? \"text-emerald-600\" : \"text-muted-foreground\"}`}\n            >\n              {req.text}\n              <span className=\"sr-only\">\n                {req.met ? \" - Requirement met\" : \" - Requirement not met\"}\n              </span>\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-27.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupTextarea,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst languages = [\n  { label: \"JavaScript\", value: \"javascript\" },\n  { label: \"TypeScript\", value: \"typescript\" },\n  { label: \"Python\", value: \"python\" },\n  { label: \"Go\", value: \"go\" },\n  { label: \"Rust\", value: \"rust\" },\n];\n\nexport default function Particle() {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    const content = textareaRef.current?.value || \"\";\n    navigator.clipboard.writeText(content);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <InputGroup>\n      <InputGroupTextarea\n        className=\"font-mono\"\n        placeholder=\"Paste your code here…\"\n        ref={textareaRef}\n        rows={6}\n      />\n      <InputGroupAddon\n        align=\"block-start\"\n        className=\"justify-between rounded-t-lg border-b bg-muted/72 p-2!\"\n      >\n        <Select defaultValue=\"javascript\" items={languages}>\n          <SelectTrigger className=\"w-fit\" size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            {languages.map(({ label, value }) => (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label={copied ? \"Copied\" : \"Copy code\"}\n                onClick={handleCopy}\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            {copied ? <CheckIcon /> : <CopyIcon />}\n          </TooltipTrigger>\n          <TooltipPopup>\n            {copied ? \"Copied!\" : \"Copy to clipboard\"}\n          </TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-28.tsx",
    "content": "\"use client\";\n\nimport { ImageIcon, PaperclipIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupTextarea,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupTextarea placeholder=\"Compose your message…\" rows={4} />\n      <InputGroupAddon align=\"block-end\" className=\"justify-between\">\n        <TooltipProvider>\n          <div className=\"flex gap-1\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <Button\n                    aria-label=\"Attach file\"\n                    size=\"icon-sm\"\n                    variant=\"ghost\"\n                  />\n                }\n              >\n                <PaperclipIcon />\n              </TooltipTrigger>\n              <TooltipPopup>Attach file</TooltipPopup>\n            </Tooltip>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <Button\n                    aria-label=\"Insert image\"\n                    size=\"icon-sm\"\n                    variant=\"ghost\"\n                  />\n                }\n              >\n                <ImageIcon />\n              </TooltipTrigger>\n              <TooltipPopup>Insert image</TooltipPopup>\n            </Tooltip>\n          </div>\n        </TooltipProvider>\n        <Button size=\"sm\">Send</Button>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-29.tsx",
    "content": "\"use client\";\n\nimport { ArrowRightIcon, MicIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupTextarea placeholder=\"Type a message…\" />\n      <InputGroupAddon align=\"block-end\">\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Voice message\"\n                className=\"rounded-full\"\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <MicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Record voice message</TooltipPopup>\n        </Tooltip>\n        <InputGroupText className=\"ml-auto text-muted-foreground text-xs\">\n          Press Enter to send\n        </InputGroupText>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Send message\"\n                className=\"rounded-full\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <ArrowRightIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Send</TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-3.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Set your URL\"\n        className=\"*:[input]:ps-0!\"\n        placeholder=\"coss\"\n        type=\"search\"\n      />\n      <InputGroupAddon>\n        <InputGroupText>i.cal.com/</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-4.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Choose a username\"\n        placeholder=\"Choose a username\"\n        type=\"text\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <InputGroupText>@coss.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-5.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Enter your domain\"\n        className=\"*:[input]:px-0!\"\n        placeholder=\"coss\"\n        type=\"text\"\n      />\n      <InputGroupAddon>\n        <InputGroupText>https://</InputGroupText>\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\">\n        <InputGroupText>.com</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-6.tsx",
    "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  NumberField,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <NumberField aria-label=\"Enter the amount\" defaultValue={10}>\n        <NumberFieldInput className=\"text-left\" />\n      </NumberField>\n      <InputGroupAddon>\n        <InputGroupText>€</InputGroupText>\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\">\n        <InputGroupText>EUR</InputGroupText>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-7.tsx",
    "content": "\"use client\";\n\nimport { InfoIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Popover,\n  PopoverPopup,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Password\"\n        placeholder=\"Password\"\n        type=\"password\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Popover>\n          <PopoverTrigger\n            openOnHover\n            render={\n              <Button\n                aria-label=\"Password requirements\"\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <InfoIcon />\n          </PopoverTrigger>\n          <PopoverPopup side=\"top\" tooltipStyle>\n            <p>Min. 8 characters</p>\n          </PopoverPopup>\n        </Popover>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-8.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport { useCopyToClipboard } from \"@/registry/default/hooks/use-copy-to-clipboard\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  const { copyToClipboard, isCopied } = useCopyToClipboard();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Url\"\n        defaultValue=\"https://coss.com\"\n        ref={inputRef}\n        type=\"text\"\n      />\n      <InputGroupAddon align=\"inline-end\">\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Copy\"\n                onClick={() => {\n                  if (inputRef.current) {\n                    copyToClipboard(inputRef.current.value);\n                  }\n                }}\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\n          </TooltipTrigger>\n          <TooltipPopup>\n            <p>Copy to clipboard</p>\n          </TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-group-9.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupInput placeholder=\"Type to search…\" type=\"search\" />\n      <InputGroupAddon align=\"inline-end\">\n        <Button size=\"xs\" variant=\"secondary\">\n          Search\n        </Button>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-otp-1.tsx",
    "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\";\n\nexport default function Particle() {\n  return (\n    <InputOTP aria-label=\"One-time password\" maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-otp-2.tsx",
    "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\";\n\nexport default function Particle() {\n  return (\n    <InputOTP aria-label=\"One-time password\" maxLength={4}>\n      <InputOTPGroup size=\"lg\">\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n      </InputOTPGroup>\n    </InputOTP>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-otp-3.tsx",
    "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\";\n\nexport default function Particle() {\n  return (\n    <InputOTP aria-label=\"Verification code\" maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n      </InputOTPGroup>\n      <InputOTPSeparator />\n      <InputOTPGroup>\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-otp-4.tsx",
    "content": "import { useId } from \"react\";\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  const id = useId();\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Label htmlFor={id}>Verification code</Label>\n      <InputOTP aria-label=\"Verification code\" id={id} maxLength={4}>\n        <InputOTPGroup>\n          <InputOTPSlot index={0} />\n          <InputOTPSlot index={1} />\n          <InputOTPSlot index={2} />\n          <InputOTPSlot index={3} />\n        </InputOTPGroup>\n      </InputOTP>\n      <p className=\"text-muted-foreground text-xs\">\n        Enter the 4-digit code sent to your email.\n      </p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-otp-5.tsx",
    "content": "\"use client\";\n\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\";\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\";\n\nexport default function Particle() {\n  return (\n    <InputOTP\n      aria-label=\"Verification code\"\n      inputMode=\"numeric\"\n      maxLength={6}\n      pattern={REGEXP_ONLY_DIGITS}\n    >\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-otp-6.tsx",
    "content": "import {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <InputOTP aria-invalid aria-label=\"Verification code\" maxLength={6}>\n        <InputOTPGroup>\n          <InputOTPSlot index={0} aria-invalid />\n          <InputOTPSlot index={1} aria-invalid />\n          <InputOTPSlot index={2} aria-invalid />\n          <InputOTPSlot index={3} aria-invalid />\n          <InputOTPSlot index={4} aria-invalid />\n          <InputOTPSlot index={5} aria-invalid />\n        </InputOTPGroup>\n      </InputOTP>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-input-otp-7.tsx",
    "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  const id = useId();\n  const [value, setValue] = useState(\"\");\n  const [invalid, setInvalid] = useState(false);\n  const valid = value.length === 6 && value === \"123456\";\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <Label htmlFor={id}>Verification code</Label>\n      <InputOTP\n        aria-label=\"Verification code\"\n        id={id}\n        maxLength={6}\n        onChange={(nextValue) => {\n          setValue(nextValue);\n          setInvalid(nextValue.length === 6 ? nextValue !== \"123456\" : false);\n        }}\n        value={value}\n      >\n        <InputOTPGroup>\n          <InputOTPSlot aria-invalid={invalid || undefined} index={0} />\n          <InputOTPSlot aria-invalid={invalid || undefined} index={1} />\n          <InputOTPSlot aria-invalid={invalid || undefined} index={2} />\n          <InputOTPSlot aria-invalid={invalid || undefined} index={3} />\n          <InputOTPSlot aria-invalid={invalid || undefined} index={4} />\n          <InputOTPSlot aria-invalid={invalid || undefined} index={5} />\n        </InputOTPGroup>\n      </InputOTP>\n      {!valid && !invalid && (\n        <p className=\"text-muted-foreground text-xs\">\n          Enter `123456` to pass validation.\n        </p>\n      )}\n      {invalid && (\n        <p className=\"text-destructive-foreground text-xs\">\n          Code must be 123456.\n        </p>\n      )}\n      {valid && (\n        <p className=\"text-success-foreground text-xs\">Code verified.</p>\n      )}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-kbd-1.tsx",
    "content": "import { Kbd, KbdGroup } from \"@/registry/default/ui/kbd\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div>\n        <p className=\"mb-2 text-muted-foreground text-sm\">Single keys:</p>\n        <div className=\"flex gap-2\">\n          <Kbd>K</Kbd>\n          <Kbd>⌘</Kbd>\n          <Kbd>⌃</Kbd>\n          <Kbd>⇧</Kbd>\n        </div>\n      </div>\n      <div>\n        <p className=\"mb-2 text-muted-foreground text-sm\">Key combinations:</p>\n        <div className=\"flex gap-2\">\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>K</Kbd>\n          </KbdGroup>\n          <KbdGroup>\n            <Kbd>⌘</Kbd>\n            <Kbd>Shift</Kbd>\n            <Kbd>P</Kbd>\n          </KbdGroup>\n          <KbdGroup>\n            <Kbd>Ctrl</Kbd>\n            <Kbd>Alt</Kbd>\n            <Kbd>Delete</Kbd>\n          </KbdGroup>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-1.tsx",
    "content": "import {\n  PauseIcon,\n  PlayIcon,\n  SkipBackIcon,\n  SkipForwardIcon,\n  TrashIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuGroup>\n          <MenuGroupLabel>Playback</MenuGroupLabel>\n          <MenuItem>\n            <PlayIcon aria-hidden=\"true\" />\n            Play\n            <MenuShortcut>⌘P</MenuShortcut>\n          </MenuItem>\n          <MenuItem disabled>\n            <PauseIcon aria-hidden=\"true\" />\n            Pause\n            <MenuShortcut>⇧⌘P</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            <SkipBackIcon aria-hidden=\"true\" />\n            Previous\n            <MenuShortcut>⌘[</MenuShortcut>\n          </MenuItem>\n          <MenuItem>\n            <SkipForwardIcon aria-hidden=\"true\" />\n            Next\n            <MenuShortcut>⌘]</MenuShortcut>\n          </MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuCheckboxItem>Shuffle</MenuCheckboxItem>\n        <MenuCheckboxItem>Repeat</MenuCheckboxItem>\n        <MenuCheckboxItem disabled>Enhanced Audio</MenuCheckboxItem>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuGroupLabel>Sort by</MenuGroupLabel>\n          <MenuRadioGroup>\n            <MenuRadioItem value=\"artist\">Artist</MenuRadioItem>\n            <MenuRadioItem value=\"album\">Album</MenuRadioItem>\n            <MenuRadioItem value=\"title\">Title</MenuRadioItem>\n          </MenuRadioGroup>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuCheckboxItem variant=\"switch\">Auto save</MenuCheckboxItem>\n        <MenuSeparator />\n        <MenuSub>\n          <MenuSubTrigger>Add to Playlist</MenuSubTrigger>\n          <MenuSubPopup>\n            <MenuItem>Jazz</MenuItem>\n            <MenuSub>\n              <MenuSubTrigger>Rock</MenuSubTrigger>\n              <MenuSubPopup>\n                <MenuItem>Hard Rock</MenuItem>\n                <MenuItem>Soft Rock</MenuItem>\n                <MenuItem>Classic Rock</MenuItem>\n                <MenuSeparator />\n                <MenuItem>Metal</MenuItem>\n                <MenuItem>Punk</MenuItem>\n                <MenuItem>Grunge</MenuItem>\n                <MenuItem>Alternative</MenuItem>\n                <MenuItem>Indie</MenuItem>\n                <MenuItem>Electronic</MenuItem>\n              </MenuSubPopup>\n            </MenuSub>\n            <MenuItem>Pop</MenuItem>\n          </MenuSubPopup>\n        </MenuSub>\n        <MenuSeparator />\n        <MenuItem variant=\"destructive\">\n          <TrashIcon aria-hidden=\"true\" />\n          Delete\n          <MenuShortcut>⌘⌫</MenuShortcut>\n        </MenuItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-2.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger openOnHover render={<Button variant=\"outline\" />}>\n        Hover me\n      </MenuTrigger>\n      <MenuPopup>\n        <MenuItem>Item one</MenuItem>\n        <MenuItem>Item two</MenuItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-3.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuCheckboxItem defaultChecked>Auto save</MenuCheckboxItem>\n        <MenuCheckboxItem>Notifications</MenuCheckboxItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-4.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuPopup,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuRadioGroup defaultValue=\"system\">\n          <MenuRadioItem value=\"light\">Light</MenuRadioItem>\n          <MenuRadioItem value=\"dark\">Dark</MenuRadioItem>\n          <MenuRadioItem value=\"system\">System</MenuRadioItem>\n        </MenuRadioGroup>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-5.tsx",
    "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuItem render={<Link href=\"/docs\" />}>Docs</MenuItem>\n        <MenuItem render={<Link href=\"/particles\" />}>Particles</MenuItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-6.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuPopup,\n  MenuSeparator,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuGroup>\n          <MenuGroupLabel>Account</MenuGroupLabel>\n          <MenuItem>Profile</MenuItem>\n          <MenuItem>Billing</MenuItem>\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup>\n          <MenuGroupLabel>Support</MenuGroupLabel>\n          <MenuItem>Docs</MenuItem>\n          <MenuItem>Contact</MenuItem>\n        </MenuGroup>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-7.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuItem>Item one</MenuItem>\n        <MenuSub>\n          <MenuSubTrigger>More</MenuSubTrigger>\n          <MenuSubPopup>\n            <MenuItem>Sub item A</MenuItem>\n            <MenuItem>Sub item B</MenuItem>\n          </MenuSubPopup>\n        </MenuSub>\n        <MenuItem>Item two</MenuItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-8.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuItem closeOnClick>Profile</MenuItem>\n        <MenuItem closeOnClick>Settings</MenuItem>\n        <MenuItem closeOnClick>Log out</MenuItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-menu-9.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Menu,\n  MenuCheckboxItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@/registry/default/ui/menu\";\n\nexport default function Particle() {\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"outline\" />}>Open menu</MenuTrigger>\n      <MenuPopup>\n        <MenuCheckboxItem defaultChecked variant=\"switch\">\n          Auto save\n        </MenuCheckboxItem>\n        <MenuCheckboxItem variant=\"switch\">Notifications</MenuCheckboxItem>\n        <MenuCheckboxItem defaultChecked variant=\"switch\">\n          Dark mode\n        </MenuCheckboxItem>\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-meter-1.tsx",
    "content": "import {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\";\n\nexport default function Particle() {\n  return (\n    <Meter value={75}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Storage usage</MeterLabel>\n        <MeterValue />\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-meter-2.tsx",
    "content": "import { Meter } from \"@/registry/default/ui/meter\";\n\nexport default function Particle() {\n  return <Meter value={50} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-meter-3.tsx",
    "content": "\"use client\";\n\nimport {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\";\n\nexport default function Particle() {\n  return (\n    <Meter max={5} value={3}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Rating</MeterLabel>\n        <MeterValue>{(_formatted, value) => `${value} / 5`}</MeterValue>\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-meter-4.tsx",
    "content": "\"use client\";\n\nimport {\n  Meter,\n  MeterIndicator,\n  MeterLabel,\n  MeterTrack,\n  MeterValue,\n} from \"@/registry/default/ui/meter\";\n\nexport default function Particle() {\n  return (\n    <Meter max={1000} min={500} value={700}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <MeterLabel>Bandwidth (Mbps)</MeterLabel>\n        <MeterValue>{(_formatted, value) => value}</MeterValue>\n      </div>\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </Meter>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-1.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <NumberField defaultValue={0}>\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-10.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { z } from \"zod\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\";\n\nconst schema = z.object({\n  quantity: z.coerce\n    .number({ message: \"Please enter a quantity.\" })\n    .min(1, { message: \"Quantity must be at least 1.\" })\n    .max(100, { message: \"Maximum quantity is 100.\" }),\n});\n\ntype Errors = Record<string, string | string[]>;\n\nasync function submitForm(event: FormEvent<HTMLFormElement>) {\n  event.preventDefault();\n\n  const formData = new FormData(event.currentTarget);\n  const result = schema.safeParse(Object.fromEntries(formData));\n\n  if (!result.success) {\n    const { fieldErrors } = z.flattenError(result.error);\n    return { errors: fieldErrors as Errors };\n  }\n\n  return {\n    data: result.data,\n    errors: {} as Errors,\n  };\n}\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    setLoading(true);\n    const response = await submitForm(event);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    if (Object.keys(response.errors).length === 0) {\n      alert(`Quantity: ${response.data?.quantity}`);\n    }\n  };\n\n  return (\n    <Form className=\"max-w-64\" onSubmit={onSubmit}>\n      <Field name=\"quantity\">\n        <NumberField defaultValue={1} max={100} min={1}>\n          <NumberFieldScrubArea label=\"Quantity\" />\n          <NumberFieldGroup>\n            <NumberFieldDecrement />\n            <NumberFieldInput />\n            <NumberFieldIncrement />\n          </NumberFieldGroup>\n        </NumberField>\n      </Field>\n\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-11.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <NumberField defaultValue={0}>\n      <NumberFieldGroup className=\"[--radius-lg:9999px] [--radius:9999px]\">\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-2.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <NumberField defaultValue={0} size=\"sm\">\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-3.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <NumberField defaultValue={0} size=\"lg\">\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-4.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <NumberField defaultValue={42} disabled>\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-5.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Label htmlFor={id}>Quantity</Label>\n      <NumberField defaultValue={0} id={id}>\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-6.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <NumberField defaultValue={0}>\n      <NumberFieldScrubArea label=\"Quantity\" />\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-7.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <NumberField defaultValue={5} max={10} min={0}>\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-8.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <NumberField\n      defaultValue={0}\n      format={{ currency: \"USD\", style: \"currency\" }}\n    >\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberField>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-number-field-9.tsx",
    "content": "import {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n} from \"@/registry/default/ui/number-field\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <NumberField defaultValue={0} step={10}>\n        <NumberFieldScrubArea label=\"Step 10\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n      <NumberField defaultValue={0} step={0.1}>\n        <NumberFieldScrubArea label=\"Step 0.1\" />\n        <NumberFieldGroup>\n          <NumberFieldDecrement />\n          <NumberFieldInput />\n          <NumberFieldIncrement />\n        </NumberFieldGroup>\n      </NumberField>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-pagination-1.tsx",
    "content": "import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\n\nexport default function Particle() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem>\n          <PaginationPrevious href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">1</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\" isActive>\n            2\n          </PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationLink href=\"#\">3</PaginationLink>\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationEllipsis />\n        </PaginationItem>\n        <PaginationItem>\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-pagination-2.tsx",
    "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/default/ui/pagination\";\n\ntype PaginationProps = {\n  currentPage: number;\n  totalPages: number;\n};\n\nexport default function Particle({ currentPage, totalPages }: PaginationProps) {\n  return (\n    <Pagination>\n      <PaginationContent className=\"w-full justify-between gap-2\">\n        <PaginationItem>\n          <Button\n            disabled={currentPage === 1}\n            render={\n              currentPage === 1 ? undefined : (\n                <Link href={`#/page/${currentPage - 1}`} />\n              )\n            }\n            variant=\"outline\"\n          >\n            Previous\n          </Button>\n        </PaginationItem>\n        <PaginationItem>\n          <Button\n            disabled={currentPage === totalPages}\n            render={\n              currentPage === totalPages ? undefined : (\n                <Link href={`#/page/${currentPage + 1}`} />\n              )\n            }\n            variant=\"outline\"\n          >\n            Next\n          </Button>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-pagination-3.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\ntype PaginationProps = {\n  currentPage?: number;\n  totalPages?: number;\n  totalResults: number;\n  resultsPerPage?: number;\n};\n\nexport default function Particle({\n  currentPage: initialPage = 1,\n  totalPages = 10,\n  totalResults,\n  resultsPerPage = 10,\n}: PaginationProps) {\n  const [currentPage, setCurrentPage] = useState(initialPage);\n  const resultRanges = Array.from({ length: totalPages }, (_, i) => {\n    const start = i * resultsPerPage + 1;\n    const end = Math.min((i + 1) * resultsPerPage, totalResults);\n    const pageNum = i + 1;\n    return { label: `${start}-${end}`, value: pageNum };\n  });\n\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      {/* Results range selector */}\n      <div className=\"flex items-center gap-2 whitespace-nowrap\">\n        <p className=\"text-muted-foreground text-sm\">Viewing</p>\n        <Select\n          items={resultRanges}\n          onValueChange={(value) => setCurrentPage(value as number)}\n          value={currentPage}\n        >\n          <SelectTrigger\n            aria-label=\"Select result range\"\n            className=\"w-fit min-w-none\"\n            size=\"sm\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            {resultRanges.map(({ label, value }) => (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <p className=\"text-muted-foreground text-sm\">\n          of{\" \"}\n          <strong className=\"font-medium text-foreground\">\n            {totalResults}\n          </strong>{\" \"}\n          results\n        </p>\n      </div>\n\n      {/* Pagination */}\n      <div>\n        <Pagination>\n          <PaginationContent className=\"w-full justify-between gap-2\">\n            <PaginationItem>\n              <PaginationPrevious\n                className=\"sm:*:[svg]:hidden\"\n                render={\n                  <Button\n                    disabled={currentPage === 1 ? true : undefined}\n                    onClick={() =>\n                      currentPage > 1 && setCurrentPage(currentPage - 1)\n                    }\n                    size=\"sm\"\n                    variant=\"outline\"\n                  />\n                }\n              />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext\n                className=\"sm:*:[svg]:hidden\"\n                render={\n                  <Button\n                    disabled={currentPage === totalPages ? true : undefined}\n                    onClick={() =>\n                      currentPage < totalPages &&\n                      setCurrentPage(currentPage + 1)\n                    }\n                    size=\"sm\"\n                    variant=\"outline\"\n                  />\n                }\n              />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-popover-1.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport {\n  Popover,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <Popover>\n      <PopoverTrigger render={<Button variant=\"outline\" />}>\n        Open Popover\n      </PopoverTrigger>\n      <PopoverPopup className=\"w-80\">\n        <div className=\"mb-4\">\n          <PopoverTitle className=\"text-base\">Send us feedback</PopoverTitle>\n          <PopoverDescription>\n            Let us know how we can improve.\n          </PopoverDescription>\n        </div>\n        <Form>\n          <Field>\n            <Textarea\n              aria-label=\"Send feedback\"\n              id=\"feedback\"\n              placeholder=\"How can we improve?\"\n            />\n          </Field>\n          <Button type=\"submit\">Send feedback</Button>\n        </Form>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-popover-2.tsx",
    "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverClose,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nexport default function Particle() {\n  return (\n    <Popover>\n      <PopoverTrigger render={<Button variant=\"outline\" />}>\n        Open Popover\n      </PopoverTrigger>\n      <PopoverPopup className=\"w-80\">\n        <PopoverClose\n          aria-label=\"Close\"\n          className=\"absolute end-2 top-2\"\n          render={<Button size=\"icon\" variant=\"ghost\" />}\n        >\n          <XIcon />\n        </PopoverClose>\n        <div className=\"mb-2\">\n          <PopoverTitle className=\"text-base\">Notifications</PopoverTitle>\n          <PopoverDescription>\n            You are all caught up. Good job!\n          </PopoverDescription>\n        </div>\n        <PopoverClose render={<Button variant=\"outline\" />}>Close</PopoverClose>\n      </PopoverPopup>\n    </Popover>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-popover-3.tsx",
    "content": "\"use client\";\n\nimport { BellIcon, UserIcon } from \"lucide-react\";\nimport type { ComponentType } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Popover,\n  PopoverCreateHandle,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst popoverHandle = PopoverCreateHandle<ComponentType>();\n\nconst NotificationsContent = () => {\n  return (\n    <>\n      <PopoverTitle className=\"text-base\">Notifications</PopoverTitle>\n      <PopoverDescription>\n        You have no new notifications at this time.\n      </PopoverDescription>\n    </>\n  );\n};\n\nconst ProfileContent = () => {\n  return (\n    <div className=\"w-48\">\n      <div className=\"flex items-center gap-3\">\n        <Avatar>\n          <AvatarImage\n            alt=\"Mark Andersson\"\n            src=\"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80\"\n          />\n          <AvatarFallback>MA</AvatarFallback>\n        </Avatar>\n        <div className=\"min-w-0 flex-1\">\n          <h4 className=\"line-clamp-1 font-medium text-sm\">Mark Andersson</h4>\n          <div className=\"flex items-center gap-3 text-muted-foreground text-xs\">\n            Product Designer\n          </div>\n        </div>\n      </div>\n      <Button className=\"mt-3 w-full\" size=\"sm\" variant=\"outline\">\n        Log out\n      </Button>\n    </div>\n  );\n};\n\nexport default function Particle() {\n  return (\n    <div className=\"flex gap-2\">\n      <PopoverTrigger\n        handle={popoverHandle}\n        payload={NotificationsContent}\n        render={\n          <Button aria-label=\"Notifications\" size=\"icon\" variant=\"outline\" />\n        }\n      >\n        <BellIcon aria-hidden=\"true\" />\n      </PopoverTrigger>\n      <PopoverTrigger\n        handle={popoverHandle}\n        payload={ProfileContent}\n        render={<Button aria-label=\"Profile\" size=\"icon\" variant=\"outline\" />}\n      >\n        <UserIcon aria-hidden=\"true\" />\n      </PopoverTrigger>\n      <Popover handle={popoverHandle}>\n        {({ payload: Payload }) => (\n          <PopoverPopup className=\"min-w-none\">\n            {Payload !== undefined && <Payload />}\n          </PopoverPopup>\n        )}\n      </Popover>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-preview-card-1.tsx",
    "content": "import { CornerUpLeftIcon, StarIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  PreviewCard,\n  PreviewCardPopup,\n  PreviewCardTrigger,\n} from \"@/registry/default/ui/preview-card\";\n\nexport default function Particle() {\n  return (\n    <PreviewCard>\n      <PreviewCardTrigger render={<Button variant=\"ghost\" />}>\n        coss.com/ui\n      </PreviewCardTrigger>\n      <PreviewCardPopup>\n        <div className=\"flex flex-col gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <h4 className=\"font-medium text-sm\">coss.com/ui</h4>\n            <p className=\"text-muted-foreground text-sm\">\n              Beautifully designed components that you can copy and paste into\n              your apps.\n            </p>\n          </div>\n          <div className=\"flex items-center gap-4 text-muted-foreground text-xs\">\n            <div className=\"flex items-center gap-1\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-2 rounded-full bg-blue-500\"\n              />\n              <span>TypeScript</span>\n            </div>\n            <div className=\"flex items-center gap-1\">\n              <StarIcon className=\"size-3\" />\n              <span>58.2k</span>\n            </div>\n            <div className=\"flex items-center gap-1\">\n              <CornerUpLeftIcon className=\"size-3\" />\n              <span>5.1k</span>\n            </div>\n          </div>\n        </div>\n      </PreviewCardPopup>\n    </PreviewCard>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-progress-1.tsx",
    "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Progress } from \"@/registry/default/ui/progress\";\n\nexport default function Particle() {\n  const [value, setValue] = useState(20);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setValue((current) =>\n        Math.min(100, Math.round(current + Math.random() * 25)),\n      );\n    }, 1000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return <Progress value={value} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-progress-2.tsx",
    "content": "import {\n  Progress,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n} from \"@/registry/default/ui/progress\";\n\nexport default function Particle() {\n  return (\n    <Progress value={60}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <ProgressLabel>Export data</ProgressLabel>\n        <ProgressValue />\n      </div>\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </Progress>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-progress-3.tsx",
    "content": "\"use client\";\n\nimport {\n  Progress,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n} from \"@/registry/default/ui/progress\";\n\nexport default function Particle() {\n  return (\n    <Progress max={512} value={502}>\n      <div className=\"flex items-center justify-between gap-2\">\n        <ProgressLabel>Upload</ProgressLabel>\n        <ProgressValue>{(_formatted, value) => `${value} / 512`}</ProgressValue>\n      </div>\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </Progress>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-radio-group-1.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  return (\n    <RadioGroup defaultValue=\"next\">\n      <Label>\n        <Radio value=\"next\" /> Next.js\n      </Label>\n      <Label>\n        <Radio value=\"vite\" /> Vite\n      </Label>\n      <Label>\n        <Radio value=\"astro\" /> Astro\n      </Label>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-radio-group-2.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  return (\n    <RadioGroup defaultValue=\"next\">\n      <Label>\n        <Radio value=\"next\" /> Next.js\n      </Label>\n      <Label>\n        <Radio disabled value=\"vite\" /> Vite (disabled)\n      </Label>\n      <Label>\n        <Radio value=\"astro\" /> Astro\n      </Label>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-radio-group-3.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  return (\n    <RadioGroup defaultValue=\"r-1\">\n      <div className=\"flex items-start gap-2\">\n        <Radio id=\"r-1\" value=\"r-1\" />\n        <div className=\"flex flex-col gap-1\">\n          <Label htmlFor=\"r-1\">Free</Label>\n          <p className=\"text-muted-foreground text-xs\">\n            Basic features for personal use.\n          </p>\n        </div>\n      </div>\n      <div className=\"flex items-start gap-2\">\n        <Radio id=\"r-2\" value=\"r-2\" />\n        <div className=\"flex flex-col gap-1\">\n          <Label htmlFor=\"r-2\">Pro</Label>\n          <p className=\"text-muted-foreground text-xs\">\n            Advanced tools for professionals.\n          </p>\n        </div>\n      </div>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-radio-group-4.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  return (\n    <RadioGroup defaultValue=\"r-1\">\n      <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n        <Radio value=\"r-1\" />\n        <div className=\"flex flex-col gap-1\">\n          <p>Email</p>\n          <p className=\"text-muted-foreground text-xs\">\n            Receive notifications via email.\n          </p>\n        </div>\n      </Label>\n      <Label className=\"flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\">\n        <Radio value=\"r-2\" />\n        <div className=\"flex flex-col gap-1\">\n          <p>SMS</p>\n          <p className=\"text-muted-foreground text-xs\">\n            Receive notifications via text message.\n          </p>\n        </div>\n      </Label>\n    </RadioGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-radio-group-5.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldItem, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Selected: ${formData.get(\"frameworks\")}`);\n  };\n\n  return (\n    <Form className=\"max-w-[160px]\" onSubmit={onSubmit}>\n      <Field\n        className=\"gap-4\"\n        name=\"frameworks\"\n        render={(props) => <Fieldset {...props} />}\n      >\n        <FieldsetLegend className=\"font-medium text-sm\">\n          Frameworks\n        </FieldsetLegend>\n        <RadioGroup defaultValue=\"next\">\n          <FieldItem>\n            <FieldLabel>\n              <Radio value=\"next\" /> Next.js\n            </FieldLabel>\n          </FieldItem>\n          <FieldItem>\n            <FieldLabel>\n              <Radio value=\"vite\" /> Vite\n            </FieldLabel>\n          </FieldItem>\n          <FieldItem>\n            <FieldLabel>\n              <Radio value=\"astro\" /> Astro\n            </FieldLabel>\n          </FieldItem>\n        </RadioGroup>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-scroll-area-1.tsx",
    "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nconst tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);\n\nexport default function Particle() {\n  return (\n    <ScrollArea className=\"h-64 rounded-lg border\">\n      <div className=\"px-4 py-2\">\n        <h4 className=\"mb-2 font-medium text-sm\">Tags</h4>\n        <div className=\"flex flex-col gap-1\">\n          {tags.map((tag) => (\n            <div className=\"text-sm\" key={tag}>\n              {tag}\n            </div>\n          ))}\n        </div>\n      </div>\n    </ScrollArea>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-scroll-area-2.tsx",
    "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport default function Particle() {\n  return (\n    <ScrollArea className=\"max-w-96 rounded-lg border\">\n      <div className=\"flex w-max gap-4 p-4\">\n        {Array.from({ length: 20 }).map((_, i) => (\n          <div\n            className=\"flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted\"\n            key={String(i)}\n          >\n            <span className=\"font-medium text-sm\">Item {i + 1}</span>\n          </div>\n        ))}\n      </div>\n    </ScrollArea>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-scroll-area-3.tsx",
    "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport default function Particle() {\n  return (\n    <ScrollArea className=\"h-80 max-w-80 rounded-lg border\">\n      <p className=\"min-w-100 p-4\">\n        Just as suddenly as it had begun, the sensation stopped, leaving Alice\n        feeling slightly disoriented. She looked around and realized that the\n        room hadn't changed at all - it was she who had grown smaller, shrinking\n        down to a fraction of her previous size. Alice felt herself growing\n        larger and larger, filling up the entire room until she feared she might\n        burst. The sensation was both thrilling and terrifying, as if she were\n        expanding beyond the confines of her own body. She wondered if this was\n        what it felt like to be a balloon, swelling with air until it could hold\n        no more. Alice peered into the mirror, her reflection staring back at\n        her with an air of mischief. She wondered what it would be like to step\n        through the glass and into the world beyond, where everything seemed to\n        be topsy-turvy and nothing was quite as it seemed. It's no use going\n        back to yesterday, because I was a different person then, reflected\n        Alice.\n      </p>\n    </ScrollArea>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-scroll-area-4.tsx",
    "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nconst tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);\n\nexport default function Particle() {\n  return (\n    <ScrollArea className=\"h-64 rounded-lg border\" scrollFade>\n      <div className=\"px-4 py-2\">\n        <h4 className=\"mb-2 font-medium text-sm\">Tags</h4>\n        <div className=\"flex flex-col gap-1\">\n          {tags.map((tag) => (\n            <div className=\"text-sm\" key={tag}>\n              {tag}\n            </div>\n          ))}\n        </div>\n      </div>\n    </ScrollArea>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-scroll-area-5.tsx",
    "content": "import { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport default function Particle() {\n  return (\n    <ScrollArea className=\"max-w-96 rounded-lg border\" scrollbarGutter>\n      <div className=\"flex w-max gap-4 p-4\">\n        {Array.from({ length: 20 }).map((_, i) => (\n          <div\n            className=\"flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted\"\n            key={String(i)}\n          >\n            <span className=\"font-medium text-sm\">Item {i + 1}</span>\n          </div>\n        ))}\n      </div>\n    </ScrollArea>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-1.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" defaultValue=\"next\" items={items}>\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-10.tsx",
    "content": "\"use client\";\n\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { description: \"npx create-next-app\", label: \"Next.js\", value: \"next\" },\n  { description: \"npm create vite@latest\", label: \"Vite\", value: \"vite\" },\n  { description: \"npm create astro@latest\", label: \"Astro\", value: \"astro\" },\n  { description: \"npx create-remix\", label: \"Remix\", value: \"remix\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select framework with command\"\n      defaultValue={items[0]}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger className=\"py-1\">\n        <SelectValue>\n          {(item) => (\n            <span className=\"flex flex-col\">\n              <span className=\"truncate\">{item.label}</span>\n              <span className=\"truncate text-muted-foreground text-xs\">\n                {item.description}\n              </span>\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem key={item.value} value={item}>\n            <span className=\"flex flex-col\">\n              <span className=\"truncate\">{item.label}</span>\n              <span className=\"truncate text-muted-foreground text-xs\">\n                {item.description}\n              </span>\n            </span>\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-11.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Select a framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Framework: ${formData.get(\"framework\") || \"\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-64\" onSubmit={onSubmit}>\n      <Field>\n        <FieldLabel>Framework</FieldLabel>\n        <Select\n          aria-label=\"Select framework\"\n          items={items}\n          name=\"framework\"\n          required\n        >\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectPopup>\n            {items.map(({ label, value }) => (\n              <SelectItem key={value} value={value}>\n                {label}\n              </SelectItem>\n            ))}\n          </SelectPopup>\n        </Select>\n        <FieldDescription>Pick your favorite.</FieldDescription>\n        <FieldError>Please select a value.</FieldError>\n      </Field>\n\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-12.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { disabled: false, label: \"Next.js\", value: \"next\" },\n  { disabled: false, label: \"Vite\", value: \"vite\" },\n  { disabled: true, label: \"Astro (coming soon)\", value: \"astro\" },\n  { disabled: true, label: \"Remix (coming soon)\", value: \"remix\" },\n  { disabled: false, label: \"Nuxt\", value: \"nuxt\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" defaultValue=\"next\" items={items}>\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ disabled, label, value }) => (\n          <SelectItem disabled={disabled} key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-13.tsx",
    "content": "\"use client\";\n\nimport { useMemo } from \"react\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nexport default function Particle() {\n  const timezones = Intl.supportedValuesOf(\"timeZone\");\n\n  const formattedTimezones = useMemo(() => {\n    return timezones\n      .map((timezone) => {\n        const formatter = new Intl.DateTimeFormat(\"en\", {\n          timeZone: timezone,\n          timeZoneName: \"shortOffset\",\n        });\n        const parts = formatter.formatToParts(new Date());\n        const offset =\n          parts.find((part) => part.type === \"timeZoneName\")?.value || \"\";\n        const modifiedOffset = offset === \"GMT\" ? \"GMT+0\" : offset;\n\n        const offsetMatch = offset.match(/GMT([+-]?)(\\d+)(?::(\\d+))?/);\n        const sign = offsetMatch?.[1] === \"-\" ? -1 : 1;\n        const hours = Number.parseInt(offsetMatch?.[2] || \"0\", 10);\n        const minutes = Number.parseInt(offsetMatch?.[3] || \"0\", 10);\n        const totalMinutes = sign * (hours * 60 + minutes);\n\n        return {\n          label: `(${modifiedOffset}) ${timezone.replace(/_/g, \" \")}`,\n          numericOffset: totalMinutes,\n          value: timezone,\n        };\n      })\n      .sort((a, b) => a.numericOffset - b.numericOffset);\n  }, [timezones]);\n\n  return (\n    <Select\n      aria-label=\"Select timezone\"\n      defaultValue={formattedTimezones.find(\n        (tz) => tz.value === \"Europe/London\",\n      )}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger>\n        <SelectValue>\n          {(item) => <span className=\"truncate\">{item.label}</span>}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup>\n        {formattedTimezones.map((item) => (\n          <SelectItem key={item.value} value={item}>\n            {item.label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-14.tsx",
    "content": "\"use client\";\n\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { color: \"bg-emerald-500\", label: \"Completed\", value: \"completed\" },\n  { color: \"bg-blue-500\", label: \"In Progress\", value: \"in-progress\" },\n  { color: \"bg-amber-500\", label: \"Pending\", value: \"pending\" },\n  { color: \"bg-gray-500\", label: \"Cancelled\", value: \"cancelled\" },\n  { color: \"bg-red-500\", label: \"Failed\", value: \"failed\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select status\"\n      defaultValue={items[0]}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger>\n        <SelectValue>\n          {(item) => (\n            <span className=\"flex items-center gap-2\">\n              <span\n                aria-hidden=\"true\"\n                className={`size-2 rounded-full ${item.color}`}\n              />\n              <span className=\"truncate\">{item.label}</span>\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem key={item.value} value={item}>\n            <span className=\"flex items-center gap-2\">\n              <span\n                aria-hidden=\"true\"\n                className={`size-2 rounded-full ${item.color}`}\n              />\n              <span className=\"truncate\">{item.label}</span>\n            </span>\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-15.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Active\", value: \"active\" },\n  { label: \"Inactive\", value: \"inactive\" },\n  { label: \"Archived\", value: \"archived\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select filter\" defaultValue=\"active\" items={items}>\n      <SelectTrigger className=\"[--radius-lg:9999px] [--radius:9999px]\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-16.tsx",
    "content": "\"use client\";\n\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"JavaScript\", value: \"javascript\" },\n  { label: \"TypeScript\", value: \"typescript\" },\n  { label: \"Python\", value: \"python\" },\n  { label: \"Go\", value: \"go\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select language\"\n      defaultValue={items[0]}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger>\n        <SelectValue>\n          {(item) => (\n            <span>\n              <span className=\"text-muted-foreground\">Language:</span>{\" \"}\n              {item.label}\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup alignItemWithTrigger={false}>\n        {items.map((item) => (\n          <SelectItem key={item.value} value={item}>\n            {item.label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-17.tsx",
    "content": "\"use client\";\n\nimport {\n  Select,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectItem,\n  SelectPopup,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst countries = [\n  {\n    continent: \"America\",\n    items: [\n      { flag: \"\\u{1F1FA}\\u{1F1F8}\", label: \"United States\", value: \"us\" },\n      { flag: \"\\u{1F1E8}\\u{1F1E6}\", label: \"Canada\", value: \"ca\" },\n      { flag: \"\\u{1F1F2}\\u{1F1FD}\", label: \"Mexico\", value: \"mx\" },\n    ],\n  },\n  {\n    continent: \"Europe\",\n    items: [\n      { flag: \"\\u{1F1EC}\\u{1F1E7}\", label: \"United Kingdom\", value: \"gb\" },\n      { flag: \"\\u{1F1EB}\\u{1F1F7}\", label: \"France\", value: \"fr\" },\n      { flag: \"\\u{1F1E9}\\u{1F1EA}\", label: \"Germany\", value: \"de\" },\n    ],\n  },\n  {\n    continent: \"Asia\",\n    items: [\n      { flag: \"\\u{1F1E8}\\u{1F1F3}\", label: \"China\", value: \"cn\" },\n      { flag: \"\\u{1F1EF}\\u{1F1F5}\", label: \"Japan\", value: \"jp\" },\n      { flag: \"\\u{1F1EE}\\u{1F1F3}\", label: \"India\", value: \"in\" },\n    ],\n  },\n];\n\nconst allItems = countries.flatMap((c) => c.items);\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select country\"\n      defaultValue={allItems.find((item) => item.value === \"ca\")}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger>\n        <SelectValue>\n          {(item) => (\n            <span className=\"flex items-center gap-2\">\n              <span className=\"text-base leading-none\">{item.flag}</span>\n              <span className=\"truncate\">{item.label}</span>\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup>\n        {countries.map((group, index) => (\n          <SelectGroup key={group.continent}>\n            {index > 0 && <SelectSeparator />}\n            <SelectGroupLabel>{group.continent}</SelectGroupLabel>\n            {group.items.map((item) => (\n              <SelectItem key={item.value} value={item}>\n                <span className=\"flex items-center gap-2\">\n                  <span className=\"text-base leading-none\">{item.flag}</span>\n                  <span className=\"truncate\">{item.label}</span>\n                </span>\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-18.tsx",
    "content": "\"use client\";\n\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  {\n    description: \"Ideal for individuals\",\n    label: \"Standard Plan\",\n    value: \"standard\",\n  },\n  { description: \"For professional users\", label: \"Pro Plan\", value: \"pro\" },\n  {\n    description: \"Built for large teams\",\n    label: \"Enterprise Plan\",\n    value: \"enterprise\",\n  },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select plan\"\n      defaultValue={items[1]}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger>\n        <SelectValue>\n          {(item) => <span className=\"truncate\">{item.label}</span>}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup alignItemWithTrigger={false}>\n        {items.map((item) => (\n          <SelectItem key={item.value} value={item}>\n            <span className=\"flex flex-col\">\n              <span className=\"truncate\">{item.label}</span>\n              <span className=\"truncate text-muted-foreground text-xs\">\n                {item.description}\n              </span>\n            </span>\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-19.tsx",
    "content": "\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport {\n  Select,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst users = [\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\",\n    initials: \"JH\",\n    label: \"Jenny Hamilton\",\n    value: \"jenny\",\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\",\n    initials: \"PS\",\n    label: \"Paul Smith\",\n    value: \"paul\",\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\",\n    initials: \"LW\",\n    label: \"Luna Wyen\",\n    value: \"luna\",\n  },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select user\"\n      defaultValue={users[0]}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger>\n        <SelectValue>\n          {(item) => (\n            <span className=\"flex items-center gap-2\">\n              <Avatar className=\"size-5\">\n                <AvatarImage alt={item.label} src={item.avatar} />\n                <AvatarFallback className=\"text-[10px]\">\n                  {item.initials}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"truncate\">{item.label}</span>\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup>\n        <SelectGroup>\n          <SelectGroupLabel>Impersonate user</SelectGroupLabel>\n          {users.map((item) => (\n            <SelectItem key={item.value} value={item}>\n              <span className=\"flex items-center gap-2\">\n                <Avatar className=\"size-5\">\n                  <AvatarImage alt={item.label} src={item.avatar} />\n                  <AvatarFallback className=\"text-[10px]\">\n                    {item.initials}\n                  </AvatarFallback>\n                </Avatar>\n                <span className=\"truncate\">{item.label}</span>\n              </span>\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-2.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" items={items}>\n      <SelectTrigger size=\"sm\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-20.tsx",
    "content": "\"use client\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst users = [\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=72&h=72&dpr=2&q=80\",\n    initials: \"JH\",\n    label: \"Jenny Hamilton\",\n    username: \"@jennycodes\",\n    value: \"jenny\",\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=72&h=72&dpr=2&q=80\",\n    initials: \"PS\",\n    label: \"Paul Smith\",\n    username: \"@paulsmith\",\n    value: \"paul\",\n  },\n  {\n    avatar:\n      \"https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=72&h=72&dpr=2&q=80\",\n    initials: \"LW\",\n    label: \"Luna Wyen\",\n    username: \"@wyen.luna\",\n    value: \"luna\",\n  },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select user\"\n      defaultValue={users[0]}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger className=\"h-auto py-1.5\">\n        <SelectValue>\n          {(item) => (\n            <span className=\"flex items-center gap-2\">\n              <Avatar className=\"size-8\">\n                <AvatarImage alt={item.label} src={item.avatar} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <span className=\"flex flex-col text-left\">\n                <span className=\"truncate font-medium\">{item.label}</span>\n                <span className=\"truncate text-muted-foreground text-xs\">\n                  {item.username}\n                </span>\n              </span>\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup>\n        {users.map((item) => (\n          <SelectItem className=\"py-1.5\" key={item.value} value={item}>\n            <span className=\"flex items-center gap-2\">\n              <Avatar className=\"size-8\">\n                <AvatarImage alt={item.label} src={item.avatar} />\n                <AvatarFallback>{item.initials}</AvatarFallback>\n              </Avatar>\n              <span className=\"flex flex-col\">\n                <span className=\"truncate font-medium\">{item.label}</span>\n                <span className=\"truncate text-muted-foreground text-xs\">\n                  {item.username}\n                </span>\n              </span>\n            </span>\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-21.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" defaultValue=\"next\" items={items}>\n      <SelectTrigger className=\"w-fit\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-22.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" defaultValue=\"next\" items={items}>\n      <SelectTrigger className=\"border-transparent bg-muted shadow-none before:hidden\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-23.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectLabel,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Orange\", value: \"orange\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select fruit\" defaultValue={items[0]} items={items}>\n      <SelectLabel>Fruits</SelectLabel>\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem key={item.value} value={item}>\n            {item.label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-3.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" items={items}>\n      <SelectTrigger size=\"lg\">\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-4.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" items={items}>\n      <SelectTrigger disabled>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-5.tsx",
    "content": "import {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select aria-label=\"Select framework\" items={items}>\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup alignItemWithTrigger={false}>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-6.tsx",
    "content": "import {\n  Select,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectItem,\n  SelectPopup,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst placeholder = [{ label: \"Select framework\", value: null }];\n\nconst frontend = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nconst backend = [\n  { label: \"Express\", value: \"express\" },\n  { label: \"NestJS\", value: \"nestjs\" },\n  { label: \"Fastify\", value: \"fastify\" },\n  { label: \"Django\", value: \"django\" },\n  { label: \"Flask\", value: \"flask\" },\n  { label: \"Rails\", value: \"rails\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select framework\"\n      items={[...placeholder, ...frontend, ...backend]}\n    >\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        <SelectGroup>\n          <SelectGroupLabel>Frontend</SelectGroupLabel>\n          {frontend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectGroupLabel>Backend</SelectGroupLabel>\n          {backend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-7.tsx",
    "content": "\"use client\";\n\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst languages = {\n  cpp: \"C++\",\n  csharp: \"C#\",\n  go: \"Go\",\n  java: \"Java\",\n  javascript: \"JavaScript\",\n  php: \"PHP\",\n  python: \"Python\",\n  rust: \"Rust\",\n  swift: \"Swift\",\n  typescript: \"TypeScript\",\n};\n\ntype Language = keyof typeof languages;\n\nconst values = Object.keys(languages) as Language[];\n\nfunction renderValue(value: Language[]) {\n  if (value.length === 0) {\n    return \"Select languages…\";\n  }\n\n  const firstLanguage = value[0] ? languages[value[0]] : \"\";\n  const additionalLanguages =\n    value.length > 1 ? ` (+${value.length - 1} more)` : \"\";\n  return firstLanguage + additionalLanguages;\n}\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select languages\"\n      defaultValue={[\"javascript\", \"typescript\"]}\n      multiple\n    >\n      <SelectTrigger>\n        <SelectValue>{renderValue}</SelectValue>\n      </SelectTrigger>\n      <SelectPopup alignItemWithTrigger={false}>\n        {values.map((value) => (\n          <SelectItem key={value} value={value}>\n            {languages[value]}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-8.tsx",
    "content": "import { CableIcon } from \"lucide-react\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { label: \"Select framework\", value: null },\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select framework with icon\"\n      defaultValue=\"next\"\n      items={items}\n    >\n      <SelectTrigger>\n        <CableIcon aria-hidden=\"true\" />\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup alignItemWithTrigger={false}>\n        {items.map(({ label, value }) => (\n          <SelectItem key={value} value={value}>\n            {label}\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-select-9.tsx",
    "content": "\"use client\";\n\nimport { Code2Icon, GlobeIcon, LayersIcon, ZapIcon } from \"lucide-react\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst items = [\n  { icon: LayersIcon, label: \"Components\", value: \"components\" },\n  { icon: ZapIcon, label: \"Performance\", value: \"performance\" },\n  { icon: GlobeIcon, label: \"Network\", value: \"network\" },\n  { icon: Code2Icon, label: \"Development\", value: \"development\" },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      aria-label=\"Select category\"\n      defaultValue={items[0]}\n      itemToStringValue={(item) => item.value}\n    >\n      <SelectTrigger>\n        <SelectValue>\n          {(item) => (\n            <span className=\"flex items-center gap-2\">\n              <item.icon />\n              <span className=\"truncate\">{item.label}</span>\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup>\n        {items.map((item) => (\n          <SelectItem key={item.value} value={item}>\n            <span className=\"flex items-center gap-2\">\n              <item.icon />\n              <span className=\"truncate\">{item.label}</span>\n            </span>\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-separator-1.tsx",
    "content": "import { Separator } from \"@/registry/default/ui/separator\";\n\nexport default function Particle() {\n  return (\n    <div className=\"max-w-72\">\n      <div className=\"space-y-1\">\n        <h4 className=\"font-medium text-sm\">coss ui</h4>\n        <p className=\"text-muted-foreground text-sm\">\n          Unstyled, accessible primitives for fast product UI and design\n          systems.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n        <Separator orientation=\"vertical\" />\n        <div>Releases</div>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-sheet-1.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Sheet,\n  SheetClose,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetPanel,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\";\n\nexport default function Particle() {\n  return (\n    <Sheet>\n      <SheetTrigger render={<Button variant=\"outline\" />}>\n        Open Sheet\n      </SheetTrigger>\n      <SheetPopup>\n        <Form className=\"contents\">\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <SheetPanel className=\"grid gap-4\">\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input defaultValue=\"Margaret Welsh\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Username</FieldLabel>\n              <Input defaultValue=\"@maggie.welsh\" type=\"text\" />\n            </Field>\n          </SheetPanel>\n          <SheetFooter>\n            <SheetClose render={<Button variant=\"ghost\" />}>Cancel</SheetClose>\n            <Button type=\"submit\">Save</Button>\n          </SheetFooter>\n        </Form>\n      </SheetPopup>\n    </Sheet>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-sheet-2.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport {\n  Sheet,\n  SheetClose,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetPanel,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\";\n\nexport default function Particle() {\n  return (\n    <Sheet>\n      <SheetTrigger render={<Button variant=\"outline\" />}>\n        Open Sheet\n      </SheetTrigger>\n      <SheetPopup variant=\"inset\">\n        <Form className=\"h-full gap-0\">\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <SheetPanel className=\"grid gap-4\">\n            <Field>\n              <FieldLabel>Name</FieldLabel>\n              <Input defaultValue=\"Margaret Welsh\" type=\"text\" />\n            </Field>\n            <Field>\n              <FieldLabel>Username</FieldLabel>\n              <Input defaultValue=\"@maggie.welsh\" type=\"text\" />\n            </Field>\n          </SheetPanel>\n          <SheetFooter>\n            <SheetClose render={<Button variant=\"ghost\" />}>Cancel</SheetClose>\n            <Button type=\"submit\">Save</Button>\n          </SheetFooter>\n        </Form>\n      </SheetPopup>\n    </Sheet>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-sheet-3.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPanel,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/default/ui/sheet\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          Open Right\n        </SheetTrigger>\n        <SheetPopup showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>Right</SheetTitle>\n            <SheetDescription>Right side of the screen.</SheetDescription>\n          </SheetHeader>\n          <SheetPanel>\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\n              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n              reprehenderit in voluptate velit esse cillum dolore eu fugiat\n              nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n              sunt in culpa qui officia deserunt mollit anim id est laborum.\n            </p>\n          </SheetPanel>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          Open Left\n        </SheetTrigger>\n        <SheetPopup showCloseButton={false} side=\"left\">\n          <SheetHeader>\n            <SheetTitle>Left</SheetTitle>\n            <SheetDescription>Left side of the screen.</SheetDescription>\n          </SheetHeader>\n          <SheetPanel>\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\n              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n              reprehenderit in voluptate velit esse cillum dolore eu fugiat\n              nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n              sunt in culpa qui officia deserunt mollit anim id est laborum.\n            </p>\n          </SheetPanel>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          Open Top\n        </SheetTrigger>\n        <SheetPopup showCloseButton={false} side=\"top\">\n          <SheetHeader>\n            <SheetTitle>Top</SheetTitle>\n            <SheetDescription>Top of the screen.</SheetDescription>\n          </SheetHeader>\n          <SheetPanel>\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\n              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n              reprehenderit in voluptate velit esse cillum dolore eu fugiat\n              nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n              sunt in culpa qui officia deserunt mollit anim id est laborum.\n            </p>\n          </SheetPanel>\n        </SheetPopup>\n      </Sheet>\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          Open Bottom\n        </SheetTrigger>\n        <SheetPopup showCloseButton={false} side=\"bottom\">\n          <SheetHeader>\n            <SheetTitle>Bottom</SheetTitle>\n            <SheetDescription>Bottom of the screen.</SheetDescription>\n          </SheetHeader>\n          <SheetPanel>\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n              enim ad minim veniam, quis nostrud exercitation ullamco laboris\n              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n              reprehenderit in voluptate velit esse cillum dolore eu fugiat\n              nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n              sunt in culpa qui officia deserunt mollit anim id est laborum.\n            </p>\n          </SheetPanel>\n        </SheetPopup>\n      </Sheet>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-skeleton-1.tsx",
    "content": "\"use client\";\n\nimport { UserRoundPlusIcon, UsersRoundIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/default/ui/avatar\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\n\nconst users = [\n  {\n    delay: 3000,\n    fallback: \"SJ\",\n    followers: \"15k\",\n    image:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&dpr=2&q=80\",\n    name: \"Sarah Johnson\",\n    role: \"Design Engineer\",\n  },\n  {\n    delay: 4000,\n    fallback: \"MA\",\n    followers: \"8k\",\n    image:\n      \"https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=80&h=80&dpr=2&q=80\",\n    name: \"Mark Bennett Andersson\",\n    role: \"Product Designer\",\n  },\n  {\n    delay: 3400,\n    fallback: \"AR\",\n    followers: \"12k\",\n    image:\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&dpr=2&q=80\",\n    name: \"Alex Rivera\",\n    role: \"UI/UX Designer\",\n  },\n];\n\nfunction UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) {\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setIsLoaded(true);\n    }, delay);\n\n    return () => clearTimeout(timer);\n  }, [delay]);\n\n  if (!isLoaded) {\n    return <UserCardSkeleton />;\n  }\n\n  return (\n    <>\n      <Avatar className=\"size-10\">\n        <AvatarImage alt={user.name} src={user.image} />\n        <AvatarFallback>{user.fallback}</AvatarFallback>\n      </Avatar>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <h4 className=\"line-clamp-1 font-medium text-sm\">{user.name}</h4>\n        <div className=\"flex items-center gap-3 text-muted-foreground text-xs\">\n          <span className=\"truncate\">{user.role}</span>\n          <div className=\"flex min-w-0 items-center gap-1\">\n            <UsersRoundIcon className=\"size-3 shrink-0\" />\n            <span className=\"truncate\">\n              {user.followers}\n              <span className=\"max-sm:hidden\"> followers</span>\n            </span>\n          </div>\n        </div>\n      </div>\n      <Button size=\"xs\">\n        <UserRoundPlusIcon />\n        Follow\n      </Button>\n    </>\n  );\n}\n\nfunction UserCardSkeleton() {\n  return (\n    <>\n      <Skeleton className=\"size-10 rounded-full\" />\n      <div className=\"flex flex-1 flex-col\">\n        <Skeleton className=\"my-0.5 h-4 max-w-54\" />\n        <div className=\"flex max-w-54 items-center gap-1\">\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n        </div>\n      </div>\n      <Skeleton className=\"h-7 w-19 sm:h-6 sm:w-17\" />\n    </>\n  );\n}\n\nexport default function Particle() {\n  return (\n    <div className=\"flex w-full max-w-92 flex-col gap-6\">\n      {users.map((user) => (\n        <div className=\"flex items-center gap-4\" key={user.fallback}>\n          <UserCard delay={user.delay} user={user} />\n        </div>\n      ))}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-skeleton-2.tsx",
    "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex w-full max-w-92 items-center gap-4\">\n      <Skeleton className=\"size-10 rounded-full\" />\n      <div className=\"flex flex-1 flex-col\">\n        <Skeleton className=\"my-0.5 h-4 max-w-54\" />\n        <div className=\"flex max-w-54 items-center gap-1\">\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n          <Skeleton className=\"my-0.5 h-4 w-1/2\" />\n        </div>\n      </div>\n      <Skeleton className=\"h-6 w-17\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-1.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return <Slider defaultValue={50} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-10.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return (\n    <Slider\n      aria-label=\"Dual thumb slider with collision behavior swap\"\n      defaultValue={[25, 75]}\n      thumbCollisionBehavior=\"swap\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-11.tsx",
    "content": "\"use client\";\n\nimport { Volume2Icon, VolumeXIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Slider, SliderValue } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  const [value, setValue] = useState<number | readonly number[]>(25);\n\n  return (\n    <Field className=\"*:grid *:grid-cols-[auto_1fr_auto] *:items-center *:gap-x-2\">\n      <Slider aria-label=\"Volume slider\" onValueChange={setValue} value={value}>\n        <div className=\"col-span-3 mb-2 flex items-center justify-between gap-1\">\n          <FieldLabel>Volume</FieldLabel>\n          <SliderValue />\n        </div>\n        <VolumeXIcon\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 opacity-80\"\n        />\n        <Volume2Icon\n          aria-hidden=\"true\"\n          className=\"order-1 size-4 shrink-0 opacity-80\"\n        />\n      </Slider>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-12.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst min = 0;\nconst max = 150;\n\nexport default function Particle() {\n  const [value, setValue] = useState(25);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Slider\n        aria-label=\"Slider with input\"\n        className=\"flex-1\"\n        max={max}\n        min={min}\n        onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}\n        value={value}\n      />\n      <NumberField\n        aria-label=\"Enter slider value\"\n        className=\"w-12\"\n        max={max}\n        min={min}\n        onValueChange={(v) => setValue(v ?? min)}\n        render={<NumberFieldGroup />}\n        size=\"sm\"\n        value={value}\n      >\n        <NumberFieldInput />\n      </NumberField>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-13.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst min = 0;\nconst max = 50;\n\nexport default function Particle() {\n  const [values, setValues] = useState([0, 20]);\n\n  const updateValue = (index: number, newValue: number | null) => {\n    const v = newValue ?? min;\n    setValues((prev) => {\n      const next = [...prev];\n      if (index === 0) {\n        // Min value: clamp to not exceed max value\n        next[0] = Math.min(v, prev[1] ?? max);\n      } else {\n        // Max value: clamp to not go below min value\n        next[1] = Math.max(v, prev[0] ?? min);\n      }\n      return next;\n    });\n  };\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <NumberField\n        aria-label=\"Minimum value\"\n        className=\"w-10\"\n        max={values[1]}\n        min={min}\n        onValueChange={(v) => updateValue(0, v)}\n        render={<NumberFieldGroup />}\n        size=\"sm\"\n        value={values[0]}\n      >\n        <NumberFieldInput />\n      </NumberField>\n      <Slider\n        aria-label=\"Dual range slider\"\n        className=\"flex-1 *:min-w-0!\"\n        max={max}\n        min={min}\n        onValueChange={(v) => setValues(Array.isArray(v) ? [...v] : [v])}\n        value={values}\n      />\n      <NumberField\n        aria-label=\"Maximum value\"\n        className=\"w-10\"\n        max={max}\n        min={values[0]}\n        onValueChange={(v) => updateValue(1, v)}\n        render={<NumberFieldGroup />}\n        size=\"sm\"\n        value={values[1]}\n      >\n        <NumberFieldInput />\n      </NumberField>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-14.tsx",
    "content": "\"use client\";\n\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst min = 0;\nconst max = 200;\nconst step = 5;\n\nexport default function Particle() {\n  const [value, setValue] = useState(100);\n\n  return (\n    <Field name=\"credits\">\n      <FieldLabel className=\"tabular-nums\">{value} credits/mo</FieldLabel>\n      <div className=\"flex items-center gap-2\">\n        <Button\n          aria-label=\"Decrease value\"\n          disabled={value === min}\n          onClick={() => setValue(Math.max(min, value - step))}\n          size=\"icon\"\n          variant=\"outline\"\n        >\n          <MinusIcon aria-hidden=\"true\" />\n        </Button>\n        <Slider\n          aria-label=\"Credits slider\"\n          className=\"flex-1\"\n          max={max}\n          min={min}\n          onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}\n          step={step}\n          value={value}\n        />\n        <Button\n          aria-label=\"Increase value\"\n          disabled={value === max}\n          onClick={() => setValue(Math.min(max, value + step))}\n          size=\"icon\"\n          variant=\"outline\"\n        >\n          <PlusIcon aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-15.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst min = 5;\nconst max = 1240;\n\nexport default function Particle() {\n  const [values, setValues] = useState([min, max]);\n\n  const formatPrice = (price: number) =>\n    price === max\n      ? `$${price.toLocaleString()}+`\n      : `$${price.toLocaleString()}`;\n\n  return (\n    <Fieldset className=\"flex max-w-none flex-col gap-3\">\n      <FieldsetLegend className=\"tabular-nums\">\n        From {formatPrice(values[0] ?? min)} to {formatPrice(values[1] ?? max)}\n      </FieldsetLegend>\n      <Slider\n        aria-label=\"Price range\"\n        className=\"flex-1\"\n        max={max}\n        min={min}\n        name=\"price-range\"\n        onValueChange={(v) => setValues(Array.isArray(v) ? [...v] : [v])}\n        value={values}\n      />\n    </Fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-16.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst labels = [\"Awful\", \"Poor\", \"Okay\", \"Good\", \"Amazing\"];\n\nexport default function Particle() {\n  const [value, setValue] = useState<number | readonly number[]>(3);\n\n  const currentValue = Array.isArray(value) ? value[0] : value;\n\n  return (\n    <Field className=\"*:grid *:grid-cols-[auto_1fr_auto] *:items-center *:gap-x-2\">\n      <Slider\n        aria-label=\"Rate your experience\"\n        max={5}\n        min={1}\n        onValueChange={setValue}\n        value={value}\n      >\n        <div className=\"col-span-3 mb-2 flex items-center justify-between gap-1\">\n          <FieldLabel>Rate your experience</FieldLabel>\n          <span className=\"text-sm\">{labels[currentValue - 1]}</span>\n        </div>\n        <span aria-hidden=\"true\" className=\"text-2xl\">\n          😡\n        </span>\n        <span aria-hidden=\"true\" className=\"order-1 text-2xl\">\n          😍\n        </span>\n      </Slider>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-17.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return <Slider defaultValue={50} orientation=\"vertical\" />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-18.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex h-40 items-center justify-center\">\n      <Slider defaultValue={[25, 75]} orientation=\"vertical\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-19.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst min = 0;\nconst max = 100;\n\nexport default function Particle() {\n  const [value, setValue] = useState(25);\n\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4\">\n      <Slider\n        aria-label=\"Vertical slider with input\"\n        max={max}\n        min={min}\n        onValueChange={(v) => setValue(Array.isArray(v) ? v[0] : v)}\n        orientation=\"vertical\"\n        value={value}\n      />\n      <NumberField\n        aria-label=\"Enter slider value\"\n        className=\"w-16\"\n        max={max}\n        min={min}\n        onValueChange={(v) => setValue(v ?? min)}\n        render={<NumberFieldGroup />}\n        size=\"sm\"\n        value={value}\n      >\n        <NumberFieldInput />\n      </NumberField>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-2.tsx",
    "content": "import { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Slider, SliderValue } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <Slider defaultValue={50}>\n        <div className=\"mb-2 flex items-center justify-between gap-1\">\n          <FieldLabel className=\"font-medium text-sm\">Opacity</FieldLabel>\n          <SliderValue />\n        </div>\n      </Slider>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-20.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nconst bands = [\n  { label: \"60 Hz\", value: 2 },\n  { label: \"250 Hz\", value: 1 },\n  { label: \"1k\", value: -1 },\n  { label: \"4k\", value: -3 },\n  { label: \"16k\", value: 2 },\n];\n\nexport default function Particle() {\n  return (\n    <div className=\"flex h-48 justify-center gap-8\">\n      {bands.map((band) => (\n        <Slider\n          aria-label={band.label}\n          defaultValue={band.value}\n          key={band.label}\n          max={5}\n          min={-5}\n          orientation=\"vertical\"\n        />\n      ))}\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-21.tsx",
    "content": "\"use client\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst min = -10;\nconst max = 10;\nconst defaultValues = { x: 0, y: 0, z: 0 };\nconst initialValues = { x: -2, y: 4, z: 2 };\n\nexport default function Particle() {\n  const [values, setValues] = useState(initialValues);\n\n  const updateValue = (axis: keyof typeof values, v: number | null) => {\n    setValues((prev) => ({ ...prev, [axis]: v ?? 0 }));\n  };\n\n  return (\n    <Fieldset className=\"flex max-w-none flex-col gap-4\">\n      <FieldsetLegend>Object position</FieldsetLegend>\n      <div className=\"flex flex-col gap-2\">\n        {([\"x\", \"y\", \"z\"] as const).map((axis) => (\n          <div className=\"flex items-center gap-2\" key={axis}>\n            <Label className=\"w-3 text-muted-foreground text-xs\">\n              {axis.toUpperCase()}\n            </Label>\n            <Slider\n              aria-label={`${axis.toUpperCase()} position`}\n              className=\"flex-1\"\n              max={max}\n              min={min}\n              onValueChange={(v) =>\n                updateValue(axis, Array.isArray(v) ? v[0] : v)\n              }\n              value={values[axis]}\n            />\n            <NumberField\n              aria-label={`Enter ${axis.toUpperCase()} value`}\n              className=\"w-16\"\n              max={max}\n              min={min}\n              onValueChange={(v) => updateValue(axis, v)}\n              render={<NumberFieldGroup />}\n              size=\"sm\"\n              value={values[axis]}\n            >\n              <NumberFieldInput />\n            </NumberField>\n          </div>\n        ))}\n      </div>\n      <Button\n        className=\"w-full\"\n        onClick={() => setValues(defaultValues)}\n        variant=\"outline\"\n      >\n        <RotateCcwIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n        Reset\n      </Button>\n    </Fieldset>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-22.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  NumberField,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst items = [\n  { id: 1, price: 80 },\n  { id: 2, price: 95 },\n  { id: 3, price: 110 },\n  { id: 4, price: 125 },\n  { id: 5, price: 130 },\n  { id: 6, price: 140 },\n  { id: 7, price: 145 },\n  { id: 8, price: 150 },\n  { id: 9, price: 155 },\n  { id: 10, price: 165 },\n  { id: 11, price: 175 },\n  { id: 12, price: 185 },\n  { id: 13, price: 195 },\n  { id: 14, price: 205 },\n  { id: 15, price: 215 },\n  { id: 16, price: 225 },\n  { id: 17, price: 235 },\n  { id: 18, price: 245 },\n  { id: 19, price: 255 },\n  { id: 20, price: 260 },\n  { id: 21, price: 265 },\n  { id: 22, price: 270 },\n  { id: 23, price: 275 },\n  { id: 24, price: 280 },\n  { id: 25, price: 285 },\n  { id: 26, price: 290 },\n  { id: 27, price: 290 },\n  { id: 28, price: 295 },\n  { id: 29, price: 295 },\n  { id: 30, price: 295 },\n  { id: 31, price: 298 },\n  { id: 32, price: 299 },\n  { id: 33, price: 300 },\n  { id: 34, price: 305 },\n  { id: 35, price: 310 },\n  { id: 36, price: 315 },\n  { id: 37, price: 320 },\n  { id: 38, price: 325 },\n  { id: 39, price: 330 },\n  { id: 40, price: 335 },\n  { id: 41, price: 340 },\n  { id: 42, price: 345 },\n  { id: 43, price: 350 },\n  { id: 44, price: 355 },\n  { id: 45, price: 360 },\n  { id: 46, price: 365 },\n  { id: 47, price: 365 },\n  { id: 48, price: 375 },\n  { id: 49, price: 380 },\n  { id: 50, price: 385 },\n  { id: 51, price: 390 },\n  { id: 52, price: 395 },\n  { id: 53, price: 400 },\n  { id: 54, price: 405 },\n  { id: 55, price: 410 },\n  { id: 56, price: 415 },\n  { id: 57, price: 420 },\n  { id: 58, price: 425 },\n  { id: 59, price: 430 },\n  { id: 60, price: 435 },\n  { id: 61, price: 440 },\n  { id: 62, price: 445 },\n  { id: 63, price: 450 },\n  { id: 64, price: 455 },\n  { id: 65, price: 460 },\n  { id: 66, price: 465 },\n  { id: 67, price: 470 },\n  { id: 68, price: 475 },\n  { id: 69, price: 480 },\n  { id: 70, price: 485 },\n  { id: 71, price: 490 },\n  { id: 72, price: 495 },\n  { id: 73, price: 495 },\n  { id: 74, price: 498 },\n  { id: 75, price: 499 },\n  { id: 76, price: 500 },\n  { id: 77, price: 500 },\n  { id: 78, price: 500 },\n  { id: 79, price: 515 },\n  { id: 80, price: 530 },\n  { id: 81, price: 545 },\n  { id: 82, price: 560 },\n  { id: 83, price: 575 },\n  { id: 84, price: 590 },\n  { id: 85, price: 605 },\n  { id: 86, price: 620 },\n  { id: 87, price: 635 },\n  { id: 88, price: 650 },\n  { id: 89, price: 655 },\n  { id: 90, price: 660 },\n  { id: 91, price: 665 },\n  { id: 92, price: 670 },\n  { id: 93, price: 675 },\n  { id: 94, price: 680 },\n  { id: 95, price: 685 },\n  { id: 96, price: 690 },\n  { id: 97, price: 695 },\n  { id: 98, price: 700 },\n  { id: 99, price: 700 },\n  { id: 100, price: 700 },\n  { id: 101, price: 700 },\n  { id: 102, price: 700 },\n  { id: 103, price: 700 },\n  { id: 104, price: 725 },\n  { id: 105, price: 750 },\n  { id: 106, price: 775 },\n  { id: 107, price: 800 },\n  { id: 108, price: 815 },\n  { id: 109, price: 830 },\n  { id: 110, price: 845 },\n  { id: 111, price: 845 },\n  { id: 112, price: 845 },\n  { id: 113, price: 870 },\n  { id: 114, price: 875 },\n  { id: 115, price: 880 },\n  { id: 116, price: 885 },\n  { id: 117, price: 890 },\n  { id: 118, price: 895 },\n  { id: 119, price: 898 },\n  { id: 120, price: 900 },\n];\n\nconst tickCount = 40;\nconst min = Math.min(...items.map((item) => item.price));\nconst max = Math.max(...items.map((item) => item.price));\nconst priceStep = (max - min) / tickCount;\n\nconst itemCounts = Array.from({ length: tickCount }, (_, tick) => {\n  const rangeMin = min + tick * priceStep;\n  const rangeMax = min + (tick + 1) * priceStep;\n  return items.filter((item) => item.price >= rangeMin && item.price < rangeMax)\n    .length;\n});\n\nconst maxCount = Math.max(...itemCounts);\n\nexport default function Particle() {\n  const [values, setValues] = useState([200, 780]);\n\n  const updateValue = (index: number, newValue: number | null) => {\n    const v = newValue ?? min;\n    setValues((prev) => {\n      const next = [...prev];\n      if (index === 0) {\n        // Min value: clamp to not exceed max value\n        next[0] = Math.min(v, prev[1] ?? max);\n      } else {\n        // Max value: clamp to not go below min value\n        next[1] = Math.max(v, prev[0] ?? min);\n      }\n      return next;\n    });\n  };\n\n  const countItemsInRange = () =>\n    items.filter(\n      (item) =>\n        item.price >= (values[0] ?? min) && item.price <= (values[1] ?? max),\n    ).length;\n\n  const isBarInSelectedRange = (index: number) => {\n    const rangeMin = min + index * priceStep;\n    const rangeMax = min + (index + 1) * priceStep;\n    return (\n      countItemsInRange() > 0 &&\n      rangeMin <= (values[1] ?? max) &&\n      rangeMax >= (values[0] ?? min)\n    );\n  };\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div>\n        <div aria-hidden=\"true\" className=\"flex h-12 w-full items-end px-3\">\n          {itemCounts.map((count, i) => (\n            <div\n              className=\"flex flex-1 justify-center\"\n              key={String(i)}\n              style={{ height: `${(count / maxCount) * 100}%` }}\n            >\n              <span\n                className=\"mx-px size-full bg-primary/20 data-[selected=true]:bg-primary/50\"\n                data-selected={isBarInSelectedRange(i)}\n              />\n            </div>\n          ))}\n        </div>\n        <Slider\n          aria-label=\"Price range\"\n          className=\"*:min-w-0!\"\n          max={max}\n          min={min}\n          onValueChange={(v) => setValues(Array.isArray(v) ? [...v] : [v])}\n          value={values}\n        />\n      </div>\n\n      <div className=\"flex items-center justify-between gap-4\">\n        <InputGroup>\n          <NumberField\n            aria-label=\"Minimum price\"\n            max={values[1]}\n            min={min}\n            onValueChange={(v) => updateValue(0, v)}\n            value={values[0]}\n          >\n            <NumberFieldInput className=\"text-left\" />\n          </NumberField>\n          <InputGroupAddon>\n            <InputGroupText>$</InputGroupText>\n          </InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <NumberField\n            aria-label=\"Maximum price\"\n            max={max}\n            min={values[0]}\n            onValueChange={(v) => updateValue(1, v)}\n            value={values[1]}\n          >\n            <NumberFieldInput className=\"text-left\" />\n          </NumberField>\n          <InputGroupAddon>\n            <InputGroupText>$</InputGroupText>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n\n      <Button className=\"w-full\" variant=\"outline\">\n        Show {countItemsInRange()} items\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-23.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldDescription } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Slider, SliderValue } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState<boolean>(false);\n  const [value, setValue] = useState<number | readonly number[]>([25, 75]);\n\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const volumes = formData.getAll(\"volume\");\n    alert(`Volume: ${volumes.join(\", \")}`);\n  };\n\n  return (\n    <Form onSubmit={onSubmit}>\n      <Fieldset className=\"flex max-w-none flex-col items-stretch gap-3\">\n        <Field>\n          <Slider name=\"volume\" onValueChange={setValue} value={value}>\n            <div className=\"mb-2 flex items-center justify-between gap-1\">\n              <FieldsetLegend>Volume</FieldsetLegend>\n              <SliderValue />\n            </div>\n          </Slider>\n          <FieldDescription>Choose a value between 0 and 100</FieldDescription>\n        </Field>\n      </Fieldset>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-3.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return <Slider defaultValue={50} disabled />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-4.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return (\n    <div>\n      <Slider\n        aria-label=\"Storage size in GB\"\n        defaultValue={15}\n        max={35}\n        min={5}\n      />\n      <div\n        aria-label=\"Storage size reference values\"\n        className=\"mt-4 flex w-full items-center justify-between gap-1 font-medium text-muted-foreground text-xs\"\n        role=\"group\"\n      >\n        <span>5 GB</span>\n        <span>20 GB</span>\n        <span>35 GB</span>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-5.tsx",
    "content": "import { cn } from \"@/registry/default/lib/utils\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst max = 12;\nconst skipInterval = 2;\nconst ticks = [...Array(max + 1)].map((_, i) => i);\n\nexport default function Particle() {\n  return (\n    <div>\n      <Slider aria-label=\"Value selector\" defaultValue={5} max={max} />\n      <div\n        aria-label=\"Value scale from 0 to 12\"\n        className=\"mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs\"\n        role=\"group\"\n      >\n        {ticks.map((_, i) => (\n          <span\n            className=\"flex w-0 flex-col items-center justify-center gap-2\"\n            key={String(i)}\n          >\n            <span\n              className={cn(\n                \"h-1 w-px bg-muted-foreground/72\",\n                i % skipInterval !== 0 && \"h-0.5\",\n              )}\n            />\n            <span className={cn(i % skipInterval !== 0 && \"opacity-0\")}>\n              {i}\n            </span>\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-6.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return (\n    <div>\n      <div\n        aria-hidden=\"true\"\n        className=\"mb-3 flex w-full items-center justify-between gap-2 font-medium text-muted-foreground text-xs\"\n      >\n        <span>Low</span>\n        <span>High</span>\n      </div>\n      <Slider\n        aria-label=\"Intensity level from low to high\"\n        defaultValue={50}\n        step={10}\n      />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-7.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return <Slider defaultValue={[25, 75]} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-8.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return <Slider defaultValue={[20, 50, 80]} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-slider-9.tsx",
    "content": "import { Slider } from \"@/registry/default/ui/slider\";\n\nexport default function Particle() {\n  return (\n    <Slider\n      aria-label=\"Dual thumb slider with collision behavior none\"\n      defaultValue={[25, 75]}\n      thumbCollisionBehavior=\"none\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-spinner-1.tsx",
    "content": "import { Spinner } from \"@/registry/default/ui/spinner\";\n\nexport default function Particle() {\n  return <Spinner />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-switch-1.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  return (\n    <Label>\n      <Switch />\n      Marketing emails\n    </Label>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-switch-2.tsx",
    "content": "import { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  return (\n    <Label>\n      <Switch disabled />\n      Marketing emails\n    </Label>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-switch-3.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  const id = useId();\n\n  return (\n    <div className=\"flex items-start gap-2\">\n      <Switch defaultChecked id={id} />\n      <div className=\"flex flex-col gap-1\">\n        <Label htmlFor={id}>Marketing emails</Label>\n        <p className=\"text-muted-foreground text-xs\">\n          By enabling marketing emails, you agree to receive emails.\n        </p>\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-switch-4.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  const id = useId();\n\n  return (\n    <Label\n      className=\"flex items-center gap-6 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50\"\n      htmlFor={id}\n    >\n      <div className=\"flex flex-col gap-1\">\n        <p>Enable notifications</p>\n        <p className=\"text-muted-foreground text-xs\">\n          You can enable or disable notifications at any time.\n        </p>\n      </div>\n      <Switch\n        className=\"[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]\"\n        defaultChecked\n        id={id}\n      />\n    </Label>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-switch-5.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    console.log(formData.get(\"marketing\"));\n\n    const enabled = formData.get(\"marketing\");\n    alert(`Marketing emails: ${enabled}`);\n  };\n\n  return (\n    <Form className=\"w-auto\" onSubmit={onSubmit}>\n      <Field name=\"marketing\">\n        <FieldLabel>\n          <Switch defaultChecked name=\"marketing\" />\n          Enable marketing emails\n        </FieldLabel>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-switch-6.tsx",
    "content": "import { Switch } from \"@/registry/default/ui/switch\";\n\nexport default function Particle() {\n  return (\n    <Switch className=\"[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]\" />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-table-1.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nexport default function Particle() {\n  return (\n    <Table>\n      <TableCaption>A list of current projects.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Project</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Team</TableHead>\n          <TableHead className=\"text-right\">Budget</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow>\n          <TableCell className=\"font-medium\">Website Redesign</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n              />\n              Paid\n            </Badge>\n          </TableCell>\n          <TableCell>Frontend Team</TableCell>\n          <TableCell className=\"text-right\">$12,500</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Mobile App</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-1.5 rounded-full bg-muted-foreground/64\"\n              />\n              Unpaid\n            </Badge>\n          </TableCell>\n          <TableCell>Mobile Team</TableCell>\n          <TableCell className=\"text-right\">$8,750</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">API Integration</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-1.5 rounded-full bg-amber-500\"\n              />\n              Pending\n            </Badge>\n          </TableCell>\n          <TableCell>Backend Team</TableCell>\n          <TableCell className=\"text-right\">$5,200</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Database Migration</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n              />\n              Paid\n            </Badge>\n          </TableCell>\n          <TableCell>DevOps Team</TableCell>\n          <TableCell className=\"text-right\">$3,800</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">User Dashboard</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-1.5 rounded-full bg-emerald-500\"\n              />\n              Paid\n            </Badge>\n          </TableCell>\n          <TableCell>UX Team</TableCell>\n          <TableCell className=\"text-right\">$7,200</TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Security Audit</TableCell>\n          <TableCell>\n            <Badge variant=\"outline\">\n              <span\n                aria-hidden=\"true\"\n                className=\"size-1.5 rounded-full bg-red-500\"\n              />\n              Failed\n            </Badge>\n          </TableCell>\n          <TableCell>Security Team</TableCell>\n          <TableCell className=\"text-right\">$2,100</TableCell>\n        </TableRow>\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total Budget</TableCell>\n          <TableCell className=\"text-right\">$39,550</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-table-2.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\nexport default function Particle() {\n  return (\n    <Frame className=\"w-full\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Project</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Team</TableHead>\n            <TableHead className=\"text-right\">Budget</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Website Redesign</TableCell>\n            <TableCell>\n              <Badge variant=\"outline\">\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-1.5 rounded-full bg-emerald-500\"\n                />\n                Paid\n              </Badge>\n            </TableCell>\n            <TableCell>Frontend Team</TableCell>\n            <TableCell className=\"text-right\">$12,500</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mobile App</TableCell>\n            <TableCell>\n              <Badge variant=\"outline\">\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-1.5 rounded-full bg-muted-foreground/64\"\n                />\n                Unpaid\n              </Badge>\n            </TableCell>\n            <TableCell>Mobile Team</TableCell>\n            <TableCell className=\"text-right\">$8,750</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">API Integration</TableCell>\n            <TableCell>\n              <Badge variant=\"outline\">\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-1.5 rounded-full bg-amber-500\"\n                />\n                Pending\n              </Badge>\n            </TableCell>\n            <TableCell>Backend Team</TableCell>\n            <TableCell className=\"text-right\">$5,200</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Database Migration</TableCell>\n            <TableCell>\n              <Badge variant=\"outline\">\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-1.5 rounded-full bg-emerald-500\"\n                />\n                Paid\n              </Badge>\n            </TableCell>\n            <TableCell>DevOps Team</TableCell>\n            <TableCell className=\"text-right\">$3,800</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">User Dashboard</TableCell>\n            <TableCell>\n              <Badge variant=\"outline\">\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-1.5 rounded-full bg-emerald-500\"\n                />\n                Paid\n              </Badge>\n            </TableCell>\n            <TableCell>UX Team</TableCell>\n            <TableCell className=\"text-right\">$7,200</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Security Audit</TableCell>\n            <TableCell>\n              <Badge variant=\"outline\">\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-1.5 rounded-full bg-red-500\"\n                />\n                Failed\n              </Badge>\n            </TableCell>\n            <TableCell>Security Team</TableCell>\n            <TableCell className=\"text-right\">$2,100</TableCell>\n          </TableRow>\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">$39,550</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-table-3.tsx",
    "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame } from \"@/registry/default/ui/frame\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Project = {\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n  budget: number;\n};\n\nconst data: Project[] = [\n  {\n    budget: 12500,\n    id: \"1\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"2\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"3\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"4\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"5\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"6\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst getStatusColor = (status: Project[\"status\"]) => {\n  switch (status) {\n    case \"Paid\":\n      return \"bg-emerald-500\";\n    case \"Unpaid\":\n      return \"bg-muted-foreground/64\";\n    case \"Pending\":\n      return \"bg-amber-500\";\n    case \"Failed\":\n      return \"bg-red-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst getColumns = (): ColumnDef<Project>[] => [\n  {\n    cell: ({ row }) => {\n      const toggleHandler = row.getToggleSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select row\"\n          checked={row.getIsSelected()}\n          disabled={!row.getCanSelect()}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      const toggleHandler = table.getToggleAllPageRowsSelectedHandler();\n      return (\n        <Checkbox\n          aria-label=\"Select all\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => {\n            // Create a synthetic event for the handler\n            const syntheticEvent = {\n              target: { checked: !!value },\n            } as unknown as React.ChangeEvent<HTMLInputElement>;\n            toggleHandler(syntheticEvent);\n          }}\n        />\n      );\n    },\n    id: \"select\",\n  },\n  {\n    accessorKey: \"project\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"project\")}</div>\n    ),\n    header: \"Project\",\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Project[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={`size-1.5 rounded-full ${getStatusColor(status)}`}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n  },\n  {\n    accessorKey: \"team\",\n    header: \"Team\",\n  },\n  {\n    accessorKey: \"budget\",\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"budget\"));\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        currency: \"USD\",\n        maximumFractionDigits: 0,\n        minimumFractionDigits: 0,\n        style: \"currency\",\n      }).format(amount);\n      return <div className=\"text-right\">{formatted}</div>;\n    },\n    header: () => <div className=\"text-right\">Budget</div>,\n  },\n];\n\nexport default function Particle() {\n  const [tableData] = useState<Project[]>(data);\n  const [rowSelection, setRowSelection] = useState({});\n\n  const columns = useMemo(() => getColumns(), []);\n\n  const table = useReactTable({\n    columns,\n    data: tableData,\n    enableRowSelection: true,\n    getCoreRowModel: getCoreRowModel(),\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const totalBudget = tableData.reduce(\n    (sum, project) => sum + project.budget,\n    0,\n  );\n  const formattedTotal = new Intl.NumberFormat(\"en-US\", {\n    currency: \"USD\",\n    maximumFractionDigits: 0,\n    minimumFractionDigits: 0,\n    style: \"currency\",\n  }).format(totalBudget);\n\n  return (\n    <Frame className=\"w-full\">\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() && \"selected\"}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={4}>Total Budget</TableCell>\n            <TableCell className=\"text-right\">{formattedTotal}</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Frame>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-table-4.tsx",
    "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronUpIcon, PlaneTakeoffIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { Frame, FrameFooter } from \"@/registry/default/ui/frame\";\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/default/ui/pagination\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/default/ui/table\";\n\ntype Flight = {\n  id: string;\n  flightCode: string;\n  destination: string;\n  departureTime: string;\n  arrivalTime: string;\n  terminal: string;\n  duration: string;\n  status: \"On Time\" | \"Delayed\" | \"Cancelled\" | \"Boarding\";\n  gate: string;\n};\n\nconst getStatusColor = (status: Flight[\"status\"]) => {\n  switch (status) {\n    case \"On Time\":\n      return \"bg-emerald-500\";\n    case \"Delayed\":\n      return \"bg-amber-500\";\n    case \"Cancelled\":\n      return \"bg-red-500\";\n    case \"Boarding\":\n      return \"bg-blue-500\";\n    default:\n      return \"bg-muted-foreground/64\";\n  }\n};\n\nconst columns: ColumnDef<Flight>[] = [\n  {\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    header: ({ table }) => {\n      const isAllSelected = table.getIsAllPageRowsSelected();\n      const isSomeSelected = table.getIsSomePageRowsSelected();\n      return (\n        <Checkbox\n          aria-label=\"Select all rows\"\n          checked={isAllSelected}\n          indeterminate={isSomeSelected && !isAllSelected}\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        />\n      );\n    },\n    id: \"select\",\n    size: 28,\n  },\n  {\n    accessorKey: \"flightCode\",\n    cell: ({ row }) => (\n      <div className=\"font-medium font-mono text-muted-foreground\">\n        {row.getValue(\"flightCode\")}\n      </div>\n    ),\n    header: \"Flight\",\n    size: 80,\n  },\n  {\n    accessorKey: \"departureTime\",\n    cell: ({ row }) => {\n      const isCancelled = row.original.status === \"Cancelled\";\n      const isDelayed = row.original.status === \"Delayed\";\n      return (\n        <div\n          className={cn(\n            \"flex items-center gap-1.5 font-normal tabular-nums\",\n            isCancelled && \"text-muted-foreground line-through opacity-50\",\n          )}\n        >\n          <div className={isDelayed ? \"text-warning-foreground\" : undefined}>\n            {row.original.departureTime}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div\n            className={cn(\n              \"text-muted-foreground\",\n              isCancelled && \"line-through\",\n            )}\n          >\n            {row.original.duration}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-0.5 opacity-50 before:order-1 before:size-1.5 before:rounded-full before:border before:border-muted-foreground after:h-px after:w-3 after:border-muted-foreground after:border-t after:border-dashed\"\n          />\n          <div>{row.original.arrivalTime}</div>\n        </div>\n      );\n    },\n    header: \"Time\",\n    size: 220,\n  },\n  {\n    accessorKey: \"destination\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"destination\")}</div>\n    ),\n    header: \"Destination\",\n    size: 180,\n  },\n  {\n    accessorKey: \"status\",\n    cell: ({ row }) => {\n      const status = row.getValue(\"status\") as Flight[\"status\"];\n      return (\n        <Badge variant=\"outline\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\"size-1.5 rounded-full\", getStatusColor(status))}\n          />\n          {status}\n        </Badge>\n      );\n    },\n    header: \"Status\",\n    size: 120,\n  },\n  {\n    accessorKey: \"terminal\",\n    cell: ({ row }) => (\n      <Badge className=\"font-normal tabular-nums\" size=\"lg\" variant=\"outline\">\n        <PlaneTakeoffIcon />\n        <span>{row.getValue(\"terminal\")}</span>\n      </Badge>\n    ),\n    header: \"Terminal\",\n    size: 90,\n  },\n  {\n    accessorKey: \"gate\",\n    header: \"Gate\",\n    size: 80,\n  },\n];\n\nexport default function Particle() {\n  const pageSize = 10;\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  });\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      desc: false,\n      id: \"departureTime\",\n    },\n  ]);\n\n  const table = useReactTable({\n    columns,\n    data: flights,\n    enableSortingRemoval: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    state: {\n      pagination,\n      sorting,\n    },\n  });\n\n  return (\n    <Frame className=\"w-full\">\n      <Table className=\"table-fixed\">\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow className=\"hover:bg-transparent\" key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const columnSize = header.column.getSize();\n                return (\n                  <TableHead\n                    key={header.id}\n                    style={\n                      columnSize ? { width: `${columnSize}px` } : undefined\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className=\"flex h-full cursor-pointer select-none items-center justify-between gap-2\"\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            header.column.getToggleSortingHandler()?.(e);\n                          }\n                        }}\n                        role=\"button\"\n                        tabIndex={0}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              aria-hidden=\"true\"\n                              className=\"size-4 shrink-0 opacity-80\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )\n                    )}\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                data-state={row.getIsSelected() ? \"selected\" : undefined}\n                key={row.id}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell className=\"h-24 text-center\" colSpan={columns.length}>\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <FrameFooter className=\"p-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          {/* Results range selector */}\n          <div className=\"flex items-center gap-2 whitespace-nowrap\">\n            <p className=\"text-muted-foreground text-sm\">Viewing</p>\n            <Select\n              items={Array.from({ length: table.getPageCount() }, (_, i) => {\n                const start = i * table.getState().pagination.pageSize + 1;\n                const end = Math.min(\n                  (i + 1) * table.getState().pagination.pageSize,\n                  table.getRowCount(),\n                );\n                const pageNum = i + 1;\n                return { label: `${start}-${end}`, value: pageNum };\n              })}\n              onValueChange={(value) => {\n                table.setPageIndex((value as number) - 1);\n              }}\n              value={table.getState().pagination.pageIndex + 1}\n            >\n              <SelectTrigger\n                aria-label=\"Select result range\"\n                className=\"w-fit min-w-none\"\n                size=\"sm\"\n              >\n                <SelectValue />\n              </SelectTrigger>\n              <SelectPopup>\n                {Array.from({ length: table.getPageCount() }, (_, i) => {\n                  const start = i * table.getState().pagination.pageSize + 1;\n                  const end = Math.min(\n                    (i + 1) * table.getState().pagination.pageSize,\n                    table.getRowCount(),\n                  );\n                  const pageNum = i + 1;\n                  return (\n                    <SelectItem key={pageNum} value={pageNum}>\n                      {`${start}-${end}`}\n                    </SelectItem>\n                  );\n                })}\n              </SelectPopup>\n            </Select>\n            <p className=\"text-muted-foreground text-sm\">\n              of{\" \"}\n              <strong className=\"font-medium text-foreground\">\n                {table.getRowCount()}\n              </strong>{\" \"}\n              results\n            </p>\n          </div>\n\n          {/* Pagination */}\n          <Pagination className=\"justify-end\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanPreviousPage()}\n                      onClick={() => table.previousPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n              <PaginationItem>\n                <PaginationNext\n                  className=\"sm:*:[svg]:hidden\"\n                  render={\n                    <Button\n                      disabled={!table.getCanNextPage()}\n                      onClick={() => table.nextPage()}\n                      size=\"sm\"\n                      variant=\"outline\"\n                    />\n                  }\n                />\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </FrameFooter>\n    </Frame>\n  );\n}\n\nconst flights: Flight[] = [\n  {\n    arrivalTime: \"11:45\",\n    departureTime: \"08:30\",\n    destination: \"Los Angeles\",\n    duration: \"5h 15m\",\n    flightCode: \"AA1234\",\n    gate: \"A12\",\n    id: \"1\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"17:10\",\n    departureTime: \"14:20\",\n    destination: \"San Francisco\",\n    duration: \"4h 50m\",\n    flightCode: \"DL5678\",\n    gate: \"B24\",\n    id: \"2\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:30\",\n    departureTime: \"10:15\",\n    destination: \"Miami\",\n    duration: \"3h 15m\",\n    flightCode: \"UA9012\",\n    gate: \"C8\",\n    id: \"3\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"18:20\",\n    departureTime: \"16:45\",\n    destination: \"Seattle\",\n    duration: \"2h 35m\",\n    flightCode: \"SW3456\",\n    gate: \"D15\",\n    id: \"4\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:30\",\n    departureTime: \"09:00\",\n    destination: \"Salt Lake City\",\n    duration: \"5h 30m\",\n    flightCode: \"JB7890\",\n    gate: \"E3\",\n    id: \"5\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:30\",\n    destination: \"Phoenix\",\n    duration: \"2h 45m\",\n    flightCode: \"AS2345\",\n    gate: \"F7\",\n    id: \"6\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:30\",\n    departureTime: \"13:00\",\n    destination: \"Las Vegas\",\n    duration: \"5h 30m\",\n    flightCode: \"HA6789\",\n    gate: \"G12\",\n    id: \"7\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"09:00\",\n    departureTime: \"07:15\",\n    destination: \"Dallas\",\n    duration: \"1h 45m\",\n    flightCode: \"FX0123\",\n    gate: \"H5\",\n    id: \"8\",\n    status: \"Boarding\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"08:30\",\n    departureTime: \"06:00\",\n    destination: \"Denver\",\n    duration: \"2h 30m\",\n    flightCode: \"WN4567\",\n    gate: \"I9\",\n    id: \"9\",\n    status: \"Boarding\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:45\",\n    destination: \"Portland\",\n    duration: \"2h 35m\",\n    flightCode: \"B61234\",\n    gate: \"J14\",\n    id: \"10\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"18:45\",\n    departureTime: \"15:30\",\n    destination: \"Atlanta\",\n    duration: \"3h 15m\",\n    flightCode: \"NK8901\",\n    gate: \"K6\",\n    id: \"11\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:00\",\n    departureTime: \"09:45\",\n    destination: \"Chicago\",\n    duration: \"2h 15m\",\n    flightCode: \"F92345\",\n    gate: \"L11\",\n    id: \"12\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"14:15\",\n    departureTime: \"11:00\",\n    destination: \"Boston\",\n    duration: \"3h 15m\",\n    flightCode: \"SY6789\",\n    gate: \"M3\",\n    id: \"13\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:45\",\n    departureTime: \"13:30\",\n    destination: \"New York\",\n    duration: \"3h 15m\",\n    flightCode: \"G40123\",\n    gate: \"N8\",\n    id: \"14\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"11:20\",\n    departureTime: \"08:00\",\n    destination: \"Washington\",\n    duration: \"3h 20m\",\n    flightCode: \"YX5678\",\n    gate: \"O12\",\n    id: \"15\",\n    status: \"Delayed\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"13:50\",\n    departureTime: \"10:30\",\n    destination: \"Orlando\",\n    duration: \"3h 20m\",\n    flightCode: \"4U9012\",\n    gate: \"P5\",\n    id: \"16\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"16:30\",\n    departureTime: \"14:00\",\n    destination: \"Houston\",\n    duration: \"2h 30m\",\n    flightCode: \"QF3456\",\n    gate: \"Q9\",\n    id: \"17\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"10:00\",\n    departureTime: \"07:30\",\n    destination: \"Minneapolis\",\n    duration: \"2h 30m\",\n    flightCode: \"LH7890\",\n    gate: \"R7\",\n    id: \"18\",\n    status: \"Cancelled\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"19:30\",\n    departureTime: \"16:15\",\n    destination: \"Detroit\",\n    duration: \"3h 15m\",\n    flightCode: \"KL2345\",\n    gate: \"S4\",\n    id: \"19\",\n    status: \"Cancelled\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"15:10\",\n    departureTime: \"12:00\",\n    destination: \"Philadelphia\",\n    duration: \"3h 10m\",\n    flightCode: \"AF6789\",\n    gate: \"T16\",\n    id: \"20\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"12:25\",\n    departureTime: \"09:15\",\n    destination: \"Charlotte\",\n    duration: \"3h 10m\",\n    flightCode: \"BA0123\",\n    gate: \"U10\",\n    id: \"21\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"18:00\",\n    departureTime: \"15:45\",\n    destination: \"Nashville\",\n    duration: \"2h 15m\",\n    flightCode: \"IB4567\",\n    gate: \"V8\",\n    id: \"22\",\n    status: \"Delayed\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"14:00\",\n    departureTime: \"11:45\",\n    destination: \"Austin\",\n    duration: \"2h 15m\",\n    flightCode: \"EK8901\",\n    gate: \"W13\",\n    id: \"23\",\n    status: \"Cancelled\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"16:40\",\n    departureTime: \"13:15\",\n    destination: \"Tampa\",\n    duration: \"3h 25m\",\n    flightCode: \"QR2345\",\n    gate: \"X6\",\n    id: \"24\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"11:30\",\n    departureTime: \"08:45\",\n    destination: \"Raleigh\",\n    duration: \"2h 45m\",\n    flightCode: \"TK6789\",\n    gate: \"Y11\",\n    id: \"25\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"12:45\",\n    departureTime: \"10:00\",\n    destination: \"Indianapolis\",\n    duration: \"2h 45m\",\n    flightCode: \"VS3456\",\n    gate: \"Z4\",\n    id: \"26\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"20:00\",\n    departureTime: \"17:30\",\n    destination: \"Kansas City\",\n    duration: \"2h 30m\",\n    flightCode: \"LX7890\",\n    gate: \"A8\",\n    id: \"27\",\n    status: \"Delayed\",\n    terminal: \"3\",\n  },\n  {\n    arrivalTime: \"15:20\",\n    departureTime: \"12:30\",\n    destination: \"Columbus\",\n    duration: \"2h 50m\",\n    flightCode: \"OS1234\",\n    gate: \"B19\",\n    id: \"28\",\n    status: \"On Time\",\n    terminal: \"1\",\n  },\n  {\n    arrivalTime: \"20:15\",\n    departureTime: \"18:00\",\n    destination: \"Milwaukee\",\n    duration: \"2h 15m\",\n    flightCode: \"SN5678\",\n    gate: \"C22\",\n    id: \"29\",\n    status: \"On Time\",\n    terminal: \"2\",\n  },\n  {\n    arrivalTime: \"21:30\",\n    departureTime: \"19:15\",\n    destination: \"Memphis\",\n    duration: \"2h 15m\",\n    flightCode: \"TP9012\",\n    gate: \"D6\",\n    id: \"30\",\n    status: \"On Time\",\n    terminal: \"3\",\n  },\n];\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-1.tsx",
    "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList>\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-10.tsx",
    "content": "import { Badge } from \"@/registry/default/ui/badge\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList>\n        <TabsTab value=\"tab-1\">\n          All\n          <Badge\n            className=\"not-in-data-active:text-muted-foreground\"\n            variant=\"outline\"\n          >\n            128\n          </Badge>\n        </TabsTab>\n        <TabsTab value=\"tab-2\">\n          Pending\n          <Badge\n            className=\"not-in-data-active:text-muted-foreground\"\n            variant=\"outline\"\n          >\n            8\n          </Badge>\n        </TabsTab>\n        <TabsTab value=\"tab-3\">\n          Completed\n          <Badge\n            className=\"not-in-data-active:text-muted-foreground\"\n            variant=\"outline\"\n          >\n            120\n          </Badge>\n        </TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          All items content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Pending items content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Completed items content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-11.tsx",
    "content": "import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \"lucide-react\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs\n      className=\"w-full flex-row\"\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n    >\n      <div className=\"border-s\">\n        <TabsList variant=\"underline\">\n          <TabsTab value=\"tab-1\">\n            <HouseIcon aria-hidden=\"true\" />\n            Overview\n          </TabsTab>\n          <TabsTab value=\"tab-2\">\n            <PanelsTopLeftIcon aria-hidden=\"true\" />\n            Projects\n          </TabsTab>\n          <TabsTab value=\"tab-3\">\n            <SettingsIcon aria-hidden=\"true\" />\n            Settings\n          </TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Overview content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Projects content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Settings content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-12.tsx",
    "content": "import { HouseIcon, InboxIcon, SettingsIcon } from \"lucide-react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList>\n        <TabsTab aria-label=\"Overview\" className=\"size-10!\" value=\"tab-1\">\n          <HouseIcon aria-hidden=\"true\" />\n        </TabsTab>\n        <TabsTab aria-label=\"Inbox\" className=\"size-10!\" value=\"tab-2\">\n          <InboxIcon aria-hidden=\"true\" />\n          <Badge\n            className=\"absolute end-0 top-0 rounded-full not-in-data-active:opacity-64\"\n            size=\"sm\"\n          >\n            5\n          </Badge>\n        </TabsTab>\n        <TabsTab aria-label=\"Settings\" className=\"size-10!\" value=\"tab-3\">\n          <SettingsIcon aria-hidden=\"true\" />\n        </TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Overview content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Inbox content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Settings content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-13.tsx",
    "content": "import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \"lucide-react\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <TooltipProvider>\n      <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n        <TabsList>\n          <Tooltip>\n            <TooltipTrigger\n              render={<TabsTab aria-label=\"Overview\" value=\"tab-1\" />}\n            >\n              <HouseIcon aria-hidden=\"true\" />\n            </TooltipTrigger>\n            <TooltipPopup>Overview</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={<TabsTab aria-label=\"Projects\" value=\"tab-2\" />}\n            >\n              <PanelsTopLeftIcon aria-hidden=\"true\" />\n            </TooltipTrigger>\n            <TooltipPopup>Projects</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={<TabsTab aria-label=\"Settings\" value=\"tab-3\" />}\n            >\n              <SettingsIcon aria-hidden=\"true\" />\n            </TooltipTrigger>\n            <TooltipPopup>Settings</TooltipPopup>\n          </Tooltip>\n        </TabsList>\n        <TabsPanel value=\"tab-1\">\n          <p className=\"p-4 text-center text-muted-foreground text-xs\">\n            Overview content\n          </p>\n        </TabsPanel>\n        <TabsPanel value=\"tab-2\">\n          <p className=\"p-4 text-center text-muted-foreground text-xs\">\n            Projects content\n          </p>\n        </TabsPanel>\n        <TabsPanel value=\"tab-3\">\n          <p className=\"p-4 text-center text-muted-foreground text-xs\">\n            Settings content\n          </p>\n        </TabsPanel>\n      </Tabs>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-2.tsx",
    "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <div className=\"border-b\">\n        <TabsList variant=\"underline\">\n          <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n          <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n          <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-3.tsx",
    "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs className=\"w-full\" defaultValue=\"tab-1\" orientation=\"vertical\">\n      <TabsList>\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-4.tsx",
    "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs\n      className=\"w-full flex-row\"\n      defaultValue=\"tab-1\"\n      orientation=\"vertical\"\n    >\n      <div className=\"border-s\">\n        <TabsList variant=\"underline\">\n          <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n          <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n          <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-5.tsx",
    "content": "import { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList className=\"[--radius:9999px]\">\n        <TabsTab value=\"tab-1\">Tab 1</TabsTab>\n        <TabsTab value=\"tab-2\">Tab 2</TabsTab>\n        <TabsTab value=\"tab-3\">Tab 3</TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 1 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 2 content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Tab 3 content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-6.tsx",
    "content": "import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \"lucide-react\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <TabsList>\n        <TabsTab value=\"tab-1\">\n          <HouseIcon aria-hidden=\"true\" />\n          Overview\n        </TabsTab>\n        <TabsTab value=\"tab-2\">\n          <PanelsTopLeftIcon aria-hidden=\"true\" />\n          Projects\n        </TabsTab>\n        <TabsTab value=\"tab-3\">\n          <SettingsIcon aria-hidden=\"true\" />\n          Settings\n        </TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Overview content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Projects content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Settings content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-7.tsx",
    "content": "import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \"lucide-react\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs defaultValue=\"tab-1\">\n      <div className=\"border-b\">\n        <TabsList variant=\"underline\">\n          <TabsTab value=\"tab-1\">\n            <HouseIcon aria-hidden=\"true\" />\n            Overview\n          </TabsTab>\n          <TabsTab value=\"tab-2\">\n            <PanelsTopLeftIcon aria-hidden=\"true\" />\n            Projects\n          </TabsTab>\n          <TabsTab value=\"tab-3\">\n            <SettingsIcon aria-hidden=\"true\" />\n            Settings\n          </TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Overview content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Projects content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Settings content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-8.tsx",
    "content": "import { HouseIcon, PanelsTopLeftIcon, SettingsIcon } from \"lucide-react\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <TabsList>\n        <TabsTab aria-label=\"Overview\" value=\"tab-1\">\n          <HouseIcon aria-hidden=\"true\" />\n        </TabsTab>\n        <TabsTab aria-label=\"Projects\" value=\"tab-2\">\n          <PanelsTopLeftIcon aria-hidden=\"true\" />\n        </TabsTab>\n        <TabsTab aria-label=\"Settings\" value=\"tab-3\">\n          <SettingsIcon aria-hidden=\"true\" />\n        </TabsTab>\n      </TabsList>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Overview content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Projects content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Settings content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tabs-9.tsx",
    "content": "import { BoxIcon, HouseIcon, PanelsTopLeftIcon } from \"lucide-react\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/registry/default/ui/tabs\";\n\nexport default function Particle() {\n  return (\n    <Tabs className=\"items-center\" defaultValue=\"tab-1\">\n      <div className=\"border-b\">\n        <TabsList variant=\"underline\">\n          <TabsTab\n            className=\"h-auto! flex-col gap-1.5 py-[calc(--spacing(2)-1px)]\"\n            value=\"tab-1\"\n          >\n            <HouseIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Overview\n          </TabsTab>\n          <TabsTab\n            className=\"h-auto! flex-col gap-1.5 py-[calc(--spacing(2)-1px)]\"\n            value=\"tab-2\"\n          >\n            <PanelsTopLeftIcon\n              aria-hidden=\"true\"\n              className=\"opacity-60\"\n              size={16}\n            />\n            Projects\n          </TabsTab>\n          <TabsTab\n            className=\"h-auto! flex-col gap-1.5 py-[calc(--spacing(2.5)-1px)]\"\n            value=\"tab-3\"\n          >\n            <BoxIcon aria-hidden=\"true\" className=\"opacity-60\" size={16} />\n            Packages\n          </TabsTab>\n        </TabsList>\n      </div>\n      <TabsPanel value=\"tab-1\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Overview content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-2\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Projects content\n        </p>\n      </TabsPanel>\n      <TabsPanel value=\"tab-3\">\n        <p className=\"p-4 text-center text-muted-foreground text-xs\">\n          Packages content\n        </p>\n      </TabsPanel>\n    </Tabs>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-1.tsx",
    "content": "import { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return <Textarea placeholder=\"Type your message here\" />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-10.tsx",
    "content": "import { useId } from \"react\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Textarea\n      className=\"read-only:bg-muted\"\n      defaultValue=\"This is a read-only textarea\"\n      id={id}\n      readOnly\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-11.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Field, FieldDescription } from \"@/registry/default/ui/field\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const maxLength = 280;\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Field>\n      <Textarea\n        aria-label=\"Message\"\n        maxLength={maxLength}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Type your message here\"\n        value={value}\n      />\n      <FieldDescription>\n        <span className=\"tabular-nums\">{maxLength - value.length}</span>{\" \"}\n        characters left\n      </FieldDescription>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-12.tsx",
    "content": "import { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>\n        Message <span className=\"text-destructive-foreground\">*</span>\n      </FieldLabel>\n      <Textarea placeholder=\"Type your message here\" required />\n      <FieldError>Please fill out this field.</FieldError>\n    </Field>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-13.tsx",
    "content": "import { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <Textarea\n      className=\"*:field-sizing-fixed *:min-h-0\"\n      placeholder=\"Type your message here\"\n      rows={2}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-14.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Textarea placeholder=\"Type your message here\" />\n      <Button className=\"self-end\">Send</Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-15.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Textarea placeholder=\"Type your message here\" />\n      <Button className=\"self-start\">Send</Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-2.tsx",
    "content": "import { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return <Textarea placeholder=\"Type your message here\" size=\"sm\" />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-3.tsx",
    "content": "import { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return <Textarea placeholder=\"Type your message here\" size=\"lg\" />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-4.tsx",
    "content": "import { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return <Textarea disabled placeholder=\"Can't type here\" />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-5.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col items-start gap-2\">\n      <Label htmlFor={id}>Message</Label>\n      <Textarea id={id} placeholder=\"Type your message here\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-6.tsx",
    "content": "\"use client\";\n\nimport type { FormEvent } from \"react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldError, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const [loading, setLoading] = useState(false);\n  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Message: ${formData.get(\"message\") || \"\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-64\" onSubmit={onSubmit}>\n      <Field>\n        <FieldLabel>Message</FieldLabel>\n        <Textarea\n          name=\"message\"\n          placeholder=\"Type your message here\"\n          required\n        />\n        <FieldError>This field is required.</FieldError>\n      </Field>\n      <Button loading={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-7.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <Label htmlFor={id}>\n        Message <span className=\"text-destructive\">*</span>\n      </Label>\n      <Textarea id={id} placeholder=\"Type your message here\" required />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-8.tsx",
    "content": "import { useId } from \"react\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"inline-flex w-full items-center justify-between gap-2\">\n        <Label htmlFor={id}>Message</Label>\n        <Label className=\"font-normal text-muted-foreground\" render={<span />}>\n          Optional\n        </Label>\n      </div>\n      <Textarea id={id} placeholder=\"Type your message here\" />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-textarea-9.tsx",
    "content": "import { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <Textarea\n      aria-label=\"Message\"\n      className=\"border-transparent bg-muted shadow-none before:hidden\"\n      placeholder=\"Type your message here\"\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-1.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toastManager } from \"@/registry/default/ui/toast\";\n\nexport default function Particle() {\n  return (\n    <Button\n      onClick={() => {\n        toastManager.add({\n          description: \"Monday, January 3rd at 6:00pm\",\n          title: \"Event has been created\",\n        });\n      }}\n      variant=\"outline\"\n    >\n      Default Toast\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-2.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toastManager } from \"@/registry/default/ui/toast\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button\n        onClick={() => {\n          toastManager.add({\n            description: \"Your changes have been saved.\",\n            title: \"Success!\",\n            type: \"success\",\n          });\n        }}\n        variant=\"outline\"\n      >\n        Success Toast\n      </Button>\n      <Button\n        onClick={() => {\n          toastManager.add({\n            description: \"There was a problem with your request.\",\n            title: \"Uh oh! Something went wrong.\",\n            type: \"error\",\n          });\n        }}\n        variant=\"outline\"\n      >\n        Error Toast\n      </Button>\n      <Button\n        onClick={() => {\n          toastManager.add({\n            description: \"You can add components to your app using the cli.\",\n            title: \"Heads up!\",\n            type: \"info\",\n          });\n        }}\n        variant=\"outline\"\n      >\n        Info Toast\n      </Button>\n      <Button\n        onClick={() => {\n          toastManager.add({\n            description: \"Your session is about to expire.\",\n            title: \"Warning!\",\n            type: \"warning\",\n          });\n        }}\n        variant=\"outline\"\n      >\n        Warning Toast\n      </Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-3.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toastManager } from \"@/registry/default/ui/toast\";\n\nexport default function Particle() {\n  return (\n    <Button\n      onClick={() => {\n        toastManager.add({\n          description: \"Please wait while we process your request.\",\n          title: \"Loading…\",\n          type: \"loading\",\n        });\n      }}\n      variant=\"outline\"\n    >\n      Loading Toast\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-4.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toastManager } from \"@/registry/default/ui/toast\";\n\nexport default function Particle() {\n  return (\n    <Button\n      onClick={() => {\n        const id = toastManager.add({\n          actionProps: {\n            children: \"Undo\",\n            onClick: () => {\n              toastManager.close(id);\n              toastManager.add({\n                description: \"The action has been reverted.\",\n                title: \"Action undone\",\n                type: \"info\",\n              });\n            },\n          },\n          description: \"You can undo this action.\",\n          timeout: 1000000,\n          title: \"Action performed\",\n          type: \"success\",\n        });\n      }}\n      variant=\"outline\"\n    >\n      Perform Action\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-5.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toastManager } from \"@/registry/default/ui/toast\";\n\nexport default function Particle() {\n  return (\n    <Button\n      onClick={() => {\n        toastManager.promise(\n          new Promise<string>((resolve, reject) => {\n            const shouldSucceed = Math.random() > 0.3;\n            setTimeout(() => {\n              if (shouldSucceed) {\n                resolve(\"Data loaded successfully\");\n              } else {\n                reject(new Error(\"Failed to load data\"));\n              }\n            }, 2000);\n          }),\n          {\n            error: () => ({\n              description: \"Please try again.\",\n              title: \"Something went wrong\",\n            }),\n            loading: {\n              description: \"The promise is loading.\",\n              title: \"Loading…\",\n            },\n            success: (data: string) => ({\n              description: `Success: ${data}`,\n              title: \"This is a success toast!\",\n            }),\n          },\n        );\n      }}\n      variant=\"outline\"\n    >\n      Run Promise\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-6.tsx",
    "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toastManager } from \"@/registry/default/ui/toast\";\n\nconst TEXTS = [\n  \"Short message.\",\n  \"A bit longer message that spans two lines.\",\n  \"This is a longer description that intentionally takes more vertical space to demonstrate stacking with varying heights.\",\n  \"An even longer description that should span multiple lines so we can verify the clamped collapsed height and smooth expansion animation when hovering or focusing the viewport.\",\n];\n\nexport default function Particle() {\n  const [count, setCount] = useState(0);\n\n  function createToast() {\n    setCount((prev) => prev + 1);\n    const description = TEXTS[Math.floor(Math.random() * TEXTS.length)];\n    toastManager.add({\n      description,\n      title: `Toast ${count + 1} created`,\n    });\n  }\n\n  return (\n    <Button onClick={createToast} variant=\"outline\">\n      With Varying Heights\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-7.tsx",
    "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport { useCopyToClipboard } from \"@/registry/default/hooks/use-copy-to-clipboard\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { anchoredToastManager } from \"@/registry/default/ui/toast\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  const copyButtonRef = useRef<HTMLButtonElement>(null);\n  const toastTimeout = 2000;\n\n  const { copyToClipboard, isCopied } = useCopyToClipboard({\n    onCopy: () => {\n      if (copyButtonRef.current) {\n        anchoredToastManager.add({\n          data: {\n            tooltipStyle: true,\n          },\n          positionerProps: {\n            anchor: copyButtonRef.current,\n          },\n          timeout: toastTimeout,\n          title: \"Copied!\",\n        });\n      }\n    },\n    timeout: toastTimeout,\n  });\n\n  function handleCopy() {\n    const url = \"https://coss.com\";\n    copyToClipboard(url);\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <Button\n            aria-label=\"Copy link\"\n            disabled={isCopied}\n            onClick={handleCopy}\n            ref={copyButtonRef}\n            size=\"icon\"\n            variant=\"outline\"\n          />\n        }\n      >\n        {isCopied ? (\n          <CheckIcon className=\"size-4\" />\n        ) : (\n          <CopyIcon className=\"size-4\" />\n        )}\n      </TooltipTrigger>\n      <TooltipPopup>\n        <p>Copy to clipboard</p>\n      </TooltipPopup>\n    </Tooltip>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-8.tsx",
    "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\nimport { anchoredToastManager } from \"@/registry/default/ui/toast\";\n\nexport default function Particle() {\n  const submitRef = useRef<HTMLButtonElement>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const toastIdRef = useRef<string | null>(null);\n\n  function handleSubmit() {\n    if (!submitRef.current || isSubmitting) return;\n\n    if (toastIdRef.current) {\n      anchoredToastManager.close(toastIdRef.current);\n      toastIdRef.current = null;\n    }\n\n    setIsSubmitting(true);\n\n    new Promise<void>((_, reject) => {\n      setTimeout(() => {\n        setIsSubmitting(false);\n        reject(\n          new Error(\"The server is not responding. Please try again later.\"),\n        );\n      }, 2000);\n    }).catch((error: Error) => {\n      toastIdRef.current = anchoredToastManager.add({\n        description: error.message,\n        positionerProps: {\n          anchor: submitRef.current,\n          sideOffset: 4,\n        },\n        title: \"Error submitting form\",\n        type: \"error\",\n      });\n    });\n  }\n\n  return (\n    <Button\n      disabled={isSubmitting}\n      onClick={handleSubmit}\n      ref={submitRef}\n      variant=\"outline\"\n    >\n      {isSubmitting ? (\n        <>\n          <Spinner />\n          Submitting…\n        </>\n      ) : (\n        \"Submit\"\n      )}\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toast-9.tsx",
    "content": "\"use client\";\n\nimport { DownloadIcon } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { toastManager } from \"@/registry/default/ui/toast\";\n\nexport default function Particle() {\n  const [isGenerating, setIsGenerating] = useState(false);\n  const [progress, setProgress] = useState(0);\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  useEffect(() => {\n    if (!isGenerating) return;\n\n    const interval = setInterval(() => {\n      setProgress((prev) =>\n        Math.min(99, prev + Math.round(Math.random() * 8 + 2)),\n      );\n    }, 300);\n\n    return () => clearInterval(interval);\n  }, [isGenerating]);\n\n  async function handleDownload() {\n    if (isGenerating) return;\n\n    setIsGenerating(true);\n    setProgress(0);\n    abortControllerRef.current = new AbortController();\n\n    try {\n      await toastManager.promise(\n        new Promise<string>((resolve, reject) => {\n          const shouldSucceed = Math.random() > 0.2;\n          const timeoutId = setTimeout(() => {\n            if (shouldSucceed) {\n              resolve(\"Report ready\");\n            } else {\n              reject(new Error(\"Generation failed\"));\n            }\n          }, 4000);\n\n          abortControllerRef.current?.signal.addEventListener(\"abort\", () => {\n            clearTimeout(timeoutId);\n            reject(new DOMException(\"Cancelled\", \"AbortError\"));\n          });\n        }),\n        {\n          error: (err: Error) => {\n            if (err.name === \"AbortError\") {\n              return {\n                actionProps: undefined,\n                description: \"Report generation was cancelled.\",\n                title: \"Cancelled\",\n                type: \"info\" as const,\n              };\n            }\n            return {\n              actionProps: undefined,\n              description: \"Please try again later.\",\n              title: \"Failed to generate report\",\n            };\n          },\n          loading: {\n            actionProps: {\n              children: \"Cancel\",\n              onClick: () => abortControllerRef.current?.abort(),\n            },\n            description: \"Your download will begin once ready.\",\n            title: \"Generating report…\",\n          },\n          success: () => ({\n            actionProps: undefined,\n            description: \"Your file is now downloading.\",\n            title: \"Download started\",\n          }),\n        },\n      );\n    } finally {\n      setIsGenerating(false);\n      setProgress(0);\n      abortControllerRef.current = null;\n    }\n  }\n\n  return (\n    <Button disabled={isGenerating} onClick={handleDownload} variant=\"outline\">\n      {isGenerating ? (\n        <>\n          Loading…{\" \"}\n          <span className=\"tabular-nums\">\n            {progress.toString().padStart(2, \"\\u2007\")}%\n          </span>\n        </>\n      ) : (\n        <>\n          <DownloadIcon />\n          Download\n        </>\n      )}\n    </Button>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-1.tsx",
    "content": "import { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Particle() {\n  return <Toggle>Toggle</Toggle>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-2.tsx",
    "content": "import { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Particle() {\n  return <Toggle variant=\"outline\">Outline Toggle</Toggle>;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-3.tsx",
    "content": "import { BoldIcon } from \"lucide-react\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Particle() {\n  return (\n    <Toggle aria-label=\"Toggle bold\" variant=\"outline\">\n      <BoldIcon />\n    </Toggle>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-4.tsx",
    "content": "import { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Particle() {\n  return (\n    <Toggle size=\"sm\" variant=\"outline\">\n      Small\n    </Toggle>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-5.tsx",
    "content": "import { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Particle() {\n  return (\n    <Toggle size=\"lg\" variant=\"outline\">\n      Large\n    </Toggle>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-6.tsx",
    "content": "import { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Particle() {\n  return (\n    <Toggle disabled variant=\"outline\">\n      Disabled\n    </Toggle>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-7.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\n\nexport default function Particle() {\n  return (\n    <div className=\"flex items-center gap-1\">\n      <Toggle aria-label=\"Toggle bold\" variant=\"outline\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" variant=\"outline\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" variant=\"outline\">\n        <UnderlineIcon />\n      </Toggle>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-8.tsx",
    "content": "\"use client\";\n\nimport { BookmarkIcon } from \"lucide-react\";\nimport { useRef, useState } from \"react\";\nimport { anchoredToastManager } from \"@/registry/default/ui/toast\";\nimport { Toggle } from \"@/registry/default/ui/toggle\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  const [bookmarked, setBookmarked] = useState(false);\n  const toggleRef = useRef<HTMLDivElement>(null);\n  const toastIdRef = useRef<string | null>(null);\n  const toastTimeout = 2000;\n\n  function handleToggleChange(pressed: boolean) {\n    setBookmarked(pressed);\n\n    if (toastIdRef.current) {\n      anchoredToastManager.close(toastIdRef.current);\n      toastIdRef.current = null;\n    }\n\n    if (pressed && toggleRef.current) {\n      toastIdRef.current = anchoredToastManager.add({\n        data: {\n          tooltipStyle: true,\n        },\n        positionerProps: {\n          anchor: toggleRef.current,\n        },\n        timeout: toastTimeout,\n        title: \"Bookmarked!\",\n        type: \"success\",\n      });\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <div ref={toggleRef}>\n            <Toggle\n              aria-label={bookmarked ? \"Remove bookmark\" : \"Bookmark this\"}\n              onPressedChange={handleToggleChange}\n              pressed={bookmarked}\n            >\n              <BookmarkIcon aria-hidden=\"true\" />\n            </Toggle>\n          </div>\n        }\n      />\n      <TooltipPopup>\n        <p>{bookmarked ? \"Remove bookmark\" : \"Bookmark this\"}</p>\n      </TooltipPopup>\n    </Tooltip>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-1.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  return (\n    <ToggleGroup defaultValue={[\"bold\"]}>\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-2.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  return (\n    <ToggleGroup defaultValue={[\"bold\"]} size=\"sm\">\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-3.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  return (\n    <ToggleGroup defaultValue={[\"bold\"]} size=\"lg\">\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-4.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n  Toggle,\n  ToggleGroup,\n  ToggleGroupSeparator,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  return (\n    <ToggleGroup defaultValue={[\"bold\"]} variant=\"outline\">\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <ToggleGroupSeparator />\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <ToggleGroupSeparator />\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-5.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport {\n  Toggle,\n  ToggleGroup,\n  ToggleGroupSeparator,\n} from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  return (\n    <ToggleGroup\n      defaultValue={[\"bold\"]}\n      orientation=\"vertical\"\n      variant=\"outline\"\n    >\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <ToggleGroupSeparator orientation=\"horizontal\" />\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <ToggleGroupSeparator orientation=\"horizontal\" />\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-6.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  return (\n    <ToggleGroup defaultValue={[\"bold\"]} disabled>\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-7.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function ParticleItem() {\n  return (\n    <ToggleGroup defaultValue={[\"bold\"]}>\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" disabled value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-8.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\n\nexport default function Particle() {\n  return (\n    <ToggleGroup defaultValue={[\"bold\"]} multiple>\n      <Toggle aria-label=\"Toggle bold\" value=\"bold\">\n        <BoldIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle italic\" value=\"italic\">\n        <ItalicIcon />\n      </Toggle>\n      <Toggle aria-label=\"Toggle underline\" value=\"underline\">\n        <UnderlineIcon />\n      </Toggle>\n    </ToggleGroup>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toggle-group-9.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <TooltipProvider>\n      <ToggleGroup defaultValue={[\"bold\"]} multiple>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle bold\" value=\"bold\" />}\n          >\n            <BoldIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Bold</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle italic\" value=\"italic\" />}\n          >\n            <ItalicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Italic</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle underline\" value=\"underline\" />}\n          >\n            <UnderlineIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Underline</TooltipPopup>\n        </Tooltip>\n      </ToggleGroup>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-toolbar-1.tsx",
    "content": "\"use client\";\n\nimport {\n  AlignCenterIcon,\n  AlignLeftIcon,\n  AlignRightIcon,\n  DollarSignIcon,\n  PercentIcon,\n} from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Select,\n  SelectItem,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\nimport {\n  Toolbar,\n  ToolbarButton,\n  ToolbarGroup,\n  ToolbarSeparator,\n} from \"@/registry/default/ui/toolbar\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst items = [\n  { label: \"Helvetica\", value: \"helvetica\" },\n  { label: \"Arial\", value: \"arial\" },\n  { label: \"Times New Roman\", value: \"times-new-roman\" },\n];\n\nexport default function Particle() {\n  return (\n    <TooltipProvider>\n      <Toolbar>\n        <ToggleGroup className=\"border-none p-0\" defaultValue={[\"left\"]}>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  aria-label=\"Align left\"\n                  render={<Toggle value=\"left\" />}\n                >\n                  <AlignLeftIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Align left</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  aria-label=\"Align center\"\n                  render={<Toggle aria-label=\"Toggle center\" value=\"center\" />}\n                >\n                  <AlignCenterIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Align center</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  aria-label=\"Align right\"\n                  render={<Toggle aria-label=\"Toggle right\" value=\"right\" />}\n                >\n                  <AlignRightIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Align right</TooltipPopup>\n          </Tooltip>\n        </ToggleGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  aria-label=\"Format as currency\"\n                  render={<Button size=\"icon\" variant=\"ghost\" />}\n                >\n                  <DollarSignIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Format as currency</TooltipPopup>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <ToolbarButton\n                  aria-label=\"Format as percent\"\n                  render={<Button size=\"icon\" variant=\"ghost\" />}\n                >\n                  <PercentIcon />\n                </ToolbarButton>\n              }\n            />\n            <TooltipPopup sideOffset={8}>Format as percent</TooltipPopup>\n          </Tooltip>\n        </ToolbarGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <Select defaultValue=\"helvetica\" items={items}>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <ToolbarButton\n                    render={\n                      <SelectTrigger>\n                        <SelectValue />\n                      </SelectTrigger>\n                    }\n                  />\n                }\n              />\n              <TooltipPopup sideOffset={8}>\n                Select a different font\n              </TooltipPopup>\n            </Tooltip>\n            <SelectPopup>\n              {items.map(({ label, value }) => (\n                <SelectItem key={value} value={value}>\n                  {label}\n                </SelectItem>\n              ))}\n            </SelectPopup>\n          </Select>\n        </ToolbarGroup>\n        <ToolbarSeparator />\n        <ToolbarGroup>\n          <ToolbarButton render={<Button />}>Save</ToolbarButton>\n        </ToolbarGroup>\n      </Toolbar>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tooltip-1.tsx",
    "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <Tooltip>\n      <TooltipTrigger render={<Button variant=\"outline\" />}>\n        Hover me\n      </TooltipTrigger>\n      <TooltipPopup>Helpful hint</TooltipPopup>\n    </Tooltip>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tooltip-2.tsx",
    "content": "import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <TooltipProvider>\n      <ToggleGroup defaultValue={[\"bold\"]} multiple>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle bold\" value=\"bold\" />}\n          >\n            <BoldIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Bold</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle italic\" value=\"italic\" />}\n          >\n            <ItalicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Italic</TooltipPopup>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger\n            render={<Toggle aria-label=\"Toggle underline\" value=\"underline\" />}\n          >\n            <UnderlineIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Underline</TooltipPopup>\n        </Tooltip>\n      </ToggleGroup>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tooltip-3.tsx",
    "content": "\"use client\";\n\nimport { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport type { ComponentType } from \"react\";\nimport { Toggle, ToggleGroup } from \"@/registry/default/ui/toggle-group\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst tooltipHandle = TooltipCreateHandle<ComponentType>();\n\nconst BoldContent = () => {\n  return <span>Make text bold</span>;\n};\n\nconst ItalicContent = () => {\n  return <span>Apply italic formatting to text</span>;\n};\n\nconst UnderlineContent = () => {\n  return <span>Underline text</span>;\n};\n\nexport default function Particle() {\n  return (\n    <TooltipProvider>\n      <ToggleGroup defaultValue={[\"bold\"]} multiple>\n        <TooltipTrigger\n          className=\"after:absolute after:left-full after:h-full after:w-1\"\n          handle={tooltipHandle}\n          payload={BoldContent}\n          render={<Toggle aria-label=\"Toggle bold\" value=\"bold\" />}\n        >\n          <BoldIcon aria-hidden=\"true\" />\n        </TooltipTrigger>\n        <TooltipTrigger\n          className=\"after:absolute after:left-full after:h-full after:w-1\"\n          handle={tooltipHandle}\n          payload={ItalicContent}\n          render={<Toggle aria-label=\"Toggle italic\" value=\"italic\" />}\n        >\n          <ItalicIcon aria-hidden=\"true\" />\n        </TooltipTrigger>\n        <TooltipTrigger\n          className=\"after:absolute after:left-full after:h-full after:w-1\"\n          handle={tooltipHandle}\n          payload={UnderlineContent}\n          render={<Toggle aria-label=\"Toggle underline\" value=\"underline\" />}\n        >\n          <UnderlineIcon aria-hidden=\"true\" />\n        </TooltipTrigger>\n      </ToggleGroup>\n\n      <Tooltip handle={tooltipHandle}>\n        {({ payload: Payload }) => (\n          <TooltipPopup>{Payload !== undefined && <Payload />}</TooltipPopup>\n        )}\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/particles/p-tooltip-4.tsx",
    "content": "\"use client\";\n\nimport { LinkIcon, MailIcon, Share2Icon } from \"lucide-react\";\nimport type { ComponentType } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport {\n  Tooltip,\n  TooltipCreateHandle,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst tooltipHandle = TooltipCreateHandle<ComponentType>();\n\nconst ShareLinkContent = () => {\n  return <span>Copy shareable link</span>;\n};\n\nconst ShareEmailContent = () => {\n  return <span>Share via email</span>;\n};\n\nconst ShareSocialContent = () => {\n  return <span>Share to social media</span>;\n};\n\nexport default function Particle() {\n  return (\n    <TooltipProvider>\n      <Group aria-label=\"Share options\" orientation=\"vertical\">\n        <TooltipTrigger\n          handle={tooltipHandle}\n          payload={ShareLinkContent}\n          render={\n            <Button aria-label=\"Copy link\" size=\"icon\" variant=\"outline\" />\n          }\n        >\n          <LinkIcon aria-hidden=\"true\" />\n        </TooltipTrigger>\n        <GroupSeparator orientation=\"horizontal\" />\n        <TooltipTrigger\n          handle={tooltipHandle}\n          payload={ShareEmailContent}\n          render={\n            <Button\n              aria-label=\"Share via email\"\n              size=\"icon\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <MailIcon aria-hidden=\"true\" />\n        </TooltipTrigger>\n        <GroupSeparator orientation=\"horizontal\" />\n        <TooltipTrigger\n          handle={tooltipHandle}\n          payload={ShareSocialContent}\n          render={\n            <Button\n              aria-label=\"Share to social\"\n              size=\"icon\"\n              variant=\"outline\"\n            />\n          }\n        >\n          <Share2Icon aria-hidden=\"true\" />\n        </TooltipTrigger>\n      </Group>\n      <Tooltip handle={tooltipHandle}>\n        {({ payload: Payload }) => (\n          <TooltipPopup className=\"max-w-40\" side=\"right\">\n            {Payload !== undefined && <Payload />}\n          </TooltipPopup>\n        )}\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/accordion.tsx",
    "content": "\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Accordion(\n  props: AccordionPrimitive.Root.Props,\n): React.ReactElement {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nexport function AccordionItem({\n  className,\n  ...props\n}: AccordionPrimitive.Item.Props): React.ReactElement {\n  return (\n    <AccordionPrimitive.Item\n      className={cn(\"border-b last:border-b-0\", className)}\n      data-slot=\"accordion-item\"\n      {...props}\n    />\n  );\n}\n\nexport function AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        className={cn(\n          \"flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180\",\n          className,\n        )}\n        data-slot=\"accordion-trigger\"\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out\"\n          data-slot=\"accordion-indicator\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport function AccordionPanel({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <AccordionPrimitive.Panel\n      className=\"h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0\"\n      data-slot=\"accordion-panel\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n}\n\nexport { AccordionPrimitive, AccordionPanel as AccordionContent };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/alert-dialog.tsx",
    "content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const AlertDialogCreateHandle: typeof AlertDialogPrimitive.createHandle =\n  AlertDialogPrimitive.createHandle;\n\nexport const AlertDialog: typeof AlertDialogPrimitive.Root =\n  AlertDialogPrimitive.Root;\n\nexport const AlertDialogPortal: typeof AlertDialogPrimitive.Portal =\n  AlertDialogPrimitive.Portal;\n\nexport function AlertDialogTrigger(\n  props: AlertDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\nexport function AlertDialogBackdrop({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"alert-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogViewport({\n  className,\n  ...props\n}: AlertDialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className,\n      )}\n      data-slot=\"alert-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogPopup({\n  className,\n  bottomStickOnMobile = true,\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  bottomStickOnMobile?: boolean;\n}): React.ReactElement {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialogViewport\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n        )}\n      >\n        <AlertDialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            bottomStickOnMobile &&\n              \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n            className,\n          )}\n          data-slot=\"alert-dialog-popup\"\n          {...props}\n        />\n      </AlertDialogViewport>\n    </AlertDialogPortal>\n  );\n}\n\nexport function AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left\",\n        className,\n      )}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogFooter({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n        variant === \"default\" && \"border-t bg-muted/72 py-4\",\n        variant === \"bare\" && \"pb-6\",\n        className,\n      )}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogTitle({\n  className,\n  ...props\n}: AlertDialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogClose(\n  props: AlertDialogPrimitive.Close.Props,\n): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Close data-slot=\"alert-dialog-close\" {...props} />\n  );\n}\n\nexport {\n  AlertDialogPrimitive,\n  AlertDialogBackdrop as AlertDialogOverlay,\n  AlertDialogPopup as AlertDialogContent,\n};\n"
  },
  {
    "path": "apps/ui/registry/default/ui/alert.tsx",
    "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst alertVariants = cva(\n  \"relative grid w-full items-start gap-x-2 gap-y-0.5 rounded-xl border px-3.5 py-3 text-card-foreground text-sm has-[>svg]:has-data-[slot=alert-action]:grid-cols-[calc(var(--spacing)*4)_1fr_auto] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-[>svg]:gap-x-2 [&>svg]:h-lh [&>svg]:w-4\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default:\n          \"bg-transparent dark:bg-input/32 [&>svg]:text-muted-foreground\",\n        error:\n          \"border-destructive/32 bg-destructive/4 [&>svg]:text-destructive\",\n        info: \"border-info/32 bg-info/4 [&>svg]:text-info\",\n        success: \"border-success/32 bg-success/4 [&>svg]:text-success\",\n        warning: \"border-warning/32 bg-warning/4 [&>svg]:text-warning\",\n      },\n    },\n  },\n);\n\nexport function Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof alertVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(alertVariants({ variant }), className)}\n      data-slot=\"alert\"\n      role=\"alert\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"font-medium [svg~&]:col-start-2\", className)}\n      data-slot=\"alert-title\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-2.5 text-muted-foreground [svg~&]:col-start-2\",\n        className,\n      )}\n      data-slot=\"alert-description\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertAction({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex gap-1 max-sm:col-start-2 max-sm:mt-2 sm:row-start-1 sm:row-end-3 sm:self-center sm:[[data-slot=alert-description]~&]:col-start-2 sm:[[data-slot=alert-title]~&]:col-start-2 sm:[svg~&]:col-start-2 sm:[svg~[data-slot=alert-description]~&]:col-start-3 sm:[svg~[data-slot=alert-title]~&]:col-start-3\",\n        className,\n      )}\n      data-slot=\"alert-action\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/autocomplete.tsx",
    "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDownIcon />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteValue({\n  ...props\n}: AutocompletePrimitive.Value.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Value data-slot=\"autocomplete-value\" {...props} />\n  );\n}\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteCollection({\n  ...props\n}: AutocompletePrimitive.Collection.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/avatar.tsx",
    "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Avatar({\n  className,\n  ...props\n}: AvatarPrimitive.Root.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        \"inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs\",\n        className,\n      )}\n      data-slot=\"avatar\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  ...props\n}: AvatarPrimitive.Image.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Image\n      className={cn(\"size-full object-cover\", className)}\n      data-slot=\"avatar-image\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Fallback\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted\",\n        className,\n      )}\n      data-slot=\"avatar-fallback\"\n      {...props}\n    />\n  );\n}\n\nexport { AvatarPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/badge.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const badgeVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default:\n          \"h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs\",\n        lg: \"h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm\",\n        sm: \"h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]\",\n      },\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground [button&,a&]:hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white [button&,a&]:hover:bg-destructive/90\",\n        error:\n          \"bg-destructive/8 text-destructive-foreground dark:bg-destructive/16\",\n        info: \"bg-info/8 text-info-foreground dark:bg-info/16\",\n        outline:\n          \"border-input bg-background text-foreground dark:bg-input/32 [button&,a&]:hover:bg-accent/50 dark:[button&,a&]:hover:bg-input/48\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [button&,a&]:hover:bg-secondary/90\",\n        success: \"bg-success/8 text-success-foreground dark:bg-success/16\",\n        warning: \"bg-warning/8 text-warning-foreground dark:bg-warning/16\",\n      },\n    },\n  },\n);\n\nexport interface BadgeProps extends useRender.ComponentProps<\"span\"> {\n  variant?: VariantProps<typeof badgeVariants>[\"variant\"];\n  size?: VariantProps<typeof badgeVariants>[\"size\"];\n}\n\nexport function Badge({\n  className,\n  variant,\n  size,\n  render,\n  ...props\n}: BadgeProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(badgeVariants({ className, size, variant })),\n    \"data-slot\": \"badge\",\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/breadcrumb.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Breadcrumb({\n  ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nexport function BreadcrumbList({\n  className,\n  ...props\n}: React.ComponentProps<\"ol\">): React.ReactElement {\n  return (\n    <ol\n      className={cn(\n        \"wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5\",\n        className,\n      )}\n      data-slot=\"breadcrumb-list\"\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      data-slot=\"breadcrumb-item\"\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"transition-colors hover:text-foreground\", className),\n    \"data-slot\": \"breadcrumb-link\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function BreadcrumbPage({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      data-slot=\"breadcrumb-page\"\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      aria-hidden=\"true\"\n      className={cn(\"opacity-80 [&>svg]:size-4\", className)}\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={className}\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/button.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Spinner } from \"@/registry/default/ui/spinner\";\n\nexport const buttonVariants = cva(\n  \"relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-loading:select-none data-loading:text-transparent sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 px-[calc(--spacing(3)-1px)] sm:h-8\",\n        icon: \"size-9 sm:size-8\",\n        \"icon-lg\": \"size-10 sm:size-9\",\n        \"icon-sm\": \"size-8 sm:size-7\",\n        \"icon-xl\":\n          \"size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5\",\n        \"icon-xs\":\n          \"size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9\",\n        sm: \"h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7\",\n        xl: \"h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5\",\n        xs: \"h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\",\n      },\n      variant: {\n        default:\n          \"not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 data-pressed:bg-primary/90 *:data-[slot=button-loading-indicator]:text-primary-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n        destructive:\n          \"not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 data-pressed:bg-destructive/90 *:data-[slot=button-loading-indicator]:text-white [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n        \"destructive-outline\":\n          \"border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:border-destructive/32 hover:bg-destructive/4 data-pressed:border-destructive/32 data-pressed:bg-destructive/4 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n        ghost:\n          \"border-transparent text-foreground hover:bg-accent data-pressed:bg-accent *:data-[slot=button-loading-indicator]:text-foreground\",\n        link: \"border-transparent text-foreground underline-offset-4 hover:underline data-pressed:underline *:data-[slot=button-loading-indicator]:text-foreground\",\n        outline:\n          \"border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:data-pressed:bg-input/64 dark:hover:bg-input/64 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 *:data-[slot=button-loading-indicator]:text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80\",\n      },\n    },\n  },\n);\n\nexport interface ButtonProps extends useRender.ComponentProps<\"button\"> {\n  variant?: VariantProps<typeof buttonVariants>[\"variant\"];\n  size?: VariantProps<typeof buttonVariants>[\"size\"];\n  loading?: boolean;\n}\n\nexport function Button({\n  className,\n  variant,\n  size,\n  render,\n  children,\n  loading = false,\n  disabled: disabledProp,\n  ...props\n}: ButtonProps): React.ReactElement {\n  const isDisabled: boolean = Boolean(loading || disabledProp);\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        {children}\n        {loading && (\n          <Spinner\n            className=\"pointer-events-none absolute\"\n            data-slot=\"button-loading-indicator\"\n          />\n        )}\n      </>\n    ),\n    className: cn(buttonVariants({ className, size, variant })),\n    \"aria-disabled\": loading || undefined,\n    \"data-loading\": loading ? \"\" : undefined,\n    \"data-slot\": \"button\",\n    disabled: isDisabled,\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/calendar.tsx",
    "content": "\"use client\";\n\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst buttonClassNames =\n  \"relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\";\n\nexport function Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  components: userComponents,\n  mode = \"single\",\n  ...props\n}: React.ComponentProps<typeof DayPicker>): React.ReactElement {\n  const defaultClassNames = {\n    button_next: buttonClassNames,\n    button_previous: buttonClassNames,\n    caption_label:\n      \"text-base sm:text-sm font-medium flex items-center gap-2 h-full\",\n    day: \"size-(--cell-size) text-sm py-px\",\n    day_button: cn(\n      buttonClassNames,\n      \"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n    ),\n    dropdown: \"absolute bg-popover inset-0 opacity-0\",\n    dropdown_root:\n      \"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1\",\n    dropdowns:\n      \"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium\",\n    hidden: \"invisible\",\n    month: \"w-full\",\n    month_caption:\n      \"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2\",\n    months: \"relative flex flex-col sm:flex-row gap-2\",\n    nav: \"absolute top-0 flex w-full justify-between z-1\",\n    outside:\n      \"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\",\n    range_end: \"range-end\",\n    range_middle: \"range-middle\",\n    range_start: \"range-start\",\n    today:\n      \"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors\",\n    week_number:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n    weekday:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n  };\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\n    defaultClassNames,\n  ).reduce(\n    (acc, key) => {\n      const userClass = classNames?.[key as keyof typeof classNames];\n      const baseClass =\n        defaultClassNames[key as keyof typeof defaultClassNames];\n\n      acc[key as keyof typeof defaultClassNames] = userClass\n        ? cn(baseClass, userClass)\n        : baseClass;\n\n      return acc;\n    },\n    { ...defaultClassNames } as typeof defaultClassNames,\n  );\n\n  const defaultComponents = {\n    Chevron: ({\n      className,\n      orientation,\n      ...props\n    }: {\n      className?: string;\n      orientation?: \"left\" | \"right\" | \"up\" | \"down\";\n    }): React.ReactElement => {\n      if (orientation === \"left\") {\n        return (\n          <ChevronLeftIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      if (orientation === \"right\") {\n        return (\n          <ChevronRightIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      return (\n        <ChevronsUpDownIcon\n          className={className}\n          {...props}\n          aria-hidden=\"true\"\n        />\n      );\n    },\n  };\n\n  const mergedComponents = {\n    ...defaultComponents,\n    ...userComponents,\n  };\n\n  const dayPickerProps = {\n    className: cn(\n      \"w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]\",\n      className,\n    ),\n    classNames: mergedClassNames,\n    components: mergedComponents,\n    \"data-slot\": \"calendar\",\n    formatters: {\n      formatMonthDropdown: (date: Date) =>\n        date.toLocaleString(\"default\", { month: \"short\" }),\n    } as React.ComponentProps<typeof DayPicker>[\"formatters\"],\n    mode,\n    showOutsideDays,\n    ...props,\n  };\n\n  return (\n    <DayPicker\n      {...(dayPickerProps as React.ComponentProps<typeof DayPicker>)}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/card.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Card({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n      className,\n    ),\n    \"data-slot\": \"card\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrame({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] *:data-[slot=card]:-m-px *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-semibold text-sm\", className),\n    \"data-slot\": \"card-frame-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-frame-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-center justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"px-6 py-4\", className),\n    \"data-slot\": \"card-frame-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-semibold text-lg leading-none\", className),\n    \"data-slot\": \"card-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardPanel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n      className,\n    ),\n    \"data-slot\": \"card-panel\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\n      className,\n    ),\n    \"data-slot\": \"card-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport { CardPanel as CardContent };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/checkbox-group.tsx",
    "content": "\"use client\";\n\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \"@base-ui/react/checkbox-group\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function CheckboxGroup({\n  className,\n  ...props\n}: CheckboxGroupPrimitive.Props): React.ReactElement {\n  return (\n    <CheckboxGroupPrimitive\n      className={cn(\"flex flex-col items-start gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { CheckboxGroupPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/checkbox.tsx",
    "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Checkbox({\n  className,\n  ...props\n}: CheckboxPrimitive.Root.Props): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      className={cn(\n        \"relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[.25rem] border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"checkbox\"\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className=\"absolute -inset-px flex items-center justify-center rounded-[.25rem] text-primary-foreground data-unchecked:hidden data-checked:bg-primary data-indeterminate:text-foreground\"\n        data-slot=\"checkbox-indicator\"\n        render={(\n          props: React.ComponentProps<\"span\">,\n          state: CheckboxPrimitive.Indicator.State,\n        ) => (\n          <span {...props}>\n            {state.indeterminate ? (\n              <svg\n                aria-hidden=\"true\"\n                className=\"size-3.5 sm:size-3\"\n                fill=\"none\"\n                height=\"24\"\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth=\"3\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M5.252 12h13.496\" />\n              </svg>\n            ) : (\n              <svg\n                aria-hidden=\"true\"\n                className=\"size-3.5 sm:size-3\"\n                fill=\"none\"\n                height=\"24\"\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth=\"3\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n              </svg>\n            )}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { CheckboxPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/collapsible.tsx",
    "content": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Collapsible({\n  ...props\n}: CollapsiblePrimitive.Root.Props): React.ReactElement {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nexport function CollapsibleTrigger({\n  className,\n  ...props\n}: CollapsiblePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cn(\"cursor-pointer\", className)}\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  );\n}\n\nexport function CollapsiblePanel({\n  className,\n  ...props\n}: CollapsiblePrimitive.Panel.Props): React.ReactElement {\n  return (\n    <CollapsiblePrimitive.Panel\n      className={cn(\n        \"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0\",\n        className,\n      )}\n      data-slot=\"collapsible-panel\"\n      {...props}\n    />\n  );\n}\n\nexport { CollapsiblePrimitive, CollapsiblePanel as CollapsibleContent };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/combobox.tsx",
    "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxValue({\n  ...props\n}: ComboboxPrimitive.Value.Props): React.ReactElement {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxCollection(\n  props: ComboboxPrimitive.Collection.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  );\n}\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/command.tsx",
    "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n  CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n  CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n  CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n  props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Trigger\n      data-slot=\"command-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogBackdrop({\n  className,\n  ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogViewport({\n  className,\n  ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n        className,\n      )}\n      data-slot=\"command-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogPopup({\n  className,\n  children,\n  ...props\n}: CommandDialogPrimitive.Popup.Props): React.ReactElement {\n  return (\n    <CommandDialogPortal>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <CommandDialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"command-dialog-popup\"\n          {...props}\n        >\n          {children}\n        </CommandDialogPrimitive.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nexport function Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      inline\n      keepHighlight={keepHighlight}\n      open\n      {...props}\n    />\n  );\n}\n\nexport function CommandInput({\n  className,\n  placeholder = undefined,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\n  return (\n    <div className=\"px-2.5 py-1.5\">\n      <AutocompleteInput\n        autoFocus\n        className={cn(\n          \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n          className,\n        )}\n        placeholder={placeholder}\n        size=\"lg\"\n        startAddon={<SearchIcon />}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className=\"relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {\n  return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nexport function CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\n  return (\n    <AutocompleteItem\n      className={cn(\"py-1.5\", className)}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nexport { CommandDialogPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/dialog.tsx",
    "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\n  DialogPrimitive.createHandle;\n\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\n\nexport const DialogPortal: typeof DialogPrimitive.Portal =\n  DialogPrimitive.Portal;\n\nexport function DialogTrigger(\n  props: DialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nexport function DialogClose(\n  props: DialogPrimitive.Close.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nexport function DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogViewport({\n  className,\n  ...props\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className,\n      )}\n      data-slot=\"dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  bottomStickOnMobile = true,\n  closeProps,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  bottomStickOnMobile?: boolean;\n  closeProps?: DialogPrimitive.Close.Props;\n}): React.ReactElement {\n  return (\n    <DialogPortal>\n      <DialogBackdrop />\n      <DialogViewport\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n        )}\n      >\n        <DialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            bottomStickOnMobile &&\n              \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n            className,\n          )}\n          data-slot=\"dialog-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </DialogViewport>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"dialog-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"dialog-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogTitle({\n  className,\n  ...props\n}: DialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"dialog-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  DialogPrimitive,\n  DialogBackdrop as DialogOverlay,\n  DialogPopup as DialogContent,\n};\n"
  },
  {
    "path": "apps/ui/registry/default/ui/drawer.tsx",
    "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea className=\"touch-auto\" scrollFade={scrollFade}>\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_1fr] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"col-start-2\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/empty.tsx",
    "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst emptyMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card not-dark:bg-clip-padding text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5\",\n      },\n    },\n  },\n);\n\nexport function Empty({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance px-6 py-12 text-center md:py-20\",\n        className,\n      )}\n      data-slot=\"empty\"\n      {...props}\n    />\n  );\n}\n\nexport function EmptyHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex max-w-sm flex-col items-center text-center\",\n        className,\n      )}\n      data-slot=\"empty-header\"\n      {...props}\n    />\n  );\n}\n\nexport function EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof emptyMediaVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(\"relative mb-6\", className)}\n      data-slot=\"empty-media\"\n      data-variant={variant}\n      {...props}\n    >\n      {variant === \"icon\" && (\n        <>\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              emptyMediaVariants({ className, variant }),\n              \"pointer-events-none absolute bottom-px origin-bottom-left -translate-x-0.5 -rotate-10 scale-84 shadow-none\",\n            )}\n          />\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              emptyMediaVariants({ className, variant }),\n              \"pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none\",\n            )}\n          />\n        </>\n      )}\n      <div\n        className={cn(emptyMediaVariants({ className, variant }))}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function EmptyTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"font-heading font-semibold text-xl\", className)}\n      data-slot=\"empty-title\"\n      {...props}\n    />\n  );\n}\n\nexport function EmptyDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1\",\n        className,\n      )}\n      data-slot=\"empty-description\"\n      {...props}\n    />\n  );\n}\n\nexport function EmptyContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm\",\n        className,\n      )}\n      data-slot=\"empty-content\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/field.tsx",
    "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Field({\n  className,\n  ...props\n}: FieldPrimitive.Root.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Root\n      className={cn(\"flex flex-col items-start gap-2\", className)}\n      data-slot=\"field\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldLabel({\n  className,\n  ...props\n}: FieldPrimitive.Label.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Label\n      className={cn(\n        \"inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"field-label\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldItem({\n  className,\n  ...props\n}: FieldPrimitive.Item.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Item\n      className={cn(\"flex\", className)}\n      data-slot=\"field-item\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldDescription({\n  className,\n  ...props\n}: FieldPrimitive.Description.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Description\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      data-slot=\"field-description\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldError({\n  className,\n  ...props\n}: FieldPrimitive.Error.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Error\n      className={cn(\"text-destructive-foreground text-xs\", className)}\n      data-slot=\"field-error\"\n      {...props}\n    />\n  );\n}\n\nexport const FieldControl: typeof FieldPrimitive.Control =\n  FieldPrimitive.Control;\nexport const FieldValidity: typeof FieldPrimitive.Validity =\n  FieldPrimitive.Validity;\n\nexport { FieldPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/fieldset.tsx",
    "content": "\"use client\";\n\nimport { Fieldset as FieldsetPrimitive } from \"@base-ui/react/fieldset\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Fieldset({\n  className,\n  ...props\n}: FieldsetPrimitive.Root.Props): React.ReactElement {\n  return (\n    <FieldsetPrimitive.Root\n      className={cn(\"flex w-full max-w-64 flex-col gap-6\", className)}\n      data-slot=\"fieldset\"\n      {...props}\n    />\n  );\n}\nexport function FieldsetLegend({\n  className,\n  ...props\n}: FieldsetPrimitive.Legend.Props): React.ReactElement {\n  return (\n    <FieldsetPrimitive.Legend\n      className={cn(\"font-semibold text-foreground\", className)}\n      data-slot=\"fieldset-legend\"\n      {...props}\n    />\n  );\n}\n\nexport { FieldsetPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/form.tsx",
    "content": "\"use client\";\n\nimport { Form as FormPrimitive } from \"@base-ui/react/form\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Form({\n  className,\n  ...props\n}: FormPrimitive.Props): React.ReactElement {\n  return (\n    <FormPrimitive\n      className={cn(\"flex w-full flex-col gap-4\", className)}\n      data-slot=\"form\"\n      {...props}\n    />\n  );\n}\n\nexport { FormPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/frame.tsx",
    "content": "import type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Frame({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative flex flex-col rounded-2xl bg-muted/72 p-1\",\n        \"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1\",\n        className,\n      )}\n      data-slot=\"frame\"\n      {...props}\n    />\n  );\n}\n\nexport function FramePanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"frame-panel\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"header\">): React.ReactElement {\n  return (\n    <header\n      className={cn(\"flex flex-col px-5 py-4\", className)}\n      data-slot=\"frame-panel-header\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"font-semibold text-sm\", className)}\n      data-slot=\"frame-panel-title\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"frame-panel-description\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"footer\">): React.ReactElement {\n  return (\n    <footer\n      className={cn(\"px-5 py-4\", className)}\n      data-slot=\"frame-panel-footer\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/group.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nexport const groupVariants = cva(\n  \"flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64 dark:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64\",\n  {\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none\",\n        vertical:\n          \"flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none\",\n      },\n    },\n  },\n);\n\nexport function Group({\n  className,\n  orientation,\n  children,\n  ...props\n}: {\n  className?: string;\n  orientation?: VariantProps<typeof groupVariants>[\"orientation\"];\n  children: React.ReactNode;\n} & React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(groupVariants({ orientation }), className)}\n      data-orientation={orientation}\n      data-slot=\"group\"\n      role=\"group\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function GroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative inline-flex items-center gap-2 whitespace-nowrap rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-base text-muted-foreground shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"group-text\",\n  };\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function GroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: {\n  className?: string;\n} & React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\n        \"pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px\",\n        className,\n      )}\n      orientation={orientation}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Group as ButtonGroup,\n  GroupText as ButtonGroupText,\n  GroupSeparator as ButtonGroupSeparator,\n};\n"
  },
  {
    "path": "apps/ui/registry/default/ui/input-group.tsx",
    "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"inline-end\":\n          \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n        \"inline-start\":\n          \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n      },\n    },\n  },\n);\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n        className,\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        const isInteractive = target.closest(\n          \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n        );\n        if (isInteractive) return;\n        e.preventDefault();\n        const parent = e.currentTarget.parentElement;\n        const input = parent?.querySelector<\n          HTMLInputElement | HTMLTextAreaElement\n        >(\"input, textarea\");\n        if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n          input.focus();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(\n        \"line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupInput({\n  className,\n  ...props\n}: InputProps): React.ReactElement {\n  return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return <Textarea className={className} unstyled {...props} />;\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/input-otp.tsx",
    "content": "\"use client\";\n\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport type * as React from \"react\";\nimport { useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Separator } from \"@/registry/default/ui/separator\";\n\ntype InputOTPSize = \"default\" | \"lg\";\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nexport type InputOTPProps = DistributiveOmit<\n  React.ComponentProps<typeof OTPInput>,\n  \"size\" | \"data-size\"\n> & {\n  containerClassName?: string;\n};\n\nexport function InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: InputOTPProps): React.ReactElement {\n  return (\n    <OTPInput\n      className={className}\n      containerClassName={cn(\n        \"flex items-center gap-2 has-disabled:opacity-64 has-disabled:**:data-[slot=input-otp-slot]:shadow-none has-disabled:**:data-[slot=input-otp-slot]:before:shadow-none!\",\n        containerClassName,\n      )}\n      data-slot=\"input-otp\"\n      spellCheck={false}\n      {...props}\n    />\n  );\n}\n\nexport function InputOTPGroup({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  size?: InputOTPSize;\n}): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex items-center gap-2\", className)}\n      data-size={size}\n      data-slot=\"input-otp-group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number;\n}): React.ReactElement {\n  const inputOTPContext = useContext(OTPInputContext);\n  const slot = inputOTPContext?.slots[index];\n  const { char, hasFakeCaret, isActive } = slot ?? {};\n\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex in-[[data-slot=input-otp-group][data-size=lg]]:size-10 size-9 items-center justify-center rounded-lg border border-input bg-background not-dark:bg-clip-padding in-[[data-slot=input-otp-group][data-size=lg]]:text-lg text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-[active=true]:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] aria-invalid:border-destructive/36 data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/24 data-[active=true]:aria-invalid:border-destructive/64 data-[active=true]:aria-invalid:ring-destructive/16 sm:in-[[data-slot=input-otp-group][data-size=lg]]:size-9 sm:size-8 sm:in-[[data-slot=input-otp-group][data-size=lg]]:text-base sm:text-sm dark:bg-input/32 dark:data-[active=true]:aria-invalid:ring-destructive/24 dark:not-data-[active=true]:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-active=true],[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-active={isActive ? true : undefined}\n      data-slot=\"input-otp-slot\"\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function InputOTPSeparator({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\n        \"rounded-full bg-input data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { OTPInput as InputOTPPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/input.tsx",
    "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type InputProps = Omit<\n  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,\n  \"size\"\n> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  unstyled?: boolean;\n  nativeInput?: boolean;\n};\n\nexport function Input({\n  className,\n  size = \"default\",\n  unstyled = false,\n  nativeInput = false,\n  ...props\n}: InputProps): React.ReactElement {\n  const inputClassName = cn(\n    \"h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5\",\n    size === \"sm\" &&\n      \"h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5\",\n    size === \"lg\" && \"h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5\",\n    props.type === \"search\" &&\n      \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\",\n    props.type === \"file\" &&\n      \"text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm\",\n  );\n\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"input-control\"\n    >\n      {nativeInput ? (\n        <input\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          {...props}\n        />\n      ) : (\n        <InputPrimitive\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          {...props}\n        />\n      )}\n    </span>\n  );\n}\n\nexport { InputPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/kbd.tsx",
    "content": "import type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Kbd({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded bg-muted px-1 font-medium font-sans text-muted-foreground text-xs [&_svg:not([class*='size-'])]:size-3\",\n        className,\n      )}\n      data-slot=\"kbd\"\n      {...props}\n    />\n  );\n}\n\nexport function KbdGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      data-slot=\"kbd-group\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/label.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Label({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"label\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n      className,\n    ),\n    \"data-slot\": \"label\",\n  };\n\n  return useRender({\n    defaultTagName: \"label\",\n    props: mergeProps<\"label\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/menu.tsx",
    "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const MenuCreateHandle: typeof MenuPrimitive.createHandle =\n  MenuPrimitive.createHandle;\n\nexport const Menu: typeof MenuPrimitive.Root = MenuPrimitive.Root;\n\nexport const MenuPortal: typeof MenuPrimitive.Portal = MenuPrimitive.Portal;\n\nexport function MenuTrigger({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <MenuPrimitive.Trigger\n      className={className}\n      data-slot=\"menu-trigger\"\n      {...props}\n    >\n      {children}\n    </MenuPrimitive.Trigger>\n  );\n}\n\nexport function MenuPopup({\n  children,\n  className,\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  side = \"bottom\",\n  anchor,\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: MenuPrimitive.Positioner.Props[\"side\"];\n  anchor?: MenuPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50\"\n        data-slot=\"menu-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          className={cn(\n            \"relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"menu-popup\"\n          {...props}\n        >\n          <div className=\"max-h-(--available-height) w-full overflow-y-auto p-1\">\n            {children}\n          </div>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport function MenuGroup(\n  props: MenuPrimitive.Group.Props,\n): React.ReactElement {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />;\n}\n\nexport function MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-item\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nexport function MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  variant?: \"default\" | \"switch\";\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[.75rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"menu-checkbox-item\"\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <MenuPrimitive.CheckboxItemIndicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </MenuPrimitive.CheckboxItemIndicator>\n        </>\n      ) : (\n        <>\n          <MenuPrimitive.CheckboxItemIndicator className=\"col-start-1 -ms-0.5\">\n            <svg\n              aria-hidden=\"true\"\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </MenuPrimitive.CheckboxItemIndicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function MenuRadioGroup(\n  props: MenuPrimitive.RadioGroup.Props,\n): React.ReactElement {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />;\n}\n\nexport function MenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props): React.ReactElement {\n  return (\n    <MenuPrimitive.RadioItem\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[.75rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"menu-radio-item\"\n      {...props}\n    >\n      <MenuPrimitive.RadioItemIndicator className=\"col-start-1 -ms-0.5\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </MenuPrimitive.RadioItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function MenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-label\"\n      {...props}\n    />\n  );\n}\n\nexport function MenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <MenuPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"menu-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function MenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"menu-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function MenuSub(\n  props: MenuPrimitive.SubmenuRoot.Props,\n): React.ReactElement {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />;\n}\n\nexport function MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      className={cn(\n        \"flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nexport function MenuSubPopup({\n  className,\n  sideOffset = 0,\n  alignOffset,\n  align = \"start\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"];\n}): React.ReactElement {\n  const defaultAlignOffset = align !== \"center\" ? -5 : undefined;\n\n  return (\n    <MenuPopup\n      align={align}\n      alignOffset={alignOffset ?? defaultAlignOffset}\n      className={className}\n      data-slot=\"menu-sub-content\"\n      side=\"inline-end\"\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nexport {\n  MenuPrimitive,\n  MenuCreateHandle as DropdownMenuCreateHandle,\n  Menu as DropdownMenu,\n  MenuPortal as DropdownMenuPortal,\n  MenuTrigger as DropdownMenuTrigger,\n  MenuPopup as DropdownMenuContent,\n  MenuGroup as DropdownMenuGroup,\n  MenuItem as DropdownMenuItem,\n  MenuCheckboxItem as DropdownMenuCheckboxItem,\n  MenuRadioGroup as DropdownMenuRadioGroup,\n  MenuRadioItem as DropdownMenuRadioItem,\n  MenuGroupLabel as DropdownMenuLabel,\n  MenuSeparator as DropdownMenuSeparator,\n  MenuShortcut as DropdownMenuShortcut,\n  MenuSub as DropdownMenuSub,\n  MenuSubTrigger as DropdownMenuSubTrigger,\n  MenuSubPopup as DropdownMenuSubContent,\n};\n"
  },
  {
    "path": "apps/ui/registry/default/ui/meter.tsx",
    "content": "\"use client\";\n\nimport { Meter as MeterPrimitive } from \"@base-ui/react/meter\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Meter({\n  className,\n  children,\n  ...props\n}: MeterPrimitive.Root.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Root\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...props}\n    >\n      {children ? (\n        children\n      ) : (\n        <MeterTrack>\n          <MeterIndicator />\n        </MeterTrack>\n      )}\n    </MeterPrimitive.Root>\n  );\n}\n\nexport function MeterLabel({\n  className,\n  ...props\n}: MeterPrimitive.Label.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Label\n      className={cn(\"font-medium text-foreground text-sm\", className)}\n      data-slot=\"meter-label\"\n      {...props}\n    />\n  );\n}\n\nexport function MeterTrack({\n  className,\n  ...props\n}: MeterPrimitive.Track.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Track\n      className={cn(\"block h-2 w-full overflow-hidden bg-input\", className)}\n      data-slot=\"meter-track\"\n      {...props}\n    />\n  );\n}\n\nexport function MeterIndicator({\n  className,\n  ...props\n}: MeterPrimitive.Indicator.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Indicator\n      className={cn(\"bg-primary transition-all duration-500\", className)}\n      data-slot=\"meter-indicator\"\n      {...props}\n    />\n  );\n}\n\nexport function MeterValue({\n  className,\n  ...props\n}: MeterPrimitive.Value.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Value\n      className={cn(\"text-foreground text-sm tabular-nums\", className)}\n      data-slot=\"meter-value\"\n      {...props}\n    />\n  );\n}\n\nexport { MeterPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/number-field.tsx",
    "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport const NumberFieldContext: React.Context<{\n  fieldId: string;\n} | null> = React.createContext<{\n  fieldId: string;\n} | null>(null);\n\nexport function NumberField({\n  id,\n  className,\n  size = \"default\",\n  ...props\n}: NumberFieldPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\" | \"lg\";\n}): React.ReactElement {\n  const generatedId = React.useId();\n  const fieldId = id ?? generatedId;\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cn(\"flex w-full flex-col items-start gap-2\", className)}\n        data-size={size}\n        data-slot=\"number-field\"\n        id={fieldId}\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  );\n}\n\nexport function NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(\n        \"relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/48 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"number-field-group\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldDecrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      <MinusIcon />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nexport function NumberFieldIncrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Increment.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      <PlusIcon />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nexport function NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(\n        \"h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5\",\n        className,\n      )}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldPrimitive.ScrubArea.Props & {\n  label: string;\n}): React.ReactElement {\n  const context = React.useContext(NumberFieldContext);\n\n  if (!context) {\n    throw new Error(\n      \"NumberFieldScrubArea must be used within a NumberField component for accessibility.\",\n    );\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cn(\"flex cursor-ew-resize\", className)}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\n\nexport function CursorGrowIcon(\n  props: React.ComponentProps<\"svg\">,\n): React.ReactElement {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\nexport { NumberFieldPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/pagination.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { type Button, buttonVariants } from \"@/registry/default/ui/button\";\n\nexport function Pagination({\n  className,\n  ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n  return (\n    <nav\n      aria-label=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      data-slot=\"pagination\"\n      {...props}\n    />\n  );\n}\n\nexport function PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      data-slot=\"pagination-content\"\n      {...props}\n    />\n  );\n}\n\nexport function PaginationItem({\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\nexport type PaginationLinkProps = {\n  isActive?: boolean;\n  size?: React.ComponentProps<typeof Button>[\"size\"];\n} & useRender.ComponentProps<\"a\">;\n\nexport function PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  render,\n  ...props\n}: PaginationLinkProps): React.ReactElement {\n  const defaultProps = {\n    \"aria-current\": isActive ? (\"page\" as const) : undefined,\n    className: render\n      ? className\n      : cn(\n          buttonVariants({\n            size,\n            variant: isActive ? \"outline\" : \"ghost\",\n          }),\n          className,\n        ),\n    \"data-active\": isActive,\n    \"data-slot\": \"pagination-link\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n      size=\"default\"\n      {...props}\n    >\n      <ChevronLeftIcon className=\"sm:-ms-1\" />\n      <span className=\"max-sm:hidden\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n      size=\"default\"\n      {...props}\n    >\n      <span className=\"max-sm:hidden\">Next</span>\n      <ChevronRightIcon className=\"sm:-me-1\" />\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      aria-hidden\n      className={cn(\"flex min-w-7 justify-center\", className)}\n      data-slot=\"pagination-ellipsis\"\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-5 sm:size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/popover.tsx",
    "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const PopoverCreateHandle: typeof PopoverPrimitive.createHandle =\n  PopoverPrimitive.createHandle;\n\nexport const Popover: typeof PopoverPrimitive.Root = PopoverPrimitive.Root;\n\nexport function PopoverTrigger({\n  className,\n  children,\n  ...props\n}: PopoverPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <PopoverPrimitive.Trigger\n      className={className}\n      data-slot=\"popover-trigger\"\n      {...props}\n    >\n      {children}\n    </PopoverPrimitive.Trigger>\n  );\n}\n\nexport function PopoverPopup({\n  children,\n  className,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  alignOffset = 0,\n  tooltipStyle = false,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props & {\n  side?: PopoverPrimitive.Positioner.Props[\"side\"];\n  align?: PopoverPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: PopoverPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: PopoverPrimitive.Positioner.Props[\"alignOffset\"];\n  tooltipStyle?: boolean;\n  anchor?: PopoverPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none\"\n        data-slot=\"popover-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          className={cn(\n            \"relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            tooltipStyle &&\n              \"w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\",\n            className,\n          )}\n          data-slot=\"popover-popup\"\n          {...props}\n        >\n          <PopoverPrimitive.Viewport\n            className={cn(\n              \"relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity\",\n              tooltipStyle\n                ? \"py-1 [--viewport-inline-padding:--spacing(2)]\"\n                : \"not-data-transitioning:overflow-y-auto\",\n            )}\n            data-slot=\"popover-viewport\"\n          >\n            {children}\n          </PopoverPrimitive.Viewport>\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport function PopoverClose({\n  ...props\n}: PopoverPrimitive.Close.Props): React.ReactElement {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nexport function PopoverTitle({\n  className,\n  ...props\n}: PopoverPrimitive.Title.Props): React.ReactElement {\n  return (\n    <PopoverPrimitive.Title\n      className={cn(\"font-semibold text-lg leading-none\", className)}\n      data-slot=\"popover-title\"\n      {...props}\n    />\n  );\n}\n\nexport function PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props): React.ReactElement {\n  return (\n    <PopoverPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"popover-description\"\n      {...props}\n    />\n  );\n}\n\nexport { PopoverPrimitive, PopoverPopup as PopoverContent };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/preview-card.tsx",
    "content": "\"use client\";\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const PreviewCard: typeof PreviewCardPrimitive.Root =\n  PreviewCardPrimitive.Root;\n\nexport function PreviewCardTrigger({\n  ...props\n}: PreviewCardPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"preview-card-trigger\" {...props} />\n  );\n}\n\nexport function PreviewCardPopup({\n  className,\n  children,\n  align = \"center\",\n  sideOffset = 4,\n  anchor,\n  ...props\n}: PreviewCardPrimitive.Popup.Props & {\n  align?: PreviewCardPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: PreviewCardPrimitive.Positioner.Props[\"sideOffset\"];\n  anchor?: PreviewCardPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <PreviewCardPrimitive.Portal>\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        anchor={anchor}\n        className=\"z-50\"\n        data-slot=\"preview-card-positioner\"\n        sideOffset={sideOffset}\n      >\n        <PreviewCardPrimitive.Popup\n          className={cn(\n            \"relative flex w-64 origin-(--transform-origin) text-balance rounded-lg border bg-popover not-dark:bg-clip-padding p-4 text-popover-foreground text-sm shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"preview-card-content\"\n          {...props}\n        >\n          {children}\n        </PreviewCardPrimitive.Popup>\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport {\n  PreviewCardPrimitive,\n  PreviewCard as HoverCard,\n  PreviewCardTrigger as HoverCardTrigger,\n  PreviewCardPopup as HoverCardContent,\n};\n"
  },
  {
    "path": "apps/ui/registry/default/ui/progress.tsx",
    "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Progress({\n  className,\n  children,\n  ...props\n}: ProgressPrimitive.Root.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Root\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      data-slot=\"progress\"\n      {...props}\n    >\n      {children ? (\n        children\n      ) : (\n        <ProgressTrack>\n          <ProgressIndicator />\n        </ProgressTrack>\n      )}\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport function ProgressLabel({\n  className,\n  ...props\n}: ProgressPrimitive.Label.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"font-medium text-sm\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ProgressTrack({\n  className,\n  ...props\n}: ProgressPrimitive.Track.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"block h-1.5 w-full overflow-hidden rounded-full bg-input\",\n        className,\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  );\n}\n\nexport function ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Indicator\n      className={cn(\"bg-primary transition-all duration-500\", className)}\n      data-slot=\"progress-indicator\"\n      {...props}\n    />\n  );\n}\n\nexport function ProgressValue({\n  className,\n  ...props\n}: ProgressPrimitive.Value.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\"text-sm tabular-nums\", className)}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  );\n}\n\nexport { ProgressPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/radio-group.tsx",
    "content": "\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function RadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col gap-3\", className)}\n      data-slot=\"radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function Radio({\n  className,\n  ...props\n}: RadioPrimitive.Root.Props): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-full not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"radio\"\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        className=\"absolute -inset-px flex size-4.5 items-center justify-center rounded-full before:size-2 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-primary sm:size-4 sm:before:size-1.5\"\n        data-slot=\"radio-indicator\"\n      />\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { RadioGroupPrimitive, RadioPrimitive, Radio as RadioGroupItem };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/scroll-area.tsx",
    "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/select.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;\n\nexport const selectTriggerVariants = cva(\n  \"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"\",\n        lg: \"min-h-10 sm:min-h-9\",\n        sm: \"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\",\n      },\n    },\n  },\n);\n\nexport const selectTriggerIconClassName = \"-me-1 size-4.5 opacity-80 sm:size-4\";\n\nexport interface SelectButtonProps extends useRender.ComponentProps<\"button\"> {\n  size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n}\n\nexport function SelectButton({\n  className,\n  size,\n  render,\n  children,\n  ...props\n}: SelectButtonProps): React.ReactElement {\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        <span className=\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\">\n          {children}\n        </span>\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </>\n    ),\n    className: cn(selectTriggerVariants({ size }), \"min-w-0\", className),\n    \"data-slot\": \"select-button\",\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props &\n  VariantProps<typeof selectTriggerVariants>): React.ReactElement {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(selectTriggerVariants({ size }), className)}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nexport function SelectValue({\n  className,\n  ...props\n}: SelectPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Value\n      className={cn(\n        \"flex-1 truncate data-placeholder:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"select-value\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  anchor,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  side?: SelectPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"];\n  align?: SelectPrimitive.Positioner.Props[\"align\"];\n  alignOffset?: SelectPrimitive.Positioner.Props[\"alignOffset\"];\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"];\n  anchor?: SelectPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"select-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className=\"origin-(--transform-origin) text-foreground outline-none\"\n          data-slot=\"select-popup\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <div className=\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n            <SelectPrimitive.List\n              className={cn(\n                \"max-h-(--available-height) overflow-y-auto p-1\",\n                className,\n              )}\n              data-slot=\"select-list\"\n            >\n              {children}\n            </SelectPrimitive.List>\n          </div>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"col-start-2 min-w-0\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroup(\n  props: SelectPrimitive.Group.Props,\n): React.ReactElement {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.Label.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\n        \"not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroupLabel(\n  props: SelectPrimitive.GroupLabel.Props,\n): React.ReactElement {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport { SelectPrimitive, SelectPopup as SelectContent };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/separator.tsx",
    "content": "import { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props): React.ReactElement {\n  return (\n    <SeparatorPrimitive\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch\",\n        className,\n      )}\n      data-slot=\"separator\"\n      orientation={orientation}\n      {...props}\n    />\n  );\n}\n\nexport { SeparatorPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/sheet.tsx",
    "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n  props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport function SheetClose(\n  props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport function SheetBackdrop({\n  className,\n  ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"sheet-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetViewport({\n  className,\n  side,\n  variant = \"default\",\n  ...props\n}: SheetPrimitive.Viewport.Props & {\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <SheetPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid\",\n        side === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        side === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        side === \"left\" && \"flex justify-start\",\n        side === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"sm:p-4\",\n      )}\n      data-slot=\"sheet-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPopup({\n  className,\n  children,\n  showCloseButton = true,\n  side = \"right\",\n  variant = \"default\",\n  closeProps,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n  closeProps?: SheetPrimitive.Close.Props;\n}): React.ReactElement {\n  return (\n    <SheetPortal>\n      <SheetBackdrop />\n      <SheetViewport side={side} variant={variant}>\n        <SheetPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            side === \"bottom\" &&\n              \"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8\",\n            side === \"top\" &&\n              \"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8\",\n            side === \"left\" &&\n              \"w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8\",\n            side === \"right\" &&\n              \"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8\",\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            className,\n          )}\n          data-slot=\"sheet-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <SheetPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </SheetPrimitive.Close>\n          )}\n        </SheetPrimitive.Popup>\n      </SheetViewport>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"sheet-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"sheet-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"sheet-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  SheetPrimitive,\n  SheetBackdrop as SheetOverlay,\n  SheetPopup as SheetContent,\n};\n"
  },
  {
    "path": "apps/ui/registry/default/ui/sidebar.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { useMediaQuery } from \"@/registry/default/hooks/use-media-query\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n} from \"@/registry/default/ui/sheet\";\nimport { Skeleton } from \"@/registry/default/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME: string = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE: number = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH: string = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE: string = \"18rem\";\nconst SIDEBAR_WIDTH_ICON: string = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT: string = \"b\";\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-8 text-sm\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n        sm: \"h-7 text-xs\",\n      },\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n    },\n  },\n);\n\nexport type SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nexport const SidebarContext: React.Context<SidebarContextProps | null> =\n  React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar(): SidebarContextProps {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\nexport function SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}): React.ReactElement {\n  const isMobile = useMediaQuery(\"max-md\");\n  const [openMobile, setOpenMobile] = React.useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    async (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      await cookieStore.set({\n        expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,\n        name: SIDEBAR_COOKIE_NAME,\n        path: \"/\",\n        value: String(openState),\n      });\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      isMobile,\n      open,\n      openMobile,\n      setOpen,\n      setOpenMobile,\n      state,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className,\n        )}\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nexport function Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}): React.ReactElement {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className,\n        )}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>\n        <SheetPopup\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          data-mobile=\"true\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          side={side}\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetPopup>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      className={cn(\"size-7\", className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nexport function SidebarRail({\n  className,\n  ...props\n}: React.ComponentProps<\"button\">): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      aria-label=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onClick={toggleSidebar}\n      tabIndex={-1}\n      title=\"Toggle Sidebar\"\n      type=\"button\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInset({\n  className,\n  ...props\n}: React.ComponentProps<\"main\">): React.ReactElement {\n  return (\n    <main\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5\",\n        className,\n      )}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>): React.ReactElement {\n  return (\n    <Input\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <ScrollArea\n      className=\"**:data-[slot=scroll-area-scrollbar]:hidden\"\n      scrollFade\n    >\n      <div\n        className={cn(\n          \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n          className,\n        )}\n        data-sidebar=\"content\"\n        data-slot=\"sidebar-content\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function SidebarGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"group-label\",\n    \"data-slot\": \"sidebar-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-sidebar\": \"group-action\",\n    \"data-slot\": \"sidebar-group-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"w-full text-sm\", className)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-item relative\", className)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuButton({\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;\n} & VariantProps<typeof sidebarMenuButtonVariants>): React.ReactElement {\n  const { isMobile, state } = useSidebar();\n\n  const defaultProps = {\n    className: cn(sidebarMenuButtonVariants({ size, variant }), className),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-button\",\n  };\n\n  const buttonProps = mergeProps<\"button\">(defaultProps, props);\n\n  const buttonElement = useRender({\n    defaultTagName: \"button\",\n    props: buttonProps,\n    render,\n  });\n\n  if (!tooltip) {\n    return buttonElement;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={buttonElement as React.ReactElement<Record<string, unknown>>}\n      />\n      <TooltipPopup\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        side=\"right\"\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\nexport function SidebarMenuAction({\n  className,\n  showOnHover = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  showOnHover?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      showOnHover &&\n        \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"menu-action\",\n    \"data-slot\": \"sidebar-menu-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean;\n}): React.ReactElement {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      className={cn(\"flex h-8 items-center gap-2 rounded-lg px-2\", className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-lg\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nexport function SidebarMenuSub({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-sub-item relative\", className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubButton({\n  size = \"md\",\n  isActive = false,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\"> & {\n  size?: \"sm\" | \"md\";\n  isActive?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n      \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n      size === \"sm\" && \"text-xs\",\n      size === \"md\" && \"text-sm\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-sub-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-sub-button\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/skeleton.tsx",
    "content": "import type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Skeleton({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0/200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]\",\n        className,\n      )}\n      data-slot=\"skeleton\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/slider.tsx",
    "content": "\"use client\";\n\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Slider({\n  className,\n  children,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props): React.ReactElement {\n  const _values = React.useMemo(() => {\n    if (value !== undefined) {\n      return Array.isArray(value) ? value : [value];\n    }\n    if (defaultValue !== undefined) {\n      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];\n    }\n    return [min];\n  }, [value, defaultValue, min]);\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-[orientation=horizontal]:w-full\", className)}\n      defaultValue={defaultValue}\n      max={max}\n      min={min}\n      thumbAlignment=\"edge\"\n      value={value}\n      {...props}\n    >\n      {children}\n      <SliderPrimitive.Control\n        className=\"flex touch-none select-none data-disabled:pointer-events-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=vertical]:flex-col data-disabled:opacity-64\"\n        data-slot=\"slider-control\"\n      >\n        <SliderPrimitive.Track\n          className=\"relative grow select-none before:absolute before:rounded-full before:bg-input data-[orientation=horizontal]:h-1 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1 data-[orientation=horizontal]:before:inset-x-0.5 data-[orientation=vertical]:before:inset-x-0 data-[orientation=horizontal]:before:inset-y-0 data-[orientation=vertical]:before:inset-y-0.5\"\n          data-slot=\"slider-track\"\n        >\n          <SliderPrimitive.Indicator\n            className=\"select-none rounded-full bg-primary data-[orientation=horizontal]:ms-0.5 data-[orientation=vertical]:mb-0.5\"\n            data-slot=\"slider-indicator\"\n          />\n          {Array.from({ length: _values.length }, (_, index) => (\n            <SliderPrimitive.Thumb\n              className=\"block size-5 shrink-0 select-none rounded-full border border-input bg-white not-dark:bg-clip-padding shadow-xs/5 outline-none transition-[box-shadow,scale] before:absolute before:inset-0 before:rounded-full before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-focus-visible:ring-ring/24 data-dragging:scale-120 sm:size-4 dark:border-background dark:has-focus-visible:ring-ring/48 [:has(*:focus-visible),[data-dragging]]:shadow-none\"\n              data-slot=\"slider-thumb\"\n              index={index}\n              key={String(index)}\n            />\n          ))}\n        </SliderPrimitive.Track>\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport function SliderValue({\n  className,\n  ...props\n}: SliderPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SliderPrimitive.Value\n      className={cn(\"flex justify-end text-sm\", className)}\n      data-slot=\"slider-value\"\n      {...props}\n    />\n  );\n}\n\nexport { SliderPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/spinner.tsx",
    "content": "import { Loader2Icon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Spinner({\n  className,\n  ...props\n}: React.ComponentProps<typeof Loader2Icon>): React.ReactElement {\n  return (\n    <Loader2Icon\n      aria-label=\"Loading\"\n      className={cn(\"animate-spin\", className)}\n      role=\"status\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/switch.tsx",
    "content": "\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Switch({\n  className,\n  ...props\n}: SwitchPrimitive.Root.Props): React.ReactElement {\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        \"inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(5)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(4)]\",\n        className,\n      )}\n      data-slot=\"switch\"\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block aspect-square h-full origin-left in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]\",\n        )}\n        data-slot=\"switch-thumb\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { SwitchPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/table.tsx",
    "content": "import type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Table({\n  className,\n  ...props\n}: React.ComponentProps<\"table\">): React.ReactElement {\n  return (\n    <div\n      className=\"relative w-full overflow-x-auto\"\n      data-slot=\"table-container\"\n    >\n      <table\n        className={cn(\n          \"w-full caption-bottom in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0 text-sm\",\n          className,\n        )}\n        data-slot=\"table\"\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function TableHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"thead\">): React.ReactElement {\n  return (\n    <thead\n      className={cn(\n        \"[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent\",\n        className,\n      )}\n      data-slot=\"table-header\"\n      {...props}\n    />\n  );\n}\n\nexport function TableBody({\n  className,\n  ...props\n}: React.ComponentProps<\"tbody\">): React.ReactElement {\n  return (\n    <tbody\n      className={cn(\n        \"relative in-data-[slot=frame]:rounded-xl in-data-[slot=frame]:shadow-xs/5 before:pointer-events-none before:absolute before:inset-px not-in-data-[slot=frame]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[slot=frame]:*:[tr]:border-0 in-data-[slot=frame]:*:[tr]:*:[td]:border-b in-data-[slot=frame]:*:[tr]:*:[td]:bg-background in-data-[slot=frame]:*:[tr]:*:[td]:bg-clip-padding in-data-[slot=frame]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[slot=frame]:*:[tr]:*:[td]:first:border-s in-data-[slot=frame]:*:[tr]:first:*:[td]:border-t in-data-[slot=frame]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[slot=frame]:*:[tr]:*:[td]:last:border-e in-data-[slot=frame]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[slot=frame]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[slot=frame]:*:[tr]:hover:*:[td]:bg-transparent in-data-[slot=frame]:*:[tr]:data-[state=selected]:*:[td]:bg-muted/72\",\n        className,\n      )}\n      data-slot=\"table-body\"\n      {...props}\n    />\n  );\n}\n\nexport function TableFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"tfoot\">): React.ReactElement {\n  return (\n    <tfoot\n      className={cn(\n        \"border-t in-data-[slot=frame]:border-none bg-muted/72 in-data-[slot=frame]:bg-transparent font-medium [&>tr]:last:border-b-0 in-data-[slot=frame]:*:[tr]:hover:bg-transparent\",\n        className,\n      )}\n      data-slot=\"table-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function TableRow({\n  className,\n  ...props\n}: React.ComponentProps<\"tr\">): React.ReactElement {\n  return (\n    <tr\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/72 in-data-[slot=frame]:hover:bg-transparent data-[state=selected]:bg-muted/72 in-data-[slot=frame]:data-[state=selected]:bg-transparent\",\n        className,\n      )}\n      data-slot=\"table-row\"\n      {...props}\n    />\n  );\n}\n\nexport function TableHead({\n  className,\n  ...props\n}: React.ComponentProps<\"th\">): React.ReactElement {\n  return (\n    <th\n      className={cn(\n        \"h-10 whitespace-nowrap px-2.5 text-left align-middle font-medium text-muted-foreground leading-none has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0\",\n        className,\n      )}\n      data-slot=\"table-head\"\n      {...props}\n    />\n  );\n}\n\nexport function TableCell({\n  className,\n  ...props\n}: React.ComponentProps<\"td\">): React.ReactElement {\n  return (\n    <td\n      className={cn(\n        \"whitespace-nowrap p-2.5 align-middle leading-none in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:pe-0\",\n        className,\n      )}\n      data-slot=\"table-cell\"\n      {...props}\n    />\n  );\n}\n\nexport function TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">): React.ReactElement {\n  return (\n    <caption\n      className={cn(\n        \"in-data-[slot=frame]:my-4 mt-4 text-muted-foreground text-sm\",\n        className,\n      )}\n      data-slot=\"table-caption\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "apps/ui/registry/default/ui/tabs.tsx",
    "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TabsVariant = \"default\" | \"underline\";\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : \"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  ...props\n}: TabsPrimitive.Tab.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/textarea.tsx",
    "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\"> &\n  React.RefAttributes<HTMLElement> & {\n    size?: \"sm\" | \"default\" | \"lg\" | number;\n    unstyled?: boolean;\n  };\n\nexport function Textarea({\n  className,\n  size = \"default\",\n  unstyled = false,\n  ref,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"textarea-control\"\n    >\n      <FieldPrimitive.Control\n        ref={ref}\n        value={props.value}\n        defaultValue={props.defaultValue}\n        disabled={props.disabled}\n        id={props.id}\n        name={props.name}\n        render={(defaultProps: React.ComponentProps<\"textarea\">) => (\n          <textarea\n            className={cn(\n              \"field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5\",\n              size === \"sm\" &&\n                \"min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5\",\n              size === \"lg\" &&\n                \"min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5\",\n            )}\n            data-slot=\"textarea\"\n            {...mergeProps(defaultProps, props)}\n          />\n        )}\n      />\n    </span>\n  );\n}\n\nexport { FieldPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/toast.tsx",
    "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  LoaderCircleIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { buttonVariants } from \"@/registry/default/ui/button\";\n\nconst TOAST_ICONS = {\n  error: CircleAlertIcon,\n  info: InfoIcon,\n  loading: LoaderCircleIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n    ? \"up\"\n    : \"down\";\n\n  if (position.includes(\"center\")) {\n    return [verticalDirection];\n  }\n\n  if (position.includes(\"left\")) {\n    return [\"left\", verticalDirection];\n  }\n\n  return [\"right\", verticalDirection];\n}\n\nfunction Toasts({ position }: { position: ToastPosition }): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n  const swipeDirection = getSwipeDirection(position);\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal\">\n      <Toast.Viewport\n        className={cn(\n          \"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\",\n          // Vertical positioning\n          \"data-[position*=top]:top-(--toast-inset)\",\n          \"data-[position*=bottom]:bottom-(--toast-inset)\",\n          // Horizontal positioning\n          \"data-[position*=left]:left-(--toast-inset)\",\n          \"data-[position*=right]:right-(--toast-inset)\",\n          \"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\",\n        )}\n        data-position={position}\n        data-slot=\"toast-viewport\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n\n          return (\n            <Toast.Root\n              className={cn(\n                \"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                // Base positioning using data-position\n                \"data-[position*=right]:right-0 data-[position*=right]:left-auto\",\n                \"data-[position*=left]:right-auto data-[position*=left]:left-0\",\n                \"data-[position*=center]:right-0 data-[position*=center]:left-0\",\n                \"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top\",\n                \"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom\",\n                // Gap fill for hover\n                \"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\",\n                \"data-[position*=top]:after:top-full\",\n                \"data-[position*=bottom]:after:bottom-full\",\n                // Define some variables\n                \"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\",\n                // Define offset-y variable\n                \"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\",\n                \"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\",\n                // Default state transform\n                \"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                \"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                // Limited state\n                \"data-limited:opacity-0\",\n                // Expanded state\n                \"data-expanded:h-(--toast-height)\",\n                \"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\",\n                // Starting and ending animations\n                \"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:opacity-0\",\n                // Ending animations (direction-aware)\n                \"data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                // Ending animations (expanded)\n                \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n              )}\n              data-position={position}\n              key={toast.id}\n              swipeDirection={swipeDirection}\n              toast={toast}\n            >\n              <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\">\n                <div className=\"flex gap-2\">\n                  {Icon && (\n                    <div\n                      className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                      data-slot=\"toast-icon\"\n                    >\n                      <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                    </div>\n                  )}\n\n                  <div className=\"flex flex-col gap-0.5\">\n                    <Toast.Title\n                      className=\"font-medium\"\n                      data-slot=\"toast-title\"\n                    />\n                    <Toast.Description\n                      className=\"text-muted-foreground\"\n                      data-slot=\"toast-description\"\n                    />\n                  </div>\n                </div>\n                {toast.actionProps && (\n                  <Toast.Action\n                    className={buttonVariants({ size: \"xs\" })}\n                    data-slot=\"toast-action\"\n                  >\n                    {toast.actionProps.children}\n                  </Toast.Action>\n                )}\n              </Toast.Content>\n            </Toast.Root>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nfunction AnchoredToasts(): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal-anchored\">\n      <Toast.Viewport\n        className=\"outline-none\"\n        data-slot=\"toast-viewport-anchored\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const tooltipStyle =\n            (toast.data as { tooltipStyle?: boolean })?.tooltipStyle ?? false;\n          const positionerProps = toast.positionerProps;\n\n          if (!positionerProps?.anchor) {\n            return null;\n          }\n\n          return (\n            <Toast.Positioner\n              className=\"z-50 max-w-[min(--spacing(64),var(--available-width))]\"\n              data-slot=\"toast-positioner\"\n              key={toast.id}\n              sideOffset={positionerProps.sideOffset ?? 4}\n              toast={toast}\n            >\n              <Toast.Root\n                className={cn(\n                  \"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                  tooltipStyle\n                    ? \"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\"\n                    : \"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\",\n                )}\n                data-slot=\"toast-popup\"\n                toast={toast}\n              >\n                {tooltipStyle ? (\n                  <Toast.Content className=\"pointer-events-auto px-2 py-1\">\n                    <Toast.Title data-slot=\"toast-title\" />\n                  </Toast.Content>\n                ) : (\n                  <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\">\n                    <div className=\"flex gap-2\">\n                      {Icon && (\n                        <div\n                          className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                          data-slot=\"toast-icon\"\n                        >\n                          <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                        </div>\n                      )}\n\n                      <div className=\"flex flex-col gap-0.5\">\n                        <Toast.Title\n                          className=\"font-medium\"\n                          data-slot=\"toast-title\"\n                        />\n                        <Toast.Description\n                          className=\"text-muted-foreground\"\n                          data-slot=\"toast-description\"\n                        />\n                      </div>\n                    </div>\n                    {toast.actionProps && (\n                      <Toast.Action\n                        className={buttonVariants({ size: \"xs\" })}\n                        data-slot=\"toast-action\"\n                      >\n                        {toast.actionProps.children}\n                      </Toast.Action>\n                    )}\n                  </Toast.Content>\n                )}\n              </Toast.Root>\n            </Toast.Positioner>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n  position?: ToastPosition;\n}\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  ...props\n}: ToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={toastManager} {...props}>\n      {children}\n      <Toasts position={position} />\n    </Toast.Provider>\n  );\n}\n\nexport function AnchoredToastProvider({\n  children,\n  ...props\n}: Toast.Provider.Props): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\n      {children}\n      <AnchoredToasts />\n    </Toast.Provider>\n  );\n}\n\nexport { Toast as ToastPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/toggle-group.tsx",
    "content": "\"use client\";\n\nimport type { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Separator } from \"@/registry/default/ui/separator\";\nimport {\n  Toggle as ToggleComponent,\n  type toggleVariants,\n} from \"@/registry/default/ui/toggle\";\n\nexport const ToggleGroupContext: React.Context<\n  VariantProps<typeof toggleVariants>\n> = React.createContext<VariantProps<typeof toggleVariants>>({\n  size: \"default\",\n  variant: \"default\",\n});\n\nexport function ToggleGroup({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants>): React.ReactElement {\n  return (\n    <ToggleGroupPrimitive\n      className={cn(\n        \"flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input\",\n        orientation === \"horizontal\"\n          ? \"*:pointer-coarse:after:min-w-auto\"\n          : \"*:pointer-coarse:after:min-h-auto\",\n        variant === \"default\"\n          ? \"gap-0.5\"\n          : orientation === \"horizontal\"\n            ? \"*:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none\"\n            : \"flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      orientation={orientation}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ size, variant }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  );\n}\n\nexport function Toggle({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: TogglePrimitive.Props &\n  VariantProps<typeof toggleVariants>): React.ReactElement {\n  const context = React.useContext(ToggleGroupContext);\n\n  const resolvedVariant = context.variant || variant;\n  const resolvedSize = context.size || size;\n\n  return (\n    <ToggleComponent\n      className={className}\n      data-size={resolvedSize}\n      data-variant={resolvedVariant}\n      size={resolvedSize}\n      variant={resolvedVariant}\n      {...props}\n    >\n      {children}\n    </ToggleComponent>\n  );\n}\n\nexport function ToggleGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: {\n  className?: string;\n} & React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\n        \"pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32\",\n        className,\n      )}\n      orientation={orientation}\n      {...props}\n    />\n  );\n}\n\nexport { ToggleGroupPrimitive, Toggle as ToggleGroupItem };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/toggle.tsx",
    "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const toggleVariants = cva(\n  \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8\",\n        lg: \"h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9\",\n        sm: \"h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7\",\n      },\n      variant: {\n        default: \"border-transparent\",\n        outline:\n          \"border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n      },\n    },\n  },\n);\n\nexport function Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: TogglePrimitive.Props &\n  VariantProps<typeof toggleVariants>): React.ReactElement {\n  return (\n    <TogglePrimitive\n      className={cn(toggleVariants({ className, size, variant }))}\n      data-slot=\"toggle\"\n      {...props}\n    />\n  );\n}\n\nexport { TogglePrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/toolbar.tsx",
    "content": "\"use client\";\n\nimport { Toolbar as ToolbarPrimitive } from \"@base-ui/react/toolbar\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Toolbar({\n  className,\n  ...props\n}: ToolbarPrimitive.Root.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Root\n      className={cn(\n        \"relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-1 text-card-foreground\",\n        className,\n      )}\n      data-slot=\"toolbar\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarButton({\n  className,\n  ...props\n}: ToolbarPrimitive.Button.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Button\n      className={cn(className)}\n      data-slot=\"toolbar-button\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarLink({\n  className,\n  ...props\n}: ToolbarPrimitive.Link.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Link\n      className={cn(className)}\n      data-slot=\"toolbar-link\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarInput({\n  className,\n  ...props\n}: ToolbarPrimitive.Input.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Input\n      className={cn(className)}\n      data-slot=\"toolbar-input\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarGroup({\n  className,\n  ...props\n}: ToolbarPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Group\n      className={cn(\"flex items-center gap-1\", className)}\n      data-slot=\"toolbar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarSeparator({\n  className,\n  ...props\n}: ToolbarPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Separator\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch\",\n        className,\n      )}\n      data-slot=\"toolbar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport { ToolbarPrimitive };\n"
  },
  {
    "path": "apps/ui/registry/default/ui/tooltip.tsx",
    "content": "\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport const TooltipCreateHandle: typeof TooltipPrimitive.createHandle =\n  TooltipPrimitive.createHandle;\n\nexport const TooltipProvider: typeof TooltipPrimitive.Provider =\n  TooltipPrimitive.Provider;\n\nexport const Tooltip: typeof TooltipPrimitive.Root = TooltipPrimitive.Root;\n\nexport function TooltipTrigger(\n  props: TooltipPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nexport function TooltipPopup({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  side = \"top\",\n  anchor,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props & {\n  align?: TooltipPrimitive.Positioner.Props[\"align\"];\n  side?: TooltipPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: TooltipPrimitive.Positioner.Props[\"sideOffset\"];\n  anchor?: TooltipPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        anchor={anchor}\n        className=\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none\"\n        data-slot=\"tooltip-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          className={cn(\n            \"relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"tooltip-popup\"\n          {...props}\n        >\n          <TooltipPrimitive.Viewport\n            className=\"relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity\"\n            data-slot=\"tooltip-viewport\"\n          >\n            {children}\n          </TooltipPrimitive.Viewport>\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { TooltipPrimitive, TooltipPopup as TooltipContent };\n"
  },
  {
    "path": "apps/ui/registry/index.ts",
    "content": "import type { Registry } from \"shadcn/schema\";\nimport { baseUi } from \"@/registry/registry-base-ui\";\nimport { hooks } from \"@/registry/registry-hooks\";\nimport { lib } from \"@/registry/registry-lib\";\nimport { particles } from \"@/registry/registry-particles\";\nimport { styles } from \"@/registry/registry-styles\";\nimport { ui } from \"@/registry/registry-ui\";\n\nexport const registry = {\n  homepage: \"https://ui.shadcn.com\",\n  items: [...ui, ...particles, ...styles, ...lib, ...baseUi, ...hooks],\n  name: \"shadcn/ui\",\n} satisfies Registry;\n"
  },
  {
    "path": "apps/ui/registry/registry-base-ui.ts",
    "content": "import type { Registry } from \"shadcn/schema\";\n\nexport const baseUi: Registry[\"items\"] = [\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"base-ui/use-render.ts\",\n        type: \"registry:lib\",\n      },\n    ],\n    name: \"use-render\",\n    type: \"registry:lib\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"base-ui/merge-props.ts\",\n        type: \"registry:lib\",\n      },\n    ],\n    name: \"merge-props\",\n    type: \"registry:lib\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"base-ui/csp-provider.ts\",\n        type: \"registry:lib\",\n      },\n    ],\n    name: \"csp-provider\",\n    type: \"registry:lib\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"base-ui/direction-provider.ts\",\n        type: \"registry:lib\",\n      },\n    ],\n    name: \"direction-provider\",\n    type: \"registry:lib\",\n  },\n];\n"
  },
  {
    "path": "apps/ui/registry/registry-categories.ts",
    "content": "/**\n * Registry Categories Type Definition\n *\n * This file defines all valid categories that can be used in registry items.\n * All categories are treated equally - no distinction between component and tag categories.\n */\n\n// All registry categories in display order\nexport const registryCategories = [\n  // UI components\n  \"accordion\",\n  \"alert\",\n  \"alert dialog\",\n  \"autocomplete\",\n  \"avatar\",\n  \"badge\",\n  \"breadcrumb\",\n  \"button\",\n  \"calendar\",\n  \"card\",\n  \"checkbox\",\n  \"checkbox group\",\n  \"collapsible\",\n  \"combobox\",\n  \"command\",\n  \"date picker\",\n  \"dialog\",\n  \"drawer\",\n  \"dropdown\",\n  \"empty state\",\n  \"field\",\n  \"fieldset\",\n  \"form\",\n  \"frame\",\n  \"group\",\n  \"input\",\n  \"input group\",\n  \"input otp\",\n  \"kbd\",\n  \"label\",\n  \"menu\",\n  \"meter\",\n  \"number field\",\n  \"pagination\",\n  \"popover\",\n  \"preview card\",\n  \"progress\",\n  \"radio group\",\n  \"scroll area\",\n  \"select\",\n  \"separator\",\n  \"sheet\",\n  \"skeleton\",\n  \"slider\",\n  \"spinner\",\n  \"switch\",\n  \"table\",\n  \"tabs\",\n  \"textarea\",\n  \"toast\",\n  \"toggle\",\n  \"toggle group\",\n  \"toolbar\",\n  \"tooltip\",\n  // Features and states\n  \"async\",\n  \"copy\",\n  \"disabled\",\n  \"error\",\n  \"file\",\n  \"filter\",\n  \"info\",\n  \"loading\",\n  \"multiselect\",\n  \"password\",\n  \"search\",\n  \"sort\",\n  \"success\",\n  \"tag\",\n  \"tanstack\",\n  \"text editor\",\n  \"time\",\n  \"timezone\",\n  \"upload\",\n  \"validation\",\n  \"warning\",\n  \"zod\",\n] as const;\n\nexport type RegistryCategory = (typeof registryCategories)[number];\n\n// Helper function to get category sort order\nexport function getCategorySortOrder(category: string): number {\n  const index = registryCategories.indexOf(category as RegistryCategory);\n  return index === -1 ? Number.POSITIVE_INFINITY : index;\n}\n\n// Helper function to validate if a string is a valid RegistryCategory\nexport function isValidRegistryCategory(\n  category: string,\n): category is RegistryCategory {\n  return registryCategories.includes(category as RegistryCategory);\n}\n"
  },
  {
    "path": "apps/ui/registry/registry-hooks.ts",
    "content": "import type { Registry } from \"shadcn/schema\";\n\nexport const hooks: Registry[\"items\"] = [\n  {\n    files: [\n      {\n        path: \"hooks/use-media-query.ts\",\n        type: \"registry:hook\",\n      },\n    ],\n    name: \"use-media-query\",\n    type: \"registry:hook\",\n  },\n  {\n    files: [\n      {\n        path: \"hooks/use-copy-to-clipboard.ts\",\n        type: \"registry:hook\",\n      },\n    ],\n    name: \"use-copy-to-clipboard\",\n    type: \"registry:hook\",\n  },\n];\n"
  },
  {
    "path": "apps/ui/registry/registry-lib.ts",
    "content": "import type { Registry } from \"shadcn/schema\";\n\nexport const lib: Registry[\"items\"] = [\n  {\n    dependencies: [\"clsx\", \"tailwind-merge\"],\n    files: [\n      {\n        path: \"lib/utils.ts\",\n        type: \"registry:lib\",\n      },\n    ],\n    name: \"utils\",\n    type: \"registry:lib\",\n  },\n];\n"
  },
  {
    "path": "apps/ui/registry/registry-particles.ts",
    "content": "import type { Registry } from \"shadcn/schema\";\nimport type { RegistryCategory } from \"./registry-categories\";\n\n// Type helper to enforce RegistryCategory[] for categories field\ntype ParticleItem = Omit<Registry[\"items\"][number], \"categories\"> & {\n  categories?: RegistryCategory[];\n};\n\n// Helper function to ensure categories are valid RegistryCategory values\nfunction categories<T extends RegistryCategory[]>(...categories: T): T {\n  return categories;\n}\n\nexport const particles: ParticleItem[] = [\n  {\n    categories: categories(\"accordion\"),\n    description: \"Basic accordion\",\n    files: [{ path: \"particles/p-accordion-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\",\n    },\n    name: \"p-accordion-1\",\n    registryDependencies: [\"@coss/accordion\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"accordion\"),\n    description: \"Accordion with one panel open\",\n    files: [{ path: \"particles/p-accordion-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\",\n    },\n    name: \"p-accordion-2\",\n    registryDependencies: [\"@coss/accordion\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"accordion\"),\n    description: \"Accordion allowing multiple panels open\",\n    files: [{ path: \"particles/p-accordion-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\",\n    },\n    name: \"p-accordion-3\",\n    registryDependencies: [\"@coss/accordion\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"accordion\"),\n    description: \"Controlled accordion\",\n    files: [{ path: \"particles/p-accordion-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\",\n    },\n    name: \"p-accordion-4\",\n    registryDependencies: [\"@coss/accordion\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert\"),\n    description: \"Basic alert\",\n    files: [{ path: \"particles/p-alert-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-alert-1\",\n    registryDependencies: [\"@coss/alert\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Alert with icon\",\n    files: [{ path: \"particles/p-alert-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-alert-2\",\n    registryDependencies: [\"@coss/alert\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Alert with icon and action buttons\",\n    files: [{ path: \"particles/p-alert-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-alert-3\",\n    registryDependencies: [\"@coss/alert\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert\", \"info\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Info alert\",\n    files: [{ path: \"particles/p-alert-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-alert-4\",\n    registryDependencies: [\"@coss/alert\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert\", \"success\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Success alert\",\n    files: [{ path: \"particles/p-alert-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-alert-5\",\n    registryDependencies: [\"@coss/alert\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert\", \"warning\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Warning alert\",\n    files: [{ path: \"particles/p-alert-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-alert-6\",\n    registryDependencies: [\"@coss/alert\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert\", \"error\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Error alert\",\n    files: [{ path: \"particles/p-alert-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-alert-7\",\n    registryDependencies: [\"@coss/alert\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert dialog\", \"dialog\"),\n    description: \"Alert dialog\",\n    files: [{ path: \"particles/p-alert-dialog-1.tsx\", type: \"registry:block\" }],\n    name: \"p-alert-dialog-1\",\n    registryDependencies: [\"@coss/alert-dialog\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert dialog\", \"dialog\"),\n    description: \"Alert dialog with bare footer\",\n    files: [{ path: \"particles/p-alert-dialog-2.tsx\", type: \"registry:block\" }],\n    name: \"p-alert-dialog-2\",\n    registryDependencies: [\"@coss/alert-dialog\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Basic autocomplete\",\n    files: [{ path: \"particles/p-autocomplete-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-1\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\", \"disabled\"),\n    description: \"Disabled autocomplete\",\n    files: [{ path: \"particles/p-autocomplete-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-2\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Small autocomplete\",\n    files: [{ path: \"particles/p-autocomplete-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-3\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Large autocomplete\",\n    files: [{ path: \"particles/p-autocomplete-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-4\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Autocomplete with label\",\n    files: [{ path: \"particles/p-autocomplete-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-5\",\n    registryDependencies: [\"@coss/autocomplete\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Autocomplete autofilling the input with the highlighted item\",\n    files: [{ path: \"particles/p-autocomplete-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-6\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Autocomplete auto highlighting the first option\",\n    files: [{ path: \"particles/p-autocomplete-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-7\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Autocomplete with clear button\",\n    files: [{ path: \"particles/p-autocomplete-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-8\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Autocomplete with trigger and clear buttons\",\n    files: [{ path: \"particles/p-autocomplete-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-9\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Autocomplete with grouped items\",\n    files: [\n      { path: \"particles/p-autocomplete-10.tsx\", type: \"registry:block\" },\n    ],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-10\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Autocomplete with limited number of results\",\n    files: [\n      { path: \"particles/p-autocomplete-11.tsx\", type: \"registry:block\" },\n    ],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-11\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\", \"async\"),\n    description: \"Autocomplete with async items loading\",\n    files: [\n      { path: \"particles/p-autocomplete-12.tsx\", type: \"registry:block\" },\n    ],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-12\",\n    registryDependencies: [\"@coss/autocomplete\", \"@coss/spinner\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"form\", \"input\"),\n    description: \"Autocomplete form\",\n    files: [\n      { path: \"particles/p-autocomplete-13.tsx\", type: \"registry:block\" },\n    ],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-13\",\n    registryDependencies: [\n      \"@coss/autocomplete\",\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Autocomplete form\",\n    files: [\n      { path: \"particles/p-autocomplete-14.tsx\", type: \"registry:block\" },\n    ],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-14\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"input\"),\n    description: \"Pill-shaped autocomplete\",\n    files: [\n      { path: \"particles/p-autocomplete-15.tsx\", type: \"registry:block\" },\n    ],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-autocomplete-15\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Avatar with image and fallback\",\n    files: [{ path: \"particles/p-avatar-1.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-1\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Fallback-only avatar\",\n    files: [{ path: \"particles/p-avatar-2.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-2\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Avatars with different sizes\",\n    files: [{ path: \"particles/p-avatar-3.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-3\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Avatars with different radii\",\n    files: [{ path: \"particles/p-avatar-4.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-4\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Overlapping avatar group\",\n    files: [{ path: \"particles/p-avatar-5.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-5\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Avatar with user icon fallback\",\n    files: [{ path: \"particles/p-avatar-6.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-6\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Avatar with emerald status dot\",\n    files: [{ path: \"particles/p-avatar-7.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-7\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Avatar with muted status dot\",\n    files: [{ path: \"particles/p-avatar-8.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-8\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Rounded avatar with top-right emerald status\",\n    files: [{ path: \"particles/p-avatar-9.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-9\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Avatar with notification badge\",\n    files: [{ path: \"particles/p-avatar-10.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-10\",\n    registryDependencies: [\"@coss/avatar\", \"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Rounded avatar with notification badge\",\n    files: [{ path: \"particles/p-avatar-11.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-11\",\n    registryDependencies: [\"@coss/avatar\", \"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Avatar with verified badge\",\n    files: [{ path: \"particles/p-avatar-12.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-12\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Small overlapping avatar group\",\n    files: [{ path: \"particles/p-avatar-13.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-13\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\"),\n    description: \"Large overlapping avatar group\",\n    files: [{ path: \"particles/p-avatar-14.tsx\", type: \"registry:block\" }],\n    name: \"p-avatar-14\",\n    registryDependencies: [\"@coss/avatar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Basic badge\",\n    files: [{ path: \"particles/p-badge-1.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-1\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Outline badge\",\n    files: [{ path: \"particles/p-badge-2.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-2\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Secondary badge\",\n    files: [{ path: \"particles/p-badge-3.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-3\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\", \"error\"),\n    description: \"Destructive badge\",\n    files: [{ path: \"particles/p-badge-4.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-4\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\", \"info\"),\n    description: \"Info badge\",\n    files: [{ path: \"particles/p-badge-5.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-5\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\", \"success\"),\n    description: \"Success badge\",\n    files: [{ path: \"particles/p-badge-6.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-6\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\", \"warning\"),\n    description: \"Warning badge\",\n    files: [{ path: \"particles/p-badge-7.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-7\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\", \"error\"),\n    description: \"Error badge\",\n    files: [{ path: \"particles/p-badge-8.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-8\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Small badge\",\n    files: [{ path: \"particles/p-badge-9.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-9\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Large badge\",\n    files: [{ path: \"particles/p-badge-10.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-10\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Badge with icon\",\n    files: [{ path: \"particles/p-badge-11.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-11\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Badge with link\",\n    files: [{ path: \"particles/p-badge-12.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-12\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Badge with count\",\n    files: [{ path: \"particles/p-badge-13.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-13\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Full rounded badge (pill)\",\n    files: [{ path: \"particles/p-badge-14.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-14\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Badge with number after text\",\n    files: [{ path: \"particles/p-badge-15.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-15\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Status badge - Paid\",\n    files: [{ path: \"particles/p-badge-16.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-16\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Status badge - Pending\",\n    files: [{ path: \"particles/p-badge-17.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-17\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    description: \"Status badge - Failed\",\n    files: [{ path: \"particles/p-badge-18.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-18\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\", \"checkbox\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Selectable badge with checkbox\",\n    files: [{ path: \"particles/p-badge-19.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-19\",\n    registryDependencies: [\"@coss/badge\", \"@coss/checkbox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Removable badge\",\n    files: [{ path: \"particles/p-badge-20.tsx\", type: \"registry:block\" }],\n    name: \"p-badge-20\",\n    registryDependencies: [\"@coss/badge\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"breadcrumb\", \"dropdown\", \"menu\"),\n    description: \"Breadcrumb with menu example\",\n    files: [{ path: \"particles/p-breadcrumb-1.tsx\", type: \"registry:block\" }],\n    name: \"p-breadcrumb-1\",\n    registryDependencies: [\"@coss/breadcrumb\", \"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"breadcrumb\"),\n    description: \"Breadcrumb with custom separator\",\n    files: [{ path: \"particles/p-breadcrumb-2.tsx\", type: \"registry:block\" }],\n    name: \"p-breadcrumb-2\",\n    registryDependencies: [\"@coss/breadcrumb\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"breadcrumb\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Breadcrumb with home icon for home link only\",\n    files: [{ path: \"particles/p-breadcrumb-3.tsx\", type: \"registry:block\" }],\n    name: \"p-breadcrumb-3\",\n    registryDependencies: [\"@coss/breadcrumb\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"breadcrumb\", \"dropdown\", \"menu\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Breadcrumb with folders icon menu\",\n    files: [{ path: \"particles/p-breadcrumb-4.tsx\", type: \"registry:block\" }],\n    name: \"p-breadcrumb-4\",\n    registryDependencies: [\"@coss/breadcrumb\", \"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"breadcrumb\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Breadcrumb with icons before text\",\n    files: [{ path: \"particles/p-breadcrumb-5.tsx\", type: \"registry:block\" }],\n    name: \"p-breadcrumb-5\",\n    registryDependencies: [\"@coss/breadcrumb\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"breadcrumb\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Breadcrumb with dot separators\",\n    files: [{ path: \"particles/p-breadcrumb-6.tsx\", type: \"registry:block\" }],\n    name: \"p-breadcrumb-6\",\n    registryDependencies: [\"@coss/breadcrumb\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"breadcrumb\", \"select\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Breadcrumb with select dropdown\",\n    files: [{ path: \"particles/p-breadcrumb-7.tsx\", type: \"registry:block\" }],\n    name: \"p-breadcrumb-7\",\n    registryDependencies: [\"@coss/breadcrumb\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Default button\",\n    files: [{ path: \"particles/p-button-1.tsx\", type: \"registry:block\" }],\n    name: \"p-button-1\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Outline button\",\n    files: [{ path: \"particles/p-button-2.tsx\", type: \"registry:block\" }],\n    name: \"p-button-2\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Secondary button\",\n    files: [{ path: \"particles/p-button-3.tsx\", type: \"registry:block\" }],\n    name: \"p-button-3\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Destructive button\",\n    files: [{ path: \"particles/p-button-4.tsx\", type: \"registry:block\" }],\n    name: \"p-button-4\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Destructive outline button\",\n    files: [{ path: \"particles/p-button-5.tsx\", type: \"registry:block\" }],\n    name: \"p-button-5\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Ghost button\",\n    files: [{ path: \"particles/p-button-6.tsx\", type: \"registry:block\" }],\n    name: \"p-button-6\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Link button\",\n    files: [{ path: \"particles/p-button-7.tsx\", type: \"registry:block\" }],\n    name: \"p-button-7\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Extra-small button\",\n    files: [{ path: \"particles/p-button-8.tsx\", type: \"registry:block\" }],\n    name: \"p-button-8\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Small button\",\n    files: [{ path: \"particles/p-button-9.tsx\", type: \"registry:block\" }],\n    name: \"p-button-9\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Large button\",\n    files: [{ path: \"particles/p-button-10.tsx\", type: \"registry:block\" }],\n    name: \"p-button-10\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Extra-large button\",\n    files: [{ path: \"particles/p-button-11.tsx\", type: \"registry:block\" }],\n    name: \"p-button-11\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"disabled\"),\n    description: \"Disabled button\",\n    files: [{ path: \"particles/p-button-12.tsx\", type: \"registry:block\" }],\n    name: \"p-button-12\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Icon button\",\n    files: [{ path: \"particles/p-button-13.tsx\", type: \"registry:block\" }],\n    name: \"p-button-13\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Small icon button\",\n    files: [{ path: \"particles/p-button-14.tsx\", type: \"registry:block\" }],\n    name: \"p-button-14\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Large icon button\",\n    files: [{ path: \"particles/p-button-15.tsx\", type: \"registry:block\" }],\n    name: \"p-button-15\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Button with icon\",\n    files: [{ path: \"particles/p-button-16.tsx\", type: \"registry:block\" }],\n    name: \"p-button-16\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Link rendered as button\",\n    files: [{ path: \"particles/p-button-17.tsx\", type: \"registry:block\" }],\n    name: \"p-button-17\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"loading\"),\n    description: \"Button using the built-in loading prop\",\n    files: [{ path: \"particles/p-button-41.tsx\", type: \"registry:block\" }],\n    name: \"p-button-41\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"loading\"),\n    description: \"Custom loading button with manual Spinner\",\n    files: [{ path: \"particles/p-button-18.tsx\", type: \"registry:block\" }],\n    name: \"p-button-18\",\n    registryDependencies: [\"@coss/button\", \"@coss/spinner\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Expandable show more/less toggle button\",\n    files: [{ path: \"particles/p-button-19.tsx\", type: \"registry:block\" }],\n    name: \"p-button-19\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Back link button with chevron\",\n    files: [{ path: \"particles/p-button-20.tsx\", type: \"registry:block\" }],\n    name: \"p-button-20\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Card-style button with heading and description\",\n    files: [\n      {\n        path: \"particles/p-button-21.tsx\",\n        type: \"registry:block\",\n      },\n    ],\n    name: \"p-button-21\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Directional pad control buttons\",\n    files: [{ path: \"particles/p-button-22.tsx\", type: \"registry:block\" }],\n    name: \"p-button-22\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Outline like button with count\",\n    files: [\n      {\n        path: \"particles/p-button-23.tsx\",\n        type: \"registry:block\",\n      },\n    ],\n    name: \"p-button-23\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"@remixicon/react\"],\n    description: \"Social login icon buttons\",\n    files: [\n      {\n        path: \"particles/p-button-24.tsx\",\n        type: \"registry:block\",\n      },\n    ],\n    name: \"p-button-24\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Star button with count badge\",\n    files: [{ path: \"particles/p-button-26.tsx\", type: \"registry:block\" }],\n    name: \"p-button-26\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"group\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Button group with QR code icon and sign in\",\n    files: [{ path: \"particles/p-button-27.tsx\", type: \"registry:block\" }],\n    name: \"p-button-27\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"avatar\"),\n    description: \"Button with avatar\",\n    files: [{ path: \"particles/p-button-28.tsx\", type: \"registry:block\" }],\n    name: \"p-button-28\",\n    registryDependencies: [\"@coss/avatar\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Pill-shaped button with rounded-full styling\",\n    files: [{ path: \"particles/p-button-29.tsx\", type: \"registry:block\" }],\n    name: \"p-button-29\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Button with animated arrow on hover\",\n    files: [{ path: \"particles/p-button-30.tsx\", type: \"registry:block\" }],\n    name: \"p-button-30\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"kbd\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Button with keyboard shortcut indicator\",\n    files: [{ path: \"particles/p-button-31.tsx\", type: \"registry:block\" }],\n    name: \"p-button-31\",\n    registryDependencies: [\"@coss/button\", \"@coss/kbd\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"badge\"),\n    description: \"Button with notification badge\",\n    files: [{ path: \"particles/p-button-32.tsx\", type: \"registry:block\" }],\n    name: \"p-button-32\",\n    registryDependencies: [\"@coss/badge\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Paired buttons (Cancel/Save)\",\n    files: [{ path: \"particles/p-button-33.tsx\", type: \"registry:block\" }],\n    name: \"p-button-33\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Button with animated status dot\",\n    files: [{ path: \"particles/p-button-34.tsx\", type: \"registry:block\" }],\n    name: \"p-button-34\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Icon-only copy button with feedback\",\n    files: [{ path: \"particles/p-button-35.tsx\", type: \"registry:block\" }],\n    name: \"p-button-35\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Copy button with feedback\",\n    files: [{ path: \"particles/p-button-36.tsx\", type: \"registry:block\" }],\n    name: \"p-button-36\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Rotating icon button (FAB-style toggle)\",\n    files: [{ path: \"particles/p-button-37.tsx\", type: \"registry:block\" }],\n    name: \"p-button-37\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    description: \"Hamburger menu button with animated icon\",\n    files: [{ path: \"particles/p-button-39.tsx\", type: \"registry:block\" }],\n    name: \"p-button-39\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"group\", \"tooltip\", \"toast\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Download button with progress and cancel action\",\n    files: [{ path: \"particles/p-button-40.tsx\", type: \"registry:block\" }],\n    name: \"p-button-40\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/group\",\n      \"@coss/spinner\",\n      \"@coss/toast\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\"),\n    dependencies: [\"@remixicon/react\"],\n    description: \"Social login buttons (Google, X, GitHub)\",\n    files: [{ path: \"particles/p-button-38.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-button-38\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    description: \"Basic calendar\",\n    files: [{ path: \"particles/p-calendar-1.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-1\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    description: \"Calendar with date range selection\",\n    files: [{ path: \"particles/p-calendar-3.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-3\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    description: \"Calendar with month/year dropdown navigation\",\n    files: [{ path: \"particles/p-calendar-4.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-4\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"select\"),\n    description: \"Calendar with custom Select dropdown for month/year\",\n    files: [{ path: \"particles/p-calendar-5.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-5\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"combobox\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Calendar with Combobox dropdown for month/year\",\n    files: [{ path: \"particles/p-calendar-6.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-6\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    dependencies: [\"date-fns\"],\n    description: \"Calendar with disabled dates\",\n    files: [{ path: \"particles/p-calendar-7.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-7\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    dependencies: [\"date-fns\"],\n    description: \"Calendar with multiple date selection\",\n    files: [{ path: \"particles/p-calendar-8.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-8\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    description: \"Calendar with custom cell size\",\n    files: [{ path: \"particles/p-calendar-2.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-2\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    description: \"Calendar with rounded day buttons\",\n    files: [{ path: \"particles/p-calendar-9.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-9\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    dependencies: [\"date-fns\"],\n    description: \"Calendar with rounded range selection style\",\n    files: [{ path: \"particles/p-calendar-10.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-10\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    description: \"Calendar with right-aligned navigation\",\n    files: [{ path: \"particles/p-calendar-11.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-11\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    description: \"Calendar with week numbers\",\n    files: [{ path: \"particles/p-calendar-12.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-12\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"combobox\"),\n    description: \"Calendar with year-only combobox dropdown\",\n    files: [{ path: \"particles/p-calendar-13.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-13\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"select\"),\n    description: \"Calendar without arrow navigation (dropdown only)\",\n    files: [{ path: \"particles/p-calendar-14.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-14\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"button\"),\n    dependencies: [\"date-fns\"],\n    description: \"Calendar with current month button\",\n    files: [{ path: \"particles/p-calendar-15.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-15\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"button\"),\n    dependencies: [\"date-fns\"],\n    description: \"Calendar with today button\",\n    files: [{ path: \"particles/p-calendar-16.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-16\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"input\", \"field\"),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Calendar with date input\",\n    files: [{ path: \"particles/p-calendar-17.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-17\",\n    registryDependencies: [\n      \"@coss/calendar\",\n      \"@coss/field\",\n      \"@coss/input-group\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"input\", \"field\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Calendar with time input\",\n    files: [{ path: \"particles/p-calendar-18.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-18\",\n    registryDependencies: [\n      \"@coss/calendar\",\n      \"@coss/field\",\n      \"@coss/input-group\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"toggle\", \"toggle group\", \"scroll area\"),\n    dependencies: [\"date-fns\"],\n    description: \"Calendar with time slots (appointment picker)\",\n    files: [{ path: \"particles/p-calendar-19.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-19\",\n    registryDependencies: [\n      \"@coss/calendar\",\n      \"@coss/scroll-area\",\n      \"@coss/toggle\",\n      \"@coss/toggle-group\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"button\"),\n    dependencies: [\"date-fns\"],\n    description: \"Calendar with date presets\",\n    files: [{ path: \"particles/p-calendar-20.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-20\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\", \"button\"),\n    dependencies: [\"date-fns\"],\n    description: \"Range calendar with date presets\",\n    files: [{ path: \"particles/p-calendar-21.tsx\", type: \"registry:block\" }],\n    name: \"p-calendar-21\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    dependencies: [\"date-fns\"],\n    description: \"Two months calendar\",\n    files: [{ path: \"particles/p-calendar-22.tsx\", type: \"registry:block\" }],\n    meta: {\n      colSpan: 2,\n    },\n    name: \"p-calendar-22\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    dependencies: [\"date-fns\"],\n    description: \"Three months calendar\",\n    files: [{ path: \"particles/p-calendar-23.tsx\", type: \"registry:block\" }],\n    meta: {\n      colSpan: 2,\n    },\n    name: \"p-calendar-23\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"calendar\"),\n    dependencies: [\"date-fns\"],\n    description: \"Pricing calendar with custom day buttons\",\n    files: [{ path: \"particles/p-calendar-24.tsx\", type: \"registry:block\" }],\n    meta: {\n      colSpan: 2,\n    },\n    name: \"p-calendar-24\",\n    registryDependencies: [\"@coss/calendar\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"date picker\", \"calendar\", \"popover\", \"button\"),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Basic date picker\",\n    files: [{ path: \"particles/p-date-picker-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-1\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/popover\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"date picker\", \"calendar\", \"popover\", \"button\"),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Date range picker\",\n    files: [{ path: \"particles/p-date-picker-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-2\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/popover\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"date picker\", \"calendar\", \"popover\", \"button\"),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Two months calendar with range date\",\n    files: [{ path: \"particles/p-date-picker-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-9\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/popover\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"date picker\",\n      \"calendar\",\n      \"popover\",\n      \"button\",\n      \"field\",\n      \"combobox\",\n    ),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Date picker with field and dropdown navigation\",\n    files: [{ path: \"particles/p-date-picker-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-3\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/calendar\",\n      \"@coss/combobox\",\n      \"@coss/field\",\n      \"@coss/popover\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"date picker\", \"calendar\", \"popover\", \"button\"),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Date picker with presets\",\n    files: [{ path: \"particles/p-date-picker-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-4\",\n    registryDependencies: [\"@coss/button\", \"@coss/calendar\", \"@coss/popover\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"date picker\",\n      \"calendar\",\n      \"popover\",\n      \"button\",\n      \"input\",\n    ),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Date picker with input\",\n    files: [{ path: \"particles/p-date-picker-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-5\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/calendar\",\n      \"@coss/input-group\",\n      \"@coss/popover\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"date picker\", \"calendar\", \"popover\", \"button\"),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Date picker that closes on select\",\n    files: [{ path: \"particles/p-date-picker-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-6\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/popover\", \"@coss/button\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"date picker\",\n      \"calendar\",\n      \"popover\",\n      \"button\",\n      \"badge\",\n    ),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Multiple dates picker\",\n    files: [{ path: \"particles/p-date-picker-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-7\",\n    registryDependencies: [\n      \"@coss/badge\",\n      \"@coss/button\",\n      \"@coss/calendar\",\n      \"@coss/popover\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"date picker\", \"calendar\", \"popover\", \"button\"),\n    dependencies: [\"date-fns\", \"lucide-react\"],\n    description: \"Date picker with select-like trigger\",\n    files: [{ path: \"particles/p-date-picker-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-date-picker-8\",\n    registryDependencies: [\"@coss/calendar\", \"@coss/popover\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\"),\n    dependencies: [\"lucide-react\"],\n    description: \"A basic card with header and footer\",\n    files: [{ path: \"particles/p-card-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-1\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\"),\n    description: \"Authentication card with actions\",\n    files: [{ path: \"particles/p-card-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-2\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Authentication card with separators\",\n    files: [{ path: \"particles/p-card-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-3\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Framed card with footer\",\n    files: [{ path: \"particles/p-card-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-4\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\"),\n    description: \"Framed card with header\",\n    files: [{ path: \"particles/p-card-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-5\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Framed card with header and footer\",\n    files: [{ path: \"particles/p-card-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-6\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Framed card with no rounded bottom\",\n    files: [{ path: \"particles/p-card-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-7\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\", \"frame\"),\n    description: \"Card within a frame and footer\",\n    files: [{ path: \"particles/p-card-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-8\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/frame\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\", \"frame\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Card within a frame and footer\",\n    files: [{ path: \"particles/p-card-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-9\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/frame\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"form\", \"frame\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Card within a frame with header and footer\",\n    files: [{ path: \"particles/p-card-10.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-10\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/card\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/frame\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"card\", \"frame\"),\n    dependencies: [\"lucide-react\"],\n    description: \"CardFrame with header action\",\n    files: [{ path: \"particles/p-card-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-card-11\",\n    registryDependencies: [\"@coss/button\", \"@coss/card\", \"@coss/empty\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\"),\n    description: \"Basic checkbox\",\n    files: [{ path: \"particles/p-checkbox-1.tsx\", type: \"registry:block\" }],\n    name: \"p-checkbox-1\",\n    registryDependencies: [\"@coss/checkbox\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"disabled\"),\n    description: \"Disabled checkbox\",\n    files: [{ path: \"particles/p-checkbox-2.tsx\", type: \"registry:block\" }],\n    name: \"p-checkbox-2\",\n    registryDependencies: [\"@coss/checkbox\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\"),\n    description: \"Checkbox with description\",\n    files: [{ path: \"particles/p-checkbox-3.tsx\", type: \"registry:block\" }],\n    name: \"p-checkbox-3\",\n    registryDependencies: [\"@coss/checkbox\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\"),\n    description: \"Card-style checkbox\",\n    files: [{ path: \"particles/p-checkbox-4.tsx\", type: \"registry:block\" }],\n    name: \"p-checkbox-4\",\n    registryDependencies: [\"@coss/checkbox\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"form\"),\n    description: \"Checkbox form\",\n    files: [{ path: \"particles/p-checkbox-5.tsx\", type: \"registry:block\" }],\n    name: \"p-checkbox-5\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/checkbox\",\n      \"@coss/field\",\n      \"@coss/form\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"checkbox group\"),\n    description: \"Basic checkbox group\",\n    files: [\n      { path: \"particles/p-checkbox-group-1.tsx\", type: \"registry:block\" },\n    ],\n    name: \"p-checkbox-group-1\",\n    registryDependencies: [\n      \"@coss/checkbox\",\n      \"@coss/checkbox-group\",\n      \"@coss/label\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"checkbox group\", \"disabled\"),\n    description: \"Checkbox group with disabled items\",\n    files: [\n      { path: \"particles/p-checkbox-group-2.tsx\", type: \"registry:block\" },\n    ],\n    name: \"p-checkbox-group-2\",\n    registryDependencies: [\n      \"@coss/checkbox\",\n      \"@coss/checkbox-group\",\n      \"@coss/label\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"checkbox group\"),\n    description: \"Checkbox group with parent checkbox\",\n    files: [\n      { path: \"particles/p-checkbox-group-3.tsx\", type: \"registry:block\" },\n    ],\n    name: \"p-checkbox-group-3\",\n    registryDependencies: [\n      \"@coss/checkbox\",\n      \"@coss/checkbox-group\",\n      \"@coss/label\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"checkbox group\"),\n    description: \"Nested checkbox group with parent\",\n    files: [\n      { path: \"particles/p-checkbox-group-4.tsx\", type: \"registry:block\" },\n    ],\n    name: \"p-checkbox-group-4\",\n    registryDependencies: [\n      \"@coss/checkbox\",\n      \"@coss/checkbox-group\",\n      \"@coss/label\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"checkbox group\", \"form\"),\n    description: \"Checkbox group form\",\n    files: [\n      { path: \"particles/p-checkbox-group-5.tsx\", type: \"registry:block\" },\n    ],\n    name: \"p-checkbox-group-5\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/checkbox\",\n      \"@coss/checkbox-group\",\n      \"@coss/field\",\n      \"@coss/fieldset\",\n      \"@coss/form\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"collapsible\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Basic collapsible\",\n    files: [{ path: \"particles/p-collapsible-1.tsx\", type: \"registry:block\" }],\n    name: \"p-collapsible-1\",\n    registryDependencies: [\"@coss/collapsible\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Basic combobox\",\n    files: [{ path: \"particles/p-combobox-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-1\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\", \"disabled\"),\n    description: \"Disabled combobox\",\n    files: [{ path: \"particles/p-combobox-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-2\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Small combobox\",\n    files: [{ path: \"particles/p-combobox-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-3\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Large combobox\",\n    files: [{ path: \"particles/p-combobox-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-4\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Combobox with label\",\n    files: [{ path: \"particles/p-combobox-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-5\",\n    registryDependencies: [\"@coss/combobox\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Combobox auto highlighting the first option\",\n    files: [{ path: \"particles/p-combobox-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-6\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Combobox with clear button\",\n    files: [{ path: \"particles/p-combobox-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-7\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Combobox with grouped items\",\n    files: [{ path: \"particles/p-combobox-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-8\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Combobox with multiple selection\",\n    files: [{ path: \"particles/p-combobox-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-9\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Combobox with input inside popup\",\n    files: [{ path: \"particles/p-combobox-10.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-10\",\n    registryDependencies: [\"@coss/button\", \"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"form\", \"input\"),\n    description: \"Combobox form\",\n    files: [{ path: \"particles/p-combobox-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-11\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/combobox\",\n      \"@coss/field\",\n      \"@coss/form\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"form\", \"input\"),\n    description: \"Combobox multiple form\",\n    files: [{ path: \"particles/p-combobox-12.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-12\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/combobox\",\n      \"@coss/field\",\n      \"@coss/form\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Combobox with start addon\",\n    files: [{ path: \"particles/p-combobox-13.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-13\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Combobox multiple with start addon\",\n    files: [{ path: \"particles/p-combobox-14.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-14\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\"),\n    description: \"Pill-shaped combobox\",\n    files: [{ path: \"particles/p-combobox-15.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-15\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\", \"timezone\"),\n    description: \"Timezone combobox\",\n    files: [{ path: \"particles/p-combobox-16.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-16\",\n    registryDependencies: [\"@coss/combobox\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"input\", \"timezone\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Timezone combobox with search input\",\n    files: [{ path: \"particles/p-combobox-17.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-17\",\n    registryDependencies: [\"@coss/combobox\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"select\"),\n    description: \"Combobox with select trigger\",\n    files: [{ path: \"particles/p-combobox-18.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-combobox-18\",\n    registryDependencies: [\"@coss/combobox\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"command\", \"dialog\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Command palette with dialog\",\n    files: [{ path: \"particles/p-command-1.tsx\", type: \"registry:block\" }],\n    name: \"p-command-1\",\n    registryDependencies: [\"@coss/button\", \"@coss/command\", \"@coss/kbd\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"command\", \"dialog\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Command palette with AI assistant\",\n    files: [{ path: \"particles/p-command-2.tsx\", type: \"registry:block\" }],\n    name: \"p-command-2\",\n    registryDependencies: [\n      \"@coss/autocomplete\",\n      \"@coss/button\",\n      \"@coss/command\",\n      \"@coss/empty\",\n      \"@coss/input\",\n      \"@coss/kbd\",\n      \"@coss/scroll-area\",\n      \"@coss/skeleton\",\n      \"@coss/spinner\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dialog\"),\n    description: \"Dialog with form\",\n    files: [{ path: \"particles/p-dialog-1.tsx\", type: \"registry:block\" }],\n    name: \"p-dialog-1\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/dialog\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dialog\"),\n    description: \"Dialog with bare footer\",\n    files: [{ path: \"particles/p-dialog-6.tsx\", type: \"registry:block\" }],\n    name: \"p-dialog-6\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/dialog\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dialog\", \"dropdown\", \"menu\"),\n    description: \"Dialog opened from menu\",\n    files: [{ path: \"particles/p-dialog-2.tsx\", type: \"registry:block\" }],\n    name: \"p-dialog-2\",\n    registryDependencies: [\"@coss/button\", \"@coss/dialog\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dialog\"),\n    description: \"Nested dialogs\",\n    files: [{ path: \"particles/p-dialog-3.tsx\", type: \"registry:block\" }],\n    name: \"p-dialog-3\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/dialog\",\n      \"@coss/field\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"alert dialog\", \"dialog\"),\n    description: \"Dialog with close confirmation\",\n    files: [{ path: \"particles/p-dialog-4.tsx\", type: \"registry:block\" }],\n    name: \"p-dialog-4\",\n    registryDependencies: [\n      \"@coss/alert-dialog\",\n      \"@coss/button\",\n      \"@coss/dialog\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/textarea\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dialog\"),\n    description: \"Dialog with long content\",\n    files: [{ path: \"particles/p-dialog-5.tsx\", type: \"registry:block\" }],\n    name: \"p-dialog-5\",\n    registryDependencies: [\"@coss/button\", \"@coss/dialog\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Simple bottom drawer with close button\",\n    files: [{ path: \"particles/p-drawer-1.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-1\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Bottom drawer without drag bar\",\n    files: [{ path: \"particles/p-drawer-2.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-2\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Drawer with close button\",\n    files: [{ path: \"particles/p-drawer-3.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-3\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Inset variant drawers for all four positions\",\n    files: [{ path: \"particles/p-drawer-4.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-4\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Straight variant drawers for all four positions\",\n    files: [{ path: \"particles/p-drawer-5.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-5\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Scrollable content with terms and conditions\",\n    files: [{ path: \"particles/p-drawer-6.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-6\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Nested bottom drawers with centered content\",\n    files: [{ path: \"particles/p-drawer-7.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-7\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Nested right drawers with inset variant\",\n    files: [{ path: \"particles/p-drawer-8.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-8\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/drawer\",\n      \"@coss/field\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Bottom drawer with snap points\",\n    files: [{ path: \"particles/p-drawer-9.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-9\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Edit profile form with default and bare footer variants\",\n    files: [{ path: \"particles/p-drawer-10.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-10\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/drawer\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Mobile menu drawer from the left\",\n    files: [{ path: \"particles/p-drawer-11.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-11\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\", \"dialog\"),\n    description: \"Responsive edit profile: dialog on desktop, drawer on mobile\",\n    files: [{ path: \"particles/p-drawer-12.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-12\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/dialog\",\n      \"@coss/drawer\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/use-media-query\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\", \"menu\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Responsive actions menu: menu on desktop, drawer on mobile\",\n    files: [{ path: \"particles/p-drawer-13.tsx\", type: \"registry:block\" }],\n    name: \"p-drawer-13\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/drawer\",\n      \"@coss/menu\",\n      \"@coss/use-media-query\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"drawer\"),\n    description: \"Left drawer with swipe area\",\n    files: [{ path: \"particles/p-drawer-14.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md\",\n    },\n    name: \"p-drawer-14\",\n    registryDependencies: [\"@coss/button\", \"@coss/drawer\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"empty state\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Empty state with icon and actions\",\n    files: [{ path: \"particles/p-empty-1.tsx\", type: \"registry:block\" }],\n    name: \"p-empty-1\",\n    registryDependencies: [\"@coss/button\", \"@coss/empty\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"input\", \"label\"),\n    description: \"Field with description\",\n    files: [{ path: \"particles/p-field-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-1\",\n    registryDependencies: [\"@coss/field\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"input\", \"label\"),\n    description: \"Field with required indicator\",\n    files: [{ path: \"particles/p-field-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-2\",\n    registryDependencies: [\"@coss/field\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"disabled\", \"field\", \"input\", \"label\"),\n    description: \"Field in disabled state\",\n    files: [{ path: \"particles/p-field-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-3\",\n    registryDependencies: [\"@coss/field\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"error\", \"field\", \"input\", \"label\"),\n    description: \"Field showing validation error\",\n    files: [{ path: \"particles/p-field-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-4\",\n    registryDependencies: [\"@coss/field\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"input\"),\n    description: \"Show field validity state\",\n    files: [{ path: \"particles/p-field-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-5\",\n    registryDependencies: [\"@coss/field\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"field\", \"input\", \"input group\"),\n    description: \"Input group with field\",\n    files: [{ path: \"particles/p-field-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-6\",\n    registryDependencies: [\"@coss/button\", \"@coss/field\", \"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"autocomplete\", \"field\", \"input\", \"label\"),\n    description: \"Field with autocomplete\",\n    files: [{ path: \"particles/p-field-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-7\",\n    registryDependencies: [\"@coss/autocomplete\", \"@coss/field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"field\", \"input\", \"label\"),\n    description: \"Field with combobox\",\n    files: [{ path: \"particles/p-field-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-8\",\n    registryDependencies: [\"@coss/combobox\", \"@coss/field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"combobox\", \"field\", \"input\", \"label\"),\n    description: \"Field with multiple selection combobox\",\n    files: [{ path: \"particles/p-field-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-9\",\n    registryDependencies: [\"@coss/combobox\", \"@coss/field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"label\", \"textarea\"),\n    description: \"Field with textarea\",\n    files: [{ path: \"particles/p-field-10.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-10\",\n    registryDependencies: [\"@coss/field\", \"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"label\", \"select\"),\n    description: \"Field with select\",\n    files: [{ path: \"particles/p-field-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-11\",\n    registryDependencies: [\"@coss/field\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"field\", \"label\"),\n    description: \"Field with checkbox\",\n    files: [{ path: \"particles/p-field-12.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-12\",\n    registryDependencies: [\"@coss/checkbox\", \"@coss/field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"checkbox\",\n      \"checkbox group\",\n      \"field\",\n      \"fieldset\",\n      \"label\",\n    ),\n    description: \"Field with checkbox group\",\n    files: [{ path: \"particles/p-field-13.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-13\",\n    registryDependencies: [\n      \"@coss/checkbox\",\n      \"@coss/checkbox-group\",\n      \"@coss/field\",\n      \"@coss/fieldset\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"fieldset\", \"label\", \"radio group\"),\n    description: \"Field with radio group\",\n    files: [{ path: \"particles/p-field-14.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-14\",\n    registryDependencies: [\n      \"@coss/field\",\n      \"@coss/fieldset\",\n      \"@coss/radio-group\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"label\", \"switch\"),\n    description: \"Field with toggle switch\",\n    files: [{ path: \"particles/p-field-15.tsx\", type: \"registry:block\" }],\n    name: \"p-field-15\",\n    registryDependencies: [\"@coss/field\", \"@coss/switch\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"label\", \"slider\"),\n    description: \"Field with slider\",\n    files: [{ path: \"particles/p-field-16.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-16\",\n    registryDependencies: [\"@coss/field\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"input\", \"label\", \"number field\"),\n    description: \"Field with number field\",\n    files: [{ path: \"particles/p-field-17.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-17\",\n    registryDependencies: [\"@coss/field\", \"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"button\",\n      \"checkbox\",\n      \"field\",\n      \"form\",\n      \"input\",\n      \"label\",\n      \"select\",\n    ),\n    description: \"Complete form built with field\",\n    files: [{ path: \"particles/p-field-18.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-field-18\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/checkbox\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"fieldset\", \"input\"),\n    description: \"Fieldset with multiple fields\",\n    files: [{ path: \"particles/p-fieldset-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-fieldset-1\",\n    registryDependencies: [\"@coss/field\", \"@coss/fieldset\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"field\", \"form\", \"input\"),\n    description: \"Input in a form\",\n    files: [{ path: \"particles/p-form-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-form-1\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"button\",\n      \"field\",\n      \"form\",\n      \"label\",\n      \"validation\",\n      \"zod\",\n    ),\n    dependencies: [\"zod\"],\n    description: \"Form with zod validation\",\n    files: [{ path: \"particles/p-form-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-form-2\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"frame\"),\n    description: \"Basic frame\",\n    files: [{ path: \"particles/p-frame-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-frame-1\",\n    registryDependencies: [\"@coss/frame\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"frame\"),\n    description: \"Frame with multiple separated panels\",\n    files: [{ path: \"particles/p-frame-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-frame-3\",\n    registryDependencies: [\"@coss/frame\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"frame\"),\n    description: \"Frame with multiple stacked panels\",\n    files: [{ path: \"particles/p-frame-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-frame-4\",\n    registryDependencies: [\"@coss/frame\", \"@coss/separator\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"collapsible\", \"frame\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Frame with collapsible content and delete button\",\n    files: [{ path: \"particles/p-frame-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-frame-2\",\n    registryDependencies: [\"@coss/button\", \"@coss/collapsible\", \"@coss/frame\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"kbd\"),\n    description: \"Keyboard shortcuts display\",\n    files: [{ path: \"particles/p-kbd-1.tsx\", type: \"registry:block\" }],\n    name: \"p-kbd-1\",\n    registryDependencies: [\"@coss/kbd\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\"),\n    description: \"Basic group\",\n    files: [{ path: \"particles/p-group-1.tsx\", type: \"registry:block\" }],\n    name: \"p-group-1\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\", \"input\"),\n    description: \"Group with input\",\n    files: [{ path: \"particles/p-group-2.tsx\", type: \"registry:block\" }],\n    name: \"p-group-2\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/group\",\n      \"@coss/input\",\n      \"@coss/tooltip\",\n      \"@coss/use-copy-to-clipboard\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\"),\n    description: \"Small group\",\n    files: [{ path: \"particles/p-group-3.tsx\", type: \"registry:block\" }],\n    name: \"p-group-3\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\"),\n    description: \"Large group\",\n    files: [{ path: \"particles/p-group-4.tsx\", type: \"registry:block\" }],\n    name: \"p-group-4\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"group\"),\n    description: \"Group with disabled button\",\n    files: [{ path: \"particles/p-group-5.tsx\", type: \"registry:block\" }],\n    name: \"p-group-5\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"group\"),\n    description: \"Group with default button\",\n    files: [{ path: \"particles/p-group-6.tsx\", type: \"registry:block\" }],\n    name: \"p-group-6\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\"),\n    description: \"Group with start text\",\n    files: [{ path: \"particles/p-group-7.tsx\", type: \"registry:block\" }],\n    name: \"p-group-7\",\n    registryDependencies: [\"@coss/group\", \"@coss/input\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\"),\n    description: \"Group with end text\",\n    files: [{ path: \"particles/p-group-8.tsx\", type: \"registry:block\" }],\n    name: \"p-group-8\",\n    registryDependencies: [\"@coss/group\", \"@coss/input\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\"),\n    description: \"Vertical group\",\n    files: [{ path: \"particles/p-group-9.tsx\", type: \"registry:block\" }],\n    name: \"p-group-9\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\"),\n    description: \"Nested groups\",\n    files: [{ path: \"particles/p-group-10.tsx\", type: \"registry:block\" }],\n    name: \"p-group-10\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\"),\n    description: \"Group with popup\",\n    files: [{ path: \"particles/p-group-11.tsx\", type: \"registry:block\" }],\n    name: \"p-group-11\",\n    registryDependencies: [\n      \"@coss/badge\",\n      \"@coss/button\",\n      \"@coss/group\",\n      \"@coss/popover\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\", \"input group\"),\n    description: \"Group with input group\",\n    files: [{ path: \"particles/p-group-12.tsx\", type: \"registry:block\" }],\n    name: \"p-group-12\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/group\",\n      \"@coss/input-group\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"group\", \"menu\"),\n    description: \"Group with menu\",\n    files: [{ path: \"particles/p-group-13.tsx\", type: \"registry:block\" }],\n    name: \"p-group-13\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\", \"select\"),\n    description: \"Group with select\",\n    files: [{ path: \"particles/p-group-14.tsx\", type: \"registry:block\" }],\n    name: \"p-group-14\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/group\",\n      \"@coss/number-field\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\", \"search\"),\n    description: \"Group with search\",\n    files: [{ path: \"particles/p-group-15.tsx\", type: \"registry:block\" }],\n    name: \"p-group-15\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/group\",\n      \"@coss/input\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"group\", \"input\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Group with add button and input\",\n    files: [{ path: \"particles/p-group-16.tsx\", type: \"registry:block\" }],\n    name: \"p-group-16\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\", \"input\"),\n    description: \"Group with input and currency text\",\n    files: [{ path: \"particles/p-group-17.tsx\", type: \"registry:block\" }],\n    name: \"p-group-17\",\n    registryDependencies: [\"@coss/group\", \"@coss/input\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\", \"input\", \"select\"),\n    description: \"Group with select and input\",\n    files: [{ path: \"particles/p-group-18.tsx\", type: \"registry:block\" }],\n    name: \"p-group-18\",\n    registryDependencies: [\"@coss/group\", \"@coss/input\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\", \"input\", \"select\"),\n    description: \"Group with input and select\",\n    files: [{ path: \"particles/p-group-19.tsx\", type: \"registry:block\" }],\n    name: \"p-group-19\",\n    registryDependencies: [\"@coss/group\", \"@coss/input\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"group\", \"input\"),\n    description: \"Group with input and text button\",\n    files: [{ path: \"particles/p-group-20.tsx\", type: \"registry:block\" }],\n    name: \"p-group-20\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"group\", \"label\", \"number field\"),\n    description: \"Group with two number inputs for range\",\n    files: [{ path: \"particles/p-group-22.tsx\", type: \"registry:block\" }],\n    name: \"p-group-22\",\n    registryDependencies: [\"@coss/group\", \"@coss/label\", \"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\", \"badge\", \"button\", \"combobox\", \"group\"),\n    description:\n      \"Group with filter label, combobox multi-select, and remove button\",\n    files: [{ path: \"particles/p-group-23.tsx\", type: \"registry:block\" }],\n    name: \"p-group-23\",\n    registryDependencies: [\n      \"@coss/avatar\",\n      \"@coss/badge\",\n      \"@coss/button\",\n      \"@coss/combobox\",\n      \"@coss/group\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\"),\n    description: \"Basic input\",\n    files: [{ path: \"particles/p-input-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-1\",\n    registryDependencies: [\"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\"),\n    description: \"Small input\",\n    files: [{ path: \"particles/p-input-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-2\",\n    registryDependencies: [\"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\"),\n    description: \"Large input\",\n    files: [{ path: \"particles/p-input-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-3\",\n    registryDependencies: [\"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\"),\n    description: \"Disabled input\",\n    files: [{ path: \"particles/p-input-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-4\",\n    registryDependencies: [\"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\"),\n    description: \"File input\",\n    files: [{ path: \"particles/p-input-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-5\",\n    registryDependencies: [\"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\", \"label\"),\n    description: \"Input with label\",\n    files: [{ path: \"particles/p-input-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-6\",\n    registryDependencies: [\"@coss/input\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"group\", \"input\"),\n    description: \"Input with button using Group\",\n    files: [{ path: \"particles/p-input-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-7\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input\", \"input group\", \"popover\"),\n    description: \"Input with start text and end tooltip\",\n    files: [{ path: \"particles/p-input-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-8\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/popover\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input\", \"input group\", \"tooltip\"),\n    description: \"Password input with toggle visibility\",\n    files: [{ path: \"particles/p-input-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-9\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input\", \"input group\", \"popover\"),\n    description: \"Input group mimicking a URL bar\",\n    files: [{ path: \"particles/p-input-10.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-10\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/popover\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\", \"input group\", \"kbd\", \"search\"),\n    description: \"Input group with keyboard shortcut\",\n    files: [{ path: \"particles/p-input-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-11\",\n    registryDependencies: [\"@coss/input-group\", \"@coss/kbd\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\", \"input group\", \"spinner\", \"loading\"),\n    description: \"Input group with start loading spinner\",\n    files: [{ path: \"particles/p-input-12.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-12\",\n    registryDependencies: [\"@coss/input-group\", \"@coss/spinner\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\", \"label\"),\n    description: \"Input with label and required indicator\",\n    files: [{ path: \"particles/p-input-13.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-13\",\n    registryDependencies: [\"@coss/input\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\", \"label\"),\n    description: \"Input with optional label\",\n    files: [{ path: \"particles/p-input-14.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-14\",\n    registryDependencies: [\"@coss/input\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\"),\n    description: \"Input with custom border and background\",\n    files: [{ path: \"particles/p-input-15.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-15\",\n    registryDependencies: [\"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\", \"input group\", \"spinner\", \"loading\"),\n    description: \"Input group with end loading spinner\",\n    files: [{ path: \"particles/p-input-16.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-16\",\n    registryDependencies: [\"@coss/input-group\", \"@coss/spinner\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\"),\n    description: \"Read-only input\",\n    files: [{ path: \"particles/p-input-17.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-17\",\n    registryDependencies: [\"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input otp\", \"input\"),\n    description: \"Basic OTP input\",\n    files: [{ path: \"particles/p-input-otp-1.tsx\", type: \"registry:block\" }],\n    name: \"p-input-otp-1\",\n    registryDependencies: [\"@coss/input-otp\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input otp\", \"input\"),\n    description: \"Large OTP input\",\n    files: [{ path: \"particles/p-input-otp-2.tsx\", type: \"registry:block\" }],\n    name: \"p-input-otp-2\",\n    registryDependencies: [\"@coss/input-otp\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input otp\", \"input\"),\n    description: \"OTP input with separator\",\n    files: [{ path: \"particles/p-input-otp-3.tsx\", type: \"registry:block\" }],\n    name: \"p-input-otp-3\",\n    registryDependencies: [\"@coss/input-otp\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input otp\", \"input\", \"label\"),\n    description: \"OTP input with label\",\n    files: [{ path: \"particles/p-input-otp-4.tsx\", type: \"registry:block\" }],\n    name: \"p-input-otp-4\",\n    registryDependencies: [\"@coss/input-otp\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input otp\", \"input\"),\n    description: \"Digits-only OTP input\",\n    files: [{ path: \"particles/p-input-otp-5.tsx\", type: \"registry:block\" }],\n    name: \"p-input-otp-5\",\n    registryDependencies: [\"@coss/input-otp\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input otp\", \"input\", \"validation\"),\n    description: \"Invalid OTP input\",\n    files: [{ path: \"particles/p-input-otp-6.tsx\", type: \"registry:block\" }],\n    name: \"p-input-otp-6\",\n    registryDependencies: [\"@coss/input-otp\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input otp\", \"input\", \"validation\"),\n    description: \"OTP input with auto validation\",\n    files: [{ path: \"particles/p-input-otp-7.tsx\", type: \"registry:block\" }],\n    name: \"p-input-otp-7\",\n    registryDependencies: [\"@coss/input-otp\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\"),\n    description: \"Basic input group\",\n    files: [{ path: \"particles/p-input-group-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-1\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Input group with end icon\",\n    files: [{ path: \"particles/p-input-group-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-2\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\"),\n    description: \"Input group with start text\",\n    files: [{ path: \"particles/p-input-group-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-3\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\"),\n    description: \"Input group with end text\",\n    files: [{ path: \"particles/p-input-group-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-4\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\"),\n    description: \"Input group with start and end text\",\n    files: [{ path: \"particles/p-input-group-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-5\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\", \"number field\"),\n    description: \"Input group with number field\",\n    files: [{ path: \"particles/p-input-group-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-6\",\n    registryDependencies: [\"@coss/input-group\", \"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\", \"tooltip\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Input group with end tooltip\",\n    files: [{ path: \"particles/p-input-group-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-7\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/popover\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input group\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Input group with icon button\",\n    files: [{ path: \"particles/p-input-group-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-8\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/tooltip\",\n      \"@coss/use-copy-to-clipboard\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input group\"),\n    description: \"Input group with button\",\n    files: [{ path: \"particles/p-input-group-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-9\",\n    registryDependencies: [\"@coss/button\", \"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\", \"input group\"),\n    description: \"Input group with badge\",\n    files: [{ path: \"particles/p-input-group-10.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-10\",\n    registryDependencies: [\"@coss/badge\", \"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\", \"kbd\"),\n    description: \"Input group with keyboard shortcut\",\n    files: [{ path: \"particles/p-input-group-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-11\",\n    registryDependencies: [\"@coss/input-group\", \"@coss/kbd\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\", \"label\"),\n    description: \"Input group with inner label\",\n    files: [{ path: \"particles/p-input-group-12.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-12\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/label\",\n      \"@coss/popover\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\"),\n    description: \"Small input group\",\n    files: [{ path: \"particles/p-input-group-13.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-13\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\"),\n    description: \"Large input group\",\n    files: [{ path: \"particles/p-input-group-14.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-14\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\"),\n    description: \"Disabled input group\",\n    files: [{ path: \"particles/p-input-group-15.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-15\",\n    registryDependencies: [\"@coss/button\", \"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\", \"spinner\"),\n    description: \"Input group with loading spinner\",\n    files: [{ path: \"particles/p-input-group-16.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-16\",\n    registryDependencies: [\"@coss/input-group\", \"@coss/spinner\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input group\", \"textarea\"),\n    description: \"Input group with textarea\",\n    files: [{ path: \"particles/p-input-group-17.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\",\n    },\n    name: \"p-input-group-17\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/menu\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"badge\", \"dropdown\", \"input group\", \"menu\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Input group with badge and menu\",\n    files: [{ path: \"particles/p-input-group-18.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-18\",\n    registryDependencies: [\n      \"@coss/badge\",\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/menu\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input group\", \"textarea\", \"toggle\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Mini editor built with input group and toggle\",\n    files: [{ path: \"particles/p-input-group-19.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\",\n    },\n    name: \"p-input-group-19\",\n    registryDependencies: [\"@coss/button\", \"@coss/input-group\", \"@coss/toggle\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\", \"input group\", \"search\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Input group with search icon\",\n    files: [{ path: \"particles/p-input-group-20.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-20\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input\", \"input group\", \"tooltip\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Input group with start tooltip\",\n    files: [{ path: \"particles/p-input-group-21.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-21\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input\", \"input group\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Input group with clear button\",\n    files: [{ path: \"particles/p-input-group-22.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-22\",\n    registryDependencies: [\"@coss/button\", \"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"button\",\n      \"input\",\n      \"input group\",\n      \"search\",\n      \"tooltip\",\n    ),\n    dependencies: [\"lucide-react\"],\n    description: \"Search input group with loader and voice button\",\n    files: [{ path: \"particles/p-input-group-23.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-23\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\", \"input group\"),\n    description: \"Input group with character counter\",\n    files: [{ path: \"particles/p-input-group-24.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-24\",\n    registryDependencies: [\"@coss/input-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"input\"),\n    description: \"Input with characters remaining counter\",\n    files: [{ path: \"particles/p-input-18.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-18\",\n    registryDependencies: [\"@coss/field\", \"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"input\"),\n    description: \"Pill-shaped input\",\n    files: [{ path: \"particles/p-input-19.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-19\",\n    registryDependencies: [\"@coss/input\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input\", \"input group\", \"label\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Password input with strength indicator\",\n    files: [{ path: \"particles/p-input-group-26.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-input-group-26\",\n    registryDependencies: [\"@coss/button\", \"@coss/input-group\", \"@coss/label\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"button\",\n      \"input group\",\n      \"select\",\n      \"textarea\",\n      \"tooltip\",\n    ),\n    dependencies: [\"lucide-react\"],\n    description: \"Code snippet input with language selector\",\n    files: [{ path: \"particles/p-input-group-27.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\",\n    },\n    name: \"p-input-group-27\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/select\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input group\", \"textarea\", \"tooltip\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Message composer with attachment buttons\",\n    files: [{ path: \"particles/p-input-group-28.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\",\n    },\n    name: \"p-input-group-28\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"input group\", \"textarea\", \"tooltip\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Chat input with voice and send buttons\",\n    files: [{ path: \"particles/p-input-group-29.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\",\n    },\n    name: \"p-input-group-29\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"meter\"),\n    description: \"Basic meter\",\n    files: [{ path: \"particles/p-meter-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-meter-1\",\n    registryDependencies: [\"@coss/meter\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"meter\"),\n    description: \"Simple meter\",\n    files: [{ path: \"particles/p-meter-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-meter-2\",\n    registryDependencies: [\"@coss/meter\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"meter\"),\n    description: \"Meter with formatted value\",\n    files: [{ path: \"particles/p-meter-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-meter-3\",\n    registryDependencies: [\"@coss/meter\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"meter\"),\n    description: \"Meter with range\",\n    files: [{ path: \"particles/p-meter-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-meter-4\",\n    registryDependencies: [\"@coss/meter\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\"),\n    description: \"Basic menu\",\n    files: [{ path: \"particles/p-menu-1.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-1\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\"),\n    description: \"Menu with hover\",\n    files: [{ path: \"particles/p-menu-2.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-2\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\"),\n    description: \"Menu with checkbox\",\n    files: [{ path: \"particles/p-menu-3.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-3\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\", \"switch\"),\n    description: \"Menu with checkbox items as switches\",\n    files: [{ path: \"particles/p-menu-9.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-9\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\"),\n    description: \"Menu with radio group\",\n    files: [{ path: \"particles/p-menu-4.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-4\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\"),\n    description: \"Menu with link\",\n    files: [{ path: \"particles/p-menu-5.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-5\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\"),\n    description: \"Menu with group labels\",\n    files: [{ path: \"particles/p-menu-6.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-6\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\"),\n    description: \"Nested menu\",\n    files: [{ path: \"particles/p-menu-7.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-7\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"dropdown\", \"menu\"),\n    description: \"Menu close on click\",\n    files: [{ path: \"particles/p-menu-8.tsx\", type: \"registry:block\" }],\n    name: \"p-menu-8\",\n    registryDependencies: [\"@coss/button\", \"@coss/menu\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Basic number field\",\n    files: [{ path: \"particles/p-number-field-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-1\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Small number field\",\n    files: [{ path: \"particles/p-number-field-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-2\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Large number field\",\n    files: [{ path: \"particles/p-number-field-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-3\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Disabled number field\",\n    files: [{ path: \"particles/p-number-field-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-4\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Number field with label\",\n    files: [{ path: \"particles/p-number-field-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-5\",\n    registryDependencies: [\"@coss/label\", \"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Number field with scrub\",\n    files: [{ path: \"particles/p-number-field-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-6\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Number field with range\",\n    files: [{ path: \"particles/p-number-field-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-7\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Number field with formatted value\",\n    files: [{ path: \"particles/p-number-field-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-8\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Number field with step\",\n    files: [{ path: \"particles/p-number-field-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-9\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\", \"form\", \"field\", \"zod\"),\n    dependencies: [\"zod\"],\n    description: \"Number field in form\",\n    files: [\n      { path: \"particles/p-number-field-10.tsx\", type: \"registry:block\" },\n    ],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-10\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/number-field\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"number field\", \"input\"),\n    description: \"Pill-shaped number field\",\n    files: [\n      { path: \"particles/p-number-field-11.tsx\", type: \"registry:block\" },\n    ],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-number-field-11\",\n    registryDependencies: [\"@coss/number-field\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"pagination\"),\n    description: \"Pagination example\",\n    files: [{ path: \"particles/p-pagination-1.tsx\", type: \"registry:block\" }],\n    name: \"p-pagination-1\",\n    registryDependencies: [\"@coss/pagination\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"pagination\"),\n    description: \"Pagination with previous and next buttons only\",\n    files: [{ path: \"particles/p-pagination-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-pagination-2\",\n    registryDependencies: [\"@coss/button\", \"@coss/pagination\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"pagination\", \"select\"),\n    description: \"Pagination with select, and previous and next buttons\",\n    files: [{ path: \"particles/p-pagination-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className: \"**:data-[slot=preview]:w-full\",\n    },\n    name: \"p-pagination-3\",\n    registryDependencies: [\"@coss/button\", \"@coss/pagination\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"field\", \"form\", \"popover\", \"textarea\"),\n    description: \"Popover with a form\",\n    files: [{ path: \"particles/p-popover-1.tsx\", type: \"registry:block\" }],\n    name: \"p-popover-1\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/popover\",\n      \"@coss/textarea\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"popover\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Popover with close button\",\n    files: [{ path: \"particles/p-popover-2.tsx\", type: \"registry:block\" }],\n    name: \"p-popover-2\",\n    registryDependencies: [\"@coss/button\", \"@coss/popover\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"avatar\", \"button\", \"popover\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Animated popovers\",\n    files: [{ path: \"particles/p-popover-3.tsx\", type: \"registry:block\" }],\n    name: \"p-popover-3\",\n    registryDependencies: [\"@coss/avatar\", \"@coss/button\", \"@coss/popover\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"preview card\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Preview card with popup\",\n    files: [{ path: \"particles/p-preview-card-1.tsx\", type: \"registry:block\" }],\n    name: \"p-preview-card-1\",\n    registryDependencies: [\"@coss/button\", \"@coss/preview-card\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"progress\"),\n    description: \"Basic progress bar\",\n    files: [{ path: \"particles/p-progress-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-progress-1\",\n    registryDependencies: [\"@coss/progress\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"progress\"),\n    description: \"Progress with label and value\",\n    files: [{ path: \"particles/p-progress-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-progress-2\",\n    registryDependencies: [\"@coss/progress\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"progress\"),\n    description: \"Progress with formatted value\",\n    files: [{ path: \"particles/p-progress-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-progress-3\",\n    registryDependencies: [\"@coss/progress\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"radio group\"),\n    description: \"Basic radio group\",\n    files: [{ path: \"particles/p-radio-group-1.tsx\", type: \"registry:block\" }],\n    name: \"p-radio-group-1\",\n    registryDependencies: [\"@coss/label\", \"@coss/radio-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"radio group\"),\n    description: \"Disabled radio group\",\n    files: [{ path: \"particles/p-radio-group-2.tsx\", type: \"registry:block\" }],\n    name: \"p-radio-group-2\",\n    registryDependencies: [\"@coss/label\", \"@coss/radio-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"radio group\"),\n    description: \"Radio group with description\",\n    files: [{ path: \"particles/p-radio-group-3.tsx\", type: \"registry:block\" }],\n    name: \"p-radio-group-3\",\n    registryDependencies: [\"@coss/label\", \"@coss/radio-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"radio group\"),\n    description: \"Radio group card\",\n    files: [{ path: \"particles/p-radio-group-4.tsx\", type: \"registry:block\" }],\n    name: \"p-radio-group-4\",\n    registryDependencies: [\"@coss/label\", \"@coss/radio-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"radio group\", \"form\"),\n    description: \"Radio group in form\",\n    files: [{ path: \"particles/p-radio-group-5.tsx\", type: \"registry:block\" }],\n    name: \"p-radio-group-5\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/fieldset\",\n      \"@coss/form\",\n      \"@coss/radio-group\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"scroll area\"),\n    description: \"Basic scroll area\",\n    files: [{ path: \"particles/p-scroll-area-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-scroll-area-1\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"scroll area\"),\n    description: \"Horizontal scroll area\",\n    files: [{ path: \"particles/p-scroll-area-2.tsx\", type: \"registry:block\" }],\n    name: \"p-scroll-area-2\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"scroll area\"),\n    description: \"Scroll area with both directions\",\n    files: [{ path: \"particles/p-scroll-area-3.tsx\", type: \"registry:block\" }],\n    name: \"p-scroll-area-3\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"scroll area\"),\n    description: \"Scroll area with fading edges\",\n    files: [{ path: \"particles/p-scroll-area-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-scroll-area-4\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"scroll area\"),\n    description: \"Horizontal scroll area with scrollbar gutter\",\n    files: [{ path: \"particles/p-scroll-area-5.tsx\", type: \"registry:block\" }],\n    name: \"p-scroll-area-5\",\n    registryDependencies: [\"@coss/scroll-area\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Basic select\",\n    files: [{ path: \"particles/p-select-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-1\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Small select\",\n    files: [{ path: \"particles/p-select-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-2\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Large select\",\n    files: [{ path: \"particles/p-select-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-3\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Disabled select\",\n    files: [{ path: \"particles/p-select-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-4\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select without item alignment\",\n    files: [{ path: \"particles/p-select-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-5\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select with groups\",\n    files: [{ path: \"particles/p-select-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-6\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Multiple select\",\n    files: [{ path: \"particles/p-select-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-7\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Select with icon\",\n    files: [{ path: \"particles/p-select-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-8\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Select options with icon\",\n    files: [{ path: \"particles/p-select-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-9\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select with object values\",\n    files: [{ path: \"particles/p-select-10.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-10\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\", \"disabled\"),\n    description: \"Select with disabled items\",\n    files: [{ path: \"particles/p-select-12.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-12\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\", \"time\", \"timezone\"),\n    description: \"Timezone select\",\n    files: [{ path: \"particles/p-select-13.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-13\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Status select with colored dot\",\n    files: [{ path: \"particles/p-select-14.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-14\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Pill-shaped select trigger\",\n    files: [{ path: \"particles/p-select-15.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-15\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select with left text label\",\n    files: [{ path: \"particles/p-select-16.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-16\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select with country flags\",\n    files: [{ path: \"particles/p-select-17.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-17\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select with description in options only\",\n    files: [{ path: \"particles/p-select-18.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-18\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\", \"avatar\"),\n    description: \"Select with avatars\",\n    files: [{ path: \"particles/p-select-19.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-19\",\n    registryDependencies: [\"@coss/avatar\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\", \"avatar\"),\n    description: \"Rich select with avatars and usernames\",\n    files: [{ path: \"particles/p-select-20.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-20\",\n    registryDependencies: [\"@coss/avatar\", \"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Auto width select\",\n    files: [{ path: \"particles/p-select-21.tsx\", type: \"registry:block\" }],\n    name: \"p-select-21\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select with custom border and background\",\n    files: [{ path: \"particles/p-select-22.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-22\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select with label\",\n    files: [{ path: \"particles/p-select-23.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-23\",\n    registryDependencies: [\"@coss/select\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"select\"),\n    description: \"Select in form\",\n    files: [{ path: \"particles/p-select-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-select-11\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/select\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"separator\"),\n    description: \"Separator with horizontal and vertical orientations\",\n    files: [{ path: \"particles/p-separator-1.tsx\", type: \"registry:block\" }],\n    name: \"p-separator-1\",\n    registryDependencies: [\"@coss/separator\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"sheet\"),\n    description: \"Basic sheet\",\n    files: [{ path: \"particles/p-sheet-1.tsx\", type: \"registry:block\" }],\n    name: \"p-sheet-1\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/sheet\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"sheet\"),\n    description: \"Sheet inset\",\n    files: [{ path: \"particles/p-sheet-2.tsx\", type: \"registry:block\" }],\n    name: \"p-sheet-2\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/input\",\n      \"@coss/sheet\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"sheet\"),\n    description: \"Sheet position\",\n    files: [{ path: \"particles/p-sheet-3.tsx\", type: \"registry:block\" }],\n    name: \"p-sheet-3\",\n    registryDependencies: [\"@coss/button\", \"@coss/sheet\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"skeleton\"),\n    description: \"Basic skeleton\",\n    files: [{ path: \"particles/p-skeleton-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-skeleton-1\",\n    registryDependencies: [\"@coss/avatar\", \"@coss/button\", \"@coss/skeleton\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"skeleton\"),\n    description: \"Skeleton only\",\n    files: [{ path: \"particles/p-skeleton-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\",\n    },\n    name: \"p-skeleton-2\",\n    registryDependencies: [\"@coss/skeleton\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Basic slider\",\n    files: [{ path: \"particles/p-slider-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-1\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Slider with label and value\",\n    files: [{ path: \"particles/p-slider-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-2\",\n    registryDependencies: [\"@coss/field\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\", \"disabled\"),\n    description: \"Disabled slider\",\n    files: [{ path: \"particles/p-slider-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-3\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Slider with reference labels\",\n    files: [{ path: \"particles/p-slider-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-4\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Slider with ticks\",\n    files: [{ path: \"particles/p-slider-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-5\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Slider with labels above\",\n    files: [{ path: \"particles/p-slider-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-6\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Range slider\",\n    files: [{ path: \"particles/p-slider-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-7\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Slider with 3 thumbs\",\n    files: [{ path: \"particles/p-slider-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-8\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Range slider with collision behavior none\",\n    files: [{ path: \"particles/p-slider-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-9\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Range slider with collision behavior swap\",\n    files: [{ path: \"particles/p-slider-10.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-10\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Slider with icons\",\n    files: [{ path: \"particles/p-slider-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-11\",\n    registryDependencies: [\"@coss/field\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\", \"number field\"),\n    description: \"Slider with input\",\n    files: [{ path: \"particles/p-slider-12.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-12\",\n    registryDependencies: [\"@coss/number-field\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\", \"number field\"),\n    description: \"Range slider with inputs\",\n    files: [{ path: \"particles/p-slider-13.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-13\",\n    registryDependencies: [\"@coss/number-field\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\", \"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Slider with increment and decrement buttons\",\n    files: [{ path: \"particles/p-slider-14.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-14\",\n    registryDependencies: [\"@coss/button\", \"@coss/field\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Price range slider\",\n    files: [{ path: \"particles/p-slider-15.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-15\",\n    registryDependencies: [\"@coss/fieldset\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Emoji rating slider\",\n    files: [{ path: \"particles/p-slider-16.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-16\",\n    registryDependencies: [\"@coss/field\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Vertical slider\",\n    files: [{ path: \"particles/p-slider-17.tsx\", type: \"registry:block\" }],\n    name: \"p-slider-17\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Vertical range slider\",\n    files: [{ path: \"particles/p-slider-18.tsx\", type: \"registry:block\" }],\n    name: \"p-slider-18\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\", \"number field\"),\n    description: \"Vertical slider with input\",\n    files: [{ path: \"particles/p-slider-19.tsx\", type: \"registry:block\" }],\n    name: \"p-slider-19\",\n    registryDependencies: [\"@coss/number-field\", \"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\"),\n    description: \"Equalizer with vertical sliders\",\n    files: [{ path: \"particles/p-slider-20.tsx\", type: \"registry:block\" }],\n    name: \"p-slider-20\",\n    registryDependencies: [\"@coss/slider\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\", \"number field\", \"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Object position sliders with reset\",\n    files: [{ path: \"particles/p-slider-21.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-21\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/fieldset\",\n      \"@coss/label\",\n      \"@coss/number-field\",\n      \"@coss/slider\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"slider\",\n      \"number field\",\n      \"input group\",\n      \"button\",\n      \"filter\",\n    ),\n    description: \"Price slider with histogram\",\n    files: [{ path: \"particles/p-slider-22.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-22\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input-group\",\n      \"@coss/number-field\",\n      \"@coss/slider\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"slider\", \"form\"),\n    description: \"Slider in form\",\n    files: [{ path: \"particles/p-slider-23.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-slider-23\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/fieldset\",\n      \"@coss/form\",\n      \"@coss/slider\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"spinner\"),\n    description: \"Basic spinner\",\n    files: [{ path: \"particles/p-spinner-1.tsx\", type: \"registry:block\" }],\n    name: \"p-spinner-1\",\n    registryDependencies: [\"@coss/spinner\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"switch\"),\n    description: \"Basic switch\",\n    files: [{ path: \"particles/p-switch-1.tsx\", type: \"registry:block\" }],\n    name: \"p-switch-1\",\n    registryDependencies: [\"@coss/label\", \"@coss/switch\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"switch\"),\n    description: \"Disabled switch\",\n    files: [{ path: \"particles/p-switch-2.tsx\", type: \"registry:block\" }],\n    name: \"p-switch-2\",\n    registryDependencies: [\"@coss/label\", \"@coss/switch\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"switch\"),\n    description: \"Switch with description\",\n    files: [{ path: \"particles/p-switch-3.tsx\", type: \"registry:block\" }],\n    name: \"p-switch-3\",\n    registryDependencies: [\"@coss/label\", \"@coss/switch\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"switch\"),\n    description: \"Switch card\",\n    files: [{ path: \"particles/p-switch-4.tsx\", type: \"registry:block\" }],\n    name: \"p-switch-4\",\n    registryDependencies: [\"@coss/label\", \"@coss/switch\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"switch\"),\n    description: \"Switch in form\",\n    files: [{ path: \"particles/p-switch-5.tsx\", type: \"registry:block\" }],\n    name: \"p-switch-5\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/switch\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"switch\"),\n    description: \"Custom size switch\",\n    files: [{ path: \"particles/p-switch-6.tsx\", type: \"registry:block\" }],\n    name: \"p-switch-6\",\n    registryDependencies: [\"@coss/switch\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"table\"),\n    description: \"Basic table\",\n    files: [{ path: \"particles/p-table-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n      colSpan: 2,\n    },\n    name: \"p-table-1\",\n    registryDependencies: [\"@coss/badge\", \"@coss/table\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"frame\", \"table\"),\n    description: \"Framed table\",\n    files: [{ path: \"particles/p-table-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n      colSpan: 2,\n    },\n    name: \"p-table-2\",\n    registryDependencies: [\"@coss/badge\", \"@coss/frame\", \"@coss/table\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"checkbox\", \"table\", \"tanstack\"),\n    dependencies: [\"@tanstack/react-table\"],\n    description: \"Table with TanStack Table and checkboxes\",\n    files: [{ path: \"particles/p-table-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n      colSpan: 2,\n    },\n    name: \"p-table-3\",\n    registryDependencies: [\n      \"@coss/badge\",\n      \"@coss/checkbox\",\n      \"@coss/frame\",\n      \"@coss/table\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\n      \"checkbox\",\n      \"pagination\",\n      \"select\",\n      \"table\",\n      \"tanstack\",\n    ),\n    dependencies: [\"@tanstack/react-table\", \"lucide-react\"],\n    description: \"Table with TanStack Table, sorting, and pagination\",\n    files: [{ path: \"particles/p-table-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n      colSpan: 2,\n    },\n    name: \"p-table-4\",\n    registryDependencies: [\n      \"@coss/badge\",\n      \"@coss/button\",\n      \"@coss/checkbox\",\n      \"@coss/frame\",\n      \"@coss/pagination\",\n      \"@coss/select\",\n      \"@coss/table\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    description: \"Basic tabs\",\n    files: [{ path: \"particles/p-tabs-1.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-1\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    description: \"Tabs with underline\",\n    files: [{ path: \"particles/p-tabs-2.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-2\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    description: \"Vertical tabs\",\n    files: [{ path: \"particles/p-tabs-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\",\n    },\n    name: \"p-tabs-3\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    description: \"Vertical tabs with underline\",\n    files: [{ path: \"particles/p-tabs-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\",\n    },\n    name: \"p-tabs-4\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    description: \"Tabs with full rounded triggers\",\n    files: [{ path: \"particles/p-tabs-5.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-5\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Tabs with icon before name\",\n    files: [{ path: \"particles/p-tabs-6.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-6\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Tabs with icon before name and underline\",\n    files: [{ path: \"particles/p-tabs-7.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-7\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Tabs with icon only\",\n    files: [{ path: \"particles/p-tabs-8.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-8\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Tabs with underline and icon on top\",\n    files: [{ path: \"particles/p-tabs-9.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-9\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\", \"badge\"),\n    description: \"Tabs with count badge\",\n    files: [{ path: \"particles/p-tabs-10.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-10\",\n    registryDependencies: [\"@coss/badge\", \"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Vertical tabs with underline and icon before name\",\n    files: [{ path: \"particles/p-tabs-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\",\n    },\n    name: \"p-tabs-11\",\n    registryDependencies: [\"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\", \"badge\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Tabs with icon only and count badge\",\n    files: [{ path: \"particles/p-tabs-12.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-12\",\n    registryDependencies: [\"@coss/badge\", \"@coss/tabs\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tabs\", \"tooltip\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Tabs with icon only and grouped tooltips\",\n    files: [{ path: \"particles/p-tabs-13.tsx\", type: \"registry:block\" }],\n    name: \"p-tabs-13\",\n    registryDependencies: [\"@coss/tabs\", \"@coss/tooltip\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Basic textarea\",\n    files: [{ path: \"particles/p-textarea-1.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-1\",\n    registryDependencies: [\"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Small textarea\",\n    files: [{ path: \"particles/p-textarea-2.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-2\",\n    registryDependencies: [\"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Large textarea\",\n    files: [{ path: \"particles/p-textarea-3.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-3\",\n    registryDependencies: [\"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Disabled textarea\",\n    files: [{ path: \"particles/p-textarea-4.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-4\",\n    registryDependencies: [\"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Textarea with label\",\n    files: [{ path: \"particles/p-textarea-5.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-5\",\n    registryDependencies: [\"@coss/label\", \"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Textarea in form\",\n    files: [{ path: \"particles/p-textarea-6.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-6\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/field\",\n      \"@coss/form\",\n      \"@coss/textarea\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"label\", \"textarea\"),\n    description: \"Textarea with label and required indicator\",\n    files: [{ path: \"particles/p-textarea-7.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-7\",\n    registryDependencies: [\"@coss/label\", \"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"label\", \"textarea\"),\n    description: \"Textarea with optional label\",\n    files: [{ path: \"particles/p-textarea-8.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-8\",\n    registryDependencies: [\"@coss/label\", \"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Textarea with custom border and background\",\n    files: [{ path: \"particles/p-textarea-9.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-9\",\n    registryDependencies: [\"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Read-only textarea\",\n    files: [{ path: \"particles/p-textarea-10.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-10\",\n    registryDependencies: [\"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"textarea\"),\n    description: \"Textarea with characters remaining counter\",\n    files: [{ path: \"particles/p-textarea-11.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-11\",\n    registryDependencies: [\"@coss/field\", \"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"field\", \"label\", \"textarea\"),\n    description: \"Textarea field with required indicator\",\n    files: [{ path: \"particles/p-textarea-12.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-12\",\n    registryDependencies: [\"@coss/field\", \"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"textarea\"),\n    description: \"Shorter textarea with fixed height\",\n    files: [{ path: \"particles/p-textarea-13.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-13\",\n    registryDependencies: [\"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"textarea\"),\n    description: \"Textarea with button aligned right\",\n    files: [{ path: \"particles/p-textarea-14.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-14\",\n    registryDependencies: [\"@coss/button\", \"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"button\", \"textarea\"),\n    description: \"Textarea with button aligned left\",\n    files: [{ path: \"particles/p-textarea-15.tsx\", type: \"registry:block\" }],\n    meta: {\n      className:\n        \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\",\n    },\n    name: \"p-textarea-15\",\n    registryDependencies: [\"@coss/button\", \"@coss/textarea\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\"),\n    description: \"Basic toast\",\n    files: [{ path: \"particles/p-toast-1.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-1\",\n    registryDependencies: [\"@coss/button\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\"),\n    description: \"Toast with status\",\n    files: [{ path: \"particles/p-toast-2.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-2\",\n    registryDependencies: [\"@coss/button\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\"),\n    description: \"Loading toast\",\n    files: [{ path: \"particles/p-toast-3.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-3\",\n    registryDependencies: [\"@coss/button\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\"),\n    description: \"Toast with action\",\n    files: [{ path: \"particles/p-toast-4.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-4\",\n    registryDependencies: [\"@coss/button\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\"),\n    description: \"Promise toast\",\n    files: [{ path: \"particles/p-toast-5.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-5\",\n    registryDependencies: [\"@coss/button\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\"),\n    description: \"Toast with varying heights\",\n    files: [{ path: \"particles/p-toast-6.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-6\",\n    registryDependencies: [\"@coss/button\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\"),\n    description: \"Anchored toast with tooltip style\",\n    files: [{ path: \"particles/p-toast-7.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-7\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/toast\",\n      \"@coss/tooltip\",\n      \"@coss/use-copy-to-clipboard\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\"),\n    description: \"Anchored toast\",\n    files: [{ path: \"particles/p-toast-8.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-8\",\n    registryDependencies: [\"@coss/button\", \"@coss/spinner\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toast\", \"button\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Promise toast with cancel action\",\n    files: [{ path: \"particles/p-toast-9.tsx\", type: \"registry:block\" }],\n    name: \"p-toast-9\",\n    registryDependencies: [\"@coss/button\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Basic toggle group\",\n    files: [{ path: \"particles/p-toggle-group-1.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-1\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Small toggle group\",\n    files: [{ path: \"particles/p-toggle-group-2.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-2\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Large toggle group\",\n    files: [{ path: \"particles/p-toggle-group-3.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-3\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Toggle group with outline\",\n    files: [{ path: \"particles/p-toggle-group-4.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-4\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Vertical toggle group with outline\",\n    files: [{ path: \"particles/p-toggle-group-5.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-5\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Disabled toggle group\",\n    files: [{ path: \"particles/p-toggle-group-6.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-6\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Toggle group with disabled item\",\n    files: [{ path: \"particles/p-toggle-group-7.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-7\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Multiple selection toggle group\",\n    files: [{ path: \"particles/p-toggle-group-8.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-8\",\n    registryDependencies: [\"@coss/toggle-group\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"toggle group\"),\n    description: \"Toggle group with tooltips\",\n    files: [{ path: \"particles/p-toggle-group-9.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-group-9\",\n    registryDependencies: [\"@coss/toggle-group\", \"@coss/tooltip\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\"),\n    description: \"Basic toggle\",\n    files: [{ path: \"particles/p-toggle-1.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-1\",\n    registryDependencies: [\"@coss/toggle\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\"),\n    description: \"Toggle with outline\",\n    files: [{ path: \"particles/p-toggle-2.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-2\",\n    registryDependencies: [\"@coss/toggle\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Toggle with icon\",\n    files: [{ path: \"particles/p-toggle-3.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-3\",\n    registryDependencies: [\"@coss/toggle\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\"),\n    description: \"Small toggle\",\n    files: [{ path: \"particles/p-toggle-4.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-4\",\n    registryDependencies: [\"@coss/toggle\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\"),\n    description: \"Large toggle\",\n    files: [{ path: \"particles/p-toggle-5.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-5\",\n    registryDependencies: [\"@coss/toggle\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\"),\n    description: \"Disabled toggle\",\n    files: [{ path: \"particles/p-toggle-6.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-6\",\n    registryDependencies: [\"@coss/toggle\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Toggle icon group\",\n    files: [{ path: \"particles/p-toggle-7.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-7\",\n    registryDependencies: [\"@coss/toggle\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toggle\", \"tooltip\", \"toast\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Bookmark toggle with tooltip and success toast\",\n    files: [{ path: \"particles/p-toggle-8.tsx\", type: \"registry:block\" }],\n    name: \"p-toggle-8\",\n    registryDependencies: [\"@coss/toggle\", \"@coss/tooltip\", \"@coss/toast\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"toolbar\"),\n    dependencies: [\"lucide-react\"],\n    description: \"Toolbar with toggles, buttons, and select\",\n    files: [{ path: \"particles/p-toolbar-1.tsx\", type: \"registry:block\" }],\n    name: \"p-toolbar-1\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/select\",\n      \"@coss/toggle-group\",\n      \"@coss/toolbar\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tooltip\"),\n    description: \"Basic tooltip\",\n    files: [{ path: \"particles/p-tooltip-1.tsx\", type: \"registry:block\" }],\n    name: \"p-tooltip-1\",\n    registryDependencies: [\"@coss/button\", \"@coss/tooltip\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tooltip\"),\n    description: \"Grouped tooltips\",\n    files: [{ path: \"particles/p-tooltip-2.tsx\", type: \"registry:block\" }],\n    name: \"p-tooltip-2\",\n    registryDependencies: [\"@coss/toggle-group\", \"@coss/tooltip\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tooltip\"),\n    description: \"Toggle group animated tooltip\",\n    files: [{ path: \"particles/p-tooltip-3.tsx\", type: \"registry:block\" }],\n    name: \"p-tooltip-3\",\n    registryDependencies: [\"@coss/toggle-group\", \"@coss/tooltip\"],\n    type: \"registry:block\",\n  },\n  {\n    categories: categories(\"tooltip\"),\n    description: \"Vertical group with animated tooltip\",\n    files: [{ path: \"particles/p-tooltip-4.tsx\", type: \"registry:block\" }],\n    name: \"p-tooltip-4\",\n    registryDependencies: [\"@coss/button\", \"@coss/group\", \"@coss/tooltip\"],\n    type: \"registry:block\",\n  },\n];\n"
  },
  {
    "path": "apps/ui/registry/registry-styles.ts",
    "content": "import type { Registry } from \"shadcn/schema\";\n\nconst colorsNeutralLight = {\n  accent: \"--alpha(var(--color-black) / 4%)\",\n  \"accent-foreground\": \"var(--color-neutral-800)\",\n  background: \"var(--color-white)\",\n  border: \"--alpha(var(--color-black) / 8%)\",\n  card: \"var(--color-white)\",\n  \"card-foreground\": \"var(--color-neutral-800)\",\n  destructive: \"var(--color-red-500)\",\n  \"destructive-foreground\": \"var(--color-red-700)\",\n  foreground: \"var(--color-neutral-800)\",\n  info: \"var(--color-blue-500)\",\n  \"info-foreground\": \"var(--color-blue-700)\",\n  input: \"--alpha(var(--color-black) / 10%)\",\n  muted: \"--alpha(var(--color-black) / 4%)\",\n  \"muted-foreground\":\n    \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black))\",\n  popover: \"var(--color-white)\",\n  \"popover-foreground\": \"var(--color-neutral-800)\",\n  primary: \"var(--color-neutral-800)\",\n  \"primary-foreground\": \"var(--color-neutral-50)\",\n  ring: \"var(--color-neutral-400)\",\n  secondary: \"--alpha(var(--color-black) / 4%)\",\n  \"secondary-foreground\": \"var(--color-neutral-800)\",\n  success: \"var(--color-emerald-500)\",\n  \"success-foreground\": \"var(--color-emerald-700)\",\n  warning: \"var(--color-amber-500)\",\n  \"warning-foreground\": \"var(--color-amber-700)\",\n} as const;\n\nconst colorsNeutralDark = {\n  accent: \"--alpha(var(--color-white) / 4%)\",\n  \"accent-foreground\": \"var(--color-neutral-100)\",\n  background:\n    \"color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white))\",\n  border: \"--alpha(var(--color-white) / 6%)\",\n  card: \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n  \"card-foreground\": \"var(--color-neutral-100)\",\n  destructive:\n    \"color-mix(in srgb, var(--color-red-500) 90%, var(--color-white))\",\n  \"destructive-foreground\": \"var(--color-red-400)\",\n  foreground: \"var(--color-neutral-100)\",\n  info: \"var(--color-blue-500)\",\n  \"info-foreground\": \"var(--color-blue-400)\",\n  input: \"--alpha(var(--color-white) / 8%)\",\n  muted: \"--alpha(var(--color-white) / 4%)\",\n  \"muted-foreground\":\n    \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white))\",\n  popover: \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n  \"popover-foreground\": \"var(--color-neutral-100)\",\n  primary: \"var(--color-neutral-100)\",\n  \"primary-foreground\": \"var(--color-neutral-800)\",\n  ring: \"var(--color-neutral-500)\",\n  secondary: \"--alpha(var(--color-white) / 4%)\",\n  \"secondary-foreground\": \"var(--color-neutral-100)\",\n  success: \"var(--color-emerald-500)\",\n  \"success-foreground\": \"var(--color-emerald-400)\",\n  warning: \"var(--color-amber-500)\",\n  \"warning-foreground\": \"var(--color-amber-400)\",\n} as const;\n\nexport const styles: Registry[\"items\"] = [\n  {\n    css: {\n      \"@layer base\": {\n        \"*\": {\n          \"@apply border-border outline-ring/50\": {},\n        },\n        body: {\n          \"@apply bg-background text-foreground\": {},\n        },\n        \"code, kbd, samp, pre\": {\n          \"font-family\": \"var(--font-mono)\",\n        },\n      },\n    },\n    cssVars: {\n      dark: {\n        ...colorsNeutralDark,\n        \"chart-1\": \"var(--color-blue-700)\",\n        \"chart-2\": \"var(--color-emerald-500)\",\n        \"chart-3\": \"var(--color-amber-500)\",\n        \"chart-4\": \"var(--color-purple-500)\",\n        \"chart-5\": \"var(--color-rose-500)\",\n        code: \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n        \"code-foreground\": \"var(--foreground)\",\n        \"code-highlight\": \"--alpha(var(--color-white) / 4%)\",\n        sidebar:\n          \"color-mix(in srgb, var(--color-neutral-950) 97%, var(--color-white))\",\n        \"sidebar-accent\": \"--alpha(var(--color-white) / 4%)\",\n        \"sidebar-accent-foreground\": \"var(--color-neutral-100)\",\n        \"sidebar-border\": \"--alpha(var(--color-white) / 5%)\",\n        \"sidebar-foreground\":\n          \"color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar))\",\n        \"sidebar-primary\": \"var(--color-neutral-100)\",\n        \"sidebar-primary-foreground\": \"var(--color-neutral-800)\",\n        \"sidebar-ring\": \"var(--color-neutral-400)\",\n      },\n      light: {\n        ...colorsNeutralLight,\n        \"chart-1\": \"var(--color-orange-600)\",\n        \"chart-2\": \"var(--color-teal-600)\",\n        \"chart-3\": \"var(--color-cyan-900)\",\n        \"chart-4\": \"var(--color-amber-400)\",\n        \"chart-5\": \"var(--color-amber-500)\",\n        code: \"var(--color-white)\",\n        \"code-foreground\": \"var(--foreground)\",\n        \"code-highlight\": \"--alpha(var(--color-black) / 4%)\",\n        radius: \"0.625rem\",\n        sidebar: \"var(--color-neutral-50)\",\n        \"sidebar-accent\": \"--alpha(var(--color-black) / 4%)\",\n        \"sidebar-accent-foreground\": \"var(--color-neutral-800)\",\n        \"sidebar-border\": \"--alpha(var(--color-black) / 6%)\",\n        \"sidebar-foreground\":\n          \"color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar))\",\n        \"sidebar-primary\": \"var(--color-neutral-800)\",\n        \"sidebar-primary-foreground\": \"var(--color-neutral-50)\",\n        \"sidebar-ring\": \"var(--color-neutral-400)\",\n      },\n      theme: {\n        \"font-heading\":\n          \"var(--font-heading, ui-sans-serif, system-ui, sans-serif)\",\n        \"font-mono\": \"var(--font-mono, ui-monospace, monospace)\",\n        \"font-sans\": \"var(--font-sans, ui-sans-serif, system-ui, sans-serif)\",\n      },\n    },\n    dependencies: [\n      \"@base-ui/react\",\n      \"class-variance-authority\",\n      \"lucide-react\",\n    ],\n    description:\n      \"Complete coss theme: colors, sidebar, fonts, and base styles. Use with `npx shadcn init @coss/style` for full project setup.\",\n    devDependencies: [\"tw-animate-css\"],\n    extends: \"none\",\n    name: \"style\",\n    registryDependencies: [\"utils\", \"@coss/ui\"],\n    type: \"registry:style\",\n  },\n  {\n    cssVars: {\n      dark: colorsNeutralDark,\n      light: colorsNeutralLight,\n    },\n    name: \"colors-neutral\",\n    type: \"registry:style\",\n  },\n];\n"
  },
  {
    "path": "apps/ui/registry/registry-ui.ts",
    "content": "import type { Registry } from \"shadcn/schema\";\n\nexport const ui: Registry[\"items\"] = [\n  {\n    name: \"ui\",\n    registryDependencies: [\n      \"@coss/accordion\",\n      \"@coss/alert\",\n      \"@coss/alert-dialog\",\n      \"@coss/autocomplete\",\n      \"@coss/avatar\",\n      \"@coss/badge\",\n      \"@coss/breadcrumb\",\n      \"@coss/button\",\n      \"@coss/calendar\",\n      \"@coss/card\",\n      \"@coss/checkbox\",\n      \"@coss/checkbox-group\",\n      \"@coss/collapsible\",\n      \"@coss/combobox\",\n      \"@coss/command\",\n      \"@coss/dialog\",\n      \"@coss/drawer\",\n      \"@coss/empty\",\n      \"@coss/field\",\n      \"@coss/fieldset\",\n      \"@coss/form\",\n      \"@coss/frame\",\n      \"@coss/group\",\n      \"@coss/input\",\n      \"@coss/input-otp\",\n      \"@coss/input-group\",\n      \"@coss/kbd\",\n      \"@coss/label\",\n      \"@coss/menu\",\n      \"@coss/meter\",\n      \"@coss/number-field\",\n      \"@coss/pagination\",\n      \"@coss/popover\",\n      \"@coss/preview-card\",\n      \"@coss/progress\",\n      \"@coss/radio-group\",\n      \"@coss/scroll-area\",\n      \"@coss/select\",\n      \"@coss/separator\",\n      \"@coss/sheet\",\n      \"@coss/sidebar\",\n      \"@coss/skeleton\",\n      \"@coss/slider\",\n      \"@coss/spinner\",\n      \"@coss/switch\",\n      \"@coss/table\",\n      \"@coss/tabs\",\n      \"@coss/textarea\",\n      \"@coss/toast\",\n      \"@coss/toggle\",\n      \"@coss/toggle-group\",\n      \"@coss/toolbar\",\n      \"@coss/tooltip\",\n    ],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/accordion.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"accordion\",\n    type: \"registry:ui\",\n  },\n  {\n    cssVars: {\n      dark: {\n        \"destructive-foreground\": \"var(--color-red-400)\",\n        info: \"var(--color-blue-500)\",\n        \"info-foreground\": \"var(--color-blue-400)\",\n        success: \"var(--color-emerald-500)\",\n        \"success-foreground\": \"var(--color-emerald-400)\",\n        warning: \"var(--color-amber-500)\",\n        \"warning-foreground\": \"var(--color-amber-400)\",\n      },\n      light: {\n        \"destructive-foreground\": \"var(--color-red-700)\",\n        info: \"var(--color-blue-500)\",\n        \"info-foreground\": \"var(--color-blue-700)\",\n        success: \"var(--color-emerald-500)\",\n        \"success-foreground\": \"var(--color-emerald-700)\",\n        warning: \"var(--color-amber-500)\",\n        \"warning-foreground\": \"var(--color-amber-700)\",\n      },\n    },\n    files: [\n      {\n        path: \"ui/alert.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"alert\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/alert-dialog.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"alert-dialog\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/autocomplete.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"autocomplete\",\n    registryDependencies: [\"@coss/input\", \"@coss/scroll-area\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/avatar.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"avatar\",\n    type: \"registry:ui\",\n  },\n  {\n    cssVars: {\n      dark: {\n        \"destructive-foreground\": \"var(--color-red-400)\",\n        info: \"var(--color-blue-500)\",\n        \"info-foreground\": \"var(--color-blue-400)\",\n        success: \"var(--color-emerald-500)\",\n        \"success-foreground\": \"var(--color-emerald-400)\",\n        warning: \"var(--color-amber-500)\",\n        \"warning-foreground\": \"var(--color-amber-400)\",\n      },\n      light: {\n        \"destructive-foreground\": \"var(--color-red-700)\",\n        info: \"var(--color-blue-500)\",\n        \"info-foreground\": \"var(--color-blue-700)\",\n        success: \"var(--color-emerald-500)\",\n        \"success-foreground\": \"var(--color-emerald-700)\",\n        warning: \"var(--color-amber-500)\",\n        \"warning-foreground\": \"var(--color-amber-700)\",\n      },\n    },\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/badge.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"badge\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/breadcrumb.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"breadcrumb\",\n    type: \"registry:ui\",\n  },\n  {\n    cssVars: {\n      dark: {\n        \"destructive-foreground\": \"var(--color-red-400)\",\n      },\n      light: {\n        \"destructive-foreground\": \"var(--color-red-700)\",\n      },\n    },\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/button.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"button\",\n    registryDependencies: [\"@coss/spinner\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"react-day-picker\", \"lucide-react\"],\n    files: [\n      {\n        path: \"ui/calendar.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"calendar\",\n    registryDependencies: [],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/card.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"card\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/checkbox.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"checkbox\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/checkbox-group.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"checkbox-group\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/collapsible.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"collapsible\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/combobox.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"combobox\",\n    registryDependencies: [\"@coss/input\", \"@coss/scroll-area\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/command.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"command\",\n    registryDependencies: [\"@coss/autocomplete\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/dialog.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"dialog\",\n    registryDependencies: [\"@coss/button\", \"@coss/scroll-area\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/drawer.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"drawer\",\n    registryDependencies: [\"@coss/button\", \"@coss/scroll-area\"],\n    type: \"registry:ui\",\n  },\n  {\n    files: [\n      {\n        path: \"ui/empty.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"empty\",\n    type: \"registry:ui\",\n  },\n  {\n    cssVars: {\n      dark: {\n        \"destructive-foreground\": \"var(--color-red-400)\",\n      },\n      light: {\n        \"destructive-foreground\": \"var(--color-red-700)\",\n      },\n    },\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/field.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"field\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/fieldset.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"fieldset\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/form.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"form\",\n    type: \"registry:ui\",\n  },\n  {\n    files: [\n      {\n        path: \"ui/frame.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"frame\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/group.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"group\",\n    registryDependencies: [\"@coss/separator\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/input.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"input\",\n    type: \"registry:ui\",\n  },\n  {\n    css: {\n      \"@keyframes caret-blink\": {\n        \"0%, 70%, to\": {\n          opacity: \"1\",\n        },\n        \"20%, 50%\": {\n          opacity: \"0\",\n        },\n      },\n    },\n    cssVars: {\n      theme: {\n        \"--animate-caret-blink\": \"1s ease-out infinite caret-blink\",\n      },\n    },\n    dependencies: [\"input-otp\"],\n    files: [\n      {\n        path: \"ui/input-otp.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"input-otp\",\n    registryDependencies: [\"@coss/separator\"],\n    type: \"registry:ui\",\n  },\n  {\n    files: [\n      {\n        path: \"ui/input-group.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"input-group\",\n    registryDependencies: [\"@coss/input\", \"@coss/textarea\"],\n    type: \"registry:ui\",\n  },\n  {\n    files: [\n      {\n        path: \"ui/kbd.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"kbd\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/label.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"label\",\n    type: \"registry:ui\",\n  },\n  {\n    cssVars: {\n      dark: {\n        \"destructive-foreground\": \"var(--color-red-400)\",\n      },\n      light: {\n        \"destructive-foreground\": \"var(--color-red-700)\",\n      },\n    },\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/menu.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"menu\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/meter.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"meter\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/number-field.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"number-field\",\n    registryDependencies: [\"@coss/label\"],\n    type: \"registry:ui\",\n  },\n  {\n    files: [\n      {\n        path: \"ui/pagination.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"pagination\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/popover.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"popover\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/preview-card.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"preview-card\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/progress.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"progress\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/radio-group.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"radio-group\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/scroll-area.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"scroll-area\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/select.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"select\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/separator.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"separator\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/sheet.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"sheet\",\n    registryDependencies: [\"@coss/button\", \"@coss/scroll-area\"],\n    type: \"registry:ui\",\n  },\n  {\n    files: [\n      {\n        path: \"ui/sidebar.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"sidebar\",\n    registryDependencies: [\n      \"@coss/button\",\n      \"@coss/input\",\n      \"@coss/scroll-area\",\n      \"@coss/separator\",\n      \"@coss/sheet\",\n      \"@coss/skeleton\",\n      \"@coss/tooltip\",\n      \"@coss/use-media-query\",\n      \"@coss/utils\",\n    ],\n    type: \"registry:ui\",\n  },\n  {\n    css: {\n      \"@keyframes skeleton\": {\n        to: {\n          \"background-position\": \"-200% 0\",\n        },\n      },\n    },\n    cssVars: {\n      theme: {\n        \"--animate-skeleton\": \"skeleton 2s -1s infinite linear\",\n      },\n    },\n    files: [\n      {\n        path: \"ui/skeleton.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"skeleton\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/slider.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"slider\",\n    type: \"registry:ui\",\n  },\n  {\n    files: [\n      {\n        path: \"ui/spinner.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"spinner\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/switch.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"switch\",\n    type: \"registry:ui\",\n  },\n  {\n    files: [\n      {\n        path: \"ui/table.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"table\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/tabs.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"tabs\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/textarea.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"textarea\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/toast.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"toast\",\n    registryDependencies: [\"@coss/button\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/toggle.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"toggle\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/toggle-group.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"toggle-group\",\n    registryDependencies: [\"@coss/separator\", \"@coss/toggle\"],\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/toolbar.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"toolbar\",\n    type: \"registry:ui\",\n  },\n  {\n    dependencies: [\"@base-ui/react\"],\n    files: [\n      {\n        path: \"ui/tooltip.tsx\",\n        type: \"registry:ui\",\n      },\n    ],\n    name: \"tooltip\",\n    type: \"registry:ui\",\n  },\n];\n"
  },
  {
    "path": "apps/ui/registry.json",
    "content": "{\n  \"homepage\": \"https://ui.shadcn.com\",\n  \"items\": [\n    {\n      \"name\": \"ui\",\n      \"registryDependencies\": [\n        \"@coss/accordion\",\n        \"@coss/alert\",\n        \"@coss/alert-dialog\",\n        \"@coss/autocomplete\",\n        \"@coss/avatar\",\n        \"@coss/badge\",\n        \"@coss/breadcrumb\",\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/card\",\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/collapsible\",\n        \"@coss/combobox\",\n        \"@coss/command\",\n        \"@coss/dialog\",\n        \"@coss/drawer\",\n        \"@coss/empty\",\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/form\",\n        \"@coss/frame\",\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/input-otp\",\n        \"@coss/input-group\",\n        \"@coss/kbd\",\n        \"@coss/label\",\n        \"@coss/menu\",\n        \"@coss/meter\",\n        \"@coss/number-field\",\n        \"@coss/pagination\",\n        \"@coss/popover\",\n        \"@coss/preview-card\",\n        \"@coss/progress\",\n        \"@coss/radio-group\",\n        \"@coss/scroll-area\",\n        \"@coss/select\",\n        \"@coss/separator\",\n        \"@coss/sheet\",\n        \"@coss/sidebar\",\n        \"@coss/skeleton\",\n        \"@coss/slider\",\n        \"@coss/spinner\",\n        \"@coss/switch\",\n        \"@coss/table\",\n        \"@coss/tabs\",\n        \"@coss/textarea\",\n        \"@coss/toast\",\n        \"@coss/toggle\",\n        \"@coss/toggle-group\",\n        \"@coss/toolbar\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/accordion.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"accordion\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-400)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-400)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-700)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-700)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-700)\"\n        }\n      },\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/alert.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"alert\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/alert-dialog.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"alert-dialog\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/autocomplete.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"autocomplete\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/avatar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"avatar\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-400)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-400)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-700)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-700)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-700)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/badge.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"badge\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/breadcrumb.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"breadcrumb\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/button.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"button\",\n      \"registryDependencies\": [\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"react-day-picker\",\n        \"lucide-react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/calendar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"calendar\",\n      \"registryDependencies\": [],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/card.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"card\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/checkbox.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"checkbox\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/checkbox-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"checkbox-group\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/collapsible.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"collapsible\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/combobox.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"combobox\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/command.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"command\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/dialog.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"dialog\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/drawer.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"drawer\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/empty.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"empty\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/field.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"field\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/fieldset.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"fieldset\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/form.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"form\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/frame.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"frame\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"group\",\n      \"registryDependencies\": [\n        \"@coss/separator\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/input.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"input\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"css\": {\n        \"@keyframes caret-blink\": {\n          \"0%, 70%, to\": {\n            \"opacity\": \"1\"\n          },\n          \"20%, 50%\": {\n            \"opacity\": \"0\"\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--animate-caret-blink\": \"1s ease-out infinite caret-blink\"\n        }\n      },\n      \"dependencies\": [\n        \"input-otp\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/input-otp.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"input-otp\",\n      \"registryDependencies\": [\n        \"@coss/separator\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/input-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"input-group\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/kbd.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"kbd\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/label.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"label\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"destructive-foreground\": \"var(--color-red-400)\"\n        },\n        \"light\": {\n          \"destructive-foreground\": \"var(--color-red-700)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/menu.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"menu\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/meter.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"meter\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/number-field.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"number-field\",\n      \"registryDependencies\": [\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/pagination.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"pagination\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/popover.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"popover\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/preview-card.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"preview-card\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/progress.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"progress\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/radio-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"radio-group\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/scroll-area.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"scroll-area\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/select.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"select\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/separator.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"separator\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/sheet.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"sheet\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/sidebar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"sidebar\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input\",\n        \"@coss/scroll-area\",\n        \"@coss/separator\",\n        \"@coss/sheet\",\n        \"@coss/skeleton\",\n        \"@coss/tooltip\",\n        \"@coss/use-media-query\",\n        \"@coss/utils\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"css\": {\n        \"@keyframes skeleton\": {\n          \"to\": {\n            \"background-position\": \"-200% 0\"\n          }\n        }\n      },\n      \"cssVars\": {\n        \"theme\": {\n          \"--animate-skeleton\": \"skeleton 2s -1s infinite linear\"\n        }\n      },\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/skeleton.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"skeleton\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/slider.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"slider\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/spinner.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"spinner\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/switch.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"switch\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/table.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"table\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/tabs.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"tabs\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/textarea.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"textarea\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toast.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toast\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toggle.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toggle\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toggle-group.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toggle-group\",\n      \"registryDependencies\": [\n        \"@coss/separator\",\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/toolbar.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"toolbar\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/ui/tooltip.tsx\",\n          \"type\": \"registry:ui\"\n        }\n      ],\n      \"name\": \"tooltip\",\n      \"type\": \"registry:ui\"\n    },\n    {\n      \"categories\": [\n        \"accordion\"\n      ],\n      \"description\": \"Basic accordion\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-accordion-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n      },\n      \"name\": \"p-accordion-1\",\n      \"registryDependencies\": [\n        \"@coss/accordion\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"accordion\"\n      ],\n      \"description\": \"Accordion with one panel open\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-accordion-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n      },\n      \"name\": \"p-accordion-2\",\n      \"registryDependencies\": [\n        \"@coss/accordion\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"accordion\"\n      ],\n      \"description\": \"Accordion allowing multiple panels open\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-accordion-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n      },\n      \"name\": \"p-accordion-3\",\n      \"registryDependencies\": [\n        \"@coss/accordion\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"accordion\"\n      ],\n      \"description\": \"Controlled accordion\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-accordion-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-[80%]\"\n      },\n      \"name\": \"p-accordion-4\",\n      \"registryDependencies\": [\n        \"@coss/accordion\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\"\n      ],\n      \"description\": \"Basic alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-1\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Alert with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-2\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Alert with icon and action buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-3\",\n      \"registryDependencies\": [\n        \"@coss/alert\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\",\n        \"info\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Info alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-4\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\",\n        \"success\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Success alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-5\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\",\n        \"warning\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Warning alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-6\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert\",\n        \"error\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Error alert\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-alert-7\",\n      \"registryDependencies\": [\n        \"@coss/alert\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert dialog\",\n        \"dialog\"\n      ],\n      \"description\": \"Alert dialog\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-dialog-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-alert-dialog-1\",\n      \"registryDependencies\": [\n        \"@coss/alert-dialog\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert dialog\",\n        \"dialog\"\n      ],\n      \"description\": \"Alert dialog with bare footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-alert-dialog-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-alert-dialog-2\",\n      \"registryDependencies\": [\n        \"@coss/alert-dialog\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Basic autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-1\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-2\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Small autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-3\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Large autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-4\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-5\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete autofilling the input with the highlighted item\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-6\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete auto highlighting the first option\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-7\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with clear button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-8\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with trigger and clear buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-9\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with grouped items\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-10\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete with limited number of results\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-11\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\",\n        \"async\"\n      ],\n      \"description\": \"Autocomplete with async items loading\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-12\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"form\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-13\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Autocomplete form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-14\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"input\"\n      ],\n      \"description\": \"Pill-shaped autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-autocomplete-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-autocomplete-15\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with image and fallback\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-1\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Fallback-only avatar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-2\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatars with different sizes\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-3\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatars with different radii\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-4\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Overlapping avatar group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-5\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Avatar with user icon fallback\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-6\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with emerald status dot\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-7\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with muted status dot\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-8\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Rounded avatar with top-right emerald status\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-9\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with notification badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-10\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Rounded avatar with notification badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-11\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Avatar with verified badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-12\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Small overlapping avatar group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-13\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\"\n      ],\n      \"description\": \"Large overlapping avatar group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-avatar-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-avatar-14\",\n      \"registryDependencies\": [\n        \"@coss/avatar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Basic badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-1\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Outline badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-2\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Secondary badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-3\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"error\"\n      ],\n      \"description\": \"Destructive badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-4\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"info\"\n      ],\n      \"description\": \"Info badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-5\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"success\"\n      ],\n      \"description\": \"Success badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-6\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"warning\"\n      ],\n      \"description\": \"Warning badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-7\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"error\"\n      ],\n      \"description\": \"Error badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-8\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Small badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-9\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Large badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-10\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Badge with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-11\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Badge with link\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-12\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Badge with count\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-13\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Full rounded badge (pill)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-14\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Badge with number after text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-15\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Status badge - Paid\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-16\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Status badge - Pending\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-17\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"description\": \"Status badge - Failed\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-18\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"checkbox\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Selectable badge with checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-19\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/checkbox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Removable badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-badge-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-badge-20\",\n      \"registryDependencies\": [\n        \"@coss/badge\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\",\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Breadcrumb with menu example\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-1\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\",\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\"\n      ],\n      \"description\": \"Breadcrumb with custom separator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-2\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with home icon for home link only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-3\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\",\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with folders icon menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-4\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\",\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with icons before text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-5\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with dot separators\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-6\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"breadcrumb\",\n        \"select\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Breadcrumb with select dropdown\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-breadcrumb-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-breadcrumb-7\",\n      \"registryDependencies\": [\n        \"@coss/breadcrumb\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Default button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-1\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Outline button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-2\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Secondary button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-3\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Destructive button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-4\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Destructive outline button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-5\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Ghost button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-6\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Link button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-7\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Extra-small button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-8\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Small button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-9\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Large button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-10\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Extra-large button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-11\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-12\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Icon button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-13\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Small icon button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-14\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Large icon button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-15\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Button with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-16\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Link rendered as button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-17\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"loading\"\n      ],\n      \"description\": \"Button using the built-in loading prop\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-41.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-41\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"loading\"\n      ],\n      \"description\": \"Custom loading button with manual Spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-18\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Expandable show more/less toggle button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-19\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Back link button with chevron\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-20\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Card-style button with heading and description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-21\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Directional pad control buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-22\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Outline like button with count\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-23\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"@remixicon/react\"\n      ],\n      \"description\": \"Social login icon buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-24.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-24\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Star button with count badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-26.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-26\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Button group with QR code icon and sign in\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-27.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-27\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"avatar\"\n      ],\n      \"description\": \"Button with avatar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-28.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-28\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Pill-shaped button with rounded-full styling\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-29.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-29\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Button with animated arrow on hover\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-30.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-30\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"kbd\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Button with keyboard shortcut indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-31.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-31\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"badge\"\n      ],\n      \"description\": \"Button with notification badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-32.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-32\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Paired buttons (Cancel/Save)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-33.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-33\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Button with animated status dot\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-34.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-34\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Icon-only copy button with feedback\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-35.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-35\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Copy button with feedback\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-36.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-36\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Rotating icon button (FAB-style toggle)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-37.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-37\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"description\": \"Hamburger menu button with animated icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-39.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-39\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\",\n        \"tooltip\",\n        \"toast\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Download button with progress and cancel action\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-40.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-button-40\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/spinner\",\n        \"@coss/toast\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"@remixicon/react\"\n      ],\n      \"description\": \"Social login buttons (Google, X, GitHub)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-button-38.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-button-38\",\n      \"registryDependencies\": [\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Basic calendar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-1\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with date range selection\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-3\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with month/year dropdown navigation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-4\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"select\"\n      ],\n      \"description\": \"Calendar with custom Select dropdown for month/year\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-5\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"combobox\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Calendar with Combobox dropdown for month/year\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-6\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with disabled dates\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-7\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with multiple date selection\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-8\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with custom cell size\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-2\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with rounded day buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-9\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with rounded range selection style\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-10\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with right-aligned navigation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-11\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"description\": \"Calendar with week numbers\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-12\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"combobox\"\n      ],\n      \"description\": \"Calendar with year-only combobox dropdown\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-13\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"select\"\n      ],\n      \"description\": \"Calendar without arrow navigation (dropdown only)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-14\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with current month button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-15\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with today button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-16\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"input\",\n        \"field\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Calendar with date input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-17\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/field\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"input\",\n        \"field\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Calendar with time input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-18\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/field\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"toggle\",\n        \"toggle group\",\n        \"scroll area\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with time slots (appointment picker)\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-19\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/scroll-area\",\n        \"@coss/toggle\",\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Calendar with date presets\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-20\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Range calendar with date presets\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-calendar-21\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Two months calendar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2\n      },\n      \"name\": \"p-calendar-22\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Three months calendar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2\n      },\n      \"name\": \"p-calendar-23\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"calendar\"\n      ],\n      \"dependencies\": [\n        \"date-fns\"\n      ],\n      \"description\": \"Pricing calendar with custom day buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-calendar-24.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"colSpan\": 2\n      },\n      \"name\": \"p-calendar-24\",\n      \"registryDependencies\": [\n        \"@coss/calendar\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Basic date picker\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-1\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date range picker\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-2\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Two months calendar with range date\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-9\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\",\n        \"field\",\n        \"combobox\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker with field and dropdown navigation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/combobox\",\n        \"@coss/field\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker with presets\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker with input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/input-group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker that closes on select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-6\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/button\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\",\n        \"badge\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Multiple dates picker\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-7\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/calendar\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"date picker\",\n        \"calendar\",\n        \"popover\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"date-fns\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Date picker with select-like trigger\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-date-picker-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-date-picker-8\",\n      \"registryDependencies\": [\n        \"@coss/calendar\",\n        \"@coss/popover\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"A basic card with header and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"description\": \"Authentication card with actions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Authentication card with separators\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Framed card with footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"description\": \"Framed card with header\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Framed card with header and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Framed card with no rounded bottom\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\",\n        \"frame\"\n      ],\n      \"description\": \"Card within a frame and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/frame\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\",\n        \"frame\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Card within a frame and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/frame\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"form\",\n        \"frame\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Card within a frame with header and footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/frame\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"card\",\n        \"frame\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"CardFrame with header action\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-card-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-card-11\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/card\",\n        \"@coss/empty\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\"\n      ],\n      \"description\": \"Basic checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-1\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-2\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\"\n      ],\n      \"description\": \"Checkbox with description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-3\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\"\n      ],\n      \"description\": \"Card-style checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-4\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"form\"\n      ],\n      \"description\": \"Checkbox form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/checkbox\",\n        \"@coss/field\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\"\n      ],\n      \"description\": \"Basic checkbox group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-1\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\",\n        \"disabled\"\n      ],\n      \"description\": \"Checkbox group with disabled items\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-2\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\"\n      ],\n      \"description\": \"Checkbox group with parent checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-3\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\"\n      ],\n      \"description\": \"Nested checkbox group with parent\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-4\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\",\n        \"form\"\n      ],\n      \"description\": \"Checkbox group form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-checkbox-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-checkbox-group-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"collapsible\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Basic collapsible\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-collapsible-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-collapsible-1\",\n      \"registryDependencies\": [\n        \"@coss/collapsible\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Basic combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-1\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-2\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Small combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-3\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Large combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-4\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-5\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox auto highlighting the first option\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-6\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox with clear button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-7\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox with grouped items\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-8\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Combobox with multiple selection\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-9\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Combobox with input inside popup\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"form\",\n        \"input\"\n      ],\n      \"description\": \"Combobox form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-11\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/combobox\",\n        \"@coss/field\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"form\",\n        \"input\"\n      ],\n      \"description\": \"Combobox multiple form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-12\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/combobox\",\n        \"@coss/field\",\n        \"@coss/form\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Combobox with start addon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-13\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Combobox multiple with start addon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-14\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\"\n      ],\n      \"description\": \"Pill-shaped combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-15\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\",\n        \"timezone\"\n      ],\n      \"description\": \"Timezone combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-16\",\n      \"registryDependencies\": [\n        \"@coss/combobox\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"input\",\n        \"timezone\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Timezone combobox with search input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-17\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"select\"\n      ],\n      \"description\": \"Combobox with select trigger\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-combobox-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-combobox-18\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"command\",\n        \"dialog\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Command palette with dialog\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-command-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-command-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/command\",\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"command\",\n        \"dialog\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Command palette with AI assistant\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-command-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-command-2\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/button\",\n        \"@coss/command\",\n        \"@coss/empty\",\n        \"@coss/input\",\n        \"@coss/kbd\",\n        \"@coss/scroll-area\",\n        \"@coss/skeleton\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\"\n      ],\n      \"description\": \"Dialog with form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\"\n      ],\n      \"description\": \"Dialog with bare footer\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\",\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Dialog opened from menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\"\n      ],\n      \"description\": \"Nested dialogs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"alert dialog\",\n        \"dialog\"\n      ],\n      \"description\": \"Dialog with close confirmation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-4\",\n      \"registryDependencies\": [\n        \"@coss/alert-dialog\",\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dialog\"\n      ],\n      \"description\": \"Dialog with long content\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-dialog-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-dialog-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Simple bottom drawer with close button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Bottom drawer without drag bar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Drawer with close button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Inset variant drawers for all four positions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Straight variant drawers for all four positions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Scrollable content with terms and conditions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Nested bottom drawers with centered content\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Nested right drawers with inset variant\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\",\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Bottom drawer with snap points\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Edit profile form with default and bare footer variants\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Mobile menu drawer from the left\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-11\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\",\n        \"dialog\"\n      ],\n      \"description\": \"Responsive edit profile: dialog on desktop, drawer on mobile\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-12\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/dialog\",\n        \"@coss/drawer\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/use-media-query\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\",\n        \"menu\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Responsive actions menu: menu on desktop, drawer on mobile\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-drawer-13\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\",\n        \"@coss/menu\",\n        \"@coss/use-media-query\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"drawer\"\n      ],\n      \"description\": \"Left drawer with swipe area\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-drawer-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-md\"\n      },\n      \"name\": \"p-drawer-14\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/drawer\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"empty state\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Empty state with icon and actions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-empty-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-empty-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/empty\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-1\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with required indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-2\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"disabled\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field in disabled state\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-3\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"error\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field showing validation error\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-4\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\"\n      ],\n      \"description\": \"Show field validity state\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-5\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"field\",\n        \"input\",\n        \"input group\"\n      ],\n      \"description\": \"Input group with field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"autocomplete\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with autocomplete\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-7\",\n      \"registryDependencies\": [\n        \"@coss/autocomplete\",\n        \"@coss/field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-8\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"combobox\",\n        \"field\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Field with multiple selection combobox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-9\",\n      \"registryDependencies\": [\n        \"@coss/combobox\",\n        \"@coss/field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"textarea\"\n      ],\n      \"description\": \"Field with textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-10\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"select\"\n      ],\n      \"description\": \"Field with select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-11\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"field\",\n        \"label\"\n      ],\n      \"description\": \"Field with checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-12\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"checkbox group\",\n        \"field\",\n        \"fieldset\",\n        \"label\"\n      ],\n      \"description\": \"Field with checkbox group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-13\",\n      \"registryDependencies\": [\n        \"@coss/checkbox\",\n        \"@coss/checkbox-group\",\n        \"@coss/field\",\n        \"@coss/fieldset\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"fieldset\",\n        \"label\",\n        \"radio group\"\n      ],\n      \"description\": \"Field with radio group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-14\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"switch\"\n      ],\n      \"description\": \"Field with toggle switch\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-field-15\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"slider\"\n      ],\n      \"description\": \"Field with slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-16\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\",\n        \"label\",\n        \"number field\"\n      ],\n      \"description\": \"Field with number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-17\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"checkbox\",\n        \"field\",\n        \"form\",\n        \"input\",\n        \"label\",\n        \"select\"\n      ],\n      \"description\": \"Complete form built with field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-field-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-field-18\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/checkbox\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"fieldset\",\n        \"input\"\n      ],\n      \"description\": \"Fieldset with multiple fields\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-fieldset-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-fieldset-1\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"field\",\n        \"form\",\n        \"input\"\n      ],\n      \"description\": \"Input in a form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-form-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-form-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"field\",\n        \"form\",\n        \"label\",\n        \"validation\",\n        \"zod\"\n      ],\n      \"dependencies\": [\n        \"zod\"\n      ],\n      \"description\": \"Form with zod validation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-form-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-form-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"frame\"\n      ],\n      \"description\": \"Basic frame\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-frame-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-frame-1\",\n      \"registryDependencies\": [\n        \"@coss/frame\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"frame\"\n      ],\n      \"description\": \"Frame with multiple separated panels\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-frame-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-frame-3\",\n      \"registryDependencies\": [\n        \"@coss/frame\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"frame\"\n      ],\n      \"description\": \"Frame with multiple stacked panels\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-frame-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-frame-4\",\n      \"registryDependencies\": [\n        \"@coss/frame\",\n        \"@coss/separator\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"collapsible\",\n        \"frame\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Frame with collapsible content and delete button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-frame-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-frame-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/collapsible\",\n        \"@coss/frame\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"kbd\"\n      ],\n      \"description\": \"Keyboard shortcuts display\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-kbd-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-kbd-1\",\n      \"registryDependencies\": [\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Basic group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input\"\n      ],\n      \"description\": \"Group with input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/tooltip\",\n        \"@coss/use-copy-to-clipboard\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Small group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Large group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\"\n      ],\n      \"description\": \"Group with disabled button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\"\n      ],\n      \"description\": \"Group with default button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Group with start text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-7\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Group with end text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-8\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Vertical group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Nested groups\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\"\n      ],\n      \"description\": \"Group with popup\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-11\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input group\"\n      ],\n      \"description\": \"Group with input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-12\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"group\",\n        \"menu\"\n      ],\n      \"description\": \"Group with menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-13\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"select\"\n      ],\n      \"description\": \"Group with select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-14\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/number-field\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"search\"\n      ],\n      \"description\": \"Group with search\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-15\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\",\n        \"input\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Group with add button and input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-16\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input\"\n      ],\n      \"description\": \"Group with input and currency text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-17\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input\",\n        \"select\"\n      ],\n      \"description\": \"Group with select and input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-18\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"input\",\n        \"select\"\n      ],\n      \"description\": \"Group with input and select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-19\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/input\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\",\n        \"input\"\n      ],\n      \"description\": \"Group with input and text button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-20\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"group\",\n        \"label\",\n        \"number field\"\n      ],\n      \"description\": \"Group with two number inputs for range\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-22\",\n      \"registryDependencies\": [\n        \"@coss/group\",\n        \"@coss/label\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\",\n        \"badge\",\n        \"button\",\n        \"combobox\",\n        \"group\"\n      ],\n      \"description\": \"Group with filter label, combobox multi-select, and remove button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-group-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-group-23\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/combobox\",\n        \"@coss/group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Basic input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-1\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Small input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-2\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Large input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-3\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Disabled input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-4\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"File input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-5\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Input with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-6\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"group\",\n        \"input\"\n      ],\n      \"description\": \"Input with button using Group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"popover\"\n      ],\n      \"description\": \"Input with start text and end tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"tooltip\"\n      ],\n      \"description\": \"Password input with toggle visibility\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"popover\"\n      ],\n      \"description\": \"Input group mimicking a URL bar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\",\n        \"kbd\",\n        \"search\"\n      ],\n      \"description\": \"Input group with keyboard shortcut\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-11\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\",\n        \"spinner\",\n        \"loading\"\n      ],\n      \"description\": \"Input group with start loading spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-12\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Input with label and required indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-13\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"Input with optional label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-14\",\n      \"registryDependencies\": [\n        \"@coss/input\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Input with custom border and background\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-15\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\",\n        \"spinner\",\n        \"loading\"\n      ],\n      \"description\": \"Input group with end loading spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-16\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Read-only input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-17\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\"\n      ],\n      \"description\": \"Basic OTP input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-1\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\"\n      ],\n      \"description\": \"Large OTP input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-2\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\"\n      ],\n      \"description\": \"OTP input with separator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-3\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\",\n        \"label\"\n      ],\n      \"description\": \"OTP input with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-4\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\"\n      ],\n      \"description\": \"Digits-only OTP input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-5\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\",\n        \"validation\"\n      ],\n      \"description\": \"Invalid OTP input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-6\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input otp\",\n        \"input\",\n        \"validation\"\n      ],\n      \"description\": \"OTP input with auto validation\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-otp-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-input-otp-7\",\n      \"registryDependencies\": [\n        \"@coss/input-otp\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Basic input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-1\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with end icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-2\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Input group with start text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-3\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Input group with end text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-4\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Input group with start and end text\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-5\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"number field\"\n      ],\n      \"description\": \"Input group with number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-6\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with end tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with icon button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\",\n        \"@coss/use-copy-to-clipboard\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\"\n      ],\n      \"description\": \"Input group with button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"input group\"\n      ],\n      \"description\": \"Input group with badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-10\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"kbd\"\n      ],\n      \"description\": \"Input group with keyboard shortcut\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-11\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/kbd\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"label\"\n      ],\n      \"description\": \"Input group with inner label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-12\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/label\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Small input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-13\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Large input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-14\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\"\n      ],\n      \"description\": \"Disabled input group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-15\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"spinner\"\n      ],\n      \"description\": \"Input group with loading spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-16\",\n      \"registryDependencies\": [\n        \"@coss/input-group\",\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input group\",\n        \"textarea\"\n      ],\n      \"description\": \"Input group with textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-17\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/menu\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"badge\",\n        \"dropdown\",\n        \"input group\",\n        \"menu\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with badge and menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-18\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\",\n        \"textarea\",\n        \"toggle\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Mini editor built with input group and toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-19\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\",\n        \"search\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with search icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-20\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with start tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-21\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Input group with clear button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-22\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"search\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Search input group with loader and voice button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-23\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\",\n        \"input group\"\n      ],\n      \"description\": \"Input group with character counter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-24.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-24\",\n      \"registryDependencies\": [\n        \"@coss/input-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"input\"\n      ],\n      \"description\": \"Input with characters remaining counter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-18\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"input\"\n      ],\n      \"description\": \"Pill-shaped input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-19\",\n      \"registryDependencies\": [\n        \"@coss/input\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input\",\n        \"input group\",\n        \"label\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Password input with strength indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-26.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-input-group-26\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/label\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\",\n        \"select\",\n        \"textarea\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Code snippet input with language selector\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-27.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-27\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/select\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\",\n        \"textarea\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Message composer with attachment buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-28.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-28\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"input group\",\n        \"textarea\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Chat input with voice and send buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-input-group-29.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-input-group-29\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"meter\"\n      ],\n      \"description\": \"Basic meter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-meter-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-meter-1\",\n      \"registryDependencies\": [\n        \"@coss/meter\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"meter\"\n      ],\n      \"description\": \"Simple meter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-meter-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-meter-2\",\n      \"registryDependencies\": [\n        \"@coss/meter\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"meter\"\n      ],\n      \"description\": \"Meter with formatted value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-meter-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-meter-3\",\n      \"registryDependencies\": [\n        \"@coss/meter\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"meter\"\n      ],\n      \"description\": \"Meter with range\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-meter-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-meter-4\",\n      \"registryDependencies\": [\n        \"@coss/meter\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Basic menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with hover\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with checkbox\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\",\n        \"switch\"\n      ],\n      \"description\": \"Menu with checkbox items as switches\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with radio group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with link\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu with group labels\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Nested menu\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"dropdown\",\n        \"menu\"\n      ],\n      \"description\": \"Menu close on click\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-menu-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-menu-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/menu\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Basic number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-1\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Small number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-2\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Large number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-3\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Disabled number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-4\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-5\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with scrub\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-6\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with range\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-7\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with formatted value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-8\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Number field with step\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-9\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\",\n        \"form\",\n        \"field\",\n        \"zod\"\n      ],\n      \"dependencies\": [\n        \"zod\"\n      ],\n      \"description\": \"Number field in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-10\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"number field\",\n        \"input\"\n      ],\n      \"description\": \"Pill-shaped number field\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-number-field-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-number-field-11\",\n      \"registryDependencies\": [\n        \"@coss/number-field\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"pagination\"\n      ],\n      \"description\": \"Pagination example\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-pagination-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-pagination-1\",\n      \"registryDependencies\": [\n        \"@coss/pagination\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"pagination\"\n      ],\n      \"description\": \"Pagination with previous and next buttons only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-pagination-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-pagination-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/pagination\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"pagination\",\n        \"select\"\n      ],\n      \"description\": \"Pagination with select, and previous and next buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-pagination-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full\"\n      },\n      \"name\": \"p-pagination-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/pagination\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"field\",\n        \"form\",\n        \"popover\",\n        \"textarea\"\n      ],\n      \"description\": \"Popover with a form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-popover-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-popover-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/popover\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"popover\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Popover with close button\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-popover-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-popover-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"avatar\",\n        \"button\",\n        \"popover\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Animated popovers\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-popover-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-popover-3\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/button\",\n        \"@coss/popover\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"preview card\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Preview card with popup\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-preview-card-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-preview-card-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/preview-card\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"progress\"\n      ],\n      \"description\": \"Basic progress bar\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-progress-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-progress-1\",\n      \"registryDependencies\": [\n        \"@coss/progress\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"progress\"\n      ],\n      \"description\": \"Progress with label and value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-progress-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-progress-2\",\n      \"registryDependencies\": [\n        \"@coss/progress\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"progress\"\n      ],\n      \"description\": \"Progress with formatted value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-progress-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-progress-3\",\n      \"registryDependencies\": [\n        \"@coss/progress\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\"\n      ],\n      \"description\": \"Basic radio group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-1\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\"\n      ],\n      \"description\": \"Disabled radio group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-2\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\"\n      ],\n      \"description\": \"Radio group with description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-3\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\"\n      ],\n      \"description\": \"Radio group card\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-4\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"radio group\",\n        \"form\"\n      ],\n      \"description\": \"Radio group in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-radio-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-radio-group-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/form\",\n        \"@coss/radio-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Basic scroll area\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-scroll-area-1\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Horizontal scroll area\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-scroll-area-2\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Scroll area with both directions\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-scroll-area-3\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Scroll area with fading edges\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-scroll-area-4\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"scroll area\"\n      ],\n      \"description\": \"Horizontal scroll area with scrollbar gutter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-scroll-area-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-scroll-area-5\",\n      \"registryDependencies\": [\n        \"@coss/scroll-area\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Basic select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-1\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Small select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-2\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Large select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-3\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Disabled select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-4\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select without item alignment\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-5\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with groups\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-6\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Multiple select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-7\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Select with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-8\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Select options with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-9\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with object values\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-10\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\",\n        \"disabled\"\n      ],\n      \"description\": \"Select with disabled items\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-12\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\",\n        \"time\",\n        \"timezone\"\n      ],\n      \"description\": \"Timezone select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-13\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Status select with colored dot\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-14\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Pill-shaped select trigger\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-15\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with left text label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-16\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with country flags\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-17\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with description in options only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-18\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\",\n        \"avatar\"\n      ],\n      \"description\": \"Select with avatars\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-19\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\",\n        \"avatar\"\n      ],\n      \"description\": \"Rich select with avatars and usernames\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-20\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Auto width select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-select-21\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with custom border and background\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-22\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-23\",\n      \"registryDependencies\": [\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"select\"\n      ],\n      \"description\": \"Select in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-select-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-select-11\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/select\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"separator\"\n      ],\n      \"description\": \"Separator with horizontal and vertical orientations\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-separator-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-separator-1\",\n      \"registryDependencies\": [\n        \"@coss/separator\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"sheet\"\n      ],\n      \"description\": \"Basic sheet\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-sheet-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-sheet-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/sheet\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"sheet\"\n      ],\n      \"description\": \"Sheet inset\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-sheet-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-sheet-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/input\",\n        \"@coss/sheet\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"sheet\"\n      ],\n      \"description\": \"Sheet position\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-sheet-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-sheet-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/sheet\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"skeleton\"\n      ],\n      \"description\": \"Basic skeleton\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-skeleton-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-skeleton-1\",\n      \"registryDependencies\": [\n        \"@coss/avatar\",\n        \"@coss/button\",\n        \"@coss/skeleton\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"skeleton\"\n      ],\n      \"description\": \"Skeleton only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-skeleton-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:flex **:data-[slot=preview]:justify-center\"\n      },\n      \"name\": \"p-skeleton-2\",\n      \"registryDependencies\": [\n        \"@coss/skeleton\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Basic slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-1\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with label and value\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-2\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"disabled\"\n      ],\n      \"description\": \"Disabled slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-3\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with reference labels\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-4\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with ticks\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-5\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with labels above\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-6\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Range slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-7\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Slider with 3 thumbs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-8\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Range slider with collision behavior none\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-9\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Range slider with collision behavior swap\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-10\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Slider with icons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-11\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\"\n      ],\n      \"description\": \"Slider with input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-12\",\n      \"registryDependencies\": [\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\"\n      ],\n      \"description\": \"Range slider with inputs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-13\",\n      \"registryDependencies\": [\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Slider with increment and decrement buttons\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-14\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Price range slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-15\",\n      \"registryDependencies\": [\n        \"@coss/fieldset\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Emoji rating slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-16.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-16\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Vertical slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-17.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-slider-17\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Vertical range slider\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-18.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-slider-18\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\"\n      ],\n      \"description\": \"Vertical slider with input\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-19.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-slider-19\",\n      \"registryDependencies\": [\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\"\n      ],\n      \"description\": \"Equalizer with vertical sliders\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-20.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-slider-20\",\n      \"registryDependencies\": [\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Object position sliders with reset\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-21.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-21\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/fieldset\",\n        \"@coss/label\",\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"number field\",\n        \"input group\",\n        \"button\",\n        \"filter\"\n      ],\n      \"description\": \"Price slider with histogram\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-22.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-22\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/input-group\",\n        \"@coss/number-field\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"slider\",\n        \"form\"\n      ],\n      \"description\": \"Slider in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-slider-23.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-slider-23\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/fieldset\",\n        \"@coss/form\",\n        \"@coss/slider\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"spinner\"\n      ],\n      \"description\": \"Basic spinner\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-spinner-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-spinner-1\",\n      \"registryDependencies\": [\n        \"@coss/spinner\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Basic switch\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-1\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Disabled switch\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-2\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Switch with description\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-3\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Switch card\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-4\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Switch in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"switch\"\n      ],\n      \"description\": \"Custom size switch\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-switch-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-switch-6\",\n      \"registryDependencies\": [\n        \"@coss/switch\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"table\"\n      ],\n      \"description\": \"Basic table\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-table-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n        \"colSpan\": 2\n      },\n      \"name\": \"p-table-1\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/table\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"frame\",\n        \"table\"\n      ],\n      \"description\": \"Framed table\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-table-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n        \"colSpan\": 2\n      },\n      \"name\": \"p-table-2\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/frame\",\n        \"@coss/table\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"table\",\n        \"tanstack\"\n      ],\n      \"dependencies\": [\n        \"@tanstack/react-table\"\n      ],\n      \"description\": \"Table with TanStack Table and checkboxes\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-table-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n        \"colSpan\": 2\n      },\n      \"name\": \"p-table-3\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/checkbox\",\n        \"@coss/frame\",\n        \"@coss/table\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"checkbox\",\n        \"pagination\",\n        \"select\",\n        \"table\",\n        \"tanstack\"\n      ],\n      \"dependencies\": [\n        \"@tanstack/react-table\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Table with TanStack Table, sorting, and pagination\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-table-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-4xl\",\n        \"colSpan\": 2\n      },\n      \"name\": \"p-table-4\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/button\",\n        \"@coss/checkbox\",\n        \"@coss/frame\",\n        \"@coss/pagination\",\n        \"@coss/select\",\n        \"@coss/table\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Basic tabs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-1\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Tabs with underline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-2\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Vertical tabs\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-tabs-3\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Vertical tabs with underline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-tabs-4\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"description\": \"Tabs with full rounded triggers\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-5\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon before name\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-6\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon before name and underline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-7\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon only\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-8\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with underline and icon on top\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-9\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\",\n        \"badge\"\n      ],\n      \"description\": \"Tabs with count badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-10\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Vertical tabs with underline and icon before name\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full sm:**:data-[slot=preview]:max-w-80\"\n      },\n      \"name\": \"p-tabs-11\",\n      \"registryDependencies\": [\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\",\n        \"badge\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon only and count badge\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-12\",\n      \"registryDependencies\": [\n        \"@coss/badge\",\n        \"@coss/tabs\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tabs\",\n        \"tooltip\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Tabs with icon only and grouped tooltips\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tabs-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tabs-13\",\n      \"registryDependencies\": [\n        \"@coss/tabs\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Basic textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-1\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Small textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-2\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Large textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-3\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Disabled textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-4\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-5\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Textarea in form\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/field\",\n        \"@coss/form\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"label\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with label and required indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-7\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"label\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with optional label\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-8\",\n      \"registryDependencies\": [\n        \"@coss/label\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with custom border and background\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-9\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Read-only textarea\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-10.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-10\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with characters remaining counter\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-11.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-11\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"field\",\n        \"label\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea field with required indicator\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-12.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-12\",\n      \"registryDependencies\": [\n        \"@coss/field\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"textarea\"\n      ],\n      \"description\": \"Shorter textarea with fixed height\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-13.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-13\",\n      \"registryDependencies\": [\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with button aligned right\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-14.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-14\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"button\",\n        \"textarea\"\n      ],\n      \"description\": \"Textarea with button aligned left\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-textarea-15.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"meta\": {\n        \"className\": \"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64\"\n      },\n      \"name\": \"p-textarea-15\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/textarea\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Basic toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Toast with status\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-2\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Loading toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-3\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Toast with action\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Promise toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-5\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Toast with varying heights\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-6\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Anchored toast with tooltip style\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-7\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\",\n        \"@coss/tooltip\",\n        \"@coss/use-copy-to-clipboard\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\"\n      ],\n      \"description\": \"Anchored toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-8\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/spinner\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toast\",\n        \"button\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Promise toast with cancel action\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toast-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toast-9\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Basic toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-1\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Small toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-2\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Large toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-3\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Toggle group with outline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-4\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Vertical toggle group with outline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-5\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Disabled toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-6\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Toggle group with disabled item\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-7\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Multiple selection toggle group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-8\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"toggle group\"\n      ],\n      \"description\": \"Toggle group with tooltips\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-group-9.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-group-9\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Basic toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-1\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Toggle with outline\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-2\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Toggle with icon\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-3\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Small toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-4\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Large toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-5.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-5\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"description\": \"Disabled toggle\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-6.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-6\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Toggle icon group\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-7.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-7\",\n      \"registryDependencies\": [\n        \"@coss/toggle\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toggle\",\n        \"tooltip\",\n        \"toast\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Bookmark toggle with tooltip and success toast\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toggle-8.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toggle-8\",\n      \"registryDependencies\": [\n        \"@coss/toggle\",\n        \"@coss/tooltip\",\n        \"@coss/toast\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"toolbar\"\n      ],\n      \"dependencies\": [\n        \"lucide-react\"\n      ],\n      \"description\": \"Toolbar with toggles, buttons, and select\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-toolbar-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-toolbar-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/select\",\n        \"@coss/toggle-group\",\n        \"@coss/toolbar\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tooltip\"\n      ],\n      \"description\": \"Basic tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tooltip-1.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tooltip-1\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tooltip\"\n      ],\n      \"description\": \"Grouped tooltips\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tooltip-2.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tooltip-2\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tooltip\"\n      ],\n      \"description\": \"Toggle group animated tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tooltip-3.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tooltip-3\",\n      \"registryDependencies\": [\n        \"@coss/toggle-group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"categories\": [\n        \"tooltip\"\n      ],\n      \"description\": \"Vertical group with animated tooltip\",\n      \"files\": [\n        {\n          \"path\": \"registry/default/particles/p-tooltip-4.tsx\",\n          \"type\": \"registry:block\"\n        }\n      ],\n      \"name\": \"p-tooltip-4\",\n      \"registryDependencies\": [\n        \"@coss/button\",\n        \"@coss/group\",\n        \"@coss/tooltip\"\n      ],\n      \"type\": \"registry:block\"\n    },\n    {\n      \"css\": {\n        \"@layer base\": {\n          \"*\": {\n            \"@apply border-border outline-ring/50\": {}\n          },\n          \"body\": {\n            \"@apply bg-background text-foreground\": {}\n          },\n          \"code, kbd, samp, pre\": {\n            \"font-family\": \"var(--font-mono)\"\n          }\n        }\n      },\n      \"cssVars\": {\n        \"dark\": {\n          \"accent\": \"--alpha(var(--color-white) / 4%)\",\n          \"accent-foreground\": \"var(--color-neutral-100)\",\n          \"background\": \"color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white))\",\n          \"border\": \"--alpha(var(--color-white) / 6%)\",\n          \"card\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"card-foreground\": \"var(--color-neutral-100)\",\n          \"destructive\": \"color-mix(in srgb, var(--color-red-500) 90%, var(--color-white))\",\n          \"destructive-foreground\": \"var(--color-red-400)\",\n          \"foreground\": \"var(--color-neutral-100)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-400)\",\n          \"input\": \"--alpha(var(--color-white) / 8%)\",\n          \"muted\": \"--alpha(var(--color-white) / 4%)\",\n          \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white))\",\n          \"popover\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"popover-foreground\": \"var(--color-neutral-100)\",\n          \"primary\": \"var(--color-neutral-100)\",\n          \"primary-foreground\": \"var(--color-neutral-800)\",\n          \"ring\": \"var(--color-neutral-500)\",\n          \"secondary\": \"--alpha(var(--color-white) / 4%)\",\n          \"secondary-foreground\": \"var(--color-neutral-100)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-400)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-400)\",\n          \"chart-1\": \"var(--color-blue-700)\",\n          \"chart-2\": \"var(--color-emerald-500)\",\n          \"chart-3\": \"var(--color-amber-500)\",\n          \"chart-4\": \"var(--color-purple-500)\",\n          \"chart-5\": \"var(--color-rose-500)\",\n          \"code\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"code-foreground\": \"var(--foreground)\",\n          \"code-highlight\": \"--alpha(var(--color-white) / 4%)\",\n          \"sidebar\": \"color-mix(in srgb, var(--color-neutral-950) 97%, var(--color-white))\",\n          \"sidebar-accent\": \"--alpha(var(--color-white) / 4%)\",\n          \"sidebar-accent-foreground\": \"var(--color-neutral-100)\",\n          \"sidebar-border\": \"--alpha(var(--color-white) / 5%)\",\n          \"sidebar-foreground\": \"color-mix(in srgb, var(--color-neutral-100) 64%, var(--sidebar))\",\n          \"sidebar-primary\": \"var(--color-neutral-100)\",\n          \"sidebar-primary-foreground\": \"var(--color-neutral-800)\",\n          \"sidebar-ring\": \"var(--color-neutral-400)\"\n        },\n        \"light\": {\n          \"accent\": \"--alpha(var(--color-black) / 4%)\",\n          \"accent-foreground\": \"var(--color-neutral-800)\",\n          \"background\": \"var(--color-white)\",\n          \"border\": \"--alpha(var(--color-black) / 8%)\",\n          \"card\": \"var(--color-white)\",\n          \"card-foreground\": \"var(--color-neutral-800)\",\n          \"destructive\": \"var(--color-red-500)\",\n          \"destructive-foreground\": \"var(--color-red-700)\",\n          \"foreground\": \"var(--color-neutral-800)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-700)\",\n          \"input\": \"--alpha(var(--color-black) / 10%)\",\n          \"muted\": \"--alpha(var(--color-black) / 4%)\",\n          \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black))\",\n          \"popover\": \"var(--color-white)\",\n          \"popover-foreground\": \"var(--color-neutral-800)\",\n          \"primary\": \"var(--color-neutral-800)\",\n          \"primary-foreground\": \"var(--color-neutral-50)\",\n          \"ring\": \"var(--color-neutral-400)\",\n          \"secondary\": \"--alpha(var(--color-black) / 4%)\",\n          \"secondary-foreground\": \"var(--color-neutral-800)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-700)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-700)\",\n          \"chart-1\": \"var(--color-orange-600)\",\n          \"chart-2\": \"var(--color-teal-600)\",\n          \"chart-3\": \"var(--color-cyan-900)\",\n          \"chart-4\": \"var(--color-amber-400)\",\n          \"chart-5\": \"var(--color-amber-500)\",\n          \"code\": \"var(--color-white)\",\n          \"code-foreground\": \"var(--foreground)\",\n          \"code-highlight\": \"--alpha(var(--color-black) / 4%)\",\n          \"radius\": \"0.625rem\",\n          \"sidebar\": \"var(--color-neutral-50)\",\n          \"sidebar-accent\": \"--alpha(var(--color-black) / 4%)\",\n          \"sidebar-accent-foreground\": \"var(--color-neutral-800)\",\n          \"sidebar-border\": \"--alpha(var(--color-black) / 6%)\",\n          \"sidebar-foreground\": \"color-mix(in srgb, var(--color-neutral-800) 64%, var(--sidebar))\",\n          \"sidebar-primary\": \"var(--color-neutral-800)\",\n          \"sidebar-primary-foreground\": \"var(--color-neutral-50)\",\n          \"sidebar-ring\": \"var(--color-neutral-400)\"\n        },\n        \"theme\": {\n          \"font-heading\": \"var(--font-heading, ui-sans-serif, system-ui, sans-serif)\",\n          \"font-mono\": \"var(--font-mono, ui-monospace, monospace)\",\n          \"font-sans\": \"var(--font-sans, ui-sans-serif, system-ui, sans-serif)\"\n        }\n      },\n      \"dependencies\": [\n        \"@base-ui/react\",\n        \"class-variance-authority\",\n        \"lucide-react\"\n      ],\n      \"description\": \"Complete coss theme: colors, sidebar, fonts, and base styles. Use with `npx shadcn init @coss/style` for full project setup.\",\n      \"devDependencies\": [\n        \"tw-animate-css\"\n      ],\n      \"extends\": \"none\",\n      \"name\": \"style\",\n      \"registryDependencies\": [\n        \"utils\",\n        \"@coss/ui\"\n      ],\n      \"type\": \"registry:style\"\n    },\n    {\n      \"cssVars\": {\n        \"dark\": {\n          \"accent\": \"--alpha(var(--color-white) / 4%)\",\n          \"accent-foreground\": \"var(--color-neutral-100)\",\n          \"background\": \"color-mix(in srgb, var(--color-neutral-950) 95%, var(--color-white))\",\n          \"border\": \"--alpha(var(--color-white) / 6%)\",\n          \"card\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"card-foreground\": \"var(--color-neutral-100)\",\n          \"destructive\": \"color-mix(in srgb, var(--color-red-500) 90%, var(--color-white))\",\n          \"destructive-foreground\": \"var(--color-red-400)\",\n          \"foreground\": \"var(--color-neutral-100)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-400)\",\n          \"input\": \"--alpha(var(--color-white) / 8%)\",\n          \"muted\": \"--alpha(var(--color-white) / 4%)\",\n          \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white))\",\n          \"popover\": \"color-mix(in srgb, var(--background) 98%, var(--color-white))\",\n          \"popover-foreground\": \"var(--color-neutral-100)\",\n          \"primary\": \"var(--color-neutral-100)\",\n          \"primary-foreground\": \"var(--color-neutral-800)\",\n          \"ring\": \"var(--color-neutral-500)\",\n          \"secondary\": \"--alpha(var(--color-white) / 4%)\",\n          \"secondary-foreground\": \"var(--color-neutral-100)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-400)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-400)\"\n        },\n        \"light\": {\n          \"accent\": \"--alpha(var(--color-black) / 4%)\",\n          \"accent-foreground\": \"var(--color-neutral-800)\",\n          \"background\": \"var(--color-white)\",\n          \"border\": \"--alpha(var(--color-black) / 8%)\",\n          \"card\": \"var(--color-white)\",\n          \"card-foreground\": \"var(--color-neutral-800)\",\n          \"destructive\": \"var(--color-red-500)\",\n          \"destructive-foreground\": \"var(--color-red-700)\",\n          \"foreground\": \"var(--color-neutral-800)\",\n          \"info\": \"var(--color-blue-500)\",\n          \"info-foreground\": \"var(--color-blue-700)\",\n          \"input\": \"--alpha(var(--color-black) / 10%)\",\n          \"muted\": \"--alpha(var(--color-black) / 4%)\",\n          \"muted-foreground\": \"color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black))\",\n          \"popover\": \"var(--color-white)\",\n          \"popover-foreground\": \"var(--color-neutral-800)\",\n          \"primary\": \"var(--color-neutral-800)\",\n          \"primary-foreground\": \"var(--color-neutral-50)\",\n          \"ring\": \"var(--color-neutral-400)\",\n          \"secondary\": \"--alpha(var(--color-black) / 4%)\",\n          \"secondary-foreground\": \"var(--color-neutral-800)\",\n          \"success\": \"var(--color-emerald-500)\",\n          \"success-foreground\": \"var(--color-emerald-700)\",\n          \"warning\": \"var(--color-amber-500)\",\n          \"warning-foreground\": \"var(--color-amber-700)\"\n        }\n      },\n      \"name\": \"colors-neutral\",\n      \"type\": \"registry:style\"\n    },\n    {\n      \"dependencies\": [\n        \"clsx\",\n        \"tailwind-merge\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/lib/utils.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"utils\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/base-ui/use-render.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"use-render\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/base-ui/merge-props.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"merge-props\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/base-ui/csp-provider.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"csp-provider\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"dependencies\": [\n        \"@base-ui/react\"\n      ],\n      \"files\": [\n        {\n          \"path\": \"registry/default/base-ui/direction-provider.ts\",\n          \"type\": \"registry:lib\"\n        }\n      ],\n      \"name\": \"direction-provider\",\n      \"type\": \"registry:lib\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-media-query.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-media-query\",\n      \"type\": \"registry:hook\"\n    },\n    {\n      \"files\": [\n        {\n          \"path\": \"registry/default/hooks/use-copy-to-clipboard.ts\",\n          \"type\": \"registry:hook\"\n        }\n      ],\n      \"name\": \"use-copy-to-clipboard\",\n      \"type\": \"registry:hook\"\n    }\n  ],\n  \"name\": \"shadcn/ui\"\n}"
  },
  {
    "path": "apps/ui/scripts/build-registry.mts",
    "content": "import { exec } from \"node:child_process\";\nimport { promises as fs } from \"node:fs\";\nimport path from \"node:path\";\nimport { rimraf } from \"rimraf\";\nimport { registry } from \"../registry/index.js\";\n\ntype RegistryFile = {\n  path: string;\n  type: string;\n  target?: string;\n};\n\ntype RegistryItem = {\n  name: string;\n  description?: string;\n  type: string;\n  registryDependencies?: string[];\n  files?: RegistryFile[];\n  categories?: string[];\n  meta?: Record<string, unknown>;\n};\n\nasync function buildRegistryIndex() {\n  let index = `/* eslint-disable @typescript-eslint/ban-ts-comment */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// @ts-nocheck\n// This file is autogenerated by scripts/build-registry.ts\n// Do not edit this file directly.\nimport * as React from \"react\"\n\n// biome-ignore lint/suspicious/noExplicitAny: Auto-generated registry index with dynamic component types\nexport const Index: Record<string, any> = {`;\n  for (const item of registry.items) {\n    const resolveFiles = item.files?.map(\n      (file: RegistryFile) => `registry/default/${file.path}`,\n    );\n    if (!resolveFiles) {\n      continue;\n    }\n\n    const componentPath = item.files?.[0]?.path\n      ? `@/registry/default/${item.files[0].path}`\n      : \"\";\n\n    index += `\n  \"${item.name}\": {\n    name: \"${item.name}\",\n    description: \"${item.description ?? \"\"}\",\n    type: \"${item.type}\",\n    registryDependencies: ${JSON.stringify(item.registryDependencies)},\n    files: [${item.files?.map((file: RegistryFile) => {\n      const filePath = `registry/default/${typeof file === \"string\" ? file : file.path}`;\n      const resolvedFilePath = path.resolve(filePath);\n      return typeof file === \"string\"\n        ? `\"${resolvedFilePath}\"`\n        : `{\n      path: \"${filePath}\",\n      type: \"${file.type}\",\n      target: \"${file.target ?? \"\"}\"\n    }`;\n    })}],\n    component: ${\n      componentPath\n        ? `React.lazy(async () => {\n      const mod = await import(\"${componentPath}\")\n      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name\n      return { default: mod.default || mod[exportName] }\n    })`\n        : \"null\"\n    },\n    categories: ${JSON.stringify(item.categories)},\n    meta: ${JSON.stringify(item.meta)},\n  },`;\n  }\n\n  index += `\n  }`;\n\n  console.log(`#️⃣  ${Object.keys(registry.items).length} items found`);\n\n  // Write style index.\n  rimraf.sync(path.join(process.cwd(), \"registry/__index__.tsx\"));\n  await fs.writeFile(path.join(process.cwd(), \"registry/__index__.tsx\"), index);\n}\n\nasync function buildRegistryJsonFile() {\n  // 1. Fix the path for registry items.\n  const fixedRegistry = {\n    ...registry,\n    items: registry.items.map((item: RegistryItem) => {\n      const files = item.files?.map((file: RegistryFile) => {\n        return {\n          ...file,\n          path: `registry/default/${file.path}`,\n        };\n      });\n\n      return {\n        ...item,\n        files,\n      };\n    }),\n  };\n\n  // 2. Write the content of the registry to `registry.json`\n  rimraf.sync(path.join(process.cwd(), \"registry.json\"));\n  await fs.writeFile(\n    path.join(process.cwd(), \"registry.json\"),\n    JSON.stringify(fixedRegistry, null, 2),\n  );\n\n  // 3. Copy the registry.json to the public/r directory.\n  await fs.cp(\n    path.join(process.cwd(), \"registry.json\"),\n    path.join(process.cwd(), \"public/r/registry.json\"),\n    { recursive: true },\n  );\n}\n\nasync function buildRegistry() {\n  return new Promise((resolve, reject) => {\n    const process = exec(\n      \"bunx --bun shadcn build registry.json --output public/r\",\n    );\n\n    process.on(\"exit\", (code) => {\n      if (code === 0) {\n        resolve(undefined);\n      } else {\n        reject(new Error(`Process exited with code ${code}`));\n      }\n    });\n  });\n}\n\ntry {\n  console.log(\"🗂️ Building registry/__index__.tsx...\");\n  await buildRegistryIndex();\n\n  console.log(\"💅 Building registry.json...\");\n  await buildRegistryJsonFile();\n\n  console.log(\"🏗️ Building registry...\");\n  await buildRegistry();\n\n  console.log(\"✅ Registry build completed successfully!\");\n} catch (error) {\n  console.error(error);\n  process.exit(1);\n}\n"
  },
  {
    "path": "apps/ui/scripts/sync-ui.mts",
    "content": "import { promises as fs } from \"node:fs\";\nimport path from \"node:path\";\n\nasync function resolvePaths() {\n  const cwd = process.cwd();\n  const sourceRoot = path.join(cwd, \"registry/default\");\n  const sourceDirs = {\n    baseUi: path.join(sourceRoot, \"base-ui\"),\n    hooks: path.join(sourceRoot, \"hooks\"),\n    lib: path.join(sourceRoot, \"lib\"),\n    ui: path.join(sourceRoot, \"ui\"),\n  };\n  // From apps/ui → ../../packages/ui/src/*\n  const targetRoot = path.resolve(cwd, \"../../packages/ui/src\");\n  const targetDirs = {\n    baseUi: path.join(targetRoot, \"base-ui\"),\n    hooks: path.join(targetRoot, \"hooks\"),\n    lib: path.join(targetRoot, \"lib\"),\n    ui: path.join(targetRoot, \"components\"),\n  };\n  return { sourceDirs, sourceRoot, targetDirs, targetRoot };\n}\n\nasync function ensureDirExists(dir: string) {\n  await fs.mkdir(dir, { recursive: true });\n}\n\nasync function copyAndRewriteFile(from: string, to: string) {\n  const content = await fs.readFile(from, \"utf8\");\n\n  // Only rewrite TypeScript/JavaScript files\n  if (/(\\.tsx|\\.ts|\\.mts|\\.cts|\\.jsx|\\.js)$/.test(from)) {\n    const rewritten = rewriteImports(content);\n    await fs.writeFile(to, rewritten, \"utf8\");\n  } else {\n    // Copy non-code files as-is\n    await fs.copyFile(from, to);\n  }\n}\n\nasync function copyDirectoryRecursive(from: string, to: string) {\n  await ensureDirExists(to);\n  const entries = await fs.readdir(from, { withFileTypes: true });\n\n  for (const entry of entries) {\n    const fromPath = path.join(from, entry.name);\n    const toPath = path.join(to, entry.name);\n\n    if (entry.isDirectory()) {\n      await copyDirectoryRecursive(fromPath, toPath);\n    } else {\n      await copyAndRewriteFile(fromPath, toPath);\n    }\n  }\n}\n\nasync function copyRegistryTrees() {\n  const { sourceRoot, sourceDirs, targetDirs } = await resolvePaths();\n\n  // Validate root exists\n  try {\n    await fs.access(sourceRoot);\n  } catch {\n    throw new Error(`Source root not found: ${sourceRoot}`);\n  }\n\n  // For each subtree (ui, hooks, lib), copy if present\n  for (const key of Object.keys(sourceDirs) as (keyof typeof sourceDirs)[]) {\n    const from = sourceDirs[key];\n    const to = targetDirs[key];\n    try {\n      await fs.access(from);\n    } catch {\n      // Skip silently if the subtree doesn't exist\n      continue;\n    }\n    await copyDirectoryRecursive(from, to);\n  }\n}\n\nfunction rewriteImports(code: string): string {\n  let result = code;\n  // Rewrite paths according to rules\n  // \"@/lib/*\"        → \"@coss/ui/lib/*\"\n  // \"@/hooks/*\"      → \"@coss/ui/hooks/*\"\n  // \"@/registry/default/ui/*\" → \"@coss/ui/components/*\"\n  // \"@/registry/default/hooks/*\" → \"@coss/ui/hooks/*\"\n  // \"@/registry/default/lib/*\" → \"@coss/ui/lib/*\"\n  result = result.replace(/([\"'])@\\/lib\\//g, \"$1@coss/ui/lib/\");\n  result = result.replace(/([\"'])@\\/hooks\\//g, \"$1@coss/ui/hooks/\");\n  result = result.replace(\n    /([\"'])@\\/registry\\/default\\/ui\\//g,\n    \"$1@coss/ui/components/\",\n  );\n  result = result.replace(\n    /([\"'])@\\/registry\\/default\\/hooks\\//g,\n    \"$1@coss/ui/hooks/\",\n  );\n  result = result.replace(\n    /([\"'])@\\/registry\\/default\\/lib\\//g,\n    \"$1@coss/ui/lib/\",\n  );\n  return result;\n}\n\nasync function invalidatePackageCache() {\n  const { targetRoot } = await resolvePaths();\n  const packageJsonPath = path.join(targetRoot, \"../package.json\");\n  try {\n    // Touch package.json to invalidate Next.js module cache\n    const now = new Date();\n    await fs.utimes(packageJsonPath, now, now);\n  } catch {\n    // Ignore if package.json doesn't exist or can't be touched\n  }\n}\n\ntry {\n  console.log(\"📦 Propagating registry primitives → packages/ui/src …\");\n  const { sourceDirs, targetRoot } = await resolvePaths();\n  console.log(\"├─ Sources:\");\n  console.log(`│  ├─ UI:      ${sourceDirs.ui}`);\n  console.log(`│  ├─ Hooks:   ${sourceDirs.hooks}`);\n  console.log(`│  ├─ Lib:    ${sourceDirs.lib}`);\n  console.log(`│  └─ Base UI: ${sourceDirs.baseUi}`);\n  console.log(`└─ Target root: ${targetRoot}`);\n\n  await copyRegistryTrees();\n  await invalidatePackageCache();\n\n  console.log(\n    \"✅ UI primitives synced successfully! (imports rewritten during copy)\",\n  );\n} catch (error) {\n  console.error(error);\n  process.exit(1);\n}\n"
  },
  {
    "path": "apps/ui/scripts/validate-registry-deps.mts",
    "content": "import { promises as fs } from \"node:fs\";\nimport path from \"node:path\";\n\n// Path to particles directory\nconst particlesDir = path.join(process.cwd(), \"registry/default/particles\");\n\n// Path to registry UI components directory\nconst registryUIDir = path.join(process.cwd(), \"registry/default/ui\");\n\n// Path to registry hooks directory\nconst registryHooksDir = path.join(process.cwd(), \"registry/default/hooks\");\n\n// Path to registry lib directory\nconst registryLibDir = path.join(process.cwd(), \"registry/default/lib\");\n\n// Path to registry files\nconst registryParticlesFile = path.join(\n  process.cwd(),\n  \"registry/registry-particles.ts\",\n);\nconst registryUIFile = path.join(process.cwd(), \"registry/registry-ui.ts\");\n\n// Map component name to @coss package name\nfunction getRegistryPackageName(componentName: string): string {\n  return `@coss/${componentName}`;\n}\n\n// Extract component name from file path\nfunction getComponentName(filePath: string): string {\n  const basename = path.basename(filePath, \".tsx\");\n  return basename;\n}\n\n// Parse imports from a TypeScript file\nfunction parseImports(content: string): {\n  registryDependencies: string[];\n  dependencies: string[];\n  importPaths: string[]; // Keep track of full import paths for dependency checking\n} {\n  const registryDeps = new Set<string>();\n  const deps = new Set<string>();\n  const importPaths: string[] = [];\n\n  // Match import statements - more comprehensive pattern\n  const importRegex =\n    /import\\s+(?:type\\s+)?(?:[\\w*{}\\s,]+from\\s+)?[\"']([^\"']+)[\"']/g;\n  let match: RegExpExecArray | null = importRegex.exec(content);\n\n  while (match !== null) {\n    const importPath = match[1];\n    importPaths.push(importPath);\n    match = importRegex.exec(content);\n\n    // Check if it's a registry UI component import (@/registry/default/ui/*)\n    const registryUIMatch = importPath.match(\n      /@\\/registry\\/default\\/ui\\/([^/]+)/,\n    );\n    if (registryUIMatch) {\n      const componentName = registryUIMatch[1];\n      registryDeps.add(getRegistryPackageName(componentName));\n      continue;\n    }\n\n    // Check if it's a registry hook import (@/registry/default/hooks/*)\n    const registryHookMatch = importPath.match(\n      /@\\/registry\\/default\\/hooks\\/([^/]+)/,\n    );\n    if (registryHookMatch) {\n      const hookName = registryHookMatch[1].replace(/\\.ts$/, \"\"); // Remove .ts extension if present\n      registryDeps.add(getRegistryPackageName(hookName));\n      continue;\n    }\n\n    // Check if it's a registry lib import (@/registry/default/lib/*)\n    const registryLibMatch = importPath.match(\n      /@\\/registry\\/default\\/lib\\/([^/]+)/,\n    );\n    if (registryLibMatch) {\n      const libName = registryLibMatch[1].replace(/\\.ts$/, \"\"); // Remove .ts extension if present\n      // Skip utils as it's a common utility file that shouldn't be treated as a dependency\n      if (libName !== \"utils\") {\n        registryDeps.add(getRegistryPackageName(libName));\n      }\n      continue;\n    }\n\n    // Check if it's already a @coss import\n    if (importPath.startsWith(\"@coss/\")) {\n      // Skip @coss/utils as it's a common utility that shouldn't be treated as a dependency\n      if (importPath !== \"@coss/utils\") {\n        registryDeps.add(importPath);\n      }\n      continue;\n    }\n\n    // Check if it's a relative import (skip)\n    if (importPath.startsWith(\".\") || importPath.startsWith(\"/\")) {\n      continue;\n    }\n\n    // Check if it's an alias import that might be a component\n    if (importPath.startsWith(\"@/\")) {\n      // Could be @/components/ui/* or similar - skip for now\n      continue;\n    }\n\n    // Everything else is an external dependency\n    // Extract package name (handle scoped packages like @radix-ui/react-accordion)\n    const packageMatch = importPath.match(/^(@?[^/]+(?:\\/[^/]+)?)/);\n    if (packageMatch) {\n      const packageName = packageMatch[1];\n      // Skip built-in modules, React, Next.js, lucide-react, and class-variance-authority\n      if (\n        !packageName.startsWith(\"node:\") &&\n        packageName !== \"react\" &&\n        packageName !== \"react-dom\" &&\n        packageName !== \"lucide-react\" &&\n        packageName !== \"next\" &&\n        packageName !== \"class-variance-authority\" &&\n        !packageName.startsWith(\"react/\") &&\n        !packageName.startsWith(\"react-dom/\") &&\n        !importPath.startsWith(\"next/\")\n      ) {\n        // Store the full import path, not just the package name, for better dependency checking\n        deps.add(importPath);\n      }\n    }\n  }\n\n  return {\n    dependencies: Array.from(deps).sort(),\n    importPaths,\n    registryDependencies: Array.from(registryDeps).sort(),\n  };\n}\n\n// Extract registryDependencies and dependencies from registry item\nfunction extractRegistryItemDeps(itemContent: string): {\n  registryDependencies: string[];\n  dependencies: string[];\n} {\n  const regDeps: string[] = [];\n  const deps: string[] = [];\n\n  // Extract registryDependencies\n  const regDepsMatch = itemContent.match(\n    /registryDependencies:\\s*\\[([^\\]]*)\\]/,\n  );\n  if (regDepsMatch) {\n    regDepsMatch[1].split(\",\").forEach((item) => {\n      const cleaned = item.trim().replace(/[\"']/g, \"\").replace(/\\n/g, \"\");\n      // Skip @coss/utils as it's a common utility that shouldn't be validated\n      if (cleaned && cleaned !== \"@coss/utils\") {\n        regDeps.push(cleaned);\n      }\n    });\n  }\n\n  // Extract dependencies (exclude lucide-react, next, and class-variance-authority)\n  const depsMatch = itemContent.match(/dependencies:\\s*\\[([^\\]]*)\\]/);\n  if (depsMatch) {\n    depsMatch[1].split(\",\").forEach((item) => {\n      const cleaned = item.trim().replace(/[\"']/g, \"\").replace(/\\n/g, \"\");\n      if (\n        cleaned &&\n        cleaned !== \"lucide-react\" &&\n        cleaned !== \"next\" &&\n        cleaned !== \"class-variance-authority\"\n      ) {\n        deps.push(cleaned);\n      }\n    });\n  }\n\n  return {\n    dependencies: deps.sort(),\n    registryDependencies: regDeps.sort(),\n  };\n}\n\n// Cache for registry component imports to avoid reading files multiple times\nconst registryComponentImportsCache = new Map<string, Set<string>>();\n\n// Get all imports from a registry component file (UI, hook, or lib)\nasync function getRegistryComponentImports(\n  componentName: string,\n): Promise<Set<string>> {\n  // Check cache first\n  const cached = registryComponentImportsCache.get(componentName);\n  if (cached) {\n    return cached;\n  }\n\n  const imports = new Set<string>();\n\n  // Try to find the file in UI, hooks, or lib directories\n  const possiblePaths = [\n    path.join(registryUIDir, `${componentName}.tsx`),\n    path.join(registryHooksDir, `${componentName}.ts`),\n    path.join(registryLibDir, `${componentName}.ts`),\n  ];\n\n  for (const filePath of possiblePaths) {\n    try {\n      const content = await fs.readFile(filePath, \"utf8\");\n      // Extract all import paths\n      const importRegex =\n        /import\\s+(?:type\\s+)?(?:[\\w*{}\\s,]+from\\s+)?[\"']([^\"']+)[\"']/g;\n      let match: RegExpExecArray | null = importRegex.exec(content);\n\n      while (match !== null) {\n        imports.add(match[1]);\n        match = importRegex.exec(content);\n      }\n      // If we successfully read the file, break\n      break;\n    } catch (_error) {}\n  }\n\n  registryComponentImportsCache.set(componentName, imports);\n  return imports;\n}\n\n// Check if a dependency is covered by any of the registry dependencies\n// by checking if the registry UI component files actually import it\nasync function isDependencyCoveredByRegistry(\n  dep: string,\n  registryDeps: string[],\n): Promise<boolean> {\n  // For each registry dependency, check if its component file imports this dependency\n  for (const regDep of registryDeps) {\n    // Extract component name from @coss/component-name\n    const componentMatch = regDep.match(/@coss\\/(.+)/);\n    if (!componentMatch) continue;\n\n    const componentName = componentMatch[1];\n    const componentImports = await getRegistryComponentImports(componentName);\n\n    // Check if the dependency (or a parent package) is imported\n    // For example, if dep is \"@base-ui/react/autocomplete\"\n    // and component imports \"@base-ui/react/autocomplete\", it's covered\n    // Or if dep is \"@base-ui/react\" and component imports any \"@base-ui/react/*\", it's covered\n    if (componentImports.has(dep)) {\n      return true;\n    }\n\n    // Check if the dependency is a parent package of any import\n    // e.g., dep is \"@base-ui/react\" and component imports \"@base-ui/react/autocomplete\"\n    if (!dep.includes(\"/\")) {\n      // If dep is a base package, check if any import starts with it\n      for (const importPath of componentImports) {\n        if (importPath.startsWith(`${dep}/`) || importPath === dep) {\n          return true;\n        }\n      }\n    }\n  }\n\n  return false;\n}\n\n// Filter out dependencies that are already covered by registry dependencies\n// Note: We don't filter based on base packages here because dependencyMatches handles that during comparison\nasync function filterDependenciesCoveredByRegistry(\n  dependencies: string[],\n  registryDependencies: string[],\n): Promise<string[]> {\n  const filtered: string[] = [];\n  for (const dep of dependencies) {\n    // Check if it's covered by a registry component's imports\n    const isCoveredByRegistry = await isDependencyCoveredByRegistry(\n      dep,\n      registryDependencies,\n    );\n    if (isCoveredByRegistry) {\n      continue;\n    }\n\n    filtered.push(dep);\n  }\n  return filtered;\n}\n\n// Check if a dependency matches (handles sub-paths like @base-ui/react/accordion matching @base-ui/react)\nfunction dependencyMatches(expected: string, actual: string): boolean {\n  if (expected === actual) return true;\n\n  // Check if expected is a sub-path of actual (e.g., @base-ui/react/accordion matches @base-ui/react)\n  if (expected.startsWith(`${actual}/`)) return true;\n\n  // Check if actual is a sub-path of expected (e.g., @base-ui/react matches @base-ui/react/accordion)\n  if (actual.startsWith(`${expected}/`)) return true;\n\n  return false;\n}\n\n// Compare two arrays and return differences (with sub-path matching)\nfunction compareArrays(\n  expected: string[],\n  actual: string[],\n): { missing: string[]; extra: string[] } {\n  const missing: string[] = [];\n  const extra: string[] = [];\n\n  // Find missing items (in expected but not in actual, accounting for sub-paths)\n  for (const exp of expected) {\n    const found = actual.some((act) => dependencyMatches(exp, act));\n    if (!found) {\n      missing.push(exp);\n    }\n  }\n\n  // Find extra items (in actual but not in expected, accounting for sub-paths)\n  for (const act of actual) {\n    const found = expected.some((exp) => dependencyMatches(exp, act));\n    if (!found) {\n      extra.push(act);\n    }\n  }\n\n  return { extra, missing };\n}\n\n// Find object boundaries in registry content for a given component name\nfunction findRegistryItemBounds(\n  componentName: string,\n  registryContent: string,\n): { start: number; end: number } | null {\n  const namePattern = new RegExp(\n    `name:\\\\s*\"${componentName.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")}\"`,\n  );\n  const nameMatch = registryContent.match(namePattern);\n\n  if (!nameMatch || nameMatch.index === undefined) {\n    return null;\n  }\n\n  const nameMatchIndex = nameMatch.index;\n  let objStart = -1;\n  let depth = 0;\n  let inString = false;\n  let stringChar = \"\";\n\n  // Find opening brace\n  for (let i = nameMatchIndex - 1; i >= 0; i--) {\n    const char = registryContent[i];\n    const prevChar = i > 0 ? registryContent[i - 1] : \"\";\n\n    if (!inString && (char === '\"' || char === \"'\")) {\n      inString = true;\n      stringChar = char;\n    } else if (inString && char === stringChar && prevChar !== \"\\\\\") {\n      inString = false;\n    } else if (!inString) {\n      if (char === \"}\") {\n        depth++;\n      } else if (char === \"{\") {\n        if (depth === 0) {\n          objStart = i;\n          break;\n        }\n        depth--;\n      }\n    }\n  }\n\n  if (objStart === -1) {\n    return null;\n  }\n\n  // Find closing brace\n  depth = 0;\n  inString = false;\n  stringChar = \"\";\n  let objEnd = objStart;\n\n  while (objEnd < registryContent.length) {\n    const char = registryContent[objEnd];\n    const prevChar = objEnd > 0 ? registryContent[objEnd - 1] : \"\";\n\n    if (!inString && (char === '\"' || char === \"'\")) {\n      inString = true;\n      stringChar = char;\n    } else if (inString && char === stringChar && prevChar !== \"\\\\\") {\n      inString = false;\n    } else if (!inString) {\n      if (char === \"{\") depth++;\n      if (char === \"}\") {\n        depth--;\n        if (depth === 0) {\n          objEnd++;\n          break;\n        }\n      }\n    }\n    objEnd++;\n  }\n\n  return { end: objEnd, start: objStart };\n}\n\n// Report validation errors for a component\nfunction reportValidationErrors(\n  componentName: string,\n  regDepsDiff: { missing: string[]; extra: string[] },\n  depsDiff: { missing: string[]; extra: string[] },\n  expectedRegDeps: string[],\n  actualRegDeps: string[],\n  filteredExpectedDeps: string[],\n  actualDeps: string[],\n): void {\n  console.log(`❌ ${componentName}:`);\n\n  const hasRegDepsIssues =\n    regDepsDiff.missing.length > 0 || regDepsDiff.extra.length > 0;\n  const hasDepsIssues =\n    depsDiff.missing.length > 0 || depsDiff.extra.length > 0;\n\n  if (hasRegDepsIssues) {\n    if (regDepsDiff.missing.length > 0) {\n      console.log(\n        `   Missing registryDependencies: ${regDepsDiff.missing.join(\", \")}`,\n      );\n    }\n    if (regDepsDiff.extra.length > 0) {\n      console.log(\n        `   Extra registryDependencies: ${regDepsDiff.extra.join(\", \")}`,\n      );\n    }\n    console.log(`   Expected: [${expectedRegDeps.join(\", \")}]`);\n    console.log(`   Actual: [${actualRegDeps.join(\", \")}]`);\n  }\n\n  if (hasDepsIssues) {\n    if (depsDiff.missing.length > 0) {\n      console.log(`   Missing dependencies: ${depsDiff.missing.join(\", \")}`);\n    }\n    if (depsDiff.extra.length > 0) {\n      console.log(`   Extra dependencies: ${depsDiff.extra.join(\", \")}`);\n    }\n    console.log(`   Expected: [${filteredExpectedDeps.join(\", \")}]`);\n    console.log(`   Actual: [${actualDeps.join(\", \")}]`);\n  }\n\n  console.log(\"\");\n}\n\n// Validate a single registry item\nasync function validateRegistryItem(\n  componentName: string,\n  componentFile: string,\n  registryContent: string,\n): Promise<boolean> {\n  const content = await fs.readFile(componentFile, \"utf8\");\n  const { registryDependencies: expectedRegDeps, dependencies: expectedDeps } =\n    parseImports(content);\n\n  const bounds = findRegistryItemBounds(componentName, registryContent);\n  if (!bounds) {\n    console.log(`❌ ${componentName}: Not found in registry`);\n    return false;\n  }\n\n  const itemContent = registryContent.substring(bounds.start, bounds.end);\n  const { registryDependencies: actualRegDeps, dependencies: actualDeps } =\n    extractRegistryItemDeps(itemContent);\n\n  const filteredExpectedDeps = await filterDependenciesCoveredByRegistry(\n    expectedDeps,\n    expectedRegDeps,\n  );\n\n  const regDepsDiff = compareArrays(expectedRegDeps, actualRegDeps);\n  const depsDiff = compareArrays(filteredExpectedDeps, actualDeps);\n\n  const hasIssues =\n    regDepsDiff.missing.length > 0 ||\n    regDepsDiff.extra.length > 0 ||\n    depsDiff.missing.length > 0 ||\n    depsDiff.extra.length > 0;\n\n  if (hasIssues) {\n    reportValidationErrors(\n      componentName,\n      regDepsDiff,\n      depsDiff,\n      expectedRegDeps,\n      actualRegDeps,\n      filteredExpectedDeps,\n      actualDeps,\n    );\n    return false;\n  }\n\n  return true;\n}\n\n// Validate a set of files against a registry file\nasync function validateFiles(\n  files: string[],\n  fileDir: string,\n  registryFile: string,\n  getName: (file: string) => string,\n  label: string,\n): Promise<number> {\n  console.log(`  Found ${files.length} ${label} files\\n`);\n\n  const registryContent = await fs.readFile(registryFile, \"utf8\");\n  let errors = 0;\n\n  for (const file of files) {\n    const filePath = path.join(fileDir, file);\n    const componentName = getName(file);\n    const isValid = await validateRegistryItem(\n      componentName,\n      filePath,\n      registryContent,\n    );\n    if (!isValid) {\n      errors++;\n    }\n  }\n\n  return errors;\n}\n\nasync function validateRegistryDependencies() {\n  console.log(\"🔍 Validating registry dependencies...\\n\");\n\n  // Validate particles\n  const particleFiles = await fs.readdir(particlesDir);\n  const tsxFiles = particleFiles.filter(\n    (file) => file.endsWith(\".tsx\") && file.startsWith(\"p-\"),\n  );\n\n  const particleErrors = await validateFiles(\n    tsxFiles,\n    particlesDir,\n    registryParticlesFile,\n    getComponentName,\n    \"particle\",\n  );\n\n  // Validate UI components\n  const uiFiles = await fs.readdir(registryUIDir);\n  const uiTsxFiles = uiFiles.filter((file) => file.endsWith(\".tsx\"));\n\n  const uiErrors = await validateFiles(\n    uiTsxFiles,\n    registryUIDir,\n    registryUIFile,\n    (file) => path.basename(file, \".tsx\"),\n    \"UI component\",\n  );\n\n  const totalErrors = particleErrors + uiErrors;\n\n  if (totalErrors === 0) {\n    console.log(\"✅ All registry dependencies are correct!\");\n  } else {\n    console.log(\n      `\\n❌ Found ${totalErrors} item(s) with mismatched dependencies`,\n    );\n    process.exit(1);\n  }\n}\n\ntry {\n  await validateRegistryDependencies();\n} catch (error) {\n  console.error(\"❌ Error:\", error);\n  process.exit(1);\n}\n"
  },
  {
    "path": "apps/ui/source.config.ts",
    "content": "import { transformers } from \"@coss/ui/lib/highlight-code\";\nimport {\n  defineConfig,\n  defineDocs,\n  frontmatterSchema,\n} from \"fumadocs-mdx/config\";\nimport rehypePrettyCode from \"rehype-pretty-code\";\nimport { z } from \"zod\";\n\nexport default defineConfig({\n  mdxOptions: {\n    rehypePlugins: (plugins) => {\n      plugins.shift();\n      plugins.push([\n        // biome-ignore lint/suspicious/noExplicitAny: known\n        rehypePrettyCode as any,\n        {\n          theme: {\n            dark: \"github-dark\",\n            light: \"github-light-default\",\n          },\n          transformers,\n        },\n      ]);\n\n      return plugins;\n    },\n  },\n});\n\nexport const docs = defineDocs({\n  dir: \"content/docs\",\n  docs: {\n    schema: frontmatterSchema.extend({\n      links: z\n        .object({\n          api: z.string().optional(),\n          doc: z.string().optional(),\n        })\n        .optional(),\n    }),\n  },\n});\n"
  },
  {
    "path": "apps/ui/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"declaration\": false,\n    \"declarationMap\": false,\n    \"esModuleInterop\": true,\n    \"paths\": {\n      \"@/*\": [\"./*\"],\n      \"@coss/ui/*\": [\"../../packages/ui/src/*\"],\n      \"@source/*\": [\"./.source/*\"]\n    }\n  },\n  \"exclude\": [\"node_modules\"],\n  \"extends\": \"@coss/typescript-config/nextjs.json\",\n  \"include\": [\n    \"next-env.d.ts\",\n    \"next.config.ts\",\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \".next/types/**/*.ts\"\n  ]\n}\n"
  },
  {
    "path": "apps/ui/tsconfig.scripts.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"compilerOptions\": {\n    \"allowImportingTsExtensions\": true,\n    \"esModuleInterop\": true,\n    \"isolatedModules\": false,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"node\",\n    \"target\": \"ES2017\",\n    \"types\": [\"node\"]\n  },\n  \"exclude\": [\"node_modules\"],\n  \"extends\": \"./tsconfig.json\",\n  \"include\": [\"scripts/**/*.{ts,mts}\"]\n}\n"
  },
  {
    "path": "apps/www/.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\n.source"
  },
  {
    "path": "apps/www/README.md",
    "content": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n"
  },
  {
    "path": "apps/www/app/auth/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com auth\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.auth.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const users = `// Register a new user\nawait coss.auth.users.register({\n  email: 'jane@example.com',\n  password: 'securePassword123',\n});\n\n// Log in a user\nawait coss.auth.users.login({\n  email: 'jane@example.com',\n  password: 'securePassword123',\n});\n\n// Retrieve user profile\nawait coss.auth.users.retrieve('user_abc123');\n\n// Update user profile\nawait coss.auth.users.update('user_abc123', {\n  name: 'Jane Doe',\n});\n\n// Delete user\nawait coss.auth.users.delete('user_abc123');`;\n\n  const sessions = `// Validate session token\nconst session = await coss.auth.sessions.validate('session_token_123');\n\n// Log out\nawait coss.auth.sessions.logout('session_token_123');`;\n\n  const passwordReset = `// Request password reset email\nawait coss.auth.passwords.requestReset({\n  email: 'jane@example.com',\n});\n\n// Confirm password reset\nawait coss.auth.passwords.confirmReset({\n  token: 'reset_token_123',\n  newPassword: 'newSecurePassword456',\n});`;\n\n  const webhooks = `// Webhook events\ncoss.auth.webhooks.on('user.registered', (event) => {\n  console.log('New user registered:', event.data);\n});\n\ncoss.auth.webhooks.on('user.deleted', (event) => {\n  console.log('User deleted:', event.data);\n});`;\n\n  const utilities = `// Validate webhook signature\nconst isValid = coss.auth.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['coss-auth-signature'],\n  secret: 'whsec_auth_123',\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Users\n        </h2>\n        <CodeBlock code={users} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Sessions\n        </h2>\n        <CodeBlock code={sessions} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Password Reset\n        </h2>\n        <CodeBlock code={passwordReset} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhooks\n        </h2>\n        <CodeBlock code={webhooks} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Utilities\n        </h2>\n        <CodeBlock code={utilities} copyButton={false} language=\"tsx\" />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/auth copy/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com auth\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.auth.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const users = `// Register a new user\nawait coss.auth.users.register({\n  email: 'jane@example.com',\n  password: 'securePassword123',\n});\n\n// Log in a user\nawait coss.auth.users.login({\n  email: 'jane@example.com',\n  password: 'securePassword123',\n});\n\n// Retrieve user profile\nawait coss.auth.users.retrieve('user_abc123');\n\n// Update user profile\nawait coss.auth.users.update('user_abc123', {\n  name: 'Jane Doe',\n});\n\n// Delete user\nawait coss.auth.users.delete('user_abc123');`;\n\n  const sessions = `// Validate session token\nconst session = await coss.auth.sessions.validate('session_token_123');\n\n// Log out\nawait coss.auth.sessions.logout('session_token_123');`;\n\n  const passwordReset = `// Request password reset email\nawait coss.auth.passwords.requestReset({\n  email: 'jane@example.com',\n});\n\n// Confirm password reset\nawait coss.auth.passwords.confirmReset({\n  token: 'reset_token_123',\n  newPassword: 'newSecurePassword456',\n});`;\n\n  const webhooks = `// Webhook events\ncoss.auth.webhooks.on('user.registered', (event) => {\n  console.log('New user registered:', event.data);\n});\n\ncoss.auth.webhooks.on('user.deleted', (event) => {\n  console.log('User deleted:', event.data);\n});`;\n\n  const utilities = `// Validate webhook signature\nconst isValid = coss.auth.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['coss-auth-signature'],\n  secret: 'whsec_auth_123',\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Users\n        </h2>\n        <CodeBlock code={users} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Sessions\n        </h2>\n        <CodeBlock code={sessions} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Password Reset\n        </h2>\n        <CodeBlock code={passwordReset} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhooks\n        </h2>\n        <CodeBlock code={webhooks} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Utilities\n        </h2>\n        <CodeBlock code={utilities} copyButton={false} language=\"tsx\" />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/calendar/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com calendar\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.calendar.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const authorization = `// Generate an OAuth link for Google Calendar\nconst authUrl = coss.calendar.auth.getAuthUrl({\n  provider: 'google',\n  redirectUri: 'https://yourapp.com/callback',\n});\n\n// Exchange authorization code for access tokens\nawait coss.calendar.auth.exchangeCode({\n  provider: 'google',\n  code: 'authorization_code_here',\n  redirectUri: 'https://yourapp.com/callback',\n});`;\n\n  const calendars = `// List calendars\nawait coss.calendar.calendars.list({\n  provider: 'google',\n});\n\n// Retrieve a calendar\nawait coss.calendar.calendars.retrieve({\n  provider: 'google',\n  calendarId: 'primary',\n});`;\n\n  const events = `// Create an event\nawait coss.calendar.events.create({\n  provider: 'google',\n  calendarId: 'primary',\n  event: {\n    summary: 'Meeting with Jane',\n    description: 'Discuss project updates',\n    start: { dateTime: '2025-05-01T10:00:00Z' },\n    end: { dateTime: '2025-05-01T11:00:00Z' },\n  },\n});\n\n// List events\nawait coss.calendar.events.list({\n  provider: 'google',\n  calendarId: 'primary',\n});\n\n// Update an event\nawait coss.calendar.events.update({\n  provider: 'google',\n  calendarId: 'primary',\n  eventId: 'event_abc123',\n  updates: {\n    description: 'Updated project discussion details',\n  },\n});\n\n// Delete an event\nawait coss.calendar.events.delete({\n  provider: 'google',\n  calendarId: 'primary',\n  eventId: 'event_abc123',\n});`;\n\n  const webhooks = `// Webhook events\ncoss.calendar.webhooks.on('event.created', (event) => {\n  console.log('Event created:', event.data);\n});\n\ncoss.calendar.webhooks.on('event.updated', (event) => {\n  console.log('Event updated:', event.data);\n});\n\ncoss.calendar.webhooks.on('event.deleted', (event) => {\n  console.log('Event deleted:', event.data);\n});`;\n\n  const utilities = `// Validate webhook signature\nconst isValid = coss.calendar.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['coss-calendar-signature'],\n  secret: 'whsec_calendar_123',\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Authorization\n        </h2>\n        <CodeBlock code={authorization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Calendars\n        </h2>\n        <CodeBlock code={calendars} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Events\n        </h2>\n        <CodeBlock code={events} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhooks\n        </h2>\n        <CodeBlock code={webhooks} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Utilities\n        </h2>\n        <CodeBlock code={utilities} copyButton={false} language=\"tsx\" />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/email/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com email\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.email.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const sendingEmails = `// Send a transactional email\nawait coss.email.send({\n  from: 'noreply@yourapp.com',\n  to: 'user@example.com',\n  subject: 'Welcome to Our App!',\n  text: 'Thanks for signing up.',\n  html: '<p>Thanks for signing up.</p>',\n});`;\n\n  const domains = `// Create and verify a sending domain\nawait coss.email.domains.create({\n  domain: 'yourapp.com',\n});\n\n// List verified domains\nawait coss.email.domains.list();\n\n// Delete a domain\nawait coss.email.domains.delete('domain_abc123');`;\n\n  const templates = `// Create an email template\nawait coss.email.templates.create({\n  name: 'Welcome Template',\n  subject: 'Welcome!',\n  html: '<h1>Welcome {{name}}</h1>',\n});\n\n// Retrieve a template\nawait coss.email.templates.retrieve('tmpl_abc123');\n\n// Update a template\nawait coss.email.templates.update('tmpl_abc123', {\n  html: '<h1>Hello {{name}}!</h1>',\n});\n\n// Delete a template\nawait coss.email.templates.delete('tmpl_abc123');`;\n\n  const webhooks = `// Webhook events\ncoss.email.webhooks.on('email.delivered', (event) => {\n  console.log('Email delivered:', event.data);\n});\n\ncoss.email.webhooks.on('email.bounced', (event) => {\n  console.log('Email bounced:', event.data);\n});`;\n\n  const utilities = `// Validate webhook signature\nconst isValid = coss.email.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['coss-email-infra-signature'],\n  secret: 'whsec_email_123',\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Sending Emails\n        </h2>\n        <CodeBlock code={sendingEmails} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Domains\n        </h2>\n        <CodeBlock code={domains} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Templates\n        </h2>\n        <CodeBlock code={templates} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhooks\n        </h2>\n        <CodeBlock code={webhooks} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Utilities\n        </h2>\n        <CodeBlock code={utilities} copyButton={false} language=\"tsx\" />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/globals.css",
    "content": "@import \"@coss/ui/globals.css\";\n"
  },
  {
    "path": "apps/www/app/layout.tsx",
    "content": "import \"./globals.css\";\n\nimport { fontHeading, fontMono, fontSans } from \"@coss/ui/fonts\";\nimport { SiteCta } from \"@coss/ui/shared/site-cta\";\nimport { SiteFooter } from \"@coss/ui/shared/site-footer\";\nimport { SiteHeader } from \"@coss/ui/shared/site-header\";\nimport { ThemeProvider } from \"@coss/ui/shared/theme-provider\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"coss.com - the everything but AI company\",\n  metadataBase: new URL(\"https://coss.com\"),\n  title: \"coss.com\",\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={`${fontSans.variable} ${fontHeading.variable} ${fontMono.variable} relative bg-sidebar font-sans text-foreground antialiased`}\n      >\n        <ThemeProvider>\n          <div className=\"relative isolate flex min-h-svh flex-col overflow-clip [--header-height:4rem]\">\n            <div\n              aria-hidden=\"true\"\n              className=\"container pointer-events-none absolute inset-0 z-45 before:absolute before:inset-y-0 before:-left-3 before:w-px before:bg-border/64 after:absolute after:inset-y-0 after:-right-3 after:w-px after:bg-border/64\"\n            />\n            <div\n              aria-hidden=\"true\"\n              className=\"container pointer-events-none fixed inset-0 z-45 before:absolute before:top-[calc(var(--header-height)-4.5px)] before:-left-[11.5px] before:z-1 before:-ml-1 before:size-2 before:rounded-[2px] before:border before:border-border before:bg-popover before:bg-clip-padding before:shadow-xs after:absolute after:top-[calc(var(--header-height)-4.5px)] after:-right-[11.5px] after:z-1 after:-mr-1 after:size-2 after:rounded-[2px] after:border after:border-border after:bg-background after:bg-clip-padding after:shadow-xs dark:after:bg-clip-border dark:before:bg-clip-border\"\n            />\n            <SiteHeader />\n            {children}\n            <SiteCta />\n            <SiteFooter />\n          </div>\n        </ThemeProvider>\n      </body>\n    </html>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/not-found.tsx",
    "content": "import { Button } from \"@coss/ui/components/button\";\nimport {\n  PageHeader,\n  PageHeaderDescription,\n  PageHeaderHeading,\n} from \"@coss/ui/shared/page-header\";\nimport { ArrowLeftIcon } from \"lucide-react\";\nimport type { Metadata } from \"next\";\nimport Link from \"next/link\";\n\nexport const metadata: Metadata = {\n  description:\n    \"The page you're looking for doesn't exist or may have been moved.\",\n  title: \"Page Not Found\",\n};\n\nexport default function NotFound() {\n  return (\n    <div className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <PageHeader>\n        <PageHeaderHeading>Page Not Found</PageHeaderHeading>\n        <PageHeaderDescription>\n          The page you&apos;re looking for doesn&apos;t exist or may have been\n          moved.\n        </PageHeaderDescription>\n        <div className=\"mt-4\">\n          <Button\n            className=\"group\"\n            render={\n              <Link href=\"/\">\n                <ArrowLeftIcon\n                  aria-hidden=\"true\"\n                  className=\"-ms-1 opacity-60 transition-transform group-hover:-translate-x-0.5\"\n                />\n                Back to Home\n              </Link>\n            }\n            size=\"lg\"\n          />\n        </div>\n      </PageHeader>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/notifications/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com notifications\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.notifications.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const subscribers = `// Create a subscriber\nawait coss.notifications.subscribers.create({\n  subscriberId: 'user_abc123',\n  email: 'jane@example.com',\n  phone: '+15551234567',\n  firstName: 'Jane',\n  lastName: 'Doe',\n});\n\n// Retrieve a subscriber\nawait coss.notifications.subscribers.retrieve('user_abc123');`;\n\n  const workflows = `// Trigger a notification workflow\nawait coss.notifications.workflows.trigger({\n  name: 'welcome_message',\n  to: {\n    subscriberId: 'user_abc123',\n  },\n  payload: {\n    customMessage: 'Welcome to our service!',\n  },\n});`;\n\n  const webhookVerification = `// Validate webhook signature\nconst isValid = coss.notifications.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['x-coss-signature'],\n  secret: 'whsec_notifications_123',\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Subscribers\n        </h2>\n        <CodeBlock code={subscribers} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Workflows\n        </h2>\n        <CodeBlock code={workflows} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhook Verification\n        </h2>\n        <CodeBlock\n          code={webhookVerification}\n          copyButton={false}\n          language=\"tsx\"\n        />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport { PageHeader, PageHeaderHeading } from \"@coss/ui/shared/page-header\";\n\nexport default async function Page() {\n  const code = `\"dependencies\": {\n  \"@coss/auth\": \"1.18.6\",\n  \"@coss/video\": \"1.18.6\",\n  \"@coss/calendar\": \"1.18.6\",\n  \"@coss/mail\": \"1.18.6\",\n  \"@coss/sms\": \"1.18.6\",\n  \"@coss/payments\": \"1.18.6\"\n},`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <PageHeader>\n        <PageHeaderHeading>\n          the{\" \"}\n          <span className=\"relative z-4 before:pointer-events-none before:absolute before:-inset-x-1 before:inset-y-0 before:z-4 before:-rotate-1 before:bg-linear-to-r before:from-blue-500 before:via-purple-500 before:to-orange-500 before:opacity-16 before:mix-blend-hard-light\">\n            everything but AI\n          </span>{\" \"}\n          company.\n        </PageHeaderHeading>\n      </PageHeader>\n      <div className=\"mx-auto max-w-2xl text-muted-foreground [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <p className=\"not-first:mt-6 leading-relaxed\">dear friend,</p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          <strong className=\"font-medium\">open source</strong> is the foundation\n          of all modern software. every app, website, and system we use today is\n          built on open source. it is the most important driver of global GDP\n          growth, powering innovation and businesses worldwide.\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          but building and maintaining open source is not easy. for open source\n          to thrive, we need a sustainable model. that&apos;s where{\" \"}\n          <strong className=\"font-medium\">\n            commercial open source software (coss)\n          </strong>{\" \"}\n          can come in: one of the best ways to create open, future-proof\n          software while ensuring long-term success.\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          <a\n            className=\"font-medium underline underline-offset-4\"\n            href=\"https://coss.com\"\n          >\n            coss.com\n          </a>{\" \"}\n          is the new holding company of{\" \"}\n          <a\n            className=\"font-medium underline underline-offset-4\"\n            href=\"https://cal.com\"\n          >\n            cal.com\n          </a>\n          , the pioneers of open source scheduling infrastructure and cal.com\n          continues to be the &apos;google search&apos; of our alphabet.\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          our mission is to build a home for amazing open source projects,\n          giving them the support they need to grow and succeed.\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          for developers we are building the coss stack, a one line{\" \"}\n          <code className=\"relative z-10 inline-block px-[0.3rem] py-[0.2rem] font-mono text-primary-foreground text-sm outline-none before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-rotate-1 before:rounded-xs before:bg-primary\">\n            npm install @coss\n          </code>{\" \"}\n          package that includes everything you need to build your application,\n          from email, sms, calendar APIs, scheduling, video conferencing,\n          notifications and more.\n        </p>\n\n        <CodeBlock\n          code={code}\n          copyButton={false}\n          language=\"json\"\n          showLineNumbers={false}\n          title=\"package.json\"\n        />\n\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          to achieve that, we are partnering up with the best-in-class coss\n          companies in the space to offer a unified infrastructure API, react\n          package and a single{\" \"}\n          <code className=\"relative z-10 px-[0.3rem] py-[0.2rem] font-mono text-[.8125rem] outline-none before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-rotate-1 before:rounded-xs before:bg-muted\">\n            .env\n          </code>{\" \"}\n          environment key:{\" \"}\n          <code className=\"relative z-10 px-[0.3rem] py-[0.2rem] font-mono text-primary-foreground text-sm outline-none before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-rotate-1 before:rounded-xs before:bg-primary\">\n            COSS_KEY=ITSTIMETOBUILD\n          </code>\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          think of this as{\" \"}\n          <strong className=\"font-medium\">react-on-rails</strong>, but with a\n          commercial service attached.\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          let us run the infrastructure, so you can focus on writing code.\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          open source is the future. and with coss, we&apos;re making sure that\n          future is bright.\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          and who knows… maybe one day you can purchase{\" \"}\n          <strong className=\"font-medium\">$COSS</strong> on your favourite{\" \"}\n          <span className=\"line-through\">stack</span> stock exchange.\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">\n          if you are interested in coss.com, consider joining the early access{\" \"}\n          <a\n            className=\"font-medium underline underline-offset-4\"\n            href=\"https://i.cal.com/forms/0129f2a8-7b15-4850-b3fb-07944dfacb3c\"\n          >\n            waitlist\n          </a>{\" \"}\n          or apply for our{\" \"}\n          <a\n            className=\"font-medium underline underline-offset-4\"\n            href=\"https://cal.com/jobs\"\n          >\n            open positions\n          </a>\n          .\n        </p>\n        <p className=\"not-first:mt-6 leading-relaxed\">best,</p>\n        <p className=\"not-first:mt-6 leading-relaxed\">bailey & peer</p>\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/payments/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com payments\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.payments.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const products = `// Create a product\nawait coss.payments.products.create({\n  name: 'Pro Plan',\n  description: 'Access to premium features',\n});\n\n// List products\nawait coss.payments.products.list();\n\n// Retrieve a product\nawait coss.payments.products.retrieve('prod_abc123');\n\n// Update a product\nawait coss.payments.products.update('prod_abc123', {\n  description: 'Updated description',\n});\n\n// Delete a product\nawait coss.payments.products.delete('prod_abc123');`;\n\n  const prices = `// Create a price for a product\nawait coss.payments.prices.create({\n  productId: 'prod_abc123',\n  unitAmount: 2000, // in cents\n  currency: 'usd',\n  recurring: { interval: 'month' },\n});\n\n// List prices\nawait coss.payments.prices.list();`;\n\n  const customers = `// Create a customer\nawait coss.payments.customers.create({\n  email: 'jane@example.com',\n  name: 'Jane Doe',\n});\n\n// Retrieve a customer\nawait coss.payments.customers.retrieve('cus_abc123');`;\n\n  const subscriptions = `// Create a subscription\nawait coss.payments.subscriptions.create({\n  customerId: 'cus_abc123',\n  priceId: 'price_abc123',\n});\n\n// Retrieve a subscription\nawait coss.payments.subscriptions.retrieve('sub_abc123');\n\n// Update a subscription (e.g., upgrade plan)\nawait coss.payments.subscriptions.update('sub_abc123', {\n  priceId: 'price_def456',\n});\n\n// Cancel a subscription\nawait coss.payments.subscriptions.cancel('sub_abc123');`;\n\n  const invoices = `// Create an invoice manually\nawait coss.payments.invoices.create({\n  customerId: 'cus_abc123',\n  items: [\n    { priceId: 'price_abc123', quantity: 1 },\n  ],\n});\n\n// Finalize and send the invoice\nawait coss.payments.invoices.finalize('inv_abc123');\n\n// Pay an invoice\nawait coss.payments.invoices.pay('inv_abc123');`;\n\n  const webhooks = `// Webhook events\ncoss.payments.webhooks.on('invoice.paid', (event) => {\n  console.log('Invoice paid:', event.data);\n});\n\ncoss.payments.webhooks.on('subscription.created', (event) => {\n  console.log('Subscription created:', event.data);\n});`;\n\n  const utilities = `// Validate webhook signature\nconst isValid = coss.payments.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['coss-payments-signature'],\n  secret: 'whsec_payments_123',\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Products\n        </h2>\n        <CodeBlock code={products} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Prices\n        </h2>\n        <CodeBlock code={prices} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Customers\n        </h2>\n        <CodeBlock code={customers} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Subscriptions\n        </h2>\n        <CodeBlock code={subscriptions} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Invoices\n        </h2>\n        <CodeBlock code={invoices} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhooks\n        </h2>\n        <CodeBlock code={webhooks} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Utilities\n        </h2>\n        <CodeBlock code={utilities} copyButton={false} language=\"tsx\" />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/robots.ts",
    "content": "import type { MetadataRoute } from \"next\";\n\nexport default function robots(): MetadataRoute.Robots {\n  return {\n    rules: {\n      allow: \"/\",\n      disallow: \"/private/\",\n      userAgent: \"*\",\n    },\n    sitemap: [\n      \"https://coss.com/sitemap.xml\",\n      \"https://coss.com/origin/sitemap.xml\",\n      \"https://coss.com/ui/sitemap.xml\",\n    ],\n  };\n}\n"
  },
  {
    "path": "apps/www/app/scheduling/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com scheduling\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.scheduling.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const users = `// Create a user\nawait coss.scheduling.users.create({\n  email: 'jane@example.com',\n  name: 'Jane Doe',\n});\n\n// Retrieve a user\nawait coss.scheduling.users.retrieve('user_abc123');`;\n\n  const schedules = `// Create a schedule\nawait coss.scheduling.schedules.create({\n  userId: 'user_abc123',\n  availability: [\n    {\n      day: 'Monday',\n      start: '09:00',\n      end: '17:00',\n    },\n    // ... other days\n  ],\n});\n\n// Retrieve schedules\nawait coss.scheduling.schedules.list({ userId: 'user_abc123' });`;\n\n  const eventTypes = `// Create an event type\nawait coss.scheduling.eventTypes.create({\n  userId: 'user_abc123',\n  name: 'Consultation',\n  duration: 30,\n  scheduleId: 'schedule_abc123',\n});\n\n// Retrieve event types\nawait coss.scheduling.eventTypes.list({ userId: 'user_abc123' });`;\n\n  const bookings = `// Create a booking\nawait coss.scheduling.bookings.create({\n  eventTypeId: 'eventType_abc123',\n  attendee: {\n    name: 'John Smith',\n    email: 'john@example.com',\n  },\n  start: '2025-05-01T15:00:00Z',\n});\n\n// Retrieve bookings\nawait coss.scheduling.bookings.list({ userId: 'user_abc123' });`;\n\n  const webhooks = `// Webhook events\ncoss.scheduling.webhooks.on('booking.created', (event) => {\n  console.log('New booking:', event.data);\n});\n\ncoss.scheduling.webhooks.on('booking.cancelled', (event) => {\n  console.log('Booking cancelled:', event.data);\n});`;\n\n  const utilities = `// Validate webhook signature\nconst isValid = coss.scheduling.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['coss-scheduling-signature'],\n  secret: 'whsec_scheduling_123',\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Users\n        </h2>\n        <CodeBlock code={users} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Schedules\n        </h2>\n        <CodeBlock code={schedules} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Event Types\n        </h2>\n        <CodeBlock code={eventTypes} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Bookings\n        </h2>\n        <CodeBlock code={bookings} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhooks\n        </h2>\n        <CodeBlock code={webhooks} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Utilities\n        </h2>\n        <CodeBlock code={utilities} copyButton={false} language=\"tsx\" />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/sitemap.ts",
    "content": "import type { MetadataRoute } from \"next\";\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n  return [\n    { url: \"https://coss.com\" },\n    { url: \"https://coss.com/scheduling\" },\n    { url: \"https://coss.com/calendar\" },\n    { url: \"https://coss.com/email\" },\n    { url: \"https://coss.com/sms\" },\n    { url: \"https://coss.com/video\" },\n    { url: \"https://coss.com/payments\" },\n    { url: \"https://coss.com/notifications\" },\n    { url: \"https://coss.com/auth\" },\n  ];\n}\n"
  },
  {
    "path": "apps/www/app/sms/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com sms\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.sms.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const sendingMessages = `// Send an SMS message\nawait coss.sms.messages.send({\n  to: '+15551234567',\n  from: '+15559876543',\n  body: 'Your verification code is 123456',\n});`;\n\n  const messages = `// Retrieve a message\nawait coss.sms.messages.retrieve('msg_abc123');\n\n// List sent messages\nawait coss.sms.messages.list({\n  to: '+15551234567',\n});`;\n\n  const phoneNumbers = `// Buy a new phone number\nawait coss.sms.numbers.purchase({\n  country: 'US',\n  areaCode: '415',\n});\n\n// List owned numbers\nawait coss.sms.numbers.list();\n\n// Release a phone number\nawait coss.sms.numbers.release('+15559876543');`;\n\n  const webhooks = `// Webhook events\ncoss.sms.webhooks.on('message.delivered', (event) => {\n  console.log('Message delivered:', event.data);\n});\n\ncoss.sms.webhooks.on('message.failed', (event) => {\n  console.log('Message failed:', event.data);\n});`;\n\n  const utilities = `// Validate webhook signature\nconst isValid = coss.sms.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['coss-sms-signature'],\n  secret: 'whsec_sms_123',\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Sending Messages\n        </h2>\n        <CodeBlock code={sendingMessages} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Messages\n        </h2>\n        <CodeBlock code={messages} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Phone Numbers\n        </h2>\n        <CodeBlock code={phoneNumbers} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhooks\n        </h2>\n        <CodeBlock code={webhooks} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Utilities\n        </h2>\n        <CodeBlock code={utilities} copyButton={false} language=\"tsx\" />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/app/video/page.tsx",
    "content": "import { CodeBlock } from \"@coss/ui/shared/code-block\";\nimport type { Metadata } from \"next\";\n\nexport const metadata: Metadata = {\n  description: \"open source is the foundation of all modern software\",\n  title: \"coss.com video\",\n};\n\nexport default function Page() {\n  const initialization = `import { coss } from '@coss';\n\ncoss.video.init({\n  apiKey: process.env.COSS_KEY,\n  environment: 'production', // or 'sandbox'\n});`;\n\n  const rooms = `// Create a room\nawait coss.video.rooms.create({\n  name: 'team-sync-0422',\n  privacy: 'private',\n  config: {\n    enableChat: true,\n    enableRecording: false,\n    maxParticipants: 10,\n  },\n});\n\n// List rooms\nawait coss.video.rooms.list();\n\n// Retrieve room details\nawait coss.video.rooms.retrieve('team-sync-0422');\n\n// Update room settings\nawait coss.video.rooms.update('team-sync-0422', {\n  config: { enableRecording: true },\n});\n\n// Delete a room\nawait coss.video.rooms.delete('team-sync-0422');`;\n\n  const tokens = `// Generate a join token\nconst token = await coss.video.tokens.create({\n  roomName: 'team-sync-0422',\n  userId: 'user_abc123',\n  role: 'host',\n  exp: Math.floor(Date.now() / 1000) + 60 * 60,\n});`;\n\n  const participants = `// List participants\nawait coss.video.participants.list('team-sync-0422');\n\n// Kick a participant\nawait coss.video.participants.remove('team-sync-0422', 'user_abc123');\n\n// Get participant history\nawait coss.video.participants.history({\n  roomName: 'team-sync-0422',\n  userId: 'user_abc123',\n});`;\n\n  const recordings = `// Start recording\nawait coss.video.recordings.start('team-sync-0422');\n\n// Stop recording\nawait coss.video.recordings.stop('team-sync-0422');\n\n// List past recordings\nawait coss.video.recordings.list();\n\n// Retrieve a recording\nawait coss.video.recordings.retrieve('rec_abc123');\n\n// Delete a recording\nawait coss.video.recordings.delete('rec_abc123');`;\n\n  const webhooks = `// Webhook events\ncoss.video.webhooks.on('room.started', (event) => {\n  console.log(\\`Room started: \\${event.data.roomName}\\`);\n});\n\ncoss.video.webhooks.on('participant.joined', (event) => {\n  const { userId, roomName } = event.data;\n  console.log(\\`\\${userId} joined \\${roomName}\\`);\n});\n\n// Other events:\n// room.ended, participant.left, recording.started, recording.stopped`;\n\n  const utilities = `// Validate webhook signature\nconst isValid = coss.video.utils.verifySignature({\n  payload: req.body,\n  signature: req.headers['coss-video-signature'],\n  secret: 'whsec_video_123',\n});`;\n\n  const bonus = `// Generate a meeting URL\nconst meetingUrl = coss.video.utils.generateJoinUrl({\n  roomName: 'team-sync-0422',\n  token,\n});`;\n\n  return (\n    <main className=\"container mb-16 w-full flex-1 lg:mb-20\">\n      <div className=\"mx-auto mt-12 max-w-2xl text-muted-foreground lg:mt-16 [&_a:not([data-slot='button'])]:text-foreground [&_strong]:text-foreground\">\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Initialization\n        </h2>\n        <CodeBlock code={initialization} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Rooms\n        </h2>\n        <CodeBlock code={rooms} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Tokens\n        </h2>\n        <CodeBlock code={tokens} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Participants\n        </h2>\n        <CodeBlock code={participants} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Recordings\n        </h2>\n        <CodeBlock code={recordings} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Webhooks\n        </h2>\n        <CodeBlock code={webhooks} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Utilities\n        </h2>\n        <CodeBlock code={utilities} copyButton={false} language=\"tsx\" />\n        <h2 className=\"mt-12 scroll-m-20 font-heading font-semibold text-2xl text-foreground first:mt-0 [&+p]:mt-4! *:[code]:text-2xl\">\n          Bonus - Meeting URL Generator\n        </h2>\n        <CodeBlock code={bonus} copyButton={false} language=\"tsx\" />\n      </div>\n    </main>\n  );\n}\n"
  },
  {
    "path": "apps/www/next.config.ts",
    "content": "import type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  transpilePackages: [\"@coss/ui\"],\n};\n\nexport default nextConfig;\n"
  },
  {
    "path": "apps/www/package.json",
    "content": "{\n  \"dependencies\": {\n    \"@coss/ui\": \"workspace:*\",\n    \"@hugeicons/core-free-icons\": \"^2.0.0\",\n    \"@hugeicons/react\": \"^1.1.1\",\n    \"lucide-react\": \"^0.555.0\",\n    \"next\": \"16.0.9\",\n    \"react\": \"^19.2.3\",\n    \"react-dom\": \"^19.2.3\"\n  },\n  \"devDependencies\": {\n    \"@coss/typescript-config\": \"workspace:*\",\n    \"@tailwindcss/postcss\": \"^4.1.17\",\n    \"@types/node\": \"^24.10.1\",\n    \"@types/react\": \"^19.2.6\",\n    \"@types/react-dom\": \"^19.2.3\",\n    \"tailwindcss\": \"^4.1.17\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"license\": \"AGPL-3.0-or-later\",\n  \"name\": \"www\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"next build\",\n    \"clean\": \"rm -rf node_modules && rm -rf .turbo && rm -rf .next\",\n    \"dev\": \"next dev\",\n    \"lint\": \"biome lint .\",\n    \"start\": \"next start\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"version\": \"0.1.0\"\n}\n"
  },
  {
    "path": "apps/www/postcss.config.mjs",
    "content": "import { postcssConfig } from \"@coss/ui/postcss.config\";\n\nexport default postcssConfig;\n"
  },
  {
    "path": "apps/www/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@/*\": [\"./*\"]\n    },\n    \"plugins\": [\n      {\n        \"name\": \"next\"\n      }\n    ]\n  },\n  \"exclude\": [\"node_modules\"],\n  \"extends\": \"@coss/typescript-config/nextjs.json\",\n  \"include\": [\n    \"**/*.ts\",\n    \"**/*.tsx\",\n    \"next-env.d.ts\",\n    \"next.config.ts\",\n    \".next/types/**/*.ts\"\n  ]\n}\n"
  },
  {
    "path": "biome.json",
    "content": "{\n  \"$schema\": \"https://biomejs.dev/schemas/2.3.10/schema.json\",\n  \"assist\": {\n    \"actions\": {\n      \"source\": {\n        \"organizeImports\": {\n          \"level\": \"on\",\n          \"options\": {\n            \"groups\": [\n              [\":PACKAGE_WITH_PROTOCOL:\", \":PACKAGE:\"],\n              [\"@/registry/**\", \"@coss/**\", \"@calcom/**\"],\n              [\"@lib/**\", \"@components/**\", \"@server/**\", \"@trpc/**\"],\n              \":PATH:\"\n            ]\n          }\n        }\n      }\n    },\n    \"enabled\": true\n  },\n  \"css\": {\n    \"parser\": {\n      \"allowWrongLineComments\": true,\n      \"tailwindDirectives\": true\n    }\n  },\n  \"files\": {\n    \"includes\": [\n      \"**\",\n      \"!**/dist\",\n      \"!**/build\",\n      \"!**/coverage\",\n      \"!**/*.log\",\n      \"!**/.turbo\",\n      \"!**/.next\",\n      \"!**/apps/**/*/.next\",\n      \"!**/apps/**/*/.source\",\n      \"!**/apps/origin/public/r\",\n      \"!**/apps/origin/registry.json\",\n      \"!**/apps/ui/public/r\",\n      \"!**/apps/ui/registry/__index__.tsx\",\n      \"!**/apps/ui/registry.json\",\n      \"!**/packages/ui/src/components\",\n      \"!**/packages/ui/src/lib\",\n      \"!**/packages/ui/src/hooks\"\n    ]\n  },\n  \"formatter\": {\n    \"enabled\": true,\n    \"indentStyle\": \"space\",\n    \"indentWidth\": 2,\n    \"lineWidth\": 80\n  },\n  \"javascript\": {\n    \"formatter\": {\n      \"quoteStyle\": \"double\",\n      \"trailingCommas\": \"all\"\n    }\n  },\n  \"linter\": {\n    \"enabled\": true,\n    \"rules\": {\n      \"a11y\": {\n        \"noLabelWithoutControl\": \"off\",\n        \"noStaticElementInteractions\": \"off\",\n        \"noSvgWithoutTitle\": \"off\",\n        \"useAriaPropsForRole\": \"off\",\n        \"useAriaPropsSupportedByRole\": \"off\",\n        \"useGenericFontNames\": \"off\",\n        \"useKeyWithClickEvents\": \"off\",\n        \"useSemanticElements\": \"off\",\n        \"useValidAnchor\": \"off\"\n      },\n      \"nursery\": {\n        \"useSortedClasses\": {\n          \"level\": \"warn\",\n          \"options\": {\n            \"attributes\": [\"className\", \"classList\"],\n            \"functions\": [\"clsx\", \"cva\", \"cn\", \"tw\", \"tw.*\"]\n          }\n        }\n      },\n      \"performance\": {\n        \"noImgElement\": \"off\"\n      },\n      \"recommended\": true,\n      \"security\": {\n        \"noDangerouslySetInnerHtml\": \"off\"\n      },\n      \"style\": {\n        \"noInferrableTypes\": \"error\",\n        \"noParameterAssign\": \"error\",\n        \"noUnusedTemplateLiteral\": \"error\",\n        \"noUselessElse\": \"error\",\n        \"useAsConstAssertion\": \"error\",\n        \"useDefaultParameterLast\": \"error\",\n        \"useEnumInitializers\": \"error\",\n        \"useNumberNamespace\": \"error\",\n        \"useSelfClosingElements\": \"error\",\n        \"useSingleVarDeclarator\": \"error\"\n      }\n    }\n  },\n  \"overrides\": [\n    {\n      \"includes\": [\n        \"apps/ui/registry/default/base-ui/**\",\n        \"apps/ui/registry/default/hooks/**\",\n        \"apps/ui/registry/default/lib/**\",\n        \"apps/ui/registry/default/ui/**\",\n        \"apps/examples/calcom/components/**\"\n      ],\n      \"linter\": {\n        \"rules\": {\n          \"nursery\": {\n            \"useExplicitType\": \"info\"\n          },\n          \"style\": {\n            \"useExportsLast\": \"warn\"\n          }\n        }\n      }\n    }\n  ],\n  \"vcs\": {\n    \"clientKind\": \"git\",\n    \"defaultBranch\": \"main\",\n    \"enabled\": false,\n    \"useIgnoreFile\": false\n  }\n}\n"
  },
  {
    "path": "bunfig.toml",
    "content": "[workspace]\npackages = [\n  \"packages/*\",\n  \"apps/*\"\n]\n"
  },
  {
    "path": "lint-staged.config.mjs",
    "content": "export default {\n  \"**/*.{js,ts,jsx,tsx,md,mdx,json}\": () => [\n    \"bunx biome check --write --no-errors-on-unmatched\",\n  ],\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"dependencies\": {\n    \"react-day-picker\": \"^9.13.0\"\n  },\n  \"devDependencies\": {\n    \"@biomejs/biome\": \"2.3.10\",\n    \"husky\": \"^9.1.7\",\n    \"lint-staged\": \"^16.2.6\",\n    \"turbo\": \"^2.6.1\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"engines\": {\n    \"bun\": \">=1.3.1\"\n  },\n  \"license\": \"AGPL-3.0-or-later\",\n  \"name\": \"cosscom\",\n  \"packageManager\": \"bun@1.3.1\",\n  \"private\": true,\n  \"scripts\": {\n    \"build\": \"turbo run build\",\n    \"clean\": \"turbo run clean && rm -rf .turbo && rm -rf node_modules\",\n    \"dev\": \"turbo run dev\",\n    \"format\": \"biome format --write .\",\n    \"format:all\": \"biome check --write --unsafe --no-errors-on-unmatched\",\n    \"lint\": \"turbo run lint --\",\n    \"prepare\": \"husky\",\n    \"test\": \"bun test --pass-with-no-tests\",\n    \"typecheck\": \"turbo run typecheck\"\n  },\n  \"version\": \"0.0.1\",\n  \"workspaces\": [\n    \"apps/*\",\n    \"apps/examples/*\",\n    \"packages/*\"\n  ]\n}\n"
  },
  {
    "path": "packages/typescript-config/base.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"compilerOptions\": {\n    \"declaration\": true,\n    \"declarationMap\": true,\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"incremental\": false,\n    \"isolatedModules\": true,\n    \"lib\": [\"es2022\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"NodeNext\",\n    \"moduleDetection\": \"force\",\n    \"moduleResolution\": \"NodeNext\",\n    \"noUncheckedIndexedAccess\": true,\n    \"resolveJsonModule\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"target\": \"ES2022\",\n    \"types\": [\"react\", \"node\", \"next\"]\n  },\n  \"display\": \"Default\"\n}\n"
  },
  {
    "path": "packages/typescript-config/nextjs.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"jsx\": \"preserve\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"noEmit\": true,\n    \"plugins\": [{ \"name\": \"next\" }]\n  },\n  \"display\": \"Next.js\",\n  \"extends\": \"./base.json\"\n}\n"
  },
  {
    "path": "packages/typescript-config/package.json",
    "content": "{\n  \"exports\": {\n    \"./base.json\": \"./base.json\",\n    \"./nextjs.json\": \"./nextjs.json\",\n    \"./react-library.json\": \"./react-library.json\"\n  },\n  \"license\": \"MIT\",\n  \"name\": \"@coss/typescript-config\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"version\": \"0.0.0\"\n}\n"
  },
  {
    "path": "packages/typescript-config/react-library.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\"\n  },\n  \"display\": \"React Library\",\n  \"extends\": \"./base.json\"\n}\n"
  },
  {
    "path": "packages/ui/components.json",
    "content": "{\n  \"$schema\": \"https://ui.shadcn.com/schema.json\",\n  \"aliases\": {\n    \"components\": \"@coss/ui/components\",\n    \"hooks\": \"@coss/ui/hooks\",\n    \"lib\": \"@coss/ui/lib\",\n    \"ui\": \"@coss/ui/components\",\n    \"utils\": \"@coss/ui/lib/utils\"\n  },\n  \"iconLibrary\": \"lucide\",\n  \"rsc\": true,\n  \"style\": \"new-york\",\n  \"tailwind\": {\n    \"baseColor\": \"neutral\",\n    \"config\": \"\",\n    \"css\": \"src/styles/globals.css\",\n    \"cssVariables\": true\n  },\n  \"tsx\": true\n}\n"
  },
  {
    "path": "packages/ui/package.json",
    "content": "{\n  \"dependencies\": {\n    \"@base-ui/react\": \"^1.3.0\",\n    \"@hugeicons/core-free-icons\": \"^2.0.0\",\n    \"@hugeicons/react\": \"^1.1.1\",\n    \"@shikijs/transformers\": \"^3.15.0\",\n    \"class-variance-authority\": \"^0.7.1\",\n    \"clsx\": \"^2.1.1\",\n    \"input-otp\": \"^1.4.2\",\n    \"lucide-react\": \"^0.555.0\",\n    \"next-themes\": \"^0.4.6\",\n    \"rehype-pretty-code\": \"^0.14.1\",\n    \"shiki\": \"^3.15.0\",\n    \"tailwind-merge\": \"^3.4.0\"\n  },\n  \"devDependencies\": {\n    \"@coss/typescript-config\": \"workspace:*\",\n    \"@tailwindcss/postcss\": \"^4.1.17\",\n    \"@turbo/gen\": \"^2.6.1\",\n    \"@types/node\": \"^24.10.1\",\n    \"@types/react\": \"^19.2.6\",\n    \"bun-types\": \"^1.3.4\",\n    \"next\": \"16.0.9\",\n    \"react\": \"^19.2.3\",\n    \"tailwindcss\": \"^4.1.17\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"exports\": {\n    \"./base-ui/*\": \"./src/base-ui/*.ts\",\n    \"./components/*\": \"./src/components/*.tsx\",\n    \"./fonts\": \"./src/fonts/index.ts\",\n    \"./globals.css\": \"./src/styles/globals.css\",\n    \"./hooks/*\": \"./src/hooks/*.ts\",\n    \"./lib/*\": \"./src/lib/*.ts\",\n    \"./postcss.config\": \"./postcss.config.mjs\",\n    \"./shared/*\": \"./src/shared/*.tsx\"\n  },\n  \"license\": \"AGPL-3.0-or-later\",\n  \"name\": \"@coss/ui\",\n  \"peerDependencies\": {\n    \"next\": \"^16.0.0\",\n    \"react\": \"^19.2.0\"\n  },\n  \"scripts\": {\n    \"clean\": \"rm -rf node_modules\",\n    \"lint\": \"biome lint src\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"type\": \"module\",\n  \"version\": \"0.0.0\"\n}\n"
  },
  {
    "path": "packages/ui/postcss.config.mjs",
    "content": "// Optional PostCSS configuration for applications that need it\nexport const postcssConfig = {\n  plugins: {\n    \"@tailwindcss/postcss\": {},\n  },\n};\n"
  },
  {
    "path": "packages/ui/src/base-ui/csp-provider.ts",
    "content": "export { CSPProvider } from \"@base-ui/react/csp-provider\";\n"
  },
  {
    "path": "packages/ui/src/base-ui/direction-provider.ts",
    "content": "export {\n  DirectionProvider,\n  useDirection,\n} from \"@base-ui/react/direction-provider\";\n"
  },
  {
    "path": "packages/ui/src/base-ui/merge-props.ts",
    "content": "export { mergeProps } from \"@base-ui/react/merge-props\";\n"
  },
  {
    "path": "packages/ui/src/base-ui/use-render.ts",
    "content": "export { useRender } from \"@base-ui/react/use-render\";\n"
  },
  {
    "path": "packages/ui/src/components/accordion.tsx",
    "content": "\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type React from \"react\";\n\nexport function Accordion(\n  props: AccordionPrimitive.Root.Props,\n): React.ReactElement {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nexport function AccordionItem({\n  className,\n  ...props\n}: AccordionPrimitive.Item.Props): React.ReactElement {\n  return (\n    <AccordionPrimitive.Item\n      className={cn(\"border-b last:border-b-0\", className)}\n      data-slot=\"accordion-item\"\n      {...props}\n    />\n  );\n}\n\nexport function AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        className={cn(\n          \"flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180\",\n          className,\n        )}\n        data-slot=\"accordion-trigger\"\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon\n          className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-80 transition-transform duration-200 ease-in-out\"\n          data-slot=\"accordion-indicator\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport function AccordionPanel({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <AccordionPrimitive.Panel\n      className=\"h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0\"\n      data-slot=\"accordion-panel\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n}\n\nexport { AccordionPrimitive, AccordionPanel as AccordionContent };\n"
  },
  {
    "path": "packages/ui/src/components/alert-dialog.tsx",
    "content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport const AlertDialogCreateHandle: typeof AlertDialogPrimitive.createHandle =\n  AlertDialogPrimitive.createHandle;\n\nexport const AlertDialog: typeof AlertDialogPrimitive.Root =\n  AlertDialogPrimitive.Root;\n\nexport const AlertDialogPortal: typeof AlertDialogPrimitive.Portal =\n  AlertDialogPrimitive.Portal;\n\nexport function AlertDialogTrigger(\n  props: AlertDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\nexport function AlertDialogBackdrop({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"alert-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogViewport({\n  className,\n  ...props\n}: AlertDialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className,\n      )}\n      data-slot=\"alert-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogPopup({\n  className,\n  bottomStickOnMobile = true,\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  bottomStickOnMobile?: boolean;\n}): React.ReactElement {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialogViewport\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n        )}\n      >\n        <AlertDialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            bottomStickOnMobile &&\n              \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n            className,\n          )}\n          data-slot=\"alert-dialog-popup\"\n          {...props}\n        />\n      </AlertDialogViewport>\n    </AlertDialogPortal>\n  );\n}\n\nexport function AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left\",\n        className,\n      )}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogFooter({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n        variant === \"default\" && \"border-t bg-muted/72 py-4\",\n        variant === \"bare\" && \"pb-6\",\n        className,\n      )}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogTitle({\n  className,\n  ...props\n}: AlertDialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogClose(\n  props: AlertDialogPrimitive.Close.Props,\n): React.ReactElement {\n  return (\n    <AlertDialogPrimitive.Close data-slot=\"alert-dialog-close\" {...props} />\n  );\n}\n\nexport {\n  AlertDialogPrimitive,\n  AlertDialogBackdrop as AlertDialogOverlay,\n  AlertDialogPopup as AlertDialogContent,\n};\n"
  },
  {
    "path": "packages/ui/src/components/alert.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nconst alertVariants = cva(\n  \"relative grid w-full items-start gap-x-2 gap-y-0.5 rounded-xl border px-3.5 py-3 text-card-foreground text-sm has-[>svg]:has-data-[slot=alert-action]:grid-cols-[calc(var(--spacing)*4)_1fr_auto] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-[>svg]:gap-x-2 [&>svg]:h-lh [&>svg]:w-4\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default:\n          \"bg-transparent dark:bg-input/32 [&>svg]:text-muted-foreground\",\n        error:\n          \"border-destructive/32 bg-destructive/4 [&>svg]:text-destructive\",\n        info: \"border-info/32 bg-info/4 [&>svg]:text-info\",\n        success: \"border-success/32 bg-success/4 [&>svg]:text-success\",\n        warning: \"border-warning/32 bg-warning/4 [&>svg]:text-warning\",\n      },\n    },\n  },\n);\n\nexport function Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof alertVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(alertVariants({ variant }), className)}\n      data-slot=\"alert\"\n      role=\"alert\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"font-medium [svg~&]:col-start-2\", className)}\n      data-slot=\"alert-title\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col gap-2.5 text-muted-foreground [svg~&]:col-start-2\",\n        className,\n      )}\n      data-slot=\"alert-description\"\n      {...props}\n    />\n  );\n}\n\nexport function AlertAction({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex gap-1 max-sm:col-start-2 max-sm:mt-2 sm:row-start-1 sm:row-end-3 sm:self-center sm:[[data-slot=alert-description]~&]:col-start-2 sm:[[data-slot=alert-title]~&]:col-start-2 sm:[svg~&]:col-start-2 sm:[svg~[data-slot=alert-description]~&]:col-start-3 sm:[svg~[data-slot=alert-title]~&]:col-start-3\",\n        className,\n      )}\n      data-slot=\"alert-action\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/autocomplete.tsx",
    "content": "\"use client\";\n\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { Input } from \"@coss/ui/components/input\";\nimport { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\n\nexport const Autocomplete: typeof AutocompletePrimitive.Root =\n  AutocompletePrimitive.Root;\n\nexport function AutocompleteInput({\n  className,\n  showTrigger = false,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<AutocompletePrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: AutocompletePrimitive.Trigger.Props;\n  clearProps?: AutocompletePrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <AutocompletePrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"autocomplete-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"autocomplete-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <AutocompletePrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5\"\n            : \"has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"autocomplete-input\"\n        render={<Input nativeInput size={sizeValue} />}\n        {...props}\n      />\n      {showTrigger && (\n        <AutocompleteTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <AutocompletePrimitive.Icon data-slot=\"autocomplete-icon\">\n            <ChevronsUpDownIcon />\n          </AutocompletePrimitive.Icon>\n        </AutocompleteTrigger>\n      )}\n      {showClear && (\n        <AutocompleteClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </AutocompleteClear>\n      )}\n    </AutocompletePrimitive.InputGroup>\n  );\n}\n\nexport function AutocompletePopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor,\n  ...props\n}: AutocompletePrimitive.Popup.Props & {\n  align?: AutocompletePrimitive.Positioner.Props[\"align\"];\n  sideOffset?: AutocompletePrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: AutocompletePrimitive.Positioner.Props[\"alignOffset\"];\n  side?: AutocompletePrimitive.Positioner.Props[\"side\"];\n  anchor?: AutocompletePrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Portal>\n      <AutocompletePrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"autocomplete-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <AutocompletePrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"autocomplete-popup\"\n            {...props}\n          >\n            {children}\n          </AutocompletePrimitive.Popup>\n        </span>\n      </AutocompletePrimitive.Positioner>\n    </AutocompletePrimitive.Portal>\n  );\n}\n\nexport function AutocompleteItem({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Item.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-item\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Item>\n  );\n}\n\nexport function AutocompleteSeparator({\n  className,\n  ...props\n}: AutocompletePrimitive.Separator.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"autocomplete-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroup({\n  className,\n  ...props\n}: AutocompletePrimitive.Group.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"autocomplete-group\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteGroupLabel({\n  className,\n  ...props\n}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"autocomplete-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteEmpty({\n  className,\n  ...props\n}: AutocompletePrimitive.Empty.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"autocomplete-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteRow({\n  className,\n  ...props\n}: AutocompletePrimitive.Row.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Row\n      className={className}\n      data-slot=\"autocomplete-row\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteValue({\n  ...props\n}: AutocompletePrimitive.Value.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Value data-slot=\"autocomplete-value\" {...props} />\n  );\n}\n\nexport function AutocompleteList({\n  className,\n  ...props\n}: AutocompletePrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <AutocompletePrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"autocomplete-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function AutocompleteClear({\n  className,\n  ...props\n}: AutocompletePrimitive.Clear.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Clear\n      className={cn(\n        \"absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-clear\"\n      {...props}\n    >\n      <XIcon />\n    </AutocompletePrimitive.Clear>\n  );\n}\n\nexport function AutocompleteStatus({\n  className,\n  ...props\n}: AutocompletePrimitive.Status.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"autocomplete-status\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteCollection({\n  ...props\n}: AutocompletePrimitive.Collection.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Collection\n      data-slot=\"autocomplete-collection\"\n      {...props}\n    />\n  );\n}\n\nexport function AutocompleteTrigger({\n  className,\n  children,\n  ...props\n}: AutocompletePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <AutocompletePrimitive.Trigger\n      className={className}\n      data-slot=\"autocomplete-trigger\"\n      {...props}\n    >\n      {children}\n    </AutocompletePrimitive.Trigger>\n  );\n}\n\nexport const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =\n  AutocompletePrimitive.useFilter;\n\nexport { AutocompletePrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/avatar.tsx",
    "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Avatar({\n  className,\n  ...props\n}: AvatarPrimitive.Root.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        \"inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs\",\n        className,\n      )}\n      data-slot=\"avatar\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  ...props\n}: AvatarPrimitive.Image.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Image\n      className={cn(\"size-full object-cover\", className)}\n      data-slot=\"avatar-image\"\n      {...props}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props): React.ReactElement {\n  return (\n    <AvatarPrimitive.Fallback\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted\",\n        className,\n      )}\n      data-slot=\"avatar-fallback\"\n      {...props}\n    />\n  );\n}\n\nexport { AvatarPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/badge.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\n\nexport const badgeVariants = cva(\n  \"relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default:\n          \"h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs\",\n        lg: \"h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm\",\n        sm: \"h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]\",\n      },\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground [button&,a&]:hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white [button&,a&]:hover:bg-destructive/90\",\n        error:\n          \"bg-destructive/8 text-destructive-foreground dark:bg-destructive/16\",\n        info: \"bg-info/8 text-info-foreground dark:bg-info/16\",\n        outline:\n          \"border-input bg-background text-foreground dark:bg-input/32 [button&,a&]:hover:bg-accent/50 dark:[button&,a&]:hover:bg-input/48\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [button&,a&]:hover:bg-secondary/90\",\n        success: \"bg-success/8 text-success-foreground dark:bg-success/16\",\n        warning: \"bg-warning/8 text-warning-foreground dark:bg-warning/16\",\n      },\n    },\n  },\n);\n\nexport interface BadgeProps extends useRender.ComponentProps<\"span\"> {\n  variant?: VariantProps<typeof badgeVariants>[\"variant\"];\n  size?: VariantProps<typeof badgeVariants>[\"size\"];\n}\n\nexport function Badge({\n  className,\n  variant,\n  size,\n  render,\n  ...props\n}: BadgeProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(badgeVariants({ className, size, variant })),\n    \"data-slot\": \"badge\",\n  };\n\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "packages/ui/src/components/breadcrumb.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport function Breadcrumb({\n  ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nexport function BreadcrumbList({\n  className,\n  ...props\n}: React.ComponentProps<\"ol\">): React.ReactElement {\n  return (\n    <ol\n      className={cn(\n        \"wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5\",\n        className,\n      )}\n      data-slot=\"breadcrumb-list\"\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      data-slot=\"breadcrumb-item\"\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"transition-colors hover:text-foreground\", className),\n    \"data-slot\": \"breadcrumb-link\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function BreadcrumbPage({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      data-slot=\"breadcrumb-page\"\n      {...props}\n    />\n  );\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      aria-hidden=\"true\"\n      className={cn(\"opacity-80 [&>svg]:size-4\", className)}\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={className}\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/button.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Spinner } from \"@coss/ui/components/spinner\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nexport const buttonVariants = cva(\n  \"relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-loading:select-none data-loading:text-transparent sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 px-[calc(--spacing(3)-1px)] sm:h-8\",\n        icon: \"size-9 sm:size-8\",\n        \"icon-lg\": \"size-10 sm:size-9\",\n        \"icon-sm\": \"size-8 sm:size-7\",\n        \"icon-xl\":\n          \"size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5\",\n        \"icon-xs\":\n          \"size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9\",\n        sm: \"h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7\",\n        xl: \"h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5\",\n        xs: \"h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\",\n      },\n      variant: {\n        default:\n          \"not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 data-pressed:bg-primary/90 *:data-[slot=button-loading-indicator]:text-primary-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n        destructive:\n          \"not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 data-pressed:bg-destructive/90 *:data-[slot=button-loading-indicator]:text-white [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n        \"destructive-outline\":\n          \"border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:border-destructive/32 hover:bg-destructive/4 data-pressed:border-destructive/32 data-pressed:bg-destructive/4 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n        ghost:\n          \"border-transparent text-foreground hover:bg-accent data-pressed:bg-accent *:data-[slot=button-loading-indicator]:text-foreground\",\n        link: \"border-transparent text-foreground underline-offset-4 hover:underline data-pressed:underline *:data-[slot=button-loading-indicator]:text-foreground\",\n        outline:\n          \"border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:data-pressed:bg-input/64 dark:hover:bg-input/64 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 *:data-[slot=button-loading-indicator]:text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80\",\n      },\n    },\n  },\n);\n\nexport interface ButtonProps extends useRender.ComponentProps<\"button\"> {\n  variant?: VariantProps<typeof buttonVariants>[\"variant\"];\n  size?: VariantProps<typeof buttonVariants>[\"size\"];\n  loading?: boolean;\n}\n\nexport function Button({\n  className,\n  variant,\n  size,\n  render,\n  children,\n  loading = false,\n  disabled: disabledProp,\n  ...props\n}: ButtonProps): React.ReactElement {\n  const isDisabled: boolean = Boolean(loading || disabledProp);\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        {children}\n        {loading && (\n          <Spinner\n            className=\"pointer-events-none absolute\"\n            data-slot=\"button-loading-indicator\"\n          />\n        )}\n      </>\n    ),\n    className: cn(buttonVariants({ className, size, variant })),\n    \"aria-disabled\": loading || undefined,\n    \"data-loading\": loading ? \"\" : undefined,\n    \"data-slot\": \"button\",\n    disabled: isDisabled,\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "packages/ui/src/components/calendar.tsx",
    "content": "\"use client\";\n\nimport { cn } from \"@coss/ui/lib/utils\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronsUpDownIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { DayPicker } from \"react-day-picker\";\n\nconst buttonClassNames =\n  \"relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\";\n\nexport function Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  components: userComponents,\n  mode = \"single\",\n  ...props\n}: React.ComponentProps<typeof DayPicker>): React.ReactElement {\n  const defaultClassNames = {\n    button_next: buttonClassNames,\n    button_previous: buttonClassNames,\n    caption_label:\n      \"text-base sm:text-sm font-medium flex items-center gap-2 h-full\",\n    day: \"size-(--cell-size) text-sm py-px\",\n    day_button: cn(\n      buttonClassNames,\n      \"in-data-disabled:pointer-events-none in-[.range-middle]:rounded-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-middle]:in-data-selected:bg-accent in-data-selected:bg-primary in-[.range-middle]:in-data-selected:text-foreground in-data-disabled:text-muted-foreground/72 in-data-outside:text-muted-foreground/72 in-data-selected:in-data-outside:text-primary-foreground in-data-selected:text-primary-foreground in-data-disabled:line-through outline-none in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] focus-visible:z-1 focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n    ),\n    dropdown: \"absolute bg-popover inset-0 opacity-0\",\n    dropdown_root:\n      \"relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1\",\n    dropdowns:\n      \"w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium\",\n    hidden: \"invisible\",\n    month: \"w-full\",\n    month_caption:\n      \"relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2\",\n    months: \"relative flex flex-col sm:flex-row gap-2\",\n    nav: \"absolute top-0 flex w-full justify-between z-1\",\n    outside:\n      \"text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground\",\n    range_end: \"range-end\",\n    range_middle: \"range-middle\",\n    range_start: \"range-start\",\n    today:\n      \"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors\",\n    week_number:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n    weekday:\n      \"size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/72\",\n  };\n  const mergedClassNames: typeof defaultClassNames = Object.keys(\n    defaultClassNames,\n  ).reduce(\n    (acc, key) => {\n      const userClass = classNames?.[key as keyof typeof classNames];\n      const baseClass =\n        defaultClassNames[key as keyof typeof defaultClassNames];\n\n      acc[key as keyof typeof defaultClassNames] = userClass\n        ? cn(baseClass, userClass)\n        : baseClass;\n\n      return acc;\n    },\n    { ...defaultClassNames } as typeof defaultClassNames,\n  );\n\n  const defaultComponents = {\n    Chevron: ({\n      className,\n      orientation,\n      ...props\n    }: {\n      className?: string;\n      orientation?: \"left\" | \"right\" | \"up\" | \"down\";\n    }): React.ReactElement => {\n      if (orientation === \"left\") {\n        return (\n          <ChevronLeftIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      if (orientation === \"right\") {\n        return (\n          <ChevronRightIcon\n            className={cn(className, \"rtl:rotate-180\")}\n            {...props}\n            aria-hidden=\"true\"\n          />\n        );\n      }\n\n      return (\n        <ChevronsUpDownIcon\n          className={className}\n          {...props}\n          aria-hidden=\"true\"\n        />\n      );\n    },\n  };\n\n  const mergedComponents = {\n    ...defaultComponents,\n    ...userComponents,\n  };\n\n  const dayPickerProps = {\n    className: cn(\n      \"w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]\",\n      className,\n    ),\n    classNames: mergedClassNames,\n    components: mergedComponents,\n    \"data-slot\": \"calendar\",\n    formatters: {\n      formatMonthDropdown: (date: Date) =>\n        date.toLocaleString(\"default\", { month: \"short\" }),\n    } as React.ComponentProps<typeof DayPicker>[\"formatters\"],\n    mode,\n    showOutsideDays,\n    ...props,\n  };\n\n  return (\n    <DayPicker\n      {...(dayPickerProps as React.ComponentProps<typeof DayPicker>)}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/card.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Card({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n      className,\n    ),\n    \"data-slot\": \"card\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrame({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] *:data-[slot=card]:-m-px *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-semibold text-sm\", className),\n    \"data-slot\": \"card-frame-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-frame-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-center justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"px-6 py-4\", className),\n    \"data-slot\": \"card-frame-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-semibold text-lg leading-none\", className),\n    \"data-slot\": \"card-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardPanel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n      className,\n    ),\n    \"data-slot\": \"card-panel\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\n      className,\n    ),\n    \"data-slot\": \"card-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport { CardPanel as CardContent };\n"
  },
  {
    "path": "packages/ui/src/components/checkbox-group.tsx",
    "content": "\"use client\";\n\nimport { CheckboxGroup as CheckboxGroupPrimitive } from \"@base-ui/react/checkbox-group\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function CheckboxGroup({\n  className,\n  ...props\n}: CheckboxGroupPrimitive.Props): React.ReactElement {\n  return (\n    <CheckboxGroupPrimitive\n      className={cn(\"flex flex-col items-start gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { CheckboxGroupPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/checkbox.tsx",
    "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Checkbox({\n  className,\n  ...props\n}: CheckboxPrimitive.Root.Props): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      className={cn(\n        \"relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[.25rem] border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"checkbox\"\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        className=\"absolute -inset-px flex items-center justify-center rounded-[.25rem] text-primary-foreground data-unchecked:hidden data-checked:bg-primary data-indeterminate:text-foreground\"\n        data-slot=\"checkbox-indicator\"\n        render={(\n          props: React.ComponentProps<\"span\">,\n          state: CheckboxPrimitive.Indicator.State,\n        ) => (\n          <span {...props}>\n            {state.indeterminate ? (\n              <svg\n                aria-hidden=\"true\"\n                className=\"size-3.5 sm:size-3\"\n                fill=\"none\"\n                height=\"24\"\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth=\"3\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M5.252 12h13.496\" />\n              </svg>\n            ) : (\n              <svg\n                aria-hidden=\"true\"\n                className=\"size-3.5 sm:size-3\"\n                fill=\"none\"\n                height=\"24\"\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth=\"3\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n              </svg>\n            )}\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { CheckboxPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/collapsible.tsx",
    "content": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Collapsible({\n  ...props\n}: CollapsiblePrimitive.Root.Props): React.ReactElement {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nexport function CollapsibleTrigger({\n  className,\n  ...props\n}: CollapsiblePrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cn(\"cursor-pointer\", className)}\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  );\n}\n\nexport function CollapsiblePanel({\n  className,\n  ...props\n}: CollapsiblePrimitive.Panel.Props): React.ReactElement {\n  return (\n    <CollapsiblePrimitive.Panel\n      className={cn(\n        \"h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0\",\n        className,\n      )}\n      data-slot=\"collapsible-panel\"\n      {...props}\n    />\n  );\n}\n\nexport { CollapsiblePrimitive, CollapsiblePanel as CollapsibleContent };\n"
  },
  {
    "path": "packages/ui/src/components/combobox.tsx",
    "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { Input } from \"@coss/ui/components/input\";\nimport { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport const ComboboxContext: React.Context<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}> = React.createContext<{\n  chipsRef: React.RefObject<Element | null> | null;\n  multiple: boolean;\n}>({\n  chipsRef: null,\n  multiple: false,\n});\n\nexport function Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>,\n): React.ReactElement {\n  const chipsRef = React.useRef<Element | null>(null);\n  return (\n    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxContext.Provider>\n  );\n}\n\nexport function ComboboxChipsInput({\n  className,\n  size,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\n        \"min-w-12 flex-1 text-base outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5\",\n        sizeValue === \"sm\" ? \"ps-1.5\" : \"ps-2\",\n        className,\n      )}\n      data-size={typeof sizeValue === \"string\" ? sizeValue : undefined}\n      data-slot=\"combobox-chips-input\"\n      size={typeof sizeValue === \"number\" ? sizeValue : undefined}\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxInput({\n  className,\n  showTrigger = true,\n  showClear = false,\n  startAddon,\n  size,\n  triggerProps,\n  clearProps,\n  ...props\n}: Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  startAddon?: React.ReactNode;\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  ref?: React.Ref<HTMLInputElement>;\n  triggerProps?: ComboboxPrimitive.Trigger.Props;\n  clearProps?: ComboboxPrimitive.Clear.Props;\n}): React.ReactElement {\n  const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n  return (\n    <ComboboxPrimitive.InputGroup\n      className=\"relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\"\n      data-slot=\"combobox-input-group\"\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      <ComboboxPrimitive.Input\n        className={cn(\n          startAddon &&\n            \"data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=combobox-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]\",\n          sizeValue === \"sm\"\n            ? \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5\"\n            : \"has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7\",\n          className,\n        )}\n        data-slot=\"combobox-input\"\n        render={\n          <Input\n            className=\"has-disabled:opacity-100\"\n            nativeInput\n            size={sizeValue}\n          />\n        }\n        {...props}\n      />\n      {showTrigger && (\n        <ComboboxTrigger\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...triggerProps}\n        >\n          <ComboboxPrimitive.Icon data-slot=\"combobox-icon\">\n            <ChevronsUpDownIcon />\n          </ComboboxPrimitive.Icon>\n        </ComboboxTrigger>\n      )}\n      {showClear && (\n        <ComboboxClear\n          className={cn(\n            \"absolute top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n            sizeValue === \"sm\" ? \"end-0\" : \"end-0.5\",\n          )}\n          {...clearProps}\n        >\n          <XIcon />\n        </ComboboxClear>\n      )}\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nexport function ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={className}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\nexport function ComboboxPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  alignOffset,\n  align = \"start\",\n  anchor: anchorProp,\n  ...props\n}: ComboboxPrimitive.Popup.Props & {\n  align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n  anchor?: ComboboxPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n  const anchor = anchorProp ?? chipsRef;\n\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n        >\n          <ComboboxPrimitive.Popup\n            className=\"flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground\"\n            data-slot=\"combobox-popup\"\n            {...props}\n          >\n            {children}\n          </ComboboxPrimitive.Popup>\n        </span>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </ComboboxPrimitive.ItemIndicator>\n      <div className=\"col-start-2\">{children}</div>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border last:hidden\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroup({\n  className,\n  ...props\n}: ComboboxPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(\"[[role=group]+&]:mt-1.5\", className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxEmpty({\n  className,\n  ...props\n}: ComboboxPrimitive.Empty.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxRow({\n  className,\n  ...props\n}: ComboboxPrimitive.Row.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Row\n      className={className}\n      data-slot=\"combobox-row\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxValue({\n  ...props\n}: ComboboxPrimitive.Value.Props): React.ReactElement {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nexport function ComboboxList({\n  className,\n  ...props\n}: ComboboxPrimitive.List.Props): React.ReactElement {\n  return (\n    <ScrollArea scrollbarGutter scrollFade>\n      <ComboboxPrimitive.List\n        className={cn(\n          \"not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3\",\n          className,\n        )}\n        data-slot=\"combobox-list\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function ComboboxClear({\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Clear\n      className={className}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Status\n      className={cn(\n        \"px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nexport function ComboboxCollection(\n  props: ComboboxPrimitive.Collection.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  );\n}\n\nexport function ComboboxChips({\n  className,\n  children,\n  startAddon,\n  ...props\n}: ComboboxPrimitive.Chips.Props & {\n  startAddon?: React.ReactNode;\n}): React.ReactElement {\n  const { chipsRef } = React.useContext(ComboboxContext);\n\n  return (\n    <ComboboxPrimitive.Chips\n      className={cn(\n        \"relative inline-flex min-h-9 w-full flex-wrap gap-1 rounded-lg border border-input bg-background not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-base shadow-xs/5 outline-none ring-ring/24 transition-shadow *:min-h-7 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-10 has-data-[size=sm]:min-h-8 has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-8 has-data-[size=sm]:*:min-h-6 sm:min-h-8 sm:text-sm sm:has-data-[size=lg]:min-h-9 sm:has-data-[size=sm]:min-h-7 sm:*:min-h-6 sm:has-data-[size=lg]:*:min-h-7 sm:has-data-[size=sm]:*:min-h-5 dark:not-has-disabled:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"combobox-chips\"\n      ref={chipsRef as React.Ref<HTMLDivElement> | null}\n      {...props}\n    >\n      {startAddon && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex shrink-0 items-center ps-2 opacity-80 has-[~[data-size=sm]]:has-[+[data-slot=combobox-chip]]:pe-1.5 has-[~[data-size=sm]]:ps-1.5 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5\"\n          data-slot=\"combobox-start-addon\"\n        >\n          {startAddon}\n        </div>\n      )}\n      {children}\n    </ComboboxPrimitive.Chips>\n  );\n}\n\nexport function ComboboxChip({\n  children,\n  removeProps,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  removeProps?: ComboboxPrimitive.ChipRemove.Props;\n}): React.ReactElement {\n  return (\n    <ComboboxPrimitive.Chip\n      className=\"flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove {...removeProps} />\n    </ComboboxPrimitive.Chip>\n  );\n}\n\nexport function ComboboxChipRemove(\n  props: ComboboxPrimitive.ChipRemove.Props,\n): React.ReactElement {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      aria-label=\"Remove\"\n      className=\"h-full shrink-0 cursor-pointer px-1.5 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\"\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      <XIcon />\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nexport const useComboboxFilter: typeof ComboboxPrimitive.useFilter =\n  ComboboxPrimitive.useFilter;\n\nexport { ComboboxPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/command.tsx",
    "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport {\n  Autocomplete,\n  AutocompleteCollection,\n  AutocompleteEmpty,\n  AutocompleteGroup,\n  AutocompleteGroupLabel,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n  AutocompleteSeparator,\n} from \"@coss/ui/components/autocomplete\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n  CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n  CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n  CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n  props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Trigger\n      data-slot=\"command-dialog-trigger\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogBackdrop({\n  className,\n  ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"command-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogViewport({\n  className,\n  ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <CommandDialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n        className,\n      )}\n      data-slot=\"command-dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandDialogPopup({\n  className,\n  children,\n  ...props\n}: CommandDialogPrimitive.Popup.Props): React.ReactElement {\n  return (\n    <CommandDialogPortal>\n      <CommandDialogBackdrop />\n      <CommandDialogViewport>\n        <CommandDialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"command-dialog-popup\"\n          {...props}\n        >\n          {children}\n        </CommandDialogPrimitive.Popup>\n      </CommandDialogViewport>\n    </CommandDialogPortal>\n  );\n}\n\nexport function Command({\n  autoHighlight = \"always\",\n  keepHighlight = true,\n  ...props\n}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {\n  return (\n    <Autocomplete\n      autoHighlight={autoHighlight}\n      inline\n      keepHighlight={keepHighlight}\n      open\n      {...props}\n    />\n  );\n}\n\nexport function CommandInput({\n  className,\n  placeholder = undefined,\n  ...props\n}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {\n  return (\n    <div className=\"px-2.5 py-1.5\">\n      <AutocompleteInput\n        autoFocus\n        className={cn(\n          \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n          className,\n        )}\n        placeholder={placeholder}\n        size=\"lg\"\n        startAddon={<SearchIcon />}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {\n  return (\n    <AutocompleteList\n      className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n      data-slot=\"command-list\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {\n  return (\n    <AutocompleteEmpty\n      className={cn(\"not-empty:py-6\", className)}\n      data-slot=\"command-empty\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className=\"relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {\n  return (\n    <AutocompleteGroup\n      className={className}\n      data-slot=\"command-group\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {\n  return (\n    <AutocompleteGroupLabel\n      className={className}\n      data-slot=\"command-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandCollection({\n  ...props\n}: React.ComponentProps<typeof AutocompleteCollection>): React.ReactElement {\n  return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nexport function CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {\n  return (\n    <AutocompleteItem\n      className={cn(\"py-1.5\", className)}\n      data-slot=\"command-item\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {\n  return (\n    <AutocompleteSeparator\n      className={cn(\"my-2\", className)}\n      data-slot=\"command-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"command-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function CommandFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs\",\n        className,\n      )}\n      data-slot=\"command-footer\"\n      {...props}\n    />\n  );\n}\n\nexport { CommandDialogPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/dialog.tsx",
    "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Button } from \"@coss/ui/components/button\";\nimport { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\n\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\n  DialogPrimitive.createHandle;\n\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\n\nexport const DialogPortal: typeof DialogPrimitive.Portal =\n  DialogPrimitive.Portal;\n\nexport function DialogTrigger(\n  props: DialogPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nexport function DialogClose(\n  props: DialogPrimitive.Close.Props,\n): React.ReactElement {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nexport function DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogViewport({\n  className,\n  ...props\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n        className,\n      )}\n      data-slot=\"dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  bottomStickOnMobile = true,\n  closeProps,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  bottomStickOnMobile?: boolean;\n  closeProps?: DialogPrimitive.Close.Props;\n}): React.ReactElement {\n  return (\n    <DialogPortal>\n      <DialogBackdrop />\n      <DialogViewport\n        className={cn(\n          bottomStickOnMobile &&\n            \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n        )}\n      >\n        <DialogPrimitive.Popup\n          className={cn(\n            \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            bottomStickOnMobile &&\n              \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n            className,\n          )}\n          data-slot=\"dialog-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </DialogViewport>\n    </DialogPortal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"dialog-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"dialog-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DialogTitle({\n  className,\n  ...props\n}: DialogPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DialogPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"dialog-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  DialogPrimitive,\n  DialogBackdrop as DialogOverlay,\n  DialogPopup as DialogContent,\n};\n"
  },
  {
    "path": "packages/ui/src/components/drawer.tsx",
    "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Button } from \"@coss/ui/components/button\";\nimport { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n  createContext<{ position: DrawerPosition }>({\n    position: \"bottom\",\n  });\n\nconst directionMap: Record<\n  DrawerPosition,\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n  bottom: \"down\",\n  left: \"left\",\n  right: \"right\",\n  top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n  DrawerPrimitive.createHandle;\n\nexport function Drawer({\n  swipeDirection,\n  position = \"bottom\",\n  ...props\n}: DrawerPrimitive.Root.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  return (\n    <DrawerContext.Provider value={{ position }}>\n      <DrawerPrimitive.Root\n        swipeDirection={swipeDirection ?? directionMap[position]}\n        {...props}\n      />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n  DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n  props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nexport function DrawerClose(\n  props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nexport function DrawerSwipeArea({\n  className,\n  position: positionProp,\n  ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPrimitive.SwipeArea\n      className={cn(\n        \"fixed z-50 touch-none\",\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\n        className,\n      )}\n      data-slot=\"drawer-swipe-area\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBackdrop({\n  className,\n  ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"drawer-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerViewport({\n  className,\n  position,\n  variant = \"default\",\n  ...props\n}: DrawerPrimitive.Viewport.Props & {\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <DrawerPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]\",\n        \"touch-none\",\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        position === \"left\" && \"flex justify-start\",\n        position === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"px-(--inset) sm:[--inset:--spacing(4)]\",\n        variant === \"inset\" && position !== \"bottom\" && \"pt-(--inset)\",\n        variant === \"inset\" && position !== \"top\" && \"pb-(--inset)\",\n      )}\n      data-slot=\"drawer-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPopup({\n  className,\n  children,\n  showCloseButton = false,\n  position: positionProp,\n  variant = \"default\",\n  showBar = false,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  position?: DrawerPosition;\n  variant?: \"default\" | \"straight\" | \"inset\";\n  showBar?: boolean;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n\n  return (\n    <DrawerPortal>\n      <DrawerBackdrop />\n      <DrawerViewport position={position} variant={variant}>\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            \"touch-none\",\n            position === \"bottom\" &&\n              \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0\",\n            position === \"top\" &&\n              \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2\",\n            position === \"left\" &&\n              \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2\",\n            position === \"right\" &&\n              \"transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2\",\n            variant !== \"straight\" &&\n              cn(\n                position === \"bottom\" && \"rounded-t-2xl\",\n                position === \"top\" &&\n                  \"rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"default\" &&\n              cn(\n                position === \"bottom\" &&\n                  \"before:rounded-t-[calc(var(--radius-2xl)-1px)]\",\n                position === \"top\" &&\n                  \"before:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n                position === \"left\" &&\n                  \"before:rounded-e-[calc(var(--radius-2xl)-1px)]\",\n                position === \"right\" &&\n                  \"before:rounded-s-[calc(var(--radius-2xl)-1px)]\",\n              ),\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            variant === \"straight\" && \"[--stack-step:0]\",\n            (position === \"bottom\" || position === \"top\") &&\n              \"h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)\",\n            position === \"bottom\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]\",\n            position === \"top\" &&\n              \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]\",\n            position === \"left\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right\",\n            position === \"right\" &&\n              \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left\",\n            className,\n          )}\n          data-slot=\"drawer-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n            >\n              <XIcon />\n            </DrawerPrimitive.Close>\n          )}\n          {showBar && <DrawerBar />}\n        </DrawerPrimitive.Popup>\n      </DrawerViewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  className,\n  allowSelection = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerFooter({\n  className,\n  variant = \"default\",\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n      !allowSelection && \"cursor-default\",\n      variant === \"default\" &&\n        \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n      className,\n    ),\n    \"data-slot\": \"drawer-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"drawer-title\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n  return (\n    <DrawerPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"drawer-description\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerPanel({\n  className,\n  scrollFade = true,\n  scrollable = true,\n  allowSelection = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n  scrollable?: boolean;\n  allowSelection?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n      !allowSelection && \"cursor-default\",\n      className,\n    ),\n    \"data-slot\": \"drawer-panel\",\n  };\n\n  const content = useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render: allowSelection ? <DrawerContent render={render} /> : render,\n  });\n\n  if (scrollable) {\n    return (\n      <ScrollArea className=\"touch-auto\" scrollFade={scrollFade}>\n        {content}\n      </ScrollArea>\n    );\n  }\n\n  return content;\n}\n\nexport function DrawerBar({\n  className,\n  position: positionProp,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  position?: DrawerPosition;\n}): React.ReactElement {\n  const { position: contextPosition } = useContext(DrawerContext);\n  const position = positionProp ?? contextPosition;\n  const horizontal = position === \"left\" || position === \"right\";\n  const defaultProps = {\n    \"aria-hidden\": true as const,\n    className: cn(\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n      horizontal\n        ? \"inset-y-0 before:h-12 before:w-1\"\n        : \"inset-x-0 before:h-1 before:w-12\",\n      position === \"top\" && \"bottom-0\",\n      position === \"bottom\" && \"top-0\",\n      position === \"left\" && \"right-0\",\n      position === \"right\" && \"left-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-bar\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n  DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"-m-2 flex flex-col\", className),\n    \"data-slot\": \"drawer-menu\",\n  };\n\n  return useRender({\n    defaultTagName: \"nav\",\n    props: mergeProps<\"nav\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuItem({\n  className,\n  variant = \"default\",\n  render,\n  disabled,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-item\",\n    \"data-variant\": variant,\n    disabled,\n    type: \"button\" as const,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuSeparator({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\n    \"data-slot\": \"drawer-menu-separator\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroup({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex flex-col\", className),\n    \"data-slot\": \"drawer-menu-group\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n      className,\n    ),\n    \"data-slot\": \"drawer-menu-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function DrawerMenuTrigger({\n  className,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <DrawerTrigger\n      className={cn(\n        \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"drawer-menu-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </DrawerTrigger>\n  );\n}\n\nexport function DrawerMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"default\",\n  disabled,\n  render,\n  ...props\n}: CheckboxPrimitive.Root.Props & {\n  variant?: \"default\" | \"switch\";\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <CheckboxPrimitive.Root\n      checked={checked}\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[1rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-checkbox-item\"\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      render={render}\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <CheckboxPrimitive.Indicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </CheckboxPrimitive.Indicator>\n        </>\n      ) : (\n        <>\n          <CheckboxPrimitive.Indicator className=\"col-start-1\">\n            <svg\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </CheckboxPrimitive.Indicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport function DrawerMenuRadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col\", className)}\n      data-slot=\"drawer-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function DrawerMenuRadioItem({\n  className,\n  children,\n  value,\n  disabled,\n  render,\n  ...props\n}: RadioPrimitive.Root.Props & {\n  value: string;\n  render?: React.ReactElement;\n}): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        \"grid-cols-[1rem_1fr] items-center pe-4\",\n        className,\n      )}\n      data-slot=\"drawer-menu-radio-item\"\n      disabled={disabled}\n      render={render}\n      value={value}\n      {...props}\n    >\n      <RadioPrimitive.Indicator className=\"col-start-1\">\n        <svg\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </RadioPrimitive.Indicator>\n      <span className=\"col-start-2\">{children}</span>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { DrawerPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/empty.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\n\nconst emptyMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card not-dark:bg-clip-padding text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5\",\n      },\n    },\n  },\n);\n\nexport function Empty({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance px-6 py-12 text-center md:py-20\",\n        className,\n      )}\n      data-slot=\"empty\"\n      {...props}\n    />\n  );\n}\n\nexport function EmptyHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex max-w-sm flex-col items-center text-center\",\n        className,\n      )}\n      data-slot=\"empty-header\"\n      {...props}\n    />\n  );\n}\n\nexport function EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof emptyMediaVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(\"relative mb-6\", className)}\n      data-slot=\"empty-media\"\n      data-variant={variant}\n      {...props}\n    >\n      {variant === \"icon\" && (\n        <>\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              emptyMediaVariants({ className, variant }),\n              \"pointer-events-none absolute bottom-px origin-bottom-left -translate-x-0.5 -rotate-10 scale-84 shadow-none\",\n            )}\n          />\n          <div\n            aria-hidden=\"true\"\n            className={cn(\n              emptyMediaVariants({ className, variant }),\n              \"pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none\",\n            )}\n          />\n        </>\n      )}\n      <div\n        className={cn(emptyMediaVariants({ className, variant }))}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function EmptyTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"font-heading font-semibold text-xl\", className)}\n      data-slot=\"empty-title\"\n      {...props}\n    />\n  );\n}\n\nexport function EmptyDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1\",\n        className,\n      )}\n      data-slot=\"empty-description\"\n      {...props}\n    />\n  );\n}\n\nexport function EmptyContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm\",\n        className,\n      )}\n      data-slot=\"empty-content\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/field.tsx",
    "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Field({\n  className,\n  ...props\n}: FieldPrimitive.Root.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Root\n      className={cn(\"flex flex-col items-start gap-2\", className)}\n      data-slot=\"field\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldLabel({\n  className,\n  ...props\n}: FieldPrimitive.Label.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Label\n      className={cn(\n        \"inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"field-label\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldItem({\n  className,\n  ...props\n}: FieldPrimitive.Item.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Item\n      className={cn(\"flex\", className)}\n      data-slot=\"field-item\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldDescription({\n  className,\n  ...props\n}: FieldPrimitive.Description.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Description\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      data-slot=\"field-description\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldError({\n  className,\n  ...props\n}: FieldPrimitive.Error.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Error\n      className={cn(\"text-destructive-foreground text-xs\", className)}\n      data-slot=\"field-error\"\n      {...props}\n    />\n  );\n}\n\nexport const FieldControl: typeof FieldPrimitive.Control =\n  FieldPrimitive.Control;\nexport const FieldValidity: typeof FieldPrimitive.Validity =\n  FieldPrimitive.Validity;\n\nexport { FieldPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/fieldset.tsx",
    "content": "\"use client\";\n\nimport { Fieldset as FieldsetPrimitive } from \"@base-ui/react/fieldset\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Fieldset({\n  className,\n  ...props\n}: FieldsetPrimitive.Root.Props): React.ReactElement {\n  return (\n    <FieldsetPrimitive.Root\n      className={cn(\"flex w-full max-w-64 flex-col gap-6\", className)}\n      data-slot=\"fieldset\"\n      {...props}\n    />\n  );\n}\nexport function FieldsetLegend({\n  className,\n  ...props\n}: FieldsetPrimitive.Legend.Props): React.ReactElement {\n  return (\n    <FieldsetPrimitive.Legend\n      className={cn(\"font-semibold text-foreground\", className)}\n      data-slot=\"fieldset-legend\"\n      {...props}\n    />\n  );\n}\n\nexport { FieldsetPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/form.tsx",
    "content": "\"use client\";\n\nimport { Form as FormPrimitive } from \"@base-ui/react/form\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Form({\n  className,\n  ...props\n}: FormPrimitive.Props): React.ReactElement {\n  return (\n    <FormPrimitive\n      className={cn(\"flex w-full flex-col gap-4\", className)}\n      data-slot=\"form\"\n      {...props}\n    />\n  );\n}\n\nexport { FormPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/frame.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport type * as React from \"react\";\n\nexport function Frame({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative flex flex-col rounded-2xl bg-muted/72 p-1\",\n        \"*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1\",\n        className,\n      )}\n      data-slot=\"frame\"\n      {...props}\n    />\n  );\n}\n\nexport function FramePanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n        className,\n      )}\n      data-slot=\"frame-panel\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"header\">): React.ReactElement {\n  return (\n    <header\n      className={cn(\"flex flex-col px-5 py-4\", className)}\n      data-slot=\"frame-panel-header\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"font-semibold text-sm\", className)}\n      data-slot=\"frame-panel-title\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"frame-panel-description\"\n      {...props}\n    />\n  );\n}\n\nexport function FrameFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"footer\">): React.ReactElement {\n  return (\n    <footer\n      className={cn(\"px-5 py-4\", className)}\n      data-slot=\"frame-panel-footer\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/group.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Separator } from \"@coss/ui/components/separator\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nexport const groupVariants = cva(\n  \"flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64 dark:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64\",\n  {\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none\",\n        vertical:\n          \"flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none\",\n      },\n    },\n  },\n);\n\nexport function Group({\n  className,\n  orientation,\n  children,\n  ...props\n}: {\n  className?: string;\n  orientation?: VariantProps<typeof groupVariants>[\"orientation\"];\n  children: React.ReactNode;\n} & React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(groupVariants({ orientation }), className)}\n      data-orientation={orientation}\n      data-slot=\"group\"\n      role=\"group\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function GroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative inline-flex items-center gap-2 whitespace-nowrap rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-base text-muted-foreground shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n      className,\n    ),\n    \"data-slot\": \"group-text\",\n  };\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function GroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: {\n  className?: string;\n} & React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\n        \"pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px\",\n        className,\n      )}\n      orientation={orientation}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Group as ButtonGroup,\n  GroupText as ButtonGroupText,\n  GroupSeparator as ButtonGroupSeparator,\n};\n"
  },
  {
    "path": "packages/ui/src/components/input-group.tsx",
    "content": "\"use client\";\n\nimport { Input, type InputProps } from \"@coss/ui/components/input\";\nimport { Textarea, type TextareaProps } from \"@coss/ui/components/textarea\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text select-none items-center justify-center gap-2 leading-none [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n  {\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n    variants: {\n      align: {\n        \"block-end\":\n          \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n        \"inline-end\":\n          \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n        \"inline-start\":\n          \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n      },\n    },\n  },\n);\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n        className,\n      )}\n      data-slot=\"input-group\"\n      role=\"group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n        const target = e.target as HTMLElement;\n        const isInteractive = target.closest(\n          \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n        );\n        if (isInteractive) return;\n        e.preventDefault();\n        const parent = e.currentTarget.parentElement;\n        const input = parent?.querySelector<\n          HTMLInputElement | HTMLTextAreaElement\n        >(\"input, textarea\");\n        if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n          input.focus();\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      className={cn(\n        \"line-clamp-1 flex items-center gap-2 whitespace-nowrap text-muted-foreground leading-none in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupInput({\n  className,\n  ...props\n}: InputProps): React.ReactElement {\n  return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return <Textarea className={className} unstyled {...props} />;\n}\n"
  },
  {
    "path": "packages/ui/src/components/input-otp.tsx",
    "content": "\"use client\";\n\nimport { Separator } from \"@coss/ui/components/separator\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\nimport type * as React from \"react\";\nimport { useContext } from \"react\";\n\ntype InputOTPSize = \"default\" | \"lg\";\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nexport type InputOTPProps = DistributiveOmit<\n  React.ComponentProps<typeof OTPInput>,\n  \"size\" | \"data-size\"\n> & {\n  containerClassName?: string;\n};\n\nexport function InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: InputOTPProps): React.ReactElement {\n  return (\n    <OTPInput\n      className={className}\n      containerClassName={cn(\n        \"flex items-center gap-2 has-disabled:opacity-64 has-disabled:**:data-[slot=input-otp-slot]:shadow-none has-disabled:**:data-[slot=input-otp-slot]:before:shadow-none!\",\n        containerClassName,\n      )}\n      data-slot=\"input-otp\"\n      spellCheck={false}\n      {...props}\n    />\n  );\n}\n\nexport function InputOTPGroup({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  size?: InputOTPSize;\n}): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex items-center gap-2\", className)}\n      data-size={size}\n      data-slot=\"input-otp-group\"\n      {...props}\n    />\n  );\n}\n\nexport function InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number;\n}): React.ReactElement {\n  const inputOTPContext = useContext(OTPInputContext);\n  const slot = inputOTPContext?.slots[index];\n  const { char, hasFakeCaret, isActive } = slot ?? {};\n\n  return (\n    <div\n      className={cn(\n        \"relative inline-flex in-[[data-slot=input-otp-group][data-size=lg]]:size-10 size-9 items-center justify-center rounded-lg border border-input bg-background not-dark:bg-clip-padding in-[[data-slot=input-otp-group][data-size=lg]]:text-lg text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-[active=true]:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] aria-invalid:border-destructive/36 data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/24 data-[active=true]:aria-invalid:border-destructive/64 data-[active=true]:aria-invalid:ring-destructive/16 sm:in-[[data-slot=input-otp-group][data-size=lg]]:size-9 sm:size-8 sm:in-[[data-slot=input-otp-group][data-size=lg]]:text-base sm:text-sm dark:bg-input/32 dark:data-[active=true]:aria-invalid:ring-destructive/24 dark:not-data-[active=true]:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-active=true],[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-active={isActive ? true : undefined}\n      data-slot=\"input-otp-slot\"\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function InputOTPSeparator({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\n        \"rounded-full bg-input data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { OTPInput as InputOTPPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/input.tsx",
    "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type * as React from \"react\";\n\nexport type InputProps = Omit<\n  InputPrimitive.Props & React.RefAttributes<HTMLInputElement>,\n  \"size\"\n> & {\n  size?: \"sm\" | \"default\" | \"lg\" | number;\n  unstyled?: boolean;\n  nativeInput?: boolean;\n};\n\nexport function Input({\n  className,\n  size = \"default\",\n  unstyled = false,\n  nativeInput = false,\n  ...props\n}: InputProps): React.ReactElement {\n  const inputClassName = cn(\n    \"h-8.5 w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 sm:h-7.5 sm:leading-7.5\",\n    size === \"sm\" &&\n      \"h-7.5 px-[calc(--spacing(2.5)-1px)] leading-7.5 sm:h-6.5 sm:leading-6.5\",\n    size === \"lg\" && \"h-9.5 leading-9.5 sm:h-8.5 sm:leading-8.5\",\n    props.type === \"search\" &&\n      \"[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none\",\n    props.type === \"file\" &&\n      \"text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm\",\n  );\n\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-autofill:bg-foreground/4 has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-has-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"input-control\"\n    >\n      {nativeInput ? (\n        <input\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          {...props}\n        />\n      ) : (\n        <InputPrimitive\n          className={inputClassName}\n          data-slot=\"input\"\n          size={typeof size === \"number\" ? size : undefined}\n          {...props}\n        />\n      )}\n    </span>\n  );\n}\n\nexport { InputPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/kbd.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport type * as React from \"react\";\n\nexport function Kbd({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded bg-muted px-1 font-medium font-sans text-muted-foreground text-xs [&_svg:not([class*='size-'])]:size-3\",\n        className,\n      )}\n      data-slot=\"kbd\"\n      {...props}\n    />\n  );\n}\n\nexport function KbdGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      data-slot=\"kbd-group\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/label.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Label({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"label\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n      className,\n    ),\n    \"data-slot\": \"label\",\n  };\n\n  return useRender({\n    defaultTagName: \"label\",\n    props: mergeProps<\"label\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "packages/ui/src/components/menu.tsx",
    "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport const MenuCreateHandle: typeof MenuPrimitive.createHandle =\n  MenuPrimitive.createHandle;\n\nexport const Menu: typeof MenuPrimitive.Root = MenuPrimitive.Root;\n\nexport const MenuPortal: typeof MenuPrimitive.Portal = MenuPrimitive.Portal;\n\nexport function MenuTrigger({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <MenuPrimitive.Trigger\n      className={className}\n      data-slot=\"menu-trigger\"\n      {...props}\n    >\n      {children}\n    </MenuPrimitive.Trigger>\n  );\n}\n\nexport function MenuPopup({\n  children,\n  className,\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  side = \"bottom\",\n  anchor,\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"];\n  side?: MenuPrimitive.Positioner.Props[\"side\"];\n  anchor?: MenuPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50\"\n        data-slot=\"menu-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          className={cn(\n            \"relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"menu-popup\"\n          {...props}\n        >\n          <div className=\"max-h-(--available-height) w-full overflow-y-auto p-1\">\n            {children}\n          </div>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport function MenuGroup(\n  props: MenuPrimitive.Group.Props,\n): React.ReactElement {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />;\n}\n\nexport function MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-item\"\n      data-variant={variant}\n      {...props}\n    />\n  );\n}\n\nexport function MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  variant?: \"default\" | \"switch\";\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        variant === \"switch\"\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\n          : \"grid-cols-[.75rem_1fr] pe-4\",\n        className,\n      )}\n      data-slot=\"menu-checkbox-item\"\n      {...props}\n    >\n      {variant === \"switch\" ? (\n        <>\n          <span className=\"col-start-1\">{children}</span>\n          <MenuPrimitive.CheckboxItemIndicator\n            className=\"inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]\"\n            keepMounted\n          >\n            <span className=\"pointer-events-none block aspect-square h-full in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]\" />\n          </MenuPrimitive.CheckboxItemIndicator>\n        </>\n      ) : (\n        <>\n          <MenuPrimitive.CheckboxItemIndicator className=\"col-start-1 -ms-0.5\">\n            <svg\n              aria-hidden=\"true\"\n              fill=\"none\"\n              height=\"24\"\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              viewBox=\"0 0 24 24\"\n              width=\"24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n            </svg>\n          </MenuPrimitive.CheckboxItemIndicator>\n          <span className=\"col-start-2\">{children}</span>\n        </>\n      )}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function MenuRadioGroup(\n  props: MenuPrimitive.RadioGroup.Props,\n): React.ReactElement {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />;\n}\n\nexport function MenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props): React.ReactElement {\n  return (\n    <MenuPrimitive.RadioItem\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[.75rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"menu-radio-item\"\n      {...props}\n    >\n      <MenuPrimitive.RadioItemIndicator className=\"col-start-1 -ms-0.5\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </MenuPrimitive.RadioItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function MenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.GroupLabel\n      className={cn(\n        \"px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-label\"\n      {...props}\n    />\n  );\n}\n\nexport function MenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <MenuPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"menu-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function MenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n        className,\n      )}\n      data-slot=\"menu-shortcut\"\n      {...props}\n    />\n  );\n}\n\nexport function MenuSub(\n  props: MenuPrimitive.SubmenuRoot.Props,\n): React.ReactElement {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />;\n}\n\nexport function MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}): React.ReactElement {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      className={cn(\n        \"flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none\",\n        className,\n      )}\n      data-inset={inset}\n      data-slot=\"menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto -me-0.5 opacity-80\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nexport function MenuSubPopup({\n  className,\n  sideOffset = 0,\n  alignOffset,\n  align = \"start\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"];\n}): React.ReactElement {\n  const defaultAlignOffset = align !== \"center\" ? -5 : undefined;\n\n  return (\n    <MenuPopup\n      align={align}\n      alignOffset={alignOffset ?? defaultAlignOffset}\n      className={className}\n      data-slot=\"menu-sub-content\"\n      side=\"inline-end\"\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nexport {\n  MenuPrimitive,\n  MenuCreateHandle as DropdownMenuCreateHandle,\n  Menu as DropdownMenu,\n  MenuPortal as DropdownMenuPortal,\n  MenuTrigger as DropdownMenuTrigger,\n  MenuPopup as DropdownMenuContent,\n  MenuGroup as DropdownMenuGroup,\n  MenuItem as DropdownMenuItem,\n  MenuCheckboxItem as DropdownMenuCheckboxItem,\n  MenuRadioGroup as DropdownMenuRadioGroup,\n  MenuRadioItem as DropdownMenuRadioItem,\n  MenuGroupLabel as DropdownMenuLabel,\n  MenuSeparator as DropdownMenuSeparator,\n  MenuShortcut as DropdownMenuShortcut,\n  MenuSub as DropdownMenuSub,\n  MenuSubTrigger as DropdownMenuSubTrigger,\n  MenuSubPopup as DropdownMenuSubContent,\n};\n"
  },
  {
    "path": "packages/ui/src/components/meter.tsx",
    "content": "\"use client\";\n\nimport { Meter as MeterPrimitive } from \"@base-ui/react/meter\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Meter({\n  className,\n  children,\n  ...props\n}: MeterPrimitive.Root.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Root\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...props}\n    >\n      {children ? (\n        children\n      ) : (\n        <MeterTrack>\n          <MeterIndicator />\n        </MeterTrack>\n      )}\n    </MeterPrimitive.Root>\n  );\n}\n\nexport function MeterLabel({\n  className,\n  ...props\n}: MeterPrimitive.Label.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Label\n      className={cn(\"font-medium text-foreground text-sm\", className)}\n      data-slot=\"meter-label\"\n      {...props}\n    />\n  );\n}\n\nexport function MeterTrack({\n  className,\n  ...props\n}: MeterPrimitive.Track.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Track\n      className={cn(\"block h-2 w-full overflow-hidden bg-input\", className)}\n      data-slot=\"meter-track\"\n      {...props}\n    />\n  );\n}\n\nexport function MeterIndicator({\n  className,\n  ...props\n}: MeterPrimitive.Indicator.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Indicator\n      className={cn(\"bg-primary transition-all duration-500\", className)}\n      data-slot=\"meter-indicator\"\n      {...props}\n    />\n  );\n}\n\nexport function MeterValue({\n  className,\n  ...props\n}: MeterPrimitive.Value.Props): React.ReactElement {\n  return (\n    <MeterPrimitive.Value\n      className={cn(\"text-foreground text-sm tabular-nums\", className)}\n      data-slot=\"meter-value\"\n      {...props}\n    />\n  );\n}\n\nexport { MeterPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/number-field.tsx",
    "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { Label } from \"@coss/ui/components/label\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nexport const NumberFieldContext: React.Context<{\n  fieldId: string;\n} | null> = React.createContext<{\n  fieldId: string;\n} | null>(null);\n\nexport function NumberField({\n  id,\n  className,\n  size = \"default\",\n  ...props\n}: NumberFieldPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\" | \"lg\";\n}): React.ReactElement {\n  const generatedId = React.useId();\n  const fieldId = id ?? generatedId;\n\n  return (\n    <NumberFieldContext.Provider value={{ fieldId }}>\n      <NumberFieldPrimitive.Root\n        className={cn(\"flex w-full flex-col items-start gap-2\", className)}\n        data-size={size}\n        data-slot=\"number-field\"\n        id={fieldId}\n        {...props}\n      />\n    </NumberFieldContext.Provider>\n  );\n}\n\nexport function NumberFieldGroup({\n  className,\n  ...props\n}: NumberFieldPrimitive.Group.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(\n        \"relative flex w-full justify-between rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 has-autofill:bg-foreground/4 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/48 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"number-field-group\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldDecrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      <MinusIcon />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nexport function NumberFieldIncrement({\n  className,\n  ...props\n}: NumberFieldPrimitive.Increment.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\n        \"relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      <PlusIcon />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nexport function NumberFieldInput({\n  className,\n  ...props\n}: NumberFieldPrimitive.Input.Props): React.ReactElement {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(\n        \"h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none [transition:background-color_5000000s_ease-in-out_0s] sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5\",\n        className,\n      )}\n      data-slot=\"number-field-input\"\n      {...props}\n    />\n  );\n}\n\nexport function NumberFieldScrubArea({\n  className,\n  label,\n  ...props\n}: NumberFieldPrimitive.ScrubArea.Props & {\n  label: string;\n}): React.ReactElement {\n  const context = React.useContext(NumberFieldContext);\n\n  if (!context) {\n    throw new Error(\n      \"NumberFieldScrubArea must be used within a NumberField component for accessibility.\",\n    );\n  }\n\n  return (\n    <NumberFieldPrimitive.ScrubArea\n      className={cn(\"flex cursor-ew-resize\", className)}\n      data-slot=\"number-field-scrub-area\"\n      {...props}\n    >\n      <Label className=\"cursor-ew-resize\" htmlFor={context.fieldId}>\n        {label}\n      </Label>\n      <NumberFieldPrimitive.ScrubAreaCursor className=\"drop-shadow-[0_1px_1px_#0008] filter\">\n        <CursorGrowIcon />\n      </NumberFieldPrimitive.ScrubAreaCursor>\n    </NumberFieldPrimitive.ScrubArea>\n  );\n}\n\nexport function CursorGrowIcon(\n  props: React.ComponentProps<\"svg\">,\n): React.ReactElement {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"black\"\n      height=\"14\"\n      stroke=\"white\"\n      viewBox=\"0 0 24 14\"\n      width=\"26\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z\" />\n    </svg>\n  );\n}\n\nexport { NumberFieldPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/pagination.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { type Button, buttonVariants } from \"@coss/ui/components/button\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport function Pagination({\n  className,\n  ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n  return (\n    <nav\n      aria-label=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      data-slot=\"pagination\"\n      {...props}\n    />\n  );\n}\n\nexport function PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      data-slot=\"pagination-content\"\n      {...props}\n    />\n  );\n}\n\nexport function PaginationItem({\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\nexport type PaginationLinkProps = {\n  isActive?: boolean;\n  size?: React.ComponentProps<typeof Button>[\"size\"];\n} & useRender.ComponentProps<\"a\">;\n\nexport function PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  render,\n  ...props\n}: PaginationLinkProps): React.ReactElement {\n  const defaultProps = {\n    \"aria-current\": isActive ? (\"page\" as const) : undefined,\n    className: render\n      ? className\n      : cn(\n          buttonVariants({\n            size,\n            variant: isActive ? \"outline\" : \"ghost\",\n          }),\n          className,\n        ),\n    \"data-active\": isActive,\n    \"data-slot\": \"pagination-link\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n      size=\"default\"\n      {...props}\n    >\n      <ChevronLeftIcon className=\"sm:-ms-1\" />\n      <span className=\"max-sm:hidden\">Previous</span>\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n      size=\"default\"\n      {...props}\n    >\n      <span className=\"max-sm:hidden\">Next</span>\n      <ChevronRightIcon className=\"sm:-me-1\" />\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n  return (\n    <span\n      aria-hidden\n      className={cn(\"flex min-w-7 justify-center\", className)}\n      data-slot=\"pagination-ellipsis\"\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-5 sm:size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/popover.tsx",
    "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport const PopoverCreateHandle: typeof PopoverPrimitive.createHandle =\n  PopoverPrimitive.createHandle;\n\nexport const Popover: typeof PopoverPrimitive.Root = PopoverPrimitive.Root;\n\nexport function PopoverTrigger({\n  className,\n  children,\n  ...props\n}: PopoverPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <PopoverPrimitive.Trigger\n      className={className}\n      data-slot=\"popover-trigger\"\n      {...props}\n    >\n      {children}\n    </PopoverPrimitive.Trigger>\n  );\n}\n\nexport function PopoverPopup({\n  children,\n  className,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  alignOffset = 0,\n  tooltipStyle = false,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props & {\n  side?: PopoverPrimitive.Positioner.Props[\"side\"];\n  align?: PopoverPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: PopoverPrimitive.Positioner.Props[\"sideOffset\"];\n  alignOffset?: PopoverPrimitive.Positioner.Props[\"alignOffset\"];\n  tooltipStyle?: boolean;\n  anchor?: PopoverPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none\"\n        data-slot=\"popover-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <PopoverPrimitive.Popup\n          className={cn(\n            \"relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            tooltipStyle &&\n              \"w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\",\n            className,\n          )}\n          data-slot=\"popover-popup\"\n          {...props}\n        >\n          <PopoverPrimitive.Viewport\n            className={cn(\n              \"relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-2 data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity\",\n              tooltipStyle\n                ? \"py-1 [--viewport-inline-padding:--spacing(2)]\"\n                : \"not-data-transitioning:overflow-y-auto\",\n            )}\n            data-slot=\"popover-viewport\"\n          >\n            {children}\n          </PopoverPrimitive.Viewport>\n        </PopoverPrimitive.Popup>\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport function PopoverClose({\n  ...props\n}: PopoverPrimitive.Close.Props): React.ReactElement {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n}\n\nexport function PopoverTitle({\n  className,\n  ...props\n}: PopoverPrimitive.Title.Props): React.ReactElement {\n  return (\n    <PopoverPrimitive.Title\n      className={cn(\"font-semibold text-lg leading-none\", className)}\n      data-slot=\"popover-title\"\n      {...props}\n    />\n  );\n}\n\nexport function PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props): React.ReactElement {\n  return (\n    <PopoverPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"popover-description\"\n      {...props}\n    />\n  );\n}\n\nexport { PopoverPrimitive, PopoverPopup as PopoverContent };\n"
  },
  {
    "path": "packages/ui/src/components/preview-card.tsx",
    "content": "\"use client\";\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport const PreviewCard: typeof PreviewCardPrimitive.Root =\n  PreviewCardPrimitive.Root;\n\nexport function PreviewCardTrigger({\n  ...props\n}: PreviewCardPrimitive.Trigger.Props): React.ReactElement {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"preview-card-trigger\" {...props} />\n  );\n}\n\nexport function PreviewCardPopup({\n  className,\n  children,\n  align = \"center\",\n  sideOffset = 4,\n  anchor,\n  ...props\n}: PreviewCardPrimitive.Popup.Props & {\n  align?: PreviewCardPrimitive.Positioner.Props[\"align\"];\n  sideOffset?: PreviewCardPrimitive.Positioner.Props[\"sideOffset\"];\n  anchor?: PreviewCardPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <PreviewCardPrimitive.Portal>\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        anchor={anchor}\n        className=\"z-50\"\n        data-slot=\"preview-card-positioner\"\n        sideOffset={sideOffset}\n      >\n        <PreviewCardPrimitive.Popup\n          className={cn(\n            \"relative flex w-64 origin-(--transform-origin) text-balance rounded-lg border bg-popover not-dark:bg-clip-padding p-4 text-popover-foreground text-sm shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"preview-card-content\"\n          {...props}\n        >\n          {children}\n        </PreviewCardPrimitive.Popup>\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport {\n  PreviewCardPrimitive,\n  PreviewCard as HoverCard,\n  PreviewCardTrigger as HoverCardTrigger,\n  PreviewCardPopup as HoverCardContent,\n};\n"
  },
  {
    "path": "packages/ui/src/components/progress.tsx",
    "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Progress({\n  className,\n  children,\n  ...props\n}: ProgressPrimitive.Root.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Root\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      data-slot=\"progress\"\n      {...props}\n    >\n      {children ? (\n        children\n      ) : (\n        <ProgressTrack>\n          <ProgressIndicator />\n        </ProgressTrack>\n      )}\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport function ProgressLabel({\n  className,\n  ...props\n}: ProgressPrimitive.Label.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"font-medium text-sm\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  );\n}\n\nexport function ProgressTrack({\n  className,\n  ...props\n}: ProgressPrimitive.Track.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"block h-1.5 w-full overflow-hidden rounded-full bg-input\",\n        className,\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  );\n}\n\nexport function ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Indicator\n      className={cn(\"bg-primary transition-all duration-500\", className)}\n      data-slot=\"progress-indicator\"\n      {...props}\n    />\n  );\n}\n\nexport function ProgressValue({\n  className,\n  ...props\n}: ProgressPrimitive.Value.Props): React.ReactElement {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\"text-sm tabular-nums\", className)}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  );\n}\n\nexport { ProgressPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/radio-group.tsx",
    "content": "\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function RadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n  return (\n    <RadioGroupPrimitive\n      className={cn(\"flex flex-col gap-3\", className)}\n      data-slot=\"radio-group\"\n      {...props}\n    />\n  );\n}\n\nexport function Radio({\n  className,\n  ...props\n}: RadioPrimitive.Root.Props): React.ReactElement {\n  return (\n    <RadioPrimitive.Root\n      className={cn(\n        \"relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-full not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none\",\n        className,\n      )}\n      data-slot=\"radio\"\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        className=\"absolute -inset-px flex size-4.5 items-center justify-center rounded-full before:size-2 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-primary sm:size-4 sm:before:size-1.5\"\n        data-slot=\"radio-indicator\"\n      />\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { RadioGroupPrimitive, RadioPrimitive, Radio as RadioGroupItem };\n"
  },
  {
    "path": "packages/ui/src/components/scroll-area.tsx",
    "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/select.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  ChevronDownIcon,\n  ChevronsUpDownIcon,\n  ChevronUpIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport const Select: typeof SelectPrimitive.Root = SelectPrimitive.Root;\n\nexport const selectTriggerVariants = cva(\n  \"relative inline-flex min-h-9 w-full min-w-36 select-none items-center justify-between gap-2 rounded-lg border border-input bg-background not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-left text-base text-foreground shadow-xs/5 outline-none ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 focus-visible:border-ring focus-visible:ring-[3px] aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none\",\n  {\n    defaultVariants: {\n      size: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"\",\n        lg: \"min-h-10 sm:min-h-9\",\n        sm: \"min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7\",\n      },\n    },\n  },\n);\n\nexport const selectTriggerIconClassName = \"-me-1 size-4.5 opacity-80 sm:size-4\";\n\nexport interface SelectButtonProps extends useRender.ComponentProps<\"button\"> {\n  size?: VariantProps<typeof selectTriggerVariants>[\"size\"];\n}\n\nexport function SelectButton({\n  className,\n  size,\n  render,\n  children,\n  ...props\n}: SelectButtonProps): React.ReactElement {\n  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>[\"type\"] =\n    render ? undefined : \"button\";\n\n  const defaultProps = {\n    children: (\n      <>\n        <span className=\"flex-1 truncate in-data-placeholder:text-muted-foreground/72\">\n          {children}\n        </span>\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </>\n    ),\n    className: cn(selectTriggerVariants({ size }), \"min-w-0\", className),\n    \"data-slot\": \"select-button\",\n    type: typeValue,\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props &\n  VariantProps<typeof selectTriggerVariants>): React.ReactElement {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(selectTriggerVariants({ size }), className)}\n      data-slot=\"select-trigger\"\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\">\n        <ChevronsUpDownIcon className={selectTriggerIconClassName} />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nexport function SelectValue({\n  className,\n  ...props\n}: SelectPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Value\n      className={cn(\n        \"flex-1 truncate data-placeholder:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"select-value\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  anchor,\n  ...props\n}: SelectPrimitive.Popup.Props & {\n  side?: SelectPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: SelectPrimitive.Positioner.Props[\"sideOffset\"];\n  align?: SelectPrimitive.Positioner.Props[\"align\"];\n  alignOffset?: SelectPrimitive.Positioner.Props[\"alignOffset\"];\n  alignItemWithTrigger?: SelectPrimitive.Positioner.Props[\"alignItemWithTrigger\"];\n  anchor?: SelectPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"z-50 select-none\"\n        data-slot=\"select-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          className=\"origin-(--transform-origin) text-foreground outline-none\"\n          data-slot=\"select-popup\"\n          {...props}\n        >\n          <SelectPrimitive.ScrollUpArrow\n            className=\"top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-up-arrow\"\n          >\n            <ChevronUpIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollUpArrow>\n          <div className=\"relative h-full min-w-(--anchor-width) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\">\n            <SelectPrimitive.List\n              className={cn(\n                \"max-h-(--available-height) overflow-y-auto p-1\",\n                className,\n              )}\n              data-slot=\"select-list\"\n            >\n              {children}\n            </SelectPrimitive.List>\n          </div>\n          <SelectPrimitive.ScrollDownArrow\n            className=\"bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover\"\n            data-slot=\"select-scroll-down-arrow\"\n          >\n            <ChevronDownIcon className=\"relative size-4.5 sm:size-4\" />\n          </SelectPrimitive.ScrollDownArrow>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        \"grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator className=\"col-start-1\">\n        <svg\n          aria-hidden=\"true\"\n          fill=\"none\"\n          height=\"24\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M5.252 12.7 10.2 18.63 18.748 5.37\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText className=\"col-start-2 min-w-0\">\n        {children}\n      </SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"select-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroup(\n  props: SelectPrimitive.Group.Props,\n): React.ReactElement {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.Label.Props): React.ReactElement {\n  return (\n    <SelectPrimitive.Label\n      className={cn(\n        \"not-in-data-[slot=field]:mb-2 inline-flex cursor-default items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n}\n\nexport function SelectGroupLabel(\n  props: SelectPrimitive.GroupLabel.Props,\n): React.ReactElement {\n  return (\n    <SelectPrimitive.GroupLabel\n      className=\"px-2 py-1.5 font-medium text-muted-foreground text-xs\"\n      data-slot=\"select-group-label\"\n      {...props}\n    />\n  );\n}\n\nexport { SelectPrimitive, SelectPopup as SelectContent };\n"
  },
  {
    "path": "packages/ui/src/components/separator.tsx",
    "content": "import { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props): React.ReactElement {\n  return (\n    <SeparatorPrimitive\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch\",\n        className,\n      )}\n      data-slot=\"separator\"\n      orientation={orientation}\n      {...props}\n    />\n  );\n}\n\nexport { SeparatorPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/sheet.tsx",
    "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Button } from \"@coss/ui/components/button\";\nimport { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n  props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport function SheetClose(\n  props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport function SheetBackdrop({\n  className,\n  ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Backdrop\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n        className,\n      )}\n      data-slot=\"sheet-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetViewport({\n  className,\n  side,\n  variant = \"default\",\n  ...props\n}: SheetPrimitive.Viewport.Props & {\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <SheetPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid\",\n        side === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        side === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        side === \"left\" && \"flex justify-start\",\n        side === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"sm:p-4\",\n      )}\n      data-slot=\"sheet-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPopup({\n  className,\n  children,\n  showCloseButton = true,\n  side = \"right\",\n  variant = \"default\",\n  closeProps,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n  closeProps?: SheetPrimitive.Close.Props;\n}): React.ReactElement {\n  return (\n    <SheetPortal>\n      <SheetBackdrop />\n      <SheetViewport side={side} variant={variant}>\n        <SheetPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            side === \"bottom\" &&\n              \"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8\",\n            side === \"top\" &&\n              \"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8\",\n            side === \"left\" &&\n              \"w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8\",\n            side === \"right\" &&\n              \"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8\",\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            className,\n          )}\n          data-slot=\"sheet-popup\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <SheetPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute end-2 top-2\"\n              render={<Button size=\"icon\" variant=\"ghost\" />}\n              {...closeProps}\n            >\n              <XIcon />\n            </SheetPrimitive.Close>\n          )}\n        </SheetPrimitive.Popup>\n      </SheetViewport>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"sheet-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"sheet-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"sheet-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  SheetPrimitive,\n  SheetBackdrop as SheetOverlay,\n  SheetPopup as SheetContent,\n};\n"
  },
  {
    "path": "packages/ui/src/components/sidebar.tsx",
    "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { Button } from \"@coss/ui/components/button\";\nimport { Input } from \"@coss/ui/components/input\";\nimport { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { Separator } from \"@coss/ui/components/separator\";\nimport {\n  Sheet,\n  SheetDescription,\n  SheetHeader,\n  SheetPopup,\n  SheetTitle,\n} from \"@coss/ui/components/sheet\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@coss/ui/components/tooltip\";\nimport { useMediaQuery } from \"@coss/ui/hooks/use-media-query\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nconst SIDEBAR_COOKIE_NAME: string = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE: number = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH: string = \"16rem\";\nconst SIDEBAR_WIDTH_MOBILE: string = \"18rem\";\nconst SIDEBAR_WIDTH_ICON: string = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT: string = \"b\";\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-8 text-sm\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n        sm: \"h-7 text-xs\",\n      },\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n    },\n  },\n);\n\nexport type SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nexport const SidebarContext: React.Context<SidebarContextProps | null> =\n  React.createContext<SidebarContextProps | null>(null);\n\nexport function useSidebar(): SidebarContextProps {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\nexport function SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}): React.ReactElement {\n  const isMobile = useMediaQuery(\"max-md\");\n  const [openMobile, setOpenMobile] = React.useState(false);\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen);\n  const open = openProp ?? _open;\n  const setOpen = React.useCallback(\n    async (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value;\n      if (setOpenProp) {\n        setOpenProp(openState);\n      } else {\n        _setOpen(openState);\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      await cookieStore.set({\n        expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,\n        name: SIDEBAR_COOKIE_NAME,\n        path: \"/\",\n        value: String(openState),\n      });\n    },\n    [setOpenProp, open],\n  );\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n  }, [isMobile, setOpen]);\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault();\n        toggleSidebar();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [toggleSidebar]);\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\";\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      isMobile,\n      open,\n      openMobile,\n      setOpen,\n      setOpenMobile,\n      state,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar],\n  );\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className,\n        )}\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  );\n}\n\nexport function Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\";\n  variant?: \"sidebar\" | \"floating\" | \"inset\";\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}): React.ReactElement {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className,\n        )}\n        data-slot=\"sidebar\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet onOpenChange={setOpenMobile} open={openMobile} {...props}>\n        <SheetPopup\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          data-mobile=\"true\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          side={side}\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetPopup>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-side={side}\n      data-slot=\"sidebar\"\n      data-state={state}\n      data-variant={variant}\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n        )}\n        data-slot=\"sidebar-gap\"\n      />\n      <div\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className,\n        )}\n        data-slot=\"sidebar-container\"\n        {...props}\n      >\n        <div\n          className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5\"\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      className={cn(\"size-7\", className)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n}\n\nexport function SidebarRail({\n  className,\n  ...props\n}: React.ComponentProps<\"button\">): React.ReactElement {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      aria-label=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className,\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onClick={toggleSidebar}\n      tabIndex={-1}\n      title=\"Toggle Sidebar\"\n      type=\"button\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInset({\n  className,\n  ...props\n}: React.ComponentProps<\"main\">): React.ReactElement {\n  return (\n    <main\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm/5\",\n        className,\n      )}\n      data-slot=\"sidebar-inset\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>): React.ReactElement {\n  return (\n    <Input\n      className={cn(\"h-8 w-full bg-background shadow-none\", className)}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <ScrollArea\n      className=\"**:data-[slot=scroll-area-scrollbar]:hidden\"\n      scrollFade\n    >\n      <div\n        className={cn(\n          \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n          className,\n        )}\n        data-sidebar=\"content\"\n        data-slot=\"sidebar-content\"\n        {...props}\n      />\n    </ScrollArea>\n  );\n}\n\nexport function SidebarGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n      \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"group-label\",\n    \"data-slot\": \"sidebar-group-label\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-sidebar\": \"group-action\",\n    \"data-slot\": \"sidebar-group-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\"w-full text-sm\", className)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenu({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-item relative\", className)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuButton({\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  isActive?: boolean;\n  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;\n} & VariantProps<typeof sidebarMenuButtonVariants>): React.ReactElement {\n  const { isMobile, state } = useSidebar();\n\n  const defaultProps = {\n    className: cn(sidebarMenuButtonVariants({ size, variant }), className),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-button\",\n  };\n\n  const buttonProps = mergeProps<\"button\">(defaultProps, props);\n\n  const buttonElement = useRender({\n    defaultTagName: \"button\",\n    props: buttonProps,\n    render,\n  });\n\n  if (!tooltip) {\n    return buttonElement;\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    };\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={buttonElement as React.ReactElement<Record<string, unknown>>}\n      />\n      <TooltipPopup\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        side=\"right\"\n        {...tooltip}\n      />\n    </Tooltip>\n  );\n}\n\nexport function SidebarMenuAction({\n  className,\n  showOnHover = false,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & {\n  showOnHover?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0\",\n      // Increases the hit area of the button on mobile.\n      \"after:absolute after:-inset-2 md:after:hidden\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      showOnHover &&\n        \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n      className,\n    ),\n    \"data-sidebar\": \"menu-action\",\n    \"data-slot\": \"sidebar-menu-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean;\n}): React.ReactElement {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      className={cn(\"flex h-8 items-center gap-2 rounded-lg px-2\", className)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-lg\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n}\n\nexport function SidebarMenuSub({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n  return (\n    <ul\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n  return (\n    <li\n      className={cn(\"group/menu-sub-item relative\", className)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...props}\n    />\n  );\n}\n\nexport function SidebarMenuSubButton({\n  size = \"md\",\n  isActive = false,\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\"> & {\n  size?: \"sm\" | \"md\";\n  isActive?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n      \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n      size === \"sm\" && \"text-xs\",\n      size === \"md\" && \"text-sm\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className,\n    ),\n    \"data-active\": isActive,\n    \"data-sidebar\": \"menu-sub-button\",\n    \"data-size\": size,\n    \"data-slot\": \"sidebar-menu-sub-button\",\n  };\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(defaultProps, props),\n    render,\n  });\n}\n"
  },
  {
    "path": "packages/ui/src/components/skeleton.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Skeleton({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0/200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]\",\n        className,\n      )}\n      data-slot=\"skeleton\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/slider.tsx",
    "content": "\"use client\";\n\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport * as React from \"react\";\n\nexport function Slider({\n  className,\n  children,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props): React.ReactElement {\n  const _values = React.useMemo(() => {\n    if (value !== undefined) {\n      return Array.isArray(value) ? value : [value];\n    }\n    if (defaultValue !== undefined) {\n      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];\n    }\n    return [min];\n  }, [value, defaultValue, min]);\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-[orientation=horizontal]:w-full\", className)}\n      defaultValue={defaultValue}\n      max={max}\n      min={min}\n      thumbAlignment=\"edge\"\n      value={value}\n      {...props}\n    >\n      {children}\n      <SliderPrimitive.Control\n        className=\"flex touch-none select-none data-disabled:pointer-events-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=vertical]:flex-col data-disabled:opacity-64\"\n        data-slot=\"slider-control\"\n      >\n        <SliderPrimitive.Track\n          className=\"relative grow select-none before:absolute before:rounded-full before:bg-input data-[orientation=horizontal]:h-1 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1 data-[orientation=horizontal]:before:inset-x-0.5 data-[orientation=vertical]:before:inset-x-0 data-[orientation=horizontal]:before:inset-y-0 data-[orientation=vertical]:before:inset-y-0.5\"\n          data-slot=\"slider-track\"\n        >\n          <SliderPrimitive.Indicator\n            className=\"select-none rounded-full bg-primary data-[orientation=horizontal]:ms-0.5 data-[orientation=vertical]:mb-0.5\"\n            data-slot=\"slider-indicator\"\n          />\n          {Array.from({ length: _values.length }, (_, index) => (\n            <SliderPrimitive.Thumb\n              className=\"block size-5 shrink-0 select-none rounded-full border border-input bg-white not-dark:bg-clip-padding shadow-xs/5 outline-none transition-[box-shadow,scale] before:absolute before:inset-0 before:rounded-full before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-focus-visible:ring-ring/24 data-dragging:scale-120 sm:size-4 dark:border-background dark:has-focus-visible:ring-ring/48 [:has(*:focus-visible),[data-dragging]]:shadow-none\"\n              data-slot=\"slider-thumb\"\n              index={index}\n              key={String(index)}\n            />\n          ))}\n        </SliderPrimitive.Track>\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport function SliderValue({\n  className,\n  ...props\n}: SliderPrimitive.Value.Props): React.ReactElement {\n  return (\n    <SliderPrimitive.Value\n      className={cn(\"flex justify-end text-sm\", className)}\n      data-slot=\"slider-value\"\n      {...props}\n    />\n  );\n}\n\nexport { SliderPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/spinner.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport { Loader2Icon } from \"lucide-react\";\nimport type React from \"react\";\n\nexport function Spinner({\n  className,\n  ...props\n}: React.ComponentProps<typeof Loader2Icon>): React.ReactElement {\n  return (\n    <Loader2Icon\n      aria-label=\"Loading\"\n      className={cn(\"animate-spin\", className)}\n      role=\"status\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/switch.tsx",
    "content": "\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Switch({\n  className,\n  ...props\n}: SwitchPrimitive.Root.Props): React.ReactElement {\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        \"inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(5)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(4)]\",\n        className,\n      )}\n      data-slot=\"switch\"\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block aspect-square h-full origin-left in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]\",\n        )}\n        data-slot=\"switch-thumb\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { SwitchPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/table.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport type * as React from \"react\";\n\nexport function Table({\n  className,\n  ...props\n}: React.ComponentProps<\"table\">): React.ReactElement {\n  return (\n    <div\n      className=\"relative w-full overflow-x-auto\"\n      data-slot=\"table-container\"\n    >\n      <table\n        className={cn(\n          \"w-full caption-bottom in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0 text-sm\",\n          className,\n        )}\n        data-slot=\"table\"\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function TableHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"thead\">): React.ReactElement {\n  return (\n    <thead\n      className={cn(\n        \"[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent\",\n        className,\n      )}\n      data-slot=\"table-header\"\n      {...props}\n    />\n  );\n}\n\nexport function TableBody({\n  className,\n  ...props\n}: React.ComponentProps<\"tbody\">): React.ReactElement {\n  return (\n    <tbody\n      className={cn(\n        \"relative in-data-[slot=frame]:rounded-xl in-data-[slot=frame]:shadow-xs/5 before:pointer-events-none before:absolute before:inset-px not-in-data-[slot=frame]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[slot=frame]:*:[tr]:border-0 in-data-[slot=frame]:*:[tr]:*:[td]:border-b in-data-[slot=frame]:*:[tr]:*:[td]:bg-background in-data-[slot=frame]:*:[tr]:*:[td]:bg-clip-padding in-data-[slot=frame]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[slot=frame]:*:[tr]:*:[td]:first:border-s in-data-[slot=frame]:*:[tr]:first:*:[td]:border-t in-data-[slot=frame]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[slot=frame]:*:[tr]:*:[td]:last:border-e in-data-[slot=frame]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[slot=frame]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[slot=frame]:*:[tr]:hover:*:[td]:bg-transparent in-data-[slot=frame]:*:[tr]:data-[state=selected]:*:[td]:bg-muted/72\",\n        className,\n      )}\n      data-slot=\"table-body\"\n      {...props}\n    />\n  );\n}\n\nexport function TableFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"tfoot\">): React.ReactElement {\n  return (\n    <tfoot\n      className={cn(\n        \"border-t in-data-[slot=frame]:border-none bg-muted/72 in-data-[slot=frame]:bg-transparent font-medium [&>tr]:last:border-b-0 in-data-[slot=frame]:*:[tr]:hover:bg-transparent\",\n        className,\n      )}\n      data-slot=\"table-footer\"\n      {...props}\n    />\n  );\n}\n\nexport function TableRow({\n  className,\n  ...props\n}: React.ComponentProps<\"tr\">): React.ReactElement {\n  return (\n    <tr\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/72 in-data-[slot=frame]:hover:bg-transparent data-[state=selected]:bg-muted/72 in-data-[slot=frame]:data-[state=selected]:bg-transparent\",\n        className,\n      )}\n      data-slot=\"table-row\"\n      {...props}\n    />\n  );\n}\n\nexport function TableHead({\n  className,\n  ...props\n}: React.ComponentProps<\"th\">): React.ReactElement {\n  return (\n    <th\n      className={cn(\n        \"h-10 whitespace-nowrap px-2.5 text-left align-middle font-medium text-muted-foreground leading-none has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0\",\n        className,\n      )}\n      data-slot=\"table-head\"\n      {...props}\n    />\n  );\n}\n\nexport function TableCell({\n  className,\n  ...props\n}: React.ComponentProps<\"td\">): React.ReactElement {\n  return (\n    <td\n      className={cn(\n        \"whitespace-nowrap p-2.5 align-middle leading-none in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:pe-0\",\n        className,\n      )}\n      data-slot=\"table-cell\"\n      {...props}\n    />\n  );\n}\n\nexport function TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">): React.ReactElement {\n  return (\n    <caption\n      className={cn(\n        \"in-data-[slot=frame]:my-4 mt-4 text-muted-foreground text-sm\",\n        className,\n      )}\n      data-slot=\"table-caption\"\n      {...props}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/components/tabs.tsx",
    "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport type TabsVariant = \"default\" | \"underline\";\n\nexport function Tabs({\n  className,\n  ...props\n}: TabsPrimitive.Root.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Root\n      className={cn(\n        \"flex flex-col gap-2 data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      data-slot=\"tabs\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsList({\n  variant = \"default\",\n  className,\n  children,\n  ...props\n}: TabsPrimitive.List.Props & {\n  variant?: TabsVariant;\n}): React.ReactElement {\n  return (\n    <TabsPrimitive.List\n      className={cn(\n        \"relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground\",\n        \"data-[orientation=vertical]:flex-col\",\n        variant === \"default\"\n          ? \"rounded-lg bg-muted p-0.5 text-muted-foreground/72\"\n          : \"data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent\",\n        className,\n      )}\n      data-slot=\"tabs-list\"\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out\",\n          variant === \"underline\"\n            ? \"z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px\"\n            : \"-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input\",\n        )}\n        data-slot=\"tab-indicator\"\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTab({\n  className,\n  ...props\n}: TabsPrimitive.Tab.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Tab\n      className={cn(\n        \"relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n        className,\n      )}\n      data-slot=\"tabs-tab\"\n      {...props}\n    />\n  );\n}\n\nexport function TabsPanel({\n  className,\n  ...props\n}: TabsPrimitive.Panel.Props): React.ReactElement {\n  return (\n    <TabsPrimitive.Panel\n      className={cn(\"flex-1 outline-none\", className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n}\n\nexport { TabsPrimitive, TabsTab as TabsTrigger, TabsPanel as TabsContent };\n"
  },
  {
    "path": "packages/ui/src/components/textarea.tsx",
    "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type * as React from \"react\";\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<\"textarea\"> &\n  React.RefAttributes<HTMLElement> & {\n    size?: \"sm\" | \"default\" | \"lg\" | number;\n    unstyled?: boolean;\n  };\n\nexport function Textarea({\n  className,\n  size = \"default\",\n  unstyled = false,\n  ref,\n  ...props\n}: TextareaProps): React.ReactElement {\n  return (\n    <span\n      className={\n        cn(\n          !unstyled &&\n            \"relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n          className,\n        ) || undefined\n      }\n      data-size={size}\n      data-slot=\"textarea-control\"\n    >\n      <FieldPrimitive.Control\n        ref={ref}\n        value={props.value}\n        defaultValue={props.defaultValue}\n        disabled={props.disabled}\n        id={props.id}\n        name={props.name}\n        render={(defaultProps: React.ComponentProps<\"textarea\">) => (\n          <textarea\n            className={cn(\n              \"field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5\",\n              size === \"sm\" &&\n                \"min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5\",\n              size === \"lg\" &&\n                \"min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5\",\n            )}\n            data-slot=\"textarea\"\n            {...mergeProps(defaultProps, props)}\n          />\n        )}\n      />\n    </span>\n  );\n}\n\nexport { FieldPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/toast.tsx",
    "content": "\"use client\";\n\nimport { Toast } from \"@base-ui/react/toast\";\nimport { buttonVariants } from \"@coss/ui/components/button\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport {\n  CircleAlertIcon,\n  CircleCheckIcon,\n  InfoIcon,\n  LoaderCircleIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\";\nimport type React from \"react\";\n\nconst TOAST_ICONS = {\n  error: CircleAlertIcon,\n  info: InfoIcon,\n  loading: LoaderCircleIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n} as const;\n\ntype SwipeDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\nfunction getSwipeDirection(position: ToastPosition): SwipeDirection[] {\n  const verticalDirection: SwipeDirection = position.startsWith(\"top\")\n    ? \"up\"\n    : \"down\";\n\n  if (position.includes(\"center\")) {\n    return [verticalDirection];\n  }\n\n  if (position.includes(\"left\")) {\n    return [\"left\", verticalDirection];\n  }\n\n  return [\"right\", verticalDirection];\n}\n\nfunction Toasts({ position }: { position: ToastPosition }): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n  const swipeDirection = getSwipeDirection(position);\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal\">\n      <Toast.Viewport\n        className={cn(\n          \"fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]\",\n          // Vertical positioning\n          \"data-[position*=top]:top-(--toast-inset)\",\n          \"data-[position*=bottom]:bottom-(--toast-inset)\",\n          // Horizontal positioning\n          \"data-[position*=left]:left-(--toast-inset)\",\n          \"data-[position*=right]:right-(--toast-inset)\",\n          \"data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2\",\n        )}\n        data-position={position}\n        data-slot=\"toast-viewport\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n\n          return (\n            <Toast.Root\n              className={cn(\n                \"absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(1%*max(0,var(--toast-index,0))))] not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s,background-color_.5s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-expanded:bg-popover dark:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*max(0,var(--toast-index,0))))] dark:data-expanded:bg-popover dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                // Base positioning using data-position\n                \"data-[position*=right]:right-0 data-[position*=right]:left-auto\",\n                \"data-[position*=left]:right-auto data-[position*=left]:left-0\",\n                \"data-[position*=center]:right-0 data-[position*=center]:left-0\",\n                \"data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top\",\n                \"data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom\",\n                // Gap fill for hover\n                \"after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full\",\n                \"data-[position*=top]:after:top-full\",\n                \"data-[position*=bottom]:after:bottom-full\",\n                // Define some variables\n                \"[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]\",\n                // Define offset-y variable\n                \"data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]\",\n                \"data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]\",\n                // Default state transform\n                \"data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                \"data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]\",\n                // Limited state\n                \"data-limited:opacity-0\",\n                // Expanded state\n                \"data-expanded:h-(--toast-height)\",\n                \"data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]\",\n                // Starting and ending animations\n                \"data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]\",\n                \"data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:opacity-0\",\n                // Ending animations (direction-aware)\n                \"data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n                // Ending animations (expanded)\n                \"data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]\",\n                \"data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]\",\n              )}\n              data-position={position}\n              key={toast.id}\n              swipeDirection={swipeDirection}\n              toast={toast}\n            >\n              <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100\">\n                <div className=\"flex gap-2\">\n                  {Icon && (\n                    <div\n                      className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                      data-slot=\"toast-icon\"\n                    >\n                      <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                    </div>\n                  )}\n\n                  <div className=\"flex flex-col gap-0.5\">\n                    <Toast.Title\n                      className=\"font-medium\"\n                      data-slot=\"toast-title\"\n                    />\n                    <Toast.Description\n                      className=\"text-muted-foreground\"\n                      data-slot=\"toast-description\"\n                    />\n                  </div>\n                </div>\n                {toast.actionProps && (\n                  <Toast.Action\n                    className={buttonVariants({ size: \"xs\" })}\n                    data-slot=\"toast-action\"\n                  >\n                    {toast.actionProps.children}\n                  </Toast.Action>\n                )}\n              </Toast.Content>\n            </Toast.Root>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nfunction AnchoredToasts(): React.ReactElement {\n  const { toasts } = Toast.useToastManager();\n\n  return (\n    <Toast.Portal data-slot=\"toast-portal-anchored\">\n      <Toast.Viewport\n        className=\"outline-none\"\n        data-slot=\"toast-viewport-anchored\"\n      >\n        {toasts.map((toast) => {\n          const Icon = toast.type\n            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]\n            : null;\n          const tooltipStyle =\n            (toast.data as { tooltipStyle?: boolean })?.tooltipStyle ?? false;\n          const positionerProps = toast.positionerProps;\n\n          if (!positionerProps?.anchor) {\n            return null;\n          }\n\n          return (\n            <Toast.Positioner\n              className=\"z-50 max-w-[min(--spacing(64),var(--available-width))]\"\n              data-slot=\"toast-positioner\"\n              key={toast.id}\n              sideOffset={positionerProps.sideOffset ?? 4}\n              toast={toast}\n            >\n              <Toast.Root\n                className={cn(\n                  \"relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n                  tooltipStyle\n                    ? \"rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]\"\n                    : \"rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]\",\n                )}\n                data-slot=\"toast-popup\"\n                toast={toast}\n              >\n                {tooltipStyle ? (\n                  <Toast.Content className=\"pointer-events-auto px-2 py-1\">\n                    <Toast.Title data-slot=\"toast-title\" />\n                  </Toast.Content>\n                ) : (\n                  <Toast.Content className=\"pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm\">\n                    <div className=\"flex gap-2\">\n                      {Icon && (\n                        <div\n                          className=\"[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\"\n                          data-slot=\"toast-icon\"\n                        >\n                          <Icon className=\"in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80\" />\n                        </div>\n                      )}\n\n                      <div className=\"flex flex-col gap-0.5\">\n                        <Toast.Title\n                          className=\"font-medium\"\n                          data-slot=\"toast-title\"\n                        />\n                        <Toast.Description\n                          className=\"text-muted-foreground\"\n                          data-slot=\"toast-description\"\n                        />\n                      </div>\n                    </div>\n                    {toast.actionProps && (\n                      <Toast.Action\n                        className={buttonVariants({ size: \"xs\" })}\n                        data-slot=\"toast-action\"\n                      >\n                        {toast.actionProps.children}\n                      </Toast.Action>\n                    )}\n                  </Toast.Content>\n                )}\n              </Toast.Root>\n            </Toast.Positioner>\n          );\n        })}\n      </Toast.Viewport>\n    </Toast.Portal>\n  );\n}\n\nexport const toastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\nexport const anchoredToastManager: ReturnType<typeof Toast.createToastManager> =\n  Toast.createToastManager();\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport interface ToastProviderProps extends Toast.Provider.Props {\n  position?: ToastPosition;\n}\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  ...props\n}: ToastProviderProps): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={toastManager} {...props}>\n      {children}\n      <Toasts position={position} />\n    </Toast.Provider>\n  );\n}\n\nexport function AnchoredToastProvider({\n  children,\n  ...props\n}: Toast.Provider.Props): React.ReactElement {\n  return (\n    <Toast.Provider toastManager={anchoredToastManager} {...props}>\n      {children}\n      <AnchoredToasts />\n    </Toast.Provider>\n  );\n}\n\nexport { Toast as ToastPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/toggle-group.tsx",
    "content": "\"use client\";\n\nimport type { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport { Separator } from \"@coss/ui/components/separator\";\nimport {\n  Toggle as ToggleComponent,\n  type toggleVariants,\n} from \"@coss/ui/components/toggle\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nexport const ToggleGroupContext: React.Context<\n  VariantProps<typeof toggleVariants>\n> = React.createContext<VariantProps<typeof toggleVariants>>({\n  size: \"default\",\n  variant: \"default\",\n});\n\nexport function ToggleGroup({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants>): React.ReactElement {\n  return (\n    <ToggleGroupPrimitive\n      className={cn(\n        \"flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input\",\n        orientation === \"horizontal\"\n          ? \"*:pointer-coarse:after:min-w-auto\"\n          : \"*:pointer-coarse:after:min-h-auto\",\n        variant === \"default\"\n          ? \"gap-0.5\"\n          : orientation === \"horizontal\"\n            ? \"*:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none\"\n            : \"flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      orientation={orientation}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ size, variant }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  );\n}\n\nexport function Toggle({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: TogglePrimitive.Props &\n  VariantProps<typeof toggleVariants>): React.ReactElement {\n  const context = React.useContext(ToggleGroupContext);\n\n  const resolvedVariant = context.variant || variant;\n  const resolvedSize = context.size || size;\n\n  return (\n    <ToggleComponent\n      className={className}\n      data-size={resolvedSize}\n      data-variant={resolvedVariant}\n      size={resolvedSize}\n      variant={resolvedVariant}\n      {...props}\n    >\n      {children}\n    </ToggleComponent>\n  );\n}\n\nexport function ToggleGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: {\n  className?: string;\n} & React.ComponentProps<typeof Separator>): React.ReactElement {\n  return (\n    <Separator\n      className={cn(\n        \"pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32\",\n        className,\n      )}\n      orientation={orientation}\n      {...props}\n    />\n  );\n}\n\nexport { ToggleGroupPrimitive, Toggle as ToggleGroupItem };\n"
  },
  {
    "path": "packages/ui/src/components/toggle.tsx",
    "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type React from \"react\";\n\nexport const toggleVariants = cva(\n  \"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8\",\n        lg: \"h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9\",\n        sm: \"h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7\",\n      },\n      variant: {\n        default: \"border-transparent\",\n        outline:\n          \"border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none\",\n      },\n    },\n  },\n);\n\nexport function Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: TogglePrimitive.Props &\n  VariantProps<typeof toggleVariants>): React.ReactElement {\n  return (\n    <TogglePrimitive\n      className={cn(toggleVariants({ className, size, variant }))}\n      data-slot=\"toggle\"\n      {...props}\n    />\n  );\n}\n\nexport { TogglePrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/toolbar.tsx",
    "content": "\"use client\";\n\nimport { Toolbar as ToolbarPrimitive } from \"@base-ui/react/toolbar\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport function Toolbar({\n  className,\n  ...props\n}: ToolbarPrimitive.Root.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Root\n      className={cn(\n        \"relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-1 text-card-foreground\",\n        className,\n      )}\n      data-slot=\"toolbar\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarButton({\n  className,\n  ...props\n}: ToolbarPrimitive.Button.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Button\n      className={cn(className)}\n      data-slot=\"toolbar-button\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarLink({\n  className,\n  ...props\n}: ToolbarPrimitive.Link.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Link\n      className={cn(className)}\n      data-slot=\"toolbar-link\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarInput({\n  className,\n  ...props\n}: ToolbarPrimitive.Input.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Input\n      className={cn(className)}\n      data-slot=\"toolbar-input\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarGroup({\n  className,\n  ...props\n}: ToolbarPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Group\n      className={cn(\"flex items-center gap-1\", className)}\n      data-slot=\"toolbar-group\"\n      {...props}\n    />\n  );\n}\n\nexport function ToolbarSeparator({\n  className,\n  ...props\n}: ToolbarPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ToolbarPrimitive.Separator\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch\",\n        className,\n      )}\n      data-slot=\"toolbar-separator\"\n      {...props}\n    />\n  );\n}\n\nexport { ToolbarPrimitive };\n"
  },
  {
    "path": "packages/ui/src/components/tooltip.tsx",
    "content": "\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport type React from \"react\";\n\nexport const TooltipCreateHandle: typeof TooltipPrimitive.createHandle =\n  TooltipPrimitive.createHandle;\n\nexport const TooltipProvider: typeof TooltipPrimitive.Provider =\n  TooltipPrimitive.Provider;\n\nexport const Tooltip: typeof TooltipPrimitive.Root = TooltipPrimitive.Root;\n\nexport function TooltipTrigger(\n  props: TooltipPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nexport function TooltipPopup({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  side = \"top\",\n  anchor,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props & {\n  align?: TooltipPrimitive.Positioner.Props[\"align\"];\n  side?: TooltipPrimitive.Positioner.Props[\"side\"];\n  sideOffset?: TooltipPrimitive.Positioner.Props[\"sideOffset\"];\n  anchor?: TooltipPrimitive.Positioner.Props[\"anchor\"];\n}): React.ReactElement {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        anchor={anchor}\n        className=\"z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none\"\n        data-slot=\"tooltip-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          className={cn(\n            \"relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className,\n          )}\n          data-slot=\"tooltip-popup\"\n          {...props}\n        >\n          <TooltipPrimitive.Viewport\n            className=\"relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity\"\n            data-slot=\"tooltip-viewport\"\n          >\n            {children}\n          </TooltipPrimitive.Viewport>\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { TooltipPrimitive, TooltipPopup as TooltipContent };\n"
  },
  {
    "path": "packages/ui/src/fonts/README.md",
    "content": "# Shared Fonts\n\nThis directory contains shared font files and configurations used across all apps in the monorepo.\n\n## Usage\n\nImport fonts directly from the shared UI package:\n\n```tsx\nimport { fontSans, fontHeading } from \"@coss/ui/fonts\";\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <body className={`${fontSans.variable} ${fontHeading.variable}`}>\n        {children}\n      </body>\n    </html>\n  );\n}\n```\n\n## Available Fonts\n\n- `fontSans` - Cal Sans UI variable font (supports multiple weights and modes)\n- `fontHeading` - Cal Sans Regular font\n\n## Adding New Fonts\n\n1. Place the font file in this directory (`packages/ui/src/fonts/`)\n2. Add a new font configuration in `index.ts`:\n\n```typescript\nexport const yourNewFont = localFont({\n  display: \"swap\",\n  src: \"./YourFont.woff2\",\n  variable: \"--font-your-name\",\n});\n```\n\n3. Use it in any app by importing from `@coss/ui/fonts`\n\n## Benefits of This Approach\n\n- Single source of truth for fonts\n- No fragile relative paths\n- Type-safe imports\n- Versioned with the UI package\n- Easy to update across all apps\n"
  },
  {
    "path": "packages/ui/src/fonts/index.ts",
    "content": "import localFont from \"next/font/local\";\n\nexport const fontMono = localFont({\n  display: \"swap\",\n  src: \"./PaperMono-Regular.woff2\",\n  variable: \"--font-mono\",\n});\n\nexport const fontSans = localFont({\n  display: \"swap\",\n  src: \"./CalSansUI[wght,GEOM].woff2\",\n  variable: \"--font-sans\",\n  weight: \"300 700\",\n});\n\nexport const fontHeading = localFont({\n  display: \"swap\",\n  src: \"./CalSans-SemiBold.woff2\",\n  variable: \"--font-heading\",\n  weight: \"600\",\n});\n"
  },
  {
    "path": "packages/ui/src/hooks/use-copy-to-clipboard.ts",
    "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport function useCopyToClipboard({\n  timeout = 2000,\n  onCopy,\n}: {\n  timeout?: number;\n  onCopy?: () => void;\n} = {}): { copyToClipboard: (value: string) => void; isCopied: boolean } {\n  const [isCopied, setIsCopied] = React.useState(false);\n  const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null);\n\n  const copyToClipboard = (value: string): void => {\n    if (typeof window === \"undefined\" || !navigator.clipboard.writeText) {\n      return;\n    }\n\n    if (!value) return;\n\n    navigator.clipboard.writeText(value).then(() => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n      setIsCopied(true);\n\n      if (onCopy) {\n        onCopy();\n      }\n\n      if (timeout !== 0) {\n        timeoutIdRef.current = setTimeout(() => {\n          setIsCopied(false);\n          timeoutIdRef.current = null;\n        }, timeout);\n      }\n    }, console.error);\n  };\n\n  // Cleanup timeout on unmount\n  React.useEffect(() => {\n    return (): void => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n\n  return { copyToClipboard, isCopied };\n}\n"
  },
  {
    "path": "packages/ui/src/hooks/use-media-query.ts",
    "content": "\"use client\";\n\nimport { useCallback, useSyncExternalStore } from \"react\";\n\nconst BREAKPOINTS = {\n  \"2xl\": 1536,\n  \"3xl\": 1600,\n  \"4xl\": 2000,\n  lg: 1024,\n  md: 800,\n  sm: 640,\n  xl: 1280,\n} as const;\n\ntype Breakpoint = keyof typeof BREAKPOINTS;\n\ntype BreakpointQuery =\n  | Breakpoint\n  | `max-${Breakpoint}`\n  | `${Breakpoint}:max-${Breakpoint}`;\n\nfunction resolveMin(value: Breakpoint | number): string {\n  const px = typeof value === \"number\" ? value : BREAKPOINTS[value];\n  return `(min-width: ${px}px)`;\n}\n\nfunction resolveMax(value: Breakpoint | number): string {\n  const px = typeof value === \"number\" ? value : BREAKPOINTS[value];\n  return `(max-width: ${px - 1}px)`;\n}\n\nfunction parseQuery(\n  query: BreakpointQuery | MediaQueryInput | (string & {}),\n): string {\n  if (typeof query !== \"string\") {\n    const parts: string[] = [];\n    if (query.min != null) parts.push(resolveMin(query.min));\n    if (query.max != null) parts.push(resolveMax(query.max));\n    if (query.pointer === \"coarse\") parts.push(\"(pointer: coarse)\");\n    if (query.pointer === \"fine\") parts.push(\"(pointer: fine)\");\n    if (parts.length === 0) return \"(min-width: 0px)\";\n    return parts.join(\" and \");\n  }\n\n  if (query.startsWith(\"(\")) return query;\n\n  const parts: string[] = [];\n  for (const segment of query.split(\":\")) {\n    if (segment.startsWith(\"max-\")) {\n      const bp = segment.slice(4);\n      if (bp in BREAKPOINTS) parts.push(resolveMax(bp as Breakpoint));\n    } else if (segment in BREAKPOINTS) {\n      parts.push(resolveMin(segment as Breakpoint));\n    }\n  }\n\n  return parts.length > 0 ? parts.join(\" and \") : query;\n}\n\nfunction getServerSnapshot(): boolean {\n  return false;\n}\n\nexport type MediaQueryInput = {\n  min?: Breakpoint | number;\n  max?: Breakpoint | number;\n  /** Touch-like input (finger). Use \"fine\" for mouse/trackpad. */\n  pointer?: \"coarse\" | \"fine\";\n};\n\nexport function useMediaQuery(\n  query: BreakpointQuery | MediaQueryInput | (string & {}),\n): boolean {\n  const mediaQuery = parseQuery(query);\n\n  const subscribe = useCallback(\n    (callback: () => void) => {\n      if (typeof window === \"undefined\") return () => {};\n      const mql = window.matchMedia(mediaQuery);\n      mql.addEventListener(\"change\", callback);\n      return () => mql.removeEventListener(\"change\", callback);\n    },\n    [mediaQuery],\n  );\n\n  const getSnapshot = useCallback(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.matchMedia(mediaQuery).matches;\n  }, [mediaQuery]);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n\nexport function useIsMobile(): boolean {\n  return useMediaQuery(\"max-md\");\n}\n"
  },
  {
    "path": "packages/ui/src/lib/config.ts",
    "content": "export const siteConfig = {\n\tdescription: \"coss.com - the everything but AI company.\",\n\tlinks: {\n\t\tgithub: \"https://github.com/cosscom/coss\",\n\t\ttwitter: \"https://x.com/coss_com\",\n\t},\n\tname: \"coss.com\",\n\togImage: \"https://coss.com/og.jpg\",\n\tproducts: [\n\t\t{\n\t\t\thref: \"/\",\n\t\t\tlabel: \"ui\",\n\t\t},\n\t\t{\n\t\t\thref: \"/calendar\",\n\t\t\tlabel: \"calendar\",\n\t\t\tupcoming: true,\n\t\t},\n\t\t{\n\t\t\thref: \"/scheduling\",\n\t\t\tlabel: \"scheduling\",\n\t\t\tupcoming: true,\n\t\t},\n\t\t{\n\t\t\thref: \"/auth\",\n\t\t\tlabel: \"auth\",\n\t\t\tupcoming: true,\n\t\t},\n\t\t{\n\t\t\thref: \"/email\",\n\t\t\tlabel: \"email\",\n\t\t\tupcoming: true,\n\t\t},\n\t\t{\n\t\t\thref: \"/video\",\n\t\t\tlabel: \"video\",\n\t\t\tupcoming: true,\n\t\t},\n\t\t{\n\t\t\thref: \"/payments\",\n\t\t\tlabel: \"payments\",\n\t\t\tupcoming: true,\n\t\t},\n\t\t{\n\t\t\thref: \"/sms\",\n\t\t\tlabel: \"sms\",\n\t\t\tupcoming: true,\n\t\t},\n\t\t{\n\t\t\thref: \"/notifications\",\n\t\t\tlabel: \"notifications\",\n\t\t\tupcoming: true,\n\t\t},\n\t],\n\turl: \"https://coss.com\",\n};\n"
  },
  {
    "path": "packages/ui/src/lib/highlight-code.ts",
    "content": "import { transformerNotationWordHighlight } from \"@shikijs/transformers\";\nimport type { ShikiTransformer } from \"shiki\";\nimport { codeToHtml } from \"shiki\";\n\nexport const transformers = [\n\t{\n\t\tcode(node) {\n\t\t\tif (node.tagName === \"code\") {\n\t\t\t\tconst raw = this.source;\n\t\t\t\tnode.properties.__raw__ = raw;\n\n\t\t\t\tif (raw.startsWith(\"npm install\")) {\n\t\t\t\t\tnode.properties.__npm__ = raw;\n\t\t\t\t\tnode.properties.__yarn__ = raw.replace(\"npm install\", \"yarn add\");\n\t\t\t\t\tnode.properties.__pnpm__ = raw.replace(\"npm install\", \"pnpm add\");\n\t\t\t\t\tnode.properties.__bun__ = raw.replace(\"npm install\", \"bun add\");\n\t\t\t\t}\n\n\t\t\t\tif (raw.startsWith(\"npx create-\")) {\n\t\t\t\t\tnode.properties.__npm__ = raw;\n\t\t\t\t\tnode.properties.__yarn__ = raw.replace(\"npx create-\", \"yarn create \");\n\t\t\t\t\tnode.properties.__pnpm__ = raw.replace(\"npx create-\", \"pnpm create \");\n\t\t\t\t\tnode.properties.__bun__ = raw.replace(\"npx\", \"bunx --bun\");\n\t\t\t\t}\n\n\t\t\t\t// npm create.\n\t\t\t\tif (raw.startsWith(\"npm create\")) {\n\t\t\t\t\tnode.properties.__npm__ = raw;\n\t\t\t\t\tnode.properties.__yarn__ = raw.replace(\"npm create\", \"yarn create\");\n\t\t\t\t\tnode.properties.__pnpm__ = raw.replace(\"npm create\", \"pnpm create\");\n\t\t\t\t\tnode.properties.__bun__ = raw.replace(\"npm create\", \"bun create\");\n\t\t\t\t}\n\n\t\t\t\t// npx.\n\t\t\t\tif (raw.startsWith(\"npx\")) {\n\t\t\t\t\tnode.properties.__npm__ = raw;\n\t\t\t\t\tnode.properties.__yarn__ = raw.replace(\"npx\", \"yarn dlx\");\n\t\t\t\t\tnode.properties.__pnpm__ = raw.replace(\"npx\", \"pnpm dlx\");\n\t\t\t\t\tnode.properties.__bun__ = raw.replace(\"npx\", \"bunx --bun\");\n\t\t\t\t}\n\n\t\t\t\t// npm run.\n\t\t\t\tif (raw.startsWith(\"npm run\")) {\n\t\t\t\t\tnode.properties.__npm__ = raw;\n\t\t\t\t\tnode.properties.__yarn__ = raw.replace(\"npm run\", \"yarn\");\n\t\t\t\t\tnode.properties.__pnpm__ = raw.replace(\"npm run\", \"pnpm\");\n\t\t\t\t\tnode.properties.__bun__ = raw.replace(\"npm run\", \"bun\");\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\ttransformerNotationWordHighlight(),\n] as ShikiTransformer[];\n\nexport async function highlightCode(\n\tcode: string,\n\tlanguage = \"tsx\",\n\toptions?: { showLineNumbers?: boolean },\n) {\n\tconst { showLineNumbers = true } = options ?? {};\n\n\tconst html = await codeToHtml(code, {\n\t\tlang: language,\n\t\tthemes: {\n\t\t\tdark: \"github-dark\",\n\t\t\tlight: \"github-light\",\n\t\t},\n\t\ttransformers: [\n\t\t\t{\n\t\t\t\tcode(node) {\n\t\t\t\t\tif (showLineNumbers) {\n\t\t\t\t\t\tnode.properties[\"data-line-numbers\"] = \"\";\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tline(node) {\n\t\t\t\t\tnode.properties[\"data-line\"] = \"\";\n\t\t\t\t},\n\t\t\t\tpre(node) {\n\t\t\t\t\tnode.properties.class =\n\t\t\t\t\t\t\"text-[.8125rem] min-w-0 w-max px-4 py-3.5 outline-none has-data-[highlighted-line]:px-0 has-data-[line-numbers]:ps-0 has-data-[slot=tabs]:p-0 !bg-transparent\";\n\t\t\t\t},\n\t\t\t},\n\t\t\ttransformerNotationWordHighlight(),\n\t\t],\n\t});\n\n\treturn html;\n}\n"
  },
  {
    "path": "packages/ui/src/lib/utils.ts",
    "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
  },
  {
    "path": "packages/ui/src/shared/code-block.tsx",
    "content": "import { ScrollArea } from \"@coss/ui/components/scroll-area\";\nimport { highlightCode } from \"@coss/ui/lib/highlight-code\";\nimport { CopyButton } from \"@coss/ui/shared/copy-button\";\nimport { getIconForLanguageExtension } from \"@coss/ui/shared/icons\";\n\nexport async function CodeBlock({\n  code,\n  language,\n  title,\n  copyButton = true,\n  showLineNumbers = true,\n}: {\n  code: string;\n  language: string;\n  title?: string | undefined;\n  copyButton?: boolean;\n  showLineNumbers?: boolean;\n}) {\n  const highlightedCode = await highlightCode(code, language, {\n    showLineNumbers,\n  });\n\n  return (\n    <figure data-rehype-pretty-code-figure=\"\">\n      {title && (\n        <figcaption\n          className=\"flex items-center gap-2 text-[.8125rem] text-code-foreground [&_svg]:size-4.5 [&_svg]:text-code-foreground sm:[&_svg]:size-4\"\n          data-language={language}\n          data-rehype-pretty-code-title=\"\"\n        >\n          {getIconForLanguageExtension(language)}\n          {title}\n        </figcaption>\n      )}\n      {copyButton && <CopyButton value={code} />}\n      <ScrollArea className=\"**:data-[slot=scroll-area-scrollbar]:data-[orientation=horizontal]:mx-2 **:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-2\">\n        <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />\n      </ScrollArea>\n    </figure>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/copy-button.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@coss/ui/components/tooltip\";\nimport { useCopyToClipboard } from \"@coss/ui/hooks/use-copy-to-clipboard\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { Copy01Icon, Tick02Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type * as React from \"react\";\n\nexport function CopyButton({\n  value,\n  className,\n  variant = \"ghost\",\n  ...props\n}: React.ComponentProps<typeof Button> & {\n  value: string;\n  src?: string;\n}) {\n  const { isCopied, copyToClipboard } = useCopyToClipboard();\n\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <Button\n            className={cn(\n              \"absolute top-1.5 right-1.5 z-3 size-9 bg-code opacity-70 hover:opacity-100 focus-visible:opacity-100 sm:size-8\",\n              className,\n            )}\n            data-slot=\"copy-button\"\n            onClick={() => copyToClipboard(value)}\n            size=\"icon\"\n            variant={variant}\n            {...props}\n          >\n            <span className=\"sr-only\">Copy</span>\n            {isCopied ? (\n              <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />\n            ) : (\n              <HugeiconsIcon icon={Copy01Icon} strokeWidth={2} />\n            )}\n          </Button>\n        }\n      />\n      <TooltipPopup>{isCopied ? \"Copied\" : \"Copy to Clipboard\"}</TooltipPopup>\n    </Tooltip>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/github-link.tsx",
    "content": "import { Button } from \"@coss/ui/components/button\";\nimport { Skeleton } from \"@coss/ui/components/skeleton\";\nimport { siteConfig } from \"@coss/ui/lib/config\";\nimport { GithubIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport Link from \"next/link\";\nimport * as React from \"react\";\n\nexport function GitHubLink() {\n  return (\n    <Button\n      className=\"relative h-8 shadow-none max-sm:w-8\"\n      render={\n        <Link href={siteConfig.links.github} rel=\"noreferrer\" target=\"_blank\">\n          <HugeiconsIcon className=\"size-4\" icon={GithubIcon} strokeWidth={2} />\n          <span className=\"max-sm:sr-only\">\n            <React.Suspense fallback={<Skeleton className=\"h-4 w-[25.5px]\" />}>\n              <StarsCount />\n            </React.Suspense>\n          </span>\n        </Link>\n      }\n      size=\"sm\"\n      variant=\"ghost\"\n    />\n  );\n}\n\nexport async function StarsCount() {\n  try {\n    const data = await fetch(\"https://api.github.com/repos/cosscom/coss\", {\n      next: { revalidate: 86400 }, // Cache for 1 day (86400 seconds)\n    });\n\n    if (!data.ok) {\n      throw new Error(`GitHub API error: ${data.status}`);\n    }\n\n    const json = await data.json();\n    const starsCount = json.stargazers_count;\n\n    if (typeof starsCount !== \"number\" || starsCount < 0) {\n      throw new Error(\"Invalid stars count\");\n    }\n\n    return (\n      <span className=\"w-8 text-muted-foreground text-xs tabular-nums\">\n        {starsCount >= 1000\n          ? `${(starsCount / 1000).toFixed(1)}k`\n          : starsCount.toLocaleString()}\n      </span>\n    );\n  } catch {\n    // Return nothing when GitHub API is unavailable or repo doesn't exist\n    return null;\n  }\n}\n"
  },
  {
    "path": "packages/ui/src/shared/icons.tsx",
    "content": "import {\n  CssFile01Icon,\n  Folder01Icon,\n  ThirdBracketIcon,\n  Typescript02Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\n\ntype IconProps = React.HTMLAttributes<SVGElement>;\n\nexport const Icons = {\n  apple: (props: IconProps) => (\n    <svg role=\"img\" viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  aria: (props: IconProps) => (\n    <svg fill=\"currentColor\" role=\"img\" viewBox=\"0 0 24 24\" {...props}>\n      <path d=\"M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z\" />\n    </svg>\n  ),\n  bash: (props: IconProps) => (\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path d=\"M21.038 4.9 13.461.402a2.86 2.86 0 0 0-2.923.001L2.961 4.9A3.023 3.023 0 0 0 1.5 7.503v8.995c0 1.073.557 2.066 1.462 2.603l7.577 4.497a2.86 2.86 0 0 0 2.922 0l7.577-4.497a3.023 3.023 0 0 0 1.462-2.603V7.503A3.021 3.021 0 0 0 21.038 4.9zM15.17 18.946l.013.646c.001.078-.05.167-.111.198l-.383.22c-.061.031-.111-.007-.112-.085l-.007-.635c-.328.136-.66.169-.872.084-.04-.016-.057-.075-.041-.142l.139-.584a.24.24 0 0 1 .069-.121.163.163 0 0 1 .036-.026c.022-.011.043-.014.062-.006.229.077.521.041.802-.101.357-.181.596-.545.592-.907-.003-.328-.181-.465-.613-.468-.55.001-1.064-.107-1.072-.917-.007-.667.34-1.361.889-1.8l-.007-.652c-.001-.08.048-.168.111-.2l.37-.236c.061-.031.111.007.112.087l.006.653c.273-.109.511-.138.726-.088.047.012.067.076.048.151l-.144.578a.255.255 0 0 1-.065.116.161.161 0 0 1-.038.028.083.083 0 0 1-.057.009c-.098-.022-.332-.073-.699.113-.385.195-.52.53-.517.778.003.297.155.387.681.396.7.012 1.003.318 1.01 1.023.007.689-.362 1.433-.928 1.888zm3.973-1.087c0 .06-.008.116-.058.145l-1.916 1.164c-.05.029-.09.004-.09-.056v-.494c0-.06.037-.093.087-.122l1.887-1.129c.05-.029.09-.004.09.056v.436zm1.316-11.062-7.168 4.427c-.894.523-1.553 1.109-1.553 2.187v8.833c0 .645.26 1.063.66 1.184a2.304 2.304 0 0 1-.398.039c-.42 0-.833-.114-1.197-.33L3.226 18.64a2.494 2.494 0 0 1-1.201-2.142V7.503c0-.881.46-1.702 1.201-2.142L10.803.863a2.342 2.342 0 0 1 2.394 0l7.577 4.498a2.479 2.479 0 0 1 1.164 1.732c-.252-.536-.818-.682-1.479-.296z\" />\n    </svg>\n  ),\n  google: (props: IconProps) => (\n    <svg role=\"img\" viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  logo: (props: IconProps) => (\n    <svg viewBox=\"0 0 256 256\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect fill=\"none\" height=\"256\" width=\"256\" />\n      <line\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"32\"\n        x1=\"208\"\n        x2=\"128\"\n        y1=\"128\"\n        y2=\"208\"\n      />\n      <line\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"32\"\n        x1=\"192\"\n        x2=\"40\"\n        y1=\"40\"\n        y2=\"192\"\n      />\n    </svg>\n  ),\n  mcp: (props: IconProps) => (\n    <svg\n      fill=\"currentColor\"\n      viewBox=\"0 0 16 16\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M10.459 1.562a1.725 1.725 0 0 0-2.407 0L1.635 7.855a.575.575 0 0 1-.925-.18.549.549 0 0 1 .123-.606L7.25.775a2.875 2.875 0 0 1 4.01 0 2.743 2.743 0 0 1 .803 2.36 2.866 2.866 0 0 1 2.406.787l.034.033a2.743 2.743 0 0 1 0 3.934L8.699 13.58a.182.182 0 0 0 0 .262l1.192 1.17a.55.55 0 0 1 0 .786.575.575 0 0 1-.802 0l-1.192-1.169a1.28 1.28 0 0 1 0-1.836L13.7 7.101a1.647 1.647 0 0 0 0-2.36l-.034-.032a1.725 1.725 0 0 0-2.404-.002L6.48 9.396l-.001.001-.065.065a.575.575 0 0 1-.926-.18.549.549 0 0 1 .123-.607l4.849-4.755a1.645 1.645 0 0 0-.002-2.358Z\" />\n      <path d=\"M9.657 3.135a.549.549 0 0 0 0-.786.575.575 0 0 0-.803 0L4.108 7.003a2.743 2.743 0 0 0 0 3.934 2.876 2.876 0 0 0 4.01 0l4.747-4.655a.548.548 0 0 0 0-.787.575.575 0 0 0-.802 0L7.317 10.15a1.725 1.725 0 0 1-2.407 0 1.647 1.647 0 0 1 0-2.36l4.747-4.655Z\" />\n    </svg>\n  ),\n  npm: (props: IconProps) => (\n    <svg viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  paypal: (props: IconProps) => (\n    <svg role=\"img\" viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  pnpm: (props: IconProps) => (\n    <svg viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  radix: (props: IconProps) => (\n    <svg fill=\"none\" viewBox=\"0 0 25 25\" {...props}>\n      <path\n        d=\"M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z\"\n        fill=\"currentcolor\"\n      />\n      <path d=\"M12 0H4V8H12V0Z\" fill=\"currentcolor\" />\n      <path\n        d=\"M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  ),\n  react: (props: IconProps) => (\n    <svg viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  spinner: (props: IconProps) => (\n    <svg\n      fill=\"none\"\n      height=\"24\"\n      stroke=\"currentColor\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n    </svg>\n  ),\n  tailwind: (props: IconProps) => (\n    <svg viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  ts: (props: IconProps) => (\n    <svg\n      fill=\"currentColor\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M18 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12Zm-2.476 7.128c-.583 0-1.104.101-1.562.305a2.609 2.609 0 0 0-1.082.847c-.26.362-.39.785-.387 1.27-.002.591.192 1.061.582 1.41.39.349.923.605 1.598.77l.87.218c.293.07.539.149.74.235.202.086.356.19.46.312.107.123.16.274.16.453a.803.803 0 0 1-.175.512 1.143 1.143 0 0 1-.497.348c-.21.083-.46.125-.746.125-.291 0-.553-.045-.785-.133a1.281 1.281 0 0 1-.55-.402 1.23 1.23 0 0 1-.231-.672h-1.637c.013.575.153 1.058.418 1.449.268.388.64.68 1.117.879.48.198 1.042.297 1.688.297.65 0 1.207-.098 1.668-.293.463-.198.818-.476 1.062-.832.248-.36.373-.784.375-1.274a2.125 2.125 0 0 0-.183-.887 1.997 1.997 0 0 0-.496-.671 2.92 2.92 0 0 0-.758-.48 5.069 5.069 0 0 0-.961-.313l-.719-.172a4.213 4.213 0 0 1-.492-.14 2.109 2.109 0 0 1-.406-.2.938.938 0 0 1-.278-.277.658.658 0 0 1-.09-.375c0-.172.05-.326.149-.461a.984.984 0 0 1 .438-.317c.19-.078.423-.117.699-.117.406 0 .728.087.964.262.238.174.372.419.403.734H18.5a2.242 2.242 0 0 0-.383-1.258 2.46 2.46 0 0 0-1.039-.847c-.443-.204-.96-.305-1.555-.305Zm-9.756.11v1.394h2.449v6.605h1.672v-6.605h2.449v-1.395h-6.57Z\" />\n    </svg>\n  ),\n  twitter: (props: IconProps) => (\n    <svg\n      {...props}\n      height=\"23\"\n      viewBox=\"0 0 1200 1227\"\n      width=\"23\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path d=\"M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z\" />\n    </svg>\n  ),\n  v0: (props: IconProps) => (\n    <svg\n      fill=\"currentColor\"\n      viewBox=\"0 0 16 16\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M9.50321 5.5H13.2532C13.3123 5.5 13.3704 5.5041 13.4273 5.51203L9.51242 9.42692C9.50424 9.36912 9.5 9.31006 9.5 9.25L9.5 5.5L8 5.5L8 9.25C8 10.7688 9.23122 12 10.75 12H14.5V10.5L10.75 10.5C10.6899 10.5 10.6309 10.4958 10.5731 10.4876L14.4904 6.57028C14.4988 6.62897 14.5032 6.68897 14.5032 6.75V10.5H16.0032V6.75C16.0032 5.23122 14.772 4 13.2532 4H9.50321V5.5ZM0 5V5.00405L5.12525 11.5307C5.74119 12.3151 7.00106 11.8795 7.00106 10.8822V5H5.50106V9.58056L1.90404 5H0Z\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  yarn: (props: IconProps) => (\n    <svg viewBox=\"0 0 24 24\" {...props}>\n      <path\n        d=\"M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n};\n\nexport function getIconForLanguageExtension(language: string) {\n  switch (language) {\n    case \"json\":\n      return <HugeiconsIcon icon={ThirdBracketIcon} strokeWidth={2} />;\n    case \"css\":\n      return <HugeiconsIcon icon={CssFile01Icon} strokeWidth={2} />;\n    case \"js\":\n    case \"jsx\":\n    case \"ts\":\n    case \"tsx\":\n    case \"typescript\":\n      return <HugeiconsIcon icon={Typescript02Icon} strokeWidth={2} />;\n    default:\n      return <HugeiconsIcon icon={Folder01Icon} strokeWidth={2} />;\n  }\n}\n"
  },
  {
    "path": "packages/ui/src/shared/mobile-nav.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport { Sheet, SheetPopup, SheetTrigger } from \"@coss/ui/components/sheet\";\nimport { cn } from \"@coss/ui/lib/utils\";\nimport { Menu09Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport Link, { type LinkProps } from \"next/link\";\nimport * as React from \"react\";\n\nexport type PageNode = {\n  type: \"page\";\n  name: string;\n  url: string;\n};\n\nexport type FolderNode = {\n  type: \"folder\";\n  name: string;\n  children: (PageNode | FolderNode)[];\n};\n\nexport type NavTree = {\n  children: FolderNode[];\n};\n\nexport function MobileNav({\n  tree,\n  items,\n  className,\n}: {\n  tree?: NavTree;\n  items: { href: string; label: string }[];\n  className?: string;\n}) {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Sheet onOpenChange={setOpen} open={open}>\n      <SheetTrigger\n        render={\n          <Button\n            className={cn(\"relative -ms-1.5 size-8\", className)}\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            <HugeiconsIcon\n              className=\"size-5\"\n              icon={Menu09Icon}\n              strokeWidth={2}\n            />\n            <span className=\"sr-only\">Toggle Menu</span>\n          </Button>\n        }\n      />\n      <SheetPopup side=\"left\">\n        <div className=\"flex flex-col gap-12 overflow-auto p-6 pt-8\">\n          <div className=\"flex flex-col gap-3\">\n            <div className=\"font-medium text-sm\">Menu</div>\n            <div className=\"flex flex-col gap-2\">\n              <MobileLink href=\"/\" onOpenChange={setOpen}>\n                Home\n              </MobileLink>\n              {items.map((item) => (\n                <MobileLink\n                  href={item.href}\n                  key={item.label}\n                  onOpenChange={setOpen}\n                >\n                  {item.label}\n                </MobileLink>\n              ))}\n            </div>\n          </div>\n          {tree ? (\n            <div className=\"flex flex-col gap-8\">\n              {tree?.children?.map((group: FolderNode, index: number) => {\n                if (group.type === \"folder\") {\n                  return (\n                    <div className=\"flex flex-col gap-3\" key={group.name}>\n                      <div className=\"font-medium text-sm\">{group.name}</div>\n                      <div className=\"flex flex-col gap-2\">\n                        {group.children.map((item) => {\n                          if (item.type === \"page\") {\n                            return (\n                              <MobileLink\n                                href={item.url}\n                                key={`${item.url}-${index}`}\n                                onOpenChange={setOpen}\n                              >\n                                {item.name}\n                              </MobileLink>\n                            );\n                          }\n                          return null;\n                        })}\n                      </div>\n                    </div>\n                  );\n                }\n                return null;\n              })}\n            </div>\n          ) : null}\n        </div>\n      </SheetPopup>\n    </Sheet>\n  );\n}\n\nfunction MobileLink({\n  href,\n  onOpenChange,\n  className,\n  children,\n  ...props\n}: LinkProps & {\n  onOpenChange?: (open: boolean) => void;\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <Link\n      className={cn(\"text-muted-foreground\", className)}\n      href={href}\n      onClick={() => {\n        onOpenChange?.(false);\n      }}\n      {...props}\n    >\n      {children}\n    </Link>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/mode-switcher.tsx",
    "content": "\"use client\";\n\nimport { Button } from \"@coss/ui/components/button\";\nimport { LayerMask01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useTheme } from \"next-themes\";\nimport * as React from \"react\";\n\nexport function ModeSwitcher() {\n  const { setTheme, resolvedTheme } = useTheme();\n\n  const toggleTheme = React.useCallback(() => {\n    setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\");\n  }, [resolvedTheme, setTheme]);\n\n  return (\n    <Button\n      className=\"relative size-8\"\n      onClick={toggleTheme}\n      size=\"icon\"\n      title=\"Toggle theme\"\n      variant=\"ghost\"\n    >\n      <HugeiconsIcon\n        className=\"size-4 -rotate-45\"\n        icon={LayerMask01Icon}\n        strokeWidth={2}\n      />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/page-header.tsx",
    "content": "import { cn } from \"@coss/ui/lib/utils\";\n\nfunction PageHeader({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"section\">) {\n  return (\n    <section className={className} {...props}>\n      <div className=\"container flex flex-col items-center gap-2 px-0 py-8 text-center md:py-12 lg:py-16 xl:gap-4\">\n        {children}\n      </div>\n    </section>\n  );\n}\n\nfunction PageHeaderHeading({\n  className,\n  ...props\n}: React.ComponentProps<\"h1\">) {\n  return (\n    <h1\n      className={cn(\"font-heading text-4xl lg:text-5xl\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PageHeaderDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      className={cn(\"text-muted-foreground lg:text-lg\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { PageHeader, PageHeaderDescription, PageHeaderHeading };\n"
  },
  {
    "path": "packages/ui/src/shared/product-label.tsx",
    "content": "\"use client\";\n\nimport { Badge } from \"@coss/ui/components/badge\";\nimport { usePathname } from \"next/navigation\";\n\ninterface ProductsDropdownProps {\n  items: { href: string; label: string; upcoming?: boolean }[];\n  currentProduct?: string;\n}\n\nexport function ProductLabel({ items, currentProduct }: ProductsDropdownProps) {\n  const pathname = usePathname();\n\n  // If currentProduct is explicitly provided, use it\n  if (currentProduct) {\n    const matchingItem = items.find(\n      (item) => item.label.toLowerCase() === currentProduct.toLowerCase(),\n    );\n\n    if (!matchingItem) {\n      return null;\n    }\n\n    return (\n      <>\n        <span className=\"text-muted-foreground/64\">{matchingItem.label}</span>\n        {matchingItem.upcoming && (\n          <Badge className=\"ms-2 -mt-1 font-sans max-sm:hidden\" variant=\"info\">\n            Upcoming\n          </Badge>\n        )}\n      </>\n    );\n  }\n\n  // Don't display anything on home page\n  if (pathname === \"/\") {\n    return null;\n  }\n\n  // Get the first segment of the pathname (remove leading slash)\n  const firstSegment = pathname.slice(1).split(\"/\")[0];\n\n  // Check if the first segment matches any of the item labels\n  const matchingItem = firstSegment\n    ? items.find(\n        (item) => item.label.toLowerCase() === firstSegment.toLowerCase(),\n      )\n    : undefined;\n\n  // Only display if we have a match\n  if (!matchingItem) {\n    return null;\n  }\n\n  return (\n    <>\n      <span className=\"text-muted-foreground/64\">{matchingItem.label}</span>\n      {matchingItem.upcoming && (\n        <Badge className=\"ms-2 -mt-1 font-sans max-sm:hidden\" variant=\"info\">\n          Upcoming\n        </Badge>\n      )}\n    </>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/products-dropdown.tsx",
    "content": "\"use client\";\n\nimport { Badge } from \"@coss/ui/components/badge\";\nimport { Button } from \"@coss/ui/components/button\";\nimport {\n  Menu,\n  MenuItem,\n  MenuPopup,\n  MenuTrigger,\n} from \"@coss/ui/components/menu\";\nimport { ChevronDown } from \"lucide-react\";\nimport Link from \"next/link\";\n\ninterface ProductsDropdownProps {\n  items: { href: string; label: string; upcoming?: boolean }[];\n}\n\nexport function ProductsDropdown({ items }: ProductsDropdownProps) {\n  const gatewayOrigin = process.env.NEXT_PUBLIC_COSS_URL || \"\";\n  const uiGatewayOrigin = process.env.NEXT_PUBLIC_COSS_UI_URL || \"\";\n\n  const getLinkProps = (item: {\n    href: string;\n    label: string;\n    upcoming?: boolean;\n  }) => {\n    const isHomePage = item.href === \"/\";\n\n    // Determine if this should be an external link and construct the URL\n    if (gatewayOrigin && !isHomePage) {\n      // Non-homepage links go to the main gateway\n      return {\n        href: `${gatewayOrigin}${item.href}`,\n        isExternal: true,\n      };\n    }\n\n    if (uiGatewayOrigin && isHomePage) {\n      // Homepage links go to the UI gateway\n      return {\n        href: uiGatewayOrigin,\n        isExternal: true,\n      };\n    }\n\n    // Default: internal link\n    return {\n      href: item.href,\n      isExternal: false,\n    };\n  };\n\n  return (\n    <Menu>\n      <MenuTrigger render={<Button variant=\"ghost\" />}>\n        Products\n        <ChevronDown />\n      </MenuTrigger>\n      <MenuPopup align=\"center\" sideOffset={4}>\n        {items.map((item) => {\n          const { href, isExternal } = getLinkProps(item);\n\n          return (\n            <MenuItem\n              className=\"group justify-between\"\n              key={item.href}\n              // biome-ignore lint/a11y/useAnchorContent: This is intentional\n              render={isExternal ? <a href={href} /> : <Link href={href} />}\n            >\n              <span className=\"font-heading in-data-highlighted:text-foreground text-muted-foreground\">\n                {item.label}\n              </span>\n              {item.upcoming && (\n                <Badge\n                  className=\"-me-0.5 font-medium opacity-0 group-hover:opacity-100\"\n                  size=\"sm\"\n                  variant=\"info\"\n                >\n                  Upcoming\n                </Badge>\n              )}\n            </MenuItem>\n          );\n        })}\n      </MenuPopup>\n    </Menu>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/site-cta.tsx",
    "content": "import { Button } from \"@coss/ui/components/button\";\nimport Link from \"next/link\";\n\nexport function SiteCta() {\n  return (\n    <section>\n      <div className=\"container flex w-full items-center justify-center gap-2 px-4 sm:px-6\">\n        <Button\n          render={\n            // biome-ignore lint(a11y/useAnchorContent): knwon\n            <a\n              href=\"https://i.cal.com/forms/0129f2a8-7b15-4850-b3fb-07944dfacb3c\"\n              rel=\"noreferrer\"\n              target=\"_blank\"\n            />\n          }\n        >\n          Join the waitlist\n        </Button>\n        <Button render={<Link href=\"https://cal.com/jobs\" />} variant=\"outline\">\n          Join the company\n        </Button>\n      </div>\n    </section>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/site-footer.tsx",
    "content": "import Link from \"next/link\";\n\nexport function SiteFooter() {\n  return (\n    <footer className=\"relative mt-8 py-6 text-muted-foreground before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border/64\">\n      <div\n        aria-hidden=\"true\"\n        className=\"container pointer-events-none absolute inset-0 z-50 before:absolute before:top-[-3.5px] before:-left-[11.5px] before:z-1 before:-ml-1 before:size-2 before:rounded-[2px] before:border before:border-border before:bg-popover before:bg-clip-padding before:shadow-xs after:absolute after:top-[-3.5px] after:-right-[11.5px] after:z-1 after:-mr-1 after:size-2 after:rounded-[2px] after:border after:border-border after:bg-background after:bg-clip-padding after:shadow-xs dark:after:bg-clip-border dark:before:bg-clip-border\"\n      />\n      <div className=\"container flex w-full items-center justify-center gap-2 px-4 sm:px-6\">\n        <p>\n          © {new Date().getFullYear()}{\" \"}\n          <Link className=\"font-heading text-foreground text-lg\" href=\"/\">\n            coss.com\n          </Link>{\" \"}\n          – open source, open heart, open mind.\n        </p>\n      </div>\n    </footer>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/site-header.tsx",
    "content": "import { siteConfig } from \"@coss/ui/lib/config\";\nimport { GitHubLink } from \"@coss/ui/shared/github-link\";\nimport { ModeSwitcher } from \"@coss/ui/shared/mode-switcher\";\nimport { ProductLabel } from \"@coss/ui/shared/product-label\";\nimport { ProductsDropdown } from \"@coss/ui/shared/products-dropdown\";\nimport Link from \"next/link\";\n\nexport function SiteHeader({\n  mobileNav,\n  children,\n  currentProduct,\n}: {\n  mobileNav?: React.ReactNode;\n  children?: React.ReactNode;\n  currentProduct?: string;\n}) {\n  const gatewayOrigin = process.env.NEXT_PUBLIC_COSS_URL || \"\";\n  const gatewayHome = gatewayOrigin ? `${gatewayOrigin}/` : \"/\";\n  const isExternal = !!gatewayOrigin;\n\n  return (\n    <header className=\"sticky top-0 z-40 w-full bg-sidebar/80 backdrop-blur-sm before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border/64\">\n      <div className=\"container relative flex h-(--header-height) w-full items-center justify-between gap-2 px-4 sm:px-6\">\n        {mobileNav}\n        <div className=\"-mt-0.5 flex shrink-0 items-center gap-1.5 font-heading text-2xl sm:text-[1.625em]\">\n          {isExternal ? (\n            <a aria-label=\"Home\" href={gatewayHome}>\n              coss.com\n            </a>\n          ) : (\n            <Link aria-label=\"Home\" href={gatewayHome}>\n              coss.com\n            </Link>\n          )}\n          <ProductLabel\n            currentProduct={currentProduct}\n            items={siteConfig.products}\n          />\n        </div>\n        <div className=\"ms-auto flex items-center gap-2 md:flex-1 md:justify-end\">\n          {children}\n          <ProductsDropdown items={siteConfig.products} />\n          <GitHubLink />\n          <ModeSwitcher />\n        </div>\n      </div>\n    </header>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/shared/theme-provider.tsx",
    "content": "\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\nimport type * as React from \"react\";\n\nexport function ThemeProvider({\n  children,\n  ...props\n}: React.ComponentProps<typeof NextThemesProvider>) {\n  return (\n    <NextThemesProvider\n      attribute=\"class\"\n      defaultTheme=\"system\"\n      disableTransitionOnChange\n      enableColorScheme\n      enableSystem\n      {...props}\n    >\n      {children}\n    </NextThemesProvider>\n  );\n}\n"
  },
  {
    "path": "packages/ui/src/styles/globals.css",
    "content": "@import \"tailwindcss\";\n@source \"../../../apps/**/*.{ts,tsx}\";\n@source \"../**/*.{ts,tsx}\";\n\n@custom-variant dark (&:is(.dark *));\n\n@custom-variant fixed (&:is(.layout-fixed *));\n\n@theme inline {\n  --breakpoint-3xl: 1600px;\n  --breakpoint-4xl: 2000px;\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --font-sans: var(--font-sans);\n  --font-heading: var(--font-heading);\n  --font-mono: var(--font-mono);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar: var(--sidebar);\n  --color-chart-5: var(--chart-5);\n  --color-chart-4: var(--chart-4);\n  --color-chart-3: var(--chart-3);\n  --color-chart-2: var(--chart-2);\n  --color-chart-1: var(--chart-1);\n  --color-ring: var(--ring);\n  --color-input: var(--input);\n  --color-border: var(--border);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-info: var(--info);\n  --color-info-foreground: var(--info-foreground);\n  --color-success: var(--success);\n  --color-success-foreground: var(--success-foreground);\n  --color-warning: var(--warning);\n  --color-warning-foreground: var(--warning-foreground);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-accent: var(--accent);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-muted: var(--muted);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-secondary: var(--secondary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-primary: var(--primary);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-popover: var(--popover);\n  --color-card-foreground: var(--card-foreground);\n  --color-card: var(--card);\n  --color-code: var(--code);\n  --color-code-foreground: var(--code-foreground);\n  --color-code-highlight: var(--code-highlight);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --animate-skeleton: skeleton 2s -1s infinite linear;\n  --animate-caret-blink: 1s ease-out infinite caret-blink;\n  --tw-shadow-color: #000;\n  @keyframes skeleton {\n    to {\n      background-position: -200% 0;\n    }\n  }\n  @keyframes caret-blink {\n    0%,\n    70%,\n    to {\n      opacity: 1;\n    }\n    20%,\n    50% {\n      opacity: 0;\n    }\n  }\n}\n\n:root {\n  --radius: 0.625rem;\n  --background: var(--color-white);\n  --foreground: var(--color-neutral-800);\n  --card: var(--color-white);\n  --card-foreground: var(--color-neutral-800);\n  --popover: var(--color-white);\n  --popover-foreground: var(--color-neutral-800);\n  --primary: var(--color-neutral-800);\n  --primary-foreground: var(--color-neutral-50);\n  --secondary: --alpha(var(--color-black) / 4%);\n  --secondary-foreground: var(--color-neutral-800);\n  --muted: --alpha(var(--color-black) / 4%);\n  --muted-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-500) 90%,\n    var(--color-black)\n  );\n  --accent: --alpha(var(--color-black) / 4%);\n  --accent-foreground: var(--color-neutral-800);\n  --destructive: var(--color-red-500);\n  --destructive-foreground: var(--color-red-700);\n  --info: var(--color-blue-500);\n  --info-foreground: var(--color-blue-700);\n  --success: var(--color-emerald-500);\n  --success-foreground: var(--color-emerald-700);\n  --warning: var(--color-amber-500);\n  --warning-foreground: var(--color-amber-700);\n  --border: --alpha(var(--color-black) / 8%);\n  --input: --alpha(var(--color-black) / 10%);\n  --ring: var(--color-neutral-400);\n  --chart-1: var(--color-orange-600);\n  --chart-2: var(--color-teal-600);\n  --chart-3: var(--color-cyan-900);\n  --chart-4: var(--color-amber-400);\n  --chart-5: var(--color-amber-500);\n  --sidebar: var(--color-neutral-50);\n  --sidebar-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-800) 64%,\n    var(--sidebar)\n  );\n  --sidebar-primary: var(--color-neutral-800);\n  --sidebar-primary-foreground: var(--color-neutral-50);\n  --sidebar-accent: --alpha(var(--color-black) / 4%);\n  --sidebar-accent-foreground: var(--color-neutral-800);\n  --sidebar-border: --alpha(var(--color-black) / 6%);\n  --sidebar-ring: var(--color-neutral-400);\n  --code: var(--color-white);\n  --code-foreground: var(--foreground);\n  --code-highlight: --alpha(var(--color-black) / 4%);\n}\n\n.dark {\n  --background: color-mix(\n    in srgb,\n    var(--color-neutral-950) 96%,\n    var(--color-white)\n  );\n  --foreground: var(--color-neutral-100);\n  --card: color-mix(in srgb, var(--background) 98%, var(--color-white));\n  --card-foreground: var(--color-neutral-100);\n  --popover: color-mix(in srgb, var(--background) 96%, var(--color-white));\n  --popover-foreground: var(--color-neutral-100);\n  --primary: var(--color-neutral-100);\n  --primary-foreground: var(--color-neutral-800);\n  --secondary: --alpha(var(--color-white) / 4%);\n  --secondary-foreground: var(--color-neutral-100);\n  --muted: --alpha(var(--color-white) / 4%);\n  --muted-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-500) 90%,\n    var(--color-white)\n  );\n  --accent: --alpha(var(--color-white) / 4%);\n  --accent-foreground: var(--color-neutral-100);\n  --destructive: color-mix(\n    in srgb,\n    var(--color-red-500) 90%,\n    var(--color-white)\n  );\n  --destructive-foreground: var(--color-red-400);\n  --info: var(--color-blue-500);\n  --info-foreground: var(--color-blue-400);\n  --success: var(--color-emerald-500);\n  --success-foreground: var(--color-emerald-400);\n  --warning: var(--color-amber-500);\n  --warning-foreground: var(--color-amber-400);\n  --border: --alpha(var(--color-white) / 6%);\n  --input: --alpha(var(--color-white) / 8%);\n  --ring: var(--color-neutral-500);\n  --chart-1: var(--color-blue-700);\n  --chart-2: var(--color-emerald-500);\n  --chart-3: var(--color-amber-500);\n  --chart-4: var(--color-purple-500);\n  --chart-5: var(--color-rose-500);\n  --sidebar: color-mix(\n    in srgb,\n    var(--color-neutral-950) 97%,\n    var(--color-white)\n  );\n  --sidebar-foreground: color-mix(\n    in srgb,\n    var(--color-neutral-100) 64%,\n    var(--sidebar)\n  );\n  --sidebar-primary: var(--color-neutral-100);\n  --sidebar-primary-foreground: var(--color-neutral-800);\n  --sidebar-accent: --alpha(var(--color-white) / 4%);\n  --sidebar-accent-foreground: var(--color-neutral-100);\n  --sidebar-border: --alpha(var(--color-white) / 5%);\n  --sidebar-ring: var(--color-neutral-400);\n  --code: color-mix(in srgb, var(--background) 98%, var(--color-white));\n  --code-foreground: var(--foreground);\n  --code-highlight: --alpha(var(--color-white) / 4%);\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--font-mono);\n  }\n}\n\n@utility container {\n  @apply mx-auto max-w-[1416px] px-4 lg:px-6;\n}\n\n@layer components {\n  .steps {\n    &:first-child {\n      @apply !mt-0;\n    }\n\n    &:first-child > h3:first-child {\n      @apply !mt-0;\n    }\n\n    > h3 {\n      @apply !mt-16;\n    }\n\n    > h3 + p {\n      @apply !mt-2;\n    }\n  }\n\n  [data-rehype-pretty-code-figure] {\n    background-color: var(--color-code);\n    color: var(--color-code-foreground);\n    border-radius: var(--radius-xl);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--border);\n    margin-top: calc(var(--spacing) * 6);\n    overflow: hidden;\n    outline: none;\n    position: relative;\n\n    &:has([data-rehype-pretty-code-title]) [data-slot=\"copy-button\"] {\n      top: calc(var(--spacing) * 1.5);\n    }\n\n    :where(*[data-tab=\"code\"]) & {\n      border-width: 0px;\n    }\n  }\n\n  [data-rehype-pretty-code-title] {\n    min-height: calc(var(--spacing) * 11);\n    border-bottom: --alpha(var(--border) / 64%);\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    padding-block: calc(var(--spacing) * 2.5);\n    padding-inline: calc(var(--spacing) * 4);\n    font-family: var(--font-mono);\n    color: var(--color-code-foreground);\n  }\n\n  [data-line-numbers] {\n    display: grid;\n    min-width: 100%;\n    white-space: pre;\n    border: 0;\n    background: transparent;\n    padding: 0;\n    counter-reset: line;\n    box-decoration-break: clone;\n  }\n\n  [data-line-numbers] [data-line]::before {\n    counter-increment: line;\n    content: counter(line);\n    display: inline-block;\n    width: calc(var(--spacing) * 16);\n    padding-right: calc(var(--spacing) * 6);\n    text-align: right;\n    color: var(--color-muted-foreground);\n    background-color: var(--color-code);\n    position: sticky;\n    left: 0;\n  }\n\n  [data-line-numbers] [data-highlighted-line][data-line]::before {\n    background-color: var(--color-code-highlight);\n  }\n\n  [data-line] {\n    padding-top: calc(var(--spacing) * 0.5);\n    padding-bottom: calc(var(--spacing) * 0.5);\n    min-height: calc(var(--spacing) * 1);\n    width: 100%;\n    display: inline-block;\n  }\n\n  [data-line] span {\n    color: var(--shiki-light);\n\n    @variant dark {\n      /* biome-ignore lint(suspicious/noDuplicateProperties): knwon */\n      color: var(--shiki-dark) !important;\n    }\n  }\n\n  [data-highlighted-line],\n  [data-highlighted-chars] {\n    position: relative;\n    background-color: var(--color-code-highlight);\n  }\n\n  [data-highlighted-line] {\n    &:after {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 2px;\n      height: 100%;\n      content: \"\";\n      background-color: color-mix(\n        in oklab,\n        var(--muted-foreground) 50%,\n        transparent\n      );\n    }\n  }\n\n  [data-highlighted-chars] {\n    border-radius: var(--radius-sm);\n    padding-inline: 0.3rem;\n    padding-block: 0.1rem;\n    font-family: var(--font-mono);\n    font-size: 0.8rem;\n  }\n\n  .highlighted-word {\n    position: relative;\n    padding: 0;\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      top: -2px;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      border-radius: var(--radius-xs);\n      pointer-events: none;\n    }\n\n    + .highlighted-word {\n      &::before {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n\n    &:has(+ .highlighted-word) {\n      &::before {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n        right: 2px;\n      }\n    }\n\n    [data-lib=\"radix-ui\"] & {\n      &::before {\n        background-color: --alpha(var(--color-destructive) / 20%);\n      }\n    }\n\n    [data-lib=\"base-ui\"] & {\n      &::before {\n        background-color: --alpha(var(--color-success) / 20%);\n      }\n    }\n  }\n}\n"
  },
  {
    "path": "packages/ui/test/components/button.test.tsx",
    "content": "import { beforeEach, describe, expect, mock, test } from \"bun:test\";\nimport * as React from \"react\";\n\ntype UseRenderConfig = {\n  defaultTagName: string;\n  render?: (...args: unknown[]) => unknown;\n  props: Record<string, unknown>;\n};\n\nconst useRenderCalls: UseRenderConfig[] = [];\nconst mergePropsCalls: Array<\n  [Record<string, unknown>, Record<string, unknown>]\n> = [];\n\nfunction useRenderMock(config: UseRenderConfig) {\n  useRenderCalls.push(config);\n  return null;\n}\n\nfunction mergePropsMock(\n  defaults: Record<string, unknown>,\n  overrides: Record<string, unknown> = {},\n) {\n  mergePropsCalls.push([defaults, overrides]);\n  return { ...defaults, ...overrides };\n}\n\nmock.module(\"@base-ui/react/use-render\", () => ({\n  useRender: useRenderMock,\n}));\n\nmock.module(\"@base-ui/react/merge-props\", () => ({\n  mergeProps: mergePropsMock,\n}));\n\nconst { Button } = await import(\"../../src/components/button\");\n\nfunction lastUseRenderCall() {\n  const lastCall = useRenderCalls[useRenderCalls.length - 1];\n  if (!lastCall) {\n    throw new Error(\"useRender was not called\");\n  }\n  return lastCall;\n}\n\nfunction lastMergePropsCall() {\n  const lastCall = mergePropsCalls[mergePropsCalls.length - 1];\n  if (!lastCall) {\n    throw new Error(\"mergeProps was not called\");\n  }\n  return lastCall;\n}\n\ndescribe(\"Button\", () => {\n  beforeEach(() => {\n    useRenderCalls.length = 0;\n    mergePropsCalls.length = 0;\n  });\n\n  test(\"sets base attributes and defaults type to button\", () => {\n    Button({ children: \"Default label\" });\n\n    const call = lastUseRenderCall();\n    expect(call.defaultTagName).toBe(\"button\");\n    expect(call.props[\"data-slot\"]).toBe(\"button\");\n    expect(call.props.type).toBe(\"button\");\n  });\n\n  test(\"omits the default type when a custom render is provided\", () => {\n    const render = () => React.createElement(\"div\");\n    Button({ render, type: \"submit\" });\n\n    const [defaults, overrides] = lastMergePropsCall();\n    expect(defaults.type).toBeUndefined();\n    expect(overrides.type).toBe(\"submit\");\n\n    const call = lastUseRenderCall();\n    expect(call.render).toBe(render);\n  });\n\n  test(\"merges variants, sizes, and custom className\", () => {\n    Button({\n      className: \"custom-class\",\n      size: \"lg\",\n      variant: \"destructive\",\n    });\n\n    const call = lastUseRenderCall();\n    const className = call.props.className as string;\n    expect(className).toContain(\"border-destructive\");\n    expect(className).toContain(\"h-10\");\n    expect(className).toContain(\"custom-class\");\n  });\n});\n"
  },
  {
    "path": "packages/ui/test/components/separator.test.tsx",
    "content": "import { beforeEach, describe, expect, mock, test } from \"bun:test\";\n\ntype SeparatorRenderCall = {\n  className?: string;\n  \"data-slot\"?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n  [key: string]: unknown;\n};\n\nconst separatorRenderCalls: SeparatorRenderCall[] = [];\nconst cnCalls: string[][] = [];\n\nfunction mockSeparatorPrimitive(props: SeparatorRenderCall) {\n  separatorRenderCalls.push(props);\n  return null;\n}\n\nconst SeparatorPrimitiveMock = Object.assign(mockSeparatorPrimitive, {\n  Props: {} as Record<string, unknown>,\n});\n\nfunction cnMock(...inputs: string[]) {\n  cnCalls.push(inputs);\n  return inputs.filter(Boolean).join(\" \");\n}\n\nmock.module(\"@base-ui/react/separator\", () => ({\n  Separator: SeparatorPrimitiveMock,\n}));\n\nmock.module(\"@coss/ui/lib/utils\", () => ({\n  cn: cnMock,\n}));\n\nconst { Separator: SeparatorComponent } = await import(\n  \"../../src/components/separator\"\n);\n\n// Mock the Separator component to track render calls\nfunction Separator(props: Parameters<typeof SeparatorComponent>[0]) {\n  const element = SeparatorComponent(props);\n  (element.type as (props: unknown) => unknown)(element.props);\n}\n\nfunction lastSeparatorCall() {\n  const lastCall = separatorRenderCalls[separatorRenderCalls.length - 1];\n  if (!lastCall) {\n    throw new Error(\"Separator was not called\");\n  }\n  return lastCall;\n}\n\ndescribe(\"Separator\", () => {\n  beforeEach(() => {\n    separatorRenderCalls.length = 0;\n    cnCalls.length = 0;\n  });\n\n  test(\"sets base attributes and defaults orientation to horizontal\", () => {\n    Separator({});\n\n    const call = lastSeparatorCall();\n    expect(call[\"data-slot\"]).toBe(\"separator\");\n    expect(call.orientation).toBe(\"horizontal\");\n  });\n\n  test(\"applies horizontal orientation styles by default\", () => {\n    Separator({});\n\n    const call = lastSeparatorCall();\n    const className = call.className as string;\n    expect(className).toContain(\"shrink-0\");\n    expect(className).toContain(\"bg-border\");\n    expect(className).toContain(\"data-[orientation=horizontal]:h-px\");\n    expect(className).toContain(\"data-[orientation=horizontal]:w-full\");\n  });\n\n  test(\"accepts vertical orientation\", () => {\n    Separator({ orientation: \"vertical\" });\n\n    const call = lastSeparatorCall();\n    expect(call.orientation).toBe(\"vertical\");\n  });\n\n  test(\"applies vertical orientation styles\", () => {\n    Separator({ orientation: \"vertical\" });\n\n    const call = lastSeparatorCall();\n    const className = call.className as string;\n    expect(className).toContain(\"data-[orientation=vertical]:w-px\");\n  });\n\n  test(\"merges custom className with default styles\", () => {\n    Separator({ className: \"custom-separator-class\" });\n\n    const call = lastSeparatorCall();\n    const className = call.className as string;\n    expect(className).toContain(\"shrink-0\");\n    expect(className).toContain(\"bg-border\");\n    expect(className).toContain(\"custom-separator-class\");\n  });\n\n  test(\"passes through additional props\", () => {\n    Separator({ \"aria-label\": \"Custom divider\" });\n\n    const call = lastSeparatorCall();\n    expect((call as Record<string, unknown>)[\"aria-label\"]).toBe(\n      \"Custom divider\",\n    );\n  });\n});\n"
  },
  {
    "path": "packages/ui/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"composite\": true,\n    \"incremental\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"paths\": {\n      \"@coss/ui/*\": [\"./src/*\"]\n    },\n    \"types\": [\"next\", \"react\", \"node\", \"bun-types\"]\n  },\n  \"exclude\": [\"node_modules\", \"dist\", \"**/*.test.ts\", \"**/*.test.tsx\"],\n  \"extends\": \"@coss/typescript-config/react-library.json\",\n  \"include\": [\".\"]\n}\n"
  },
  {
    "path": "packages/ui/tsconfig.lint.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"dist\"\n  },\n  \"exclude\": [\"node_modules\", \"dist\"],\n  \"extends\": \"@coss/typescript-config/react-library.json\",\n  \"include\": [\"src\", \"turbo\"]\n}\n"
  },
  {
    "path": "packages/ui/tsconfig.tsbuildinfo",
    "content": "{\"fileNames\":[\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es5.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.dom.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.dom.iterable.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.core.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.collection.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.generator.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.promise.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.intl.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.date.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.object.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.string.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.intl.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.intl.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.promise.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.array.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.object.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.string.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.intl.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.date.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.promise.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.string.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.intl.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.number.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.promise.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.string.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.weakref.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.intl.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.array.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.error.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.intl.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.object.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.string.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.regexp.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.disposable.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.esnext.float16.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.d.ts\",\"../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts\",\"../../node_modules/.bun/@types+react@19.2.6/node_modules/@types/react/global.d.ts\",\"../../node_modules/.bun/csstype@3.2.3/node_modules/csstype/index.d.ts\",\"../../node_modules/.bun/@types+react@19.2.6/node_modules/@types/react/index.d.ts\",\"../../node_modules/.bun/@types+react@19.2.6/node_modules/@types/react/jsx-runtime.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/csp-provider/cspprovider.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/csp-provider/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/csp-provider/index.d.ts\",\"./src/base-ui/csp-provider.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/direction-provider/directioncontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/direction-provider/directionprovider.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/direction-provider/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/direction-provider/index.d.ts\",\"./src/base-ui/direction-provider.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/reason-parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/reasons.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/createbaseuieventdetails.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/types/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/types.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/merge-props/mergeprops.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/merge-props/index.d.ts\",\"./src/base-ui/merge-props.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/getstateattributesprops.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/use-render/userender.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/use-render/index.d.ts\",\"./src/base-ui/use-render.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/accordion/root/accordionroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/usetransitionstatus.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/collapsible/root/collapsibleroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/collapsible/root/usecollapsibleroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/accordion/item/accordionitem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/accordion/header/accordionheader.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/accordion/trigger/accordiontrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/accordion/panel/accordionpanel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/accordion/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/accordion/index.d.ts\",\"../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/clsx.d.mts\",\"../../node_modules/.bun/tailwind-merge@3.4.0/node_modules/tailwind-merge/dist/types.d.ts\",\"./src/lib/utils.ts\",\"../../node_modules/.bun/lucide-react@0.555.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/lucide-react.d.ts\",\"./src/components/accordion.tsx\",\"../../node_modules/.bun/reselect@5.1.1/node_modules/reselect/dist/reselect.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/store/createselector.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/fasthooks.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/store/store.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/store/usestore.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/store/reactstore.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/store/storeinspector.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/store/index.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/useenhancedclickhandler.d.ts\",\"../../node_modules/.bun/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.d.mts\",\"../../node_modules/.bun/@floating-ui+core@1.7.5/node_modules/@floating-ui/core/dist/floating-ui.core.d.mts\",\"../../node_modules/.bun/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.d.mts\",\"../../node_modules/.bun/@floating-ui+dom@1.7.6/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.mts\",\"../../node_modules/.bun/@floating-ui+react-dom@2.1.8+67f6792bdf102c28/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.d.mts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/utils/constants.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/useinteractions.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/components/floatingtreestore.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/components/floatingrootstore.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/components/floatingfocusmanager.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/userenderelement.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/components/floatingportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/useclientpoint.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usedismiss.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usefocus.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usehovershared.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usehover.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usehoverfloatinginteraction.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usehoverreferenceinteraction.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/uselistnavigation.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/userole.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usetypeahead.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usefloatingrootcontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/safepolygon.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/components/floatingtree.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/types.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/components/floatingdelaygroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/useclick.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usefloating.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/hooks/usesyncedfloatingrootcontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/floating-ui-react/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/popups/popuptriggermap.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/popups/store.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/popups/popupstoreutils.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/popups/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/root/dialogroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/resolvevaluelabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/root/ariacombobox.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/autocomplete/root/autocompleteroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/autocomplete/value/autocompletevalue.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/form/formcontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/form/form.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/form/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/root/fieldroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/useanchorpositioning.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/trigger/comboboxtrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/input/comboboxinput.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/input-group/comboboxinputgroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/icon/comboboxicon.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/clear/comboboxclear.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/list/comboboxlist.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/status/comboboxstatus.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/portal/comboboxportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/backdrop/comboboxbackdrop.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/positioner/comboboxpositioner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/popup/comboboxpopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/arrow/comboboxarrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/group/comboboxgroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/group-label/comboboxgrouplabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/item/comboboxitem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/row/comboboxrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/collection/comboboxcollection.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/empty/comboboxempty.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/separator/separator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/root/utils/usefilter.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/root/utils/usefiltereditems.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/autocomplete/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/autocomplete/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/avatar/root/avatarroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/avatar/image/useimageloadingstatus.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/avatar/image/avatarimage.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/avatar/fallback/avatarfallback.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/avatar/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/avatar/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/button/button.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/button/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/checkbox/root/checkboxroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/checkbox/indicator/checkboxindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/checkbox/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/checkbox/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/checkbox-group/checkboxgroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/checkbox-group/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/collapsible/trigger/collapsibletrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/collapsible/panel/collapsiblepanel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/collapsible/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/collapsible/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/root/comboboxroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/label/comboboxlabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/value/comboboxvalue.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/item-indicator/comboboxitemindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/chips/comboboxchips.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/chip/comboboxchip.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/chip-remove/comboboxchipremove.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/separator/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/combobox/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/arrow/menuarrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/backdrop/menubackdrop.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/store/menustore.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/root/menurootcontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menubar/menubarcontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/context-menu/root/contextmenurootcontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/store/menuhandle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/root/menuroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/checkbox-item/menucheckboxitem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/checkbox-item-indicator/menucheckboxitemindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/group/menugroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/group-label/menugrouplabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/item/menuitem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/link-item/menulinkitem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/popup/menupopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/portal/menuportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/positioner/menupositioner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/radio-group/menuradiogroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/radio-item/menuradioitem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/radio-item-indicator/menuradioitemindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/submenu-root/menusubmenurootcontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/submenu-root/menusubmenuroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/trigger/menutrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/viewport/menuviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/submenu-trigger/menusubmenutrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menu/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/context-menu/root/contextmenuroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/context-menu/trigger/contextmenutrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/context-menu/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/context-menu/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/backdrop/dialogbackdrop.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/close/dialogclose.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/description/dialogdescription.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/popup/dialogpopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/portal/dialogportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/viewport/dialogviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/title/dialogtitle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/trigger/dialogtrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/backdrop/drawerbackdrop.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/close/drawerclose.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/content/drawercontent.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/description/drawerdescription.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/indent/drawerindent.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/indent-background/drawerindentbackground.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/useswipedismiss.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/root/drawerroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/root/drawerrootcontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/popup/drawerpopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/portal/drawerportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/provider/drawerprovider.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/swipe-area/drawerswipearea.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/title/drawertitle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/trigger/drawertrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/viewport/drawerviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/drawer/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/label/fieldlabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/error/fielderror.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/description/fielddescription.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/control/fieldcontrol.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/validity/fieldvalidity.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/item/fielditem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/field/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/fieldset/root/fieldsetroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/fieldset/legend/fieldsetlegend.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/fieldset/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/fieldset/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/input/input.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/input/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menubar/menubar.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/menubar/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/meter/root/meterroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/meter/track/metertrack.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/meter/indicator/meterindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/meter/value/metervalue.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/meter/label/meterlabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/meter/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/meter/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/root/navigationmenuroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/list/navigationmenulist.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/item/navigationmenuitem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/content/navigationmenucontent.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/trigger/navigationmenutrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/portal/navigationmenuportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/positioner/navigationmenupositioner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/viewport/navigationmenuviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/backdrop/navigationmenubackdrop.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/popup/navigationmenupopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/arrow/navigationmenuarrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/link/navigationmenulink.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/icon/navigationmenuicon.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/navigation-menu/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/utils/types.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/root/numberfieldroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/group/numberfieldgroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/increment/numberfieldincrement.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/decrement/numberfielddecrement.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/input/numberfieldinput.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/scrub-area/numberfieldscrubarea.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/scrub-area-cursor/numberfieldscrubareacursor.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/number-field/index.d.ts\",\"../../node_modules/.bun/@base-ui+utils@0.2.6+be91ed6fd389d88f/node_modules/@base-ui/utils/esm/usetimeout.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/store/popoverstore.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/store/popoverhandle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/root/popoverroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/trigger/popovertrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/portal/popoverportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/positioner/popoverpositioner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/popup/popoverpopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/arrow/popoverarrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/backdrop/popoverbackdrop.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/title/popovertitle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/description/popoverdescription.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/close/popoverclose.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/viewport/popoverviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/popover/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/store/previewcardstore.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/store/previewcardhandle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/root/previewcardroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/utils/floatingportallite.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/portal/previewcardportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/trigger/previewcardtrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/positioner/previewcardpositioner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/popup/previewcardpopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/arrow/previewcardarrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/backdrop/previewcardbackdrop.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/viewport/previewcardviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/preview-card/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/progress/root/progressroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/progress/track/progresstrack.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/progress/indicator/progressindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/progress/value/progressvalue.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/progress/label/progresslabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/progress/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/progress/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/radio/root/radioroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/radio/indicator/radioindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/radio/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/radio/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/radio-group/radiogroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/radio-group/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/scroll-area/root/scrollarearoot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/scroll-area/viewport/scrollareaviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/scroll-area/scrollbar/scrollareascrollbar.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/scroll-area/content/scrollareacontent.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/scroll-area/thumb/scrollareathumb.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/scroll-area/corner/scrollareacorner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/scroll-area/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/scroll-area/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/root/selectroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/label/selectlabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/trigger/selecttrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/value/selectvalue.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/icon/selecticon.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/portal/selectportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/backdrop/selectbackdrop.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/positioner/selectpositioner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/popup/selectpopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/list/selectlist.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/item/selectitem.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/item-indicator/selectitemindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/item-text/selectitemtext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/arrow/selectarrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/scroll-down-arrow/selectscrolldownarrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/scroll-up-arrow/selectscrolluparrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/group/selectgroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/group-label/selectgrouplabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/select/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/root/sliderroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/label/sliderlabel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/value/slidervalue.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/control/slidercontrol.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/track/slidertrack.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/labelable-provider/labelablecontext.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/thumb/sliderthumb.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/indicator/sliderindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/slider/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/switch/root/switchroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/switch/thumb/switchthumb.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/switch/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/switch/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tabs/tab/tabstab.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tabs/root/tabsroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tabs/indicator/tabsindicator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tabs/panel/tabspanel.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tabs/list/tabslist.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tabs/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tabs/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/positioner/toastpositioner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/usetoastmanager.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/createtoastmanager.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/provider/toastprovider.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/viewport/toastviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/root/toastroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/content/toastcontent.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/description/toastdescription.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/title/toasttitle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/close/toastclose.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/action/toastaction.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/portal/toastportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/arrow/toastarrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toast/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toggle/toggle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toggle/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toggle-group/togglegroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toggle-group/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toolbar/separator/toolbarseparator.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toolbar/root/toolbarroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toolbar/group/toolbargroup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toolbar/button/toolbarbutton.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toolbar/link/toolbarlink.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toolbar/input/toolbarinput.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toolbar/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/toolbar/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/store/tooltipstore.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/store/tooltiphandle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/root/tooltiproot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/trigger/tooltiptrigger.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/portal/tooltipportal.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/positioner/tooltippositioner.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/popup/tooltippopup.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/arrow/tooltiparrow.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/provider/tooltipprovider.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/viewport/tooltipviewport.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/tooltip/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/index.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/store/dialogstore.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/dialog/store/dialoghandle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/alert-dialog/root/alertdialogroot.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/alert-dialog/handle.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/alert-dialog/index.parts.d.ts\",\"../../node_modules/.bun/@base-ui+react@1.3.0+be91ed6fd389d88f/node_modules/@base-ui/react/esm/alert-dialog/index.d.ts\",\"./src/components/alert-dialog.tsx\",\"../../node_modules/.bun/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/types.d.ts\",\"../../node_modules/.bun/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.d.ts\",\"./src/components/alert.tsx\",\"./src/components/input.tsx\",\"./src/components/scroll-area.tsx\",\"./src/components/autocomplete.tsx\",\"./src/components/avatar.tsx\",\"./src/components/badge.tsx\",\"./src/components/breadcrumb.tsx\",\"./src/components/button.tsx\",\"../../node_modules/.bun/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/constants/index.d.ts\",\"../../node_modules/.bun/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/date/index.d.ts\",\"../../node_modules/.bun/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/date/mini.d.ts\",\"../../node_modules/.bun/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/tz/index.d.ts\",\"../../node_modules/.bun/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/tzoffset/index.d.ts\",\"../../node_modules/.bun/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/tzscan/index.d.ts\",\"../../node_modules/.bun/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/tzname/index.d.ts\",\"../../node_modules/.bun/@date-fns+tz@1.4.1/node_modules/@date-fns/tz/index.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/constants.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/types.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/fp/types.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/types.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/add.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addbusinessdays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/adddays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addhours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addisoweekyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addmilliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addminutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addmonths.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addquarters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addweeks.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/addyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/areintervalsoverlapping.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/clamp.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/closestindexto.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/closestto.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/compareasc.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/comparedesc.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/constructfrom.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/constructnow.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/daystoweeks.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinbusinessdays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceincalendardays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceincalendarisoweekyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceincalendarisoweeks.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceincalendarmonths.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceincalendarquarters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceincalendarweeks.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceincalendaryears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceindays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinhours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinisoweekyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinmilliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinminutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinmonths.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinquarters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinweeks.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/differenceinyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachdayofinterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachhourofinterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachminuteofinterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachmonthofinterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachquarterofinterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachweekofinterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachweekendofinterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachweekendofmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachweekendofyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/eachyearofinterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofdecade.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofhour.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofisoweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofisoweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofminute.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofquarter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofsecond.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endoftoday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endoftomorrow.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/endofyesterday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/_lib/format/formatters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/_lib/format/longformatters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/format.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatdistance.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatdistancestrict.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatdistancetonow.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatdistancetonowstrict.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatduration.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatiso.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatiso9075.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatisoduration.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatrfc3339.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatrfc7231.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/formatrelative.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/fromunixtime.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getdate.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getdayofyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getdaysinmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getdaysinyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getdecade.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/_lib/defaultoptions.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getdefaultoptions.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/gethours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getisoday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getisoweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getisoweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getisoweeksinyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getmilliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getminutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getoverlappingdaysinintervals.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getquarter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/gettime.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getunixtime.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getweekofmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getweeksinmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/getyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/hourstomilliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/hourstominutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/hourstoseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/interval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/intervaltoduration.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/intlformat.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/intlformatdistance.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isafter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isbefore.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isdate.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isequal.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isexists.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isfirstdayofmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isfriday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isfuture.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/islastdayofmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isleapyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/ismatch.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/ismonday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/ispast.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issameday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issamehour.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issameisoweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issameisoweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issameminute.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issamemonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issamequarter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issamesecond.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issameweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issameyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issaturday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/issunday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthishour.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthisisoweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthisminute.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthismonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthisquarter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthissecond.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthisweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthisyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isthursday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/istoday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/istomorrow.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/istuesday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isvalid.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/iswednesday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isweekend.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/iswithininterval.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/isyesterday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/lastdayofdecade.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/lastdayofisoweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/lastdayofisoweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/lastdayofmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/lastdayofquarter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/lastdayofweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/lastdayofyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/_lib/format/lightformatters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/lightformat.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/max.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/milliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/millisecondstohours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/millisecondstominutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/millisecondstoseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/min.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/minutestohours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/minutestomilliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/minutestoseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/monthstoquarters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/monthstoyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/nextday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/nextfriday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/nextmonday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/nextsaturday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/nextsunday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/nextthursday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/nexttuesday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/nextwednesday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/parse/_lib/types.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/parse/_lib/setter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/parse/_lib/parser.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/parse/_lib/parsers.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/parse.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/parseiso.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/parsejson.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/previousday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/previousfriday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/previousmonday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/previoussaturday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/previoussunday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/previousthursday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/previoustuesday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/previouswednesday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/quarterstomonths.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/quarterstoyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/roundtonearesthours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/roundtonearestminutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/secondstohours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/secondstomilliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/secondstominutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/set.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setdate.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setdayofyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setdefaultoptions.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/sethours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setisoday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setisoweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setisoweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setmilliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setminutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setquarter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/setyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofdecade.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofhour.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofisoweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofisoweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofminute.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofmonth.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofquarter.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofsecond.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startoftoday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startoftomorrow.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofweek.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofweekyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofyear.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/startofyesterday.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/sub.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subbusinessdays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subdays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subhours.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subisoweekyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/submilliseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subminutes.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/submonths.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subquarters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subseconds.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subweeks.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/subyears.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/todate.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/transpose.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/weekstodays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/yearstodays.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/yearstomonths.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/yearstoquarters.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/index.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/af.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ar.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ar-dz.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ar-eg.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ar-ma.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ar-sa.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ar-tn.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/az.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/be.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/be-tarask.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/bg.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/bn.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/bs.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ca.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ckb.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/cs.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/cy.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/da.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/de.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/de-at.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/el.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/en-au.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/en-ca.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/en-gb.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/en-ie.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/en-in.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/en-nz.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/en-us.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/en-za.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/eo.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/es.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/et.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/eu.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/fa-ir.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/fi.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/fr.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/fr-ca.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/fr-ch.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/fy.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/gd.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/gl.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/gu.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/he.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/hi.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/hr.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ht.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/hu.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/hy.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/id.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/is.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/it.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/it-ch.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ja.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ja-hira.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ka.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/kk.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/km.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/kn.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ko.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/lb.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/lt.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/lv.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/mk.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/mn.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ms.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/mt.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/nb.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/nl.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/nl-be.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/nn.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/oc.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/pl.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/pt.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/pt-br.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ro.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ru.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/se.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/sk.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/sl.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/sq.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/sr.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/sr-latn.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/sv.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ta.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/te.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/th.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/tr.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/ug.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/uk.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/uz.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/uz-cyrl.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/vi.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/zh-cn.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/zh-hk.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale/zh-tw.d.ts\",\"../../node_modules/.bun/date-fns@4.1.0/node_modules/date-fns/locale.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/button.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/captionlabel.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/chevron.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/monthcaption.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/week.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labeldaybutton.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelgrid.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelgridcell.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelmonthdropdown.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelnav.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelnext.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelprevious.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelweekday.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelweeknumber.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelweeknumberheader.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/labelyeardropdown.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/labels/index.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/ui.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/classes/calendarweek.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/classes/calendarmonth.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/types/props.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/types/selection.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/usedaypicker.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/types/deprecated.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/types/index.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/day.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/daybutton.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/dropdown.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/dropdownnav.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/footer.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/month.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/monthgrid.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/months.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/monthsdropdown.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/nav.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/nextmonthbutton.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/option.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/previousmonthbutton.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/root.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/select.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/weekday.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/weekdays.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/weeknumber.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/weeknumberheader.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/weeks.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/yearsdropdown.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/components/custom-components.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/formatters/formatcaption.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/formatters/formatday.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/formatters/formatmonthdropdown.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/formatters/formatweekdayname.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/formatters/formatweeknumber.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/formatters/formatweeknumberheader.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/formatters/formatyeardropdown.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/formatters/index.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/types/shared.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/locale/en-us.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/classes/datelib.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/classes/calendarday.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/classes/index.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/daypicker.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/helpers/getdefaultclassnames.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/helpers/index.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/utils/addtorange.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/utils/datematchmodifiers.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/utils/rangecontainsdayofweek.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/utils/rangecontainsmodifiers.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/utils/rangeincludesdate.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/utils/rangeoverlaps.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/utils/typeguards.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/utils/index.d.ts\",\"../../node_modules/.bun/react-day-picker@9.13.0+83d5fd7b249dbeef/node_modules/react-day-picker/dist/esm/index.d.ts\",\"./src/components/calendar.tsx\",\"./src/components/card.tsx\",\"./src/components/checkbox-group.tsx\",\"./src/components/checkbox.tsx\",\"./src/components/collapsible.tsx\",\"./src/components/combobox.tsx\",\"./src/components/command.tsx\",\"./src/components/dialog.tsx\",\"./src/components/drawer.tsx\",\"./src/components/empty.tsx\",\"./src/components/field.tsx\",\"./src/components/fieldset.tsx\",\"./src/components/form.tsx\",\"./src/components/frame.tsx\",\"./src/components/separator.tsx\",\"./src/components/group.tsx\",\"./src/components/textarea.tsx\",\"./src/components/input-group.tsx\",\"./src/components/kbd.tsx\",\"./src/components/label.tsx\",\"./src/components/menu.tsx\",\"./src/components/meter.tsx\",\"./src/components/number-field.tsx\",\"./src/components/pagination.tsx\",\"./src/components/popover.tsx\",\"./src/components/preview-card.tsx\",\"./src/components/progress.tsx\",\"./src/components/radio-group.tsx\",\"./src/components/select.tsx\",\"./src/components/sheet.tsx\",\"./src/components/skeleton.tsx\",\"./src/components/tooltip.tsx\",\"./src/hooks/use-media-query.ts\",\"./src/components/sidebar.tsx\",\"./src/components/slider.tsx\",\"./src/components/spinner.tsx\",\"./src/components/switch.tsx\",\"./src/components/table.tsx\",\"./src/components/tabs.tsx\",\"./src/components/toast.tsx\",\"./src/components/toggle.tsx\",\"./src/components/toggle-group.tsx\",\"./src/components/toolbar.tsx\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/compiled/@next/font/dist/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/compiled/@next/font/dist/local/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/font/local/index.d.ts\",\"./src/fonts/index.ts\",\"./src/hooks/use-copy-to-clipboard.ts\",\"./src/lib/config.ts\",\"../../node_modules/.bun/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts\",\"../../node_modules/.bun/@types+hast@3.0.4/node_modules/@types/hast/index.d.ts\",\"../../node_modules/.bun/@shikijs+vscode-textmate@10.0.2/node_modules/@shikijs/vscode-textmate/dist/index.d.ts\",\"../../node_modules/.bun/@shikijs+types@3.15.0/node_modules/@shikijs/types/dist/index.d.mts\",\"../../node_modules/.bun/stringify-entities@4.0.4/node_modules/stringify-entities/lib/util/format-smart.d.ts\",\"../../node_modules/.bun/stringify-entities@4.0.4/node_modules/stringify-entities/lib/core.d.ts\",\"../../node_modules/.bun/stringify-entities@4.0.4/node_modules/stringify-entities/lib/index.d.ts\",\"../../node_modules/.bun/stringify-entities@4.0.4/node_modules/stringify-entities/index.d.ts\",\"../../node_modules/.bun/property-information@7.1.0/node_modules/property-information/lib/util/info.d.ts\",\"../../node_modules/.bun/property-information@7.1.0/node_modules/property-information/lib/find.d.ts\",\"../../node_modules/.bun/property-information@7.1.0/node_modules/property-information/lib/hast-to-react.d.ts\",\"../../node_modules/.bun/property-information@7.1.0/node_modules/property-information/lib/normalize.d.ts\",\"../../node_modules/.bun/property-information@7.1.0/node_modules/property-information/index.d.ts\",\"../../node_modules/.bun/hast-util-to-html@9.0.5/node_modules/hast-util-to-html/lib/index.d.ts\",\"../../node_modules/.bun/hast-util-to-html@9.0.5/node_modules/hast-util-to-html/index.d.ts\",\"../../node_modules/.bun/@shikijs+core@3.15.0/node_modules/@shikijs/core/dist/index.d.mts\",\"../../node_modules/.bun/@shikijs+transformers@3.15.0/node_modules/@shikijs/transformers/dist/index.d.mts\",\"../../node_modules/.bun/shiki@3.15.0/node_modules/shiki/dist/langs.d.mts\",\"../../node_modules/.bun/shiki@3.15.0/node_modules/shiki/dist/themes.d.mts\",\"../../node_modules/.bun/shiki@3.15.0/node_modules/shiki/dist/bundle-full.d.mts\",\"../../node_modules/.bun/@shikijs+core@3.15.0/node_modules/@shikijs/core/dist/types.d.mts\",\"../../node_modules/.bun/shiki@3.15.0/node_modules/shiki/dist/types.d.mts\",\"../../node_modules/.bun/oniguruma-to-es@4.3.3/node_modules/oniguruma-to-es/dist/esm/subclass.d.ts\",\"../../node_modules/.bun/oniguruma-to-es@4.3.3/node_modules/oniguruma-to-es/dist/esm/index.d.ts\",\"../../node_modules/.bun/@shikijs+engine-javascript@3.15.0/node_modules/@shikijs/engine-javascript/dist/shared/engine-javascript.cdednu-m.d.mts\",\"../../node_modules/.bun/@shikijs+engine-javascript@3.15.0/node_modules/@shikijs/engine-javascript/dist/engine-raw.d.mts\",\"../../node_modules/.bun/@shikijs+engine-javascript@3.15.0/node_modules/@shikijs/engine-javascript/dist/index.d.mts\",\"../../node_modules/.bun/@shikijs+engine-oniguruma@3.15.0/node_modules/@shikijs/engine-oniguruma/dist/chunk-index.d.d.mts\",\"../../node_modules/.bun/@shikijs+engine-oniguruma@3.15.0/node_modules/@shikijs/engine-oniguruma/dist/index.d.mts\",\"../../node_modules/.bun/shiki@3.15.0/node_modules/shiki/dist/index.d.mts\",\"./src/lib/highlight-code.ts\",\"../../node_modules/.bun/@hugeicons+core-free-icons@2.0.0/node_modules/@hugeicons/core-free-icons/dist/types/index.d.ts\",\"../../node_modules/.bun/@hugeicons+react@1.1.1+83d5fd7b249dbeef/node_modules/@hugeicons/react/dist/types/hugeiconsicon.d.ts\",\"../../node_modules/.bun/@hugeicons+react@1.1.1+83d5fd7b249dbeef/node_modules/@hugeicons/react/dist/types/index.d.ts\",\"./src/shared/copy-button.tsx\",\"./src/shared/icons.tsx\",\"./src/shared/code-block.tsx\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/link.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/link.d.ts\",\"./src/shared/github-link.tsx\",\"./src/shared/mobile-nav.tsx\",\"../../node_modules/.bun/next-themes@0.4.6+01910cb400550fe0/node_modules/next-themes/dist/index.d.ts\",\"./src/shared/mode-switcher.tsx\",\"./src/shared/page-header.tsx\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/get-page-files.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/compatibility/iterators.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/globals.typedarray.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/buffer.buffer.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/globals.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/web-globals/abortcontroller.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/web-globals/crypto.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/web-globals/domexception.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/web-globals/events.d.ts\",\"../../node_modules/.bun/buffer@5.7.1/node_modules/buffer/index.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/utility.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/header.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/readable.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/fetch.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/formdata.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/connector.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/client-stats.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/client.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/errors.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/dispatcher.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/global-dispatcher.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/global-origin.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/pool-stats.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/pool.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/handlers.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/balanced-pool.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/h2c-client.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/agent.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/mock-interceptor.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/mock-call-history.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/mock-agent.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/mock-client.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/mock-pool.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/snapshot-agent.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/mock-errors.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/proxy-agent.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/env-http-proxy-agent.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/retry-handler.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/retry-agent.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/api.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/cache-interceptor.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/interceptors.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/util.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/cookies.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/patch.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/websocket.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/eventsource.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/diagnostics-channel.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/content-type.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/cache.d.ts\",\"../../node_modules/.bun/undici-types@7.16.0/node_modules/undici-types/index.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/web-globals/fetch.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/web-globals/navigator.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/web-globals/storage.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/web-globals/streams.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/assert.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/assert/strict.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/async_hooks.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/buffer.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/child_process.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/cluster.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/console.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/constants.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/crypto.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/dgram.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/diagnostics_channel.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/dns.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/dns/promises.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/domain.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/events.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/fs.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/fs/promises.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/http.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/http2.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/https.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/inspector.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/inspector.generated.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/module.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/net.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/os.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/path.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/perf_hooks.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/process.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/punycode.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/querystring.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/readline.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/readline/promises.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/repl.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/sea.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/sqlite.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/stream.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/stream/promises.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/stream/consumers.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/stream/web.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/string_decoder.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/test.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/timers.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/timers/promises.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/tls.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/trace_events.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/tty.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/url.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/util.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/v8.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/vm.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/wasi.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/worker_threads.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/zlib.d.ts\",\"../../node_modules/.bun/@types+node@24.10.1/node_modules/@types/node/index.d.ts\",\"../../node_modules/.bun/@types+react@19.2.6/node_modules/@types/react/canary.d.ts\",\"../../node_modules/.bun/@types+react@19.2.6/node_modules/@types/react/experimental.d.ts\",\"../../node_modules/.bun/@types+react-dom@19.2.3+b8a893e96d5b32de/node_modules/@types/react-dom/index.d.ts\",\"../../node_modules/.bun/@types+react-dom@19.2.3+b8a893e96d5b32de/node_modules/@types/react-dom/canary.d.ts\",\"../../node_modules/.bun/@types+react-dom@19.2.3+b8a893e96d5b32de/node_modules/@types/react-dom/experimental.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/fallback.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/compiled/webpack/webpack.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/modern-browserslist-target.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/entry-constants.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/constants.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/config.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/load-custom-routes.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/image-config.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/plugins/subresource-integrity-plugin.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/body-streams.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-kind.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-definitions/route-definition.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-matches/route-match.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/app-router-headers.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/cache-control.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/cache-handlers/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/resume-data-cache/cache-store.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/resume-data-cache/resume-data-cache.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/constants.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/render-result.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/response-cache/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/response-cache/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/userspace/pages/pages-dev-overlay-setup.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/router-reducer/router-reducer-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/flight-data-helpers.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/segment-cache/cache-key.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/router-reducer/fetch-server-response.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/app-router-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/static-paths/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-definitions/app-page-route-definition.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/plugins/flight-manifest-plugin.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/instrumentation/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/setup-exception-listeners.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/worker.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/bundler.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/rendering-mode.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/router-utils/build-prefetch-segment-data-route.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/require-hook.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/experimental/ppr.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/page-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/segment-config/app/app-segment-config.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/segment-config/pages/pages-segment-config.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/analysis/get-page-static-info.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/loaders/get-module-build-info.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/plugins/middleware-plugin.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-polyfill-crypto.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-baseline.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/error-inspect.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/console-file.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/console-exit.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/console-dim.external.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/unhandled-rejection.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/random.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/date.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/web-crypto.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment-extensions/node-crypto.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/node-environment.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/page-extensions-type.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/app-page/module.compiled.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-definitions/app-route-route-definition.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/i18n-provider.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/next-url.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/compiled/@edge-runtime/cookies/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/cookies.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/request.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/deep-readonly.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/router/utils/middleware-route-matcher.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/plugins/next-font-manifest-plugin.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-definitions/locale-route-definition.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-definitions/pages-route-definition.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/mitt.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/with-router.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/router.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/route-loader.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/page-loader.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/bloom-filter.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/router/router.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/router-context.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/loadable-context.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/loadable.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/image-config-context.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/hooks-client-context.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/head-manager-context.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/app-router-context.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/server-inserted-html.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/pages/vendored/contexts/entrypoints.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/pages/module.compiled.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/templates/pages.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/pages/module.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/render.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-definitions/pages-api-route-definition.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-matches/pages-api-route-match.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-matchers/route-matcher.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-matcher-providers/route-matcher-provider.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-matcher-managers/route-matcher-manager.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/normalizers/normalizer.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/normalizers/locale-route-normalizer.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/normalizers/request/pathname-normalizer.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/normalizers/request/suffix.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/normalizers/request/rsc.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/normalizers/request/prefetch-rsc.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/normalizers/request/next-data.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/after/builtin-request-context.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/normalizers/request/segment-prefix-rsc.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/base-server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/use-cache/cache-life.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/async-storage/work-store.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/http.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/hooks-server-context.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/app-route/shared-modules.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/redirect-status-code.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/redirect-error.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/adapters/request-cookies.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/async-storage/draft-mode-provider.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/adapters/headers.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/cache-signal.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/dynamic-rendering.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/work-unit-async-storage-instance.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/lazy-result.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/implicit-tags.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/staged-rendering.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/work-unit-async-storage.external.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/templates/app-route.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/action-async-storage-instance.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/action-async-storage.external.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/app-route/module.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/app-route/module.compiled.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/segment-config/app/app-segments.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/swc/generated-native.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/swc/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/utils.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/turborepo-access-trace/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/turborepo-access-trace/result.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/turborepo-access-trace/helpers.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/turborepo-access-trace/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/export/routes/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/export/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/export/worker.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/worker.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/coalesced-function.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/router-utils/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/trace/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/trace/trace.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/trace/shared.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/trace/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/load-jsconfig.d.ts\",\"../../node_modules/.bun/@next+env@16.0.9/node_modules/@next/env/dist/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/plugins/telemetry-plugin/use-cache-tracker-utils.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/plugins/telemetry-plugin/telemetry-plugin.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/telemetry/storage.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/build-context.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack-config.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/dev/parse-version-info.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/shared/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/dev/dev-indicator-server-state.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/dev-overlay/cache-indicator.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/parse-stack.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/server/shared.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/shared/stack-frame.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/dev-overlay/utils/get-error-by-type.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/dev-overlay/container/runtime-error/render-error.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/dev-overlay/shared.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/dev/debug-channel.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/dev/hot-reloader-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/fetch-event.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/response.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/segment-config/middleware/middleware-config.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/router/utils/parse-url.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/base-http/node.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/async-callback-set.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/router/utils/route-regex.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/router/utils/route-matcher.d.ts\",\"../../node_modules/.bun/sharp@0.34.4/node_modules/sharp/lib/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/image-optimizer.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/next-server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/lru-cache.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/dev-bundler-service.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/dev/static-paths-worker.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/dev/next-dev-server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/next.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/render-server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/router-server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/router/utils/path-match.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/router-utils/filesystem.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/router-utils/router-server-context.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/route-module.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/load-components.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/adapter.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/loaders/metadata/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/webpack/loaders/next-app-loader/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/app-dir-module.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/router/utils/parse-relative-url.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/app-render.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/app-page/vendored/contexts/entrypoints.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/error-boundary.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/layout-router.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/render-from-template-context.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/client-page.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/client-segment.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/request/search-params.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/http-access-fallback/error-boundary.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/alternative-urls-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/extra-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/metadata-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/manifest-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/opengraph-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/twitter-types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/metadata-interface.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/resolvers.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/types/icons.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/resolve-metadata.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/metadata/metadata.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/lib/framework/boundary-components.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/rsc/preloads.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/rsc/postpone.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/rsc/taint.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/segment-cache/segment-value-encoding.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/collect-segment-data.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/next-devtools/userspace/app/segment-explorer-node.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/entry-base.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/templates/app-page.d.ts\",\"../../node_modules/.bun/@types+react@19.2.6/node_modules/@types/react/jsx-dev-runtime.d.ts\",\"../../node_modules/.bun/@types+react@19.2.6/node_modules/@types/react/compiler-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/app-page/vendored/rsc/entrypoints.d.ts\",\"../../node_modules/.bun/@types+react-dom@19.2.3+b8a893e96d5b32de/node_modules/@types/react-dom/client.d.ts\",\"../../node_modules/.bun/@types+react-dom@19.2.3+b8a893e96d5b32de/node_modules/@types/react-dom/static.d.ts\",\"../../node_modules/.bun/@types+react-dom@19.2.3+b8a893e96d5b32de/node_modules/@types/react-dom/server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/app-page/vendored/ssr/entrypoints.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/route-modules/app-page/module.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/request/fallback-params.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/request-meta.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/cli/next-test.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/config-shared.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/base-http/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/api-utils/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/build/adapter/build-complete.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/html-context.shared-runtime.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/utils.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/lib/incremental-cache/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/after/after.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/after/after-context.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/work-async-storage-instance.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/app-render/work-async-storage.external.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/request/params.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/readonly-url-search-params.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/unrecognized-action-error.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/redirect.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/not-found.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/forbidden.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/unauthorized.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/unstable-rethrow.server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/unstable-rethrow.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/navigation.react-server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/components/navigation.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/navigation.d.ts\",\"./src/shared/product-label.tsx\",\"./src/shared/products-dropdown.tsx\",\"./src/shared/site-cta.tsx\",\"./src/shared/site-footer.tsx\",\"./src/shared/site-header.tsx\",\"./src/shared/theme-provider.tsx\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/styled-jsx/types/css.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/styled-jsx/types/macro.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/styled-jsx/types/style.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/styled-jsx/types/global.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/styled-jsx/types/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/pages/_app.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/app.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/unstable-cache.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/revalidate.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/unstable-no-store.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/use-cache/cache-tag.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/cache.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/pages/_document.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/document.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/dynamic.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dynamic.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/pages/_error.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/error.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/head.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/head.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/request/cookies.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/request/headers.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/request/draft-mode.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/headers.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/get-img-props.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/image-component.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/shared/lib/image-external.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/image.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/router.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/client/script.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/script.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/user-agent.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/compiled/@edge-runtime/primitives/url.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/web/spec-extension/image-response.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/compiled/@vercel/og/satori/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/compiled/@vercel/og/emoji/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/compiled/@vercel/og/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/after/index.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/dist/server/request/connection.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/server.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/types/global.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/types/compiled.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/types.d.ts\",\"../../node_modules/.bun/next@16.0.9+67f6792bdf102c28/node_modules/next/index.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/globals.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/s3.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/fetch.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/bun.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/extensions.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/devserver.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/ffi.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/html-rewriter.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/jsc.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/sqlite.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/vendor/expect-type/utils.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/vendor/expect-type/overloads.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/vendor/expect-type/branding.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/vendor/expect-type/messages.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/vendor/expect-type/index.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/test.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/wasm.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/overrides.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/deprecated.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/redis.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/shell.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/serve.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/sql.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/security.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/bun.ns.d.ts\",\"../../node_modules/.bun/bun-types@1.3.4/node_modules/bun-types/index.d.ts\"],\"fileIdsList\":[[64,79,91,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[87,91,92,93,94,95,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[87,91,92,93,94,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,77,79,87,90,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,87,88,91,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,77,79,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[446,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[447,449,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[238,239,240,241,242,243,244,245,446,447,448,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,77,146,446,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[149,150,156,157,158,161,162,163,164,165,166,167,168,169,170,172,173,175,177,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[149,150,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,148,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,179,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,179,180,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[179,181,182,183,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[179,181,182,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[185,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,77,79,154,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[191,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[187,188,189,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[187,188,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,187,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[89,193,194,195,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[89,193,194,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,89,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,77,79,90,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,88,89,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,89,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,155,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,175,197,198,199,200,201,202,203,205,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,175,176,197,198,199,200,201,202,203,204,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,154,155,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,154,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,110,155,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,141,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,77,147,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[207,208,215,216,217,218,219,220,221,222,223,224,225,226,228,231,234,235,236,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[174,207,208,215,216,217,218,219,220,221,222,223,224,225,226,228,231,234,235,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,78,214,233,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,234,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[66,67,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[66,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[146,238,239,240,241,242,243,244,245,246,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[146,238,239,240,241,242,243,244,245,446,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,110,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,76,77,145,446,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[445,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,88,109,110,119,141,145,146,444,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,446,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,70,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[71,72,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[70,71,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[248,249,250,251,252,253,255,257,258,259,260,261,262,263,264,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[248,249,250,251,252,253,255,257,258,259,260,261,262,263,446,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,110,256,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,76,77,145,256,446,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,254,255,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,254,256,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,154,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[154,266,267,268,269,270,271,272,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[154,266,267,268,269,270,271,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,153,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,88,154,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[274,275,276,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[274,275,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,110,118,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,121,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,77,109,136,145,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,118,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[76,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[118,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[77,119,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[126,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,118,126,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,116,136,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[78,109,119,145,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[115,117,118,120,122,123,124,125,127,128,129,130,131,132,133,134,135,136,137,138,139,140,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[126,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,77,115,117,118,119,120,122,123,124,125,126,127,128,129,130,131,132,133,134,135,137,141,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,77,79,151,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,152,154,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[152,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[68,73,78,81,85,96,153,178,184,186,190,192,196,204,206,233,237,247,265,273,277,279,281,288,303,313,329,342,349,353,355,363,383,393,397,404,419,421,423,431,443,450,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[278,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,273,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,214,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[207,208,214,215,216,217,218,219,220,221,222,223,224,225,226,228,229,230,231,232,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[174,207,208,213,214,215,216,217,218,219,220,221,222,223,224,225,226,228,229,230,231,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,76,77,145,209,210,211,212,213,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,209,214,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[209,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,109,118,119,141,145,214,233,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,214,227,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,209,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,213,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[280,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,214,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[80,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[282,283,284,285,286,287,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[282,283,284,285,286,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,282,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[289,290,291,292,293,294,295,296,297,298,299,300,301,302,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[289,290,291,292,293,294,295,296,297,298,299,300,301,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,155,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,305,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[305,306,307,308,309,310,311,312,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[305,306,307,308,309,310,311,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,77,79,154,304,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[317,318,319,320,321,322,323,324,325,326,327,328,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[316,317,318,319,320,321,322,323,324,325,326,327,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,76,77,145,316,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[315,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,88,109,110,119,141,145,314,317,329,444,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,316,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[332,334,335,336,337,338,339,341,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[331,332,334,335,336,337,338,339,340,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,333,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,76,77,145,331,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[330,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,88,109,119,141,145,332,444,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,331,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[343,344,345,346,347,348,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[343,344,345,346,347,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,343,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[354,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[350,351,352,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[350,351,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,356,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[356,357,358,359,360,361,362,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[356,357,358,359,360,361,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[174,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[174,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,384,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[384,385,386,387,388,390,391,392,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[384,385,386,387,388,390,391,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,384,389,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[394,395,396,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[394,395,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,78,79,154,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,394,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[398,399,400,401,402,403,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[398,399,400,401,402,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,398,399,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,399,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,398,399,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,76,77,79,398,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[406,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[405,406,407,408,409,410,411,412,413,414,415,416,417,418,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[405,406,407,408,409,410,411,412,413,414,415,416,417,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,155,406,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,407,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,88,406,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,405,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[422,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[420,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,425,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[424,425,426,427,428,429,430,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[79,424,425,426,427,428,429,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,204,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[434,435,436,437,438,439,440,442,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[433,434,435,436,437,438,439,440,441,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,76,77,145,433,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[432,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,88,109,119,141,145,434,443,444,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,433,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,77,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[79,84,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,79,83,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[76,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[142,143,144,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,88,109,143,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[79,88,119,141,142,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[75,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,78,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,111,141,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[102,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[103,105,106,107,108,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[105,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,105,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[104,105,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[462,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[463,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[462,463,464,465,466,467,468,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[111,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[112,113,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,114,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[977,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[946,948,959,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[947,948,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[948,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[947,948,968,969,970,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[947,948,968,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[972,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[946,948,960,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[946,947,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[945,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1044,1045,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1046,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1052,1064,1065,1082,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1048,1053,1058,1064,1065,1067,1079,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1048,1049,1058,1064,1065,1067,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1050,1064,1065,1091,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1051,1052,1059,1064,1065,1068,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1052,1064,1065,1079,1087,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1053,1055,1058,1064,1065,1067,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1046,1047,1054,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1055,1056,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1057,1058,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1046,1047,1058,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1058,1059,1060,1064,1065,1079,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1058,1059,1060,1064,1065,1074,1079,1082,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1039,1047,1055,1058,1061,1064,1065,1067,1079,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1058,1059,1061,1062,1064,1065,1067,1079,1087,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1063,1064,1065,1079,1087,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[990,991,992,993,994,995,996,997,1040,1041,1042,1043,1044,1045,1046,1047,1048,1049,1050,1051,1052,1053,1054,1055,1056,1057,1058,1059,1060,1061,1062,1063,1064,1065,1066,1067,1068,1069,1070,1071,1072,1073,1074,1075,1076,1077,1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,1091,1092,1093,1094,1095,1096,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1058,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1066,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1055,1058,1064,1065,1067,1079,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1068,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1069,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1046,1047,1064,1065,1070,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1044,1045,1046,1047,1048,1049,1050,1051,1052,1053,1054,1055,1056,1057,1058,1059,1060,1061,1062,1063,1064,1065,1066,1067,1068,1069,1070,1071,1072,1073,1074,1075,1076,1077,1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,1091,1092,1093,1094,1095,1096,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1072,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1073,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1058,1064,1065,1074,1075,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1074,1076,1091,1093,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1059,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1058,1064,1065,1079,1080,1082,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1081,1082,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1079,1080,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1082,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1083,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1044,1047,1064,1065,1079,1084,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1058,1064,1065,1085,1086,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1085,1086,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1052,1064,1065,1067,1079,1087,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1088,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1067,1089,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1073,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1052,1064,1065,1091,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1079,1092,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1066,1093,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1094,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1052,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1039,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1095,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1039,1047,1058,1060,1064,1065,1070,1079,1082,1090,1092,1093,1095,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1079,1096,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1098,1099,1100,1102,1345,1374,1407,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1098,1099,1100,1101,1333,1345,1374,1407,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1098,1099,1101,1102,1345,1374,1407,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1102,1333,1334,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1102,1333,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1099,1100,1101,1102,1345,1374,1407,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1098,1100,1101,1102,1345,1374,1407,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[62,63,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1039,1047,1052,1059,1061,1064,1065,1087,1091,1095,1415,1416,1417,1420,1421,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1431,1432,1433,1434,1435,1436,1437,1438],[992,1039,1047,1064,1065,1415,1416,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1039,1047,1052,1064,1065,1070,1079,1082,1087,1091,1095,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1097,1415,1416,1417,1418,1419,1420,1421,1422,1423,1424,1430,1431,1432,1433,1434,1435,1436,1437,1438,1439],[992,1047,1052,1059,1060,1064,1065,1068,1082,1087,1090,1096,1415,1416,1417,1418,1420,1431,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1435,1436,1437,1438],[992,1047,1059,1064,1065,1415,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437],[992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1424,1431,1432,1433,1434,1435,1436,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1429,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1425,1426,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1425,1426,1427,1428,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1425,1427,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1425,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1415,1416,1417,1418,1420,1432,1433,1434,1435,1436,1437,1438],[97,452,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[97,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[473,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[471,473,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[471,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[473,537,538,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[473,540,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[473,541,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[558,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,539,540,541,542,543,544,545,546,547,548,549,550,551,552,553,554,555,556,557,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613,614,615,616,617,618,619,620,621,622,623,624,625,626,627,628,629,630,631,632,633,635,636,637,638,639,640,641,642,643,644,645,646,647,648,649,650,651,652,653,654,659,660,661,662,663,664,665,666,667,668,669,670,671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696,697,698,699,700,701,702,703,704,705,706,707,708,709,710,711,712,713,714,715,716,717,718,719,720,721,722,723,724,725,726,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[473,634,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[471,728,729,730,731,732,733,734,735,736,737,738,739,740,741,742,743,744,745,746,747,748,749,750,751,752,753,754,755,756,757,758,759,760,761,762,763,764,765,766,767,768,769,770,771,772,773,774,775,776,777,778,779,780,781,782,783,784,785,786,787,788,789,790,791,792,793,794,795,796,797,798,799,800,801,802,803,804,805,806,807,808,809,810,811,812,813,814,815,816,817,818,819,820,821,822,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[473,538,658,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[471,655,656,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[657,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[473,655,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[470,471,472,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[958,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[946,952,957,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1376,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1378,1379,1380,1381,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1107,1109,1117,1138,1147,1243,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1109,1142,1143,1144,1146,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1109,1249,1251,1253,1254,1256,1341,1343,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1109,1116,1117,1121,1131,1136,1137,1138,1139,1242,1341,1343,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1130,1131,1143,1161,1230,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1109,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1103,1130,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1233,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1232,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1161,1328,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1212,1225,1230,1352,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1189,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1236,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1235,1236,1237,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1235,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[989,992,1047,1061,1064,1065,1103,1109,1117,1121,1131,1140,1141,1143,1147,1159,1160,1209,1231,1233,1243,1341,1345,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1107,1109,1145,1178,1249,1250,1255,1341,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1145,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1107,1160,1297,1341,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1109,1145,1146,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1252,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1140,1234,1241,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,992,1047,1064,1065,1073,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,992,1047,1064,1065,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1303,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1186,1187,1353,1354,1355,1362,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1215,1354,1356,1357,1358,1359,1361,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1214,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1214,1215,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1116,1126,1127,1128,1130,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1129,1130,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1360,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1130,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1110,1395,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1145,1176,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1145,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1174,1179,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1175,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[939,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1061,1064,1065,1097,1098,1099,1100,1101,1102,1345,1374,1405,1406,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1117,1120,1192,1208,1238,1239,1294,1296,1341,1342,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1159,1240,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1345,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1108,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1299,1301,1308,1317,1319,1352,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1073,1299,1301,1316,1317,1318,1352,1411,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1310,1311,1312,1313,1314,1315,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1312,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1316,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,992,1047,1064,1065,1263,1264,1266,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1257,1258,1259,1260,1265,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1263,1265,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1261,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1262,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,992,1047,1064,1065,1175,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,992,1047,1064,1065,1346,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,992,1047,1064,1065,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1208,1349,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1349,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1342,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1228,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1046,1047,1064,1065,1227,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1122,1124,1130,1133,1168,1223,1225,1296,1300,1337,1338,1339,1342,1352,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1130,1133,1325,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1225,1352,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1212,1225,1228,1304,1305,1306,1307,1308,1309,1320,1321,1322,1323,1324,1326,1327,1352,1353,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1220,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1073,1110,1120,1133,1134,1168,1170,1208,1209,1260,1294,1295,1337,1341,1342,1343,1345,1348,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1352,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1046,1047,1064,1065,1143,1168,1209,1222,1342,1348,1350,1351,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1225,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1046,1047,1064,1065,1120,1124,1166,1216,1217,1218,1219,1220,1221,1223,1224,1338,1352,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1166,1167,1216,1342,1343,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1143,1208,1209,1296,1342,1348,1352,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1341,1343,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1079,1339,1342,1343,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1073,1090,1103,1117,1122,1124,1131,1133,1134,1145,1163,1168,1169,1170,1192,1193,1195,1198,1200,1203,1204,1205,1206,1207,1243,1294,1296,1339,1341,1342,1343,1348,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1079,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1109,1110,1111,1141,1339,1340,1345,1347,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1107,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1268,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1079,1090,1114,1233,1256,1257,1258,1259,1260,1266,1267,1412,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1073,1090,1103,1114,1124,1131,1193,1198,1208,1249,1272,1273,1274,1280,1283,1284,1294,1296,1339,1348,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1131,1140,1141,1159,1209,1341,1348,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1090,1110,1117,1124,1278,1339,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1298,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1260,1267,1268,1281,1282,1291,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1339,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1222,1338,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1124,1168,1243,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1073,1198,1245,1249,1274,1280,1283,1286,1339,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1140,1159,1249,1287,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1109,1169,1243,1289,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1090,1260,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1145,1169,1243,1244,1245,1254,1268,1288,1290,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[989,992,1047,1064,1065,1133,1168,1293,1345,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1073,1090,1115,1117,1122,1124,1134,1140,1147,1159,1170,1193,1195,1206,1208,1243,1272,1273,1274,1275,1277,1279,1294,1296,1339,1347,1348,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1079,1140,1280,1285,1291,1339,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1150,1151,1152,1153,1154,1155,1156,1157,1158,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1163,1199,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1201,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1199,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1201,1202,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1116,1117,1120,1121,1342,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1073,1108,1110,1122,1125,1133,1168,1170,1191,1294,1339,1343,1345,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1073,1090,1112,1115,1116,1124,1125,1338,1342,1348,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1216,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1217,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1130,1131,1337,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1218,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1113,1123,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1113,1117,1122,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1118,1123,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1119,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1113,1114,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1113,1171,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1113,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1115,1163,1197,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1196,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1114,1115,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1115,1194,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1114,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1337,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1117,1122,1124,1130,1132,1138,1168,1243,1293,1296,1299,1301,1302,1329,1332,1336,1338,1339,1342,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1180,1183,1184,1185,1186,1187,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,992,1047,1064,1065,1100,1102,1330,1331,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,992,1047,1064,1065,1100,1102,1330,1331,1335,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1229,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1143,1162,1167,1168,1210,1211,1212,1213,1215,1225,1226,1228,1231,1243,1293,1296,1341,1352,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1186,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1191,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1122,1172,1188,1190,1192,1293,1339,1345,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1180,1181,1182,1183,1184,1185,1186,1187,1346,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[989,992,1047,1061,1064,1065,1073,1090,1113,1114,1124,1134,1168,1170,1243,1291,1292,1294,1341,1342,1345,1348,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1167,1269,1272,1348,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1163,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1166,1225,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1165,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1167,1206,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1164,1166,1341,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1061,1064,1065,1112,1167,1269,1270,1271,1341,1342,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1126,1130,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1129,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1105,1106,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1110,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,989,992,1047,1064,1065,1168,1170,1345,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1110,1395,1396,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1179,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1073,1090,1108,1173,1175,1177,1178,1347,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1145,1342,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1276,1353,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1059,1061,1064,1065,1073,1107,1108,1179,1251,1345,1346,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1098,1099,1100,1101,1102,1345,1407,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1064,1065,1371,1372,1373,1374,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1246,1247,1248,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1246,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,992,1047,1061,1063,1064,1065,1073,1097,1098,1099,1100,1101,1102,1103,1108,1134,1286,1316,1343,1344,1347,1374,1407,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1383,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1385,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1387,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[940,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1389,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1391,1392,1393,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1397,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[983,992,1047,1064,1065,1364,1375,1377,1382,1384,1386,1388,1390,1394,1398,1399,1401,1410,1411,1412,1413,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[982,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1363,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1175,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1400,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1046,1047,1064,1065,1167,1269,1270,1272,1402,1403,1404,1407,1408,1409,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1097,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[967,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[954,955,956,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[953,957,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[957,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[881,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[842,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[882,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[727,823,879,880,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[842,843,881,882,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[824,825,826,827,828,849,850,851,852,853,854,855,856,857,858,859,860,861,862,863,864,865,866,867,868,869,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,848,883,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,848,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,843,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,883,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,851,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[871,872,873,874,875,876,877,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[848,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[885,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[469,840,841,846,848,870,878,883,884,886,894,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[829,830,831,832,833,834,835,836,837,838,839,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[848,881,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[827,828,840,841,844,846,879,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[844,845,847,879,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,841,879,881,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[844,879,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,840,841,870,878,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,843,844,845,879,882,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[887,888,889,890,891,892,893,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1079,1097,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[946,948,960,962,963,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[946,948,960,962,963,964,965,966,971,973,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[960,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[948,960,962,963,965,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[951,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[949,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[949,950,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1005,1008,1011,1012,1047,1064,1065,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1047,1064,1065,1079,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1012,1047,1064,1065,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1079,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1002,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1006,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1004,1005,1008,1047,1064,1065,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1047,1064,1065,1067,1087,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1002,1047,1064,1065,1097,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1004,1008,1047,1064,1065,1067,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,999,1000,1001,1003,1007,1047,1058,1064,1065,1079,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1016,1024,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1000,1006,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1033,1034,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1000,1003,1008,1047,1064,1065,1082,1090,1097,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1004,1008,1047,1064,1065,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,999,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1002,1003,1004,1006,1007,1008,1009,1010,1012,1013,1014,1015,1016,1017,1018,1019,1020,1021,1022,1023,1024,1025,1026,1027,1028,1029,1030,1031,1032,1034,1035,1036,1037,1038,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1026,1029,1047,1055,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1016,1017,1018,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1006,1008,1017,1019,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1007,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1000,1002,1008,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1012,1017,1019,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1012,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1006,1008,1011,1047,1064,1065,1090,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1000,1004,1008,1016,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1008,1026,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1019,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[992,1002,1008,1033,1047,1064,1065,1082,1095,1097,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,68,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,73,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,81,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,85,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,96,99,100,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,450,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,453,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,100,178,455,456,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,184,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,453,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,100,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,100,895,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,192,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,190,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,196,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,100,206,455,456,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,100,247,457,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,100,247,456,461,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,100,190,265,353,355,456,461,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,273,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,277,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,153,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,453,910,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,453,455,912,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,279,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,100,233,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,288,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,100,313,915,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,100,461,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,329,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,342,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,349,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,353,355,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,363,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,100,383,453,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,204,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,85,99,100,453,455,456,461,910,925,926,927,928,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,393,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,100,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,397,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,404,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,81,99,273,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,100,419,461,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,421,423,453,910,936,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,421,453,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,431,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,443,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,941,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,961,974,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,97,98,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,456,975,979,980,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,461,927,943,976,978,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,461,926,944,976,978,983,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,976,978,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,99,461,925,976,978,983,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,461,976,978,986,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,99,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,459,992,1047,1064,1065,1364,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,100,459,461,916,983,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,461,983,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,983,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[65,944,983,984,987,992,1047,1064,1065,1365,1366,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438],[64,65,986,992,1047,1064,1065,1415,1416,1417,1418,1420,1431,1432,1433,1434,1435,1436,1437,1438]],\"fileInfos\":[{\"version\":\"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4\",\"impliedFormat\":1},{\"version\":\"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75\",\"impliedFormat\":1},{\"version\":\"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962\",\"impliedFormat\":1},{\"version\":\"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8\",\"impliedFormat\":1},{\"version\":\"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7\",\"impliedFormat\":1},{\"version\":\"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4\",\"impliedFormat\":1},{\"version\":\"feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569\",\"impliedFormat\":1},{\"version\":\"ee7bad0c15b58988daa84371e0b89d313b762ab83cb5b31b8a2d1162e8eb41c2\",\"impliedFormat\":1},{\"version\":\"080941d9f9ff9307f7e27a83bcd888b7c8270716c39af943532438932ec1d0b9\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"2e80ee7a49e8ac312cc11b77f1475804bee36b3b2bc896bead8b6e1266befb43\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"959d36cddf5e7d572a65045b876f2956c973a586da58e5d26cde519184fd9b8a\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"965f36eae237dd74e6cca203a43e9ca801ce38824ead814728a2807b1910117d\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"3925a6c820dcb1a06506c90b1577db1fdbf7705d65b62b99dce4be75c637e26b\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"0a3d63ef2b853447ec4f749d3f368ce642264246e02911fcb1590d8c161b8005\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"8cdf8847677ac7d20486e54dd3fcf09eda95812ac8ace44b4418da1bbbab6eb8\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"b4b67b1a91182421f5df999988c690f14d813b9850b40acd06ed44691f6727ad\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"51ad4c928303041605b4d7ae32e0c1ee387d43a24cd6f1ebf4a2699e1076d4fa\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"196cb558a13d4533a5163286f30b0509ce0210e4b316c56c38d4c0fd2fb38405\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"170d4db14678c68178ee8a3d5a990d5afb759ecb6ec44dbd885c50f6da6204f6\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"ac51dd7d31333793807a6abaa5ae168512b6131bd41d9c5b98477fc3b7800f9f\",\"impliedFormat\":1},{\"version\":\"361229dbb64816d785f9b2913dad3343d48d6c53894d580c634b754cbb70cb11\",\"impliedFormat\":1},{\"version\":\"42c169fb8c2d42f4f668c624a9a11e719d5d07dacbebb63cbcf7ef365b0a75b3\",\"impliedFormat\":1},{\"version\":\"b03aa91aef645f9856216a2223a47001a84954caf37b7ffb1d63d1327b4231fe\",\"impliedFormat\":99},{\"version\":\"2d982c7dba93b9bcabb045898b00e62dd09919b2b35ee63c42880b22494a7ad8\",\"impliedFormat\":99},{\"version\":\"cfcb85724714ed6320c09fddcffed5ac71069125cd5b9957406c920dfd4c16ec\",\"impliedFormat\":99},\"97d122da148eb13a057b02ae0e8c2b20aa5fe0384c598c0144866ddc4ee6ea7a\",{\"version\":\"54a730e06094b37f96436ccc8e736bb65b74d256439bf1663344e3fab16d2246\",\"impliedFormat\":99},{\"version\":\"e502cb97a6fa3ea9268d2c2b2bcad7a1c8cfaade589f501a30cbf542e098f4a8\",\"impliedFormat\":99},{\"version\":\"19586f37701483574eb9615faa417281f9b417225c0595c2a242031f6c86e267\",\"impliedFormat\":99},{\"version\":\"4e8b929462a5c46c53151f6e7519a06e31ea6754a735c942d9ac5d8b535a46fd\",\"impliedFormat\":99},{\"version\":\"27f510ccd10e59816c76d51ad7b097f26f84a6b6e943942e1b0e7f1200da0134\",\"signature\":\"5c2fe7a995a2302c9b6c06c5ff606df37688ed29aa67371430a7fa0cdccc9955\"},{\"version\":\"7459d85c80f2971be954b562724106b13d5a2a57e8bfde51723e94e838f6fcbf\",\"impliedFormat\":99},{\"version\":\"c24ab9ac84d65b417a807ada25456697bb2adf1189fa80cb240625dfb3e61c42\",\"impliedFormat\":99},{\"version\":\"2f0fa19ebe34e7d2cf7823063555ee4439857c69edb03b6a705b97ce95a69070\",\"impliedFormat\":99},{\"version\":\"959ffb2edd511f72c17bb07c9192443bc512f7dd707b0127c513ef3fe13b397f\",\"impliedFormat\":99},{\"version\":\"4a950137dbff496fdca742066964f48efdaa748794668dd552419d43a6125603\",\"impliedFormat\":99},{\"version\":\"606d6d2855288bbd8da341607890f38aae30cd54be6a13246b901db07dc0b041\",\"impliedFormat\":99},{\"version\":\"6ae92eaaaef30fae975de604d3af31d5b00eca7f02d89fab589152df926685fd\",\"impliedFormat\":99},\"fdb3b13d60560a465c321956ff9086ce83977dcf154100f97ca26fe7eb0acbe1\",{\"version\":\"26cfaec143443411bc7d5363f274f885ced430b8f4bee25a81f7827248848d7b\",\"impliedFormat\":99},{\"version\":\"e038fcb79d0716bd68af2421b6ed71d35f665b9c6f54948688366284e264c1bd\",\"impliedFormat\":99},{\"version\":\"9052804c912704d31ad2107e130ceca04774b52abaf25735b0b3bdea8e1494b2\",\"impliedFormat\":99},\"9d88f01b0ef2e2b24e8c4d76ebb00c0b573528bc31b0b37767568d771f332ac4\",{\"version\":\"4b15cc0373f1ca84bdb230115a283869f9016d7246b22ee76d2b93af5d2f1004\",\"impliedFormat\":99},{\"version\":\"4d857105510df8011cfb5b3769dec55624a1df92e85d399cd03bc82bb89d090c\",\"impliedFormat\":99},{\"version\":\"0027415abaae3a127e25fabad82bb581b09d89235c553a1eb847fa14faf69bc9\",\"impliedFormat\":99},{\"version\":\"2e10e08e6ab5ebb88025cb0309457f86f59af9e4ae87186df0d096b53802445c\",\"impliedFormat\":99},{\"version\":\"21e5c69ad89ff162b5de9fee105994d98d63fa3fe7a5673ba8fe8e366a75d7da\",\"impliedFormat\":99},{\"version\":\"cfaf4f60b3290259d7cb24e27644fe868da003713f3f389602e6607ed7a9b1c6\",\"impliedFormat\":99},{\"version\":\"61d1912d86dffc312be80f1126bd65f1f6dd2e3ca6b4539eb029a209a77f408f\",\"impliedFormat\":99},{\"version\":\"97bc6fd88a4a101f9132ae93bc684a0c195a4ee401eab1492c6248f6bf012375\",\"impliedFormat\":99},{\"version\":\"00ec6732d15b24c301e967de238c4a75cf7b8b87d5b0e9924052d0bc97978193\",\"impliedFormat\":99},{\"version\":\"eb7f907ec09c730f66cfaef2aee237c86e43eed68bcb794db7f81fcecb01c577\",\"impliedFormat\":99},{\"version\":\"c57b441e0c0a9cbdfa7d850dae1f8a387d6f81cbffbc3cd0465d530084c2417d\",\"impliedFormat\":99},{\"version\":\"51954e948be6a5b728fcfaf561f12331b4f54f068934c77adfc8f70eea17d285\",\"impliedFormat\":1},{\"version\":\"02a523d3492e97440de9c080a59f3aa9366ca92bb6914078a75ae8a6f3e90a7f\",\"signature\":\"512960c0e955a2324b34354dac25e3e4d431a1af4cd33077935eda5e95c8b7e1\"},{\"version\":\"2d4ac711533bc098081b7541844e828d0972877d2efeb82254ad3ee0b6843316\",\"impliedFormat\":1},{\"version\":\"fe705082fbc54838ed1b34633df7fd453be9e08fe7e7f8fe51b174526ab17db9\",\"signature\":\"388288d1b1589973ceea68506e05cb47a14fe283e968b6677ffa1e19f92e443b\"},{\"version\":\"37f96daaddc2dd96712b2e86f3901f477ac01a5c2539b1bc07fd609d62039ee1\",\"impliedFormat\":1},{\"version\":\"59a69685139ba76cc6e0c9a0a596ac5aff1041f3874949c5e89decb555e43cff\",\"impliedFormat\":99},{\"version\":\"144a4e5780b800c0553949169f50be285eccbdb0298afd83ef2ae03fef77e2d2\",\"impliedFormat\":99},{\"version\":\"66aeb47bf8638d6767f7b4ff684c2d794391c981590073025e98f98e1afed499\",\"impliedFormat\":99},{\"version\":\"26748898fec8579096c776866e8e6f07754845b3d08f5ae98c3a59baa9e85c2e\",\"impliedFormat\":99},{\"version\":\"6d805abd62920edbd9ed4b20be26d040d01529f3ce53fdab9ca4d0fa9b589f02\",\"impliedFormat\":99},{\"version\":\"9cb3e4826879023518628e2d6b3cc936a1dc1c558e3e65c450263886dd060703\",\"impliedFormat\":99},{\"version\":\"7009f30d921edd039a57942d50060fd7f856159384075a53e6405a5c03fd603f\",\"impliedFormat\":99},{\"version\":\"97b02501eb45f487174d5a0ff89b6a95690d50e9eae242e2162118edd5f2705c\",\"impliedFormat\":99},{\"version\":\"2b4276dde46aa2faf0dd86119999c76b81e6488cd6b0d0fcf9fb985769cd11c0\",\"impliedFormat\":99},{\"version\":\"38d4cff03e87dc58bfd50ffe5a3fb25e6e6d4136a1282883285baf71d35967c5\",\"impliedFormat\":99},{\"version\":\"5ecea63968444d55f7c3cf677cbec9525db9229953b34f06be0386a24b0fffd2\",\"impliedFormat\":99},{\"version\":\"6ea9c8bf2ae4d47a0dbc2a1f9ac1e36c639b2ac9225c4d271c2f63a2faf24831\",\"impliedFormat\":99},{\"version\":\"a3d603c46b55d51493799241b8a456169d36301cc926ff72c75f5480e7eb25bf\",\"impliedFormat\":99},{\"version\":\"ad98c359284db8c984e88949b2c3394e4a35158880767b772491489788a6c5a0\",\"impliedFormat\":99},{\"version\":\"5c117cca0b75ed634fe3085142a931df2e2214e26f2bbcb34c592b767f13c1e8\",\"impliedFormat\":99},{\"version\":\"773c18e2bcc18598df8f8b2be930eb26b22608edf368e42e9ca3484828ec4122\",\"impliedFormat\":99},{\"version\":\"c385a1392fbde5ad2e29d1bda89b5438ba11d99f03108d4465cb3af50a26fdff\",\"impliedFormat\":99},{\"version\":\"425a03d68f43164e0214b1c333cd58e777d4186f412b530467c18ef0d2b37a80\",\"impliedFormat\":99},{\"version\":\"f9a591e5fe0be6728cc84e70325aacafffcf203b051ddef37d65651b43c05056\",\"impliedFormat\":99},{\"version\":\"4594572155e436ee22bff36cd0c41990b644797530e1d5ac0ae44d7bd9a9b6d7\",\"impliedFormat\":99},{\"version\":\"de8b4c367880fe92a0a740b706f08a46d1cf9e3981d55c2701e82423e81ef0ef\",\"impliedFormat\":99},{\"version\":\"4a056a71ffda9ff3f2adec60c0189c906f7e46976a0c6650fa196674ff8c4dff\",\"impliedFormat\":99},{\"version\":\"3a3fd6f5ca85ceeb293f2a010125f9455404958122b6dd0ba0b34f7dab74feb5\",\"impliedFormat\":99},{\"version\":\"42b58bc8da11e9181ecf4ac498d41c74930c73c8ebef091474d0f8cf971b50ac\",\"impliedFormat\":99},{\"version\":\"0458fbed073aeebfe0ce055b9bcc450627f5fc9aaec7634a6b9c44ff10431d8e\",\"impliedFormat\":99},{\"version\":\"fc30f37a98ab20a8db1309801095f4f7234f4840f0a9281dc63251e9dd75fad1\",\"impliedFormat\":99},{\"version\":\"951e9556f7441d86eef0b6160779e2f97c0d43da6110951b4fff87d493143ac7\",\"impliedFormat\":99},{\"version\":\"d2746ea0021f79365dcff95fc255ac529b6ef7f51981fc8e9cff62e65a2087a6\",\"impliedFormat\":99},{\"version\":\"9fe94c8f6b36cb41acd30d89567761a52246932dece21e1ce104baa2e84b07ac\",\"impliedFormat\":99},{\"version\":\"d0d58671b91fad1b24b87186a81bac181d07a6d61c58dc067f79b38c8c1e2b88\",\"impliedFormat\":99},{\"version\":\"c5aa3449a1a90686b5bb9e9c389b88e9a6fd8ed410289fff3c8d9359e4d510aa\",\"impliedFormat\":99},{\"version\":\"e96bd939a55117abe6ccbc02839f2f4d9ce3893368fea528ca91c59ebddf496f\",\"impliedFormat\":99},{\"version\":\"81f6bf27eedb1ed92466abfcee33795a6b2304691ae01f42e60f8c76894fade7\",\"impliedFormat\":99},{\"version\":\"4b05275d33bc4acbc41634e6c38d95da3771c23182ca12c00139b6069c66a15c\",\"impliedFormat\":99},{\"version\":\"26a0c2d883e1ed55ba00810d957dedcde5d16d637e33063686e2bc3f58a5c64a\",\"impliedFormat\":99},{\"version\":\"b2c697a96a297c1a207d9bc9b3fd4cb92b95bac1c0717c94a364f3590c25fda6\",\"impliedFormat\":99},{\"version\":\"bfb900f7de2066a4be644c269285fda8ccca40b065476a27b082173014d00467\",\"impliedFormat\":99},{\"version\":\"0817f58fceb66836eb354fb16f1b20093f9bc3d475995b2d20f3621a2e5dd3f0\",\"impliedFormat\":99},{\"version\":\"7e2b8299e85423435784cc6244e2d559ea862d226e7b0ec871c6a53f88e5139f\",\"impliedFormat\":99},{\"version\":\"8eca47167dadd486582ecd4e41f7fba6ae66cc4a4c5202f1f7acf34129a0dadf\",\"impliedFormat\":99},{\"version\":\"5f6aa85935176c45e47cfed4d6af31c2c53fa4a24ccb92ea32ff9c9a915a1908\",\"impliedFormat\":99},{\"version\":\"fea899959c19f5d41eb556cfb29e0d6722c470463b27036b23e672aaa4da70f5\",\"impliedFormat\":99},{\"version\":\"062c0cf9641ca90ff3ad8edc61c2e06299fe6585fb9a4014a8acdf7f11810d51\",\"impliedFormat\":99},{\"version\":\"745db40747b91a21d6b87a140dbf26c995545994c87ad2297a4033d6192113a8\",\"impliedFormat\":99},{\"version\":\"faf9a217d8d237b02ab6d95508d8736ae431bbeb38d98885eb5b8fb6dbe48cec\",\"impliedFormat\":99},{\"version\":\"d5633ef9a26db101247322db090e95c7b0eef123503cc53099850d35fcb4fe8b\",\"impliedFormat\":99},{\"version\":\"838c1878bc1ec773ca2b72ecc544d0f5b8913711fa8cb2b7f14cef8259743669\",\"impliedFormat\":99},{\"version\":\"74b564cd3da8f83d5e472a5b0cc53bf7e276b25576097cb89e6f67caf95b12dc\",\"impliedFormat\":99},{\"version\":\"68333289edbcca548c7f8370f9c1dcb71694136a11f418e38691f05bd2c299ce\",\"impliedFormat\":99},{\"version\":\"ae3a1d96127f7c759d2b6c466d2f3e96657c830356bde016f89c44075add8da6\",\"impliedFormat\":99},{\"version\":\"cce820aba9ba9d1984461c67d0d543d8eba7ea25c6a1be7a47c31cc18907a631\",\"impliedFormat\":99},{\"version\":\"6a1e5cea457be906011d1736eea8d0ae82e883cff9fe4a91f3218c5c9cd84e13\",\"impliedFormat\":99},{\"version\":\"51b6335f5a8e177306647558a3eefa1f6abe259b283c6462223be3d7d0f33300\",\"impliedFormat\":99},{\"version\":\"4674cb63fb87b9ccd97b95106de31583132dac5ab544c414e5902d10db34699a\",\"impliedFormat\":99},{\"version\":\"3ffe7d5bb7b38b8133e65f41e7b17d8799479418fdae3e352c891a64d14f65ac\",\"impliedFormat\":99},{\"version\":\"474dcc8f8d16e3b9c43fddd9b1930fbed50d26a66dc75cf17a2888ffc654c0bb\",\"impliedFormat\":99},{\"version\":\"cbf0390e81de86db9f6979227deaa5cf4f6bc4df00d1b034716a5adf1044e079\",\"impliedFormat\":99},{\"version\":\"136bde95f389f316a60b40bbf0f53c2a30474d8941b3554dba2d246f14dd254b\",\"impliedFormat\":99},{\"version\":\"be31399eb87d9773cdf0d109ff2af942a6a22c82efdaa3c389102c287c419e8b\",\"impliedFormat\":99},{\"version\":\"079a563e723579e9f4b37c0a26e88437fae2716e976273425615c939b821cdff\",\"impliedFormat\":99},{\"version\":\"667d3df98d1432158d20452fd0c175b0fffade57db9c7cecdd3922567f23c7e8\",\"impliedFormat\":99},{\"version\":\"d16321086fd36596aaf00d9590c2de1812f8204c6f870ac8f0d8fecde70570b5\",\"impliedFormat\":99},{\"version\":\"46a2c32879b8082fb031f575977bbdec9f3041167bf8acc9abba34b498e49443\",\"impliedFormat\":99},{\"version\":\"2d09c2f8b415e6973baa6b314f9023612c47f76fda13d542c711b08eba4b6f6e\",\"impliedFormat\":99},{\"version\":\"f5593ebceb9e3ea81f78c9ea001d8b22e86210a03ba1de9c6d66eaddc667b797\",\"impliedFormat\":99},{\"version\":\"2c285a3af1b420020956dc9d315bd73861aa943df786143d0aab6580053d0b77\",\"impliedFormat\":99},{\"version\":\"fb732d4dfd6387d8efd99f0757c3a68a1664e9b16a0461e4572bb2cf1b1f978b\",\"impliedFormat\":99},{\"version\":\"7804e6d8dd4e50c1ee6b4466eca30dedcff424c04113c23a0083afb5a588b9b8\",\"impliedFormat\":99},{\"version\":\"a79f09851a1353dc376b19bedf96bb7191402ec01890308119f6ab8cb33b9726\",\"impliedFormat\":99},{\"version\":\"d5897465eb4696de9518faa21172441ee95ce80a0b1d7c8b90dbcf70d3db7e67\",\"impliedFormat\":99},{\"version\":\"e8d2d8e7bf7eb324f9e5c9f323384d4066f508f7182a0506dbf7336cf70e1f4e\",\"impliedFormat\":99},{\"version\":\"b6bdd50d0e977f5fb48d01ec58387c4ea4ca4061180896d92667a121d8c359ce\",\"impliedFormat\":99},{\"version\":\"aaa93af07b03d69f6d7f49380ef42d13b41a2c6169b248c2e07552bb94c08faf\",\"impliedFormat\":99},{\"version\":\"b62d96002ec0c8710d0e99aa3175434e1df0f22f5a09291b19e5ec05e8a877e6\",\"impliedFormat\":99},{\"version\":\"d93c145cb04df5d21c2d0f66194700d2f1d6f8e04abe7ef723651e915bc6bc4e\",\"impliedFormat\":99},{\"version\":\"6e085274a812504f697c8130336ad47a6b249eab56a547a2a34f9b2c294e9a3a\",\"impliedFormat\":99},{\"version\":\"5834c68c6e0f55055514834fe00e65ebe8d0ed8f8e127ab071ce2ced36eb0967\",\"impliedFormat\":99},{\"version\":\"433839016857a5a785134d2d5e760fdcc9819d241a3ffb5cb76985e666a34a8c\",\"impliedFormat\":99},{\"version\":\"fe75ad82fe44452125aba2301647fb1197bd611ecc5857e225d022f9d95469eb\",\"impliedFormat\":99},{\"version\":\"23a55ad8067538d0d1cb0b55b1aff47b6a5979b9ef2e46c6e9b0160377a46616\",\"impliedFormat\":99},{\"version\":\"66cd137411911fea6db4b352a98279470e386eb3b1cac5db3de1efad678a9015\",\"impliedFormat\":99},{\"version\":\"f8d95db2d66d268765d447b554dffdb3f1cd2a22e8da7f6f57dfdcad6a19a1e8\",\"impliedFormat\":99},{\"version\":\"bdceae6ab40835cb0a1fa08e0367ec3fc43cfcecb1840d3a90ea75bcfe605ddf\",\"impliedFormat\":99},{\"version\":\"e38a172f8912eebc79671e07b81687a304a9d366a47933fde9f97ad79f8ac08a\",\"impliedFormat\":99},{\"version\":\"42f60dc9ecd3ef8ae7ef6c883f648243cdc645ea7f539d16eb2ce043f9ca3d27\",\"impliedFormat\":99},{\"version\":\"6082ee8fee6b3736c8bcd0a1d9dfff7125a406039020316f9512d88ab21b4206\",\"impliedFormat\":99},{\"version\":\"f6ba66f3f6c4409e878f48161529c585b3c0e687c8917dd8f6c6464fc5cd4f8e\",\"impliedFormat\":99},{\"version\":\"0366e97d9c966d748ad91b782e8ce843ebb692d93a1d211ef5b84cccbe8f53a8\",\"impliedFormat\":99},{\"version\":\"aa74551dc1eea3e902560acc832ac63a78ae05fe5f3b04c6813fe2ec57511456\",\"impliedFormat\":99},{\"version\":\"b86777df5a816b1b1a2b12a017a8ef8f14ea2fb1a533d1e18e956ced70ac9d28\",\"impliedFormat\":99},{\"version\":\"ce9e6f87c3a69558b58fe849abe2ed9a105cd5195809851d99397395a4442bc0\",\"impliedFormat\":99},{\"version\":\"8c85110d99da8adc0da3cc811023d6f7e0f6ee28564d10a26b27c190f34e200c\",\"impliedFormat\":99},{\"version\":\"ab95baa99c5dc2a49bd1d1c00d90955088463e675f4eb869008a357b5b02d6fe\",\"impliedFormat\":99},{\"version\":\"7980ab0dad3e7e1eb6e9873231d45f3860864c84c48608267864e4774c4bf39d\",\"impliedFormat\":99},{\"version\":\"845b523a3ca13e3fbd496a579aaf51875d60e15ee56f4be60a358dfd87699afe\",\"impliedFormat\":99},{\"version\":\"53c3302d92c8cf76bc6557a1f762fc2f7ee6156af5bc7a2ef22c591d53cbc4cf\",\"impliedFormat\":99},{\"version\":\"32c98d5e98a05f108f4e405c853db481f83c5a1a9cd6c53870501d8248f9afad\",\"impliedFormat\":99},{\"version\":\"d7ce891d302b15d9f28cae31eddc6a88be37c290c512fb1247735e7f923b1104\",\"impliedFormat\":99},{\"version\":\"147ca4dfd1729f9b34c3c074589cdf518c0b80fd1efa29ef75bdb39507b23153\",\"impliedFormat\":99},{\"version\":\"ea8f093cdf681d9487034f80323bdd4168c727eb9d5c985f250e3c4488d64639\",\"impliedFormat\":99},{\"version\":\"09b8b299789b2ac464776895e96f64cca0ffa6449a178d775adea0401d9b49fb\",\"impliedFormat\":99},{\"version\":\"15abcaa279117eb516a90c09c4b60c53fb29c1242c7f67bb1003e0cce06f7d19\",\"impliedFormat\":99},{\"version\":\"df506f8ab6bcab64cd24be5e65bcf12b959d1d00cd9127d73afc59ba4062867c\",\"impliedFormat\":99},{\"version\":\"ecb5aeb3771bea2795b5f4c0f79036c061c3a2bfe0b1d5a83d9183a43e38cd9c\",\"impliedFormat\":99},{\"version\":\"8a5ff6c3f290223a222cd540136d2bf4880d1c13d94f62503d7029ff74533b41\",\"impliedFormat\":99},{\"version\":\"eabb41775a846406c423449b13eca4e43214c0bab2ab00b4e22b01e39d510023\",\"impliedFormat\":99},{\"version\":\"015ed10c7e81ea426199e7d9b92978416f420466088487b25577bea09b469a54\",\"impliedFormat\":99},{\"version\":\"d5da26af31358a4883edb6112879018b14c7c1fbcc457aa36961b03ee17bedea\",\"impliedFormat\":99},{\"version\":\"4e93fb2d2c59bbc1f1a5211b36c447efe4d0af568d682ef1e5eb5f84ca6ccc2e\",\"impliedFormat\":99},{\"version\":\"3d13fe973e92e708ad3dbbf1b2385bb799f8e70c8da71a1ac72fcb5521c8a5e9\",\"impliedFormat\":99},{\"version\":\"16f3f66b5182e57c554d0e374e29fdc0a899c1321b3f94fa997d19abf9faf931\",\"impliedFormat\":99},{\"version\":\"a8d6a3a562196c0a6e193e303ff1b2c6932a6a16a631ce14f2110dcb1667f622\",\"impliedFormat\":99},{\"version\":\"556079af6cfdcb562e1a7408e73ac2203ed8fad6cc768d498238b137ac06247d\",\"impliedFormat\":99},{\"version\":\"17096b785db48bd6b340542cf9752db28508b637e9721022e9993aa15372367a\",\"impliedFormat\":99},{\"version\":\"e177a7a7a17e5d282c4379cc20c3b21f3bcd22abdb88557695eb83c4d51b186b\",\"impliedFormat\":99},{\"version\":\"49f41e28b536a2a1722017672ef24a0720b2d0a37f66f1a272c7d8595b3b3a39\",\"impliedFormat\":99},{\"version\":\"dfa5ecdeea6492f56d1a1b7905fe3fc24a2ab44a5420ca23fc9133da991015e7\",\"impliedFormat\":99},{\"version\":\"ca359d684454111a2118c60f361166ad3595b74fd7b9c8eea5c7de05d9ba13a3\",\"impliedFormat\":99},{\"version\":\"c61abe93e13d89322bef06b0d2063ffcca5e0c547722fcea7a57c6f435cd58a4\",\"impliedFormat\":99},{\"version\":\"2ab01a0368f65b3b891e25416ae785dca54808f70d8f6204b99589ed4f7f1d2f\",\"impliedFormat\":99},{\"version\":\"43b5886036965659dae63950130d2aa6c4728c336fe1ffd09b0832fbeb027b15\",\"impliedFormat\":99},{\"version\":\"0e93b1f86d8778076f04fe97295548d6d10b31d29daaa3980568929da4c94b5f\",\"impliedFormat\":99},{\"version\":\"2984438b44f77f375cf80075b7c26e84d593aa56490e3703ebe094e34626e183\",\"impliedFormat\":99},{\"version\":\"b594999319e34d99ba2048dbdeb0fb2660044d4fd2e26456275f4d6a43f61f65\",\"impliedFormat\":99},{\"version\":\"7bae4a3f50a844fcbdc504d717f5f13dd7178ca99f131b230305db6b55e1dbc3\",\"impliedFormat\":99},{\"version\":\"214c393513df9438d6956ad5b738efcb1538c301c81d60e0adb9f2113c780265\",\"impliedFormat\":99},{\"version\":\"58977c552caa6b5993e10d48a8d97bb7e636516b1526cfbcfd045c144476597d\",\"impliedFormat\":99},{\"version\":\"2288fdc58bb7180154bf4e3e20b01f2f0a279a5ff253679baa8d326bbc3c0020\",\"impliedFormat\":99},{\"version\":\"dbf382db41bc652896fe67296a9bd1880836cd2ddc16a3811bfd7bb9c2fec1ea\",\"impliedFormat\":99},{\"version\":\"f49e8feb6d7473579a5ceb5872598bbc1be3723da653993472720629c72fa0ba\",\"impliedFormat\":99},{\"version\":\"14c727434cfe6a078b51a88d005033ad01a76bec36292d7b47369d82e48e1cb0\",\"impliedFormat\":99},{\"version\":\"d909cc4d55736652a82d5f76be92980a1cfb14b6beb65137171deb4c7cbb608c\",\"impliedFormat\":99},{\"version\":\"0a37887a4d2c6a6ed5e5ddd3619d04165079eda5477340fa56e635510333e8a3\",\"impliedFormat\":99},{\"version\":\"53adb1224146150628fd59d35c5a3f3f69629a649052c34ef6ee5186cc911c81\",\"impliedFormat\":99},{\"version\":\"f645ed7ab08689c3fc4afec989000af708f562adb32819d1079762c027f225e7\",\"impliedFormat\":99},{\"version\":\"2a1fc3ab59c5d74c4e7bec3880b98c1e11d48276173b314eaccd9b34c4aceaa7\",\"impliedFormat\":99},{\"version\":\"112c5c25a4e75f0bd1bcdda0630afddd634d96f74263c0d0c98a14505577c7ba\",\"impliedFormat\":99},{\"version\":\"0751c7fbc7fd80df189156cd8b277d1b537e6b711b316db0b6aa35b9c674a6fa\",\"impliedFormat\":99},{\"version\":\"d8f7ba1d7a0eb2191ac0b656a4ff4624cc7c615c9f0209760a664aa4f2993ba4\",\"impliedFormat\":99},{\"version\":\"62d30429d222ea6faafe408fe136c3a1e9df0cde180b0dba5fa4ebd77c0807ee\",\"impliedFormat\":99},{\"version\":\"fd41f8da8f9ee3606b5460e3810572ada02d29726e2f0180fcdac1be260a6da7\",\"impliedFormat\":99},{\"version\":\"ea2276e4ce7ceab26d8a340f53554db2ace013d85903d7b5e781ace26c3eee41\",\"impliedFormat\":99},{\"version\":\"dbe63b3e06a26a1a3e74b407474745d3a9148775f2bf96588863099d64d1e54c\",\"impliedFormat\":99},{\"version\":\"7142177cf3158dad7b42726ea15c78512dbad6370117509c8eadefcedae72534\",\"impliedFormat\":99},{\"version\":\"9322da0c85b107feebedf3005249cb863f4e03736c4b8ab3edcbfcc29981d13b\",\"impliedFormat\":99},{\"version\":\"d2e6d9f45141863efb1ce3846875ca23fca7b731496c45006e4931837c3ff3e4\",\"impliedFormat\":99},{\"version\":\"d06ad53b5004aefc1adffde50247af521e0e10d334392fc0cdfa8fa965d7243f\",\"impliedFormat\":99},{\"version\":\"8f1eceb25b3591bc9222483317ca1bd13d4be70aff908d9d26fa3c18b7f7ce2b\",\"impliedFormat\":99},{\"version\":\"b56026fce41fba17e89346ef0ad03b2f5fcd04c1120176e4eac77a7d72dcd8e9\",\"impliedFormat\":99},{\"version\":\"d3aa309128e84a97c160e41f2cd9408e19e43e3a6373b72b37fcec94fd3f2c7d\",\"impliedFormat\":99},{\"version\":\"0513d6c3cb14947d45f1471345eab07dfa5b9237124f639c9e0dc056df236584\",\"impliedFormat\":99},{\"version\":\"a4a1f24de17edfa0b47c4e939390b38f229d9e42ded4f53639e9df475fe453be\",\"impliedFormat\":99},{\"version\":\"366c1b30d171d42458d361430d16dac31854cff2db854abb59ff4a5df3e349c3\",\"impliedFormat\":99},{\"version\":\"ab2dc76864097e3d2dc5a0553376474ebf026fc5f25e10adbb5e81b1247b03d7\",\"impliedFormat\":99},{\"version\":\"8e68a48d38419d478b823e2f04c8418fc348fb6d4d370b15743cde4d48392506\",\"impliedFormat\":99},{\"version\":\"a93626ded4c88421ac4e27150b0e11a514683a25f54d6639347a66652e118c9a\",\"impliedFormat\":99},{\"version\":\"5804ffbc65b78751fd510218b90827a7ca677ca34a45b4709a00783b658cbaba\",\"impliedFormat\":99},{\"version\":\"5bc28e22162587d3940c3f73668bfd191a65d7381ad7c242901ed7a395e04198\",\"impliedFormat\":99},{\"version\":\"31dad812abb967c21c2ba11f6c1ade44ed75a7441c2df7e6fa78f6af0f112eba\",\"impliedFormat\":99},{\"version\":\"ff9e2545e5c4e207179f01a1ec905d0fbbfa1d162501679a01cc75591fd5bfe1\",\"impliedFormat\":99},{\"version\":\"1c247df73ee92991ea75d19419b5625e37a9da3bef05f015d7097a35c66a1fc0\",\"impliedFormat\":99},{\"version\":\"c29921af69f3db7348ed27915972a51cddde446ac029fface772271c085eacbb\",\"impliedFormat\":99},{\"version\":\"e4a58769bce747f03a3606f55e84690c2003f754ab4354a27ac6aba30eef01bb\",\"impliedFormat\":99},{\"version\":\"78bd82da60d7021316b170afa284acb4a0400d52eb34ed089e38861bd3c53d10\",\"impliedFormat\":99},{\"version\":\"1ce699f32fea004f388368e19e9cadb41dd52ecc72c9d6b353c9d9e01abe2cf4\",\"impliedFormat\":99},{\"version\":\"597fc3b46d5654c4f8361c36ded591d5f12826dd1df9e7643e8bcf1f0803cbd9\",\"impliedFormat\":99},{\"version\":\"b56a743deaeb1ec9be37a9a8e5599e1cccd267267d4fc41c01e0c5371892a70b\",\"impliedFormat\":99},{\"version\":\"d8fbed05640e6df144bbc9bc1ce7586d6e020119968f9491c157ab670c97f003\",\"impliedFormat\":99},{\"version\":\"ac782435f9434aeda13f2d65fe840eb282bdbe2405549b166b2a89bcdea2396e\",\"impliedFormat\":99},{\"version\":\"98ef9c3f5f15c18abcd6fa9f12e93e1bbd608225501151603cce97642dbc961d\",\"impliedFormat\":99},{\"version\":\"c80a56a10f1a8e01c4b7f08df6e9260ae076c910402dae8173fa6c7dcacc51fe\",\"impliedFormat\":99},{\"version\":\"809cabbaee3df008c5c31e842047b487417eca144d2f4a4b0e04940827a3d062\",\"impliedFormat\":99},{\"version\":\"30d726e77d959648e8f6fe104bacdc29ee4e1cfc6e8ea7c952141b3a3482d007\",\"impliedFormat\":99},{\"version\":\"7dfcc5f32fd73d26d849530d15ab3459a60d296c13dee963fb2cbc5b78052d0f\",\"impliedFormat\":99},{\"version\":\"930c6bd33500b62b1338a60a9a5bc3a2d57267ac49ba66d75917cb1fda319238\",\"impliedFormat\":99},{\"version\":\"3612c99dd83ed479d269970994dac77984c951cd7b9a52a291051517cc09e6de\",\"impliedFormat\":99},{\"version\":\"32b344c3765dc7c383516f3326c108ca84c33df44ece8ac789fce47d47ba8810\",\"impliedFormat\":99},{\"version\":\"88a44d532be7c83da9c55d744c23721edd5c7401e7319207d957cc0afa36a341\",\"impliedFormat\":99},{\"version\":\"ae8a68cf0adad59ea1b6e86f51588d809fca647b917bb0f92c155b6023b09e4d\",\"impliedFormat\":99},{\"version\":\"cef2c14946e957c2c4a5d99837c6a9f730390158c08ce313fc7248baeee0cde3\",\"impliedFormat\":99},{\"version\":\"f1363ec1f8aafcad89a89c7cfaf805dc709107294c32ffcca1cede004ccfbba0\",\"impliedFormat\":99},{\"version\":\"9f074f00a892947b04f99252866ce01cbdad4899eab96d1ea2d090419b9d0383\",\"impliedFormat\":99},{\"version\":\"94f793b66dcb1a755800090817a189e5ffa519d524f0223e6b918f9e20df92e8\",\"impliedFormat\":99},{\"version\":\"b96130e763eeb5392b6501ffabcec57fe110780ffcaeeef061e7cdeca4d65960\",\"impliedFormat\":99},{\"version\":\"4a0be6234a190079827c8909b3ec1949d44434ada4d898450b5fb330cc64551d\",\"impliedFormat\":99},{\"version\":\"28bdaf936bc3792e20a906ce59550aa56fbe62ec1a575421202cca5bb347941c\",\"impliedFormat\":99},{\"version\":\"52d0e4a995a1328cafd0c0a9441b729136bbdeea7896789c253aece60e4ec2c7\",\"impliedFormat\":99},{\"version\":\"68337576317652e5fccf4c687020c06c00728c1bb0dc60a10fd8d78cc15091bc\",\"impliedFormat\":99},{\"version\":\"06ef9e335bec6e052d9df473a06a08552d34dca231a5a31a04fe0e05c194e933\",\"impliedFormat\":99},{\"version\":\"8fd2aa139269a583dc70ef2f34fbbf57bbfa7490136ddead980ee23a408029f5\",\"impliedFormat\":99},{\"version\":\"89dba06f08c33ff2006e6ca98e01284846927a6be23a9aa7be6856a8d7242939\",\"impliedFormat\":99},{\"version\":\"8e551cda9ceaeac0ed69fa73b16de6ec53b41a07309b2af1922425132e90ca8f\",\"impliedFormat\":99},{\"version\":\"706b3fd6ff575b15077a97851686c5a8d4f563f096050a397c5fb15cd9ce0b78\",\"impliedFormat\":99},{\"version\":\"2ca97aeaca4ac5be7b3815c3468c86f512e3c8504ab6ad0599e418d2feef1b5c\",\"impliedFormat\":99},{\"version\":\"85a60f3f0491c3c835a7679464349048513bb8e4d61fe865a9b1833229ebc9e9\",\"impliedFormat\":99},{\"version\":\"7194c45f80a22684e43fea3a9aeaeb69845361d8039d6f013f50230c78792f21\",\"impliedFormat\":99},{\"version\":\"4f81fb228ca91355a6210787a2db9fb9ebeb7b45fda1b577af6b2da1cc40702a\",\"impliedFormat\":99},{\"version\":\"57b1def459ec822d42eba31a62d69cc6d0329a88d45331ec987c6ec60d46ed82\",\"impliedFormat\":99},{\"version\":\"2ae910ab09cdf74168412a94bdb35966a1f62fe396e478cd20a734c98a360782\",\"impliedFormat\":99},{\"version\":\"2b5177892e7b27a3597ecb4769c9e048dff0610ac1a5312202f2ba595f2b09d2\",\"impliedFormat\":99},{\"version\":\"dffbd270006e6d1eb7e54019953f568f745fbad1f286e6b6f9700c713dd9d71d\",\"impliedFormat\":99},{\"version\":\"3209d42dcb86b35a13c127fc39981a644b61a1fb0e59524038d0f3bd7fe25768\",\"impliedFormat\":99},{\"version\":\"a165816fd744d55bb0b17e7851eb07c3e372081f0de12b37ab18b5241bb8777a\",\"impliedFormat\":99},{\"version\":\"e8da9d04f0bb044998c238d339d6fce0afbd773827eb0921fa5b11b804740242\",\"impliedFormat\":99},{\"version\":\"415295fdda8d3f2630dcba09d2c6ac1ad737e9b5c8e91880514029953eb629dd\",\"impliedFormat\":99},{\"version\":\"57a75ba33c112c59a783a2e7595294b86c6ab4a5fcc65a537ff9356a3b23abc2\",\"impliedFormat\":99},{\"version\":\"f846b7cc91e29c0ddd12b8d817abc81f4e3ba1c37dceaaacc82a896031a771a1\",\"impliedFormat\":99},{\"version\":\"070062b01eed7a9d7c7763eb25d98c6581182edcd39bfe6d84aa64ffb9b980be\",\"impliedFormat\":99},{\"version\":\"128cd80e8980123fd5174b2ab5c1295add61e51a5659a1e8d4fcfb82884edbda\",\"impliedFormat\":99},{\"version\":\"fa6df0af2818d39dcccafa76a485baf0944292ecaf7acc623acdc5832149f796\",\"impliedFormat\":99},{\"version\":\"bf2f4914e8b356a9907f7b347f984d4cb8efd2fd359d443793c52d55d9f2abb6\",\"impliedFormat\":99},{\"version\":\"f8d6e2784bb518d523898f614b8c0ae55341968c982d4617f08867b5d11cf354\",\"impliedFormat\":99},{\"version\":\"b47f1dc9eccc82752263ec4d70ff7464f0412469102bd22537a5005ec298aa68\",\"impliedFormat\":99},{\"version\":\"7b75a17e8586b0d83e4d3732ffe41a10812873a89eafec329b879988537fa83e\",\"impliedFormat\":99},{\"version\":\"768989d7bcc666427495223f2e78c1e5b541e16b6542e64abb92d54f0f37b7cb\",\"impliedFormat\":99},{\"version\":\"a171b8cb18c8c2e92ed5c39ca1ed713b803722352829b948e3c84cd463b2b617\",\"impliedFormat\":99},{\"version\":\"a2c7210b0f2be82aed4cdfc51ca084b3ac017a2d2e9baf5b519732fafb6feff7\",\"impliedFormat\":99},{\"version\":\"f10d4445bd7db9939402b239776287476b42d1ac4bc8e6b80a7ab7013b9c9981\",\"impliedFormat\":99},{\"version\":\"4df8dc56ba9be273bee231caa239d04fb28293b92c109c32f4fc027f65e5aca8\",\"impliedFormat\":99},{\"version\":\"7458750d4c17b31f538c9faa569a75ece0bad5ff89be08b54aa7ebf485ec1dcb\",\"impliedFormat\":99},{\"version\":\"2dc42bdd932c6f6c33203ef3adf9a3c3f9c92e55119967c4b8eca75048527ec8\",\"impliedFormat\":99},{\"version\":\"a8a30971ee06a579685d25fa7135d8226f1faf0fa6571a3dadeceacb9291f2ed\",\"impliedFormat\":99},{\"version\":\"e2aafc728d8f60a248d640eb447028edcf9b80d9d99f50c465b06011d885bd6a\",\"impliedFormat\":99},{\"version\":\"3015667b8858f86fee317668c4572b9bddc3b14df96d23383507d618edcdc577\",\"impliedFormat\":99},{\"version\":\"f46d9c50782b5c3d0d0a1114188c704288224e91dec2d078fb50180621d58c1d\",\"impliedFormat\":99},{\"version\":\"edf1398a29effd40893b4e850271ea22bdeb0d3d6a901eb08ad2516f13b8bd05\",\"impliedFormat\":99},{\"version\":\"73421be7cc17957418f22a7be68c4e6b8d818f1597585bb3020aeb6ef7006f9c\",\"impliedFormat\":99},{\"version\":\"d80c3265f6b0717428e089d897e503d19debb1f5348dc5d286f3a850e93d5061\",\"impliedFormat\":99},{\"version\":\"5bb81a9aa2387411321b9f1f5c021b6303428634bee563c9a8f1cd388b1be443\",\"impliedFormat\":99},{\"version\":\"30522d15d4f6aadebfabfa0d23ad5adf467335a6ef7bc8508db50e8dc388b3fa\",\"impliedFormat\":99},{\"version\":\"9c160cf18020aec7bd1deac84fb3bda1a03c590ceae2bc5c150ab037dd226886\",\"impliedFormat\":99},{\"version\":\"4b966b4f48c930b166a0058b0d8aadcf0b111135b99a6297aaaad1528c42ed97\",\"impliedFormat\":99},{\"version\":\"113fd627693c4050016f9da31114c196ed3e55d1a94ea023bd6bc829dca4c550\",\"impliedFormat\":99},{\"version\":\"bd90ad1350bb360f83082e98021e7cfbeb6bbc75565b76c70bd2ebf9ba936a23\",\"impliedFormat\":99},{\"version\":\"c2ef4463c7d697365ca578709c801077009dd3caef689c5dba0a8521969a95eb\",\"impliedFormat\":99},{\"version\":\"15b34f0a2bc3d983723e394aa54333b2f4cd41e391a5e68aa5bb782351e359fe\",\"impliedFormat\":99},{\"version\":\"ac5b9f2d5cbd50ec86d5856917c5eb5ab6fc7152fb182598c9b9fc2bf458b8d4\",\"impliedFormat\":99},{\"version\":\"1d44832eaee499d791379ab65c32f9b72ed807613b72d7efe0e4dabec955d21b\",\"impliedFormat\":99},{\"version\":\"db17327ad596824321aefdfa22cc1d45d9fe3192fc8fefe4ad17dafe93c739c3\",\"impliedFormat\":99},{\"version\":\"0819b4f64eb1b87f884d52895505d8e913a3f84e1eb164bdf96ea2b50354e7d6\",\"impliedFormat\":99},{\"version\":\"60e6c7ed01a617453bb91682fe4958e698292ec3ab2e8473a3123c3b6daf0676\",\"impliedFormat\":99},{\"version\":\"8d426454bc1da7cdd3408c926c58228bce4dcc30c8a962bb0141cc13b1d81018\",\"impliedFormat\":99},{\"version\":\"f04c3edcb4544775f079ade30ad601d9e50aef13a19fcc0325bb1d33fadc3f58\",\"impliedFormat\":99},{\"version\":\"025c17c748488159fcafcd87b95b08a029ecdbd25000f598804bdd7788b1b6f6\",\"impliedFormat\":99},{\"version\":\"4c22848e2508e85af2c9f8e895d5ed64d92e1b02711f45c751e709086e4da919\",\"impliedFormat\":99},{\"version\":\"7b928049f4bb3f15bca40fc7d57ff661cdb6c24a7b235fc8fa083f4dc863ede3\",\"impliedFormat\":99},{\"version\":\"2693d3e219283d2bb133924f0bdfd8aed628ff62b3857a6de107282a4c145dd9\",\"impliedFormat\":99},{\"version\":\"d1a2690ce0378c3d377e7bd07614bb3c7e2bec52dd7f660198475a550dc13cc6\",\"impliedFormat\":99},{\"version\":\"46b171ad2ab9b534979ea5086fbe669948fb8e31eeb2b7ad3d45d6a9ded78748\",\"impliedFormat\":99},{\"version\":\"2e73ce1cc735fa0c03af07b0dd40b90bfc7bd5cc11d6271a9a965f0403cf69d9\",\"impliedFormat\":99},{\"version\":\"753b3efbdc07a3d9993a8fff8295f7b4f95663e308ea85efc7a0c1ffd2ef116f\",\"impliedFormat\":99},{\"version\":\"b08d54872af7b7df6fa9533cfe07b2e7aa2f50f5a84f172d292d53c75a54f8cc\",\"impliedFormat\":99},{\"version\":\"e9e0b502312db594634de99abc4a0becaa67c69faf5531f66d7495e0bd5f5e0b\",\"impliedFormat\":99},{\"version\":\"427bcc746c725d19ef8e041226bf8a60e20acc421e08cc723b0239b599a97482\",\"impliedFormat\":99},{\"version\":\"bd012f6cfbb374e40d238c255eacd604243d1bf5bb065e216bd72bbb57aa2182\",\"impliedFormat\":99},{\"version\":\"29ea832df7ac71578ed701393fb6e3e158cc643dfd1d3cc80b41a4c289e86524\",\"impliedFormat\":99},{\"version\":\"df7600c69bc9611d77639d13248b087203b232e2acba76b3b4cdaa4cbc25d0e4\",\"impliedFormat\":99},{\"version\":\"8be849acfdb4ade6d987865b17febdda1b9a6e320e87c746deec0e555121567b\",\"impliedFormat\":99},{\"version\":\"cdc0b51f289385c35e0befb4db66c36821431bc4275369d51b2e2d3f3652049d\",\"impliedFormat\":99},{\"version\":\"c79752b70dcb13137ee7bf01e6add89298c15e0d773d4c6faf56c1caa5d997bb\",\"impliedFormat\":99},{\"version\":\"7e44cb4862e072b762134c46b95bc3e86124439931ae85159e845d0ca2166bb0\",\"impliedFormat\":99},{\"version\":\"eb76bb4ca060b378e6bab61d7dd24e2cd7ca61a5c448e1bb327c63baa96ea6c3\",\"impliedFormat\":99},{\"version\":\"9376146c27f8e0cace730fbf789648da353877c78e990e173391befa191e70ed\",\"impliedFormat\":99},{\"version\":\"c7f6096a62192ee567f7de6cba63e1a19e32e6cf51e11725126446ae6ffa3d31\",\"impliedFormat\":99},{\"version\":\"e8682dbf2be4ee767cc14576f3e461a8b8c2b1e59a7f787e89d22d1cb6876377\",\"impliedFormat\":99},{\"version\":\"f9791fdca540b14eb2d745e95ce1904716f1f81f7b8955bccc96e4a0501fba00\",\"impliedFormat\":99},{\"version\":\"2673620ee9cb5e62777ceeea4e84f0c53a2bea44d74f103ece49bfb7efe95aec\",\"impliedFormat\":99},{\"version\":\"525f82081df6786aee16931dbb571de908e7235f3d0e55a774e71eb855cd4ae3\",\"impliedFormat\":99},{\"version\":\"87fed3456418e122f03bde7afa0c512c55bfcd2ba6d6305385dd6c5e3c71ff6d\",\"impliedFormat\":99},{\"version\":\"2ea4160e3867a56867f27637c7ecc3ab01a1d7534f892493582af82b24bff97f\",\"impliedFormat\":99},{\"version\":\"dc9875d80504e711826648ca27882ffc145a136db37031e6f250b31fd357b8f0\",\"impliedFormat\":99},{\"version\":\"e73198b060fba5d556b7b411073ac48383a539227522afbe5a3a9156edea2fdf\",\"impliedFormat\":99},{\"version\":\"bd40604dce7f9329f800afebad8601fe708f32012c464fcab62c68cbf2fd39d7\",\"impliedFormat\":99},{\"version\":\"b95561e98ee78519d7c2e98f86da7a9342b936b0e52cbc42894a517c38682f4b\",\"impliedFormat\":99},{\"version\":\"91a9ebdd32734499d34fc812087ff1f59a70d2c6185981f229fcc2679a33b8e8\",\"impliedFormat\":99},{\"version\":\"c0ff7336db1bb822f6e38dd91d58ba77f107309f453e8d5ed85d7bccaaa7863e\",\"impliedFormat\":99},{\"version\":\"c42858690ca5e76a83277a2234057c126033a927b1419228f98011caf9332e22\",\"impliedFormat\":99},{\"version\":\"b8b9141324d97526669e3b9c2914d5707c5fc2d1f4842d76f74c902b7a03549e\",\"impliedFormat\":99},{\"version\":\"80b6ab00ab7bd0bfdebe92d387ca33446a7102ec4f5ae67a7aa392311f0647ab\",\"impliedFormat\":99},{\"version\":\"3c9e08a6171b77f9409f6fbeee92cc7cec90295165305f4749c15b66984094b7\",\"impliedFormat\":99},{\"version\":\"d5f52fef25eebd772b28fe3acd0ef103cb3d338c73fd23dae81235aa3d3216f3\",\"impliedFormat\":99},{\"version\":\"a1d51984613f1b5faef052fb04f81743b8209fce70f8d1a1d73f2fb9be6d6912\",\"impliedFormat\":99},{\"version\":\"e313dde308495525f7e18a1e3a62d49407e562d389661bff3def7aa6718547b4\",\"impliedFormat\":99},{\"version\":\"b6fc849fefcf2d80c9f877a4b609da4e913a1b960adf9b8ee78dcebf2ccb1a18\",\"impliedFormat\":99},{\"version\":\"ad93293f86fb21b8941415ebc7785f728d4fe8389f855f185dbc77dba548fe53\",\"impliedFormat\":99},{\"version\":\"d582707b4fbb409fd9e62253e66631a521a79e57ec8a79ba205e6364877d3c0f\",\"impliedFormat\":99},{\"version\":\"a1d1ddfa2b0d806b2778b931ef3221e5a16cf993005eed4b74b2561d7020864f\",\"impliedFormat\":99},{\"version\":\"c71b08b656ec67568f366241678b35569c65fe7df5b1b1d450bee7e9b06f8ff5\",\"impliedFormat\":99},{\"version\":\"4866caa6f66072a9029b8081a0b0614ddff5995126486d8b96414a8d2a22285c\",\"impliedFormat\":99},{\"version\":\"6d37cb963c5288b5225af7fa9d072c429920718fa87d8352f72b5b80978aaf0b\",\"impliedFormat\":99},{\"version\":\"e429692aefa26a42888b1e63959688bc0c75ef34fd3eb7c246f32b8872aeeb31\",\"impliedFormat\":99},{\"version\":\"d97cf67eb2772d68fbc0ba44ac3c6d6f4d5ae620d8980084690acd049be0cc28\",\"impliedFormat\":99},{\"version\":\"79182cb8300ae458110b9014011f3bce7a1f5983223128b1635f429ca4962b81\",\"impliedFormat\":99},{\"version\":\"9bb8a03e0015254999c1e96830242fa3764856fd14958d3b097149f4491b1fa6\",\"impliedFormat\":99},{\"version\":\"21655de6cf9d8df920b2dd8aaa5d6b4f88630c5c6f4df66947f4a2c4e59f7c79\",\"impliedFormat\":99},{\"version\":\"7db915f07d1dec500718675edd2881ccd140132b7954eecb1bbc4313597ab4b0\",\"impliedFormat\":99},{\"version\":\"7981d90e43327e29911a56c198f090dd816c5f2a15335c294c3f010f02b8f01b\",\"impliedFormat\":99},{\"version\":\"5819a2787a272ae1b20f1cc8c81d98ddf09b163ad24cd1318719113a61205970\",\"impliedFormat\":99},{\"version\":\"7f45ae699788ef0d76c10eaf0ed2fd3843ae12514355842c7ec6d5403925ace1\",\"impliedFormat\":99},{\"version\":\"c565deb632ba928f5ca6e1ad8fea0410a7695b6fabbd1132618f0d329cda0f50\",\"impliedFormat\":99},{\"version\":\"111346e95c27db969bebdf620d68008685571fb01e07c4f9c722f600f5fdda3e\",\"impliedFormat\":99},{\"version\":\"a482905e0aed325e2f3cfd61de96fbf7c11e068e79c65f1974948d8962b85c2e\",\"impliedFormat\":99},{\"version\":\"21ba214033e94c069266f184870db915957890ba80ee669cdca6f2c2346644d7\",\"impliedFormat\":99},{\"version\":\"8dd2b29d482fb6746cfdcff57c1441d105f41ee91daaf346e1d11fd47650c783\",\"impliedFormat\":99},{\"version\":\"4b3035f436869dc5da9815cb51a371a972fe31e2515c5dc594b3d74ddb701bee\",\"impliedFormat\":99},{\"version\":\"13e18664181a3e017dcd8d6da49baf9d039092717810b0c7ca28fa50e3c8734f\",\"impliedFormat\":99},{\"version\":\"8d2a9a4b17120c5c34ff1016a92b33b90e72f9430d8f58f16504beac3f5eba81\",\"impliedFormat\":99},{\"version\":\"580307f6deb46c1f0045f9e74281cc285d2e7e39c96b378e31c251ba09521c9b\",\"impliedFormat\":99},{\"version\":\"5b800f6a5c739360992423332074038edd736bc74b5565373448162289e933af\",\"impliedFormat\":99},{\"version\":\"b78a24b52dea49fa0b8651db08e733debc94c4289700d1ebc89601972daabcbe\",\"impliedFormat\":99},{\"version\":\"e1ce38cfb5b10848859e3c4dfbe9c42521967c4e91042e1f3c40c59c17432dda\",\"impliedFormat\":99},{\"version\":\"a6835ba7439febe71eb3106bb4d26584794dc0f4855cd4c2af3ac2c9f5b25377\",\"impliedFormat\":99},{\"version\":\"85948b36914a06d93bd22ee8580794b8e8486fcd814c301ffbbdce2371dea86d\",\"impliedFormat\":99},{\"version\":\"ec455fb31d11dc3782f7c7bc81bc1ffee91e360b66ee6a55ee8135c896a9b0cd\",\"impliedFormat\":99},{\"version\":\"d8f1e5f8e2f59c9ace3deedff9f1d5fd9aea1fd6abea384dde6f9ca132b5fe79\",\"impliedFormat\":99},{\"version\":\"7022da6a9c58eee4317bc9ed61af467e92ade72a59f9e3785ab7fe8badcb9a35\",\"impliedFormat\":99},{\"version\":\"5692c147dca7d616c0c8f2e8c533515c94457b7232fa255970102aebebaf3fc2\",\"impliedFormat\":99},{\"version\":\"e75a927cc44a75ceadbe2e95ed18cf0b9ba904e14d37c1e2bd24b17b9ae7843b\",\"impliedFormat\":99},{\"version\":\"a97e0fea0ab50bceccc582e21eab30bdcfb4336df84ba51ac633fc1331ad6e90\",\"impliedFormat\":99},{\"version\":\"2ae624226a9bcb73293716bf1054b244938ba91eb3926f4cbc81157e3252513e\",\"impliedFormat\":99},{\"version\":\"59ec53aae4cb5a602660390aab1cbddfc30a8ade8827395ee2e3b30e579377a5\",\"impliedFormat\":99},{\"version\":\"2dca9b2566990a7508270b19ff7a36bce81d829509214a4ac87564ae2bb386fd\",\"impliedFormat\":99},{\"version\":\"cd0c217d59afc04deccdffbe56c75fcfd86170e18252990c7bd8c67725e07132\",\"impliedFormat\":99},{\"version\":\"9737c5818211975651a00a350f9dd836dd13c4de1fd8e5557e208bcecf5a6cea\",\"impliedFormat\":99},{\"version\":\"2d0a4e661dac6ba0e8b6b8e0672d62e5dafea155223d185d9a9298acf2d14665\",\"impliedFormat\":99},{\"version\":\"d6828477d01712f5841330b674ce2f6a76ae298a926f6fdbe67ba7660ec3ace3\",\"impliedFormat\":99},{\"version\":\"347290356c13d55723dd8a866f9f1c85c463b2d00463a72ad072a55600fc8616\",\"impliedFormat\":99},{\"version\":\"642899659eb387a4ced2f61d5d6a2fd20d792b68a3ee4321c446e014da5bf9e1\",\"impliedFormat\":99},{\"version\":\"8fc9c4434476710427388af587998bac7a347cc68329b7da3a57fb11b72d12f3\",\"impliedFormat\":99},{\"version\":\"d64fd4bea85624039b7b0441454419bbedd4501b553395a71bcbf8656f8df237\",\"impliedFormat\":99},{\"version\":\"016e62f3268bdd7223c7ae9b9dc48acad3703ab46d83551b40c448bf24988426\",\"impliedFormat\":99},{\"version\":\"ec3602337c24adb3702d9057f07a2b8751783059303663316736830011d4b474\",\"impliedFormat\":99},{\"version\":\"c8a2414eda9226c6c50af454a9ea1536c176e58432e755ba5fcb229f996d9133\",\"impliedFormat\":99},{\"version\":\"d14328f8d67ccb14c3cff684f2232433977c7eea206444561fa2f379702408eb\",\"impliedFormat\":99},{\"version\":\"6c924e274aa22a4e099fc378a61cadbc90c4fbea075cd1fd577e2a0e9afaf182\",\"impliedFormat\":99},{\"version\":\"393d1b40f1541ea9861b860564c623e3a40e3d959147382af1f49eed8b84be43\",\"impliedFormat\":99},{\"version\":\"7ffda1567fdd3b535ef60e5b8cbab6bb2d11f8fc998e88060c30e595bf61452f\",\"impliedFormat\":99},{\"version\":\"164af37e5cde8d2d830b5a5f2aaa6be547b8004e4e98b33fd6977581f8be4d4a\",\"impliedFormat\":99},{\"version\":\"3f677da0a7ddc370dcab43603da691955a7e0479dac12086696355af9741b5ac\",\"impliedFormat\":99},{\"version\":\"e0ace1698102560c3b8090c2dd1f63ecd0a2b8601b4cb4b16df8642793fd036f\",\"impliedFormat\":99},{\"version\":\"cfb10af0ff7ca1449f9cfe9ab9ea22717f78e7b7d1ca41a88095c584316a4515\",\"impliedFormat\":99},{\"version\":\"9c31f13604ee809712dd2c1e5c78283ec52cdad5b8713f5664c554b8d772e71b\",\"impliedFormat\":99},{\"version\":\"5db46b90fabb0e78d84d231fe090aff47e09d2cacb4a38b6b06bc5a2f9c73cb0\",\"impliedFormat\":99},{\"version\":\"0eb30dfdea5fb0bc646ece93f7e368e39f63a846c28728eaa3714ae67ebf4a4b\",\"impliedFormat\":99},{\"version\":\"533fe789a14f6087b274308c257964da60cce305b42f55f5e9483315e5ac19b6\",\"impliedFormat\":99},{\"version\":\"3bbde357e5d8d70cd29460e158586f4ff7c57e12d4ae997ad5368d6431a5e892\",\"impliedFormat\":99},{\"version\":\"d2000199162496a4e85e7ddc9ea0ab05286737b6acb6b8390100fac220e8cb77\",\"impliedFormat\":99},{\"version\":\"aaebbcd44c28c0e088dda4bd1c94aabc126318a96938dc849c0fc21d5ce0afc7\",\"impliedFormat\":99},{\"version\":\"2eb2ae4eafdbd55fd83c6e2fb6006bfa824d660b7d65f757b63d89e8eef207d8\",\"signature\":\"73a3d957eeaad9fd4f8b582a272a9a2f363f596d61f27ed124df4ec55eb3a98e\"},{\"version\":\"2fbe402f0ee5aa8ab55367f88030f79d46211c0a0f342becaa9f648bf8534e9d\",\"impliedFormat\":1},{\"version\":\"b94258ef37e67474ac5522e9c519489a55dcb3d4a8f645e335fc68ea2215fe88\",\"impliedFormat\":1},{\"version\":\"5f4193062a0683777176c6197da8cc3ff47aca377d825bc23023b5cf737cb1ea\",\"signature\":\"d7e388f14609a50bbbc08d6328614c339899629ca30504c9b37dec56c17998d1\"},{\"version\":\"b8e1b17985f4c1d4b19d7b4db1f4b2262232aa41780f54b7b8e6b423ae01ec47\",\"signature\":\"20bbf693fec39419f3bc46176f3ad34ea4ab9e1bb968f5b87bfe7e008f174e88\"},{\"version\":\"759e023f04707e668f4c7ee9531f21ff4ba4c48fbec4ed70d343645d6061062a\",\"signature\":\"08adb99a7a26637ac22e816bfa4bb7b62556a6b82585e5ebf71f153db5a02d50\"},{\"version\":\"99bde2b1166cf7916e1689fc2354988f86dde60bbbb375f84eec8f80b85459d5\",\"signature\":\"a9d6b67257c3afce0c727229a9460ebf0e601feada6dd2b1c63645b24e6558bd\"},{\"version\":\"836234ed0574f14755685099dae1521ea8f31165334390b8470644e4ca1d1ce7\",\"signature\":\"fc5f9f063abeb2a9f550b02443b92d0524773fdf0802c086fb72511ae3f972dc\"},{\"version\":\"f4bacb31e07bc4209716f18ede8eb6301c1f92662b106259c1e2eddef67b1f2f\",\"signature\":\"4c7733b113b162da45270a817619eb7a27546eb07192d189965582c32d3b33df\"},{\"version\":\"d02bd32b6e10bacc1acab8e5b027ca133559eabf968d24f16fcae19dbd335a0e\",\"signature\":\"20bca80714887c777f61035b96946632a78c5daaff62b75456f6a98c603d65f8\"},{\"version\":\"3a27dab01e1f8c34adedd237af88fd0ce69f4c958134e57520e77be979914401\",\"signature\":\"9fcdf2ecf0cbec13ae7fb4b55197d4f895a06f7b727b0e51bb7bbbc1990a3ca2\"},{\"version\":\"57ae71d27ee71b7d1f2c6d867ddafbbfbaa629ad75565e63a508dbaa3ef9f859\",\"impliedFormat\":99},{\"version\":\"60924ca0c60f0674f208bfa1eaaa54e6973ced7650df7c7a81ae069730ef665a\",\"impliedFormat\":99},{\"version\":\"e3181c7595a89dd03ba9a20eb5065fa37e0b0a514261bed774f6ae2241634470\",\"impliedFormat\":99},{\"version\":\"c42d5cbf94816659c01f7c2298d0370247f1a981f8ca6370301b7a03b3ced950\",\"impliedFormat\":99},{\"version\":\"18c18ab0341fd5fdfefb5d992c365be1696bfe000c7081c964582b315e33f8f2\",\"impliedFormat\":99},{\"version\":\"dafbd4199902d904e3d4a233b5faf5dc4c98847fcd8c0ddd7617b2aed50e90d8\",\"impliedFormat\":99},{\"version\":\"9fc866f9783d12d0412ed8d68af5e4c9e44f0072d442b0c33c3bda0a5c8cae15\",\"impliedFormat\":99},{\"version\":\"5fc13d24a2d0328eac00c4e73cc052a987fbced2151bc0d3b7eb8f3ba4d0f4e2\",\"impliedFormat\":99},{\"version\":\"2cef84bf00cbdb452fdc5d8ecfe7b8c0aa3fa788bdc4ad8961e2e636530dbb60\",\"impliedFormat\":99},{\"version\":\"24104650185414f379d5cc35c0e2c19f06684a73de5b472bae79e0d855771ecf\",\"impliedFormat\":99},{\"version\":\"799003c0ab928582fca04977f47b8d85b43a8de610f4eef0ad2d069fbb9f9399\",\"impliedFormat\":99},{\"version\":\"b13dd41c344a23e085f81b2f5cd96792e6b35ae814f32b25e39d9841844ad240\",\"impliedFormat\":99},{\"version\":\"17d8b4e6416e48b6e23b73d05fd2fde407e2af8fddbe9da2a98ede14949c3489\",\"impliedFormat\":99},{\"version\":\"6d17b2b41f874ab4369b8e04bdbe660163ea5c8239785c850f767370604959e3\",\"impliedFormat\":99},{\"version\":\"04b4c044c8fe6af77b6c196a16c41e0f7d76b285d036d79dcaa6d92e24b4982b\",\"impliedFormat\":99},{\"version\":\"30bdeead5293c1ddfaea4097d3e9dd5a6b0bc59a1e07ff4714ea1bbe7c5b2318\",\"impliedFormat\":99},{\"version\":\"e7df226dcc1b0ce76b32f160556f3d1550124c894aae2d5f73cefaaf28df7779\",\"impliedFormat\":99},{\"version\":\"f2b7eef5c46c61e6e72fba9afd7cc612a08c0c48ed44c3c5518559d8508146a2\",\"impliedFormat\":99},{\"version\":\"00f0ba57e829398d10168b7db1e16217f87933e61bd8612b53a894bd7d6371da\",\"impliedFormat\":99},{\"version\":\"126b20947d9fa74a88bb4e9281462bda05e529f90e22d08ee9f116a224291e84\",\"impliedFormat\":99},{\"version\":\"40d9e43acee39702745eb5c641993978ac40f227475eacc99a83ba893ad995db\",\"impliedFormat\":99},{\"version\":\"8a66b69b21c8de9cb88b4b6d12f655d5b7636e692a014c5aa1bd81745c8c51d5\",\"impliedFormat\":99},{\"version\":\"ebbb846bdd5a78fdacff59ae04cea7a097912aeb1a2b34f8d88f4ebb84643069\",\"impliedFormat\":99},{\"version\":\"7321adb29ffd637acb33ee67ea035f1a97d0aa0b14173291cc2fd58e93296e04\",\"impliedFormat\":99},{\"version\":\"320816f1a4211188f07a782bdb6c1a44555b3e716ce13018f528ad7387108d5f\",\"impliedFormat\":99},{\"version\":\"b2cc8a474b7657f4a03c67baf6bff75e26635fd4b5850675e8cad524a09ddd0c\",\"impliedFormat\":99},{\"version\":\"0d081e9dc251063cc69611041c17d25847e8bdbe18164baaa89b7f1f1633c0ab\",\"impliedFormat\":99},{\"version\":\"a64c25d8f4ec16339db49867ea2324e77060782993432a875d6e5e8608b0de1e\",\"impliedFormat\":99},{\"version\":\"0739310b6b777f3e2baaf908c0fbc622c71160e6310eb93e0d820d86a52e2e23\",\"impliedFormat\":99},{\"version\":\"37b32e4eadd8cd3c263e7ac1681c58b2ac54f3f77bb34c5e4326cc78516d55a9\",\"impliedFormat\":99},{\"version\":\"9b7a8974e028c4ed6f7f9abb969e3eb224c069fd7f226e26fcc3a5b0e2a1eba8\",\"impliedFormat\":99},{\"version\":\"e8100b569926a5592146ed68a0418109d625a045a94ed878a8c5152b1379237c\",\"impliedFormat\":99},{\"version\":\"594201c616c318b7f3149a912abd8d6bdf338d765b7bcbde86bca2e66b144606\",\"impliedFormat\":99},{\"version\":\"03e380975e047c5c6ded532cf8589e6cc85abb7be3629e1e4b0c9e703f2fd36f\",\"impliedFormat\":99},{\"version\":\"fae14b53b7f52a8eb3274c67c11f261a58530969885599efe3df0277b48909e1\",\"impliedFormat\":99},{\"version\":\"c41206757c428186f2e0d1fd373915c823504c249336bdc9a9c9bbdf9da95fef\",\"impliedFormat\":99},{\"version\":\"e961f853b7b0111c42b763a6aa46fc70d06a697db3d8ed69b38f7ba0ae42a62b\",\"impliedFormat\":99},{\"version\":\"3db90f79e36bcb60b3f8de1bc60321026800979c150e5615047d598c787a64b7\",\"impliedFormat\":99},{\"version\":\"639b6fb3afbb8f6067c1564af2bd284c3e883f0f1556d59bd5eb87cdbbdd8486\",\"impliedFormat\":99},{\"version\":\"49795f5478cb607fd5965aa337135a8e7fd1c58bc40c0b6db726adf186dd403f\",\"impliedFormat\":99},{\"version\":\"7d8890e6e2e4e215959e71d5b5bd49482cf7a23be68d48ea446601a4c99bd511\",\"impliedFormat\":99},{\"version\":\"d56f72c4bb518de5702b8b6ae3d3c3045c99e0fd48b3d3b54c653693a8378017\",\"impliedFormat\":99},{\"version\":\"4c9ac40163e4265b5750510d6d2933fb7b39023eed69f7b7c68b540ad960826e\",\"impliedFormat\":99},{\"version\":\"8dfab17cf48e7be6e023c438a9cdf6d15a9b4d2fa976c26e223ba40c53eb8da8\",\"impliedFormat\":99},{\"version\":\"38bdf7ccacfd8e418de3a7b1e3cecc29b5625f90abc2fa4ac7843a290f3bf555\",\"impliedFormat\":99},{\"version\":\"9819e46a914735211fbc04b8dc6ba65152c62e3a329ca0601a46ba6e05b2c897\",\"impliedFormat\":99},{\"version\":\"50f0dc9a42931fb5d65cdd64ba0f7b378aedd36e0cfca988aa4109aad5e714cb\",\"impliedFormat\":99},{\"version\":\"894f23066f9fafccc6e2dd006ed5bd85f3b913de90f17cf1fe15a2eb677fd603\",\"impliedFormat\":99},{\"version\":\"abdf39173867e6c2d6045f120a316de451bbb6351a6929546b8470ddf2e4b3b9\",\"impliedFormat\":99},{\"version\":\"aa2cb4053f948fbd606228195bbe44d78733861b6f7204558bbee603202ee440\",\"impliedFormat\":99},{\"version\":\"6911b41bfe9942ac59c2da1bbcbe5c3c1f4e510bf65cae89ed00f434cc588860\",\"impliedFormat\":99},{\"version\":\"7b81bc4d4e2c764e85d869a8dd9fe3652b34b45c065482ac94ffaacc642b2507\",\"impliedFormat\":99},{\"version\":\"895df4edb46ccdcbce2ec982f5eed292cf7ea3f7168f1efea738ee346feab273\",\"impliedFormat\":99},{\"version\":\"8692bb1a4799eda7b2e3288a6646519d4cebb9a0bddf800085fc1bd8076997a0\",\"impliedFormat\":99},{\"version\":\"239c9e98547fe99711b01a0293f8a1a776fc10330094aa261f3970aaba957c82\",\"impliedFormat\":99},{\"version\":\"34833ec50360a32efdc12780ae624e9a710dd1fd7013b58c540abf856b54285a\",\"impliedFormat\":99},{\"version\":\"647538e4007dcc351a8882067310a0835b5bb8559d1cfa5f378e929bceb2e64d\",\"impliedFormat\":99},{\"version\":\"992d6b1abcc9b6092e5a574d51d441238566b6461ade5de53cb9718e4f27da46\",\"impliedFormat\":99},{\"version\":\"938702305649bf1050bd79f3803cf5cc2904596fc1edd4e3b91033184eae5c54\",\"impliedFormat\":99},{\"version\":\"1e931d3c367d4b96fe043e792196d9c2cf74f672ff9c0b894be54e000280a79d\",\"impliedFormat\":99},{\"version\":\"05bec322ea9f6eb9efcd6458bb47087e55bd688afdd232b78379eb5d526816ed\",\"impliedFormat\":99},{\"version\":\"4c449a874c2d2e5e5bc508e6aa98f3140218e78c585597a21a508a647acd780a\",\"impliedFormat\":99},{\"version\":\"dae15e326140a633d7693e92b1af63274f7295ea94fb7c322d5cbe3f5e48be88\",\"impliedFormat\":99},{\"version\":\"c2b0a869713bca307e58d81d1d1f4b99ebfc7ec8b8f17e80dde40739aa8a2bc6\",\"impliedFormat\":99},{\"version\":\"6e4b4ff6c7c54fa9c6022e88f2f3e675eac3c6923143eb8b9139150f09074049\",\"impliedFormat\":99},{\"version\":\"69559172a9a97bbe34a32bff8c24ef1d8c8063feb5f16a6d3407833b7ee504cf\",\"impliedFormat\":99},{\"version\":\"86b94a2a3edcb78d9bfcdb3b382547d47cb017e71abe770c9ee8721e9c84857f\",\"impliedFormat\":99},{\"version\":\"e3fafafda82853c45c0afc075fea1eaf0df373a06daf6e6c7f382f9f61b2deb3\",\"impliedFormat\":99},{\"version\":\"a4ba4b31de9e9140bc49c0addddbfaf96b943a7956a46d45f894822e12bf5560\",\"impliedFormat\":99},{\"version\":\"d8a7926fc75f2ed887f17bae732ee31a4064b8a95a406c87e430c58578ee1f67\",\"impliedFormat\":99},{\"version\":\"9886ffbb134b0a0059fd82219eba2a75f8af341d98bc6331b6ef8a921e10ec68\",\"impliedFormat\":99},{\"version\":\"c2ead057b70d0ae7b87a771461a6222ebdb187ba6f300c974768b0ae5966d10e\",\"impliedFormat\":99},{\"version\":\"46687d985aed8485ab2c71085f82fafb11e69e82e8552cf5d3849c00e64a00a5\",\"impliedFormat\":99},{\"version\":\"999ca66d4b5e2790b656e0a7ce42267737577fc7a52b891e97644ec418eff7ec\",\"impliedFormat\":99},{\"version\":\"ec948ee7e92d0888f92d4a490fdd0afb27fbf6d7aabebe2347a3e8ac82c36db9\",\"impliedFormat\":99},{\"version\":\"03ef2386c683707ce741a1c30cb126e8c51a908aa0acc01c3471fafb9baaacd5\",\"impliedFormat\":99},{\"version\":\"66a372e03c41d2d5e920df5282dadcec2acae4c629cb51cab850825d2a144cea\",\"impliedFormat\":99},{\"version\":\"ddf9b157bd4c06c2e4646c9f034f36267a0fbd028bd4738214709de7ea7c548b\",\"impliedFormat\":99},{\"version\":\"3e795aac9be23d4ad9781c00b153e7603be580602e40e5228e2dafe8a8e3aba1\",\"impliedFormat\":99},{\"version\":\"98c461ec5953dfb1b5d5bca5fee0833c8a932383b9e651ca6548e55f1e2c71c3\",\"impliedFormat\":99},{\"version\":\"5c42107b46cb1d36b6f1dee268df125e930b81f9b47b5fa0b7a5f2a42d556c10\",\"impliedFormat\":99},{\"version\":\"7e32f1251d1e986e9dd98b6ff25f62c06445301b94aeebdf1f4296dbd2b8652f\",\"impliedFormat\":99},{\"version\":\"2f7e328dda700dcb2b72db0f58c652ae926913de27391bd11505fc5e9aae6c33\",\"impliedFormat\":99},{\"version\":\"3de7190e4d37da0c316db53a8a60096dbcd06d1a50677ccf11d182fa26882080\",\"impliedFormat\":99},{\"version\":\"a9d6f87e59b32b02c861aade3f4477d7277c30d43939462b93f48644fa548c58\",\"impliedFormat\":99},{\"version\":\"2bce8fd2d16a9432110bbe0ba1e663fd02f7d8b8968cd10178ea7bc306c4a5df\",\"impliedFormat\":99},{\"version\":\"798bedbf45a8f1e55594e6879cd46023e8767757ecce1d3feaa78d16ad728703\",\"impliedFormat\":99},{\"version\":\"62723d5ac66f7ed6885a3931dd5cfa017797e73000d590492988a944832e8bc2\",\"impliedFormat\":99},{\"version\":\"03db8e7df7514bf17fc729c87fff56ca99567b9aa50821f544587a666537c233\",\"impliedFormat\":99},{\"version\":\"9b1f311ba4409968b68bf20b5d892dbd3c5b1d65c673d5841c7dbde351bc0d0b\",\"impliedFormat\":99},{\"version\":\"2d1e8b5431502739fe335ceec0aaded030b0f918e758a5d76f61effa0965b189\",\"impliedFormat\":99},{\"version\":\"e725839b8f884dab141b42e9d7ff5659212f6e1d7b4054caa23bc719a4629071\",\"impliedFormat\":99},{\"version\":\"4fa38a0b8ae02507f966675d0a7d230ed67c92ab8b5736d99a16c5fbe2b42036\",\"impliedFormat\":99},{\"version\":\"50ec1e8c23bad160ddedf8debeebc722becbddda127b8fdce06c23eacd3fe689\",\"impliedFormat\":99},{\"version\":\"9a0aea3a113064fd607f41375ade308c035911d3c8af5ae9db89593b5ca9f1f9\",\"impliedFormat\":99},{\"version\":\"8d643903b58a0bf739ce4e6a8b0e5fb3fbdfaacbae50581b90803934b27d5b89\",\"impliedFormat\":99},{\"version\":\"19de2915ccebc0a1482c2337b34cb178d446def2493bf775c4018a4ea355adb8\",\"impliedFormat\":99},{\"version\":\"9be8fc03c8b5392cd17d40fd61063d73f08d0ee3457ecf075dcb3768ae1427bd\",\"impliedFormat\":99},{\"version\":\"a2d89a8dc5a993514ca79585039eea083a56822b1d9b9d9d85b14232e4782cbe\",\"impliedFormat\":99},{\"version\":\"f526f20cae73f17e8f38905de4c3765287575c9c4d9ecacee41cfda8c887da5b\",\"impliedFormat\":99},{\"version\":\"d9ec0978b7023612b9b83a71fee8972e290d02f8ff894e95cdd732cd0213b070\",\"impliedFormat\":99},{\"version\":\"7ab10c473a058ec8ac4790b05cae6f3a86c56be9b0c0a897771d428a2a48a9f9\",\"impliedFormat\":99},{\"version\":\"451d7a93f8249d2e1453b495b13805e58f47784ef2131061821b0e456a9fd0e1\",\"impliedFormat\":99},{\"version\":\"21c56fe515d227ed4943f275a8b242d884046001722a4ba81f342a08dbe74ae2\",\"impliedFormat\":99},{\"version\":\"d8311f0c39381aa1825081c921efde36e618c5cf46258c351633342a11601208\",\"impliedFormat\":99},{\"version\":\"6b50c3bcc92dc417047740810596fcb2df2502aa3f280c9e7827e87896da168a\",\"impliedFormat\":99},{\"version\":\"18a6b318d1e7b31e5749a52be0cf9bbce1b275f63190ef32e2c79db0579328ca\",\"impliedFormat\":99},{\"version\":\"6a2d0af2c27b993aa85414f3759898502aa198301bc58b0d410948fe908b07b0\",\"impliedFormat\":99},{\"version\":\"2da11b6f5c374300e5e66a6b01c3c78ec21b5d3fec0748a28cc28e00be73e006\",\"impliedFormat\":99},{\"version\":\"0729691b39c24d222f0b854776b00530877217bfc30aac1dc7fa2f4b1795c536\",\"impliedFormat\":99},{\"version\":\"ca45bb5c98c474d669f0e47615e4a5ae65d90a2e78531fda7862ee43e687a059\",\"impliedFormat\":99},{\"version\":\"c1c058b91d5b9a24c95a51aea814b0ad4185f411c38ac1d5eef0bf3cebec17dc\",\"impliedFormat\":99},{\"version\":\"3ab0ed4060b8e5b5e594138aab3e7f0262d68ad671d6678bcda51568d4fc4ccc\",\"impliedFormat\":99},{\"version\":\"e2bf1faba4ff10a6020c41df276411f641d3fdce5c6bae1db0ec84a0bf042106\",\"impliedFormat\":99},{\"version\":\"80b0a8fe14d47a71e23d7c3d4dcee9584d4282ef1d843b70cab1a42a4ea1588c\",\"impliedFormat\":99},{\"version\":\"a0f02a73f6e3de48168d14abe33bf5970fdacdb52d7c574e908e75ad571e78f7\",\"impliedFormat\":99},{\"version\":\"c728002a759d8ec6bccb10eed56184e86aeff0a762c1555b62b5d0fa9d1f7d64\",\"impliedFormat\":99},{\"version\":\"586f94e07a295f3d02f847f9e0e47dbf14c16e04ccc172b011b3f4774a28aaea\",\"impliedFormat\":99},{\"version\":\"cfe1a0f4ed2df36a2c65ea6bc235dbb8cf6e6c25feb6629989f1fa51210b32e7\",\"impliedFormat\":99},{\"version\":\"8ba69c9bf6de79c177329451ffde48ddab7ec495410b86972ded226552f664df\",\"impliedFormat\":99},{\"version\":\"15111cbe020f8802ad1d150524f974a5251f53d2fe10eb55675f9df1e82dbb62\",\"impliedFormat\":99},{\"version\":\"782dc153c56a99c9ed07b2f6f497d8ad2747764966876dbfef32f3e27ce11421\",\"impliedFormat\":99},{\"version\":\"cc2db30c3d8bb7feb53a9c9ff9b0b859dd5e04c83d678680930b5594b2bf99cb\",\"impliedFormat\":99},{\"version\":\"46909b8c85a6fd52e0807d18045da0991e3bdc7373435794a6ba425bc23cc6be\",\"impliedFormat\":99},{\"version\":\"e4e511ff63bb6bd69a2a51e472c6044298bca2c27835a34a20827bc3ef9b7d13\",\"impliedFormat\":99},{\"version\":\"2c86f279d7db3c024de0f21cd9c8c2c972972f842357016bfbbd86955723b223\",\"impliedFormat\":99},{\"version\":\"112c895cff9554cf754f928477c7d58a21191c8089bffbf6905c87fe2dc6054f\",\"impliedFormat\":99},{\"version\":\"8cfc293b33082003cacbf7856b8b5e2d6dd3bde46abbd575b0c935dc83af4844\",\"impliedFormat\":99},{\"version\":\"d2c5c53f85ce0474b3a876d76c4fc44ff7bb766b14ed1bf495f9abac181d7f5f\",\"impliedFormat\":99},{\"version\":\"3c523f27926905fcbe20b8301a0cc2da317f3f9aea2273f8fc8d9ae88b524819\",\"impliedFormat\":99},{\"version\":\"9ca0d706f6b039cc52552323aeccb4db72e600b67ddc7a54cebc095fc6f35539\",\"impliedFormat\":99},{\"version\":\"a64909a9f75081342ddd061f8c6b49decf0d28051bc78e698d347bdcb9746577\",\"impliedFormat\":99},{\"version\":\"7d8d55ae58766d0d52033eae73084c4db6a93c4630a3e17f419dd8a0b2a4dcd8\",\"impliedFormat\":99},{\"version\":\"b8b5c8ba972d9ffff313b3c8a3321e7c14523fc58173862187e8d1cb814168ac\",\"impliedFormat\":99},{\"version\":\"9c42c0fa76ee36cf9cc7cc34b1389fbb4bd49033ec124b93674ec635fabf7ffe\",\"impliedFormat\":99},{\"version\":\"6184c8da9d8107e3e67c0b99dedb5d2dfe5ccf6dfea55c2a71d4037caf8ca196\",\"impliedFormat\":99},{\"version\":\"4030ceea7bf41449c1b86478b786e3b7eadd13dfe5a4f8f5fe2eb359260e08b3\",\"impliedFormat\":99},{\"version\":\"7bf516ec5dfc60e97a5bde32a6b73d772bd9de24a2e0ec91d83138d39ac83d04\",\"impliedFormat\":99},{\"version\":\"e6a6fb3e6525f84edf42ba92e261240d4efead3093aca3d6eb1799d5942ba393\",\"impliedFormat\":99},{\"version\":\"45df74648934f97d26800262e9b2af2f77ef7191d4a5c2eb1df0062f55e77891\",\"impliedFormat\":99},{\"version\":\"3fe361e4e567f32a53af1f2c67ad62d958e3d264e974b0a8763d174102fe3b29\",\"impliedFormat\":99},{\"version\":\"28b520acee4bc6911bfe458d1ad3ebc455fa23678463f59946ad97a327c9ab2b\",\"impliedFormat\":99},{\"version\":\"121b39b1a9ad5d23ed1076b0db2fe326025150ef476dccb8bf87778fcc4f6dd7\",\"impliedFormat\":99},{\"version\":\"f791f92a060b52aa043dde44eb60307938f18d4c7ac13df1b52c82a1e658953f\",\"impliedFormat\":99},{\"version\":\"df09443e7743fd6adc7eb108e760084bacdf5914403b7aac5fbd4dc4e24e0c2c\",\"impliedFormat\":99},{\"version\":\"eeb4ff4aa06956083eaa2aad59070361c20254b865d986bc997ee345dbd44cbb\",\"impliedFormat\":99},{\"version\":\"ed84d5043444d51e1e5908f664addc4472c227b9da8401f13daa565f23624b6e\",\"impliedFormat\":99},{\"version\":\"146bf888b703d8baa825f3f2fb1b7b31bda5dff803e15973d9636cdda33f4af3\",\"impliedFormat\":99},{\"version\":\"b4ec8b7a8d23bdf7e1c31e43e5beac3209deb7571d2ccf2a9572865bf242da7c\",\"impliedFormat\":99},{\"version\":\"3fba0d61d172091638e56fba651aa1f8a8500aac02147d29bd5a9cc0bc8f9ec2\",\"impliedFormat\":99},{\"version\":\"a5a57deb0351b03041e0a1448d3a0cc5558c48e0ed9b79b69c99163cdca64ad8\",\"impliedFormat\":99},{\"version\":\"9bcecf0cbc2bfc17e33199864c19549905309a0f9ecc37871146107aac6e05ae\",\"impliedFormat\":99},{\"version\":\"d6a211db4b4a821e93c978add57e484f2a003142a6aef9dbfa1fe990c66f337b\",\"impliedFormat\":99},{\"version\":\"bd4d10bd44ce3f630dd9ce44f102422cb2814ead5711955aa537a52c8d2cae14\",\"impliedFormat\":99},{\"version\":\"08e4c39ab1e52eea1e528ee597170480405716bae92ebe7a7c529f490afff1e0\",\"impliedFormat\":99},{\"version\":\"625bb2bc3867557ea7912bd4581288a9fca4f3423b8dffa1d9ed57fafc8610e3\",\"impliedFormat\":99},{\"version\":\"d1992164ecc334257e0bef56b1fd7e3e1cea649c70c64ffc39999bb480c0ecdf\",\"impliedFormat\":99},{\"version\":\"a53ff2c4037481eb357e33b85e0d78e8236e285b6428b93aa286ceea1db2f5dc\",\"impliedFormat\":99},{\"version\":\"4fe608d524954b6857d78857efce623852fcb0c155f010710656f9db86e973a5\",\"impliedFormat\":99},{\"version\":\"b53b62a9838d3f57b70cc456093662302abb9962e5555f5def046172a4fe0d4e\",\"impliedFormat\":99},{\"version\":\"9866369eb72b6e77be2a92589c9df9be1232a1a66e96736170819e8a1297b61f\",\"impliedFormat\":99},{\"version\":\"43abfbdf4e297868d780b8f4cfdd8b781b90ecd9f588b05e845192146a86df34\",\"impliedFormat\":99},{\"version\":\"582419791241fb851403ae4a08d0712a63d4c94787524a7419c2bc8e0eb1b031\",\"impliedFormat\":99},{\"version\":\"18437eeb932fe48590b15f404090db0ab3b32d58f831d5ffc157f63b04885ee5\",\"impliedFormat\":99},{\"version\":\"0c5eaedf622d7a8150f5c2ec1f79ac3d51eea1966b0b3e61bfdea35e8ca213a7\",\"impliedFormat\":99},{\"version\":\"fac39fc7a9367c0246de3543a6ee866a0cf2e4c3a8f64641461c9f2dac0d8aae\",\"impliedFormat\":99},{\"version\":\"3b9f559d0200134f3c196168630997caedeadc6733523c8b6076a09615d5dec8\",\"impliedFormat\":99},{\"version\":\"932af64286d9723da5ef7b77a0c4229829ce8e085e6bcc5f874cb0b83e8310d4\",\"impliedFormat\":99},{\"version\":\"adeb9278f11f5561157feee565171c72fd48f5fe34ed06f71abf24e561fcaa1e\",\"impliedFormat\":99},{\"version\":\"2269fef79b4900fc6b08c840260622ca33524771ff24fda5b9101ad98ea551f3\",\"impliedFormat\":99},{\"version\":\"73d47498a1b73d5392d40fb42a3e7b009ae900c8423f4088c4faa663cc508886\",\"impliedFormat\":99},{\"version\":\"7efc34cdc4da0968c3ba687bc780d5cacde561915577d8d1c1e46c7ac931d023\",\"impliedFormat\":99},{\"version\":\"3c20a3bb0c50c819419f44aa55acc58476dad4754a16884cef06012d02b0722f\",\"impliedFormat\":99},{\"version\":\"4569abf6bc7d51a455503670f3f1c0e9b4f8632a3b030e0794c61bfbba2d13be\",\"impliedFormat\":99},{\"version\":\"98b2297b4dc1404078a54b61758d8643e4c1d7830af724f3ed2445d77a7a2d57\",\"impliedFormat\":99},{\"version\":\"952ba89d75f1b589e07070fea2d8174332e3028752e76fd46e1c16cc51e6e2af\",\"impliedFormat\":99},{\"version\":\"b6c9a2deefb6a57ff68d2a38d33c34407b9939487fc9ee9f32ba3ecf2987a88a\",\"impliedFormat\":99},{\"version\":\"f6b371377bab3018dac2bca63e27502ecbd5d06f708ad7e312658d3b5315d948\",\"impliedFormat\":99},{\"version\":\"31947dd8f1c8eeb7841e1f139a493a73bd520f90e59a6415375d0d8e6a031f01\",\"impliedFormat\":99},{\"version\":\"95cd83b807e10b1af408e62caf5fea98562221e8ddca9d7ccc053d482283ddda\",\"impliedFormat\":99},{\"version\":\"19287d6b76288c2814f1633bdd68d2b76748757ffd355e73e41151644e4773d6\",\"impliedFormat\":99},{\"version\":\"fc4e6ec7dade5f9d422b153c5d8f6ad074bd9cc4e280415b7dc58fb5c52b5df1\",\"impliedFormat\":99},{\"version\":\"3aea973106e1184db82d8880f0ca134388b6cbc420f7309d1c8947b842886349\",\"impliedFormat\":99},{\"version\":\"765e278c464923da94dda7c2b281ece92f58981642421ae097862effe2bd30fa\",\"impliedFormat\":99},{\"version\":\"de260bed7f7d25593f59e859bd7c7f8c6e6bb87e8686a0fcafa3774cb5ca02d8\",\"impliedFormat\":99},{\"version\":\"b5c341ce978f5777fbe05bc86f65e9906a492fa6b327bda3c6aae900c22e76c6\",\"impliedFormat\":99},{\"version\":\"686ddbfaf88f06b02c6324005042f85317187866ca0f8f4c9584dd9479653344\",\"impliedFormat\":99},{\"version\":\"7f789c0c1db29dd3aab6e159d1ba82894a046bf8df595ac48385931ae6ad83e0\",\"impliedFormat\":99},{\"version\":\"8eb3057d4fe9b59b2492921b73a795a2455ebe94ccb3d01027a7866612ead137\",\"impliedFormat\":99},{\"version\":\"1e43c5d7aee1c5ec20611e28b5417f5840c75d048de9d7f1800d6808499236f8\",\"impliedFormat\":99},{\"version\":\"d42610a5a2bee4b71769968a24878885c9910cd049569daa2d2ee94208b3a7a5\",\"impliedFormat\":99},{\"version\":\"f6ed95506a6ed2d40ed5425747529befaa4c35fcbbc1e0d793813f6d725690fa\",\"impliedFormat\":99},{\"version\":\"a6fcc1cd6583939506c906dff1276e7ebdc38fbe12d3e108ba38ad231bd18d97\",\"impliedFormat\":99},{\"version\":\"ed13354f0d96fb6d5878655b1fead51722b54875e91d5e53ef16de5b71a0e278\",\"impliedFormat\":99},{\"version\":\"1193b4872c1fb65769d8b164ca48124c7ebacc33eae03abf52087c2b29e8c46c\",\"impliedFormat\":99},{\"version\":\"af682dfabe85688289b420d939020a10eb61f0120e393d53c127f1968b3e9f66\",\"impliedFormat\":99},{\"version\":\"0dca04006bf13f72240c6a6a502df9c0b49c41c3cab2be75e81e9b592dcd4ea8\",\"impliedFormat\":99},{\"version\":\"79d6ac4a2a229047259116688f9cd62fda25422dee3ad304f77d7e9af53a41ef\",\"impliedFormat\":99},{\"version\":\"64534c17173990dc4c3d9388d16675a059aac407031cfce8f7fdffa4ee2de988\",\"impliedFormat\":99},{\"version\":\"ba46d160a192639f3ca9e5b640b870b1263f24ac77b6895ab42960937b42dcbb\",\"impliedFormat\":99},{\"version\":\"5e5ddd6fc5b590190dde881974ab969455e7fad61012e32423415ae3d085b037\",\"impliedFormat\":99},{\"version\":\"1c16fd00c42b60b96fe0fa62113a953af58ddf0d93b0a49cb4919cf5644616f0\",\"impliedFormat\":99},{\"version\":\"eb240c0e6b412c57f7d9a9f1c6cd933642a929837c807b179a818f6e8d3a4e44\",\"impliedFormat\":99},{\"version\":\"4a7bde5a1155107fc7d9483b8830099f1a6072b6afda5b78d91eb5d6549b3956\",\"impliedFormat\":99},{\"version\":\"3c1baaffa9a24cc7ef9eea6b64742394498e0616b127ca630aca0e11e3298006\",\"impliedFormat\":99},{\"version\":\"87ca1c31a326c898fa3feb99ec10750d775e1c84dbb7c4b37252bcf3742c7b21\",\"impliedFormat\":99},{\"version\":\"d7bd26af1f5457f037225602035c2d7e876b80d02663ab4ca644099ad3a55888\",\"impliedFormat\":99},{\"version\":\"2ad0a6b93e84a56b64f92f36a07de7ebcb910822f9a72ad22df5f5d642aff6f3\",\"impliedFormat\":99},{\"version\":\"523d1775135260f53f672264937ee0f3dc42a92a39de8bee6c48c7ea60b50b5a\",\"impliedFormat\":99},{\"version\":\"e441b9eebbc1284e5d995d99b53ed520b76a87cab512286651c4612d86cd408e\",\"impliedFormat\":99},{\"version\":\"76f853ee21425c339a79d28e0859d74f2e53dee2e4919edafff6883dd7b7a80f\",\"impliedFormat\":99},{\"version\":\"00cf042cd6ba1915648c8d6d2aa00e63bbbc300ea54d28ed087185f0f662e080\",\"impliedFormat\":99},{\"version\":\"f57e6707d035ab89a03797d34faef37deefd3dd90aa17d90de2f33dce46a2c56\",\"impliedFormat\":99},{\"version\":\"cc8b559b2cf9380ca72922c64576a43f000275c72042b2af2415ce0fb88d7077\",\"impliedFormat\":99},{\"version\":\"1a337ca294c428ba8f2eb01e887b28d080ee4a4307ae87e02e468b1d26af4a74\",\"impliedFormat\":99},{\"version\":\"5a15362fc2e72765a908c0d4dd89e3ab3b763e8bc8c23f19234a709ecfd202fe\",\"impliedFormat\":99},{\"version\":\"2dffdfe62ac8af0943853234519616db6fd8958fc7ff631149fd8364e663f361\",\"impliedFormat\":99},{\"version\":\"5dbdb2b2229b5547d8177c34705272da5a10b8d0033c49efbc9f6efba5e617f2\",\"impliedFormat\":99},{\"version\":\"6fc0498cd8823d139004baff830343c9a0d210c687b2402c1384fb40f0aa461c\",\"impliedFormat\":99},{\"version\":\"8492306a4864a1dc6fc7e0cc0de0ae9279cbd37f3aae3e9dc1065afcdc83dddc\",\"impliedFormat\":99},{\"version\":\"c011b378127497d6337a93f020a05f726db2c30d55dc56d20e6a5090f05919a6\",\"impliedFormat\":99},{\"version\":\"f4556979e95a274687ae206bbab2bb9a71c3ad923b92df241d9ab88c184b3f40\",\"impliedFormat\":99},{\"version\":\"50e82bb6e238db008b5beba16d733b77e8b2a933c9152d1019cf8096845171a4\",\"impliedFormat\":99},{\"version\":\"d6011f8b8bbf5163ef1e73588e64a53e8bf1f13533c375ec53e631aad95f1375\",\"impliedFormat\":99},{\"version\":\"693cd7936ac7acfa026d4bcb5801fce71cec49835ba45c67af1ef90dbfd30af7\",\"impliedFormat\":99},{\"version\":\"195e2cf684ecddfc1f6420564535d7c469f9611ce7a380d6e191811f84556cd2\",\"impliedFormat\":99},{\"version\":\"1dc6b6e7b2a7f2962f31c77f4713f3a5a132bbe14c00db75d557568fe82e4311\",\"impliedFormat\":99},{\"version\":\"add93b1180e9aaac2dae4ef3b16f7655893e2ecbe62bd9e48366c305f0063d89\",\"impliedFormat\":99},{\"version\":\"594bd896fe37c970aafb7a376ebeec4c0d636b62a5f611e2e27d30fb839ad8a5\",\"impliedFormat\":99},{\"version\":\"b1c6a6faf60542ba4b4271db045d7faea56e143b326ef507d2797815250f3afc\",\"impliedFormat\":99},{\"version\":\"8c8b165beb794260f462679329b131419e9f5f35212de11c4d53e6d4d9cbedf6\",\"impliedFormat\":99},{\"version\":\"ee5a4cf57d49fcf977249ab73c690a59995997c4672bb73fcaaf2eed65dbd1b2\",\"impliedFormat\":99},{\"version\":\"f9f36051f138ab1c40b76b230c2a12b3ce6e1271179f4508da06a959f8bee4c1\",\"impliedFormat\":99},{\"version\":\"9dc2011a3573d271a45c12656326530c0930f92539accbec3531d65131a14a14\",\"impliedFormat\":99},{\"version\":\"091521ce3ede6747f784ae6f68ad2ea86bbda76b59d2bf678bcad2f9d141f629\",\"impliedFormat\":99},{\"version\":\"202c2be951f53bafe943fb2c8d1245e35ed0e4dfed89f48c9a948e4d186dd6d4\",\"impliedFormat\":99},{\"version\":\"c618aead1d799dbf4f5b28df5a6b9ce13d72722000a0ec3fe90a8115b1ea9226\",\"impliedFormat\":99},{\"version\":\"9b0bf59708549c3e77fddd36530b95b55419414f88bbe5893f7bc8b534617973\",\"impliedFormat\":99},{\"version\":\"7e216f67c4886f1bde564fb4eebdd6b185f262fe85ad1d6128cad9b229b10354\",\"impliedFormat\":99},{\"version\":\"cd51e60b96b4d43698df74a665aa7a16604488193de86aa60ec0c44d9f114951\",\"impliedFormat\":99},{\"version\":\"b63341fb6c7ba6f2aeabd9fc46b43e6cc2d2b9eec06534cfd583d9709f310ec2\",\"impliedFormat\":99},{\"version\":\"be2af50c81b15bcfe54ad60f53eb1c72dae681c72d0a9dce1967825e1b5830a3\",\"impliedFormat\":99},{\"version\":\"be5366845dfb9726f05005331b9b9645f237f1ddc594c0def851208e8b7d297b\",\"impliedFormat\":99},{\"version\":\"5ddd536aaeadd4bf0f020492b3788ed209a7050ce27abec4e01c7563ff65da81\",\"impliedFormat\":99},{\"version\":\"e243b24da119c1ef0d79af2a45217e50682b139cb48e7607efd66cc01bd9dcda\",\"impliedFormat\":99},{\"version\":\"5b1398c8257fd180d0bf62e999fe0a89751c641e87089a83b24392efda720476\",\"impliedFormat\":99},{\"version\":\"1588b1359f8507a16dbef67cd2759965fc2e8d305e5b3eb71be5aa9506277dff\",\"impliedFormat\":99},{\"version\":\"4c99f2524eee1ec81356e2b4f67047a4b7efaf145f1c4eb530cd358c36784423\",\"impliedFormat\":99},{\"version\":\"b30c6b9f6f30c35d6ef84daed1c3781e367f4360171b90598c02468b0db2fc3d\",\"impliedFormat\":99},{\"version\":\"79c0d32274ccfd45fae74ac61d17a2be27aea74c70806d22c43fc625b7e9f12a\",\"impliedFormat\":99},{\"version\":\"1b7e3958f668063c9d24ac75279f3e610755b0f49b1c02bb3b1c232deb958f54\",\"impliedFormat\":99},{\"version\":\"779d4022c3d0a4df070f94858a33d9ebf54af3664754536c4ce9fd37c6f4a8db\",\"impliedFormat\":99},{\"version\":\"e662f063d46aa8c088edffdf1d96cb13d9a2cbf06bc38dc6fc62b4d125fb7b49\",\"impliedFormat\":99},{\"version\":\"d1d612df1e41c90d9678b07740d13d4f8e6acec2f17390d4ff4be5c889a6d37d\",\"impliedFormat\":99},{\"version\":\"c95933fe140918892d569186f17b70ef6b1162f851a0f13f6a89e8f4d599c5a1\",\"impliedFormat\":99},{\"version\":\"1d8d30677f87c13c2786980a80750ac1e281bdb65aa013ea193766fe9f0edd74\",\"impliedFormat\":99},{\"version\":\"4661673cbc984b8a6ee5e14875a71ed529b64e7f8e347e12c0db4cecc25ad67d\",\"impliedFormat\":99},{\"version\":\"7f980a414274f0f23658baa9a16e21d828535f9eac538e2eab2bb965325841db\",\"impliedFormat\":99},{\"version\":\"20fb747a339d3c1d4a032a31881d0c65695f8167575e01f222df98791a65da9b\",\"impliedFormat\":99},{\"version\":\"dd4e7ebd3f205a11becf1157422f98db675a626243d2fbd123b8b93efe5fb505\",\"impliedFormat\":99},{\"version\":\"43ec6b74c8d31e88bb6947bb256ad78e5c6c435cbbbad991c3ff39315b1a3dba\",\"impliedFormat\":99},{\"version\":\"b27242dd3af2a5548d0c7231db7da63d6373636d6c4e72d9b616adaa2acef7e1\",\"impliedFormat\":99},{\"version\":\"e0ee7ba0571b83c53a3d6ec761cf391e7128d8f8f590f8832c28661b73c21b68\",\"impliedFormat\":99},{\"version\":\"072bfd97fc61c894ef260723f43a416d49ebd8b703696f647c8322671c598873\",\"impliedFormat\":99},{\"version\":\"e70875232f5d5528f1650dd6f5c94a5bed344ecf04bdbb998f7f78a3c1317d02\",\"impliedFormat\":99},{\"version\":\"8e495129cb6cd8008de6f4ff8ce34fe1302a9e0dcff8d13714bd5593be3f7898\",\"impliedFormat\":99},{\"version\":\"0345bc0b1067588c4ea4c48e34425d3284498c629bc6788ebc481c59949c9037\",\"impliedFormat\":99},{\"version\":\"e30f5b5d77c891bc16bd65a2e46cd5384ea57ab3d216c377f482f535db48fc8f\",\"impliedFormat\":99},{\"version\":\"f113afe92ee919df8fc29bca91cab6b2ffbdd12e4ac441d2bb56121eb5e7dbe3\",\"impliedFormat\":99},{\"version\":\"49d567cc002efb337f437675717c04f207033f7067825b42bb59c9c269313d83\",\"impliedFormat\":99},{\"version\":\"1d248f707d02dc76555298a934fba0f337f5028bb1163ce59cd7afb831c9070f\",\"impliedFormat\":99},{\"version\":\"5d8debffc9e7b842dc0f17b111673fe0fc0cca65e67655a2b543db2150743385\",\"impliedFormat\":99},{\"version\":\"5fccbedc3eb3b23bc6a3a1e44ceb110a1f1a70fa8e76941dce3ae25752caa7a9\",\"impliedFormat\":99},{\"version\":\"f4031b95f3bab2b40e1616bd973880fb2f1a97c730bac5491d28d6484fac9560\",\"impliedFormat\":99},{\"version\":\"dbe75b3c5ed547812656e7945628f023c4cd0bc1879db0db3f43a57fb8ec0e2b\",\"impliedFormat\":99},{\"version\":\"b754718a546a1939399a6d2a99f9022d8a515f2db646bab09f7d2b5bff3cbb82\",\"impliedFormat\":99},{\"version\":\"2eef10fb18ed0b4be450accf7a6d5bcce7b7f98e02cac4e6e793b7ad04fc0d79\",\"impliedFormat\":99},{\"version\":\"c46f471e172c3be12c0d85d24876fedcc0c334b0dab48060cdb1f0f605f09fed\",\"impliedFormat\":99},{\"version\":\"7d6ddeead1d208588586c58c26e4a23f0a826b7a143fb93de62ed094d0056a33\",\"impliedFormat\":99},{\"version\":\"7c5782291ff6e7f2a3593295681b9a411c126e3736b83b37848032834832e6b9\",\"impliedFormat\":99},{\"version\":\"3a3f09df6258a657dd909d06d4067ee360cd2dccc5f5d41533ae397944a11828\",\"impliedFormat\":99},{\"version\":\"ea54615be964503fec7bce04336111a6fa455d3e8d93d44da37b02c863b93eb8\",\"impliedFormat\":99},{\"version\":\"2a83694bc3541791b64b0e57766228ea23d92834df5bf0b0fcb93c5bb418069c\",\"impliedFormat\":99},{\"version\":\"b5913641d6830e7de0c02366c08b1d26063b5758132d8464c938e78a45355979\",\"impliedFormat\":99},{\"version\":\"46c095d39c1887979d9494a824eda7857ec13fb5c20a6d4f7d02c2975309bf45\",\"impliedFormat\":99},{\"version\":\"f6e02ca076dc8e624aa38038e3488ebd0091e2faea419082ed764187ba8a6500\",\"impliedFormat\":99},{\"version\":\"4d49e8a78aba1d4e0ad32289bf8727ae53bc2def9285dff56151a91e7d770c3e\",\"impliedFormat\":99},{\"version\":\"63315cf08117cc728eab8f3eec8801a91d2cd86f91d0ae895d7fd928ab54596d\",\"impliedFormat\":99},{\"version\":\"a14a6f3a5636bcaebfe9ec2ccfa9b07dc94deb1f6c30358e9d8ea800a1190d5e\",\"impliedFormat\":99},{\"version\":\"21206e7e81876dabf2a7af7aa403f343af1c205bdcf7eff24d9d7f4eee6214c4\",\"impliedFormat\":99},{\"version\":\"cd0a9f0ffec2486cad86b7ef1e4da42953ffeb0eb9f79f536e16ff933ec28698\",\"impliedFormat\":99},{\"version\":\"f609a6ec6f1ab04dba769e14d6b55411262fd4627a099e333aa8876ea125b822\",\"impliedFormat\":99},{\"version\":\"6d8052bb814be030c64cb22ca0e041fe036ad3fc8d66208170f4e90d0167d354\",\"impliedFormat\":99},{\"version\":\"851f72a5d3e8a2bf7eeb84a3544da82628f74515c92bdf23c4a40af26dcc1d16\",\"impliedFormat\":99},{\"version\":\"59692a7938aab65ea812a8339bbc63c160d64097fe5a457906ea734d6f36bcd4\",\"impliedFormat\":99},{\"version\":\"8cb3b95e610c44a9986a7eab94d7b8f8462e5de457d5d10a0b9c6dd16bde563b\",\"impliedFormat\":99},{\"version\":\"f571713abd9a676da6237fe1e624d2c6b88c0ca271c9f1acc1b4d8efeea60b66\",\"impliedFormat\":99},{\"version\":\"16c5d3637d1517a3d17ed5ebcfbb0524f8a9997a7b60f6100f7c5309b3bb5ac8\",\"impliedFormat\":99},{\"version\":\"ca1ec669726352c8e9d897f24899abf27ad15018a6b6bcf9168d5cd1242058ab\",\"impliedFormat\":99},{\"version\":\"bffb1b39484facf6d0c5d5feefe6c0736d06b73540b9ce0cf0f12da2edfd8e1d\",\"impliedFormat\":99},{\"version\":\"f1663c030754f6171b8bb429096c7d2743282de7733bccd6f67f84a4c588d96e\",\"impliedFormat\":99},{\"version\":\"dd09693285e58504057413c3adc84943f52b07d2d2fd455917f50fa2a63c9d69\",\"impliedFormat\":99},{\"version\":\"d94c94593d03d44a03810a85186ae6d61ebeb3a17a9b210a995d85f4b584f23d\",\"impliedFormat\":99},{\"version\":\"c7c3bf625a8cb5a04b1c0a2fbe8066ecdbb1f383d574ca3ffdabe7571589a935\",\"impliedFormat\":99},{\"version\":\"7a2f39a4467b819e873cd672c184f45f548511b18f6a408fe4e826136d0193bb\",\"impliedFormat\":99},{\"version\":\"f8a0ae0d3d4993616196619da15da60a6ec5a7dfaf294fe877d274385eb07433\",\"impliedFormat\":99},{\"version\":\"2cca80de38c80ef6c26deb4e403ca1ff4efbe3cf12451e26adae5e165421b58d\",\"impliedFormat\":99},{\"version\":\"0070d3e17aa5ad697538bf865faaff94c41f064db9304b2b949eb8bcccb62d34\",\"impliedFormat\":99},{\"version\":\"53df93f2db5b7eb8415e98242c1c60f6afcac2db44bce4a8830c8f21eee6b1dd\",\"impliedFormat\":99},{\"version\":\"d67bf28dc9e6691d165357424c8729c5443290367344263146d99b2f02a72584\",\"impliedFormat\":99},{\"version\":\"932557e93fbdf0c36cc29b9e35950f6875425b3ac917fa0d3c7c2a6b4f550078\",\"impliedFormat\":99},{\"version\":\"e3dc7ec1597fb61de7959335fb7f8340c17bebf2feb1852ed8167a552d9a4a25\",\"impliedFormat\":99},{\"version\":\"b64e15030511c5049542c2e0300f1fe096f926cf612662884f40227267f5cd9f\",\"impliedFormat\":99},{\"version\":\"1932796f09c193783801972a05d8fb1bfef941bb46ac76fbe1abb0b3bfb674fa\",\"impliedFormat\":99},{\"version\":\"d9575d5787311ee7d61ad503f5061ebcfaf76b531cfecce3dc12afb72bb2d105\",\"impliedFormat\":99},{\"version\":\"5b41d96c9a4c2c2d83f1200949f795c3b6a4d2be432b357ad1ab687e0f0de07c\",\"impliedFormat\":99},{\"version\":\"38ec829a548e869de4c5e51671245a909644c8fb8e7953259ebb028d36b4dd06\",\"impliedFormat\":99},{\"version\":\"20c2c5e44d37dac953b516620b5dba60c9abd062235cdf2c3bfbf722d877a96b\",\"impliedFormat\":99},{\"version\":\"875fe6f7103cf87c1b741a0895fda9240fed6353d5e7941c8c8cbfb686f072b4\",\"impliedFormat\":99},{\"version\":\"c0ccccf8fbcf5d95f88ed151d0d8ce3015aa88cf98d4fd5e8f75e5f1534ee7ae\",\"impliedFormat\":99},{\"version\":\"1b1f4aba21fd956269ced249b00b0e5bfdbd5ebd9e628a2877ab1a2cf493c919\",\"impliedFormat\":99},{\"version\":\"939e3299952dff0869330e3324ba16efe42d2cf25456d7721d7f01a43c1b0b34\",\"impliedFormat\":99},{\"version\":\"f0a9b52faec508ba22053dedfa4013a61c0425c8b96598cef3dea9e4a22637c6\",\"impliedFormat\":99},{\"version\":\"d5b302f50db61181adc6e209af46ae1f27d7ef3d822de5ea808c9f44d7d219fd\",\"impliedFormat\":99},{\"version\":\"19131632ba492c83e8eeadf91a481def0e0b39ffc3f155bc20a7f640e0570335\",\"impliedFormat\":99},{\"version\":\"4581c03abea21396c3e1bb119e2fd785a4d91408756209cbeed0de7070f0ab5b\",\"impliedFormat\":99},{\"version\":\"ebcd3b99e17329e9d542ef2ccdd64fddab7f39bc958ee99bbdb09056c02d6e64\",\"impliedFormat\":99},{\"version\":\"4b148999deb1d95b8aedd1a810473a41d9794655af52b40e4894b51a8a4e6a6d\",\"impliedFormat\":99},{\"version\":\"1781cc99a0f3b4f11668bb37cca7b8d71f136911e87269e032f15cf5baa339bf\",\"impliedFormat\":99},{\"version\":\"33f1b7fa96117d690035a235b60ecd3cd979fb670f5f77b08206e4d8eb2eb521\",\"impliedFormat\":99},{\"version\":\"01429b306b94ff0f1f5548ce5331344e4e0f5872b97a4776bd38fd2035ad4764\",\"impliedFormat\":99},{\"version\":\"c1bc4f2136de7044943d784e7a18cb8411c558dbb7be4e4b4876d273cbd952af\",\"impliedFormat\":99},{\"version\":\"5470f84a69b94643697f0d7ec2c8a54a4bea78838aaa9170189b9e0a6e75d2cf\",\"impliedFormat\":99},{\"version\":\"36aaa44ee26b2508e9a6e93cd567e20ec700940b62595caf962249035e95b5e3\",\"impliedFormat\":99},{\"version\":\"f8343562f283b7f701f86ad3732d0c7fd000c20fe5dc47fa4ed0073614202b4d\",\"impliedFormat\":99},{\"version\":\"a53c572630a78cd99a25b529069c1e1370f8a5d8586d98e798875f9052ad7ad1\",\"impliedFormat\":99},{\"version\":\"4ad3451d066711dde1430c544e30e123f39e23c744341b2dfd3859431c186c53\",\"impliedFormat\":99},{\"version\":\"8069cbef9efa7445b2f09957ffbc27b5f8946fdbade4358fb68019e23df4c462\",\"impliedFormat\":99},{\"version\":\"cd8b4e7ad04ba9d54eb5b28ac088315c07335b837ee6908765436a78d382b4c3\",\"impliedFormat\":99},{\"version\":\"d533d8f8e5c80a30c51f0cbfe067b60b89b620f2321d3a581b5ba9ac8ffd7c3a\",\"impliedFormat\":99},{\"version\":\"33f49f22fdda67e1ddbacdcba39e62924793937ea7f71f4948ed36e237555de3\",\"impliedFormat\":99},{\"version\":\"710c31d7c30437e2b8795854d1aca43b540cb37cefd5900f09cfcd9e5b8540c4\",\"impliedFormat\":99},{\"version\":\"b2c03a0e9628273bc26a1a58112c311ffbc7a0d39938f3878837ab14acf3bc41\",\"impliedFormat\":99},{\"version\":\"a93beb0aa992c9b6408e355ea3f850c6f41e20328186a8e064173106375876c2\",\"impliedFormat\":99},{\"version\":\"efdcba88fcd5421867898b5c0e8ea6331752492bd3547942dea96c7ebcb65194\",\"impliedFormat\":99},{\"version\":\"a98e777e7a6c2c32336a017b011ba1419e327320c3556b9139413e48a8460b9a\",\"impliedFormat\":99},{\"version\":\"ea44f7f8e1fe490516803c06636c1b33a6b82314366be1bd6ffa4ba89bc09f86\",\"impliedFormat\":99},{\"version\":\"c25f22d78cc7f46226179c33bef0e4b29c54912bde47b62e5fdaf9312f22ffcb\",\"impliedFormat\":99},{\"version\":\"d57579cfedc5a60fda79be303080e47dfe0c721185a5d95276523612228fcefc\",\"impliedFormat\":99},{\"version\":\"a41630012afe0d4a9ff14707f96a7e26e1154266c008ddbd229e3f614e4d1cf7\",\"impliedFormat\":99},{\"version\":\"298a858633dfa361bb8306bbd4cfd74f25ab7cc20631997dd9f57164bc2116d1\",\"impliedFormat\":99},{\"version\":\"921782c45e09940feb232d8626a0b8edb881be2956520c42c44141d9b1ddb779\",\"impliedFormat\":99},{\"version\":\"06117e4cc7399ce1c2b512aa070043464e0561f956bda39ef8971a2fcbcdbf2e\",\"impliedFormat\":99},{\"version\":\"daccf332594b304566c7677c2732fed6e8d356da5faac8c5f09e38c2f607a4ab\",\"impliedFormat\":99},{\"version\":\"4386051a0b6b072f35a2fc0695fecbe4a7a8a469a1d28c73be514548e95cd558\",\"impliedFormat\":99},{\"version\":\"78e41de491fe25947a7fd8eeef7ebc8f1c28c1849a90705d6e33f34b1a083b90\",\"impliedFormat\":99},{\"version\":\"3ccd198e0a693dd293ed22e527c8537c76b8fe188e1ebf20923589c7cfb2c270\",\"impliedFormat\":99},{\"version\":\"2ebf2ee015d5c8008428493d4987e2af9815a76e4598025dd8c2f138edc1dcae\",\"impliedFormat\":99},{\"version\":\"0dcc8f61382c9fcdafd48acc54b6ffda69ca4bb7e872f8ad12fb011672e8b20c\",\"impliedFormat\":99},{\"version\":\"9db563287eb527ead0bcb9eb26fbec32f662f225869101af3cabcb6aee9259cf\",\"impliedFormat\":99},{\"version\":\"068489bec523be43f12d8e4c5c337be4ff6a7efb4fe8658283673ae5aae14b85\",\"impliedFormat\":99},{\"version\":\"838212d0dc5b97f7c5b5e29a89953de3906f72fce13c5ae3c5ade346f561d226\",\"impliedFormat\":99},{\"version\":\"ddc78d29af824ad7587152ea523ed5d60f2bc0148d8741c5dacf9b5b44587b1b\",\"impliedFormat\":99},{\"version\":\"019b522e3783e5519966927ceeb570eefcc64aba3f9545828a5fb4ae1fde53c6\",\"impliedFormat\":99},{\"version\":\"b34623cc86497a5123de522afba770390009a56eebddba38d2aa5798b70b0a87\",\"impliedFormat\":99},{\"version\":\"d2a8cbeb0c0caaf531342062b4b5c227118862879f6a25033e31fad00797b7eb\",\"impliedFormat\":99},{\"version\":\"14891c20f15be1d0d42ecbbd63de1c56a4d745e3ea2b4c56775a4d5d36855630\",\"impliedFormat\":99},{\"version\":\"e55a1f6b198a39e38a3cea3ffe916aab6fde7965c827db3b8a1cacf144a67cd9\",\"impliedFormat\":99},{\"version\":\"f7910ccfe56131e99d52099d24f3585570dc9df9c85dd599a387b4499596dd4d\",\"impliedFormat\":99},{\"version\":\"9409ac347c5779f339112000d7627f17ede6e39b0b6900679ce5454d3ad2e3c9\",\"impliedFormat\":99},{\"version\":\"22dfe27b0aa1c669ce2891f5c89ece9be18074a867fe5dd8b8eb7c46be295ca1\",\"impliedFormat\":99},{\"version\":\"684a5c26ce2bb7956ef6b21e7f2d1c584172cd120709e5764bc8b89bac1a10eb\",\"impliedFormat\":99},{\"version\":\"93761e39ce9d3f8dd58c4327e615483f0713428fa1a230883eb812292d47bbe8\",\"impliedFormat\":99},{\"version\":\"c66be51e3d121c163a4e140b6b520a92e1a6a8a8862d44337be682e6f5ec290a\",\"impliedFormat\":99},{\"version\":\"66e486a9c9a86154dc9780f04325e61741f677713b7e78e515938bf54364fee2\",\"impliedFormat\":99},{\"version\":\"d211bc80b6b6e98445df46fe9dd3091944825dd924986a1c15f9c66d7659c495\",\"impliedFormat\":99},{\"version\":\"8dd2b72f5e9bf88939d066d965144d07518e180efec3e2b6d06ae5e725d84c7d\",\"impliedFormat\":99},{\"version\":\"949cb88e315ab1a098c3aa4a8b02496a32b79c7ef6d189eee381b96471a7f609\",\"impliedFormat\":99},{\"version\":\"bc43af2a5fa30a36be4a3ed195ff29ffb8067bf4925aa350ace9d9f18f380cc2\",\"impliedFormat\":99},{\"version\":\"b9beb5d678e6cf67901f1154f91dff455378e6aa89b20da56ed1400f3fb1f3cf\",\"impliedFormat\":99},{\"version\":\"8428e71f6d1b63acf55ceb56244aad9cf07678cf9626166e4aded15e3d252f8a\",\"impliedFormat\":99},{\"version\":\"11505212ab24aa0f06d719a09add4be866e26f0fc15e96a1a2a8522c0c6a73a8\",\"impliedFormat\":99},{\"version\":\"8228186214a5d7da60bd1dd91387a725e19c6c31a7ed4e114cf68d5ce6629c52\",\"impliedFormat\":99},{\"version\":\"c44bb0071cededc08236d57d1131c44339c1add98b029a95584dfe1462533575\",\"impliedFormat\":99},{\"version\":\"7a4935af71877da3bbc53938af00e5d4f6d445ef850e1573a240447dcb137b5c\",\"impliedFormat\":99},{\"version\":\"4e313033202712168ecc70a6d830964ad05c9c93f81d806d7a25d344f6352565\",\"impliedFormat\":99},{\"version\":\"8a1fc69eaf8fc8d447e6f776fbfa0c1b12245d7f35f1dbfb18fbc2d941f5edd8\",\"impliedFormat\":99},{\"version\":\"afb9b4c8bd38fb43d38a674de56e6f940698f91114fded0aa119de99c6cd049a\",\"impliedFormat\":99},{\"version\":\"1d277860f19b8825d027947fca9928ee1f3bfaa0095e85a97dd7a681b0698dfc\",\"impliedFormat\":99},{\"version\":\"6d32122bb1e7c0b38b6f126d166dff1f74c8020f8ba050248d182dcafc835d08\",\"impliedFormat\":99},{\"version\":\"cfac5627d337b82d2fbeff5f0f638b48a370a8d72d653327529868a70c5bc0f8\",\"impliedFormat\":99},{\"version\":\"8a826bc18afa4c5ed096ceb5d923e2791a5bae802219e588a999f535b1c80492\",\"impliedFormat\":99},{\"version\":\"73e94021c55ab908a1b8c53792e03bf7e0d195fee223bdc5567791b2ccbfcdec\",\"impliedFormat\":99},{\"version\":\"5f73eb47b37f3a957fe2ac6fe654648d60185908cab930fc01c31832a5cb4b10\",\"impliedFormat\":99},{\"version\":\"cb6372a2460010a342ba39e06e1dcfd722e696c9d63b4a71577f9a3c72d09e0a\",\"impliedFormat\":99},{\"version\":\"1e289698069f553f36bbf12ee0084c492245004a69409066faceb173d2304ec4\",\"impliedFormat\":99},{\"version\":\"f1ca71145e5c3bba4d7f731db295d593c3353e9a618b40c4af0a4e9a814bb290\",\"impliedFormat\":99},{\"version\":\"ac12a6010ff501e641f5a8334b8eaf521d0e0739a7e254451b6eea924c3035c7\",\"impliedFormat\":99},{\"version\":\"97395d1e03af4928f3496cc3b118c0468b560765ab896ce811acb86f6b902b5c\",\"impliedFormat\":99},{\"version\":\"7dcfbd6a9f1ce1ddf3050bd469aa680e5259973b4522694dc6291afe20a2ae28\",\"impliedFormat\":99},{\"version\":\"6e545419ad200ae4614f8e14d32b7e67e039c26a872c0f93437b0713f54cde53\",\"impliedFormat\":99},{\"version\":\"efc225581aae9bb47d421a1b9f278db0238bc617b257ce6447943e59a2d1621e\",\"impliedFormat\":99},{\"version\":\"8833b88e26156b685bc6f3d6a014c2014a878ffbd240a01a8aee8a9091014e9c\",\"impliedFormat\":99},{\"version\":\"7a2a42a1ac642a9c28646731bd77d9849cb1a05aa1b7a8e648f19ab7d72dd7dc\",\"impliedFormat\":99},{\"version\":\"4d371c53067a3cc1a882ff16432b03291a016f4834875b77169a2d10bb1b023e\",\"impliedFormat\":99},{\"version\":\"99b38f72e30976fd1946d7b4efe91aa227ecf0c9180e1dd6502c1d39f37445b4\",\"impliedFormat\":99},{\"version\":\"df1bcf0b1c413e2945ce63a67a1c5a7b21dbbec156a97d55e9ea0eed90d2c604\",\"impliedFormat\":99},{\"version\":\"6e2011a859fa435b1196da1720be944ed59c668bb42d2f2711b49a506b3e4e90\",\"impliedFormat\":99},{\"version\":\"b4bfa90fac90c6e0d0185d2fe22f059fec67587cc34281f62294f9c4615a8082\",\"impliedFormat\":99},{\"version\":\"036d363e409ebe316a6366aff5207380846f8f82e100c2e3db4af5fe0ad0c378\",\"impliedFormat\":99},{\"version\":\"5ae6642588e4a72e5a62f6111cb750820034a7fbe56b5d8ec2bcb29df806ce52\",\"impliedFormat\":99},{\"version\":\"6fca09e1abc83168caf36b751dec4ddda308b5714ec841c3ff0f3dc07b93c1b8\",\"impliedFormat\":99},{\"version\":\"2f7268e6ac610c7122b6b416e34415ce42b51c56d080bef41786d2365f06772d\",\"impliedFormat\":99},{\"version\":\"9a07957f75128ed0be5fc8a692a14da900878d5d5c21880f7c08f89688354aa4\",\"impliedFormat\":99},{\"version\":\"8b6f3ae84eab35c50cf0f1b608c143fe95f1f765df6f753cd5855ae61b3efbe2\",\"impliedFormat\":99},{\"version\":\"992491d83ff2d1e7f64a8b9117daee73724af13161f1b03171f0fa3ffe9b4e3e\",\"impliedFormat\":99},{\"version\":\"12bcf6af851be8dd5f3e66c152bb77a83829a6a8ba8c5acc267e7b15e11aa9ab\",\"impliedFormat\":99},{\"version\":\"e2704efc7423b077d7d9a21ddb42f640af1565e668d5ec85f0c08550eff8b833\",\"impliedFormat\":99},{\"version\":\"e0513c71fd562f859a98940633830a7e5bcd7316b990310e8bb68b1d41d676a3\",\"impliedFormat\":99},{\"version\":\"712071b9066a2d8f4e11c3b8b3d5ada6253f211a90f06c6e131cff413312e26d\",\"impliedFormat\":99},{\"version\":\"5a187a7bc1e7514ef1c3d6eaafa470fc45541674d8fca0f9898238728d62666a\",\"impliedFormat\":99},{\"version\":\"0c06897f7ab3830cef0701e0e083b2c684ed783ae820b306aedd501f32e9562d\",\"impliedFormat\":99},{\"version\":\"56cc6eae48fd08fa709cf9163d01649f8d24d3fea5806f488d2b1b53d25e1d6c\",\"impliedFormat\":99},{\"version\":\"57a925b13947b38c34277d93fb1e85d6f03f47be18ca5293b14082a1bd4a48f5\",\"impliedFormat\":99},{\"version\":\"9d9d64c1fa76211dd529b6a24061b8d724e2110ee55d3829131bca47f3fe4838\",\"impliedFormat\":99},{\"version\":\"c13042e244bb8cf65586e4131ef7aed9ca33bf1e029a43ed0ebab338b4465553\",\"impliedFormat\":99},{\"version\":\"54be9b9c71a17cb2519b841fad294fa9dc6e0796ed86c8ac8dd9d8c0d1c3a631\",\"impliedFormat\":99},{\"version\":\"10881be85efd595bef1d74dfa7b9a76a5ab1bfed9fb4a4ca7f73396b72d25b90\",\"impliedFormat\":99},{\"version\":\"925e71eaa87021d9a1215b5cf5c5933f85fe2371ddc81c32d1191d7842565302\",\"impliedFormat\":99},{\"version\":\"faed0b3f8979bfbfb54babcff9d91bd51fda90931c7716effa686b4f30a09575\",\"impliedFormat\":99},{\"version\":\"53c72d68328780f711dbd39de7af674287d57e387ddc5a7d94f0ffd53d8d3564\",\"impliedFormat\":99},{\"version\":\"51129924d359cdebdccbf20dbabc98c381b58bfebe2457a7defed57002a61316\",\"impliedFormat\":99},{\"version\":\"7270a757071e3bc7b5e7a6175f1ac9a4ddf4de09f3664d80cb8805138f7d365b\",\"impliedFormat\":99},{\"version\":\"ea7b5c6a79a6511cdeeedc47610370be1b0e932e93297404ef75c90f05fc1b61\",\"impliedFormat\":99},{\"version\":\"a30674840054f23903d656cc46971b1ca78e00c0bb2fe5a5c5049b5f2ee2f198\",\"signature\":\"a300730d20ea138694db2b649ea2de1a27ef3c60cfad40741e725b0f6838cbb3\"},{\"version\":\"9119810131117c88b9710332e61f46078228fdece49a78446bc1ab85e9843fff\",\"signature\":\"02c3d5613c6f7634f432532351e4559344ee240db30c6af71c024b2161b97dd0\"},{\"version\":\"0a5323b4c741b994477024ffc17ec6f368c85f7afbbd6c69af8dfa19d5e5565d\",\"signature\":\"46d39334d51e5cac43955e1c4650c6107bc10b4094501fa988c4f8b2d2a14a29\"},{\"version\":\"96c9dfe33e3a7010538e14b615af5e453c05a2974d99658c75cadcdb3a16c4ac\",\"signature\":\"6e51201c3a76c046efd2b5e234fc7d7c82eb50dbe4bfce438ed945b782cf8733\"},{\"version\":\"406b92415aa92bd1325ff3d6796822bff760bf3878095574dba4eb66f3d11139\",\"signature\":\"e1759d2fdadfe6647312c3df2f290c4262726124bddc11c2cf70c32346d05db1\"},{\"version\":\"b8bed58f8456fc5f4f288452845b90ef5511ad17293d04950d397bae68eb49d5\",\"signature\":\"7471cdac8fe594d9fa81c770f88da866588f7e5a6754b477f62ab5129aa297d4\"},{\"version\":\"db0382033dab21ad4be6fc1fbd2d4a949027647d989222ed16a5ff65dc885250\",\"signature\":\"639fed423196ed147893a09d7a113d86a57843dbac1e3e9b82e677afd565b5e0\"},{\"version\":\"de2d67226936b5e2623bd5fff4245820f240f8daed461b56e3af63c593e698fd\",\"signature\":\"34ce9c56408fbd121132a982b2dbdeb65f7f03d41706d93bbcd0f94ee37a62b4\"},{\"version\":\"b06b82a4e464b07f6a2d980e8b66ff9b563415148cbfe17a923fed38aeed3ab1\",\"signature\":\"14caa5de9fc68d2a2554e7aa98b43125c8d3d63106c252d771b6c14529a3fdb3\"},{\"version\":\"34dde7fd3e8e797bc7f7a44a73e72653e9a308479d63622882fecd9d4ce094cc\",\"signature\":\"ba327616a25e662ad651d5ab0e79b7a45bf4a0cbfa2c8ee404d26a1832d768d7\"},{\"version\":\"f917602684cbc16ac1e78815d5e51e24aa6c50c75cc7e2bf8c7b5f72e82004b4\",\"signature\":\"89e6114ab90a7910714e2491d1cb2d461761dfef97bdc7e8ad088e33a60b425c\"},{\"version\":\"b99be656abe2132835bc631fe8457ffc98b5e9bdc77248d759c0bb700facde6d\",\"signature\":\"cedd0410f969bccdcfa89c66bf8656d82d9a9bcc87720996761d34c7bee7a25f\"},{\"version\":\"e400a1492946351ea65426684b96ef3eae5ce22f647666e9abd95e4e456e07ed\",\"signature\":\"8b15544a21995dd4c39be61a97014f10795cb75fa147ae3397301c1106d81d35\"},{\"version\":\"3e4d15658647afc99fe4ef705aef6ff66bccc2622507940408cbe2281e246495\",\"signature\":\"863fce1d6520f3ec33ad798a92651ad719f64a270f78b2baf17569a5a59e4b9c\"},{\"version\":\"c20ef6cd424248342c530895c4ace648beb7d474effafac274206abdf248ef12\",\"signature\":\"78d7eaf08358678a2e5b66bb4863db822a775588da8f1a9fa266d26be8c8df61\"},{\"version\":\"6da238810167f532b015062a355d3dd75eee4ef1885c4cdfd8b10438c1db71ca\",\"signature\":\"e88b193dc31d0d4988bbf60e3d807202796a982b5a4466820eb835a2146d4b0d\"},{\"version\":\"ef4e87e58b39fe2cbd1e393b4aa3020bcb4937be112c44dda44787af79090c5b\",\"signature\":\"6be604f8851057dc2900c9cd415873728946d35265b720a9afe491ae8a96380e\"},{\"version\":\"704cb9d56af5d755a805cab390c1d15c4ed9716cd28e03b04b55e405e7b19953\",\"signature\":\"d73be248e6424c1e615bdfd97fd01be4a2cfbb63463bb710409fdf196187f416\"},{\"version\":\"78522db4cd528f80b38caf13e03ea89927e555f11d3afdbca9bc7e4f8c76dcd2\",\"signature\":\"3c0f53f5e6e3877f9c8734b7601d8d8cf1da383580b8dd45d594633db4295a49\"},{\"version\":\"c4ab6e19a316f43ec071fb6caffdf42a727d68464b5aecca0989ed596f194f10\",\"signature\":\"611127c852e5b81eff3433e4659d5ae2ec3c3709abe99dcc0e507d687807cc16\"},{\"version\":\"4f2a8e1716b07f96161da5daebb930ffa45ce99e303d50c85328d4abc1aead8a\",\"signature\":\"592afb7f905c946d15813e284cb0bea8e99f3e537b4461e866630ed25d84fa2c\"},{\"version\":\"3cc34fdc4ffc89e562b734f0dce2b1a7814efb8927656f54750df1d5cec426ec\",\"signature\":\"cb8a002501e6a44aa9584741013a9b36e2b3fd3550fa856559084fa3b2b5987c\"},{\"version\":\"93ca185212bfb0f47a1365215356cee493e72581ad41afd4b9d980b056f7e420\",\"signature\":\"aceff2745f3798d453bbc42641fbd7e98d4f8ccdeaa8a5b4278e6821ce57f0a3\"},{\"version\":\"b40ff665d3c9c85dc817f24c15bd34e70c5d3ed504a6ac345140519125716251\",\"signature\":\"e79eb3457eccaf7373431f472d67232f1d120a6827295621a03241219545bd2f\"},{\"version\":\"a06488dd4233174c698c8dda3e969f4f3f0e1e8f411e53b472db33bf176cd037\",\"signature\":\"1e23d08d72182c9e5c174905106c87985dbdb3ede115b8060385861fcd34e6cb\"},{\"version\":\"7dea0b5f7b1887b60450b0fb109a7b188e8db5cad6ec870b56499dafd15267e5\",\"signature\":\"e0f33490ac3d951815312b0e5c953929be29c47102bcd28c63f9997a84a2b338\"},{\"version\":\"604b9fd34ad543a6387eeed724ca2dec2e1c3218e9b18ee2a775065b8a28fac9\",\"signature\":\"e40c48566cdabc9c4dfe587ab16172c22b8cb734ab0b40e7098b10e101688d51\"},{\"version\":\"e9f7512c0b393bfda925875f7587422ddab99d4fb8e8fb2119588b49df61f377\",\"signature\":\"ddb0ff144582c83c7eae3a70f9ac6c1ac8ded35337159be5501cc40c61e50009\"},{\"version\":\"5779f9ae319cedee961753ab6dac16b63eadf2c3b098f005276cec0c886c3bb4\",\"signature\":\"b1ad8895e9c57a4a64a4e8c81f33e19d5423852d6d44172fb9cea5db9d29aa8f\"},{\"version\":\"aaf749ac3d72eece8401482be29bdd72abb98ef1afcb5bf2c4b37a7cf8b2b123\",\"signature\":\"d718dcc33046f9cbb93ef0866bca3ebf389916cbd76d1e805e612235585d3a41\"},{\"version\":\"f1e6b76605ee193f3b09dae2faff3bf7523ae3eea7614c8ddbd64c90f0f67652\",\"signature\":\"56f8c8f8ff32a884dd0369e35eca36c348aa26243329a0162b18e1a0098db12c\"},{\"version\":\"2cfcf17194cac27fe8d3ca0d82264a5d59a6e8adde51ed860efcf97502030b5d\",\"signature\":\"3f2eeec0ca97c65b57baa25d47e2e05e450deca62300b5e9667e007284e2787e\"},{\"version\":\"17d75ccaf898415db77dd72659c9b1fdb9338290ae54e8371b772e0b221c9fca\",\"signature\":\"dc1823ff0c85766a2d451405f54c5212002fbac2945e9df63b1747e7872382f6\"},{\"version\":\"9e2f8cf31664dee1ae05de35c7ca4585ab20391484439c9bb419e26c106062ba\",\"signature\":\"e8310e52bab81aa6f8c57666eb30514f3f992161eabc3497baec7fc81fce81e9\"},{\"version\":\"bf3eb4006ddf568bca1cc890a5e6f90740dbf80d259438ef1bd554aec3329d34\",\"signature\":\"89d814299a29fe95af3fc556ce85a027c27ebaf40ab62b00a22ec956755e5b34\"},{\"version\":\"fcfa2d530f17aac19377750d3786e89e0b959de5e3ef8593b91b281d7d18c9a0\",\"signature\":\"0515122b0c831ef8c5b75e0f89e350efddc5f42b633e8b3f0dd6ed2a9c55f906\"},{\"version\":\"e30cf769ae1b1b6ae802935a0a89db9555c501e2c3063981a0918ba9d3fd3fcd\",\"signature\":\"3f5d7d0dacac8fc0db44997859a026756b8375cc85166ed61ae390ca2b112d59\"},{\"version\":\"d1b5bb21841d924d4ade65376bf567fea7f2cc584a20366890261b4f8b130930\",\"signature\":\"d0e92971c430f58c216a2effb50caaa94ab4b3996d84c234709388ba8c2e19bc\"},{\"version\":\"6ad9c50bfe04bab196c881a418ac2b2fb6c20c62582e16e933124e6af07479df\",\"signature\":\"4334461d7236b7bca557d7d5862a9458649e698ff122ab3099f0f48c0ead3e11\"},{\"version\":\"555740f8fa4725711991fb7d1bb24478308a6357a372f5ba4f41c04661fb380c\",\"signature\":\"8cfefa0351f0ee9521c768e5943639419de03ae039b3c21c1e244ce55860590f\"},{\"version\":\"8ef26c7facb1a4c8186cad8629ba06baf6a55c7cb3406bbf48e79be0f36438ac\",\"signature\":\"58ebb3d1d1b51a9892246be36ff4cd48a310b548a4e7fd6cb4f3555525d99995\"},{\"version\":\"6d70769084615096633f6ef0bc0e715178a76a74bfc3127b65343f076a469db7\",\"signature\":\"3647bff7455f34ef9b596ed19fc0483e55dbe5f797fb58dcf75da7f625c47308\"},{\"version\":\"4b3d2a30c654a46a9b067ce08a1ca8956449c8ab3f007c07c3eb420642f6a902\",\"signature\":\"6b6eaab0c84462bd1662087ba09a868e14aa37c7349f30c3ebc2cddc5fa7f4d2\"},{\"version\":\"fe93c474ab38ac02e30e3af073412b4f92b740152cf3a751fdaee8cbea982341\",\"impliedFormat\":1},{\"version\":\"8f6c5ed472c91dc2d8b6d5d4b18617c611239a0d0d0ad15fb6205aec62e369ca\",\"impliedFormat\":1},{\"version\":\"0b960be5d075602748b6ebaa52abd1a14216d4dbd3f6374e998f3a0f80299a3a\",\"impliedFormat\":1},{\"version\":\"02ffeb47831a41dc70f0dd679c449ecdf632e45c4d8a996c47251a33de6cf73f\",\"signature\":\"3fdb90570a21f3a3871f6a28b95685fb6fa8fc658c9d719ec85ad7d9827a4b2b\"},{\"version\":\"d2e9ba430e34dafd4ae7fe5403d2ad4987fdcd73f2a47bd0571c1f84c143536d\",\"signature\":\"6b2040a7af354fbf8b627028b0c6faddda44bfcedd13a35010fd96aa66c5e78e\"},{\"version\":\"4b72fd35fe6ffd04619dfeb1b3b0ee28b09ae2af04233aca991d1e88929c7336\",\"signature\":\"f57c0734159f87054dca539e5050b702742dba804263ff144aaee6d583b04a13\"},{\"version\":\"89121c1bf2990f5219bfd802a3e7fc557de447c62058d6af68d6b6348d64499a\",\"impliedFormat\":1},{\"version\":\"79b4369233a12c6fa4a07301ecb7085802c98f3a77cf9ab97eee27e1656f82e6\",\"impliedFormat\":1},{\"version\":\"6c3741e44c9b0ebd563c8c74dcfb2f593190dfd939266c07874dc093ecb4aa0e\",\"impliedFormat\":99},{\"version\":\"367986e86147da028e1a107cd1c72666a5677d6339d3af294d5e253dfe66ea5a\",\"impliedFormat\":99},{\"version\":\"a65735a086ae8b401c1c41b51b41546532670c919fd2cedc1606fd186fcee2d7\",\"impliedFormat\":99},{\"version\":\"fe021dbde66bd0d6195d4116dcb4c257966ebc8cfba0f34441839415e9e913e1\",\"impliedFormat\":99},{\"version\":\"d52a4b1cabee2c94ed18c741c480a45dd9fed32477dd94a9cc8630a8bc263426\",\"impliedFormat\":99},{\"version\":\"d059a52684789e6ef30f8052244cb7c52fb786e4066ac415c50642174cc76d14\",\"impliedFormat\":99},{\"version\":\"2ccdfd33a753c18e8e5fe8a1eadefff968531d920bc9cdc7e4c97b0c6d3dcaf8\",\"impliedFormat\":99},{\"version\":\"d64a434d7fb5040dbe7d5f4911145deda53e281b3f1887b9a610defd51b3c1a2\",\"impliedFormat\":99},{\"version\":\"927f406568919fd7cd238ef7fe5e9c5e9ec826f1fff89830e480aff8cfd197da\",\"impliedFormat\":99},{\"version\":\"a77d742410fe78bb054d325b690fda75459531db005b62ba0e9371c00163353c\",\"impliedFormat\":99},{\"version\":\"f8de61dd3e3c4dc193bb341891d67d3979cb5523a57fcacaf46bf1e6284e6c35\",\"impliedFormat\":99},{\"version\":\"addca1bb7478ebc3f1c67b710755acc945329875207a3c9befd6b5cbcab12574\",\"impliedFormat\":99},{\"version\":\"50b565f4771b6b150cbf3ae31eb815c31f15e2e0f45518958a5f4348a1a01660\",\"impliedFormat\":99},{\"version\":\"eaee342ebb3a826a48c87c1af3ec9359ee5452da6e960751fcd5c5dd8ca8d7ea\",\"impliedFormat\":99},{\"version\":\"206553d6287cd4b0aeb154fb36b62bdd7c2c7a653c5ef2024106de2265380ab2\",\"impliedFormat\":99},{\"version\":\"10ab5b311087399a1a08c27cc72758f3069067b6934407347bd5f83fa2bf8928\",\"impliedFormat\":99},{\"version\":\"bc7f70d67697f70e89ef74f6620b9ac0096a3f0ee3cdf2531b4fa08d2af4219d\",\"impliedFormat\":99},{\"version\":\"4056a596190daaaa7268f5465b972915facc5eca90ee6432e90afa130ba2e4ee\",\"impliedFormat\":99},{\"version\":\"aa20728bb08af6288996197b97b5ed7bcfb0b183423bb482a9b25867a5b33c57\",\"impliedFormat\":99},{\"version\":\"5322c3686d3797d415f8570eec54e898f328e59f8271b38516b1366074b499aa\",\"impliedFormat\":99},{\"version\":\"b0aa778c53f491350d81ec58eb3e435d34bef2ec93b496c51d9b50aa5a8a61e5\",\"impliedFormat\":99},{\"version\":\"fa454230c32f38213198cf47db147caf4c03920b3f8904566b29a1a033341602\",\"impliedFormat\":99},{\"version\":\"5571608cd06d2935efe2ed7ba105ec93e5c5d1e822d300e5770a1ad9a065c8b6\",\"impliedFormat\":99},{\"version\":\"6bf8aa6ed64228b4d065f334b8fe11bc11f59952fd15015b690dfb3301c94484\",\"impliedFormat\":99},{\"version\":\"41ae2bf47844e4643ebe68b8e0019af7a87a9daea2d38959a9f7520ada9ad3cb\",\"impliedFormat\":99},{\"version\":\"f4498a2ac4186466abe5f9641c9279a3458fa5992dc10ed4581c265469b118d4\",\"impliedFormat\":99},{\"version\":\"bd09a0e906dae9a9351c658e7d8d6caa9f4df2ba104df650ebca96d1c4f81c23\",\"impliedFormat\":99},{\"version\":\"055ad004f230e10cf1099d08c6f5774c564782bd76fbefbda669ab1ad132c175\",\"impliedFormat\":99},{\"version\":\"8f0e6ad7dfd6a1592e7f9354f9d08aec00a395701b5b962c7497532888a6318a\",\"signature\":\"537e3860b3503890bf29fb00cbb09a2d7f49aafe0511a6482bffdbc6b66a7cbd\"},{\"version\":\"a38f0afe8c4747349ff9b34cb390b07beb443d97feece5daafbfbc110fcfb7df\",\"impliedFormat\":99},{\"version\":\"5c3fb14d3f91d6e84afe24a17a238f14a1cc46ece36bc80d9ef8b70b75dbadba\",\"impliedFormat\":1},{\"version\":\"f098084154c4fdcf042b749f7356d4942431f7620eb2e1ebf9470938348baf91\",\"impliedFormat\":1},\"6c5c4f81b5168c0f36fe0c04c1c97b76e345436264f187e0ace06a88360ba8bc\",\"83731dbd879e233cbabb72d3a40922de0c898ac2c101ba8702619a358c8f8d15\",{\"version\":\"5a00bb1e55484777b03fb10eff0122db4253377ce93d15bf6f9dba0b7f99cf99\",\"signature\":\"1dd2e4b369e23fb34993a097c6c171f31236e9b7fef229c1b4fc9c98ee336a55\"},{\"version\":\"b6c1f64158da02580f55e8a2728eda6805f79419aed46a930f43e68ad66a38fc\",\"impliedFormat\":1},{\"version\":\"cdf21eee8007e339b1b9945abf4a7b44930b1d695cc528459e68a3adc39a622e\",\"impliedFormat\":1},\"c667b2b362a03d0b87ae18fe42fc4882bfa8dcff83758f7f9ab5ec275eaa4006\",{\"version\":\"a1ac5ff17ad94e84a80a093a1258107fef17c5b2d4930fd0e3c40d18fbc12445\",\"signature\":\"e28fc2c8a2c23bf9cd308547907699b27fbdd9c8f03867ad92dc4a7019ad3e35\"},{\"version\":\"6c05d0fcee91437571513c404e62396ee798ff37a2d8bef2104accdc79deb9c0\",\"impliedFormat\":1},{\"version\":\"ef677c71b0b9ee04bc6c625a63354e30b19194d63c3fc4bd02606ea8469b6d2f\",\"signature\":\"d6353f5c1f53e6bab342a349e642a2cc7e4a683a1da3888cde09e71f4667fdb4\"},\"86e3ae3e873600b4aa3460e9b0151a0c29dfdd90b5a525c463249e8b3ccc4389\",{\"version\":\"21da358700a3893281ce0c517a7a30cbd46be020d9f0c3f2834d0a8ad1f5fc75\",\"impliedFormat\":1},{\"version\":\"d153a11543fd884b596587ccd97aebbeed950b26933ee000f94009f1ab142848\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"378281aa35786c27d5811af7e6bcaa492eebd0c7013d48137c35bbc69a2b9751\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"3af97acf03cc97de58a3a4bc91f8f616408099bc4233f6d0852e72a8ffb91ac9\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"1b2dd1cbeb0cc6ae20795958ba5950395ebb2849b7c8326853dd15530c77ab0c\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"1db0b7dca579049ca4193d034d835f6bfe73096c73663e5ef9a0b5779939f3d0\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"387a023d363f755eb63450a66c28b14cdd7bc30a104565e2dbf0a8988bb4a56c\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"9798340ffb0d067d69b1ae5b32faa17ab31b82466a3fc00d8f2f2df0c8554aaa\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"f26b11d8d8e4b8028f1c7d618b22274c892e4b0ef5b3678a8ccbad85419aef43\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"8e9c23ba78aabc2e0a27033f18737a6df754067731e69dc5f52823957d60a4b6\",\"impliedFormat\":1},{\"version\":\"cdcf9ea426ad970f96ac930cd176d5c69c6c24eebd9fc580e1572d6c6a88f62c\",\"impliedFormat\":1},{\"version\":\"23cd712e2ce083d68afe69224587438e5914b457b8acf87073c22494d706a3d0\",\"impliedFormat\":1},{\"version\":\"487b694c3de27ddf4ad107d4007ad304d29effccf9800c8ae23c2093638d906a\",\"impliedFormat\":1},{\"version\":\"3a80bc85f38526ca3b08007ee80712e7bb0601df178b23fbf0bf87036fce40ce\",\"impliedFormat\":1},{\"version\":\"ccf4552357ce3c159ef75f0f0114e80401702228f1898bdc9402214c9499e8c0\",\"impliedFormat\":1},{\"version\":\"c6fd2c5a395f2432786c9cb8deb870b9b0e8ff7e22c029954fabdd692bff6195\",\"impliedFormat\":1},{\"version\":\"68834d631c8838c715f225509cfc3927913b9cc7a4870460b5b60c8dbdb99baf\",\"impliedFormat\":1},{\"version\":\"2931540c47ee0ff8a62860e61782eb17b155615db61e36986e54645ec67f67c2\",\"impliedFormat\":1},{\"version\":\"ccab02f3920fc75c01174c47fcf67882a11daf16baf9e81701d0a94636e94556\",\"impliedFormat\":1},{\"version\":\"f6faf5f74e4c4cc309a6c6a6c4da02dbb840be5d3e92905a23dcd7b2b0bd1986\",\"impliedFormat\":1},{\"version\":\"ea6bc8de8b59f90a7a3960005fd01988f98fd0784e14bc6922dde2e93305ec7d\",\"impliedFormat\":1},{\"version\":\"36107995674b29284a115e21a0618c4c2751b32a8766dd4cb3ba740308b16d59\",\"impliedFormat\":1},{\"version\":\"914a0ae30d96d71915fc519ccb4efbf2b62c0ddfb3a3fc6129151076bc01dc60\",\"impliedFormat\":1},{\"version\":\"33e981bf6376e939f99bd7f89abec757c64897d33c005036b9a10d9587d80187\",\"impliedFormat\":1},{\"version\":\"7fd1b31fd35876b0aa650811c25ec2c97a3c6387e5473eb18004bed86cdd76b6\",\"impliedFormat\":1},{\"version\":\"b41767d372275c154c7ea6c9d5449d9a741b8ce080f640155cc88ba1763e35b3\",\"impliedFormat\":1},{\"version\":\"3bacf516d686d08682751a3bd2519ea3b8041a164bfb4f1d35728993e70a2426\",\"impliedFormat\":1},{\"version\":\"7fb266686238369442bd1719bc0d7edd0199da4fb8540354e1ff7f16669b4323\",\"impliedFormat\":1},{\"version\":\"0a60a292b89ca7218b8616f78e5bbd1c96b87e048849469cccb4355e98af959a\",\"impliedFormat\":1},{\"version\":\"0b6e25234b4eec6ed96ab138d96eb70b135690d7dd01f3dd8a8ab291c35a683a\",\"impliedFormat\":1},{\"version\":\"9666f2f84b985b62400d2e5ab0adae9ff44de9b2a34803c2c5bd3c8325b17dc0\",\"impliedFormat\":1},{\"version\":\"40cd35c95e9cf22cfa5bd84e96408b6fcbca55295f4ff822390abb11afbc3dca\",\"impliedFormat\":1},{\"version\":\"b1616b8959bf557feb16369c6124a97a0e74ed6f49d1df73bb4b9ddf68acf3f3\",\"impliedFormat\":1},{\"version\":\"5b03a034c72146b61573aab280f295b015b9168470f2df05f6080a2122f9b4df\",\"impliedFormat\":1},{\"version\":\"40b463c6766ca1b689bfcc46d26b5e295954f32ad43e37ee6953c0a677e4ae2b\",\"impliedFormat\":1},{\"version\":\"249b9cab7f5d628b71308c7d9bb0a808b50b091e640ba3ed6e2d0516f4a8d91d\",\"impliedFormat\":1},{\"version\":\"80aae6afc67faa5ac0b32b5b8bc8cc9f7fa299cff15cf09cc2e11fd28c6ae29e\",\"impliedFormat\":1},{\"version\":\"f473cd2288991ff3221165dcf73cd5d24da30391f87e85b3dd4d0450c787a391\",\"impliedFormat\":1},{\"version\":\"499e5b055a5aba1e1998f7311a6c441a369831c70905cc565ceac93c28083d53\",\"impliedFormat\":1},{\"version\":\"54c3e2371e3d016469ad959697fd257e5621e16296fa67082c2575d0bf8eced0\",\"impliedFormat\":1},{\"version\":\"beb8233b2c220cfa0feea31fbe9218d89fa02faa81ef744be8dce5acb89bb1fd\",\"impliedFormat\":1},{\"version\":\"c183b931b68ad184bc8e8372bf663f3d33304772fb482f29fb91b3c391031f3e\",\"impliedFormat\":1},{\"version\":\"5d0375ca7310efb77e3ef18d068d53784faf62705e0ad04569597ae0e755c401\",\"impliedFormat\":1},{\"version\":\"59af37caec41ecf7b2e76059c9672a49e682c1a2aa6f9d7dc78878f53aa284d6\",\"impliedFormat\":1},{\"version\":\"addf417b9eb3f938fddf8d81e96393a165e4be0d4a8b6402292f9c634b1cb00d\",\"impliedFormat\":1},{\"version\":\"48cc3ec153b50985fb95153258a710782b25975b10dd4ac8a4f3920632d10790\",\"impliedFormat\":1},{\"version\":\"adf27937dba6af9f08a68c5b1d3fce0ca7d4b960c57e6d6c844e7d1a8e53adae\",\"impliedFormat\":1},{\"version\":\"e1528ca65ac90f6fa0e4a247eb656b4263c470bb22d9033e466463e13395e599\",\"impliedFormat\":1},{\"version\":\"2e85db9e6fd73cfa3d7f28e0ab6b55417ea18931423bd47b409a96e4a169e8e6\",\"impliedFormat\":1},{\"version\":\"c46e079fe54c76f95c67fb89081b3e399da2c7d109e7dca8e4b58d83e332e605\",\"impliedFormat\":1},{\"version\":\"866078923a56d026e39243b4392e282c1c63159723996fa89243140e1388a98d\",\"impliedFormat\":1},{\"version\":\"830171b27c5fdf9bcbe4cf7d428fcf3ae2c67780fb7fbdccdf70d1623d938bc4\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"1cf059eaf468efcc649f8cf6075d3cb98e9a35a0fe9c44419ec3d2f5428d7123\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"e7721c4f69f93c91360c26a0a84ee885997d748237ef78ef665b153e622b36c1\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"d97fb21da858fb18b8ae72c314e9743fd52f73ebe2764e12af1db32fc03f853f\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"4ea15fd99b2e34cb25fe8346c955000bb70c8b423ae4377a972ef46bfb37f595\",\"impliedFormat\":1},{\"version\":\"7cf69dd5502c41644c9e5106210b5da7144800670cbe861f66726fa209e231c4\",\"impliedFormat\":1},{\"version\":\"72c1f5e0a28e473026074817561d1bc9647909cf253c8d56c41d1df8d95b85f7\",\"impliedFormat\":1},{\"version\":\"f9b4137a0d285bd77dba2e6e895530112264310ae47e07bf311feae428fb8b61\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"8b21e13ed07d0df176ae31d6b7f01f7b17d66dbeb489c0d31d00de2ca14883da\",\"impliedFormat\":1},{\"version\":\"51aecd2df90a3cffea1eb4696b33b2d78594ea2aa2138e6b9471ec4841c6c2ee\",\"impliedFormat\":1},{\"version\":\"9d8f9e63e29a3396285620908e7f14d874d066caea747dc4b2c378f0599166b4\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"5524481e56c48ff486f42926778c0a3cce1cc85dc46683b92b1271865bcf015a\",\"impliedFormat\":1},{\"version\":\"f929f0b6b3421a2d34344b0f421f45aeb2c84ad365ebf29d04312023b3accc58\",\"impliedFormat\":1},{\"version\":\"db9ada976f9e52e13f7ae8b9a320f4b67b87685938c5879187d8864b2fbe97f3\",\"impliedFormat\":1},{\"version\":\"9f39e70a354d0fba29ac3cdf6eca00b7f9e96f64b2b2780c432e8ea27f133743\",\"impliedFormat\":1},{\"version\":\"0dace96cc0f7bc6d0ee2044921bdf19fe42d16284dbcc8ae200800d1c9579335\",\"impliedFormat\":1},{\"version\":\"a2e2bbde231b65c53c764c12313897ffdfb6c49183dd31823ee2405f2f7b5378\",\"impliedFormat\":1},{\"version\":\"ad1cc0ed328f3f708771272021be61ab146b32ecf2b78f3224959ff1e2cd2a5c\",\"impliedFormat\":1},{\"version\":\"c64e1888baaa3253ca4405b455e4bf44f76357868a1bd0a52998ade9a092ad78\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"d8cf132379078d0974a59df26069689a2d33c7dc826b5be56231841cb2f32e58\",\"impliedFormat\":1},{\"version\":\"fbf413fc617837453c878a9174a1f1b383616857a3f8366bc41cf30df4aea7d5\",\"impliedFormat\":1},{\"version\":\"148c73ec11318850f571172ceae3e55ce479d850fe18ec8eae0abd99d9f6c319\",\"impliedFormat\":1},{\"version\":\"230bdc111d7578276e4a3bb9d075d85c78c6b68f428c3a9935e2eaa10f4ae1f5\",\"impliedFormat\":1},{\"version\":\"e8aabbee5e7b9101b03bb4222607d57f38859b8115a8050a4eb91b4ee43a3a73\",\"impliedFormat\":1},{\"version\":\"bbf42f98a5819f4f06e18c8b669a994afe9a17fe520ae3454a195e6eabf7700d\",\"impliedFormat\":1},{\"version\":\"c0bb1b65757c72bbf8ddf7eaa532223bacf58041ff16c883e76f45506596e925\",\"impliedFormat\":1},{\"version\":\"c8b85f7aed29f8f52b813f800611406b0bfe5cf3224d20a4bdda7c7f73ce368e\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"145dcf25fd4967c610c53d93d7bc4dce8fbb1b6dd7935362472d4ae49363c7ba\",\"impliedFormat\":1},{\"version\":\"ff65b8a8bd380c6d129becc35de02f7c29ad7ce03300331ca91311fb4044d1a9\",\"impliedFormat\":1},{\"version\":\"76957a6d92b94b9e2852cf527fea32ad2dc0ef50f67fe2b14bd027c9ceef2d86\",\"impliedFormat\":1},{\"version\":\"9043daec15206650fa119bad6b8d70136021ea7d52673a71f79a87a42ee38d44\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"4e2de7ab2f74e36d7078bccdf831585b10dc6330bab56054921531b03f9beaf3\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"a58a15da4c5ba3df60c910a043281256fa52d36a0fcdef9b9100c646282e88dd\",\"impliedFormat\":1},{\"version\":\"b36beffbf8acdc3ebc58c8bb4b75574b31a2169869c70fc03f82895b93950a12\",\"impliedFormat\":1},{\"version\":\"de263f0089aefbfd73c89562fb7254a7468b1f33b61839aafc3f035d60766cb4\",\"impliedFormat\":1},{\"version\":\"77fbe5eecb6fac4b6242bbf6eebfc43e98ce5ccba8fa44e0ef6a95c945ff4d98\",\"impliedFormat\":1},{\"version\":\"8c81fd4a110490c43d7c578e8c6f69b3af01717189196899a6a44f93daa57a3a\",\"impliedFormat\":1},{\"version\":\"5fb39858b2459864b139950a09adae4f38dad87c25bf572ce414f10e4bd7baab\",\"impliedFormat\":1},{\"version\":\"65faec1b4bd63564aeec33eab9cacfaefd84ce2400f03903a71a1841fbce195f\",\"impliedFormat\":1},{\"version\":\"b33b74b97952d9bf4fbd2951dcfbb5136656ddb310ce1c84518aaa77dbca9992\",\"impliedFormat\":1},{\"version\":\"37ba7b45141a45ce6e80e66f2a96c8a5ab1bcef0fc2d0f56bb58df96ec67e972\",\"impliedFormat\":1},{\"version\":\"45650f47bfb376c8a8ed39d4bcda5902ab899a3150029684ee4c10676d9fbaee\",\"impliedFormat\":1},{\"version\":\"6b306cd4282bbb54d4a6bb23cfb7a271160983dfc38c67b5a132504cfcc34896\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"c119835edf36415081dfd9ed15fc0cd37aaa28d232be029ad073f15f3d88c323\",\"impliedFormat\":1},{\"version\":\"450172a56b944c2d83f45cc11c9a388ea967cd301a21202aa0a23c34c7506a18\",\"impliedFormat\":1},{\"version\":\"9705cd157ffbb91c5cab48bdd2de5a437a372e63f870f8a8472e72ff634d47c1\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"ae86f30d5d10e4f75ce8dcb6e1bd3a12ecec3d071a21e8f462c5c85c678efb41\",\"impliedFormat\":1},{\"version\":\"72f8936aebf0c4a1adab767b97d34ba7d3a308afcf76de4417b9c16fb92ed548\",\"impliedFormat\":1},{\"version\":\"e03460fe72b259f6d25ad029f085e4bedc3f90477da4401d8fbc1efa9793230e\",\"impliedFormat\":1},{\"version\":\"4286a3a6619514fca656089aee160bb6f2e77f4dd53dc5a96b26a0b4fc778055\",\"impliedFormat\":1},{\"version\":\"69e0a41d620fb678a899c65e073413b452f4db321b858fe422ad93fd686cd49a\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"3585d6891e9ea18e07d0755a6d90d71331558ba5dc5561933553209f886db106\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"86be71cbb0593468644932a6eb96d527cfa600cecfc0b698af5f52e51804451d\",\"impliedFormat\":1},{\"version\":\"84dd6b0fd2505135692935599d6606f50a421389e8d4535194bcded307ee5cf2\",\"impliedFormat\":1},{\"version\":\"0d5b085f36e6dc55bc6332ecb9c733be3a534958c238fb8d8d18d4a2b6f2a15a\",\"impliedFormat\":1},{\"version\":\"db19ea066fdc5f97df3f769e582ae3000380ab7942e266654bdb1a4650d19eaf\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"2a034894bf28c220a331c7a0229d33564803abe2ac1b9a5feee91b6b9b6e88ea\",\"impliedFormat\":1},{\"version\":\"d7e9ab1b0996639047c61c1e62f85c620e4382206b3abb430d9a21fb7bc23c77\",\"impliedFormat\":1},{\"version\":\"24259d3dae14de55d22f8b3d3e96954e5175a925ab6a830dc05a1993d4794eda\",\"impliedFormat\":1},{\"version\":\"27e046d30d55669e9b5a325788a9b4073b05ce62607867754d2918af559a0877\",\"impliedFormat\":1},{\"version\":\"be1cc4d94ea60cbe567bc29ed479d42587bf1e6cba490f123d329976b0fe4ee5\",\"impliedFormat\":1},{\"version\":\"42bc0e1a903408137c3df2b06dfd7e402cdab5bbfa5fcfb871b22ebfdb30bd0b\",\"impliedFormat\":1},{\"version\":\"9894dafe342b976d251aac58e616ac6df8db91fb9d98934ff9dd103e9e82578f\",\"impliedFormat\":1},{\"version\":\"413df52d4ea14472c2fa5bee62f7a40abd1eb49be0b9722ee01ee4e52e63beb2\",\"impliedFormat\":1},{\"version\":\"db6d2d9daad8a6d83f281af12ce4355a20b9a3e71b82b9f57cddcca0a8964a96\",\"impliedFormat\":1},{\"version\":\"446a50749b24d14deac6f8843e057a6355dd6437d1fac4f9e5ce4a5071f34bff\",\"impliedFormat\":1},{\"version\":\"182e9fcbe08ac7c012e0a6e2b5798b4352470be29a64fdc114d23c2bab7d5106\",\"impliedFormat\":1},{\"version\":\"14109b34dc927e3b872c0f954a8d2536c245e38062bc47e8f97ba27f922fc9bd\",\"impliedFormat\":1},{\"version\":\"1214c8bb321e2376f9dfc174a97b06c6e7bef05a61a1c50f094617d99fc4c9dd\",\"impliedFormat\":1},{\"version\":\"96ffa70b486207241c0fcedb5d9553684f7fa6746bc2b04c519e7ebf41a51205\",\"impliedFormat\":1},{\"version\":\"5c24c66b3ba29ce9f2a79c719967e6e944131352a117a0bc43fa5b346b5562b3\",\"impliedFormat\":1},{\"version\":\"a86f82d646a739041d6702101afa82dcb935c416dd93cbca7fd754fd0282ce1f\",\"impliedFormat\":1},{\"version\":\"ad0d1d75d129b1c80f911be438d6b61bfa8703930a8ff2be2f0e1f8a91841c64\",\"impliedFormat\":1},{\"version\":\"3e7efde639c6a6c3edb9847b3f61e308bf7a69685b92f665048c45132f51c218\",\"impliedFormat\":1},{\"version\":\"df45ca1176e6ac211eae7ddf51336dc075c5314bc5c253651bae639defd5eec5\",\"impliedFormat\":1},{\"version\":\"8a0e762ceb20c7e72504feef83d709468a70af4abccb304f32d6b9bac1129b2c\",\"impliedFormat\":1},{\"version\":\"f0a1bd6ad77f98dd7ed0d3207fcbcb5dd109ba144799cf41b8ea4dacb4e3e009\",\"impliedFormat\":1},{\"version\":\"ce75b1aebb33d510ff28af960a9221410a3eaf7f18fc5f21f9404075fba77256\",\"impliedFormat\":1},{\"version\":\"ee8df1cb8d0faaca4013a1b442e99130769ce06f438d18d510fed95890067563\",\"impliedFormat\":1},{\"version\":\"6f491d0108927478d3247bbbc489c78c2da7ef552fd5277f1ab6819986fdf0b1\",\"impliedFormat\":1},{\"version\":\"0d8f2b8781c721170b87a6b662b3cb038fd1a721165ecca390352c818d425872\",\"impliedFormat\":1},{\"version\":\"099f915371bf0f8fd812d48a088531397f9edaf2ebfefe422cbe774c274a1621\",\"impliedFormat\":1},{\"version\":\"15a234e5031b19c48a69ccc1607522d6e4b50f57d308ecb7fe863d44cd9f9eb3\",\"impliedFormat\":1},{\"version\":\"bfb7f8475428637bee12bdd31bd9968c1c8a1cc2c3e426c959e2f3a307f8936f\",\"impliedFormat\":1},{\"version\":\"162e071992b34bc36ca257d629547f93cb43728d6fe073ad18a237e4f7c52d7d\",\"impliedFormat\":1},{\"version\":\"f374cb24e93e7798c4d9e83ff872fa52d2cdb36306392b840a6ddf46cb925cb6\",\"impliedFormat\":1},{\"version\":\"197efda3bbcdd3f1bc5379cd0534f1ab740f3be957efb17b320da8e7dcb2743b\",\"impliedFormat\":1},{\"version\":\"0c05e9842ec4f8b7bfebfd3ca61604bb8c914ba8da9b5337c4f25da427a005f2\",\"impliedFormat\":1},{\"version\":\"faed7a5153215dbd6ebe76dfdcc0af0cfe760f7362bed43284be544308b114cf\",\"impliedFormat\":1},{\"version\":\"612f05ebdd6c4c3bab261d327082ad0c876332263b23cb29ea37ef5921086a2e\",\"impliedFormat\":1},{\"version\":\"42277254e219cd5b047373e39d48248cd228d84b200b08e4d4d0949d6a48ef86\",\"impliedFormat\":1},{\"version\":\"b06d68a692d3c1dd12bed02eaa3b4c06cfc2a3e9560b0cecd2014bba480c4e8e\",\"impliedFormat\":1},{\"version\":\"106c6025f1d99fd468fd8bf6e5bda724e11e5905a4076c5d29790b6c3745e50c\",\"impliedFormat\":1},{\"version\":\"380647d8f3b7f852cca6d154a376dbf8ac620a2f12b936594504a8a852e71d2f\",\"impliedFormat\":1},{\"version\":\"148679c6d0f449210a96e7d2e562d589e56fcde87f843a92808b3ff103f1a774\",\"impliedFormat\":1},{\"version\":\"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855\",\"impliedFormat\":1},{\"version\":\"496bbf339f3838c41f164238543e9fe5f1f10659cb30b68903851618464b98ba\",\"impliedFormat\":1},{\"version\":\"78a2869ad0cbf3f9045dda08c0d4562b7e1b2bfe07b19e0db072f5c3c56e9584\",\"impliedFormat\":1},{\"version\":\"9e2739b32f741859263fdba0244c194ca8e96da49b430377930b8f721d77c000\",\"impliedFormat\":1},{\"version\":\"fb1d8e814a3eeb5101ca13515e0548e112bd1ff3fb358ece535b93e94adf5a3a\",\"impliedFormat\":1},{\"version\":\"ffa495b17a5ef1d0399586b590bd281056cee6ce3583e34f39926f8dcc6ecdb5\",\"impliedFormat\":1},{\"version\":\"f8d5ff8eafd37499f2b6a98659dd9b45a321de186b8db6b6142faed0fea3de77\",\"impliedFormat\":1},{\"version\":\"c86fe861cf1b4c46a0fb7d74dffe596cf679a2e5e8b1456881313170f092e3fa\",\"impliedFormat\":1},{\"version\":\"c685d9f68c70fe11ce527287526585a06ea13920bb6c18482ca84945a4e433a7\",\"impliedFormat\":1},{\"version\":\"540cc83ab772a2c6bc509fe1354f314825b5dba3669efdfbe4693ecd3048e34f\",\"impliedFormat\":1},{\"version\":\"121b0696021ab885c570bbeb331be8ad82c6efe2f3b93a6e63874901bebc13e3\",\"impliedFormat\":1},{\"version\":\"4e01846df98d478a2a626ec3641524964b38acaac13945c2db198bf9f3df22ee\",\"impliedFormat\":1},{\"version\":\"678d6d4c43e5728bf66e92fc2269da9fa709cb60510fed988a27161473c3853f\",\"impliedFormat\":1},{\"version\":\"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855\",\"impliedFormat\":1},{\"version\":\"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855\",\"impliedFormat\":1},{\"version\":\"8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881\",\"impliedFormat\":1},{\"version\":\"8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881\",\"impliedFormat\":1},{\"version\":\"aa14cee20aa0db79f8df101fc027d929aec10feb5b8a8da3b9af3895d05b7ba2\",\"impliedFormat\":1},{\"version\":\"493c700ac3bd317177b2eb913805c87fe60d4e8af4fb39c41f04ba81fae7e170\",\"impliedFormat\":1},{\"version\":\"aeb554d876c6b8c818da2e118d8b11e1e559adbe6bf606cc9a611c1b6c09f670\",\"impliedFormat\":1},{\"version\":\"acf5a2ac47b59ca07afa9abbd2b31d001bf7448b041927befae2ea5b1951d9f9\",\"impliedFormat\":1},{\"version\":\"8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881\",\"impliedFormat\":1},{\"version\":\"d71291eff1e19d8762a908ba947e891af44749f3a2cbc5bd2ec4b72f72ea795f\",\"impliedFormat\":1},{\"version\":\"c0480e03db4b816dff2682b347c95f2177699525c54e7e6f6aa8ded890b76be7\",\"impliedFormat\":1},{\"version\":\"892258709c8fc69cc1711d3554503f35101381df7e33eec344356bdc443ba07b\",\"impliedFormat\":1},{\"version\":\"b620391fe8060cf9bedc176a4d01366e6574d7a71e0ac0ab344a4e76576fcbb8\",\"impliedFormat\":1},{\"version\":\"6ac6715916fa75a1f7ebdfeacac09513b4d904b667d827b7535e84ff59679aff\",\"impliedFormat\":1},{\"version\":\"2652448ac55a2010a1f71dd141f828b682298d39728f9871e1cdf8696ef443fd\",\"impliedFormat\":1},{\"version\":\"d682336018141807fb602709e2d95a192828fcb8d5ba06dda3833a8ea98f69e3\",\"impliedFormat\":1},{\"version\":\"6124e973eab8c52cabf3c07575204efc1784aca6b0a30c79eb85fe240a857efa\",\"impliedFormat\":1},{\"version\":\"0d891735a21edc75df51f3eb995e18149e119d1ce22fd40db2b260c5960b914e\",\"impliedFormat\":1},{\"version\":\"3b414b99a73171e1c4b7b7714e26b87d6c5cb03d200352da5342ab4088a54c85\",\"impliedFormat\":1},{\"version\":\"4fbd3116e00ed3a6410499924b6403cc9367fdca303e34838129b328058ede40\",\"impliedFormat\":1},{\"version\":\"9c82171d836c47486074e4ca8e059735bf97b205e70b196535b5efd40cbe1bc5\",\"impliedFormat\":1},{\"version\":\"2f9c89cbb29d362290531b48880a4024f258c6033aaeb7e59fbc62db26819650\",\"impliedFormat\":1},{\"version\":\"c5426dbfc1cf90532f66965a7aa8c1136a78d4d0f96d8180ecbfc11d7722f1a5\",\"impliedFormat\":1},{\"version\":\"65a15fc47900787c0bd18b603afb98d33ede930bed1798fc984d5ebb78b26cf9\",\"impliedFormat\":1},{\"version\":\"9d202701f6e0744adb6314d03d2eb8fc994798fc83d91b691b75b07626a69801\",\"impliedFormat\":1},{\"version\":\"de9d2df7663e64e3a91bf495f315a7577e23ba088f2949d5ce9ec96f44fba37d\",\"impliedFormat\":1},{\"version\":\"c7af78a2ea7cb1cd009cfb5bdb48cd0b03dad3b54f6da7aab615c2e9e9d570c5\",\"impliedFormat\":1},{\"version\":\"1ee45496b5f8bdee6f7abc233355898e5bf9bd51255db65f5ff7ede617ca0027\",\"impliedFormat\":1},{\"version\":\"42189cd810c0bf1247da0742d5744bb7c1486de6fd62269d5c25833b7ec38732\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"3fbdd025f9d4d820414417eeb4107ffa0078d454a033b506e22d3a23bc3d9c41\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"dba114fb6a32b355a9cfc26ca2276834d72fe0e94cd2c3494005547025015369\",\"impliedFormat\":1},{\"version\":\"a8f8e6ab2fa07b45251f403548b78eaf2022f3c2254df3dc186cb2671fe4996d\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"fa6c12a7c0f6b84d512f200690bfc74819e99efae69e4c95c4cd30f6884c526e\",\"impliedFormat\":1},{\"version\":\"f1c32f9ce9c497da4dc215c3bc84b722ea02497d35f9134db3bb40a8d918b92b\",\"impliedFormat\":1},{\"version\":\"b73c319af2cc3ef8f6421308a250f328836531ea3761823b4cabbd133047aefa\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"e433b0337b8106909e7953015e8fa3f2d30797cea27141d1c5b135365bb975a6\",\"impliedFormat\":1},{\"version\":\"40436e992021afc07b61da5f488e9671729a3c5b5e6665b99b1fb43a39081ee3\",\"impliedFormat\":1},{\"version\":\"ddff7fc6edbdc5163a09e22bf8df7bef75f75369ebd7ecea95ba55c4386e2441\",\"impliedFormat\":1},{\"version\":\"3a788c7fb7b1b1153d69a4d1d9e1d0dfbcf1127e703bdb02b6d12698e683d1fb\",\"impliedFormat\":1},{\"version\":\"2e4f37ffe8862b14d8e24ae8763daaa8340c0df0b859d9a9733def0eee7562d9\",\"impliedFormat\":1},{\"version\":\"d38530db0601215d6d767f280e3a3c54b2a83b709e8d9001acb6f61c67e965fc\",\"impliedFormat\":1},{\"version\":\"6ac6715916fa75a1f7ebdfeacac09513b4d904b667d827b7535e84ff59679aff\",\"impliedFormat\":1},{\"version\":\"4805f6161c2c8cefb8d3b8bd96a080c0fe8dbc9315f6ad2e53238f9a79e528a6\",\"impliedFormat\":1},{\"version\":\"b83cb14474fa60c5f3ec660146b97d122f0735627f80d82dd03e8caa39b4388c\",\"impliedFormat\":1},{\"version\":\"42b81043b00ff27c6bd955aea0f6e741545f2265978bf364b614702b72a027ab\",\"impliedFormat\":1},{\"version\":\"7274fbffbd7c9589d8d0ffba68157237afd5cecff1e99881ea3399127e60572f\",\"impliedFormat\":1},{\"version\":\"b73cbf0a72c8800cf8f96a9acfe94f3ad32ca71342a8908b8ae484d61113f647\",\"impliedFormat\":1},{\"version\":\"bae6dd176832f6423966647382c0d7ba9e63f8c167522f09a982f086cd4e8b23\",\"impliedFormat\":1},{\"version\":\"20865ac316b8893c1a0cc383ccfc1801443fbcc2a7255be166cf90d03fac88c9\",\"impliedFormat\":1},{\"version\":\"c9958eb32126a3843deedda8c22fb97024aa5d6dd588b90af2d7f2bfac540f23\",\"impliedFormat\":1},{\"version\":\"461d0ad8ae5f2ff981778af912ba71b37a8426a33301daa00f21c6ccb27f8156\",\"impliedFormat\":1},{\"version\":\"e927c2c13c4eaf0a7f17e6022eee8519eb29ef42c4c13a31e81a611ab8c95577\",\"impliedFormat\":1},{\"version\":\"fcafff163ca5e66d3b87126e756e1b6dfa8c526aa9cd2a2b0a9da837d81bbd72\",\"impliedFormat\":1},{\"version\":\"70246ad95ad8a22bdfe806cb5d383a26c0c6e58e7207ab9c431f1cb175aca657\",\"impliedFormat\":1},{\"version\":\"f00f3aa5d64ff46e600648b55a79dcd1333458f7a10da2ed594d9f0a44b76d0b\",\"impliedFormat\":1},{\"version\":\"772d8d5eb158b6c92412c03228bd9902ccb1457d7a705b8129814a5d1a6308fc\",\"impliedFormat\":1},{\"version\":\"45490817629431853543adcb91c0673c25af52a456479588b6486daba34f68bb\",\"impliedFormat\":1},{\"version\":\"802e797bcab5663b2c9f63f51bdf67eff7c41bc64c0fd65e6da3e7941359e2f7\",\"impliedFormat\":1},{\"version\":\"b01bd582a6e41457bc56e6f0f9de4cb17f33f5f3843a7cf8210ac9c18472fb0f\",\"impliedFormat\":1},{\"version\":\"8b4327413e5af38cd8cb97c59f48c3c866015d5d642f28518e3a891c469f240e\",\"impliedFormat\":1},{\"version\":\"d76bd0317e0958a220262a40d24f43fd5db2ff6e0ef0b2e14d2acdf7f88a78af\",\"impliedFormat\":1},{\"version\":\"43e96a3d5d1411ab40ba2f61d6a3192e58177bcf3b133a80ad2a16591611726d\",\"impliedFormat\":1},{\"version\":\"02c4fc9e6bb27545fa021f6056e88ff5fdf10d9d9f1467f1d10536c6e749ac50\",\"impliedFormat\":1},{\"version\":\"120599fd965257b1f4d0ff794bc696162832d9d8467224f4665f713a3119078b\",\"impliedFormat\":1},{\"version\":\"43ba4f2fa8c698f5c304d21a3ef596741e8e85a810b7c1f9b692653791d8d97a\",\"impliedFormat\":1},{\"version\":\"5433f33b0a20300cca35d2f229a7fc20b0e8477c44be2affeb21cb464af60c76\",\"impliedFormat\":1},{\"version\":\"db036c56f79186da50af66511d37d9fe77fa6793381927292d17f81f787bb195\",\"impliedFormat\":1},{\"version\":\"bd4131091b773973ca5d2326c60b789ab1f5e02d8843b3587effe6e1ea7c9d86\",\"impliedFormat\":1},{\"version\":\"c49469a5349b3cc1965710b5b0f98ed6c028686aa8450bcb3796728873eb923e\",\"impliedFormat\":1},{\"version\":\"4a889f2c763edb4d55cb624257272ac10d04a1cad2ed2948b10ed4a7fda2a428\",\"impliedFormat\":1},{\"version\":\"7bb79aa2fead87d9d56294ef71e056487e848d7b550c9a367523ee5416c44cfa\",\"impliedFormat\":1},{\"version\":\"d88ea80a6447d7391f52352ec97e56b52ebec934a4a4af6e2464cfd8b39c3ba8\",\"impliedFormat\":1},{\"version\":\"d3c8b73132efa48e9399d63e8946a57ed4a7176e2f26d2f144bb14c89fcdefc1\",\"impliedFormat\":1},{\"version\":\"27ff4196654e6373c9af16b6165120e2dd2169f9ad6abb5c935af5abd8c7938c\",\"impliedFormat\":1},{\"version\":\"8c030e515014c10a2b98f9f48408e3ba18023dfd3f56e3312c6c2f3ae1f55a16\",\"impliedFormat\":1},{\"version\":\"d193c8a86144b3a87b22bc1f5534b9c3e0f5a187873ec337c289a183973a58fe\",\"impliedFormat\":1},{\"version\":\"d2aa1580a899bcec04c29b1c37f2a60f62e2f03acb731534d4e210307c982da8\",\"impliedFormat\":1},{\"version\":\"58d70c38037fc0f949243388ff7ae20cf43321107152f14a9d36ca79311e0ada\",\"impliedFormat\":1},{\"version\":\"c7f6485931085bf010fbaf46880a9b9ec1a285ad9dc8c695a9e936f5a48f34b4\",\"impliedFormat\":1},{\"version\":\"796273b2edc72e78a04e86d7c58ae94d370ab93a0ddf40b1aa85a37a1c29ecd7\",\"impliedFormat\":1},{\"version\":\"5df15a69187d737d6d8d066e189ae4f97e41f4d53712a46b2710ff9f8563ec9f\",\"impliedFormat\":1},{\"version\":\"14f6b927888a1112d662877a5966b05ac1bf7ed25d6c84386db4c23c95a5363b\",\"impliedFormat\":1},{\"version\":\"6ac6715916fa75a1f7ebdfeacac09513b4d904b667d827b7535e84ff59679aff\",\"impliedFormat\":1},{\"version\":\"b5189fd031ef3232ec66817df5a8e7b23b079fdf3cd29a0c100eff1e98b2ce8e\",\"impliedFormat\":1},{\"version\":\"b4d871fb9b74fb5f9d4a4d54f5e01254282b2250bb0e8152bbd51aac2e67d9f7\",\"impliedFormat\":1},{\"version\":\"93436bd74c66baba229bfefe1314d122c01f0d4c1d9e35081a0c4f0470ac1a6c\",\"impliedFormat\":1},{\"version\":\"00d3b80428c646edbd62379ea531606ee94eed51c4759cbab5a454e92b379690\",\"impliedFormat\":1},{\"version\":\"49c346823ba6d4b12278c12c977fb3a31c06b9ca719015978cb145eb86da1c61\",\"impliedFormat\":1},{\"version\":\"bfac6e50eaa7e73bb66b7e052c38fdc8ccfc8dbde2777648642af33cf349f7f1\",\"impliedFormat\":1},{\"version\":\"92f7c1a4da7fbfd67a2228d1687d5c2e1faa0ba865a94d3550a3941d7527a45d\",\"impliedFormat\":1},{\"version\":\"f53b120213a9289d9a26f5af90c4c686dd71d91487a0aa5451a38366c70dc64b\",\"impliedFormat\":1},{\"version\":\"83fe880c090afe485a5c02262c0b7cdd76a299a50c48d9bde02be8e908fb4ae6\",\"impliedFormat\":1},{\"version\":\"946a709579b7868a92a70ad70906444f32803fa6e6ce3739b6594c17691837ce\",\"impliedFormat\":1},{\"version\":\"57d67b72e06059adc5e9454de26bbfe567d412b962a501d263c75c2db430f40e\",\"impliedFormat\":1},{\"version\":\"6511e4503cf74c469c60aafd6589e4d14d5eb0a25f9bf043dcbecdf65f261972\",\"impliedFormat\":1},{\"version\":\"5b955caba32e3dc3c3e293e00c104e255f0868848796e5bd5763f990c36d2798\",\"impliedFormat\":1},{\"version\":\"6459054aabb306821a043e02b89d54da508e3a6966601a41e71c166e4ea1474f\",\"impliedFormat\":1},{\"version\":\"bb37588926aba35c9283fe8d46ebf4e79ffe976343105f5c6d45f282793352b2\",\"impliedFormat\":1},{\"version\":\"05c97cddbaf99978f83d96de2d8af86aded9332592f08ce4a284d72d0952c391\",\"impliedFormat\":1},{\"version\":\"72179f9dd22a86deaad4cc3490eb0fe69ee084d503b686985965654013f1391b\",\"impliedFormat\":1},{\"version\":\"2e6114a7dd6feeef85b2c80120fdbfb59a5529c0dcc5bfa8447b6996c97a69f5\",\"impliedFormat\":1},{\"version\":\"7b6ff760c8a240b40dab6e4419b989f06a5b782f4710d2967e67c695ef3e93c4\",\"impliedFormat\":1},{\"version\":\"c8f004e6036aa1c764ad4ec543cf89a5c1893a9535c80ef3f2b653e370de45e6\",\"impliedFormat\":1},{\"version\":\"dd80b1e600d00f5c6a6ba23f455b84a7db121219e68f89f10552c54ba46e4dc9\",\"impliedFormat\":1},{\"version\":\"b064c36f35de7387d71c599bfcf28875849a1dbc733e82bd26cae3d1cd060521\",\"impliedFormat\":1},{\"version\":\"05c7280d72f3ed26f346cbe7cbbbb002fb7f15739197cbbee6ab3fd1a6cb9347\",\"impliedFormat\":1},{\"version\":\"8de9fe97fa9e00ec00666fa77ab6e91b35d25af8ca75dabcb01e14ad3299b150\",\"impliedFormat\":1},{\"version\":\"803cd2aaf1921c218916c2c7ee3fce653e852d767177eb51047ff15b5b253893\",\"impliedFormat\":1},{\"version\":\"7ab12b2f1249187223d11a589f5789c75177a0b597b9eb7f8e2e42d045393347\",\"impliedFormat\":1},{\"version\":\"f974e4a06953682a2c15d5bd5114c0284d5abf8bc0fe4da25cb9159427b70072\",\"impliedFormat\":1},{\"version\":\"50256e9c31318487f3752b7ac12ff365c8949953e04568009c8705db802776fb\",\"impliedFormat\":1},{\"version\":\"7d73b24e7bf31dfb8a931ca6c4245f6bb0814dfae17e4b60c9e194a631fe5f7b\",\"impliedFormat\":1},{\"version\":\"d130c5f73768de51402351d5dc7d1b36eaec980ca697846e53156e4ea9911476\",\"impliedFormat\":1},{\"version\":\"413586add0cfe7369b64979d4ec2ed56c3f771c0667fbde1bf1f10063ede0b08\",\"impliedFormat\":1},{\"version\":\"06472528e998d152375ad3bd8ebcb69ff4694fd8d2effaf60a9d9f25a37a097a\",\"impliedFormat\":1},{\"version\":\"50b5bc34ce6b12eccb76214b51aadfa56572aa6cc79c2b9455cdbb3d6c76af1d\",\"impliedFormat\":1},{\"version\":\"b7e16ef7f646a50991119b205794ebfd3a4d8f8e0f314981ebbe991639023d0e\",\"impliedFormat\":1},{\"version\":\"a401617604fa1f6ce437b81689563dfdc377069e4c58465dbd8d16069aede0a5\",\"impliedFormat\":1},{\"version\":\"6e9082e91370de5040e415cd9f24e595b490382e8c7402c4e938a8ce4bccc99f\",\"impliedFormat\":1},{\"version\":\"8695dec09ad439b0ceef3776ea68a232e381135b516878f0901ed2ea114fd0fe\",\"impliedFormat\":1},{\"version\":\"5ab8a9b437a9b2d1d3729def9694ba15525fd4028307e803fafc09aa30a8486a\",\"impliedFormat\":1},{\"version\":\"0a437ae178f999b46b6153d79095b60c42c996bc0458c04955f1c996dc68b971\",\"impliedFormat\":1},{\"version\":\"74b2a5e5197bd0f2e0077a1ea7c07455bbea67b87b0869d9786d55104006784f\",\"impliedFormat\":1},{\"version\":\"4a7baeb6325920044f66c0f8e5e6f1f52e06e6d87588d837bdf44feb6f35c664\",\"impliedFormat\":1},{\"version\":\"12d218a49dbe5655b911e6cc3c13b2c655e4c783471c3b0432137769c79e1b3c\",\"impliedFormat\":1},{\"version\":\"6b0fc04121360f752d196ba35b6567192f422d04a97b2840d7d85f8b79921c92\",\"impliedFormat\":1},{\"version\":\"1a82deef4c1d39f6882f28d275cad4c01f907b9b39be9cbc472fcf2cf051e05b\",\"impliedFormat\":1},{\"version\":\"4b20fcf10a5413680e39f5666464859fc56b1003e7dfe2405ced82371ebd49b6\",\"impliedFormat\":1},{\"version\":\"c06ef3b2569b1c1ad99fcd7fe5fba8d466e2619da5375dfa940a94e0feea899b\",\"impliedFormat\":1},{\"version\":\"f7d628893c9fa52ba3ab01bcb5e79191636c4331ee5667ecc6373cbccff8ae12\",\"impliedFormat\":1},{\"version\":\"5b2323ca2d1bd97e1f32f09452908e015b012e0e4f958f649cbe0c8989a3fb4f\",\"impliedFormat\":1},{\"version\":\"8c50ee1fcb97de2860d9ebd76561614ab6d365ac8390ef4a02bb4e76929705d1\",\"impliedFormat\":1},{\"version\":\"cff125b5bbb8b819d7835c6b78809416d08da8b00e66611bfe368e0964be7b83\",\"impliedFormat\":1},{\"version\":\"d663134457d8d669ae0df34eabd57028bddc04fc444c4bc04bc5215afc91e1f4\",\"impliedFormat\":1},{\"version\":\"985153f0deb9b4391110331a2f0c114019dbea90cba5ca68a4107700796e0d75\",\"impliedFormat\":1},{\"version\":\"382654d5da3eda8ea18f931d380ab6b099daa4913ae5b64265e6960338572914\",\"impliedFormat\":1},{\"version\":\"58659b06d33fa430bee1105b75cf876c0a35b2567207487c8578aec51ca2d977\",\"impliedFormat\":1},{\"version\":\"d8cdd9477b9c5d1a8fbf2fa58e2eb6723969e7201b3549f998e0d2661dfec9d8\",\"impliedFormat\":1},{\"version\":\"cfa846a7b7847a1d973605fbb8c91f47f3a0f0643c18ac05c47077ebc72e71c7\",\"impliedFormat\":1},{\"version\":\"20e1c8beced348a9bf7864dd2b3ca7efa9ea6675dde8ecae6109b1a3f7248cd2\",\"impliedFormat\":1},{\"version\":\"6c800b281b9e89e69165fd11536195488de3ff53004e55905e6c0059a2d8591e\",\"impliedFormat\":1},{\"version\":\"7d4254b4c6c67a29d5e7f65e67d72540480ac2cfb041ca484847f5ae70480b62\",\"impliedFormat\":1},{\"version\":\"19c3d6db2020cee6f9d8d79e13c15e546e05b6db2020a3ee63789ec74a9990b3\",\"impliedFormat\":1},{\"version\":\"41eeb453ccb75c5b2c3abef97adbbd741bd7e9112a2510e12f03f646dc9ad13d\",\"impliedFormat\":1},{\"version\":\"0285dbbb2fdb8c5e9b50b92570c4c039b1eea2da4cfb5a04e77c1ca8b1949771\",\"impliedFormat\":1},{\"version\":\"301cf1d98bce8b1666184888c7aaacd6c9dfed9185510f4317ed623596e38d2c\",\"impliedFormat\":1},{\"version\":\"6c66d5cf284a56109703f941c92b9a22f2472c14645f80a2dbb8e4ef2128d67c\",\"impliedFormat\":1},{\"version\":\"a3e7d932dc9c09daa99141a8e4800fc6c58c625af0d4bbb017773dc36da75426\",\"impliedFormat\":1},{\"version\":\"0b888a0aa10655cadc0dc3b66cd79a99d79ff376aaacc9b628a3c497646fddab\",\"impliedFormat\":1},{\"version\":\"a57b1802794433adec9ff3fed12aa79d671faed86c49b09e02e1ac41b4f1d33a\",\"impliedFormat\":1},{\"version\":\"ad10d4f0517599cdeca7755b930f148804e3e0e5b5a3847adce0f1f71bbccd74\",\"impliedFormat\":1},{\"version\":\"1042064ece5bb47d6aba91648fbe0635c17c600ebdf567588b4ca715602f0a9d\",\"impliedFormat\":1},{\"version\":\"f56bdc6884648806d34bc66d31cdb787c4718d04105ce2cd88535db214631f82\",\"impliedFormat\":1},{\"version\":\"68ab1530f0ddf7475425917b0e04068afdc1aee2db033bed9aa9b60a914c512e\",\"impliedFormat\":1},{\"version\":\"01479d9d5a5dda16d529b91811375187f61a06e74be294a35ecce77e0b9e8d6c\",\"impliedFormat\":1},{\"version\":\"49f95e989b4632c6c2a578cc0078ee19a5831832d79cc59abecf5160ea71abad\",\"impliedFormat\":1},{\"version\":\"9666533332f26e8995e4d6fe472bdeec9f15d405693723e6497bf94120c566c8\",\"impliedFormat\":1},{\"version\":\"ce0df82a9ae6f914ba08409d4d883983cc08e6d59eb2df02d8e4d68309e7848b\",\"impliedFormat\":1},{\"version\":\"1a4dc28334a926d90ba6a2d811ba0ff6c22775fcc13679521f034c124269fd40\",\"impliedFormat\":1},{\"version\":\"f05315ff85714f0b87cc0b54bcd3dde2716e5a6b99aedcc19cad02bf2403e08c\",\"impliedFormat\":1},{\"version\":\"8a8c64dafaba11c806efa56f5c69f611276471bef80a1db1f71316ec4168acef\",\"impliedFormat\":1},{\"version\":\"5fad3b31fc17a5bc58095118a8b160f5260964787c52e7eb51e3d4fcf5d4a6f0\",\"impliedFormat\":1},{\"version\":\"72105519d0390262cf0abe84cf41c926ade0ff475d35eb21307b2f94de985778\",\"impliedFormat\":1},{\"version\":\"d0a4cac61fa080f2be5ebb68b82726be835689b35994ba0e22e3ed4d2bc45e3b\",\"impliedFormat\":1},{\"version\":\"c857e0aae3f5f444abd791ec81206020fbcc1223e187316677e026d1c1d6fe08\",\"impliedFormat\":1},{\"version\":\"ccf6dd45b708fb74ba9ed0f2478d4eb9195c9dfef0ff83a6092fa3cf2ff53b4f\",\"impliedFormat\":1},{\"version\":\"2d7db1d73456e8c5075387d4240c29a2a900847f9c1bff106a2e490da8fbd457\",\"impliedFormat\":1},{\"version\":\"2b15c805f48e4e970f8ec0b1915f22d13ca6212375e8987663e2ef5f0205e832\",\"impliedFormat\":1},{\"version\":\"205a31b31beb7be73b8df18fcc43109cbc31f398950190a0967afc7a12cb478c\",\"impliedFormat\":1},{\"version\":\"8fca3039857709484e5893c05c1f9126ab7451fa6c29e19bb8c2411a2e937345\",\"impliedFormat\":1},{\"version\":\"35069c2c417bd7443ae7c7cafd1de02f665bf015479fec998985ffbbf500628c\",\"impliedFormat\":1},{\"version\":\"dba6c7006e14a98ec82999c6f89fbbbfd1c642f41db148535f3b77b8018829b8\",\"impliedFormat\":1},{\"version\":\"7f897b285f22a57a5c4dc14a27da2747c01084a542b4d90d33897216dceeea2e\",\"impliedFormat\":1},{\"version\":\"7e0b7f91c5ab6e33f511efc640d36e6f933510b11be24f98836a20a2dc914c2d\",\"impliedFormat\":1},{\"version\":\"045b752f44bf9bbdcaffd882424ab0e15cb8d11fa94e1448942e338c8ef19fba\",\"impliedFormat\":1},{\"version\":\"2894c56cad581928bb37607810af011764a2f511f575d28c9f4af0f2ef02d1ab\",\"impliedFormat\":1},{\"version\":\"0a72186f94215d020cb386f7dca81d7495ab6c17066eb07d0f44a5bf33c1b21a\",\"impliedFormat\":1},{\"version\":\"d96b39301d0ded3f1a27b47759676a33a02f6f5049bfcbde81e533fd10f50dcb\",\"impliedFormat\":1},{\"version\":\"2ded4f930d6abfaa0625cf55e58f565b7cbd4ab5b574dd2cb19f0a83a2f0be8b\",\"impliedFormat\":1},{\"version\":\"0aedb02516baf3e66b2c1db9fef50666d6ed257edac0f866ea32f1aa05aa474f\",\"impliedFormat\":1},{\"version\":\"ca0f4d9068d652bad47e326cf6ba424ac71ab866e44b24ddb6c2bd82d129586a\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"04d36005fcbeac741ac50c421181f4e0316d57d148d37cc321a8ea285472462b\",\"impliedFormat\":1},{\"version\":\"56ccb49443bfb72e5952f7012f0de1a8679f9f75fc93a5c1ac0bafb28725fc5f\",\"impliedFormat\":1},{\"version\":\"20fa37b636fdcc1746ea0738f733d0aed17890d1cd7cb1b2f37010222c23f13e\",\"impliedFormat\":1},{\"version\":\"d90b9f1520366d713a73bd30c5a9eb0040d0fb6076aff370796bc776fd705943\",\"impliedFormat\":1},{\"version\":\"bc03c3c352f689e38c0ddd50c39b1e65d59273991bfc8858a9e3c0ebb79c023b\",\"impliedFormat\":1},{\"version\":\"19df3488557c2fc9b4d8f0bac0fd20fb59aa19dec67c81f93813951a81a867f8\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"b25350193e103ae90423c5418ddb0ad1168dc9c393c9295ef34980b990030617\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"bef86adb77316505c6b471da1d9b8c9e428867c2566270e8894d4d773a1c4dc2\",\"impliedFormat\":1},{\"version\":\"1b239954e46191b95913d20771cf4283f63c3ebac79d7e30736a8d40b094fdaf\",\"impliedFormat\":1},{\"version\":\"96171c03c2e7f314d66d38acd581f9667439845865b7f85da8df598ff9617476\",\"impliedFormat\":1},{\"version\":\"d0af5b1b8d6262ef94fee7f8a39d12db1e21762a048ae33d4a5941a5b9fc2e1d\",\"impliedFormat\":1},{\"version\":\"9252d498a77517aab5d8d4b5eb9d71e4b225bbc7123df9713e08181de63180f6\",\"impliedFormat\":1},{\"version\":\"54d320df89710586fddb799b1b4f5b3364773a510dc5d507f3fbf52d8a734ae4\",\"impliedFormat\":1},{\"version\":\"35e6379c3f7cb27b111ad4c1aa69538fd8e788ab737b8ff7596a1b40e96f4f90\",\"impliedFormat\":1},{\"version\":\"1fffe726740f9787f15b532e1dc870af3cd964dbe29e191e76121aa3dd8693f2\",\"impliedFormat\":1},{\"version\":\"371bf6127c1d427836de95197155132501cb6b69ef8709176ce6e0b85d059264\",\"impliedFormat\":1},{\"version\":\"2bafd700e617d3693d568e972d02b92224b514781f542f70d497a8fdf92d52a2\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"5542d8a7ea13168cb573be0d1ba0d29460d59430fb12bb7bf4674efd5604e14c\",\"impliedFormat\":1},{\"version\":\"af48e58339188d5737b608d41411a9c054685413d8ae88b8c1d0d9bfabdf6e7e\",\"impliedFormat\":1},{\"version\":\"8c70ddc0c22d85e56011d49fddfaae3405eb53d47b59327b9dd589e82df672e7\",\"impliedFormat\":1},{\"version\":\"a67b87d0281c97dfc1197ef28dfe397fc2c865ccd41f7e32b53f647184cc7307\",\"impliedFormat\":1},{\"version\":\"771ffb773f1ddd562492a6b9aaca648192ac3f056f0e1d997678ff97dbb6bf9b\",\"impliedFormat\":1},{\"version\":\"232f70c0cf2b432f3a6e56a8dc3417103eb162292a9fd376d51a3a9ea5fbbf6f\",\"impliedFormat\":1},{\"version\":\"4162ae9d4c1b8a7ab7f9ef287d98e9000b57062db1eb1ae735c4814845c2cb5d\",\"impliedFormat\":1},{\"version\":\"a0ba218ac1baa3da0d5d9c1ec1a7c2f8676c284e6f5b920d6d049b13fa267377\",\"impliedFormat\":1},{\"version\":\"9f9bb6755a8ce32d656ffa4763a8144aa4f274d6b69b59d7c32811031467216e\",\"impliedFormat\":1},{\"version\":\"bc9ee0192f056b3d5527bcd78dc3f9e527a9ba2bdc0a2c296fbc9027147df4b2\",\"impliedFormat\":1},{\"version\":\"330896c1a2b9693edd617be24fbf9e5895d6e18c7955d6c08f028f272b37314d\",\"impliedFormat\":1},{\"version\":\"1d9c0a9a6df4e8f29dc84c25c5aa0bb1da5456ebede7a03e03df08bb8b27bae6\",\"impliedFormat\":1},{\"version\":\"84380af21da938a567c65ef95aefb5354f676368ee1a1cbb4cae81604a4c7d17\",\"impliedFormat\":1},{\"version\":\"1af3e1f2a5d1332e136f8b0b95c0e6c0a02aaabd5092b36b64f3042a03debf28\",\"impliedFormat\":1},{\"version\":\"30d8da250766efa99490fc02801047c2c6d72dd0da1bba6581c7e80d1d8842a4\",\"impliedFormat\":1},{\"version\":\"03566202f5553bd2d9de22dfab0c61aa163cabb64f0223c08431fb3fc8f70280\",\"impliedFormat\":1},{\"version\":\"4c0a1233155afb94bd4d7518c75c84f98567cd5f13fc215d258de196cdb40d91\",\"impliedFormat\":1},{\"version\":\"f9ceb394e029da0392ebd49564002b01fb4517cef0d14b238f2a8e7362a833e1\",\"impliedFormat\":1},{\"version\":\"1de80059b8078ea5749941c9f863aa970b4735bdbb003be4925c853a8b6b4450\",\"impliedFormat\":1},{\"version\":\"f33c4ebea7e97c42ff0a3eec914e66a1ba57220d3e5c4d418dca491e69ad06cc\",\"signature\":\"4b51f5ddd2717dcd6601b5e27f488b701148671eed93e3df813946238dbff332\"},{\"version\":\"ca394785e8d423376c7c74e188ca93c910540476cdc282a7e0f4bac0bc2e129d\",\"signature\":\"91628f57128a322ba255d122af85fe5085e77230a18fc8be7a4f4fef3e2f337a\"},\"2965c8a6aeaf2ceed5dc13ceeaa5c8c7b686e2ba380bef56cf07b8d2cad37ce4\",{\"version\":\"1558c25801614f205f67b9c5ae837920c6b6ce6bdbee350578a6e7ae0025396b\",\"signature\":\"a97d2df9ead1233ad1ee970356868ed1e6bf1a783b2c274d295f95513435e879\"},\"bf328638ad6376f1af982dbb7783611725f60160cd76115bd58888a2befaeed8\",\"5a60f84170c9fd0fc6cdec50a373a1a12fee02df8c90698ba5b1fdd865ecfa9d\",{\"version\":\"acd8fd5090ac73902278889c38336ff3f48af6ba03aa665eb34a75e7ba1dccc4\",\"impliedFormat\":1},{\"version\":\"d6258883868fb2680d2ca96bc8b1352cab69874581493e6d52680c5ffecdb6cc\",\"impliedFormat\":1},{\"version\":\"1b61d259de5350f8b1e5db06290d31eaebebc6baafd5f79d314b5af9256d7153\",\"impliedFormat\":1},{\"version\":\"f258e3960f324a956fc76a3d3d9e964fff2244ff5859dcc6ce5951e5413ca826\",\"impliedFormat\":1},{\"version\":\"643f7232d07bf75e15bd8f658f664d6183a0efaca5eb84b48201c7671a266979\",\"impliedFormat\":1},{\"version\":\"616775f16134fa9d01fc677ad3f76e68c051a056c22ab552c64cc281a9686790\",\"impliedFormat\":1},{\"version\":\"65c24a8baa2cca1de069a0ba9fba82a173690f52d7e2d0f1f7542d59d5eb4db0\",\"impliedFormat\":1},{\"version\":\"f9fe6af238339a0e5f7563acee3178f51db37f32a2e7c09f85273098cee7ec49\",\"impliedFormat\":1},{\"version\":\"1de8c302fd35220d8f29dea378a4ae45199dc8ff83ca9923aca1400f2b28848a\",\"impliedFormat\":1},{\"version\":\"77e71242e71ebf8528c5802993697878f0533db8f2299b4d36aa015bae08a79c\",\"impliedFormat\":1},{\"version\":\"98a787be42bd92f8c2a37d7df5f13e5992da0d967fab794adbb7ee18370f9849\",\"impliedFormat\":1},{\"version\":\"332248ee37cca52903572e66c11bef755ccc6e235835e63d3c3e60ddda3e9b93\",\"impliedFormat\":1},{\"version\":\"94e8cc88ae2ef3d920bb3bdc369f48436db123aa2dc07f683309ad8c9968a1e1\",\"impliedFormat\":1},{\"version\":\"4545c1a1ceca170d5d83452dd7c4994644c35cf676a671412601689d9a62da35\",\"impliedFormat\":1},{\"version\":\"320f4091e33548b554d2214ce5fc31c96631b513dffa806e2e3a60766c8c49d9\",\"impliedFormat\":1},{\"version\":\"a2d648d333cf67b9aeac5d81a1a379d563a8ffa91ddd61c6179f68de724260ff\",\"impliedFormat\":1},{\"version\":\"d90d5f524de38889d1e1dbc2aeef00060d779f8688c02766ddb9ca195e4a713d\",\"impliedFormat\":1},{\"version\":\"a3f41ed1b4f2fc3049394b945a68ae4fdefd49fa1739c32f149d32c0545d67f5\",\"impliedFormat\":1},{\"version\":\"b0309e1eda99a9e76f87c18992d9c3689b0938266242835dd4611f2b69efe456\",\"impliedFormat\":1},{\"version\":\"47699512e6d8bebf7be488182427189f999affe3addc1c87c882d36b7f2d0b0e\",\"impliedFormat\":1},{\"version\":\"6ceb10ca57943be87ff9debe978f4ab73593c0c85ee802c051a93fc96aaf7a20\",\"impliedFormat\":1},{\"version\":\"1de3ffe0cc28a9fe2ac761ece075826836b5a02f340b412510a59ba1d41a505a\",\"impliedFormat\":1},{\"version\":\"e46d6cc08d243d8d0d83986f609d830991f00450fb234f5b2f861648c42dc0d8\",\"impliedFormat\":1},{\"version\":\"1c0a98de1323051010ce5b958ad47bc1c007f7921973123c999300e2b7b0ecc0\",\"impliedFormat\":1},{\"version\":\"ff863d17c6c659440f7c5c536e4db7762d8c2565547b2608f36b798a743606ca\",\"impliedFormat\":1},{\"version\":\"5412ad0043cd60d1f1406fc12cb4fb987e9a734decbdd4db6f6acf71791e36fe\",\"impliedFormat\":1},{\"version\":\"ad036a85efcd9e5b4f7dd5c1a7362c8478f9a3b6c3554654ca24a29aa850a9c5\",\"impliedFormat\":1},{\"version\":\"fedebeae32c5cdd1a85b4e0504a01996e4a8adf3dfa72876920d3dd6e42978e7\",\"impliedFormat\":1},{\"version\":\"1d079c37fa53e3c21ed3fa214a27507bda9991f2a41458705b19ed8c2b61173d\",\"impliedFormat\":1},{\"version\":\"5bf5c7a44e779790d1eb54c234b668b15e34affa95e78eada73e5757f61ed76a\",\"impliedFormat\":1},{\"version\":\"5835a6e0d7cd2738e56b671af0e561e7c1b4fb77751383672f4b009f4e161d70\",\"impliedFormat\":1},{\"version\":\"5c634644d45a1b6bc7b05e71e05e52ec04f3d73d9ac85d5927f647a5f965181a\",\"impliedFormat\":1},{\"version\":\"4b7f74b772140395e7af67c4841be1ab867c11b3b82a51b1aeb692822b76c872\",\"impliedFormat\":1},{\"version\":\"27be6622e2922a1b412eb057faa854831b95db9db5035c3f6d4b677b902ab3b7\",\"impliedFormat\":1},{\"version\":\"a68d4b3182e8d776cdede7ac9630c209a7bfbb59191f99a52479151816ef9f9e\",\"impliedFormat\":99},{\"version\":\"39644b343e4e3d748344af8182111e3bbc594930fff0170256567e13bbdbebb0\",\"impliedFormat\":99},{\"version\":\"ed7fd5160b47b0de3b1571c5c5578e8e7e3314e33ae0b8ea85a895774ee64749\",\"impliedFormat\":99},{\"version\":\"63a7595a5015e65262557f883463f934904959da563b4f788306f699411e9bac\",\"impliedFormat\":1},{\"version\":\"4ba137d6553965703b6b55fd2000b4e07ba365f8caeb0359162ad7247f9707a6\",\"impliedFormat\":1},{\"version\":\"6de125ea94866c736c6d58d68eb15272cf7d1020a5b459fea1c660027eca9a90\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"8fac4a15690b27612d8474fb2fc7cc00388df52d169791b78d1a3645d60b4c8b\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"064ac1c2ac4b2867c2ceaa74bbdce0cb6a4c16e7c31a6497097159c18f74aa7c\",\"impliedFormat\":1},{\"version\":\"3dc14e1ab45e497e5d5e4295271d54ff689aeae00b4277979fdd10fa563540ae\",\"impliedFormat\":1},{\"version\":\"d3b315763d91265d6b0e7e7fa93cfdb8a80ce7cdd2d9f55ba0f37a22db00bdb8\",\"impliedFormat\":1},{\"version\":\"323b930459780c1089784783f64067e11cb3af31ef192a7b1f6276d0b9ba6575\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"53e074a281b50dc3bbdddac7a1c2946100c80a7f5c3161452ab98b31db2e31ba\",\"impliedFormat\":1},{\"version\":\"f3d3e999a323c85c8a63ce90c6e4624ff89fe137a0e2508fddc08e0556d08abf\",\"impliedFormat\":1},{\"version\":\"84b4a189991675adc7bceda90aeeb277aaf15c7061740d8616268448e5505541\",\"impliedFormat\":1},{\"version\":\"49ae37a1b5de16f762c8a151eeaec6b558ce3c27251052ef7a361144af42cad4\",\"impliedFormat\":1},{\"version\":\"fc9e630f9302d0414ccd6c8ed2706659cff5ae454a56560c6122fa4a3fac5bbd\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"aa0a44af370a2d7c1aac988a17836f57910a6c52689f52f5b3ac1d4c6cadcb23\",\"impliedFormat\":1},{\"version\":\"0ac74c7586880e26b6a599c710b59284a284e084a2bbc82cd40fb3fbfdea71ae\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"2ce12357dadbb8efc4e4ec4dab709c8071bf992722fc9adfea2fe0bd5b50923f\",\"impliedFormat\":1},{\"version\":\"31bd1a31f935276adf90384a35edbd4614018ff008f57d62ffb57ac538e94e51\",\"impliedFormat\":1},{\"version\":\"ffd344731abee98a0a85a735b19052817afd2156d97d1410819cd9bcd1bd575e\",\"impliedFormat\":1},{\"version\":\"475e07c959f4766f90678425b45cf58ac9b95e50de78367759c1e5118e85d5c3\",\"impliedFormat\":1},{\"version\":\"a524ae401b30a1b0814f1bbcdae459da97fa30ae6e22476e506bb3f82e3d9456\",\"impliedFormat\":1},{\"version\":\"7375e803c033425e27cb33bae21917c106cb37b508fd242cccd978ef2ee244c7\",\"impliedFormat\":1},{\"version\":\"eeb890c7e9218afdad2f30ad8a76b0b0b5161d11ce13b6723879de408e6bc47a\",\"impliedFormat\":1},{\"version\":\"103bc790569f3a2fcd7bb113f986891a9d4f5626257a9bf69283a7ba8d8c6dde\",\"impliedFormat\":1},{\"version\":\"dfbcc400ac6d20b941ccc7bd9031b9d9f54e4d495dd79117334e771959df4805\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"2f8e16da629db93b8ac37eead362fa3d335ec7dffe78768b8c08507bc538e14f\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"6b386c7b6ce6f369d18246904fa5eac73566167c88fb6508feba74fa7501a384\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"592a109e67b907ffd2078cd6f727d5c326e06eaada169eef8fb18546d96f6797\",\"impliedFormat\":1},{\"version\":\"f2eb1e35cae499d57e34b4ac3650248776fe7dbd9a3ec34b23754cfd8c22fceb\",\"impliedFormat\":1},{\"version\":\"fbed43a6fcf5b675f5ec6fc960328114777862b58a2bb19c109e8fc1906caa09\",\"impliedFormat\":1},{\"version\":\"9e98bd421e71f70c75dae7029e316745c89fa7b8bc8b43a91adf9b82c206099c\",\"impliedFormat\":1},{\"version\":\"fc803e6b01f4365f71f51f9ce13f71396766848204d4f7a1b2b6154434b84b15\",\"impliedFormat\":1},{\"version\":\"c8109fe76467db6e801d0edfbc50e6826934686467c9418ce6b246232ce7f109\",\"affectsGlobalScope\":true,\"impliedFormat\":1},{\"version\":\"afba8037ba6511d63f8670523deedd2dd7754fd0c75689c2a88c84d1fe82edb9\",\"affectsGlobalScope\":true,\"impliedFormat\":1}],\"root\":[69,74,82,86,99,101,451,[454,461],[896,938],[942,944],975,[979,981],984,985,987,988,[1365,1370]],\"options\":{\"composite\":true,\"declaration\":true,\"declarationMap\":true,\"esModuleInterop\":true,\"jsx\":4,\"module\":99,\"noUncheckedIndexedAccess\":true,\"skipLibCheck\":true,\"strict\":true,\"target\":9},\"referencedMap\":[[92,1],[96,2],[95,3],[91,4],[94,5],[87,6],[93,1],[448,7],[450,8],[449,9],[447,10],[178,11],[177,12],[149,13],[150,14],[182,15],[181,16],[180,14],[184,17],[183,18],[179,19],[185,19],[186,20],[191,21],[192,22],[190,23],[189,24],[188,25],[187,21],[196,26],[195,27],[194,28],[89,29],[90,30],[193,31],[167,32],[164,33],[203,19],[202,19],[201,19],[160,33],[172,14],[173,19],[169,19],[168,19],[159,19],[206,34],[205,35],[158,36],[157,36],[200,33],[170,19],[198,37],[161,19],[166,38],[163,39],[165,32],[148,40],[197,13],[175,41],[176,41],[171,19],[162,19],[156,36],[199,14],[237,42],[236,43],[234,44],[212,45],[235,19],[66,46],[68,47],[67,48],[238,33],[239,19],[240,19],[247,49],[246,50],[241,51],[242,39],[146,52],[446,53],[445,54],[244,19],[245,55],[243,33],[70,14],[71,56],[73,57],[72,58],[248,33],[249,19],[250,19],[251,19],[253,19],[252,19],[265,59],[264,60],[257,61],[258,39],[259,46],[255,62],[256,63],[260,64],[261,19],[262,55],[263,33],[269,21],[268,37],[267,65],[273,66],[272,67],[271,37],[266,37],[154,68],[270,69],[277,70],[276,71],[275,19],[274,19],[137,72],[120,73],[122,74],[119,75],[135,76],[118,77],[138,78],[123,77],[124,79],[139,77],[133,80],[125,77],[127,81],[128,77],[129,82],[126,77],[117,83],[130,76],[131,77],[140,84],[132,72],[141,85],[134,86],[136,87],[116,41],[152,88],[151,89],[153,90],[444,91],[279,92],[278,93],[389,19],[207,32],[208,33],[216,33],[215,94],[218,19],[217,19],[233,95],[232,96],[219,19],[220,19],[221,38],[222,39],[223,32],[224,94],[226,33],[225,19],[214,97],[210,98],[213,99],[209,100],[228,101],[227,102],[231,19],[229,103],[230,19],[281,104],[280,94],[211,105],[81,106],[80,19],[288,107],[287,108],[284,109],[286,109],[282,19],[283,109],[285,109],[299,32],[297,33],[292,33],[301,19],[303,110],[302,111],[291,19],[300,19],[290,19],[298,112],[294,39],[295,32],[289,6],[293,19],[296,19],[308,113],[306,113],[307,113],[313,114],[312,115],[309,113],[305,116],[311,113],[310,113],[304,41],[322,32],[323,33],[326,19],[325,19],[329,117],[328,118],[321,38],[319,39],[320,32],[317,119],[316,120],[315,121],[324,19],[318,122],[327,19],[338,32],[339,33],[342,123],[341,124],[337,112],[334,125],[336,32],[332,126],[331,127],[330,128],[335,129],[340,19],[349,130],[348,131],[345,132],[347,132],[343,19],[344,132],[346,132],[355,133],[354,21],[353,134],[352,135],[351,33],[350,37],[359,136],[361,19],[363,137],[362,138],[356,19],[358,136],[360,19],[357,136],[377,32],[370,33],[381,19],[380,19],[368,19],[383,139],[382,140],[375,33],[376,19],[374,19],[365,37],[373,19],[372,38],[369,39],[371,32],[364,40],[378,19],[379,19],[366,37],[367,19],[204,141],[174,19],[387,142],[393,143],[392,144],[391,142],[385,142],[384,21],[390,145],[388,142],[386,142],[397,146],[396,147],[394,148],[395,149],[404,150],[403,151],[400,152],[402,153],[401,154],[399,155],[398,153],[415,19],[417,32],[414,19],[411,19],[407,156],[412,19],[419,157],[418,158],[416,125],[405,159],[408,160],[410,161],[413,19],[406,162],[409,19],[423,163],[422,6],[421,164],[420,6],[427,165],[426,165],[431,166],[430,167],[429,165],[428,165],[425,19],[424,168],[439,32],[443,169],[442,170],[438,112],[436,125],[437,32],[440,14],[434,171],[433,172],[432,173],[435,174],[441,19],[78,175],[85,176],[84,177],[77,178],[333,39],[83,41],[145,179],[144,180],[142,41],[143,181],[75,41],[76,182],[147,14],[79,183],[155,184],[121,177],[254,14],[88,14],[104,14],[103,185],[109,186],[107,187],[105,41],[108,188],[106,189],[110,14],[314,41],[462,41],[463,190],[464,191],[469,192],[465,191],[468,41],[466,41],[467,41],[112,193],[114,194],[115,195],[111,41],[113,41],[976,41],[977,14],[978,196],[1251,41],[960,197],[965,198],[970,199],[971,200],[969,201],[972,41],[973,202],[961,203],[948,204],[947,41],[946,205],[1044,206],[1045,206],[1046,207],[992,208],[1047,209],[1048,210],[1049,211],[990,41],[1050,212],[1051,213],[1052,214],[1053,215],[1054,216],[1055,217],[1056,217],[1057,218],[1058,219],[1059,220],[1060,221],[993,41],[991,41],[1061,222],[1062,223],[1063,224],[1097,225],[1064,226],[1065,41],[1066,227],[1067,228],[1068,229],[1069,230],[1070,231],[1071,232],[1072,233],[1073,234],[1074,235],[1075,235],[1076,236],[1077,41],[1078,237],[1079,238],[1081,239],[1080,240],[1082,241],[1083,242],[1084,243],[1085,244],[1086,245],[1087,246],[1088,247],[1089,248],[1090,249],[1091,250],[1092,251],[1093,252],[1094,253],[994,41],[995,254],[996,41],[997,41],[1040,255],[1041,256],[1042,41],[1043,241],[1095,257],[1096,258],[1101,259],[1333,14],[1102,260],[1100,261],[1335,262],[1334,263],[1098,264],[1331,41],[1099,265],[62,41],[64,266],[1330,14],[65,14],[945,41],[998,41],[1418,267],[1439,41],[1433,268],[1420,269],[1419,41],[1417,270],[1421,41],[1415,271],[1422,41],[1440,272],[1423,41],[1432,273],[1434,274],[1416,275],[1438,276],[1436,277],[1435,278],[1437,279],[1424,41],[1430,280],[1427,281],[1429,282],[1428,283],[1426,284],[1425,41],[1431,285],[453,286],[452,287],[97,41],[63,41],[558,288],[537,289],[634,41],[538,290],[474,288],[475,288],[476,288],[477,288],[478,288],[479,288],[480,288],[481,288],[482,288],[483,288],[484,288],[485,288],[486,288],[487,288],[488,288],[489,288],[490,288],[491,288],[470,41],[492,288],[493,288],[494,41],[495,288],[496,288],[498,288],[497,288],[499,288],[500,288],[501,288],[502,288],[503,288],[504,288],[505,288],[506,288],[507,288],[508,288],[509,288],[510,288],[511,288],[512,288],[513,288],[514,288],[515,288],[516,288],[517,288],[519,288],[520,288],[521,288],[518,288],[522,288],[523,288],[524,288],[525,288],[526,288],[527,288],[528,288],[529,288],[530,288],[531,288],[532,288],[533,288],[534,288],[535,288],[536,288],[539,291],[540,288],[541,288],[542,292],[543,293],[544,288],[545,288],[546,288],[547,288],[550,288],[548,288],[549,288],[472,41],[551,288],[552,288],[553,288],[554,288],[555,288],[556,288],[557,288],[559,294],[560,288],[561,288],[562,288],[564,288],[563,288],[565,288],[566,288],[567,288],[568,288],[569,288],[570,288],[571,288],[572,288],[573,288],[574,288],[576,288],[575,288],[577,288],[578,41],[579,41],[580,41],[727,295],[581,288],[582,288],[583,288],[584,288],[585,288],[586,288],[587,41],[588,288],[589,41],[590,288],[591,288],[592,288],[593,288],[594,288],[595,288],[596,288],[597,288],[598,288],[599,288],[600,288],[601,288],[602,288],[603,288],[604,288],[605,288],[606,288],[607,288],[608,288],[609,288],[610,288],[611,288],[612,288],[613,288],[614,288],[615,288],[616,288],[617,288],[618,288],[619,288],[620,288],[621,288],[622,41],[623,288],[624,288],[625,288],[626,288],[627,288],[628,288],[629,288],[630,288],[631,288],[632,288],[633,288],[635,296],[823,297],[728,290],[730,290],[731,290],[732,290],[733,290],[734,290],[729,290],[735,290],[737,290],[736,290],[738,290],[739,290],[740,290],[741,290],[742,290],[743,290],[744,290],[745,290],[747,290],[746,290],[748,290],[749,290],[750,290],[751,290],[752,290],[753,290],[754,290],[755,290],[756,290],[757,290],[758,290],[759,290],[760,290],[761,290],[762,290],[764,290],[765,290],[763,290],[766,290],[767,290],[768,290],[769,290],[770,290],[771,290],[772,290],[773,290],[774,290],[775,290],[776,290],[777,290],[779,290],[778,290],[781,290],[780,290],[782,290],[783,290],[784,290],[785,290],[786,290],[787,290],[788,290],[789,290],[790,290],[791,290],[792,290],[793,290],[794,290],[796,290],[795,290],[797,290],[798,290],[799,290],[801,290],[800,290],[802,290],[803,290],[804,290],[805,290],[806,290],[807,290],[809,290],[808,290],[810,290],[811,290],[812,290],[813,290],[814,290],[471,288],[815,290],[816,290],[818,290],[817,290],[819,290],[820,290],[821,290],[822,290],[636,288],[637,288],[638,41],[639,41],[640,41],[641,288],[642,41],[643,41],[644,41],[645,41],[646,41],[647,288],[648,288],[649,288],[650,288],[651,288],[652,288],[653,288],[654,288],[659,298],[657,299],[658,300],[656,301],[655,288],[660,288],[661,288],[662,288],[663,288],[664,288],[665,288],[666,288],[667,288],[668,288],[669,288],[670,41],[671,41],[672,288],[673,288],[674,41],[675,41],[676,41],[677,288],[678,288],[679,288],[680,288],[681,294],[682,288],[683,288],[684,288],[685,288],[686,288],[687,288],[688,288],[689,288],[690,288],[691,288],[692,288],[693,288],[694,288],[695,288],[696,288],[697,288],[698,288],[699,288],[700,288],[701,288],[702,288],[703,288],[704,288],[705,288],[706,288],[707,288],[708,288],[709,288],[710,288],[711,288],[712,288],[713,288],[714,288],[715,288],[716,288],[717,288],[718,288],[719,288],[720,288],[721,288],[722,288],[473,302],[723,41],[724,41],[725,41],[726,41],[959,303],[958,304],[100,14],[986,14],[1377,305],[1382,306],[1344,307],[1145,308],[1255,309],[1243,310],[1250,311],[1160,41],[1138,41],[1143,41],[1231,312],[1271,313],[1144,41],[1131,314],[1232,315],[1233,316],[1329,317],[1226,318],[1190,319],[1237,320],[1238,321],[1236,322],[1235,41],[1234,323],[1256,324],[1146,325],[1297,41],[1298,326],[1133,327],[1147,328],[1170,327],[1193,327],[1111,327],[1253,329],[1252,41],[1242,330],[1340,41],[1116,41],[1306,331],[1307,332],[1303,14],[1358,41],[1212,41],[1309,46],[1304,333],[1363,334],[1362,335],[1357,41],[1354,41],[1215,336],[1214,41],[1356,337],[1305,14],[1129,338],[1126,339],[1128,41],[1359,41],[1355,41],[1361,340],[1360,41],[1127,341],[1396,342],[982,343],[1177,344],[1176,345],[1175,346],[1400,14],[1174,347],[1165,41],[1403,41],[940,348],[939,41],[1406,41],[1405,14],[1407,349],[1104,41],[1239,350],[1240,351],[1241,352],[1137,41],[1244,41],[1121,353],[1103,41],[1321,14],[1109,354],[1320,355],[1319,356],[1310,41],[1311,41],[1318,41],[1313,41],[1316,357],[1312,41],[1314,358],[1317,359],[1315,358],[1142,41],[1135,41],[1136,327],[1260,41],[1265,360],[1266,361],[1264,362],[1262,363],[1263,364],[1258,41],[1327,46],[1125,46],[1376,365],[1383,366],[1387,367],[1350,368],[1349,41],[1206,41],[1408,369],[1343,370],[1227,371],[1228,372],[1301,373],[1219,41],[1326,374],[1220,375],[1328,376],[1323,377],[1322,41],[1324,41],[1224,41],[1296,378],[1351,379],[1352,380],[1221,381],[1225,382],[1217,383],[1210,384],[1342,385],[1274,386],[1208,387],[1112,388],[1341,389],[1108,390],[1267,391],[1259,41],[1268,392],[1285,393],[1257,41],[1284,394],[989,41],[1279,395],[1134,41],[1299,396],[1275,41],[1117,41],[1118,41],[1283,397],[1141,41],[1163,398],[1223,399],[1348,400],[1222,41],[1282,41],[1261,41],[1287,401],[1288,402],[1139,41],[1290,403],[1292,404],[1291,405],[1245,41],[1281,388],[1294,406],[1280,407],[1286,408],[1149,41],[1153,41],[1152,41],[1151,41],[1156,41],[1150,41],[1158,41],[1155,41],[1154,41],[1157,41],[1159,409],[1148,41],[1200,410],[1199,41],[1205,411],[1201,412],[1204,413],[1203,413],[1207,411],[1202,412],[1122,414],[1192,415],[1339,416],[1409,41],[1391,417],[1393,418],[1338,419],[1392,420],[1353,379],[1308,379],[1140,41],[1124,421],[1123,422],[1119,423],[1120,424],[1132,425],[1162,425],[1171,425],[1194,426],[1172,426],[1114,427],[1113,41],[1198,428],[1197,429],[1196,430],[1195,431],[1115,432],[1161,433],[1337,434],[1302,435],[1332,436],[1336,437],[1230,438],[1229,439],[1213,440],[1189,441],[1191,442],[1188,443],[1293,444],[1209,41],[1381,41],[1295,445],[1211,41],[1164,446],[1218,350],[1216,447],[1166,448],[1269,449],[1404,41],[1167,450],[1270,450],[1379,41],[1378,41],[1380,41],[1402,41],[1272,451],[1186,452],[1130,453],[1178,41],[1107,454],[1168,41],[1385,14],[1106,41],[1395,455],[1185,14],[1389,46],[1184,456],[1346,457],[1183,455],[1110,41],[1397,458],[1181,14],[1182,14],[1173,41],[1105,41],[1180,459],[1179,460],[1169,461],[1300,234],[1273,234],[1289,41],[1277,462],[1276,41],[1325,341],[1187,14],[1347,463],[1371,14],[1374,464],[1375,465],[1372,14],[1373,41],[1254,254],[1249,466],[1248,41],[1247,467],[1246,41],[1345,468],[1384,469],[1386,470],[1388,471],[941,472],[1390,473],[1394,474],[1398,475],[1414,476],[983,477],[1364,478],[1399,479],[1401,480],[1410,481],[1413,353],[1412,41],[1411,482],[968,483],[967,41],[957,484],[954,485],[955,41],[956,41],[953,486],[882,487],[843,488],[842,489],[881,490],[883,491],[824,14],[825,14],[826,14],[870,492],[849,493],[850,493],[851,494],[852,14],[853,14],[854,495],[827,496],[855,14],[856,14],[857,497],[858,14],[859,14],[860,14],[861,14],[862,14],[863,14],[828,496],[864,14],[865,14],[866,496],[867,14],[868,14],[869,497],[884,494],[871,487],[872,487],[873,487],[874,487],[875,487],[876,41],[877,487],[878,498],[885,499],[886,500],[895,501],[840,502],[829,503],[830,487],[831,503],[832,487],[833,41],[834,487],[835,41],[836,487],[837,487],[838,487],[839,487],[880,487],[847,504],[848,505],[844,506],[845,507],[879,508],[841,14],[846,509],[887,503],[888,503],[894,510],[889,487],[890,503],[891,503],[892,487],[893,503],[102,41],[1278,511],[964,512],[974,513],[962,199],[963,514],[966,515],[952,516],[950,517],[951,518],[949,41],[98,41],[60,41],[61,41],[10,41],[11,41],[13,41],[12,41],[2,41],[14,41],[15,41],[16,41],[17,41],[18,41],[19,41],[20,41],[21,41],[3,41],[22,41],[23,41],[4,41],[24,41],[28,41],[25,41],[26,41],[27,41],[29,41],[30,41],[31,41],[5,41],[32,41],[33,41],[34,41],[35,41],[6,41],[39,41],[36,41],[37,41],[38,41],[40,41],[7,41],[41,41],[46,41],[47,41],[42,41],[43,41],[44,41],[45,41],[8,41],[51,41],[48,41],[49,41],[50,41],[52,41],[9,41],[53,41],[54,41],[55,41],[57,41],[56,41],[1,41],[58,41],[59,41],[1016,519],[1028,520],[1014,521],[1029,522],[1038,523],[1005,524],[1006,525],[1004,526],[1037,482],[1032,527],[1036,528],[1008,529],[1025,530],[1007,531],[1035,532],[1002,533],[1003,527],[1009,534],[1010,41],[1015,535],[1013,534],[1000,536],[1039,537],[1030,538],[1019,539],[1018,534],[1020,540],[1023,541],[1017,542],[1021,543],[1033,482],[1011,544],[1012,545],[1024,546],[1001,522],[1027,547],[1026,534],[1022,548],[1031,41],[999,41],[1034,549],[69,550],[74,551],[82,552],[86,553],[101,554],[451,555],[454,556],[457,557],[458,558],[459,559],[460,560],[461,559],[896,561],[897,562],[898,563],[899,564],[900,565],[901,566],[902,567],[903,568],[904,569],[905,556],[906,570],[907,571],[908,572],[909,573],[911,574],[913,575],[455,576],[914,573],[915,562],[916,577],[917,578],[918,579],[919,580],[920,581],[921,582],[922,583],[923,584],[456,585],[924,586],[910,587],[925,568],[929,588],[926,573],[930,589],[931,590],[932,591],[933,573],[934,592],[912,593],[935,594],[937,595],[936,596],[938,597],[927,598],[942,599],[943,46],[928,46],[944,600],[975,601],[99,602],[981,603],[979,604],[984,605],[980,606],[985,607],[987,608],[988,609],[1365,610],[1366,611],[1367,612],[1368,613],[1369,614],[1370,615]],\"affectedFilesPendingEmit\":[[69,49],[74,49],[82,49],[86,49],[101,49],[451,49],[454,49],[457,49],[458,49],[459,49],[460,49],[461,49],[896,49],[897,49],[898,49],[899,49],[900,49],[901,49],[902,49],[903,49],[904,49],[905,49],[906,49],[907,49],[908,49],[909,49],[911,49],[913,49],[455,49],[914,49],[915,49],[916,49],[917,49],[918,49],[919,49],[920,49],[921,49],[922,49],[923,49],[456,49],[924,49],[910,49],[925,49],[929,49],[926,49],[930,49],[931,49],[932,49],[933,49],[934,49],[912,49],[935,49],[937,49],[936,49],[938,49],[927,49],[942,49],[943,49],[928,49],[944,49],[975,49],[99,49],[981,49],[979,49],[984,49],[980,49],[985,49],[987,49],[988,49],[1365,49],[1366,49],[1367,49],[1368,49],[1369,49],[1370,49]],\"emitSignatures\":[69,74,82,86,99,101,451,454,455,456,457,458,459,460,461,896,897,898,899,900,901,902,903,904,905,906,907,908,909,910,911,912,913,914,915,916,917,918,919,920,921,922,923,924,925,926,927,928,929,930,931,932,933,934,935,936,937,938,942,943,944,975,979,980,981,984,985,987,988,1365,1366,1367,1368,1369,1370],\"version\":\"5.9.3\"}"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"compilerOptions\": {\n    \"allowSyntheticDefaultImports\": true,\n    \"baseUrl\": \".\",\n    \"esModuleInterop\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"react-jsx\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"noEmit\": true,\n    \"paths\": {\n      \"@coss/ui/*\": [\"packages/ui/src/*\"]\n    },\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"target\": \"ESNext\"\n  },\n  \"display\": \"coss\",\n  \"exclude\": [\"node_modules\", \"dist\"],\n  \"references\": [{ \"path\": \"packages/ui\" }]\n}\n"
  },
  {
    "path": "turbo.json",
    "content": "{\n  \"$schema\": \"https://turborepo.com/schema.json\",\n  \"globalEnv\": [\"NODE_ENV\"],\n  \"tasks\": {\n    \"build\": {\n      \"dependsOn\": [\"^build\"],\n      \"inputs\": [\"$TURBO_DEFAULT$\", \".env*\"],\n      \"outputs\": [\".next/**\", \"!.next/cache/**\"]\n    },\n    \"clean\": {\n      \"cache\": false\n    },\n    \"dev\": {\n      \"cache\": false,\n      \"persistent\": true\n    },\n    \"lint\": {\n      \"cache\": true,\n      \"dependsOn\": [\"^lint\"]\n    },\n    \"typecheck\": {\n      \"cache\": true,\n      \"dependsOn\": [\"^typecheck\"]\n    }\n  },\n  \"ui\": \"tui\"\n}\n"
  }
]